@elliemae/ds-banner 2.3.0-alpha.9 → 2.3.0-next.0

package/cjs/DSBanner.js

@@ -0,0 +1,132 @@
+'use strict';
+
+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');
+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');
+var defaultProps = require('./defaultProps.js');
+var styles = require('./styles.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+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__default["default"](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 = React.useRef(null);
+  const linkRef = React.useRef(null);
+  const [current, setCurrent] = React.useState(isOpen);
+  const [isAnimating, setIsAnimating] = React.useState(false);
+  const [alertTabIndex, setAlertTabIndex] = React.useState(undefined);
+  const ownerState = {
+    type
+  };
+  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();
+        }
+      };
+    }
+  }, [actionRef]);
+  React.useLayoutEffect(() => {
+    if (isOpen !== current || isOpen) setIsAnimating(true);else setIsAnimating(false);
+  }, [isOpen, current]);
+  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();
+    }
+  }, []);
+  if (!isAnimating && !isOpen) return null;
+  return /*#__PURE__*/jsxRuntime.jsx(styles.StyledBannerContainer, _objectSpread(_objectSpread({
+    type: type,
+    isOpen: isOpen,
+    isAnimating: isAnimating,
+    onAnimationEnd: () => setCurrent(isOpen),
+    "data-testid": "ds-banner-container"
+  }, containerProps), {}, {
+    ownerState: ownerState,
+    children: /*#__PURE__*/jsxRuntime.jsxs(styles.StyledInnerContainer, {
+      type: type,
+      isOpen: isOpen,
+      ref: innerContainerRef,
+      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, {
+        "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__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"](dsIcons.CloseX, {
+          width: "12px",
+          height: "12px"
+        }))
+      }) : _span || (_span = /*#__PURE__*/_jsx__default["default"]("span", {}))]
+    })
+  }));
+};
+
+DSBanner.defaultProps = defaultProps.defaultProps;
+const DSBannerWithSchema = reactDesc.describe(DSBanner);
+DSBannerWithSchema.propTypes = propTypes.propTypes;
+
+exports.DSBannerWithSchema = DSBannerWithSchema;
+exports["default"] = DSBanner;

package/cjs/defaultProps.js

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var bannerTypes = require('./utils/bannerTypes.js');
+
+const defaultProps = {
+  containerProps: {},
+  label: '',
+  body: '',
+  type: bannerTypes.BANNER_TYPES.INFO,
+  isOpen: true,
+  onClose: () => null,
+  showCloseButton: true,
+  actionLink: {
+    label: '',
+    onClick: () => null,
+    href: ''
+  }
+};
+
+exports.defaultProps = defaultProps;

package/cjs/index.d.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/cjs/index.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var DSBanner = require('./DSBanner.js');
+var bannerTypes = require('./utils/bannerTypes.js');
+
+
+
+exports.DSBannerWithSchema = DSBanner.DSBannerWithSchema;
+exports["default"] = DSBanner["default"];
+exports.BANNER_TYPES = bannerTypes.BANNER_TYPES;

package/cjs/propTypes.js

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var reactDesc = require('react-desc');
+var bannerTypes = require('./utils/bannerTypes.js');
+
+const propTypes = {
+  containerProps: reactDesc.PropTypes.object.description('Set of Properties attached to the main container').defaultValue({}),
+  label: reactDesc.PropTypes.string.description('banner s label').defaultValue(''),
+  body: reactDesc.PropTypes.string.description('banner s body content').defaultValue(''),
+  type: reactDesc.PropTypes.oneOf(Object.values(bannerTypes.BANNER_TYPES)).description('banner s type').defaultValue(bannerTypes.BANNER_TYPES.INFO),
+  onClose: reactDesc.PropTypes.func.description('function executed when the banner closes'),
+  isOpen: reactDesc.PropTypes.bool.description('whether the banner is open or closed').defaultValue(true),
+  showCloseButton: reactDesc.PropTypes.bool.description('whether to show close button or not').defaultValue(true),
+  actionLink: reactDesc.PropTypes.shape({
+    label: reactDesc.PropTypes.string,
+    onClick: reactDesc.PropTypes.func,
+    href: reactDesc.PropTypes.string
+  }).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

@@ -0,0 +1,146 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
+var dsSystem = require('@elliemae/ds-system');
+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 }; }
+
+var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
+var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+const StyledBannerContainer = dsSystem.styled('div', {
+  name: 'DS-Banner',
+  slot: 'root'
+})(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n  overflow: hidden;\n  height: ", ";\n  ", ";\n"])), _ref => {
+  let {
+    isOpen
+  } = _ref;
+  return isOpen ? 'auto' : '0px';
+}, _ref2 => {
+  let {
+    isAnimating,
+    isOpen,
+    height
+  } = _ref2;
+  return styleHelpers.handleAnimation(isAnimating, isOpen, height);
+});
+const StyledInnerContainer = dsSystem.styled('div', {
+  name: 'DS-Banner',
+  slot: 'innerContainer'
+})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\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 styleHelpers.handleBorderColor(type, theme);
+}, _ref5 => {
+  let {
+    isAnimating,
+    isOpen
+  } = _ref5;
+  return styleHelpers.handleAnimation(isAnimating, isOpen);
+});
+const StyledIconContainer = dsSystem.styled('div', {
+  name: 'DS-Banner',
+  slot: 'iconContainer'
+})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default["default"](["\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 = dsSystem.styled('div', {
+  name: 'DS-Banner',
+  slot: 'title'
+})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default["default"](["\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 = dsSystem.styled('div', {
+  name: 'DS-Banner',
+  slot: 'subtitle'
+})(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default["default"](["\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 = dsSystem.styled('a', {
+  name: 'DS-Banner',
+  slot: 'action'
+})(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default["default"](["\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 = dsSystem.styled(DSButton__default["default"], {
+  name: 'DS-Banner',
+  slot: 'closeButton'
+})(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral__default["default"](["\n  margin-left: ", ";\n  &:not(focus) {\n    border: transparent;\n  }\n"])), _ref18 => {
+  let {
+    theme
+  } = _ref18;
+  return theme.space.xxs;
+});
+
+exports.StyledActionLink = StyledActionLink;
+exports.StyledBannerContainer = StyledBannerContainer;
+exports.StyledCloseButton = StyledCloseButton;
+exports.StyledIconContainer = StyledIconContainer;
+exports.StyledInnerContainer = StyledInnerContainer;
+exports.StyledSubTitle = StyledSubTitle;
+exports.StyledTitle = StyledTitle;

package/cjs/utils/bannerTypes.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const BANNER_TYPES = {
+  INFO: 'info',
+  SUCCESS: 'success',
+  WARNING: 'warning',
+  DANGER: 'danger'
+};
+
+exports.BANNER_TYPES = BANNER_TYPES;

package/cjs/utils/icons.js

@@ -0,0 +1,36 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+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);
+
+const icons = {
+  success: /*#__PURE__*/_jsx__default["default"](dsIcons.SuccessFill, {
+    fill: "#207e56",
+    width: "20px",
+    height: "20px"
+  }),
+  info: /*#__PURE__*/_jsx__default["default"](dsIcons.InfoFill, {
+    fill: "#1e79c2",
+    width: "20px",
+    height: "20px"
+  }),
+  danger: /*#__PURE__*/_jsx__default["default"](dsIcons.AlertsDetailFill, {
+    fill: "#c64252",
+    width: "20px",
+    height: "20px"
+  }),
+  warning: /*#__PURE__*/_jsx__default["default"](dsIcons.WarningSquare, {
+    fill: "#d17a00",
+    width: "20px",
+    height: "20px"
+  })
+};
+
+exports.icons = icons;

package/cjs/utils/styleHelpers.js

@@ -0,0 +1,53 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
+var dsSystem = require('@elliemae/ds-system');
+var bannerTypes = require('./bannerTypes.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+const slideIn = dsSystem.kfrm(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n  0% {\n    transform: translate3d(0, -100%, 0);\n  }\n  100% {\n    transform: translate3d(0, 0, 0);\n  }\n"])));
+const slideOut = dsSystem.kfrm(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\n  0% {\n    transform: translate3d(0, 0, 0);\n    opacity: 1;\n  }\n  60% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 0;\n    transform: translate3d(0, -100%, 0);\n  }\n"])));
+
+const spanContainer = height => dsSystem.kfrm(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default["default"](["\n  0% {\n    height: 0px;\n  }\n  100% {\n    height: ", "px;\n  }\n"])), height);
+
+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, _ref) => {
+  let {
+    colors
+  } = _ref;
+
+  switch (type) {
+    case bannerTypes.BANNER_TYPES.SUCCESS:
+      return colors.success[900];
+
+    case bannerTypes.BANNER_TYPES.INFO:
+      return colors.brand[600];
+
+    case bannerTypes.BANNER_TYPES.WARNING:
+      return colors.warning[900];
+
+    case bannerTypes.BANNER_TYPES.DANGER:
+      return colors.danger[900];
+  }
+};
+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);
+    } else {
+      return dsSystem.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default["default"](["\n        animation: ", " 0.5s ease-in;\n      "])), height ? shrinkContainer(height) : slideOut);
+    }
+  }
+};
+
+exports.handleAnimation = handleAnimation;
+exports.handleBorderColor = handleBorderColor;

package/esm/DSBanner.js

@@ -0,0 +1,121 @@
+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(undefined);
+  const ownerState = {
+    type
+  };
+  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();
+        }
+      };
+    }
+  }, [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();
+      if (linkRef.current) linkRef.current.click();
+    }
+  }, []);
+  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: 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", {}))]
+    })
+  }));
+};
+
+DSBanner.defaultProps = defaultProps;
+const DSBannerWithSchema = describe(DSBanner);
+DSBannerWithSchema.propTypes = propTypes;
+
+export { DSBannerWithSchema, DSBanner as default };

package/esm/defaultProps.js

@@ -0,0 +1,18 @@
+import { BANNER_TYPES } from './utils/bannerTypes.js';
+
+const defaultProps = {
+  containerProps: {},
+  label: '',
+  body: '',
+  type: BANNER_TYPES.INFO,
+  isOpen: true,
+  onClose: () => null,
+  showCloseButton: true,
+  actionLink: {
+    label: '',
+    onClick: () => null,
+    href: ''
+  }
+};
+
+export { defaultProps };

package/esm/index.d.js

@@ -0,0 +1 @@
+

package/esm/index.js

@@ -0,0 +1,2 @@
+export { DSBannerWithSchema, default } from './DSBanner.js';
+export { BANNER_TYPES } from './utils/bannerTypes.js';

package/esm/propTypes.js

@@ -0,0 +1,20 @@
+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),
+  actionLink: PropTypes.shape({
+    label: PropTypes.string,
+    onClick: PropTypes.func,
+    href: PropTypes.string
+  }).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 };