@x15ventures/x15-ui-library 3.11.4

package/dist/esm/components/design/accordion/Accordion.js

@@ -0,0 +1,124 @@
+'use client';
+
+/* eslint-disable jsxA11y/no-noninteractive-tabindex, no-unused-vars */
+import React, { useRef, useState } from 'react';
+import { SvgIcon } from '@x15ventures/x15-ui-library-icons/svgIcon/SvgIcon';
+import { chevronUp, chevronDown } from '@x15ventures/x15-ui-library-icons/iconDefinitions';
+import { Icon } from '../icons/basicIcon/Icon';
+import './accordion.css';
+export const Accordion = ({
+  id,
+  heading,
+  children,
+  footer,
+  openIcon = null,
+  closeIcon = null,
+  isOpen = true,
+  isAnimated = true,
+  isFixed = false,
+  innerBorders = true,
+  outerBorders = true,
+  hasShadow = false,
+  onChange,
+  customCssClass,
+  restrictHeight,
+  headerButtonCustomLabel,
+  headerButtonCssClass,
+  paddingStyle = 'regular',
+  horizontalAlignments
+}) => {
+  const [panelIsOpen, setPanelIsOpen] = useState(isOpen || isFixed);
+  const accordionControl = useRef(null);
+  const panelId = id || `accordion_${Date.now()}`;
+  const contentId = `${panelId}_content`;
+  const controlId = `${panelId}_control`;
+  const customSectionHeader = typeof heading !== 'string' && !headerButtonCustomLabel;
+  const TogglePanelOpenState = () => {
+    const newState = !panelIsOpen;
+    setPanelIsOpen(newState);
+    if (onChange) {
+      onChange(newState);
+    }
+  };
+  const heightCssClass = restrictHeight ? `accordion_${restrictHeight}` : '';
+
+  // map horizontal alignment props to justify-content values for fixed accordions
+  const justifyContentMap = {
+    left: 'flex-start',
+    center: 'center',
+    right: 'flex-end'
+  };
+  const alignmentStyle = {
+    ...(isFixed && horizontalAlignments?.header ? {
+      '--header-align-h': justifyContentMap[horizontalAlignments.header]
+    } : {
+      '--header-align-h': horizontalAlignments?.header || 'left'
+    }),
+    '--content-align-h': horizontalAlignments?.content || 'left',
+    '--footer-align-h': horizontalAlignments?.footer || 'left'
+  };
+  const wrapperCssClass = `
+    accordion 
+    ${customCssClass || ''} 
+    ${heightCssClass} 
+    ${panelIsOpen || isFixed ? 'open' : 'closed'} 
+    ${isFixed ? 'fixed' : ''}
+    ${isAnimated ? 'animated' : ''}
+    ${outerBorders ? 'outerBorders' : ''}
+    ${paddingStyle ? `padding_${paddingStyle}` : ''}
+    ${hasShadow ? 'hasShadow' : ''}
+  `;
+  const headerCssClass = `accordionHeader ${customSectionHeader || isFixed ? 'accordionHeader_custom' : ''} ${innerBorders ? 'accordionHeader_innerBorders' : ''}`;
+  const controlCssClass = `accordionControl ${customCssClass ? `${customCssClass}_accordionControl` : ''} ${headerButtonCssClass || ''}`;
+  const contentCssClass = `accordionContent ${customCssClass ? `${customCssClass}_accordionContent` : ''}`;
+  const OpenIcon = () => {
+    if (openIcon) {
+      return /*#__PURE__*/React.createElement(Icon, {
+        icon: openIcon
+      });
+    }
+    return /*#__PURE__*/React.createElement(SvgIcon, {
+      svgDefinition: chevronUp
+    });
+  };
+  const CloseIcon = () => {
+    if (closeIcon) {
+      return /*#__PURE__*/React.createElement(Icon, {
+        icon: closeIcon
+      });
+    }
+    return /*#__PURE__*/React.createElement(SvgIcon, {
+      svgDefinition: chevronDown
+    });
+  };
+  return /*#__PURE__*/React.createElement("section", {
+    className: wrapperCssClass,
+    style: alignmentStyle
+  }, /*#__PURE__*/React.createElement("header", {
+    className: headerCssClass
+  }, customSectionHeader ? /*#__PURE__*/React.createElement("div", {
+    tabIndex: 0,
+    className: "accordionCustomHeading"
+  }, heading) : /*#__PURE__*/React.createElement("h3", null, isFixed ? heading : /*#__PURE__*/React.createElement("button", {
+    ref: accordionControl,
+    "aria-controls": contentId,
+    "aria-expanded": panelIsOpen,
+    id: controlId,
+    onClick: TogglePanelOpenState,
+    type: "button",
+    className: controlCssClass
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "sr-only"
+  }, "Open and close accordion"), headerButtonCustomLabel || /*#__PURE__*/React.createElement("span", {
+    className: "labelText"
+  }, heading), panelIsOpen ? /*#__PURE__*/React.createElement(OpenIcon, null) : /*#__PURE__*/React.createElement(CloseIcon, null)))), /*#__PURE__*/React.createElement("section", {
+    tabIndex: 0,
+    className: contentCssClass,
+    id: contentId,
+    "aria-labelledby": controlId
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "sr-only"
+  }, "Start of accordion content"), children, footer && /*#__PURE__*/React.createElement("footer", null, footer)));
+};
+export default Accordion;
+//# sourceMappingURL=Accordion.js.map

package/dist/esm/components/design/accordion/Accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.js","names":["React","useRef","useState","SvgIcon","chevronUp","chevronDown","Icon","Accordion","id","heading","children","footer","openIcon","closeIcon","isOpen","isAnimated","isFixed","innerBorders","outerBorders","hasShadow","onChange","customCssClass","restrictHeight","headerButtonCustomLabel","headerButtonCssClass","paddingStyle","horizontalAlignments","panelIsOpen","setPanelIsOpen","accordionControl","panelId","Date","now","contentId","controlId","customSectionHeader","TogglePanelOpenState","newState","heightCssClass","justifyContentMap","left","center","right","alignmentStyle","header","content","wrapperCssClass","headerCssClass","controlCssClass","contentCssClass","OpenIcon","createElement","icon","svgDefinition","CloseIcon","className","style","tabIndex","ref","onClick","type"],"sources":["../../../../../src/components/design/accordion/Accordion.tsx"],"sourcesContent":["'use client';\n\n/* eslint-disable jsxA11y/no-noninteractive-tabindex, no-unused-vars */\n\nimport React, { useRef, useState } from 'react';\nimport { SvgIcon } from '@x15ventures/x15-ui-library-icons/svgIcon/SvgIcon';\nimport { chevronUp, chevronDown } from '@x15ventures/x15-ui-library-icons/iconDefinitions';\n\nimport { Icon } from '../icons/basicIcon/Icon';\n\nimport './accordion.scss';\n\nexport interface AccordionProps {\n  id: string;\n  isOpen?: boolean;\n  isAnimated?: boolean;\n  isFixed?: boolean;\n  innerBorders?: boolean;\n  outerBorders?: boolean;\n  hasShadow?: boolean;\n  onChange?: (args: boolean) => void;\n  openIcon?: string;\n  closeIcon?: string;\n  heading: string | React.ReactElement;\n  footer?: string | React.ReactElement;\n  customCssClass?: string;\n  restrictHeight?: 'xs' | 's' | 'm' | 'l' | 'xl' | 'auto';\n  headerButtonCustomLabel?: string | React.ReactElement;\n  headerButtonCssClass?: string;\n  paddingStyle?: 'compact' | 'regular' | 'spacious';\n  children?: React.ReactNode;\n  horizontalAlignments?: {\n    header?: 'left' | 'center' | 'right';\n    content?: 'left' | 'center' | 'right';\n    footer?: 'left' | 'center' | 'right';\n  };\n}\n\nexport const Accordion: React.FC<AccordionProps> = (\n  {\n    id,\n    heading,\n    children,\n    footer,\n    openIcon = null,\n    closeIcon = null,\n    isOpen = true,\n    isAnimated = true,\n    isFixed = false,\n    innerBorders = true,\n    outerBorders = true,\n    hasShadow = false,\n    onChange,\n    customCssClass,\n    restrictHeight,\n    headerButtonCustomLabel,\n    headerButtonCssClass,\n    paddingStyle = 'regular',\n    horizontalAlignments,\n  }\n) => {\n  const [panelIsOpen, setPanelIsOpen] = useState(isOpen || isFixed);\n  const accordionControl = useRef(null);\n\n  const panelId = id || `accordion_${ Date.now() }`;\n  const contentId = `${ panelId }_content`;\n  const controlId = `${ panelId }_control`;\n\n  const customSectionHeader = typeof heading !== 'string' && !headerButtonCustomLabel;\n\n  const TogglePanelOpenState = () => {\n    const newState = !panelIsOpen;\n    setPanelIsOpen(newState);\n    if (onChange) {\n      onChange(newState);\n    }\n  };\n\n  const heightCssClass = restrictHeight ? `accordion_${ restrictHeight }` : '';\n\n\n  // map horizontal alignment props to justify-content values for fixed accordions\n  const justifyContentMap = {\n    left: 'flex-start',\n    center: 'center',\n    right: 'flex-end',\n  };\n\n  const alignmentStyle = {\n    ...(isFixed && horizontalAlignments?.header\n      ? { '--header-align-h': justifyContentMap[horizontalAlignments.header] }\n      : { '--header-align-h': horizontalAlignments?.header || 'left' }),\n    '--content-align-h': horizontalAlignments?.content || 'left',\n    '--footer-align-h': horizontalAlignments?.footer || 'left',\n  };\n\n  const wrapperCssClass = `\n    accordion \n    ${ customCssClass || '' } \n    ${ heightCssClass } \n    ${ panelIsOpen || isFixed ? 'open' : 'closed' } \n    ${ isFixed ? 'fixed' : '' }\n    ${ isAnimated ? 'animated' : '' }\n    ${ outerBorders ? 'outerBorders' : '' }\n    ${ paddingStyle ? `padding_${ paddingStyle }` : '' }\n    ${ hasShadow ? 'hasShadow' : '' }\n  `;\n\n  const headerCssClass = `accordionHeader ${ customSectionHeader || isFixed ? 'accordionHeader_custom' : '' } ${ innerBorders ? 'accordionHeader_innerBorders' : '' }`;\n\n  const controlCssClass = `accordionControl ${ customCssClass ? `${ customCssClass }_accordionControl` : '' } ${ headerButtonCssClass || '' }`;\n\n  const contentCssClass = `accordionContent ${ customCssClass ? `${ customCssClass }_accordionContent` : '' }`;\n\n  const OpenIcon = () => {\n    if (openIcon) {\n      return <Icon icon={ openIcon } />;\n    }\n    return <SvgIcon svgDefinition={ chevronUp } />;\n  };\n\n  const CloseIcon = () => {\n    if (closeIcon) {\n      return <Icon icon={ closeIcon } />;\n    }\n    return <SvgIcon svgDefinition={ chevronDown } />;\n  };\n\n  return (\n    <section className={ wrapperCssClass } style={ alignmentStyle as React.CSSProperties }>\n      <header className={ headerCssClass }>\n        {\n          customSectionHeader\n            ? <div tabIndex={ 0 } className=\"accordionCustomHeading\">{ heading }</div>\n            : (\n              <h3>\n                { isFixed\n                  ? heading\n                  : (\n                    <button\n                      ref={ accordionControl }\n                      aria-controls={ contentId }\n                      aria-expanded={ panelIsOpen }\n                      id={ controlId }\n                      onClick={ TogglePanelOpenState }\n                      type=\"button\"\n                      className={ controlCssClass }\n                    >\n                      <span className=\"sr-only\">Open and close accordion</span>\n                      {\n                        headerButtonCustomLabel || <span className=\"labelText\">{ heading }</span>\n                      }\n                      {\n                        panelIsOpen\n                          ? <OpenIcon />\n                          : <CloseIcon />\n                      }\n                    </button>\n                  ) }\n              </h3>\n            )\n        }\n      </header>\n\n      <section tabIndex={ 0 } className={ contentCssClass } id={ contentId } aria-labelledby={ controlId }>\n        <span className=\"sr-only\">Start of accordion content</span>\n        { children }\n\n        { footer\n          && (\n            <footer>\n              { footer }\n            </footer>\n          ) }\n      </section>\n    </section>\n  );\n};\n\nexport default Accordion;\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/components/design/accordion/accordion.css

@@ -0,0 +1,217 @@
+/* Popovers */
+/* BUTTONS */
+.accordion {
+  width: var(--accordionWidth, 100%);
+  background: var(--accordionBg, transparent);
+  margin: var(--accordionMargin, 0 0 20px);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  row-gap: 0;
+}
+.accordion.hasShadow {
+  box-shadow: var(--accordionShadow, 0 0 5px 0 #d3dee4);
+}
+.accordion.outerBorders {
+  border: var(--accordionBorder, 1px solid #e5ebef);
+  border-radius: var(--accordionBorderRadius, 5px);
+}
+.accordion.padding_compact header.accordionHeader button {
+  padding: var(--accordionPaddingCompact, 10px 10px);
+}
+.accordion.padding_compact .accordionContent {
+  padding: var(--accordionPaddingCompact, 10px 10px);
+}
+.accordion.padding_compact .accordionContent footer {
+  padding: var(--accordionPaddingCompact, 10px 10px);
+  margin: var(--accordionFooterMarginCompact, 0 -10px -10px);
+}
+.accordion.padding_compact.closed .accordionContent {
+  padding: var(--accordionClosedContentPaddingCompact, 0 10px);
+}
+.accordion.padding_regular header.accordionHeader button {
+  padding: var(--accordionPaddingRegular, 20px 20px);
+}
+.accordion.padding_regular .accordionContent {
+  padding: var(--accordionPaddingRegular, 20px 20px);
+}
+.accordion.padding_regular .accordionContent footer {
+  padding: var(--accordionPaddingRegular, 20px 20px);
+  margin: var(--accordionFooterMarginRegular, 0 -20px -20px);
+}
+.accordion.padding_regular.closed .accordionContent {
+  padding: var(--accordionClosedContentPaddingRegular, 0 20px);
+}
+.accordion.padding_spacious header.accordionHeader button {
+  padding: var(--accordionPaddingSpacious, 30px 30px);
+}
+.accordion.padding_spacious .accordionContent {
+  padding: var(--accordionPaddingSpacious, 30px 30px);
+}
+.accordion.padding_spacious .accordionContent footer {
+  padding: var(--accordionPaddingSpacious, 30px 30px);
+  margin: var(--accordionFooterMarginSpacious, 0 -30px -30px);
+}
+.accordion.padding_spacious.closed .accordionContent {
+  padding: var(--accordionClosedContentPaddingSpacious, 0 30px);
+}
+.accordion header.accordionHeader {
+  display: flex;
+  flex-direction: row;
+  column-gap: 10px;
+  align-items: center;
+  justify-content: flex-start;
+  position: relative;
+  z-index: 1;
+  margin: 0;
+  box-shadow: var(--accordionHeaderBoxShadow, none);
+  border-radius: var(--accordionHeaderBorderRadius, 3px 3px 0 0);
+  background: var(--accordionHeaderBg, #fff);
+}
+.accordion header.accordionHeader.accordionHeader_innerBorders {
+  border-bottom: var(--accordionHeaderBorder, 1px solid #e5ebef);
+}
+.accordion header.accordionHeader.accordionHeader_custom {
+  padding: var(--accordionPaddingRegular, 20px 20px);
+}
+.accordion header.accordionHeader h2, .accordion header.accordionHeader h3 {
+  margin: 0;
+}
+.accordion header.accordionHeader button {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  cursor: pointer;
+  font-weight: 500;
+  box-sizing: border-box;
+  column-gap: 10px;
+  row-gap: 10px;
+  display: flex;
+  flex-direction: row;
+  column-gap: 10px;
+  align-items: center;
+  justify-content: space-between;
+  font-family: var(--accordionHeaderFont, serif) serif;
+  height: var(--accordionHeaderHeight, none);
+  width: var(--accordionWidth, 100%);
+  border: none;
+  font-size: var(--accordionHeaderFontSize, 21px);
+  font-weight: var(--accordionHeaderFontWeight, bold);
+  background: none;
+  color: var(--accordionHeaderFg, #222);
+}
+.accordion header.accordionHeader button .icon {
+  margin-right: 0;
+  color: var(--accordionHeaderIconColor, #222);
+}
+.accordion header.accordionHeader button .labelText {
+  width: 100%;
+  text-align: var(--header-align-h, left);
+}
+.accordion header.accordionHeader button .labelText strong, .accordion header.accordionHeader button .labelText em {
+  display: block;
+  font-weight: inherit;
+  font-style: normal;
+}
+.accordion header.accordionHeader button .labelText em {
+  font-size: 0.75em;
+}
+.accordion.fixed {
+  border: var(--accordionFixedBorder, none);
+  border-radius: var(--accordionFixedBorderRadius, 0);
+}
+.accordion.fixed header.accordionHeader h2, .accordion.fixed header.accordionHeader h3 {
+  display: flex;
+  flex-direction: row;
+  column-gap: 20px;
+  align-items: center;
+  justify-content: flex-start;
+  font-weight: 800;
+  box-sizing: border-box;
+  height: var(--accordionFixedHeaderHeight, auto);
+  width: var(--accordionFixedHeaderWidth, auto);
+  border: var(--accordionFixedHeaderBorder, none);
+  font-size: var(--accordionHeaderFontSize, 21px);
+  background: var(--accordionFixedHeaderBg, none);
+  color: var(--accordionFixedHeaderFgColor, #222);
+  border-radius: var(--accordionFixedBorderRadius, 0) var(--accordionFixedBorderRadius, 0) 0 0;
+  justify-content: var(--header-align-h, flex-start);
+}
+.accordion header.accordionHeader .accordionCustomHeading {
+  display: flex;
+  flex-direction: row;
+  column-gap: 20px;
+  align-items: baseline;
+  justify-content: flex-start;
+  padding: var(--accordionCustomHeaderPadding, 0 0 10px);
+}
+.accordion header.accordionHeader .accordionCustomHeading h2, .accordion header.accordionHeader .accordionCustomHeading h3 {
+  display: block;
+  padding: 0;
+}
+.accordion header.accordionHeader .accordionCustomHeading p {
+  margin: 0;
+}
+.accordion .accordionContent {
+  box-sizing: border-box;
+  max-height: none;
+  opacity: 1;
+  text-align: var(--content-align-h, left);
+}
+.accordion .accordionContent footer {
+  text-align: var(--footer-align-h, left);
+}
+.accordion.animated .accordionContent {
+  transition: all 1s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .accordion.animated .accordionContent {
+    transition: none;
+  }
+}
+.accordion.accordion_xs header.accordionHeader button {
+  height: 30px;
+  font-size: 0.7em;
+  padding: 0 8px;
+}
+.accordion.accordion_xs .accordionContent {
+  max-height: 80px;
+  overflow: auto;
+  padding: 8px;
+}
+.accordion.accordion_s header.accordionHeader button {
+  height: 36px;
+  font-size: 0.8em;
+  padding: 0 10px;
+}
+.accordion.accordion_s .accordionContent {
+  max-height: 150px;
+  overflow: auto;
+  padding: 10px;
+}
+.accordion.accordion_m .accordionContent {
+  max-height: 300px;
+  overflow: auto;
+}
+.accordion.accordion_l .accordionContent {
+  max-height: 450px;
+  overflow: auto;
+}
+.accordion.accordion_xl .accordionContent {
+  max-height: 600px;
+  overflow: auto;
+}
+.accordion.closed {
+  overflow: hidden;
+}
+.accordion.closed header.accordionHeader {
+  border-bottom: none;
+}
+.accordion.closed .accordionContent {
+  max-height: 1px;
+  margin-top: -1px;
+  opacity: 0.01;
+  overflow: hidden;
+}

package/dist/esm/components/design/banners/pageBanner/PageBanner.js

@@ -0,0 +1,72 @@
+'use client';
+
+import React, { useState } from 'react';
+import { Icon } from '../../icons/basicIcon/Icon';
+import { SimpleButton } from '../../../form/buttons/SimpleButton';
+import './pageBanners.css';
+export const PageBanner = ({
+  animation = 'none',
+  reDisplayOnClose = false,
+  autoHide = false,
+  autoHideDelay = 10,
+  children,
+  displayMode = 'fixed',
+  icon = 'info',
+  id = 'pageBanner',
+  position = 'topCentre',
+  type = 'info',
+  disableClose = false,
+  widthVariant = 'lg',
+  backgroundFill = 'primary'
+}) => {
+  const StorageKey = `pageBanner_${id}`;
+  const StorageValue = localStorage.getItem(StorageKey);
+  const UserPreferences = StorageValue && JSON.parse(StorageValue);
+  const {
+    shouldDisplay
+  } = UserPreferences || {
+    shouldDisplay: true
+  };
+  const [isVisible, setVisibility] = useState(shouldDisplay);
+  const autoHideCssClass = autoHide ? `autoHide_${autoHideDelay}` : 'noAutoHide';
+  const cssClass = `
+    pageBanner 
+    ${type} 
+    ${position} 
+    ${displayMode} 
+    ${autoHideCssClass}_${animation}
+    width_${widthVariant}
+    backgroundFill_${backgroundFill}
+  `;
+  const handleBannerClose = () => {
+    setVisibility(false);
+    localStorage.setItem(StorageKey, JSON.stringify({
+      shouldDisplay: reDisplayOnClose
+    }));
+  };
+  if (isVisible) {
+    return /*#__PURE__*/React.createElement("aside", {
+      className: cssClass
+    }, !disableClose && /*#__PURE__*/React.createElement(SimpleButton, {
+      cssClass: "closeBannerButton",
+      label: "Close page banner",
+      id: `${id}_CloseBannerButton`,
+      onClickHandler: handleBannerClose,
+      hideLabel: true,
+      leftIcon: {
+        icon: 'close'
+      }
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "pageBannerMainIcon"
+    }, /*#__PURE__*/React.createElement(Icon, {
+      icon: icon
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "pageBannerContent"
+    }, children));
+  }
+  return null;
+};
+export default PageBanner;
+export { PageBanner as Banner };
+export { PageBanner as Alert };
+//# sourceMappingURL=PageBanner.js.map

package/dist/esm/components/design/banners/pageBanner/PageBanner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageBanner.js","names":["React","useState","Icon","SimpleButton","PageBanner","animation","reDisplayOnClose","autoHide","autoHideDelay","children","displayMode","icon","id","position","type","disableClose","widthVariant","backgroundFill","StorageKey","StorageValue","localStorage","getItem","UserPreferences","JSON","parse","shouldDisplay","isVisible","setVisibility","autoHideCssClass","cssClass","handleBannerClose","setItem","stringify","createElement","className","label","onClickHandler","hideLabel","leftIcon","Banner","Alert"],"sources":["../../../../../../src/components/design/banners/pageBanner/PageBanner.tsx"],"sourcesContent":["'use client';\n\nimport React, { useState, ReactNode, ReactElement } from 'react';\nimport { Icon } from '../../icons/basicIcon/Icon';\nimport { SimpleButton } from '../../../form/buttons/SimpleButton';\n\nimport './pageBanners.scss';\n\nexport interface PageBannerProps {\n  id: string;\n  children: ReactNode | ReactElement;\n  animation?: 'slideInLeft' | 'slideInRight' | 'growOnHover' | 'none';\n  reDisplayOnClose?: boolean;\n  autoHide?: boolean;\n  autoHideDelay?: 1 | 3 | 5 | 10;\n  displayMode?: 'fixed' | 'inline';\n  icon?: string;\n  position?: 'topRight' | 'topCentre' | 'bottomRight' | 'bottomLeft'; // Only applicable with fixed display\n  type?: 'alert' | 'info' | 'warn' | 'error' | 'success';\n  disableClose?: boolean;\n  widthVariant?: 'sm' | 'md' | 'lg';\n  backgroundFill?: 'primary' | 'secondary';\n}\n\nexport const PageBanner: React.FC<PageBannerProps> = ({\n  animation = 'none',\n  reDisplayOnClose = false,\n  autoHide = false,\n  autoHideDelay = 10,\n  children,\n  displayMode = 'fixed',\n  icon = 'info',\n  id = 'pageBanner',\n  position = 'topCentre', \n  type = 'info',\n  disableClose = false,\n  widthVariant = 'lg',\n  backgroundFill = 'primary',\n}) => {\n  const StorageKey = `pageBanner_${ id }`;\n  const StorageValue = localStorage.getItem(StorageKey);\n  const UserPreferences = StorageValue && JSON.parse(StorageValue);\n\n  const { shouldDisplay } = UserPreferences || { shouldDisplay: true };\n\n  const [isVisible, setVisibility] = useState<boolean>(shouldDisplay);\n\n  const autoHideCssClass = autoHide ? `autoHide_${ autoHideDelay }` : 'noAutoHide';\n\n  const cssClass = `\n    pageBanner \n    ${ type } \n    ${ position } \n    ${ displayMode } \n    ${ autoHideCssClass }_${ animation }\n    width_${ widthVariant }\n    backgroundFill_${ backgroundFill }\n  `;\n\n  const handleBannerClose = () => {\n    setVisibility(false);\n    localStorage.setItem(StorageKey, JSON.stringify({ shouldDisplay: reDisplayOnClose }));\n  };\n\n  if (isVisible) {\n    return (\n      <aside className={ cssClass }>\n        { !disableClose && (\n          <SimpleButton\n            cssClass=\"closeBannerButton\"\n            label=\"Close page banner\"\n            id={ `${ id }_CloseBannerButton` }\n            onClickHandler={ handleBannerClose }\n            hideLabel\n            leftIcon={ { icon: 'close' } }\n          />\n        ) }\n\n        <div className=\"pageBannerMainIcon\">\n          <Icon icon={ icon } />\n        </div>\n\n        <div className=\"pageBannerContent\">\n          { children }\n        </div>\n      </aside>\n    );\n  }\n\n  return null;\n};\n\nexport default PageBanner;\n\nexport { PageBanner as Banner };\nexport { PageBanner as Alert };"],"mappings":"AAAA,YAAY;;AAEZ,OAAOA,KAAK,IAAIC,QAAQ,QAAiC,OAAO;AAChE,SAASC,IAAI,QAAQ,4BAA4B;AACjD,SAASC,YAAY,QAAQ,oCAAoC;AAEjE,OAAO,oBAAoB;AAkB3B,OAAO,MAAMC,UAAqC,GAAGA,CAAC;EACpDC,SAAS,GAAG,MAAM;EAClBC,gBAAgB,GAAG,KAAK;EACxBC,QAAQ,GAAG,KAAK;EAChBC,aAAa,GAAG,EAAE;EAClBC,QAAQ;EACRC,WAAW,GAAG,OAAO;EACrBC,IAAI,GAAG,MAAM;EACbC,EAAE,GAAG,YAAY;EACjBC,QAAQ,GAAG,WAAW;EACtBC,IAAI,GAAG,MAAM;EACbC,YAAY,GAAG,KAAK;EACpBC,YAAY,GAAG,IAAI;EACnBC,cAAc,GAAG;AACnB,CAAC,KAAK;EACJ,MAAMC,UAAU,GAAG,cAAeN,EAAE,EAAG;EACvC,MAAMO,YAAY,GAAGC,YAAY,CAACC,OAAO,CAACH,UAAU,CAAC;EACrD,MAAMI,eAAe,GAAGH,YAAY,IAAII,IAAI,CAACC,KAAK,CAACL,YAAY,CAAC;EAEhE,MAAM;IAAEM;EAAc,CAAC,GAAGH,eAAe,IAAI;IAAEG,aAAa,EAAE;EAAK,CAAC;EAEpE,MAAM,CAACC,SAAS,EAAEC,aAAa,CAAC,GAAG1B,QAAQ,CAAUwB,aAAa,CAAC;EAEnE,MAAMG,gBAAgB,GAAGrB,QAAQ,GAAG,YAAaC,aAAa,EAAG,GAAG,YAAY;EAEhF,MAAMqB,QAAQ,GAAG;AACnB;AACA,MAAOf,IAAI;AACX,MAAOD,QAAQ;AACf,MAAOH,WAAW;AAClB,MAAOkB,gBAAgB,IAAMvB,SAAS;AACtC,YAAaW,YAAY;AACzB,qBAAsBC,cAAc;AACpC,GAAG;EAED,MAAMa,iBAAiB,GAAGA,CAAA,KAAM;IAC9BH,aAAa,CAAC,KAAK,CAAC;IACpBP,YAAY,CAACW,OAAO,CAACb,UAAU,EAAEK,IAAI,CAACS,SAAS,CAAC;MAAEP,aAAa,EAAEnB;IAAiB,CAAC,CAAC,CAAC;EACvF,CAAC;EAED,IAAIoB,SAAS,EAAE;IACb,oBACE1B,KAAA,CAAAiC,aAAA;MAAOC,SAAS,EAAGL;IAAU,GACzB,CAACd,YAAY,iBACbf,KAAA,CAAAiC,aAAA,CAAC9B,YAAY;MACX0B,QAAQ,EAAC,mBAAmB;MAC5BM,KAAK,EAAC,mBAAmB;MACzBvB,EAAE,EAAG,GAAIA,EAAE,oBAAuB;MAClCwB,cAAc,EAAGN,iBAAmB;MACpCO,SAAS;MACTC,QAAQ,EAAG;QAAE3B,IAAI,EAAE;MAAQ;IAAG,CAC/B,CACF,eAEDX,KAAA,CAAAiC,aAAA;MAAKC,SAAS,EAAC;IAAoB,gBACjClC,KAAA,CAAAiC,aAAA,CAAC/B,IAAI;MAACS,IAAI,EAAGA;IAAM,CAAE,CAClB,CAAC,eAENX,KAAA,CAAAiC,aAAA;MAAKC,SAAS,EAAC;IAAmB,GAC9BzB,QACC,CACA,CAAC;EAEZ;EAEA,OAAO,IAAI;AACb,CAAC;AAED,eAAeL,UAAU;AAEzB,SAASA,UAAU,IAAImC,MAAM;AAC7B,SAASnC,UAAU,IAAIoC,KAAK","ignoreList":[]}

package/dist/esm/components/design/banners/pageBanner/_animations.css

@@ -0,0 +1,177 @@
+/* Popovers */
+@keyframes slideInLeft {
+  0% {
+    margin-left: -100vw;
+    opacity: 0;
+  }
+  80% {
+    margin-left: 10px;
+    opacity: 1;
+  }
+  100% {
+    margin-left: 0;
+    opacity: 1;
+  }
+}
+@keyframes slideInRight {
+  0% {
+    margin-left: 100vw;
+    opacity: 0;
+  }
+  80% {
+    margin-left: -10px;
+    opacity: 1;
+  }
+  100% {
+    margin-left: 0;
+    opacity: 1;
+  }
+}
+.autoHide_1_none {
+  animation: fadeOut 1s;
+  animation-delay: 2s;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+}
+.autoHide_1_growOnHover {
+  animation: fadeOut 1s;
+  animation-delay: 2s;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+}
+.autoHide_1_growOnHover:hover {
+  transform: scale(var(--bannerGrowOnHoverScale, 1.005));
+  transition: transform 0.1s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .autoHide_1_growOnHover:hover {
+    transition: none;
+  }
+}
+.autoHide_1_slideInLeft {
+  animation: slideInLeft 0.8s ease-out forwards, fadeOut 1s;
+  animation-delay: 0s, 2s;
+  animation-iteration-count: 1, 1;
+  animation-fill-mode: forwards, forwards;
+}
+.autoHide_1_slideInRight {
+  animation: slideInRight 0.8s ease-out forwards, fadeOut 1s;
+  animation-delay: 0s, 2s;
+  animation-iteration-count: 1, 1;
+  animation-fill-mode: forwards, forwards;
+}
+.autoHide_3_none {
+  animation: fadeOut 3s;
+  animation-delay: 4s;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+}
+.autoHide_3_growOnHover {
+  animation: fadeOut 3s;
+  animation-delay: 4s;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+}
+.autoHide_3_growOnHover:hover {
+  transform: scale(var(--bannerGrowOnHoverScale, 1.005));
+  transition: transform 0.1s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .autoHide_3_growOnHover:hover {
+    transition: none;
+  }
+}
+.autoHide_3_slideInLeft {
+  animation: slideInLeft 0.8s ease-out forwards, fadeOut 3s;
+  animation-delay: 0s, 4s;
+  animation-iteration-count: 1, 1;
+  animation-fill-mode: forwards, forwards;
+}
+.autoHide_3_slideInRight {
+  animation: slideInRight 0.8s ease-out forwards, fadeOut 3s;
+  animation-delay: 0s, 4s;
+  animation-iteration-count: 1, 1;
+  animation-fill-mode: forwards, forwards;
+}
+.autoHide_5_none {
+  animation: fadeOut 5s;
+  animation-delay: 6s;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+}
+.autoHide_5_growOnHover {
+  animation: fadeOut 5s;
+  animation-delay: 6s;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+}
+.autoHide_5_growOnHover:hover {
+  transform: scale(var(--bannerGrowOnHoverScale, 1.005));
+  transition: transform 0.1s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .autoHide_5_growOnHover:hover {
+    transition: none;
+  }
+}
+.autoHide_5_slideInLeft {
+  animation: slideInLeft 0.8s ease-out forwards, fadeOut 5s;
+  animation-delay: 0s, 6s;
+  animation-iteration-count: 1, 1;
+  animation-fill-mode: forwards, forwards;
+}
+.autoHide_5_slideInRight {
+  animation: slideInRight 0.8s ease-out forwards, fadeOut 5s;
+  animation-delay: 0s, 6s;
+  animation-iteration-count: 1, 1;
+  animation-fill-mode: forwards, forwards;
+}
+.autoHide_10_none {
+  animation: fadeOut 10s;
+  animation-delay: 10s;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+}
+.autoHide_10_growOnHover {
+  animation: fadeOut 10s;
+  animation-delay: 10s;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+}
+.autoHide_10_growOnHover:hover {
+  transform: scale(var(--bannerGrowOnHoverScale, 1.005));
+  transition: transform 0.1s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .autoHide_10_growOnHover:hover {
+    transition: none;
+  }
+}
+.autoHide_10_slideInLeft {
+  animation: slideInLeft 0.8s ease-out forwards, fadeOut 10s;
+  animation-delay: 0s, 10s;
+  animation-iteration-count: 1, 1;
+  animation-fill-mode: forwards, forwards;
+}
+.autoHide_10_slideInRight {
+  animation: slideInRight 0.8s ease-out forwards, fadeOut 10s;
+  animation-delay: 0s, 10s;
+  animation-iteration-count: 1, 1;
+  animation-fill-mode: forwards, forwards;
+}
+
+.noAutoHide_growOnHover:hover {
+  transform: scale(var(--bannerGrowOnHoverScale, 1.005));
+  transition: transform 0.1s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .noAutoHide_growOnHover:hover {
+    transition: none;
+  }
+}
+.noAutoHide_slideInLeft {
+  animation: slideInLeft 0.8s ease-out forwards;
+}
+.noAutoHide_slideInRight {
+  animation: slideInRight 0.8s ease-out forwards;
+}