@laerdal/life-react-components 1.2.2-dev.14 → 1.2.2-dev.16

package/dist/esm/InputFields/RadioButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/InputFields/RadioButton.tsx"],"names":["React","styled","RadioButtonOff","RadioButtonOn","COLORS","ComponentTextStyle","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXXSStyling","StyledRadioButton","div","props","margin","black","selected","primary_500","showWarning","warning_400","neutral_600","Regular","white","primary_20","primary_700","primary_100","primary_800","neutral_300","RadioButton","forwardRef","id","label","additionalLabel","select","disabled","iconPointerEventsTransparent","size","ref","onKeyPress","e","keyCode","Medium","preventDefault","toString","toLowerCase","concat","undefined"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, {css} from 'styled-components';\nimport {RadioButtonOff, RadioButtonOn} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport { Size } from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling} from '../styles/typography';\n\nconst StyledRadioButton = styled.div<{ margin?: string, disabled?: boolean, showWarning?: boolean, selected?: boolean }>`\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n  align-items: center;\n\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\n  cursor: pointer;\n \n  color: ${COLORS.black};\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    width: 36px;\n    height: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ${props => (props.selected ? COLORS.primary_500 : props.showWarning ? COLORS.warning_400 : COLORS.neutral_600)};\n    }\n  }\n\n  .label {\n    user-select: none;\n    display: flex;\n    flex-direction: column;\n\n    label{\n      cursor: inherit;\n    }\n\n    span {\n      ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    }\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n  }\n\n  &:not(.disabled):focus {\n    outline: none;\n\n    .icon {\n      background-color: ${COLORS.white};\n      box-shadow: 0 0 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n\n      svg {\n        color: ${COLORS.neutral_600};\n      }\n    }\n  }\n\n  &:not(.disabled):hover {\n    .icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n\n  &:not(.disabled):active {\n    .icon {\n      background: ${COLORS.primary_100};\n      box-shadow: none;\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.disabled {\n    box-shadow: none;\n    cursor: not-allowed;\n\n    color: ${COLORS.neutral_300};\n\n    .icon,\n    .label {\n      pointer-events: none;\n    }\n\n    .icon{\n      background-color: ${COLORS.white};\n    }\n    \n    .icon svg {\n      color: ${COLORS.neutral_300};\n    }\n  }\n`;\n\ninterface Props {\n  id: string;\n  selected: boolean;\n  select: (selected: boolean) => void;\n  label?: string;\n  additionalLabel?: string;\n  showWarning?: boolean;\n  disabled?: boolean;\n  iconPointerEventsTransparent?: boolean;\n  margin?: string;\n  size?: Size;\n}\n\nconst RadioButton = React.forwardRef<HTMLDivElement, Props>(({\n  id,\n  selected,\n  label,\n  additionalLabel,\n  showWarning,\n  select,\n  disabled,\n  margin,\n  iconPointerEventsTransparent,\n  size\n}: Props, ref) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled) {\n      select(!selected);\n    }\n  };\n\n  size = size ?? Size.Medium;\n\n  return (\n    <StyledRadioButton key={id} margin={margin}\n                       ref={ref}\n                       onClick={() => !disabled && select(!selected)}\n                       onMouseDown={e => e.preventDefault()}\n                       onKeyDown={onKeyPress}\n                       disabled={disabled}\n                       className={size.toString().toLowerCase().concat(disabled ? ' disabled' : '')}\n                       tabIndex={disabled ? -1 : 0}\n                       showWarning={showWarning}\n                       selected={selected}>\n      <div className={'icon'} id={id}>\n        { selected && <RadioButtonOn className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>}\n        { !selected && <RadioButtonOff className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>}\n      </div>\n      <div className={'label'}>\n        {label && <label htmlFor={id}>{label}</label>}\n        {additionalLabel !== undefined && <span>{additionalLabel}</span>}\n      </div>\n    </StyledRadioButton>\n  );\n});\n\nexport default RadioButton;\n"],"file":"RadioButton.js"}
+{"version":3,"sources":["../../../src/InputFields/RadioButton.tsx"],"names":["React","styled","RadioButtonOff","RadioButtonOn","COLORS","ComponentTextStyle","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXXSStyling","StyledRadioButton","div","props","margin","black","selected","primary_500","showWarning","warning_400","neutral_600","Regular","white","primary_20","primary_700","primary_100","primary_800","neutral_300","RadioButton","forwardRef","id","label","additionalLabel","select","disabled","iconPointerEventsTransparent","size","ref","onKeyPress","e","keyCode","Medium","preventDefault","toString","toLowerCase","concat","undefined"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, {css} from 'styled-components';\nimport {RadioButtonOff, RadioButtonOn} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport { Size } from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling} from '../styles/typography';\n\nconst StyledRadioButton = styled.div<{ margin?: string, disabled?: boolean, showWarning?: boolean, selected?: boolean }>`\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\n  cursor: pointer;\n \n  color: ${COLORS.black};\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .radio-button-icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 36px;\n    min-width: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ${props => (props.selected ? COLORS.primary_500 : props.showWarning ? COLORS.warning_400 : COLORS.neutral_600)};\n    }\n  }\n\n  .radio-button-label {\n    user-select: none;\n    display: flex;\n    flex-direction: column;\n\n    label{\n      cursor: inherit;\n    }\n\n    span {\n      ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    }\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .radio-button-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):focus {\n    outline: none;\n\n    .radio-button-icon {\n      background-color: ${COLORS.white};\n      box-shadow: 0 0 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n\n      svg {\n        color: ${COLORS.neutral_600};\n      }\n    }\n  }\n\n  &:not(.disabled):hover {\n    .radio-button-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n\n  &:not(.disabled):active {\n    .radio-button-icon {\n      background: ${COLORS.primary_100};\n      box-shadow: none;\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.disabled {\n    box-shadow: none;\n    cursor: not-allowed;\n\n    color: ${COLORS.neutral_300};\n\n    .radio-button-icon,\n    .radio-button-label {\n      pointer-events: none;\n    }\n\n    .radio-button-icon{\n      background-color: ${COLORS.white};\n    }\n    \n    .radio-button-icon svg {\n      color: ${COLORS.neutral_300};\n    }\n  }\n`;\n\ninterface Props {\n  id: string;\n  selected: boolean;\n  select: (selected: boolean) => void;\n  label?: string;\n  additionalLabel?: string;\n  showWarning?: boolean;\n  disabled?: boolean;\n  iconPointerEventsTransparent?: boolean;\n  margin?: string;\n  size?: Size;\n}\n\nconst RadioButton = React.forwardRef<HTMLDivElement, Props>(({\n  id,\n  selected,\n  label,\n  additionalLabel,\n  showWarning,\n  select,\n  disabled,\n  margin,\n  iconPointerEventsTransparent,\n  size\n}: Props, ref) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled) {\n      select(!selected);\n    }\n  };\n\n  size = size ?? Size.Medium;\n\n  return (\n    <StyledRadioButton key={id} margin={margin}\n                       ref={ref}\n                       onClick={() => !disabled && select(!selected)}\n                       onMouseDown={e => e.preventDefault()}\n                       onKeyDown={onKeyPress}\n                       disabled={disabled}\n                       className={size.toString().toLowerCase().concat(disabled ? ' disabled' : '')}\n                       tabIndex={disabled ? -1 : 0}\n                       showWarning={showWarning}\n                       selected={selected}>\n      <div className={'radio-button-icon'} id={id}>\n        { selected && <RadioButtonOn className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>}\n        { !selected && <RadioButtonOff className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>}\n      </div>\n      <div className={'radio-button-label'}>\n        {label && <label htmlFor={id}>{label}</label>}\n        {additionalLabel !== undefined && <span>{additionalLabel}</span>}\n      </div>\n    </StyledRadioButton>\n  );\n});\n\nexport default RadioButton;\n"],"file":"RadioButton.js"}

package/dist/esm/Modals/ModalDialog.js

@@ -1,5 +1,6 @@
 import _pt from "prop-types";
 import * as React from 'react';
+import { HyperLink } from '..';
 import { Button, IconButton } from '../Button';
 import { ArrowLineLeft, Close, Help } from '../icons/systemicons/SystemIcons';
 import { COLORS, ComponentL, ComponentM, ComponentTextStyle, ComponentXL } from '../styles';
@@ -14,6 +15,7 @@ export const ModalDialog = ({
   title,
   topImage,
   buttons,
+  leftFooterAction,
   backButton,
   closeAction,
   submitAction,
@@ -156,9 +158,54 @@ export const ModalDialog = ({
     }
   };
 
-  buttons?.reverse();
-  const lastLeftButton = buttons?.find(a => a.position === 'left');
-  buttons?.reverse();
+  const getLeftActionIconElement = icon => {
+    return /*#__PURE__*/React.cloneElement(icon, {
+      size: size === Size.Small ? '20px' : size === Size.Large ? '28px' : '24px'
+    });
+  };
+
+  const LeftFooterAction = leftFooterAction => {
+    const {
+      text,
+      actionType,
+      disabled,
+      icon,
+      action
+    } = leftFooterAction;
+
+    switch (actionType) {
+      case 'button':
+        return /*#__PURE__*/React.createElement(Button, {
+          id: 'left-action-button',
+          type: leftFooterAction?.type,
+          disabled: disabled,
+          loading: leftFooterAction?.loading,
+          icon: icon,
+          size: size,
+          onClick: action,
+          variant: leftFooterAction?.variant ?? 'secondary',
+          style: {
+            order: -1,
+            marginRight: 'auto'
+          }
+        }, text);
+
+      case 'hyperlink':
+        return /*#__PURE__*/React.createElement(HyperLink, {
+          id: "left-action-hyperlink",
+          className: "footer-action",
+          href: leftFooterAction.href,
+          disabled: disabled,
+          variant: "default"
+        }, icon && getLeftActionIconElement(icon), text);
+
+      case 'note':
+        return /*#__PURE__*/React.createElement("div", {
+          className: "footer-action note"
+        }, icon && getLeftActionIconElement(icon), /*#__PURE__*/React.createElement("span", null, text));
+    }
+  };
+
   return /*#__PURE__*/React.createElement(ModalContainer, {
     showModal: isModalOpen,
     closeModal: closeModalAndClearInput,
@@ -199,23 +246,15 @@ export const ModalDialog = ({
     size: size,
     onClick: b.action,
     type: b.type,
-    variant: b.variant,
-    style: b.position === 'left' ? {
-      order: -1,
-      marginRight: b === lastLeftButton ? 'auto' : undefined
-    } : undefined
-  }, b.text))))));
+    variant: b.variant
+  }, b.text)), leftFooterAction && LeftFooterAction(leftFooterAction)))));
 };
 ModalDialog.propTypes = {
   isModalOpen: _pt.bool.isRequired,
   closeModalAndClearInput: _pt.any.isRequired,
   title: _pt.string,
   topImage: _pt.any,
-  buttons: _pt.arrayOf(_pt.shape({
-    action: _pt.oneOfType([_pt.func, _pt.func]),
-    text: _pt.string.isRequired,
-    position: _pt.oneOf(['left', 'right'])
-  })),
+  buttons: _pt.array,
   tooltip: _pt.string,
   backButton: _pt.func,
   closeAction: _pt.func.isRequired,

package/dist/esm/Modals/ModalDialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Modals/ModalDialog.tsx"],"names":["React","Button","IconButton","ArrowLineLeft","Close","Help","COLORS","ComponentL","ComponentM","ComponentTextStyle","ComponentXL","Size","ModalContainer","BackButtonWrapper","CloseButtonWrapper","Column","ModalBody","ModalFooter","ModalTitleSection","StyledModalHeader","ModalNote","ModalDialog","size","isModalOpen","closeModalAndClearInput","title","topImage","buttons","backButton","closeAction","submitAction","tooltip","children","note","state","tooltipOpen","setTooltipOpen","useState","getMinWidth","Small","Large","Medium","getMaxWidth","getImageHeight","getMarginBottom","getPadding","ModalTitle","Bold","ModalCloseButton","onClick","black","ModalBackButton","reverse","lastLeftButton","find","a","position","neutral_600","map","b","i","id","disabled","loading","action","type","variant","order","marginRight","undefined","text"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { SystemIcon, SystemIcons } from '..';\nimport {Button, IconButton} from '../Button';\nimport {ButtonProps} from '../Button/Button';\nimport {ArrowLineLeft, Close, Help} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentL, ComponentM, ComponentTextStyle, ComponentXL} from '../styles';\nimport {Size} from '../types'\nimport ModalContainer from './ModalContainer';\nimport {\n  BackButtonWrapper,\n  CloseButtonWrapper,\n  Column,\n  ModalBody,\n  ModalFooter,\n  ModalTitleSection,\n  StyledModalHeader\n} from './ModalStyles';\n\nimport {ModalNote} from './ModalNote';\n\ninterface ButtonAction extends Pick<ButtonProps, 'variant' | 'id' | 'loading' | 'disabled' | 'icon' | 'type'> {\n  action?: (() => void) | ((e: any) => void);\n  text: string;\n  position?: 'left' | 'right';\n}\n\ninterface NewModalProps {\n  size?: Size;\n  isModalOpen: boolean;\n  closeModalAndClearInput: any;\n  title?: string;\n  topImage?: any;\n  buttons?: ButtonAction[];\n  tooltip?: string;\n  backButton?: () => void;\n  closeAction: () => void;\n  submitAction: (event?: React.FormEvent<HTMLFormElement> | undefined) => void;\n  note?: string;\n  state?: string;\n}\n\nexport const ModalDialog: React.FunctionComponent<NewModalProps> = ({\n  size,\n  isModalOpen,\n  closeModalAndClearInput,\n  title,\n  topImage,\n  buttons,\n  backButton,\n  closeAction,\n  submitAction,\n  tooltip,\n  children,\n  note,\n  state\n}) => {\n  const [tooltipOpen, setTooltipOpen] = React.useState<boolean>(false);\n\n  const getMinWidth = () => {\n    switch (size) {\n      case Size.Small:\n        return '320px';\n      case Size.Large:\n        return '640px';\n      case Size.Medium:\n      default:\n        return '480px';\n    }\n  };\n\n  const getMaxWidth = () => {\n    switch (size) {\n      case Size.Small:\n        return '480px';\n      case Size.Large:\n        return '720px';\n      case Size.Medium:\n      default:\n        return '640px';\n    }\n  };\n\n  const getImageHeight = () => {\n    switch (size) {\n      case Size.Small:\n        return 160;\n      case Size.Medium:\n        return 200;\n      case Size.Large:\n        return 240;\n      default:\n        return 200;\n    }\n  };\n\n  const getMarginBottom = () => {\n    switch (size) {\n      case Size.Small:\n        return '16px';\n      case Size.Medium:\n        return '24px';\n      case Size.Large:\n        return '32px';\n      default:\n        return '24px';\n    }\n  };\n\n  const getPadding = () => {\n    switch (size) {\n      case Size.Small:\n        return '16px 16px 8px';\n      case Size.Medium:\n        return '24px 24px 20px';\n      case Size.Large:\n        return '32px';\n      default:\n        return '24px 24px 16px';\n    }\n  };\n\n  const ModalTitle = (title: string, size?: Size) => {\n    switch (size) {\n      case Size.Small:\n        return <ComponentM textStyle={ComponentTextStyle.Bold}>{title}</ComponentM>;\n      case Size.Medium:\n        return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n      case Size.Large:\n        return <ComponentXL textStyle={ComponentTextStyle.Bold}>{title}</ComponentXL>;\n      default:\n        return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n    }\n  };\n\n  const ModalCloseButton = (onClick: any) => {\n    return (\n      <CloseButtonWrapper hasImage={!!topImage} size={size}>\n        <IconButton variant=\"secondary\" shape=\"circular\" action={() => onClick()} borderRadius={48}>\n          <Close size=\"24px\" color={COLORS.black} />\n        </IconButton>\n      </CloseButtonWrapper>\n    );\n  };\n\n  const ModalBackButton = () => {\n    if (backButton) {\n      return (\n        <BackButtonWrapper hasImage={!!topImage} size={size}>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={() => backButton()} borderRadius={48}>\n            <ArrowLineLeft size=\"24px\" color={COLORS.black} />\n          </IconButton>\n        </BackButtonWrapper>\n      );\n    }\n  };\n\n  buttons?.reverse();\n  const lastLeftButton = buttons?.find(a => a.position === 'left');\n  buttons?.reverse();\n\n  return (\n    <ModalContainer showModal={isModalOpen} closeModal={closeModalAndClearInput} minWidth={getMinWidth()} maxWidth={getMaxWidth()} modalHeight=\"auto\" padding={getPadding()}>\n      <Column>\n        <form onSubmit={submitAction}>\n          {topImage && (\n            <StyledModalHeader size={size} height={getImageHeight()} marginBottom={getMarginBottom()}>\n              <img src={topImage} alt=\"Modal top\" />\n              {ModalBackButton()}\n              {ModalCloseButton(closeAction)}\n            </StyledModalHeader>\n          )}\n          <ModalTitleSection>\n            {!topImage && ModalBackButton()}\n            {title && ModalTitle(title, size)}\n            {tooltip && (\n              <div id=\"tooltip\">\n                <div onMouseOver={() => setTooltipOpen(true)} onMouseOut={() => setTooltipOpen(false)}>\n                  <Help size=\"24px\" color={COLORS.neutral_600} />\n                </div>\n                {tooltipOpen && <span>{tooltip}</span>}\n              </div>\n            )}\n            {!topImage && ModalCloseButton(closeAction)}\n          </ModalTitleSection>\n\n          <ModalBody size={size}>{children}</ModalBody>\n\n          { note && <ModalNote note={note} state={state} size={size}/> }\n\n          <ModalFooter size={size}>\n              {buttons?.map((b, i) => (\n                  <Button key={b.id || i}\n                          id={b.id}\n                          disabled={b.disabled}\n                          loading={b.loading}\n                          size={size}\n                          onClick={b.action}\n                          type={b.type}\n                          variant={b.variant}\n                          style={\n                            b.position === 'left'\n                              ? {\n                                order: -1,\n                                marginRight: b === lastLeftButton ? 'auto' : undefined\n                              }\n                              : undefined\n                          }>\n                    {b.text}\n                  </Button>\n              ))}\n          </ModalFooter>\n        </form>\n      </Column>\n    </ModalContainer>\n  );\n};\n\nexport default ModalDialog;\n"],"file":"ModalDialog.js"}
+{"version":3,"sources":["../../../src/Modals/ModalDialog.tsx"],"names":["React","HyperLink","Button","IconButton","ArrowLineLeft","Close","Help","COLORS","ComponentL","ComponentM","ComponentTextStyle","ComponentXL","Size","ModalContainer","BackButtonWrapper","CloseButtonWrapper","Column","ModalBody","ModalFooter","ModalTitleSection","StyledModalHeader","ModalNote","ModalDialog","size","isModalOpen","closeModalAndClearInput","title","topImage","buttons","leftFooterAction","backButton","closeAction","submitAction","tooltip","children","note","state","tooltipOpen","setTooltipOpen","useState","getMinWidth","Small","Large","Medium","getMaxWidth","getImageHeight","getMarginBottom","getPadding","ModalTitle","Bold","ModalCloseButton","onClick","black","ModalBackButton","getLeftActionIconElement","icon","cloneElement","LeftFooterAction","text","actionType","disabled","action","type","loading","variant","order","marginRight","href","neutral_600","map","b","i","id"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { HyperLink } from '..';\nimport { Button, IconButton } from '../Button';\nimport { ArrowLineLeft, Close, Help } from '../icons/systemicons/SystemIcons';\nimport { COLORS, ComponentL, ComponentM, ComponentTextStyle, ComponentXL } from '../styles';\nimport { Size } from '../types';\nimport ModalContainer from './ModalContainer';\nimport { BackButtonWrapper, CloseButtonWrapper, Column, ModalBody, ModalFooter, ModalTitleSection, StyledModalHeader } from './ModalStyles';\n\nimport { ModalNote } from './ModalNote';\nimport { ButtonAction, LeftFooterAction, LeftFooterActionBase, LeftFooterButton, LeftFooterHyperlink } from './ModalTypes';\nimport { ReactNode } from 'react';\n\ninterface NewModalProps {\n  size?: Size;\n  isModalOpen: boolean;\n  closeModalAndClearInput: any;\n  title?: string;\n  topImage?: any;\n  buttons?: ButtonAction[];\n  leftFooterAction?: LeftFooterAction;\n  tooltip?: string;\n  backButton?: () => void;\n  closeAction: () => void;\n  submitAction: (event?: React.FormEvent<HTMLFormElement> | undefined) => void;\n  note?: string;\n  state?: string;\n}\n\nexport const ModalDialog: React.FunctionComponent<NewModalProps> = ({\n  size,\n  isModalOpen,\n  closeModalAndClearInput,\n  title,\n  topImage,\n  buttons,\n  leftFooterAction,\n  backButton,\n  closeAction,\n  submitAction,\n  tooltip,\n  children,\n  note,\n  state,\n}) => {\n  const [tooltipOpen, setTooltipOpen] = React.useState<boolean>(false);\n\n  const getMinWidth = () => {\n    switch (size) {\n      case Size.Small:\n        return '320px';\n      case Size.Large:\n        return '640px';\n      case Size.Medium:\n      default:\n        return '480px';\n    }\n  };\n\n  const getMaxWidth = () => {\n    switch (size) {\n      case Size.Small:\n        return '480px';\n      case Size.Large:\n        return '720px';\n      case Size.Medium:\n      default:\n        return '640px';\n    }\n  };\n\n  const getImageHeight = () => {\n    switch (size) {\n      case Size.Small:\n        return 160;\n      case Size.Medium:\n        return 200;\n      case Size.Large:\n        return 240;\n      default:\n        return 200;\n    }\n  };\n\n  const getMarginBottom = () => {\n    switch (size) {\n      case Size.Small:\n        return '16px';\n      case Size.Medium:\n        return '24px';\n      case Size.Large:\n        return '32px';\n      default:\n        return '24px';\n    }\n  };\n\n  const getPadding = () => {\n    switch (size) {\n      case Size.Small:\n        return '16px 16px 8px';\n      case Size.Medium:\n        return '24px 24px 20px';\n      case Size.Large:\n        return '32px';\n      default:\n        return '24px 24px 16px';\n    }\n  };\n\n  const ModalTitle = (title: string, size?: Size) => {\n    switch (size) {\n      case Size.Small:\n        return <ComponentM textStyle={ComponentTextStyle.Bold}>{title}</ComponentM>;\n      case Size.Medium:\n        return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n      case Size.Large:\n        return <ComponentXL textStyle={ComponentTextStyle.Bold}>{title}</ComponentXL>;\n      default:\n        return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n    }\n  };\n\n  const ModalCloseButton = (onClick: any) => {\n    return (\n      <CloseButtonWrapper hasImage={!!topImage} size={size}>\n        <IconButton variant=\"secondary\" shape=\"circular\" action={() => onClick()} borderRadius={48}>\n          <Close size=\"24px\" color={COLORS.black} />\n        </IconButton>\n      </CloseButtonWrapper>\n    );\n  };\n\n  const ModalBackButton = () => {\n    if (backButton) {\n      return (\n        <BackButtonWrapper hasImage={!!topImage} size={size}>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={() => backButton()} borderRadius={48}>\n            <ArrowLineLeft size=\"24px\" color={COLORS.black} />\n          </IconButton>\n        </BackButtonWrapper>\n      );\n    }\n  };\n\n  const getLeftActionIconElement = (icon: ReactNode) => {\n    return React.cloneElement(icon as React.ReactElement, { size: size === Size.Small ? '20px' : size === Size.Large ? '28px' : '24px' });\n  };\n\n  const LeftFooterAction = (leftFooterAction: LeftFooterAction) => {\n    const { text, actionType, disabled, icon, action } = leftFooterAction;\n    switch (actionType) {\n      case 'button':\n        return (\n          <Button\n            id={'left-action-button'}\n            type={(leftFooterAction as LeftFooterButton)?.type}\n            disabled={disabled}\n            loading={(leftFooterAction as LeftFooterButton)?.loading}\n            icon={icon}\n            size={size}\n            onClick={action}\n            variant={(leftFooterAction as LeftFooterButton)?.variant ?? 'secondary'}\n            style={{ order: -1, marginRight: 'auto' }}>\n            {text}\n          </Button>\n        );\n      case 'hyperlink':\n        return (\n          <HyperLink id=\"left-action-hyperlink\" className=\"footer-action\" href={(leftFooterAction as LeftFooterHyperlink).href} disabled={disabled} variant=\"default\">\n            {icon && getLeftActionIconElement(icon)}\n            {text}\n          </HyperLink>\n        );\n      case 'note':\n        return (\n          <div className=\"footer-action note\">\n            {icon && getLeftActionIconElement(icon)}\n            <span>{text}</span>\n          </div>\n        );\n    }\n  };\n\n  return (\n    <ModalContainer showModal={isModalOpen} closeModal={closeModalAndClearInput} minWidth={getMinWidth()} maxWidth={getMaxWidth()} modalHeight=\"auto\" padding={getPadding()}>\n      <Column>\n        <form onSubmit={submitAction}>\n          {topImage && (\n            <StyledModalHeader size={size} height={getImageHeight()} marginBottom={getMarginBottom()}>\n              <img src={topImage} alt=\"Modal top\" />\n              {ModalBackButton()}\n              {ModalCloseButton(closeAction)}\n            </StyledModalHeader>\n          )}\n          <ModalTitleSection>\n            {!topImage && ModalBackButton()}\n            {title && ModalTitle(title, size)}\n            {tooltip && (\n              <div id=\"tooltip\">\n                <div onMouseOver={() => setTooltipOpen(true)} onMouseOut={() => setTooltipOpen(false)}>\n                  <Help size=\"24px\" color={COLORS.neutral_600} />\n                </div>\n                {tooltipOpen && <span>{tooltip}</span>}\n              </div>\n            )}\n            {!topImage && ModalCloseButton(closeAction)}\n          </ModalTitleSection>\n\n          <ModalBody size={size}>{children}</ModalBody>\n\n          {note && <ModalNote note={note} state={state} size={size} />}\n\n          <ModalFooter size={size}>\n            {buttons?.map((b, i) => (\n              <Button key={b.id || i} id={b.id} disabled={b.disabled} loading={b.loading} size={size} onClick={b.action} type={b.type} variant={b.variant}>\n                {b.text}\n              </Button>\n            ))}\n            {leftFooterAction && LeftFooterAction(leftFooterAction)}\n          </ModalFooter>\n        </form>\n      </Column>\n    </ModalContainer>\n  );\n};\n\nexport default ModalDialog;\n"],"file":"ModalDialog.js"}

package/dist/esm/Modals/ModalStyles.js

@@ -85,7 +85,7 @@ export const ModalNoteSection = styled.section`
   border-radius: 2px;
 
   span {
-    display:block;
+    display: block;
     width: 80%;
     margin-left: 8px;
     color: ${props => getNoteMessageColor(props.state)};
@@ -110,6 +110,19 @@ export const ModalFooter = styled.section`
   justify-content: flex-end;
 
   gap: ${props => props?.size === 'large' ? `16px` : '8px'};
+
+  .footer-action {
+    order: -1;
+    margin-right: auto;
+    display: flex;
+    align-items: center;
+    font-size: ${props => props?.size === 'small' ? `16px` : props?.size === 'large' ? '20px' : '18px'};
+    gap: ${props => props?.size === Size.Large ? `8px` : props?.size === Size.Small ? '4px' : '6px'};
+  }
+
+  .footer-action.note {
+    color: ${COLORS.neutral_600};
+  }
 `;
 export const getBackgroundColor = state => {
   switch (state) {

package/dist/esm/Modals/ModalStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Modals/ModalStyles.ts"],"names":["styled","css","COLORS","Size","ModalHeader","section","props","marginBottom","StyledModalHeader","height","size","Column","div","ModalTitleSection","CloseButtonWrapper","hasImage","Small","Large","BackButtonWrapper","ModalTitle","h5","fontSize","ModalNoteSection","getBackgroundColor","state","getNoteMessageColor","ModalBody","ModalFooter","correct_100","warning_100","critical_100","primary_100","correct_700","warning_700","critical_700","primary_700"],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { COLORS } from '..';\nimport { Size } from '../types'\n\n/**\n * Modal styles\n */\nexport const ModalHeader = styled.section<{ marginBottom?: string }>`\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: ${(props) => props.marginBottom || '24px'};\n`;\n\nexport const StyledModalHeader = styled(ModalHeader)<{ marginBottom?: string; size?: string; height?: number }>`\n  flex: 0 calc(50% - 5px);\n  flex-direction: column;\n  position: relative;\n  text-align: left;\n  height: ${(props) => (props.height ? `${props.height - (props.size === 'small' ? 16 : props.size === 'large' ? 32 : 24)}px` : '')};\n  img {\n    width: 100%;\n    height: ${(props) => `${props.height}px`};\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    border-radius: 8px 8px 0 0;\n    object-fit: cover;\n  }\n`;\n\nexport const Column = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: stretch;\n  height: 100%;\n`;\n\nexport const ModalTitleSection = styled.section`\n  display: flex;\n  div#tooltip {\n    margin-left: 12px;\n  }\n`;\n\nexport const CloseButtonWrapper = styled.div<{ size?: Size; hasImage?: boolean }>`\n  button {\n    ${(props) =>\n      props.hasImage\n        ? css`\n            position: absolute;\n            right: 0;\n            top: 0;\n            margin: -12px !important;\n          `\n        : css`\n            position: absolute;\n            top: 0;\n            right: 0;\n            left: unset;\n            margin: ${props.size === Size.Small ? '4px 4px 0 0' : props.size === Size.Large ? '20px 20px 0 0' : '12px 12px 0 0'} !important;\n          `}\n  }\n`;\n\nexport const BackButtonWrapper = styled.div<{ size?: Size; hasImage?: boolean }>`\n  button {\n    ${(props) =>\n      props.hasImage\n        ? css`\n            left: 0;\n            top: 0;\n            position: absolute;\n            margin: -12px 0 0 -12px !important;\n          `\n        : css`\n            position: unset;\n            margin: -12px 0 0 -12px !important;\n          `}\n  }\n`;\n\nexport const ModalTitle = styled.h5<{ fontSize?: string }>`\n  margin: 0;\n  font-size: ${(props) => props.fontSize || '1.25em'};\n  font-weight: bold;\n`;\n\nexport const ModalNoteSection = styled.section<{state:string, size?:string}>`\n  background-color: ${(props)=> getBackgroundColor(props.state)};\n  font-size: ${(props)=> (props?.size === 'small' ? `16px` : props?.size === 'large' ? '20px' : '18px')};\n  margin-top: ${(props)=> (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n  margin-bottom: ${(props)=> (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n  display: flex;\n  flex-direction: row;\n  padding: ${(props)=> (props?.size === 'small' ? `8px` : props?.size === 'large' ? '16px' : '12px')};\n  border-radius: 2px;\n\n  span {\n    display:block;\n    width: 80%;\n    margin-left: 8px;\n    color: ${(props)=> getNoteMessageColor(props.state)};\n  }\n`;\n\nexport const ModalBody = styled.section<{ size?: string }>`\n  > :first-child {\n    margin-top: 24px;\n  }\n\n  > :last-child {\n    margin-bottom: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n  }\n\n  p: first-of-type {\n    padding-bottom: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n  }\n`;\n\nexport const ModalFooter = styled.section<{ size?: Size }>`\n  margin-top: ${(props) => (props?.size === Size.Small ? `20px` : props?.size === Size.Large ? '28px' : '24px')};\n  display: flex;\n  justify-content: flex-end;\n\n  gap: ${(props) => (props?.size === 'large' ? `16px` : '8px')};\n`;\n\nexport const getBackgroundColor = (state:string) => {\n  switch(state){\n    case 'positive': return COLORS.correct_100;\n    case 'warning': return COLORS.warning_100;\n    case 'critical': return COLORS.critical_100;\n    default: return COLORS.primary_100;\n  }\n}\n\nexport const getNoteMessageColor = (state:string) => {\n  switch(state){\n    case 'positive': return COLORS.correct_700;\n    case 'warning': return COLORS.warning_700;\n    case 'critical': return COLORS.critical_700;\n    default: return COLORS.primary_700;\n  }\n}"],"file":"ModalStyles.js"}
+{"version":3,"sources":["../../../src/Modals/ModalStyles.ts"],"names":["styled","css","COLORS","Size","ModalHeader","section","props","marginBottom","StyledModalHeader","height","size","Column","div","ModalTitleSection","CloseButtonWrapper","hasImage","Small","Large","BackButtonWrapper","ModalTitle","h5","fontSize","ModalNoteSection","getBackgroundColor","state","getNoteMessageColor","ModalBody","ModalFooter","neutral_600","correct_100","warning_100","critical_100","primary_100","correct_700","warning_700","critical_700","primary_700"],"mappings":"AAAA,OAAOA,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AACA,SAASC,MAAT,QAAuB,IAAvB;AACA,SAASC,IAAT,QAAqB,UAArB;AAEA;AACA;AACA;;AACA,OAAO,MAAMC,WAAW,GAAGJ,MAAM,CAACK,OAAmC;AACrE;AACA;AACA;AACA,mBAAoBC,KAAD,IAAWA,KAAK,CAACC,YAAN,IAAsB,MAAO;AAC3D,CALO;AAOP,OAAO,MAAMC,iBAAiB,GAAGR,MAAM,CAACI,WAAD,CAAyE;AAChH;AACA;AACA;AACA;AACA,YAAaE,KAAD,IAAYA,KAAK,CAACG,MAAN,GAAgB,GAAEH,KAAK,CAACG,MAAN,IAAgBH,KAAK,CAACI,IAAN,KAAe,OAAf,GAAyB,EAAzB,GAA8BJ,KAAK,CAACI,IAAN,KAAe,OAAf,GAAyB,EAAzB,GAA8B,EAA5E,CAAgF,IAAlG,GAAwG,EAAI;AACpI;AACA;AACA,cAAeJ,KAAD,IAAY,GAAEA,KAAK,CAACG,MAAO,IAAI;AAC7C;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAhBO;AAkBP,OAAO,MAAME,MAAM,GAAGX,MAAM,CAACY,GAAI;AACjC;AACA;AACA;AACA;AACA,CALO;AAOP,OAAO,MAAMC,iBAAiB,GAAGb,MAAM,CAACK,OAAQ;AAChD;AACA;AACA;AACA;AACA,CALO;AAOP,OAAO,MAAMS,kBAAkB,GAAGd,MAAM,CAACY,GAAyC;AAClF;AACA,MAAON,KAAD,IACAA,KAAK,CAACS,QAAN,GACId,GAAI;AACd;AACA;AACA;AACA;AACA,WANM,GAOIA,GAAI;AACd;AACA;AACA;AACA;AACA,sBAAsBK,KAAK,CAACI,IAAN,KAAeP,IAAI,CAACa,KAApB,GAA4B,aAA5B,GAA4CV,KAAK,CAACI,IAAN,KAAeP,IAAI,CAACc,KAApB,GAA4B,eAA5B,GAA8C,eAAgB;AAChI,WAAY;AACZ;AACA,CAlBO;AAoBP,OAAO,MAAMC,iBAAiB,GAAGlB,MAAM,CAACY,GAAyC;AACjF;AACA,MAAON,KAAD,IACAA,KAAK,CAACS,QAAN,GACId,GAAI;AACd;AACA;AACA;AACA;AACA,WANM,GAOIA,GAAI;AACd;AACA;AACA,WAAY;AACZ;AACA,CAfO;AAiBP,OAAO,MAAMkB,UAAU,GAAGnB,MAAM,CAACoB,EAA0B;AAC3D;AACA,eAAgBd,KAAD,IAAWA,KAAK,CAACe,QAAN,IAAkB,QAAS;AACrD;AACA,CAJO;AAMP,OAAO,MAAMC,gBAAgB,GAAGtB,MAAM,CAACK,OAA0C;AACjF,sBAAuBC,KAAD,IAAWiB,kBAAkB,CAACjB,KAAK,CAACkB,KAAP,CAAc;AACjE,eAAgBlB,KAAD,IAAYA,KAAK,EAAEI,IAAP,KAAgB,OAAhB,GAA2B,MAA3B,GAAmCJ,KAAK,EAAEI,IAAP,KAAgB,OAAhB,GAA0B,MAA1B,GAAmC,MAAQ;AACzG,gBAAiBJ,KAAD,IAAYA,KAAK,EAAEI,IAAP,KAAgB,OAAhB,GAA2B,KAA3B,GAAkCJ,KAAK,EAAEI,IAAP,KAAgB,OAAhB,GAA0B,MAA1B,GAAmC,MAAQ;AACzG,mBAAoBJ,KAAD,IAAYA,KAAK,EAAEI,IAAP,KAAgB,OAAhB,GAA2B,KAA3B,GAAkCJ,KAAK,EAAEI,IAAP,KAAgB,OAAhB,GAA0B,MAA1B,GAAmC,MAAQ;AAC5G;AACA;AACA,aAAcJ,KAAD,IAAYA,KAAK,EAAEI,IAAP,KAAgB,OAAhB,GAA2B,KAA3B,GAAkCJ,KAAK,EAAEI,IAAP,KAAgB,OAAhB,GAA0B,MAA1B,GAAmC,MAAQ;AACtG;AACA;AACA;AACA;AACA;AACA;AACA,aAAcJ,KAAD,IAAWmB,mBAAmB,CAACnB,KAAK,CAACkB,KAAP,CAAc;AACzD;AACA,CAhBO;AAkBP,OAAO,MAAME,SAAS,GAAG1B,MAAM,CAACK,OAA2B;AAC3D;AACA;AACA;AACA;AACA;AACA,qBAAsBC,KAAD,IAAYA,KAAK,EAAEI,IAAP,KAAgB,OAAhB,GAA2B,KAA3B,GAAkCJ,KAAK,EAAEI,IAAP,KAAgB,OAAhB,GAA0B,MAA1B,GAAmC,MAAQ;AAC9G;AACA;AACA;AACA,sBAAuBJ,KAAD,IAAYA,KAAK,EAAEI,IAAP,KAAgB,OAAhB,GAA2B,KAA3B,GAAkCJ,KAAK,EAAEI,IAAP,KAAgB,OAAhB,GAA0B,MAA1B,GAAmC,MAAQ;AAC/G;AACA,CAZO;AAcP,OAAO,MAAMiB,WAAW,GAAG3B,MAAM,CAACK,OAAyB;AAC3D,gBAAiBC,KAAD,IAAYA,KAAK,EAAEI,IAAP,KAAgBP,IAAI,CAACa,KAArB,GAA8B,MAA9B,GAAsCV,KAAK,EAAEI,IAAP,KAAgBP,IAAI,CAACc,KAArB,GAA6B,MAA7B,GAAsC,MAAQ;AAChH;AACA;AACA;AACA,SAAUX,KAAD,IAAYA,KAAK,EAAEI,IAAP,KAAgB,OAAhB,GAA2B,MAA3B,GAAmC,KAAO;AAC/D;AACA;AACA;AACA;AACA;AACA;AACA,iBAAkBJ,KAAD,IAAYA,KAAK,EAAEI,IAAP,KAAgB,OAAhB,GAA2B,MAA3B,GAAmCJ,KAAK,EAAEI,IAAP,KAAgB,OAAhB,GAA0B,MAA1B,GAAmC,MAAQ;AAC3G,WAAYJ,KAAD,IAAYA,KAAK,EAAEI,IAAP,KAAgBP,IAAI,CAACc,KAArB,GAA8B,KAA9B,GAAqCX,KAAK,EAAEI,IAAP,KAAgBP,IAAI,CAACa,KAArB,GAA6B,KAA7B,GAAqC,KAAO;AACxG;AACA;AACA;AACA,aAAad,MAAM,CAAC0B,WAAY;AAChC;AACA,CAnBO;AAqBP,OAAO,MAAML,kBAAkB,GAAIC,KAAD,IAAmB;AACnD,UAAQA,KAAR;AACE,SAAK,UAAL;AACE,aAAOtB,MAAM,CAAC2B,WAAd;;AACF,SAAK,SAAL;AACE,aAAO3B,MAAM,CAAC4B,WAAd;;AACF,SAAK,UAAL;AACE,aAAO5B,MAAM,CAAC6B,YAAd;;AACF;AACE,aAAO7B,MAAM,CAAC8B,WAAd;AARJ;AAUD,CAXM;AAaP,OAAO,MAAMP,mBAAmB,GAAID,KAAD,IAAmB;AACpD,UAAQA,KAAR;AACE,SAAK,UAAL;AACE,aAAOtB,MAAM,CAAC+B,WAAd;;AACF,SAAK,SAAL;AACE,aAAO/B,MAAM,CAACgC,WAAd;;AACF,SAAK,UAAL;AACE,aAAOhC,MAAM,CAACiC,YAAd;;AACF;AACE,aAAOjC,MAAM,CAACkC,WAAd;AARJ;AAUD,CAXM","sourcesContent":["import styled, { css } from 'styled-components';\nimport { COLORS } from '..';\nimport { Size } from '../types';\n\n/**\n * Modal styles\n */\nexport const ModalHeader = styled.section<{ marginBottom?: string }>`\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: ${(props) => props.marginBottom || '24px'};\n`;\n\nexport const StyledModalHeader = styled(ModalHeader)<{ marginBottom?: string; size?: string; height?: number }>`\n  flex: 0 calc(50% - 5px);\n  flex-direction: column;\n  position: relative;\n  text-align: left;\n  height: ${(props) => (props.height ? `${props.height - (props.size === 'small' ? 16 : props.size === 'large' ? 32 : 24)}px` : '')};\n  img {\n    width: 100%;\n    height: ${(props) => `${props.height}px`};\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    border-radius: 8px 8px 0 0;\n    object-fit: cover;\n  }\n`;\n\nexport const Column = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: stretch;\n  height: 100%;\n`;\n\nexport const ModalTitleSection = styled.section`\n  display: flex;\n  div#tooltip {\n    margin-left: 12px;\n  }\n`;\n\nexport const CloseButtonWrapper = styled.div<{ size?: Size; hasImage?: boolean }>`\n  button {\n    ${(props) =>\n      props.hasImage\n        ? css`\n            position: absolute;\n            right: 0;\n            top: 0;\n            margin: -12px !important;\n          `\n        : css`\n            position: absolute;\n            top: 0;\n            right: 0;\n            left: unset;\n            margin: ${props.size === Size.Small ? '4px 4px 0 0' : props.size === Size.Large ? '20px 20px 0 0' : '12px 12px 0 0'} !important;\n          `}\n  }\n`;\n\nexport const BackButtonWrapper = styled.div<{ size?: Size; hasImage?: boolean }>`\n  button {\n    ${(props) =>\n      props.hasImage\n        ? css`\n            left: 0;\n            top: 0;\n            position: absolute;\n            margin: -12px 0 0 -12px !important;\n          `\n        : css`\n            position: unset;\n            margin: -12px 0 0 -12px !important;\n          `}\n  }\n`;\n\nexport const ModalTitle = styled.h5<{ fontSize?: string }>`\n  margin: 0;\n  font-size: ${(props) => props.fontSize || '1.25em'};\n  font-weight: bold;\n`;\n\nexport const ModalNoteSection = styled.section<{ state: string; size?: string }>`\n  background-color: ${(props) => getBackgroundColor(props.state)};\n  font-size: ${(props) => (props?.size === 'small' ? `16px` : props?.size === 'large' ? '20px' : '18px')};\n  margin-top: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n  margin-bottom: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n  display: flex;\n  flex-direction: row;\n  padding: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '16px' : '12px')};\n  border-radius: 2px;\n\n  span {\n    display: block;\n    width: 80%;\n    margin-left: 8px;\n    color: ${(props) => getNoteMessageColor(props.state)};\n  }\n`;\n\nexport const ModalBody = styled.section<{ size?: string }>`\n  > :first-child {\n    margin-top: 24px;\n  }\n\n  > :last-child {\n    margin-bottom: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n  }\n\n  p: first-of-type {\n    padding-bottom: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n  }\n`;\n\nexport const ModalFooter = styled.section<{ size?: Size }>`\n  margin-top: ${(props) => (props?.size === Size.Small ? `20px` : props?.size === Size.Large ? '28px' : '24px')};\n  display: flex;\n  justify-content: flex-end;\n\n  gap: ${(props) => (props?.size === 'large' ? `16px` : '8px')};\n\n  .footer-action {\n    order: -1;\n    margin-right: auto;\n    display: flex;\n    align-items: center;\n    font-size: ${(props) => (props?.size === 'small' ? `16px` : props?.size === 'large' ? '20px' : '18px')};\n    gap: ${(props) => (props?.size === Size.Large ? `8px` : props?.size === Size.Small ? '4px' : '6px')};\n  }\n\n  .footer-action.note {\n    color: ${COLORS.neutral_600};\n  }\n`;\n\nexport const getBackgroundColor = (state: string) => {\n  switch (state) {\n    case 'positive':\n      return COLORS.correct_100;\n    case 'warning':\n      return COLORS.warning_100;\n    case 'critical':\n      return COLORS.critical_100;\n    default:\n      return COLORS.primary_100;\n  }\n};\n\nexport const getNoteMessageColor = (state: string) => {\n  switch (state) {\n    case 'positive':\n      return COLORS.correct_700;\n    case 'warning':\n      return COLORS.warning_700;\n    case 'critical':\n      return COLORS.critical_700;\n    default:\n      return COLORS.primary_700;\n  }\n};\n"],"file":"ModalStyles.js"}

package/dist/esm/Modals/ModalTypes.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ModalTypes.js.map

package/dist/esm/Modals/ModalTypes.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[],"file":"ModalTypes.js"}

package/dist/esm/index.js

@@ -26,4 +26,5 @@ export * from './Table';
 export * from './Toggles';
 export * from './HyperLink';
 export * from './NotificationDot';
+export * from './Accordion';
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,UAAd;AACA,cAAc,SAAd;AACA,cAAc,SAAd;AAEA,cAAc,YAAd;AAEA,cAAc,UAAd;AACA,cAAc,cAAd;AACA,cAAc,SAAd;AACA,cAAc,iBAAd;AACA,cAAc,UAAd;AACA,cAAc,oBAAd;AACA,cAAc,mBAAd;AACA,cAAc,WAAd;AACA,cAAc,WAAd;AACA,cAAc,uBAAd;AACA,cAAc,QAAd;AACA,cAAc,WAAd;AACA,cAAc,YAAd;AACA,cAAc,eAAd;AACA,cAAc,YAAd;AACA,cAAc,YAAd;AACA,cAAc,eAAd;AACA,cAAc,QAAd;AACA,cAAc,UAAd;AACA,cAAc,aAAd;AACA,cAAc,SAAd;AACA,cAAc,WAAd;AACA,cAAc,aAAd;AACA,cAAc,mBAAd","sourcesContent":["export * from './styles';\nexport * from './icons';\nexport * from './types';\n\nexport * from './AuthPage';\n\nexport * from './Button';\nexport * from './Breadcrumb';\nexport * from './Chips';\nexport * from './SkipToContent';\nexport * from './Footer';\nexport * from './LoadingIndicator';\nexport * from './MiniProductCard';\nexport * from './NavItem';\nexport * from './Layouts';\nexport * from './GlobalNavigationBar';\nexport * from './Tabs';\nexport * from './Banners';\nexport * from './Toasters';\nexport * from './InputFields';\nexport * from './Dropdown';\nexport * from './Switcher';\nexport * from './LoadingPage';\nexport * from './List';\nexport * from './Modals';\nexport * from './Paginator';\nexport * from './Table';\nexport * from './Toggles';\nexport * from './HyperLink';\nexport * from './NotificationDot';"],"file":"index.js"}
+{"version":3,"sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,UAAd;AACA,cAAc,SAAd;AACA,cAAc,SAAd;AAEA,cAAc,YAAd;AAEA,cAAc,UAAd;AACA,cAAc,cAAd;AACA,cAAc,SAAd;AACA,cAAc,iBAAd;AACA,cAAc,UAAd;AACA,cAAc,oBAAd;AACA,cAAc,mBAAd;AACA,cAAc,WAAd;AACA,cAAc,WAAd;AACA,cAAc,uBAAd;AACA,cAAc,QAAd;AACA,cAAc,WAAd;AACA,cAAc,YAAd;AACA,cAAc,eAAd;AACA,cAAc,YAAd;AACA,cAAc,YAAd;AACA,cAAc,eAAd;AACA,cAAc,QAAd;AACA,cAAc,UAAd;AACA,cAAc,aAAd;AACA,cAAc,SAAd;AACA,cAAc,WAAd;AACA,cAAc,aAAd;AACA,cAAc,mBAAd;AACA,cAAc,aAAd","sourcesContent":["export * from './styles';\nexport * from './icons';\nexport * from './types';\n\nexport * from './AuthPage';\n\nexport * from './Button';\nexport * from './Breadcrumb';\nexport * from './Chips';\nexport * from './SkipToContent';\nexport * from './Footer';\nexport * from './LoadingIndicator';\nexport * from './MiniProductCard';\nexport * from './NavItem';\nexport * from './Layouts';\nexport * from './GlobalNavigationBar';\nexport * from './Tabs';\nexport * from './Banners';\nexport * from './Toasters';\nexport * from './InputFields';\nexport * from './Dropdown';\nexport * from './Switcher';\nexport * from './LoadingPage';\nexport * from './List';\nexport * from './Modals';\nexport * from './Paginator';\nexport * from './Table';\nexport * from './Toggles';\nexport * from './HyperLink';\nexport * from './NotificationDot';\nexport * from './Accordion';\n"],"file":"index.js"}

package/dist/js/Accordion/AccordionItem.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { AccordionItemProps } from './AccordionMenu';
+interface AccordionItemPropsInner extends AccordionItemProps {
+    onSelect: (id: string) => void;
+    isActive: boolean;
+    isLast: boolean;
+}
+declare const AccordionItem: React.FunctionComponent<AccordionItemPropsInner>;
+export default AccordionItem;

package/dist/js/Accordion/AccordionItem.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = require("..");
+
+var _icons = require("../icons");
+
+var _styles = require("./styles");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var AccordionItem = function AccordionItem(props) {
+  var id = props.id,
+      onSelect = props.onSelect,
+      isActive = props.isActive,
+      title = props.title,
+      icon = props.icon,
+      disabled = props.disabled,
+      isLast = props.isLast;
+  return /*#__PURE__*/_react.default.createElement(_styles.AccordionItemContainer, {
+    id: id,
+    displaySeparator: !isActive && !isLast,
+    isDisabled: disabled !== null && disabled !== void 0 ? disabled : false
+  }, /*#__PURE__*/_react.default.createElement(_styles.ItemHeaderContainer, {
+    tabIndex: !disabled ? 0 : -1,
+    onClick: function onClick() {
+      if (!disabled) {
+        onSelect(id);
+      }
+    },
+    isDisabled: disabled !== null && disabled !== void 0 ? disabled : false
+  }, icon && /*#__PURE__*/_react.default.cloneElement(icon, {
+    size: '24px'
+  }), /*#__PURE__*/_react.default.createElement(_.ComponentM, {
+    color: disabled ? _.COLORS.neutral_300 : undefined
+  }, title), isActive ? /*#__PURE__*/_react.default.createElement(_icons.SystemIcons.ChevronUp, {
+    size: "24px"
+  }) : /*#__PURE__*/_react.default.createElement(_icons.SystemIcons.ChevronDown, {
+    size: "24px"
+  })), isActive && /*#__PURE__*/_react.default.createElement(_styles.ItemBodyContainer, null, /*#__PURE__*/_react.default.createElement(_.ComponentS, null, props.children)));
+};
+
+AccordionItem.propTypes = {
+  onSelect: _propTypes.default.func.isRequired,
+  isActive: _propTypes.default.bool.isRequired,
+  isLast: _propTypes.default.bool.isRequired
+};
+var _default = AccordionItem;
+exports.default = _default;
+//# sourceMappingURL=AccordionItem.js.map

package/dist/js/Accordion/AccordionItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Accordion/AccordionItem.tsx"],"names":["AccordionItem","props","id","onSelect","isActive","title","icon","disabled","isLast","React","cloneElement","size","COLORS","neutral_300","undefined","children"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;;;AAQA,IAAMA,aAA+D,GAAG,SAAlEA,aAAkE,CAACC,KAAD,EAAoC;AAC1G,MAAQC,EAAR,GAAkED,KAAlE,CAAQC,EAAR;AAAA,MAAYC,QAAZ,GAAkEF,KAAlE,CAAYE,QAAZ;AAAA,MAAsBC,QAAtB,GAAkEH,KAAlE,CAAsBG,QAAtB;AAAA,MAAgCC,KAAhC,GAAkEJ,KAAlE,CAAgCI,KAAhC;AAAA,MAAuCC,IAAvC,GAAkEL,KAAlE,CAAuCK,IAAvC;AAAA,MAA6CC,QAA7C,GAAkEN,KAAlE,CAA6CM,QAA7C;AAAA,MAAuDC,MAAvD,GAAkEP,KAAlE,CAAuDO,MAAvD;AACA,sBACE,6BAAC,8BAAD;AAAwB,IAAA,EAAE,EAAEN,EAA5B;AAAgC,IAAA,gBAAgB,EAAE,CAACE,QAAD,IAAa,CAACI,MAAhE;AAAwE,IAAA,UAAU,EAAED,QAAF,aAAEA,QAAF,cAAEA,QAAF,GAAc;AAAhG,kBACE,6BAAC,2BAAD;AACE,IAAA,QAAQ,EAAE,CAACA,QAAD,GAAY,CAAZ,GAAgB,CAAC,CAD7B;AAEE,IAAA,OAAO,EAAE,mBAAM;AACb,UAAI,CAACA,QAAL,EAAe;AACbJ,QAAAA,QAAQ,CAACD,EAAD,CAAR;AACD;AACF,KANH;AAOE,IAAA,UAAU,EAAEK,QAAF,aAAEA,QAAF,cAAEA,QAAF,GAAc;AAP1B,KAQGD,IAAI,iBAAIG,eAAMC,YAAN,CAAmBJ,IAAnB,EAA+C;AAAEK,IAAAA,IAAI,EAAE;AAAR,GAA/C,CARX,eASE,6BAAC,YAAD;AAAY,IAAA,KAAK,EAAEJ,QAAQ,GAAGK,SAAOC,WAAV,GAAwBC;AAAnD,KAA+DT,KAA/D,CATF,EAUGD,QAAQ,gBAAG,6BAAC,kBAAD,CAAa,SAAb;AAAuB,IAAA,IAAI,EAAC;AAA5B,IAAH,gBAA2C,6BAAC,kBAAD,CAAa,WAAb;AAAyB,IAAA,IAAI,EAAC;AAA9B,IAVtD,CADF,EAaGA,QAAQ,iBACP,6BAAC,yBAAD,qBACE,6BAAC,YAAD,QAAaH,KAAK,CAACc,QAAnB,CADF,CAdJ,CADF;AAqBD,CAvBD;;;AALEZ,EAAAA,Q;AACAC,EAAAA,Q;AACAI,EAAAA,M;;eA4BaR,a","sourcesContent":["import React from 'react';\nimport { COLORS, ComponentM, ComponentS } from '..';\nimport { SystemIcons } from '../icons';\nimport { AccordionItemProps } from './AccordionMenu';\nimport { AccordionItemContainer, HeaderIconContainer, ItemBodyContainer, ItemHeaderContainer } from './styles';\n\ninterface AccordionItemPropsInner extends AccordionItemProps {\n  onSelect: (id: string) => void;\n  isActive: boolean;\n  isLast: boolean;\n}\n\nconst AccordionItem: React.FunctionComponent<AccordionItemPropsInner> = (props: AccordionItemPropsInner) => {\n  const { id, onSelect, isActive, title, icon, disabled, isLast } = props;\n  return (\n    <AccordionItemContainer id={id} displaySeparator={!isActive && !isLast} isDisabled={disabled ?? false}>\n      <ItemHeaderContainer\n        tabIndex={!disabled ? 0 : -1}\n        onClick={() => {\n          if (!disabled) {\n            onSelect(id);\n          }\n        }}\n        isDisabled={disabled ?? false}>\n        {icon && React.cloneElement(icon as React.ReactElement, { size: '24px' })}\n        <ComponentM color={disabled ? COLORS.neutral_300 : undefined}>{title}</ComponentM>\n        {isActive ? <SystemIcons.ChevronUp size=\"24px\" /> : <SystemIcons.ChevronDown size=\"24px\" />}\n      </ItemHeaderContainer>\n      {isActive && (\n        <ItemBodyContainer>\n          <ComponentS>{props.children}</ComponentS>\n        </ItemBodyContainer>\n      )}\n    </AccordionItemContainer>\n  );\n};\n\nexport default AccordionItem;\n"],"file":"AccordionItem.js"}

package/dist/js/Accordion/AccordionMenu.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+export interface AccordionProps {
+    items: AccordionItemProps[];
+    selectedItemId?: string;
+    onSelect: (id: string) => void;
+}
+export interface AccordionItemProps {
+    id: string;
+    disabled?: boolean;
+    title: string;
+    icon?: React.ReactNode;
+    children: React.ReactNode;
+}
+declare const AccordionMenu: React.FunctionComponent<AccordionProps>;
+export default AccordionMenu;

package/dist/js/Accordion/AccordionMenu.js

@@ -0,0 +1,55 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _AccordionItem = _interopRequireDefault(require("./AccordionItem"));
+
+var _styles = require("./styles");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var AccordionMenu = function AccordionMenu(_ref) {
+  var items = _ref.items,
+      selectedItemId = _ref.selectedItemId,
+      onSelect = _ref.onSelect;
+  return /*#__PURE__*/React.createElement(_styles.AccordionMenuWrapper, null, items.map(function (item) {
+    return /*#__PURE__*/React.createElement(_AccordionItem.default, {
+      key: item.id,
+      disabled: item.disabled,
+      id: item.id,
+      title: item.title,
+      icon: item.icon,
+      isActive: item.id === selectedItemId,
+      isLast: items.indexOf(item) === items.length - 1,
+      onSelect: onSelect
+    }, item.children);
+  }));
+};
+
+AccordionMenu.propTypes = {
+  items: _propTypes.default.arrayOf(_propTypes.default.shape({
+    id: _propTypes.default.string.isRequired,
+    disabled: _propTypes.default.bool,
+    title: _propTypes.default.string.isRequired,
+    icon: _propTypes.default.node,
+    children: _propTypes.default.node.isRequired
+  })).isRequired,
+  selectedItemId: _propTypes.default.string,
+  onSelect: _propTypes.default.func.isRequired
+};
+var _default = AccordionMenu;
+exports.default = _default;
+//# sourceMappingURL=AccordionMenu.js.map

package/dist/js/Accordion/AccordionMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Accordion/AccordionMenu.tsx"],"names":["AccordionMenu","items","selectedItemId","onSelect","map","item","id","disabled","title","icon","indexOf","length","children"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;AAgBA,IAAMA,aAAsD,GAAG,SAAzDA,aAAyD,OAAyD;AAAA,MAAtDC,KAAsD,QAAtDA,KAAsD;AAAA,MAA/CC,cAA+C,QAA/CA,cAA+C;AAAA,MAA/BC,QAA+B,QAA/BA,QAA+B;AACtH,sBACE,oBAAC,4BAAD,QACGF,KAAK,CAACG,GAAN,CAAU,UAACC,IAAD;AAAA,wBACT,oBAAC,sBAAD;AACE,MAAA,GAAG,EAAEA,IAAI,CAACC,EADZ;AAEE,MAAA,QAAQ,EAAED,IAAI,CAACE,QAFjB;AAGE,MAAA,EAAE,EAAEF,IAAI,CAACC,EAHX;AAIE,MAAA,KAAK,EAAED,IAAI,CAACG,KAJd;AAKE,MAAA,IAAI,EAAEH,IAAI,CAACI,IALb;AAME,MAAA,QAAQ,EAAEJ,IAAI,CAACC,EAAL,KAAYJ,cANxB;AAOE,MAAA,MAAM,EAAED,KAAK,CAACS,OAAN,CAAcL,IAAd,MAAwBJ,KAAK,CAACU,MAAN,GAAe,CAPjD;AAQE,MAAA,QAAQ,EAAER;AARZ,OASGE,IAAI,CAACO,QATR,CADS;AAAA,GAAV,CADH,CADF;AAiBD,CAlBD;;;AAbEX,EAAAA,K;AAMAK,IAAAA,E;AACAC,IAAAA,Q;AACAC,IAAAA,K;AACAC,IAAAA,I;AACAG,IAAAA,Q;;AATAV,EAAAA,c;AACAC,EAAAA,Q;;eA+BaH,a","sourcesContent":["import * as React from 'react';\nimport AccordionItem from './AccordionItem';\nimport { AccordionMenuWrapper } from './styles';\n\nexport interface AccordionProps {\n  items: AccordionItemProps[];\n  selectedItemId?: string;\n  onSelect: (id: string) => void;\n}\n\nexport interface AccordionItemProps {\n  id: string;\n  disabled?: boolean;\n  title: string;\n  icon?: React.ReactNode;\n  children: React.ReactNode;\n}\n\nconst AccordionMenu: React.FunctionComponent<AccordionProps> = ({ items, selectedItemId, onSelect }: AccordionProps) => {\n  return (\n    <AccordionMenuWrapper>\n      {items.map((item) => (\n        <AccordionItem\n          key={item.id}\n          disabled={item.disabled}\n          id={item.id}\n          title={item.title}\n          icon={item.icon}\n          isActive={item.id === selectedItemId}\n          isLast={items.indexOf(item) === items.length - 1}\n          onSelect={onSelect}>\n          {item.children}\n        </AccordionItem>\n      ))}\n    </AccordionMenuWrapper>\n  );\n};\n\nexport default AccordionMenu;\n"],"file":"AccordionMenu.js"}

package/dist/js/Accordion/__tests__/AccordionMenu.test.js

@@ -0,0 +1,101 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+require("jest-styled-components");
+
+var _styles = require("../../styles");
+
+var _AccordionMenu = _interopRequireDefault(require("../AccordionMenu"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+var accordionItems = [{
+  id: 'test1_id',
+  title: 'Item label with text 1',
+  children: /*#__PURE__*/_react.default.createElement("div", null, "content test1")
+}, {
+  id: 'test2_id',
+  title: 'Item label with text 2',
+  children: /*#__PURE__*/_react.default.createElement("div", null, "content test2")
+}];
+describe('<AccordionMenu />', function () {
+  it('Check correct text placed on labels', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+    var _render, queryByText;
+
+    return regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _render = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_AccordionMenu.default, {
+              items: accordionItems,
+              onSelect: function onSelect() {}
+            })), queryByText = _render.queryByText;
+            expect(queryByText('Item label with text 1')).toBeDefined();
+            expect(queryByText('Item label with text 2')).toBeDefined();
+            expect(queryByText('content test1')).toBeNull();
+
+          case 4:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  it('Check item label element color and label', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+    var _render2, container, headerItem;
+
+    return regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            _render2 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_AccordionMenu.default, {
+              items: accordionItems,
+              onSelect: function onSelect() {}
+            })), container = _render2.container;
+            headerItem = container.querySelector('#test2_id');
+            expect(headerItem).toBeDefined();
+            expect(headerItem === null || headerItem === void 0 ? void 0 : headerItem.children[0]).toHaveStyleRule('background', _styles.COLORS.neutral_20);
+            expect(headerItem === null || headerItem === void 0 ? void 0 : headerItem.textContent).toContain('Item label with text 2');
+
+          case 5:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
+  it('Check expanded item text', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
+    var _headerItem$children$;
+
+    var _render3, container, headerItem;
+
+    return regeneratorRuntime.wrap(function _callee3$(_context3) {
+      while (1) {
+        switch (_context3.prev = _context3.next) {
+          case 0:
+            _render3 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_AccordionMenu.default, {
+              items: accordionItems,
+              onSelect: function onSelect() {},
+              selectedItemId: 'test1_id'
+            })), container = _render3.container;
+            headerItem = container.querySelector('#test1_id'); //check item expanded
+
+            expect(headerItem === null || headerItem === void 0 ? void 0 : headerItem.children[1]).toBeDefined();
+            expect(headerItem === null || headerItem === void 0 ? void 0 : (_headerItem$children$ = headerItem.children[1]) === null || _headerItem$children$ === void 0 ? void 0 : _headerItem$children$.textContent).toContain('content test1');
+
+          case 4:
+          case "end":
+            return _context3.stop();
+        }
+      }
+    }, _callee3);
+  })));
+});
+//# sourceMappingURL=AccordionMenu.test.js.map

package/dist/js/Accordion/__tests__/AccordionMenu.test.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/Accordion/__tests__/AccordionMenu.test.tsx"],"names":["accordionItems","id","title","children","describe","it","queryByText","expect","toBeDefined","toBeNull","container","headerItem","querySelector","toHaveStyleRule","COLORS","neutral_20","textContent","toContain"],"mappings":";;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AAEA,IAAMA,cAAc,GAAG,CACrB;AACEC,EAAAA,EAAE,EAAE,UADN;AAEEC,EAAAA,KAAK,EAAE,wBAFT;AAGEC,EAAAA,QAAQ,eAAE;AAHZ,CADqB,EAMrB;AACEF,EAAAA,EAAE,EAAE,UADN;AAEEC,EAAAA,KAAK,EAAE,wBAFT;AAGEC,EAAAA,QAAQ,eAAE;AAHZ,CANqB,CAAvB;AAaAC,QAAQ,CAAC,mBAAD,EAAsB,YAAM;AAClCC,EAAAA,EAAE,CAAC,qCAAD,uEAAwC;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA,sBAChB,kCAAO,6BAAC,sBAAD;AAAe,cAAA,KAAK,EAAEL,cAAtB;AAAsC,cAAA,QAAQ,EAAE,oBAAM,CAAE;AAAxD,cAAP,CADgB,EAChCM,WADgC,WAChCA,WADgC;AAExCC,YAAAA,MAAM,CAACD,WAAW,CAAC,wBAAD,CAAZ,CAAN,CAA8CE,WAA9C;AACAD,YAAAA,MAAM,CAACD,WAAW,CAAC,wBAAD,CAAZ,CAAN,CAA8CE,WAA9C;AACAD,YAAAA,MAAM,CAACD,WAAW,CAAC,eAAD,CAAZ,CAAN,CAAqCG,QAArC;;AAJwC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAAxC,GAAF;AAOAJ,EAAAA,EAAE,CAAC,0CAAD,uEAA6C;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA,uBACvB,kCAAO,6BAAC,sBAAD;AAAe,cAAA,KAAK,EAAEL,cAAtB;AAAsC,cAAA,QAAQ,EAAE,oBAAM,CAAE;AAAxD,cAAP,CADuB,EACrCU,SADqC,YACrCA,SADqC;AAEvCC,YAAAA,UAFuC,GAE1BD,SAAS,CAACE,aAAV,CAAwB,WAAxB,CAF0B;AAG7CL,YAAAA,MAAM,CAACI,UAAD,CAAN,CAAmBH,WAAnB;AACAD,YAAAA,MAAM,CAACI,UAAD,aAACA,UAAD,uBAACA,UAAU,CAAER,QAAZ,CAAqB,CAArB,CAAD,CAAN,CAAgCU,eAAhC,CAAgD,YAAhD,EAA8DC,eAAOC,UAArE;AACAR,YAAAA,MAAM,CAACI,UAAD,aAACA,UAAD,uBAACA,UAAU,CAAEK,WAAb,CAAN,CAAgCC,SAAhC,CAA0C,wBAA1C;;AAL6C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAA7C,GAAF;AAQAZ,EAAAA,EAAE,CAAC,0BAAD,uEAA6B;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA,uBACP,kCAAO,6BAAC,sBAAD;AAAe,cAAA,KAAK,EAAEL,cAAtB;AAAsC,cAAA,QAAQ,EAAE,oBAAM,CAAE,CAAxD;AAA0D,cAAA,cAAc,EAAE;AAA1E,cAAP,CADO,EACrBU,SADqB,YACrBA,SADqB;AAEvBC,YAAAA,UAFuB,GAEVD,SAAS,CAACE,aAAV,CAAwB,WAAxB,CAFU,EAG7B;;AACAL,YAAAA,MAAM,CAACI,UAAD,aAACA,UAAD,uBAACA,UAAU,CAAER,QAAZ,CAAqB,CAArB,CAAD,CAAN,CAAgCK,WAAhC;AACAD,YAAAA,MAAM,CAACI,UAAD,aAACA,UAAD,gDAACA,UAAU,CAAER,QAAZ,CAAqB,CAArB,CAAD,0DAAC,sBAAyBa,WAA1B,CAAN,CAA6CC,SAA7C,CAAuD,eAAvD;;AAL6B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAA7B,GAAF;AAOD,CAvBO,CAAR","sourcesContent":["import React from 'react';\nimport { render } from '@testing-library/react';\nimport 'jest-styled-components';\nimport { COLORS } from '../../styles';\nimport AccordionMenu from '../AccordionMenu';\n\nconst accordionItems = [\n  {\n    id: 'test1_id',\n    title: 'Item label with text 1',\n    children: <div>content test1</div>,\n  },\n  {\n    id: 'test2_id',\n    title: 'Item label with text 2',\n    children: <div>content test2</div>,\n  },\n];\n\ndescribe('<AccordionMenu />', () => {\n  it('Check correct text placed on labels', async () => {\n    const { queryByText } = render(<AccordionMenu items={accordionItems} onSelect={() => {}}></AccordionMenu>);\n    expect(queryByText('Item label with text 1')).toBeDefined();\n    expect(queryByText('Item label with text 2')).toBeDefined();\n    expect(queryByText('content test1')).toBeNull();\n  });\n\n  it('Check item label element color and label', async () => {\n    const { container } = render(<AccordionMenu items={accordionItems} onSelect={() => {}}></AccordionMenu>);\n    const headerItem = container.querySelector('#test2_id');\n    expect(headerItem).toBeDefined();\n    expect(headerItem?.children[0]).toHaveStyleRule('background', COLORS.neutral_20);\n    expect(headerItem?.textContent).toContain('Item label with text 2');\n  });\n\n  it('Check expanded item text', async () => {\n    const { container } = render(<AccordionMenu items={accordionItems} onSelect={() => {}} selectedItemId={'test1_id'}></AccordionMenu>);\n    const headerItem = container.querySelector('#test1_id');\n    //check item expanded\n    expect(headerItem?.children[1]).toBeDefined();\n    expect(headerItem?.children[1]?.textContent).toContain('content test1');\n  });\n});\n"],"file":"AccordionMenu.test.js"}

package/dist/js/Accordion/index.d.ts

@@ -0,0 +1,3 @@
+export { default as AccordionMenu } from './AccordionMenu';
+export { default as AccordionMenuItem } from './AccordionMenu';
+export { AccordionMenuWrapper } from './styles';

package/dist/js/Accordion/index.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "AccordionMenu", {
+  enumerable: true,
+  get: function get() {
+    return _AccordionMenu.default;
+  }
+});
+Object.defineProperty(exports, "AccordionMenuItem", {
+  enumerable: true,
+  get: function get() {
+    return _AccordionMenu.default;
+  }
+});
+Object.defineProperty(exports, "AccordionMenuWrapper", {
+  enumerable: true,
+  get: function get() {
+    return _styles.AccordionMenuWrapper;
+  }
+});
+
+var _AccordionMenu = _interopRequireDefault(require("./AccordionMenu"));
+
+var _styles = require("./styles");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+//# sourceMappingURL=index.js.map