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

package/esm/DSBanner.js

@@ -1,121 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1 +0,0 @@
-

package/esm/index.js

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

package/esm/propTypes.js

@@ -1,20 +0,0 @@
-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 };

package/esm/styles.js

@@ -1,131 +0,0 @@
-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,8 +0,0 @@
-const BANNER_TYPES = {
-  INFO: 'info',
-  SUCCESS: 'success',
-  WARNING: 'warning',
-  DANGER: 'danger'
-};
-
-export { BANNER_TYPES };

package/esm/utils/icons.js

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

package/esm/utils/styleHelpers.js

@@ -1,44 +0,0 @@
-import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
-import { kfrm, css } from '@elliemae/ds-system';
-import { BANNER_TYPES } from './bannerTypes.js';
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
-const slideIn = kfrm(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    transform: translate3d(0, -100%, 0);\n  }\n  100% {\n    transform: translate3d(0, 0, 0);\n  }\n"])));
-const slideOut = kfrm(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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 => kfrm(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  0% {\n    height: 0px;\n  }\n  100% {\n    height: ", "px;\n  }\n"])), height);
-
-const shrinkContainer = height => kfrm(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  0% {\n    height: ", "px;\n  }\n  100% {\n    height: 0px;\n  }\n"])), height);
-
-const handleBorderColor = (type, _ref) => {
-  let {
-    colors
-  } = _ref;
-
-  switch (type) {
-    case BANNER_TYPES.SUCCESS:
-      return colors.success[900];
-
-    case BANNER_TYPES.INFO:
-      return colors.brand[600];
-
-    case BANNER_TYPES.WARNING:
-      return colors.warning[900];
-
-    case 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 css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        animation: ", " 0.5s ease-in;\n      "])), height ? spanContainer(height) : slideIn);
-    } else {
-      return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n        animation: ", " 0.5s ease-in;\n      "])), height ? shrinkContainer(height) : slideOut);
-    }
-  }
-};
-
-export { handleAnimation, handleBorderColor };