@elliemae/ds-banner 2.0.0-next.10 → 2.0.0-next.11

package/cjs/DSBanner.js

@@ -5,8 +5,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _jsx = require('@babel/runtime/helpers/jsx');
 require('core-js/modules/web.dom-collections.iterator.js');
-var react = require('react');
-var CloseX = require('@elliemae/ds-icons/CloseX');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var React = require('react');
+var dsIcons = require('@elliemae/ds-icons');
 var reactDesc = require('react-desc');
 var icons = require('./utils/icons.js');
 var propTypes = require('./propTypes.js');
@@ -18,38 +23,57 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var CloseX__default = /*#__PURE__*/_interopDefaultLegacy(CloseX);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _CloseX;
+var _CloseX, _span;
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-const DSBanner = ({
-  type,
-  isOpen,
-  onClose,
-  label,
-  body,
-  actionLink,
-  showCloseButton,
-  containerProps
-}) => {
-  const innerContainerRef = react.useRef(null);
-  const linkRef = react.useRef(null);
-  const [current, setCurrent] = react.useState(isOpen);
-  const [isAnimating, setIsAnimating] = react.useState(false);
-  const [height, setHeight] = react.useState(0);
-  react.useEffect(() => {
-    if (innerContainerRef.current) {
-      setHeight(innerContainerRef.current.offsetHeight);
+const DSBanner = _ref => {
+  let {
+    type,
+    isOpen,
+    onClose,
+    label,
+    body,
+    actionLink,
+    showCloseButton,
+    containerProps,
+    actionRef
+  } = _ref;
+  const innerContainerRef = React.useRef(null);
+  const linkRef = React.useRef(null);
+  const [current, setCurrent] = React.useState(isOpen);
+  const [isAnimating, setIsAnimating] = React.useState(false);
+  const [height, setHeight] = React.useState(0);
+  const [alertTabIndex, setAlertTabIndex] = React.useState(undefined);
+  React__default["default"].useEffect(() => {
+    if (actionRef && actionRef.current) {
+      actionRef.current.focusOnWrapper = () => {
+        if (innerContainerRef.current) {
+          setAlertTabIndex(0);
+          setTimeout(() => {
+            innerContainerRef.current.focus();
+          }, 100);
+        }
+      };
+
+      actionRef.current.focusOnLink = () => {
+        if (linkRef.current) {
+          linkRef.current.focus();
+        }
+      };
     }
-  }, [isAnimating, isOpen]);
-  react.useLayoutEffect(() => {
+  }, [actionRef]);
+  React.useLayoutEffect(() => {
     if (isOpen !== current || isOpen) setIsAnimating(true);else setIsAnimating(false);
   }, [isOpen, current]);
-  const handleOnKeyDown = react.useCallback(e => {
+  const handleBlur = React.useCallback(() => {
+    setAlertTabIndex(undefined);
+  }, []);
+  const handleOnKeyDown = React.useCallback(e => {
     if (e.key === 'Enter' || e.key === ' ') {
       e.preventDefault();
       if (linkRef.current) linkRef.current.click();
@@ -71,6 +95,8 @@ const DSBanner = ({
       isAnimating: isAnimating,
       "data-testid": "ds-banner",
       role: "alert",
+      tabIndex: alertTabIndex,
+      onBlur: handleBlur,
       children: [/*#__PURE__*/_jsx__default["default"](styles.StyledIconContainer, {
         "data-testid": "ds-banner-icon"
       }, void 0, icons.icons[type]), /*#__PURE__*/_jsx__default["default"](styles.StyledTitle, {}, void 0, label), /*#__PURE__*/_jsx__default["default"](styles.StyledSubTitle, {}, void 0, /*#__PURE__*/_jsx__default["default"]("span", {}, void 0, body), actionLink && /*#__PURE__*/jsxRuntime.jsx(styles.StyledActionLink, {
@@ -82,16 +108,16 @@ const DSBanner = ({
         tabIndex: 0,
         isBodyEmpty: body,
         children: actionLink.label
-      })), showCloseButton && /*#__PURE__*/_jsx__default["default"](styles.StyledCloseButton, {
+      })), showCloseButton ? /*#__PURE__*/_jsx__default["default"](styles.StyledCloseButton, {
         "data-testid": "ds-banner-close-button",
         buttonType: "secondary",
         onClick: onClose,
         "aria-label": "Close icon",
-        icon: _CloseX || (_CloseX = /*#__PURE__*/_jsx__default["default"](CloseX__default["default"], {
+        icon: _CloseX || (_CloseX = /*#__PURE__*/_jsx__default["default"](dsIcons.CloseX, {
           width: "12px",
           height: "12px"
         }))
-      })]
+      }) : _span || (_span = /*#__PURE__*/_jsx__default["default"]("span", {}))]
     })
   }));
 };

package/cjs/propTypes.js

@@ -17,7 +17,8 @@ const propTypes = {
     label: reactDesc.PropTypes.string,
     onClick: reactDesc.PropTypes.func,
     href: reactDesc.PropTypes.string
-  }).description('Properties of the ActionLink component').defaultValue({})
+  }).description('Properties of the ActionLink component').defaultValue({}),
+  actionRef: reactDesc.PropTypes.object.description("\n      Reference to use actions:\n      - focusOnLink: function to focus the banner\n      - focusOnWrapper: function to focus the link\n    ").defaultValue({})
 };
 
 exports.propTypes = propTypes;

package/cjs/styles.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var styled = require('styled-components');
-var DSButton = require('@elliemae/ds-basic/Button');
+var DSButton = require('@elliemae/ds-button');
 var styleHelpers = require('./utils/styleHelpers.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -13,66 +13,120 @@ var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
 
 const StyledBannerContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-ffu2hq-0"
-})(["overflow:hidden;height:", ";", ";"], ({
-  isOpen
-}) => isOpen ? 'auto' : '0px', ({
-  isAnimating,
-  isOpen,
-  height
-}) => styleHelpers.handleAnimation(isAnimating, isOpen, height));
+})(["overflow:hidden;height:", ";", ";"], _ref => {
+  let {
+    isOpen
+  } = _ref;
+  return isOpen ? 'auto' : '0px';
+}, _ref2 => {
+  let {
+    isAnimating,
+    isOpen,
+    height
+  } = _ref2;
+  return styleHelpers.handleAnimation(isAnimating, isOpen, height);
+});
 const StyledInnerContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-ffu2hq-1"
-})(["padding-right:6px;display:flex;align-items:center;min-height:41px;width:100%;background-color:", ";border-bottom:5px solid ", ";", ";"], ({
-  theme
-}) => theme.colors.neutral['000'], ({
-  type,
-  theme
-}) => styleHelpers.handleBorderColor(type, theme), ({
-  isAnimating,
-  isOpen
-}) => styleHelpers.handleAnimation(isAnimating, isOpen));
+})(["padding-right:6px;display:grid;align-items:center;min-height:41px;width:100%;background-color:", ";border-bottom:5px solid ", ";", ";&: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;"], _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.colors.neutral['000'];
+}, _ref4 => {
+  let {
+    type,
+    theme
+  } = _ref4;
+  return styleHelpers.handleBorderColor(type, theme);
+}, _ref5 => {
+  let {
+    isAnimating,
+    isOpen
+  } = _ref5;
+  return styleHelpers.handleAnimation(isAnimating, isOpen);
+});
 const StyledIconContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-ffu2hq-2"
-})(["margin-right:", ";margin-left:", ";"], ({
-  theme
-}) => theme.space.xxs, ({
-  theme
-}) => theme.space.xs);
+})(["margin-right:", ";margin-left:", ";"], _ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme.space.xxs;
+}, _ref7 => {
+  let {
+    theme
+  } = _ref7;
+  return theme.space.xs;
+});
 const StyledTitle = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-ffu2hq-3"
-})(["color:", ";font-size:", ";font-weight:", ";white-space:nowrap;"], ({
-  theme
-}) => theme.colors.neutral[700], ({
-  theme
-}) => theme.fontSizes.label[400], ({
-  theme
-}) => theme.fontWeights.semibold);
+})(["color:", ";font-size:", ";font-weight:", ";"], _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 = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-ffu2hq-4"
-})(["width:100%;margin-left:", ";font-size:", ";font-weight:", ";"], ({
-  theme
-}) => theme.space.xs, ({
-  theme
-}) => theme.fontSizes.subTitle[400], ({
-  theme
-}) => theme.fontWeights.regular);
+})(["width:100%;margin-left:", ";font-size:", ";font-weight:", ";"], _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 = /*#__PURE__*/styled__default["default"].a.withConfig({
   componentId: "sc-ffu2hq-5"
-})(["margin-left:", ";white-space:nowrap;text-decoration:none;line-height:1.1;font-size:", ";font-weight:", ";color:", ";"], ({
-  theme,
-  isBodyEmpty
-}) => isBodyEmpty ? theme.space.xs : 0, ({
-  theme
-}) => theme.fontSizes.hyperlink[400], ({
-  theme
-}) => theme.fontWeights.regular, ({
-  theme
-}) => theme.colors.brand[600]);
+})(["margin-left:", ";white-space:nowrap;text-decoration:none;line-height:1.1;font-size:", ";font-weight:", ";color:", ";"], _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 = /*#__PURE__*/styled__default["default"](DSButton__default["default"]).withConfig({
   componentId: "sc-ffu2hq-6"
-})(["margin-left:", ";&:not(focus){border:transparent;}"], ({
-  theme
-}) => theme.space.s);
+})(["margin-left:", ";&:not(focus){border:transparent;}"], _ref18 => {
+  let {
+    theme
+  } = _ref18;
+  return theme.space.xxs;
+});
 
 exports.StyledActionLink = StyledActionLink;
 exports.StyledBannerContainer = StyledBannerContainer;

package/cjs/utils/icons.js

@@ -4,36 +4,29 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
 require('react');
-var SuccessFill = require('@elliemae/ds-icons/SuccessFill');
-var InfoFill = require('@elliemae/ds-icons/InfoFill');
-var AlertsDetailFill = require('@elliemae/ds-icons/AlertsDetailFill');
-var WarningSquare = require('@elliemae/ds-icons/WarningSquare');
+var dsIcons = require('@elliemae/ds-icons');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var SuccessFill__default = /*#__PURE__*/_interopDefaultLegacy(SuccessFill);
-var InfoFill__default = /*#__PURE__*/_interopDefaultLegacy(InfoFill);
-var AlertsDetailFill__default = /*#__PURE__*/_interopDefaultLegacy(AlertsDetailFill);
-var WarningSquare__default = /*#__PURE__*/_interopDefaultLegacy(WarningSquare);
 
 const icons = {
-  success: /*#__PURE__*/_jsx__default["default"](SuccessFill__default["default"], {
+  success: /*#__PURE__*/_jsx__default["default"](dsIcons.SuccessFill, {
     fill: "#207e56",
     width: "20px",
     height: "20px"
   }),
-  info: /*#__PURE__*/_jsx__default["default"](InfoFill__default["default"], {
+  info: /*#__PURE__*/_jsx__default["default"](dsIcons.InfoFill, {
     fill: "#1e79c2",
     width: "20px",
     height: "20px"
   }),
-  danger: /*#__PURE__*/_jsx__default["default"](AlertsDetailFill__default["default"], {
+  danger: /*#__PURE__*/_jsx__default["default"](dsIcons.AlertsDetailFill, {
     fill: "#c64252",
     width: "20px",
     height: "20px"
   }),
-  warning: /*#__PURE__*/_jsx__default["default"](WarningSquare__default["default"], {
+  warning: /*#__PURE__*/_jsx__default["default"](dsIcons.WarningSquare, {
     fill: "#d17a00",
     width: "20px",
     height: "20px"

package/cjs/utils/styleHelpers.js

@@ -18,9 +18,11 @@ const spanContainer = height => dsSystem.kfrm(_templateObject3 || (_templateObje
 
 const shrinkContainer = height => dsSystem.kfrm(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default["default"](["\n  0% {\n    height: ", "px;\n  }\n  100% {\n    height: 0px;\n  }\n"])), height);
 
-const handleBorderColor = (type, {
-  colors
-}) => {
+const handleBorderColor = (type, _ref) => {
+  let {
+    colors
+  } = _ref;
+
   switch (type) {
     case bannerTypes.BANNER_TYPES.SUCCESS:
       return colors.success[900];
@@ -35,7 +37,9 @@ const handleBorderColor = (type, {
       return colors.danger[900];
   }
 };
-const handleAnimation = (isAnimating, isOpen, height = null) => {
+const handleAnimation = function (isAnimating, isOpen) {
+  let height = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+
   if (isAnimating) {
     if (isOpen) {
       return dsSystem.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default["default"](["\n        animation: ", " 0.5s ease-in;\n      "])), height ? spanContainer(height) : slideIn);

package/esm/DSBanner.js

@@ -1,8 +1,13 @@
+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 { useRef, useState, useEffect, useLayoutEffect, useCallback } from 'react';
-import CloseX from '@elliemae/ds-icons/CloseX';
+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';
@@ -10,35 +15,54 @@ 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;
+var _CloseX, _span;
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-const DSBanner = ({
-  type,
-  isOpen,
-  onClose,
-  label,
-  body,
-  actionLink,
-  showCloseButton,
-  containerProps
-}) => {
+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 [height, setHeight] = useState(0);
-  useEffect(() => {
-    if (innerContainerRef.current) {
-      setHeight(innerContainerRef.current.offsetHeight);
+  const [alertTabIndex, setAlertTabIndex] = useState(undefined);
+  React.useEffect(() => {
+    if (actionRef && actionRef.current) {
+      actionRef.current.focusOnWrapper = () => {
+        if (innerContainerRef.current) {
+          setAlertTabIndex(0);
+          setTimeout(() => {
+            innerContainerRef.current.focus();
+          }, 100);
+        }
+      };
+
+      actionRef.current.focusOnLink = () => {
+        if (linkRef.current) {
+          linkRef.current.focus();
+        }
+      };
     }
-  }, [isAnimating, isOpen]);
+  }, [actionRef]);
   useLayoutEffect(() => {
     if (isOpen !== current || isOpen) setIsAnimating(true);else setIsAnimating(false);
   }, [isOpen, current]);
+  const handleBlur = useCallback(() => {
+    setAlertTabIndex(undefined);
+  }, []);
   const handleOnKeyDown = useCallback(e => {
     if (e.key === 'Enter' || e.key === ' ') {
       e.preventDefault();
@@ -61,6 +85,8 @@ const DSBanner = ({
       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, {
@@ -72,7 +98,7 @@ const DSBanner = ({
         tabIndex: 0,
         isBodyEmpty: body,
         children: actionLink.label
-      })), showCloseButton && /*#__PURE__*/_jsx(StyledCloseButton, {
+      })), showCloseButton ? /*#__PURE__*/_jsx(StyledCloseButton, {
         "data-testid": "ds-banner-close-button",
         buttonType: "secondary",
         onClick: onClose,
@@ -81,7 +107,7 @@ const DSBanner = ({
           width: "12px",
           height: "12px"
         }))
-      })]
+      }) : _span || (_span = /*#__PURE__*/_jsx("span", {}))]
     })
   }));
 };

package/esm/propTypes.js

@@ -13,7 +13,8 @@ const propTypes = {
     label: PropTypes.string,
     onClick: PropTypes.func,
     href: PropTypes.string
-  }).description('Properties of the ActionLink component').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 };

package/esm/styles.js

@@ -1,68 +1,122 @@
 import styled from 'styled-components';
-import DSButton from '@elliemae/ds-basic/Button';
+import DSButton from '@elliemae/ds-button';
 import { handleAnimation, handleBorderColor } from './utils/styleHelpers.js';
 
 const StyledBannerContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-ffu2hq-0"
-})(["overflow:hidden;height:", ";", ";"], ({
-  isOpen
-}) => isOpen ? 'auto' : '0px', ({
-  isAnimating,
-  isOpen,
-  height
-}) => handleAnimation(isAnimating, isOpen, height));
+})(["overflow:hidden;height:", ";", ";"], _ref => {
+  let {
+    isOpen
+  } = _ref;
+  return isOpen ? 'auto' : '0px';
+}, _ref2 => {
+  let {
+    isAnimating,
+    isOpen,
+    height
+  } = _ref2;
+  return handleAnimation(isAnimating, isOpen, height);
+});
 const StyledInnerContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-ffu2hq-1"
-})(["padding-right:6px;display:flex;align-items:center;min-height:41px;width:100%;background-color:", ";border-bottom:5px solid ", ";", ";"], ({
-  theme
-}) => theme.colors.neutral['000'], ({
-  type,
-  theme
-}) => handleBorderColor(type, theme), ({
-  isAnimating,
-  isOpen
-}) => handleAnimation(isAnimating, isOpen));
+})(["padding-right:6px;display:grid;align-items:center;min-height:41px;width:100%;background-color:", ";border-bottom:5px solid ", ";", ";&: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;"], _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 = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-ffu2hq-2"
-})(["margin-right:", ";margin-left:", ";"], ({
-  theme
-}) => theme.space.xxs, ({
-  theme
-}) => theme.space.xs);
+})(["margin-right:", ";margin-left:", ";"], _ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme.space.xxs;
+}, _ref7 => {
+  let {
+    theme
+  } = _ref7;
+  return theme.space.xs;
+});
 const StyledTitle = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-ffu2hq-3"
-})(["color:", ";font-size:", ";font-weight:", ";white-space:nowrap;"], ({
-  theme
-}) => theme.colors.neutral[700], ({
-  theme
-}) => theme.fontSizes.label[400], ({
-  theme
-}) => theme.fontWeights.semibold);
+})(["color:", ";font-size:", ";font-weight:", ";"], _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 = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-ffu2hq-4"
-})(["width:100%;margin-left:", ";font-size:", ";font-weight:", ";"], ({
-  theme
-}) => theme.space.xs, ({
-  theme
-}) => theme.fontSizes.subTitle[400], ({
-  theme
-}) => theme.fontWeights.regular);
+})(["width:100%;margin-left:", ";font-size:", ";font-weight:", ";"], _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 = /*#__PURE__*/styled.a.withConfig({
   componentId: "sc-ffu2hq-5"
-})(["margin-left:", ";white-space:nowrap;text-decoration:none;line-height:1.1;font-size:", ";font-weight:", ";color:", ";"], ({
-  theme,
-  isBodyEmpty
-}) => isBodyEmpty ? theme.space.xs : 0, ({
-  theme
-}) => theme.fontSizes.hyperlink[400], ({
-  theme
-}) => theme.fontWeights.regular, ({
-  theme
-}) => theme.colors.brand[600]);
+})(["margin-left:", ";white-space:nowrap;text-decoration:none;line-height:1.1;font-size:", ";font-weight:", ";color:", ";"], _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 = /*#__PURE__*/styled(DSButton).withConfig({
   componentId: "sc-ffu2hq-6"
-})(["margin-left:", ";&:not(focus){border:transparent;}"], ({
-  theme
-}) => theme.space.s);
+})(["margin-left:", ";&:not(focus){border:transparent;}"], _ref18 => {
+  let {
+    theme
+  } = _ref18;
+  return theme.space.xxs;
+});
 
 export { StyledActionLink, StyledBannerContainer, StyledCloseButton, StyledIconContainer, StyledInnerContainer, StyledSubTitle, StyledTitle };

package/esm/utils/icons.js

@@ -1,9 +1,6 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'react';
-import SuccessFill from '@elliemae/ds-icons/SuccessFill';
-import InfoFill from '@elliemae/ds-icons/InfoFill';
-import AlertsDetailFill from '@elliemae/ds-icons/AlertsDetailFill';
-import WarningSquare from '@elliemae/ds-icons/WarningSquare';
+import { SuccessFill, InfoFill, AlertsDetailFill, WarningSquare } from '@elliemae/ds-icons';
 
 const icons = {
   success: /*#__PURE__*/_jsx(SuccessFill, {

package/esm/utils/styleHelpers.js

@@ -10,9 +10,11 @@ const spanContainer = height => kfrm(_templateObject3 || (_templateObject3 = _ta
 
 const shrinkContainer = height => kfrm(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  0% {\n    height: ", "px;\n  }\n  100% {\n    height: 0px;\n  }\n"])), height);
 
-const handleBorderColor = (type, {
-  colors
-}) => {
+const handleBorderColor = (type, _ref) => {
+  let {
+    colors
+  } = _ref;
+
   switch (type) {
     case BANNER_TYPES.SUCCESS:
       return colors.success[900];
@@ -27,7 +29,9 @@ const handleBorderColor = (type, {
       return colors.danger[900];
   }
 };
-const handleAnimation = (isAnimating, isOpen, height = null) => {
+const handleAnimation = function (isAnimating, isOpen) {
+  let height = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+
   if (isAnimating) {
     if (isOpen) {
       return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        animation: ", " 0.5s ease-in;\n      "])), height ? spanContainer(height) : slideIn);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-banner",
-  "version": "2.0.0-next.10",
+  "version": "2.0.0-next.11",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Banner",
   "module": "./esm/index.js",
@@ -60,17 +60,20 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-basic": "2.0.0-next.10",
-    "@elliemae/ds-classnames": "2.0.0-next.10"
+    "@elliemae/ds-basic": "2.0.0-next.11",
+    "@elliemae/ds-classnames": "2.0.0-next.11",
+    "@elliemae/ds-icons": "2.0.0-next.11",
+    "@elliemae/ds-system": "2.0.0-next.11",
+    "react-desc": "~4.1.2"
   },
   "devDependencies": {
-    "styled-components": "~5.3.1"
+    "styled-components": "~5.3.3"
   },
   "peerDependencies": {
     "lodash": "^4.17.21",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "styled-components": "^5.3.1"
+    "styled-components": "^5.3.3"
   },
   "publishConfig": {
     "access": "public",

package/types/DSBanner.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import type { BannerPropsT } from './index.d';
 declare const DSBanner: {
-    ({ type, isOpen, onClose, label, body, actionLink, showCloseButton, containerProps, }: BannerPropsT): JSX.Element;
+    ({ type, isOpen, onClose, label, body, actionLink, showCloseButton, containerProps, actionRef, }: BannerPropsT): JSX.Element;
     defaultProps: {
         containerProps: {};
         label: string;
@@ -25,6 +25,7 @@ declare const DSBanner: {
         isOpen: any;
         showCloseButton: any;
         actionLink: any;
+        actionRef: any;
     };
 };
 declare const DSBannerWithSchema: any;

package/types/propTypes.d.ts

@@ -7,4 +7,5 @@ export declare const propTypes: {
     isOpen: any;
     showCloseButton: any;
     actionLink: any;
+    actionRef: any;
 };

package/types/styles.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { StyledActionLinkT, StyledBannerContainerT, StyledInnerContainerT } from './index.d';
 export declare const StyledBannerContainer: import("styled-components").StyledComponent<"div", any, StyledBannerContainerT, never>;
 export declare const StyledInnerContainer: import("styled-components").StyledComponent<"div", any, StyledInnerContainerT, never>;
@@ -5,4 +6,62 @@ export declare const StyledIconContainer: import("styled-components").StyledComp
 export declare const StyledTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledSubTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledActionLink: import("styled-components").StyledComponent<"a", any, StyledActionLinkT, never>;
-export declare const StyledCloseButton: import("styled-components").StyledComponent<any, any, object, string | number | symbol>;
+export declare const StyledCloseButton: import("styled-components").StyledComponent<{
+    ({ innerRef, disabled, buttonType, fluidWidth, size, labelText, icon, onBlur, onClick, onKeyPress, leftIcon, tabIndex, variant, intent, containerProps, className, as: Component, type, ...rest }: {
+        [x: string]: any;
+        innerRef: any;
+        disabled: any;
+        buttonType: any;
+        fluidWidth: any;
+        size: any;
+        labelText: any;
+        icon: any;
+        onBlur: any;
+        onClick: any;
+        onKeyPress: any;
+        leftIcon: any;
+        tabIndex: any;
+        variant: any;
+        intent: any;
+        containerProps: any;
+        className: any;
+        as: any;
+        type: any;
+    }): JSX.Element;
+    defaultProps: {
+        disabled: boolean;
+        fluidWidth: boolean;
+        labelText: string;
+        icon: null;
+        onBlur: () => null;
+        onClick: () => null;
+        onKeyPress: () => null;
+        leftIcon: null;
+        tabIndex: number;
+        variant: string;
+        containerProps: {};
+        as: string;
+        type: string;
+    };
+    propTypes: {
+        tabIndex: any;
+        className: any;
+        'aria-disabled': any;
+        as: any;
+        disabled: any;
+        fluidWidth: any;
+        labelText: any;
+        icon: any;
+        leftIcon: any;
+        buttonType: any;
+        size: any;
+        type: any;
+        variant: any;
+        innerRef: any;
+        onBlur: any;
+        intent: any;
+        containerProps: any;
+        onClick: any;
+        onKeyPress: any;
+    };
+}, any, {}, never>;