@elliemae/ds-banner 2.2.0-alpha.3 → 3.0.0-next.0

package/esm/DSBanner.js

@@ -1,37 +1,47 @@
-import * as React from "react";
-import React2, { useLayoutEffect, useRef, useCallback, useState } from "react";
-import { CloseX } from "@elliemae/ds-icons";
-import { describe } from "react-desc";
-import { icons } from "./utils/icons";
-import { propTypes } from "./propTypes";
-import { defaultProps } from "./defaultProps";
-import {
-  StyledActionLink,
-  StyledCloseButton,
-  StyledInnerContainer,
-  StyledBannerContainer,
-  StyledIconContainer,
-  StyledSubTitle,
-  StyledTitle
-} from "./styles";
-const DSBanner = ({
-  type,
-  isOpen,
-  onClose,
-  label,
-  body,
-  actionLink,
-  showCloseButton,
-  containerProps,
-  actionRef
-}) => {
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import React, { useRef, useState, useLayoutEffect, useCallback } from 'react';
+import { CloseX } from '@elliemae/ds-icons';
+import { describe } from 'react-desc';
+import { icons } from './utils/icons.js';
+import { propTypes } from './propTypes.js';
+import { defaultProps } from './defaultProps.js';
+import { StyledBannerContainer, StyledInnerContainer, StyledIconContainer, StyledTitle, StyledSubTitle, StyledActionLink, StyledCloseButton } from './styles.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var _CloseX, _span;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+const DSBanner = _ref => {
+  let {
+    type,
+    isOpen,
+    onClose,
+    label,
+    body,
+    actionLink,
+    showCloseButton,
+    containerProps,
+    actionRef
+  } = _ref;
   const innerContainerRef = useRef(null);
   const linkRef = useRef(null);
   const [current, setCurrent] = useState(isOpen);
   const [isAnimating, setIsAnimating] = useState(false);
-  const [alertTabIndex, setAlertTabIndex] = useState(void 0);
-  const ownerState = { type };
-  React2.useEffect(() => {
+  const [alertTabIndex, setAlertTabIndex] = useState(undefined);
+  const ownerState = {
+    type
+  };
+  React.useEffect(() => {
     if (actionRef && actionRef.current) {
       actionRef.current.focusOnWrapper = () => {
         if (innerContainerRef.current) {
@@ -41,6 +51,7 @@ const DSBanner = ({
           }, 100);
         }
       };
+
       actionRef.current.focusOnLink = () => {
         if (linkRef.current) {
           linkRef.current.focus();
@@ -49,69 +60,62 @@ const DSBanner = ({
     }
   }, [actionRef]);
   useLayoutEffect(() => {
-    if (isOpen !== current || isOpen)
-      setIsAnimating(true);
-    else
-      setIsAnimating(false);
+    if (isOpen !== current || isOpen) setIsAnimating(true);else setIsAnimating(false);
   }, [isOpen, current]);
   const handleBlur = useCallback(() => {
-    setAlertTabIndex(void 0);
+    setAlertTabIndex(undefined);
   }, []);
-  const handleOnKeyDown = useCallback((e) => {
-    if (e.key === "Enter" || e.key === " ") {
+  const handleOnKeyDown = useCallback(e => {
+    if (e.key === 'Enter' || e.key === ' ') {
       e.preventDefault();
-      if (linkRef.current)
-        linkRef.current.click();
+      if (linkRef.current) linkRef.current.click();
     }
   }, []);
-  if (!isAnimating && !isOpen)
-    return null;
-  return /* @__PURE__ */ React2.createElement(StyledBannerContainer, {
-    type,
-    isOpen,
-    isAnimating,
+  if (!isAnimating && !isOpen) return null;
+  return /*#__PURE__*/jsx(StyledBannerContainer, _objectSpread(_objectSpread({
+    type: type,
+    isOpen: isOpen,
+    isAnimating: isAnimating,
     onAnimationEnd: () => setCurrent(isOpen),
-    "data-testid": "ds-banner-container",
-    ...containerProps,
-    ownerState
-  }, /* @__PURE__ */ React2.createElement(StyledInnerContainer, {
-    type,
-    isOpen,
-    ref: innerContainerRef,
-    isAnimating,
-    "data-testid": "ds-banner",
-    role: "alert",
-    tabIndex: alertTabIndex,
-    onBlur: handleBlur
-  }, /* @__PURE__ */ React2.createElement(StyledIconContainer, {
-    "data-testid": "ds-banner-icon"
-  }, icons[type]), /* @__PURE__ */ React2.createElement(StyledTitle, null, label), /* @__PURE__ */ React2.createElement(StyledSubTitle, null, /* @__PURE__ */ React2.createElement("span", null, body), actionLink && /* @__PURE__ */ React2.createElement(StyledActionLink, {
-    "data-testid": "ds-banner-action-link",
-    onClick: actionLink.onClick,
-    href: actionLink.href,
-    ref: linkRef,
-    onKeyDown: handleOnKeyDown,
-    tabIndex: 0,
-    isBodyEmpty: body
-  }, actionLink.label)), showCloseButton ? /* @__PURE__ */ React2.createElement(StyledCloseButton, {
-    "data-testid": "ds-banner-close-button",
-    buttonType: "secondary",
-    onClick: onClose,
-    "aria-label": "Close icon",
-    icon: /* @__PURE__ */ React2.createElement(CloseX, {
-      width: "12px",
-      height: "12px"
+    "data-testid": "ds-banner-container"
+  }, containerProps), {}, {
+    ownerState: ownerState,
+    children: /*#__PURE__*/jsxs(StyledInnerContainer, {
+      type: type,
+      isOpen: isOpen,
+      ref: innerContainerRef,
+      isAnimating: isAnimating,
+      "data-testid": "ds-banner",
+      role: "alert",
+      tabIndex: alertTabIndex,
+      onBlur: handleBlur,
+      children: [/*#__PURE__*/_jsx(StyledIconContainer, {
+        "data-testid": "ds-banner-icon"
+      }, void 0, icons[type]), /*#__PURE__*/_jsx(StyledTitle, {}, void 0, label), /*#__PURE__*/_jsx(StyledSubTitle, {}, void 0, /*#__PURE__*/_jsx("span", {}, void 0, body), actionLink && /*#__PURE__*/jsx(StyledActionLink, {
+        "data-testid": "ds-banner-action-link",
+        onClick: actionLink.onClick,
+        href: actionLink.href,
+        ref: linkRef,
+        onKeyDown: handleOnKeyDown,
+        tabIndex: 0,
+        isBodyEmpty: body,
+        children: actionLink.label
+      })), showCloseButton ? /*#__PURE__*/_jsx(StyledCloseButton, {
+        "data-testid": "ds-banner-close-button",
+        buttonType: "secondary",
+        onClick: onClose,
+        "aria-label": "Close icon",
+        icon: _CloseX || (_CloseX = /*#__PURE__*/_jsx(CloseX, {
+          width: "12px",
+          height: "12px"
+        }))
+      }) : _span || (_span = /*#__PURE__*/_jsx("span", {}))]
     })
-  }) : /* @__PURE__ */ React2.createElement("span", null)));
+  }));
 };
+
 DSBanner.defaultProps = defaultProps;
-DSBanner.propTypes = propTypes;
 const DSBannerWithSchema = describe(DSBanner);
 DSBannerWithSchema.propTypes = propTypes;
-var DSBanner_default = DSBanner;
-export {
-  DSBanner,
-  DSBannerWithSchema,
-  DSBanner_default as default
-};
-//# sourceMappingURL=DSBanner.js.map
+
+export { DSBannerWithSchema, DSBanner as default };

package/esm/defaultProps.js

@@ -1,16 +1,18 @@
-import * as React from "react";
-import { BANNER_TYPES } from "./utils/bannerTypes";
+import { BANNER_TYPES } from './utils/bannerTypes.js';
+
 const defaultProps = {
   containerProps: {},
-  label: "",
-  body: "",
+  label: '',
+  body: '',
   type: BANNER_TYPES.INFO,
   isOpen: true,
   onClose: () => null,
   showCloseButton: true,
-  actionLink: { label: "", onClick: () => null, href: "" }
+  actionLink: {
+    label: '',
+    onClick: () => null,
+    href: ''
+  }
 };
-export {
-  defaultProps
-};
-//# sourceMappingURL=defaultProps.js.map
+
+export { defaultProps };

package/esm/index.d.js

@@ -1,2 +1 @@
-import * as React from "react";
-//# sourceMappingURL=index.d.js.map
+

package/esm/index.js

@@ -1,8 +1,2 @@
-import * as React from "react";
-import { default as default2 } from "./DSBanner";
-export * from "./DSBanner";
-export * from "./utils/bannerTypes";
-export {
-  default2 as default
-};
-//# sourceMappingURL=index.js.map
+export { DSBannerWithSchema, default } from './DSBanner.js';
+export { BANNER_TYPES } from './utils/bannerTypes.js';

package/esm/propTypes.js

@@ -1,26 +1,20 @@
-import * as React from "react";
-import { PropTypes } from "react-desc";
-import { BANNER_TYPES } from "./utils/bannerTypes";
+import { PropTypes } from 'react-desc';
+import { BANNER_TYPES } from './utils/bannerTypes.js';
+
 const propTypes = {
-  containerProps: PropTypes.object.description("Set of Properties attached to the main container").defaultValue({}),
-  label: PropTypes.string.description("banner s label").defaultValue(""),
-  body: PropTypes.string.description("banner s body content").defaultValue(""),
-  type: PropTypes.oneOf(Object.values(BANNER_TYPES)).description("banner s type").defaultValue(BANNER_TYPES.INFO),
-  onClose: PropTypes.func.description("function executed when the banner closes"),
-  isOpen: PropTypes.bool.description("whether the banner is open or closed").defaultValue(true),
-  showCloseButton: PropTypes.bool.description("whether to show close button or not").defaultValue(true),
+  containerProps: PropTypes.object.description('Set of Properties attached to the main container').defaultValue({}),
+  label: PropTypes.string.description('banner s label').defaultValue(''),
+  body: PropTypes.string.description('banner s body content').defaultValue(''),
+  type: PropTypes.oneOf(Object.values(BANNER_TYPES)).description('banner s type').defaultValue(BANNER_TYPES.INFO),
+  onClose: PropTypes.func.description('function executed when the banner closes'),
+  isOpen: PropTypes.bool.description('whether the banner is open or closed').defaultValue(true),
+  showCloseButton: PropTypes.bool.description('whether to show close button or not').defaultValue(true),
   actionLink: PropTypes.shape({
     label: PropTypes.string,
     onClick: PropTypes.func,
     href: PropTypes.string
-  }).description("Properties of the ActionLink component").defaultValue({}),
-  actionRef: PropTypes.object.description(`
-      Reference to use actions:
-      - focusOnLink: function to focus the banner
-      - focusOnWrapper: function to focus the link
-    `).defaultValue({})
+  }).description('Properties of the ActionLink component').defaultValue({}),
+  actionRef: PropTypes.object.description("\n      Reference to use actions:\n      - focusOnLink: function to focus the banner\n      - focusOnWrapper: function to focus the link\n    ").defaultValue({})
 };
-export {
-  propTypes
-};
-//# sourceMappingURL=propTypes.js.map
+
+export { propTypes };

package/esm/styles.js

@@ -1,78 +1,131 @@
-import * as React from "react";
-import { styled } from "@elliemae/ds-system";
-import DSButton from "@elliemae/ds-button";
-import { handleAnimation, handleBorderColor } from "./utils/styleHelpers";
-const StyledBannerContainer = styled("div", { name: "DS-Banner", slot: "root" })`
-  overflow: hidden;
-  height: ${({ isOpen }) => isOpen ? "auto" : "0px"};
-  ${({ isAnimating, isOpen, height }) => handleAnimation(isAnimating, isOpen, height)};
-`;
-const StyledInnerContainer = styled("div", {
-  name: "DS-Banner",
-  slot: "innerContainer"
-})`
-  padding-right: 6px;
-  display: grid;
-  align-items: center;
-  min-height: 41px;
-  width: 100%;
-  background-color: ${({ theme }) => theme.colors.neutral["000"]};
-  border-bottom: 5px solid ${({ type, theme }) => handleBorderColor(type, theme)};
-  ${({ isAnimating, isOpen }) => handleAnimation(isAnimating, isOpen)};
-  &:focus {
-    position: relative;
-    &:after {
-      content: '';
-      display: block;
-      position: absolute;
-      top: 0;
-      left: 0;
-      pointer-events: none;
-      border-radius: 2px;
-      width: calc(100%);
-      border: 2px solid #1e79c2;
-      height: calc(100% + 4px);
-    }
-  }
-  grid-template-columns: auto minmax(auto, auto) minmax(auto, 1fr) auto;
-`;
-const StyledIconContainer = styled("div", { name: "DS-Banner", slot: "iconContainer" })`
-  margin-right: ${({ theme }) => theme.space.xxs};
-  margin-left: ${({ theme }) => theme.space.xs};
-`;
-const StyledTitle = styled("div", { name: "DS-Banner", slot: "title" })`
-  color: ${({ theme }) => theme.colors.neutral[700]};
-  font-size: ${({ theme }) => theme.fontSizes.label[400]};
-  font-weight: ${({ theme }) => theme.fontWeights.semibold};
-`;
-const StyledSubTitle = styled("div", { name: "DS-Banner", slot: "subtitle" })`
-  width: 100%;
-  margin-left: ${({ theme }) => theme.space.xs};
-  font-size: ${({ theme }) => theme.fontSizes.subTitle[400]};
-  font-weight: ${({ theme }) => theme.fontWeights.regular};
-`;
-const StyledActionLink = styled("a", { name: "DS-Banner", slot: "action" })`
-  margin-left: ${({ theme, isBodyEmpty }) => isBodyEmpty ? theme.space.xs : 0};
-  white-space: nowrap;
-  text-decoration: none;
-  line-height: 1.1;
-  font-size: ${({ theme }) => theme.fontSizes.hyperlink[400]};
-  font-weight: ${({ theme }) => theme.fontWeights.regular};
-  color: ${({ theme }) => theme.colors.brand[600]};
-`;
-const StyledCloseButton = styled(DSButton, { name: "DS-Banner", slot: "closeButton" })`
-  margin-left: ${({ theme }) => theme.space.xxs};
-  &:not(focus) {
-    border: transparent;
-  }
-`;
-export {
-  StyledActionLink,
-  StyledBannerContainer,
-  StyledCloseButton,
-  StyledIconContainer,
-  StyledInnerContainer,
-  StyledSubTitle,
-  StyledTitle
-};
-//# sourceMappingURL=styles.js.map
+import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
+import { styled } from '@elliemae/ds-system';
+import DSButton from '@elliemae/ds-button';
+import { handleAnimation, handleBorderColor } from './utils/styleHelpers.js';
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+const StyledBannerContainer = styled('div', {
+  name: 'DS-Banner',
+  slot: 'root'
+})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  overflow: hidden;\n  height: ", ";\n  ", ";\n"])), _ref => {
+  let {
+    isOpen
+  } = _ref;
+  return isOpen ? 'auto' : '0px';
+}, _ref2 => {
+  let {
+    isAnimating,
+    isOpen,
+    height
+  } = _ref2;
+  return handleAnimation(isAnimating, isOpen, height);
+});
+const StyledInnerContainer = styled('div', {
+  name: 'DS-Banner',
+  slot: 'innerContainer'
+})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding-right: 6px;\n  display: grid;\n  align-items: center;\n  min-height: 41px;\n  width: 100%;\n  background-color: ", ";\n  border-bottom: 5px solid ", ";\n  ", ";\n  &:focus {\n    position: relative;\n    &:after {\n      content: '';\n      display: block;\n      position: absolute;\n      top: 0;\n      left: 0;\n      pointer-events: none;\n      border-radius: 2px;\n      width: calc(100%);\n      border: 2px solid #1e79c2;\n      height: calc(100% + 4px);\n    }\n  }\n  grid-template-columns: auto minmax(auto, auto) minmax(auto, 1fr) auto;\n"])), _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.colors.neutral['000'];
+}, _ref4 => {
+  let {
+    type,
+    theme
+  } = _ref4;
+  return handleBorderColor(type, theme);
+}, _ref5 => {
+  let {
+    isAnimating,
+    isOpen
+  } = _ref5;
+  return handleAnimation(isAnimating, isOpen);
+});
+const StyledIconContainer = styled('div', {
+  name: 'DS-Banner',
+  slot: 'iconContainer'
+})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-right: ", ";\n  margin-left: ", ";\n"])), _ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme.space.xxs;
+}, _ref7 => {
+  let {
+    theme
+  } = _ref7;
+  return theme.space.xs;
+});
+const StyledTitle = styled('div', {
+  name: 'DS-Banner',
+  slot: 'title'
+})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n"])), _ref8 => {
+  let {
+    theme
+  } = _ref8;
+  return theme.colors.neutral[700];
+}, _ref9 => {
+  let {
+    theme
+  } = _ref9;
+  return theme.fontSizes.label[400];
+}, _ref10 => {
+  let {
+    theme
+  } = _ref10;
+  return theme.fontWeights.semibold;
+});
+const StyledSubTitle = styled('div', {
+  name: 'DS-Banner',
+  slot: 'subtitle'
+})(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  width: 100%;\n  margin-left: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n"])), _ref11 => {
+  let {
+    theme
+  } = _ref11;
+  return theme.space.xs;
+}, _ref12 => {
+  let {
+    theme
+  } = _ref12;
+  return theme.fontSizes.subTitle[400];
+}, _ref13 => {
+  let {
+    theme
+  } = _ref13;
+  return theme.fontWeights.regular;
+});
+const StyledActionLink = styled('a', {
+  name: 'DS-Banner',
+  slot: 'action'
+})(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  margin-left: ", ";\n  white-space: nowrap;\n  text-decoration: none;\n  line-height: 1.1;\n  font-size: ", ";\n  font-weight: ", ";\n  color: ", ";\n"])), _ref14 => {
+  let {
+    theme,
+    isBodyEmpty
+  } = _ref14;
+  return isBodyEmpty ? theme.space.xs : 0;
+}, _ref15 => {
+  let {
+    theme
+  } = _ref15;
+  return theme.fontSizes.hyperlink[400];
+}, _ref16 => {
+  let {
+    theme
+  } = _ref16;
+  return theme.fontWeights.regular;
+}, _ref17 => {
+  let {
+    theme
+  } = _ref17;
+  return theme.colors.brand[600];
+});
+const StyledCloseButton = styled(DSButton, {
+  name: 'DS-Banner',
+  slot: 'closeButton'
+})(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  margin-left: ", ";\n  &:not(focus) {\n    border: transparent;\n  }\n"])), _ref18 => {
+  let {
+    theme
+  } = _ref18;
+  return theme.space.xxs;
+});
+
+export { StyledActionLink, StyledBannerContainer, StyledCloseButton, StyledIconContainer, StyledInnerContainer, StyledSubTitle, StyledTitle };

package/esm/utils/bannerTypes.js

@@ -1,11 +1,8 @@
-import * as React from "react";
 const BANNER_TYPES = {
-  INFO: "info",
-  SUCCESS: "success",
-  WARNING: "warning",
-  DANGER: "danger"
+  INFO: 'info',
+  SUCCESS: 'success',
+  WARNING: 'warning',
+  DANGER: 'danger'
 };
-export {
-  BANNER_TYPES
-};
-//# sourceMappingURL=bannerTypes.js.map
+
+export { BANNER_TYPES };

package/esm/utils/icons.js

@@ -1,29 +1,28 @@
-import * as React from "react";
-import React2 from "react";
-import { AlertsDetailFill, InfoFill, SuccessFill, WarningSquare } from "@elliemae/ds-icons";
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import { SuccessFill, InfoFill, AlertsDetailFill, WarningSquare } from '@elliemae/ds-icons';
+
 const icons = {
-  success: /* @__PURE__ */ React2.createElement(SuccessFill, {
+  success: /*#__PURE__*/_jsx(SuccessFill, {
     fill: "#207e56",
     width: "20px",
     height: "20px"
   }),
-  info: /* @__PURE__ */ React2.createElement(InfoFill, {
+  info: /*#__PURE__*/_jsx(InfoFill, {
     fill: "#1e79c2",
     width: "20px",
     height: "20px"
   }),
-  danger: /* @__PURE__ */ React2.createElement(AlertsDetailFill, {
+  danger: /*#__PURE__*/_jsx(AlertsDetailFill, {
     fill: "#c64252",
     width: "20px",
     height: "20px"
   }),
-  warning: /* @__PURE__ */ React2.createElement(WarningSquare, {
+  warning: /*#__PURE__*/_jsx(WarningSquare, {
     fill: "#d17a00",
     width: "20px",
     height: "20px"
   })
 };
-export {
-  icons
-};
-//# sourceMappingURL=icons.js.map
+
+export { icons };