@laerdal/life-react-components 1.3.2-dev.9 → 1.4.0

package/dist/esm/Accordion/ContentAccordion.js

@@ -6,79 +6,86 @@ import { SystemIcons } from '../icons';
 import { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';
 import { COLORS } from '../styles';
 import { Z_INDEXES } from '../styles/z-indexes';
-export const ContentAccordionItemHeader = styled.div`
-  display: flex;
-  align-items: center;
-  box-sizing: border-box;
-  min-height: 48px;
-  color: ${COLORS.neutral_600};
-  cursor: pointer;
-
-  &:hover {
-    color: ${COLORS.primary_700};
-    background-color: ${COLORS.primary_20};
-    z-index: ${Z_INDEXES.hover};
-  }
+const ContentAccordionWrapper = styled.div`
+  width: 100%;
+  position: relative;
 
-  &:focus {
-    box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;
-    background-color: ${COLORS.white};
-    z-index: ${Z_INDEXES.focus};
-    outline: none;
-  }
 
-  &:active {
-    color: ${COLORS.primary_800};
-    background-color: ${COLORS.primary_100};
-    box-shadow: none;
-    z-index: ${Z_INDEXES.active};
-  }
-`;
-export const ContentAccordionItemHeaderIcon = styled.div`
-  width: 24px;
-  height: 24px;
+  .content-accordion-item {
+    display: flex;
+    flex-direction: column;
+    border-top: 1px solid ${COLORS.neutral_100};
 
-  svg {
-    width: 24px;
-    height: 24px;
-  }
-`;
-export const ContentAccordionItemHeaderText = styled.div`
-`;
-export const ContentAccordionItemContent = styled.div`
-  display: none;
-  flex-direction: column;
-`;
-export const ContentAccordionItemContentHeader = styled.div`
-`;
-export const ContentAccordionItemContentBody = styled.div`
-`;
-export const ContentAccordionItemContentFooter = styled.div`
-`;
-export const ContentAccordionItem = styled.div`
-  display: flex;
-  flex-direction: column;
-  border-top: 1px solid ${COLORS.neutral_100};
-
-  &.active {
-    ${ContentAccordionItemContent} {
+    .item-header {
       display: flex;
+      align-items: center;
+      box-sizing: border-box;
+      min-height: 48px;
+      color: ${COLORS.neutral_600};
+      cursor: pointer;
+
+      &:hover {
+        color: ${COLORS.primary_700};
+        background-color: ${COLORS.primary_20};
+        z-index: ${Z_INDEXES.hover};
+      }
+
+      &:focus {
+        box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;
+        background-color: ${COLORS.white};
+        z-index: ${Z_INDEXES.focus};
+        outline: none;
+      }
+
+      &:active {
+        color: ${COLORS.primary_800};
+        background-color: ${COLORS.primary_100};
+        box-shadow: none;
+        z-index: ${Z_INDEXES.active};
+      }
+
+      .item-header-icon,
+      .item-header-icon svg {
+        width: 24px;
+        height: 24px;
+      }
+
+      .item-header-text {
+      }
     }
-  }
 
-  &.disabled {
-    ${ContentAccordionItemHeader} {
-      color: ${COLORS.neutral_300};
-      cursor: not-allowed;
-      pointer-events: none;
+    .item-content {
+      display: none;
+      flex-direction: column;
+
+      .item-content-header {
+
+      }
+
+      .item-content-body {
+
+      }
+
+      .item-content-footer {
+      }
+    }
+
+    &.active {
+      .item-content {
+        display: flex;
+      }
+    }
+
+    &.disabled {
+      .item-header {
+        color: ${COLORS.neutral_300};
+        cursor: not-allowed;
+        pointer-events: none;
+      }
     }
   }
-`;
-export const ContentAccordionWrapper = styled.div`
-  width: 100%;
-  position: relative;
 
-  ${ContentAccordionItem}:last-child {
+  .content-accordion-item:last-child {
     border-bottom: 1px solid ${COLORS.neutral_100};
   }
 
@@ -86,45 +93,46 @@ export const ContentAccordionWrapper = styled.div`
     min-width: 320px;
     max-width: 528px;
 
-    ${ContentAccordionItemHeader} {
+    .item-header {
       gap: 8px;
       padding: 0 8px;
       ${ComponentSStyling(ComponentTextStyle.Regular, null)}
     }
 
-    ${ContentAccordionItemContent} {
+    .item-content {
       padding: 0 8px 16px 40px;
       gap: 8px;
 
-      ${ContentAccordionItemContentHeader} {
+      .item-content-header {
         ${ComponentSStyling(ComponentTextStyle.Bold, null)}
       }
 
-      ${ContentAccordionItemContentBody} {
+      .item-content-body {
         ${ComponentSStyling(ComponentTextStyle.Regular, null)}
       }
     }
   }
 
+
   &.medium {
     min-width: 344px;
     max-width: 584px;
 
-    ${ContentAccordionItemHeader} {
+    .item-header {
       gap: 12px;
       padding: 0 12px;
       ${ComponentMStyling(ComponentTextStyle.Regular, null)}
     }
 
-    ${ContentAccordionItemContent} {
+    .item-content {
       padding: 8px 12px 24px 48px;
       gap: 12px;
 
-      ${ContentAccordionItemContentHeader} {
+      .item-content-header {
         ${ComponentMStyling(ComponentTextStyle.Bold, null)}
       }
 
-      ${ContentAccordionItemContentBody} {
+      .item-content-body {
         ${ComponentMStyling(ComponentTextStyle.Regular, null)}
       }
 
@@ -135,21 +143,21 @@ export const ContentAccordionWrapper = styled.div`
     min-width: 384px;
     max-width: 656px;
 
-    ${ContentAccordionItemHeader} {
+    .item-header {
       gap: 16px;
       padding: 0 16px;
       ${ComponentLStyling(ComponentTextStyle.Regular, null)}
     }
 
-    ${ContentAccordionItemContent} {
+    .item-content {
       padding: 16px 16px 32px 56px;
       gap: 16px;
 
-      ${ContentAccordionItemContentHeader} {
+      .item-content-header {
         ${ComponentLStyling(ComponentTextStyle.Bold, null)}
       }
 
-      ${ContentAccordionItemContentBody} {
+      .item-content-body {
         ${ComponentLStyling(ComponentTextStyle.Regular, null)}
       }
     }
@@ -185,20 +193,33 @@ export const ContentAccordion = props => {
 
   const renderItem = item => {
     const isActive = opened.includes(item.key);
-    return /*#__PURE__*/React.createElement(ContentAccordionItem, {
+    return /*#__PURE__*/React.createElement("div", {
       key: item.key,
       id: `item_${item.key}`,
-      className: ''.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : '')
-    }, /*#__PURE__*/React.createElement(ContentAccordionItemHeader, {
+      className: 'content-accordion-item'.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : '')
+    }, /*#__PURE__*/React.createElement("div", {
+      className: 'item-header',
       tabIndex: !item.disabled ? 0 : undefined,
       onMouseDown: e => e.preventDefault(),
       onClick: () => !item.disabled && onItemClick(item),
       onKeyPress: event => event.key === 'Enter' && onItemClick(item)
-    }, /*#__PURE__*/React.createElement(ContentAccordionItemHeaderIcon, null, props.multi ? isActive ? /*#__PURE__*/React.createElement(SystemIcons.Minus, null) : /*#__PURE__*/React.createElement(SystemIcons.Plus, null) : isActive ? /*#__PURE__*/React.createElement(SystemIcons.ChevronDown, null) : /*#__PURE__*/React.createElement(SystemIcons.ChevronRight, null)), /*#__PURE__*/React.createElement(ContentAccordionItemHeaderText, null, item.title)), /*#__PURE__*/React.createElement(ContentAccordionItemContent, null, item.header && /*#__PURE__*/React.createElement(ContentAccordionItemContentHeader, null, item.header), /*#__PURE__*/React.createElement(ContentAccordionItemContentBody, null, item.body), item.footer && /*#__PURE__*/React.createElement(ContentAccordionItemContentFooter, null, item.footer)));
+    }, /*#__PURE__*/React.createElement("div", {
+      className: 'item-header-icon'
+    }, props.multi ? isActive ? /*#__PURE__*/React.createElement(SystemIcons.Minus, null) : /*#__PURE__*/React.createElement(SystemIcons.Plus, null) : isActive ? /*#__PURE__*/React.createElement(SystemIcons.ChevronDown, null) : /*#__PURE__*/React.createElement(SystemIcons.ChevronRight, null)), /*#__PURE__*/React.createElement("div", {
+      className: 'item-header-text'
+    }, item.title)), /*#__PURE__*/React.createElement("div", {
+      className: 'item-content'
+    }, item.header && /*#__PURE__*/React.createElement("div", {
+      className: 'item-content-header'
+    }, item.header), /*#__PURE__*/React.createElement("div", {
+      className: 'item-content-body'
+    }, item.body), item.footer && /*#__PURE__*/React.createElement("div", {
+      className: 'item-content-footer'
+    }, item.footer)));
   };
 
   return /*#__PURE__*/React.createElement(ContentAccordionWrapper, {
-    className: ''.concat(` ${props.size ?? Size.Medium}`)
+    className: 'content-accordion'.concat(` ${props.size ?? Size.Medium}`)
   }, props.items.map(item => renderItem(item)));
 };
 ContentAccordion.propTypes = {

package/dist/esm/Accordion/ContentAccordion.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Accordion/ContentAccordion.tsx"],"names":["React","styled","Size","SystemIcons","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","COLORS","Z_INDEXES","ContentAccordionItemHeader","div","neutral_600","primary_700","primary_20","hover","white","focus","primary_800","primary_100","active","ContentAccordionItemHeaderIcon","ContentAccordionItemHeaderText","ContentAccordionItemContent","ContentAccordionItemContentHeader","ContentAccordionItemContentBody","ContentAccordionItemContentFooter","ContentAccordionItem","neutral_100","neutral_300","ContentAccordionWrapper","Regular","Bold","ContentAccordion","props","opened","setOpened","useState","useEffect","multi","items","filter","item","map","key","find","onItemClick","disabled","includes","renderItem","isActive","concat","undefined","e","preventDefault","event","title","header","body","footer","size","Medium"],"mappings":"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","sourcesContent":["import React from 'react'\nimport styled from 'styled-components';\nimport {Size} from '../types';\nimport {SystemIcons} from '../icons';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle} from '../styles/typography';\nimport {COLORS} from '../styles';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\n\nexport const ContentAccordionItemHeader = styled.div`\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  min-height: 48px;\n  color: ${COLORS.neutral_600};\n  cursor: pointer;\n\n  &:hover {\n    color: ${COLORS.primary_700};\n    background-color: ${COLORS.primary_20};\n    z-index: ${Z_INDEXES.hover};\n  }\n\n  &:focus {\n    box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;\n    background-color: ${COLORS.white};\n    z-index: ${Z_INDEXES.focus};\n    outline: none;\n  }\n\n  &:active {\n    color: ${COLORS.primary_800};\n    background-color: ${COLORS.primary_100};\n    box-shadow: none;\n    z-index: ${Z_INDEXES.active};\n  }\n`;\n\nexport const ContentAccordionItemHeaderIcon = styled.div`\n  width: 24px;\n  height: 24px;\n\n  svg {\n    width: 24px;\n    height: 24px;\n  }\n`;\n\nexport const ContentAccordionItemHeaderText = styled.div`\n`;\n\nexport const ContentAccordionItemContent = styled.div`\n  display: none;\n  flex-direction: column;\n`;\n\nexport const ContentAccordionItemContentHeader = styled.div`\n`;\n\nexport const ContentAccordionItemContentBody = styled.div`\n`;\n\nexport const ContentAccordionItemContentFooter = styled.div`\n`;\n\nexport const ContentAccordionItem = styled.div`\n  display: flex;\n  flex-direction: column;\n  border-top: 1px solid ${COLORS.neutral_100};\n\n  &.active {\n    ${ContentAccordionItemContent} {\n      display: flex;\n    }\n  }\n\n  &.disabled {\n    ${ContentAccordionItemHeader} {\n      color: ${COLORS.neutral_300};\n      cursor: not-allowed;\n      pointer-events: none;\n    }\n  }\n`;\n\nexport const ContentAccordionWrapper = styled.div`\n  width: 100%;\n  position: relative;\n\n  ${ContentAccordionItem}:last-child {\n    border-bottom: 1px solid ${COLORS.neutral_100};\n  }\n\n  &.small {\n    min-width: 320px;\n    max-width: 528px;\n\n    ${ContentAccordionItemHeader} {\n      gap: 8px;\n      padding: 0 8px;\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${ContentAccordionItemContent} {\n      padding: 0 8px 16px 40px;\n      gap: 8px;\n\n      ${ContentAccordionItemContentHeader} {\n        ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n      }\n\n      ${ContentAccordionItemContentBody} {\n        ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n      }\n    }\n  }\n\n  &.medium {\n    min-width: 344px;\n    max-width: 584px;\n\n    ${ContentAccordionItemHeader} {\n      gap: 12px;\n      padding: 0 12px;\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${ContentAccordionItemContent} {\n      padding: 8px 12px 24px 48px;\n      gap: 12px;\n\n      ${ContentAccordionItemContentHeader} {\n        ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n      }\n\n      ${ContentAccordionItemContentBody} {\n        ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n      }\n\n    }\n  }\n\n  &.large {\n    min-width: 384px;\n    max-width: 656px;\n\n    ${ContentAccordionItemHeader} {\n      gap: 16px;\n      padding: 0 16px;\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${ContentAccordionItemContent} {\n      padding: 16px 16px 32px 56px;\n      gap: 16px;\n\n      ${ContentAccordionItemContentHeader} {\n        ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n      }\n\n      ${ContentAccordionItemContentBody} {\n        ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n      }\n    }\n  }\n`;\n\nexport interface ContentAccordionItem {\n  key: string;\n  title: string;\n  header?: string;\n  body: any;\n  footer?: any;\n  disabled?: boolean;\n  active?: boolean;\n}\n\nexport interface ContentAccordionProps {\n  items: ContentAccordionItem[];\n  multi?: boolean;\n  size?: Size;\n}\n\nexport const ContentAccordion: React.FunctionComponent<ContentAccordionProps> = (props) => {\n\n  const [opened, setOpened] = React.useState<string[]>([]);\n\n  React.useEffect(() => {\n    if (props.multi) {\n      setOpened(props.items.filter(item => item.active).map(item => item.key));\n    } else {\n      let active = props.items.find(item => !!item.active)?.key;\n      if (active) {\n        setOpened([active]);\n      }\n    }\n  }, [props.items, props.multi]);\n\n  const onItemClick = (item: ContentAccordionItem) => {\n    if (item.disabled) return;\n    if (opened.includes(item.key)) {\n      setOpened(opened.filter(key => key !== item.key));\n    } else {\n      if (props.multi) {\n        setOpened([...opened, item.key]);\n      } else {\n        setOpened([item.key]);\n      }\n    }\n  }\n\n  const renderItem = (item: ContentAccordionItem) => {\n    const isActive = opened.includes(item.key);\n\n    return (\n      <ContentAccordionItem key={item.key}\n                            id={`item_${item.key}`}\n                            className={''.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : '')}>\n        <ContentAccordionItemHeader tabIndex={!item.disabled ? 0 : undefined}\n                                    onMouseDown={e => e.preventDefault()}\n                                    onClick={() => !item.disabled && onItemClick(item)}\n                                    onKeyPress={event => event.key === 'Enter' && onItemClick(item)}>\n          <ContentAccordionItemHeaderIcon>\n            {\n              props.multi\n                ? isActive\n                  ? <SystemIcons.Minus/>\n                  : <SystemIcons.Plus/>\n                : isActive\n                  ? <SystemIcons.ChevronDown/>\n                  : <SystemIcons.ChevronRight/>\n            }\n          </ContentAccordionItemHeaderIcon>\n          <ContentAccordionItemHeaderText>\n            {item.title}\n          </ContentAccordionItemHeaderText>\n        </ContentAccordionItemHeader>\n        <ContentAccordionItemContent>\n          {\n            item.header &&\n            <ContentAccordionItemContentHeader>\n              {item.header}\n            </ContentAccordionItemContentHeader>\n          }\n          <ContentAccordionItemContentBody>\n            {item.body}\n          </ContentAccordionItemContentBody>\n          {\n            item.footer &&\n            <ContentAccordionItemContentFooter>\n              {item.footer}\n            </ContentAccordionItemContentFooter>\n          }\n        </ContentAccordionItemContent>\n      </ContentAccordionItem>\n    );\n  }\n\n  return (\n    <ContentAccordionWrapper className={''.concat(` ${props.size ?? Size.Medium}`)}>\n      {props.items.map(item => renderItem(item))}\n    </ContentAccordionWrapper>\n  );\n};\n\nexport default ContentAccordion;\n"],"file":"ContentAccordion.js"}
+{"version":3,"sources":["../../../src/Accordion/ContentAccordion.tsx"],"names":["React","styled","Size","SystemIcons","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","COLORS","Z_INDEXES","ContentAccordionWrapper","div","neutral_100","neutral_600","primary_700","primary_20","hover","white","focus","primary_800","primary_100","active","neutral_300","Regular","Bold","ContentAccordion","props","opened","setOpened","useState","useEffect","multi","items","filter","item","map","key","find","onItemClick","disabled","includes","renderItem","isActive","concat","undefined","e","preventDefault","event","title","header","body","footer","size","Medium"],"mappings":";AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,IAAR,QAAmB,UAAnB;AACA,SAAQC,WAAR,QAA0B,UAA1B;AACA,SAAQC,iBAAR,EAA2BC,iBAA3B,EAA8CC,iBAA9C,EAAiEC,kBAAjE,QAA0F,sBAA1F;AACA,SAAQC,MAAR,QAAqB,WAArB;AACA,SAAQC,SAAR,QAAwB,qBAAxB;AAGA,MAAMC,uBAAuB,GAAGT,MAAM,CAACU,GAAI;AAC3C;AACA;AACA;AACA;AACA;AACA;AACA;AACA,4BAA4BH,MAAM,CAACI,WAAY;AAC/C;AACA;AACA;AACA;AACA;AACA;AACA,eAAeJ,MAAM,CAACK,WAAY;AAClC;AACA;AACA;AACA,iBAAiBL,MAAM,CAACM,WAAY;AACpC,4BAA4BN,MAAM,CAACO,UAAW;AAC9C,mBAAmBN,SAAS,CAACO,KAAM;AACnC;AACA;AACA;AACA;AACA,4BAA4BR,MAAM,CAACS,KAAM;AACzC,mBAAmBR,SAAS,CAACS,KAAM;AACnC;AACA;AACA;AACA;AACA,iBAAiBV,MAAM,CAACW,WAAY;AACpC,4BAA4BX,MAAM,CAACY,WAAY;AAC/C;AACA,mBAAmBX,SAAS,CAACY,MAAO;AACpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiBb,MAAM,CAACc,WAAY;AACpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+BAA+Bd,MAAM,CAACI,WAAY;AAClD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQN,iBAAiB,CAACC,kBAAkB,CAACgB,OAApB,EAA6B,IAA7B,CAAmC;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAUjB,iBAAiB,CAACC,kBAAkB,CAACiB,IAApB,EAA0B,IAA1B,CAAgC;AAC3D;AACA;A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","sourcesContent":["import React from 'react'\nimport styled from 'styled-components';\nimport {Size} from '../types';\nimport {SystemIcons} from '../icons';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle} from '../styles/typography';\nimport {COLORS} from '../styles';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\n\nconst ContentAccordionWrapper = styled.div`\n  width: 100%;\n  position: relative;\n\n\n  .content-accordion-item {\n    display: flex;\n    flex-direction: column;\n    border-top: 1px solid ${COLORS.neutral_100};\n\n    .item-header {\n      display: flex;\n      align-items: center;\n      box-sizing: border-box;\n      min-height: 48px;\n      color: ${COLORS.neutral_600};\n      cursor: pointer;\n\n      &:hover {\n        color: ${COLORS.primary_700};\n        background-color: ${COLORS.primary_20};\n        z-index: ${Z_INDEXES.hover};\n      }\n\n      &:focus {\n        box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;\n        background-color: ${COLORS.white};\n        z-index: ${Z_INDEXES.focus};\n        outline: none;\n      }\n\n      &:active {\n        color: ${COLORS.primary_800};\n        background-color: ${COLORS.primary_100};\n        box-shadow: none;\n        z-index: ${Z_INDEXES.active};\n      }\n\n      .item-header-icon,\n      .item-header-icon svg {\n        width: 24px;\n        height: 24px;\n      }\n\n      .item-header-text {\n      }\n    }\n\n    .item-content {\n      display: none;\n      flex-direction: column;\n\n      .item-content-header {\n\n      }\n\n      .item-content-body {\n\n      }\n\n      .item-content-footer {\n      }\n    }\n\n    &.active {\n      .item-content {\n        display: flex;\n      }\n    }\n\n    &.disabled {\n      .item-header {\n        color: ${COLORS.neutral_300};\n        cursor: not-allowed;\n        pointer-events: none;\n      }\n    }\n  }\n\n  .content-accordion-item:last-child {\n    border-bottom: 1px solid ${COLORS.neutral_100};\n  }\n\n  &.small {\n    min-width: 320px;\n    max-width: 528px;\n\n    .item-header {\n      gap: 8px;\n      padding: 0 8px;\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .item-content {\n      padding: 0 8px 16px 40px;\n      gap: 8px;\n\n      .item-content-header {\n        ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n      }\n\n      .item-content-body {\n        ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n      }\n    }\n  }\n\n\n  &.medium {\n    min-width: 344px;\n    max-width: 584px;\n\n    .item-header {\n      gap: 12px;\n      padding: 0 12px;\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .item-content {\n      padding: 8px 12px 24px 48px;\n      gap: 12px;\n\n      .item-content-header {\n        ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n      }\n\n      .item-content-body {\n        ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n      }\n\n    }\n  }\n\n  &.large {\n    min-width: 384px;\n    max-width: 656px;\n\n    .item-header {\n      gap: 16px;\n      padding: 0 16px;\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .item-content {\n      padding: 16px 16px 32px 56px;\n      gap: 16px;\n\n      .item-content-header {\n        ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n      }\n\n      .item-content-body {\n        ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n      }\n    }\n  }\n`;\n\nexport interface ContentAccordionItem {\n  key: string;\n  title: string;\n  header?: string;\n  body: any;\n  footer?: any;\n  disabled?: boolean;\n  active?: boolean;\n}\n\nexport interface ContentAccordionProps {\n  items: ContentAccordionItem[];\n  multi?: boolean;\n  size?: Size;\n}\n\nexport const ContentAccordion: React.FunctionComponent<ContentAccordionProps> = (props) => {\n\n  const [opened, setOpened] = React.useState<string[]>([]);\n\n  React.useEffect(() => {\n    if (props.multi) {\n      setOpened(props.items.filter(item => item.active).map(item => item.key));\n    } else {\n      let active = props.items.find(item => !!item.active)?.key;\n      if (active) {\n        setOpened([active]);\n      }\n    }\n  }, [props.items, props.multi]);\n\n  const onItemClick = (item: ContentAccordionItem) => {\n    if (item.disabled) return;\n    if (opened.includes(item.key)) {\n      setOpened(opened.filter(key => key !== item.key));\n    } else {\n      if (props.multi) {\n        setOpened([...opened, item.key]);\n      } else {\n        setOpened([item.key]);\n      }\n    }\n  }\n\n  const renderItem = (item: ContentAccordionItem) => {\n    const isActive = opened.includes(item.key);\n\n    return (\n      <div key={item.key}\n           id={`item_${item.key}`}\n           className={'content-accordion-item'.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : '')}>\n        <div className={'item-header'}\n             tabIndex={!item.disabled ? 0 : undefined}\n             onMouseDown={e => e.preventDefault()}\n             onClick={() => !item.disabled && onItemClick(item)}\n             onKeyPress={event => event.key === 'Enter' && onItemClick(item)}>\n          <div className={'item-header-icon'}>\n            {\n              props.multi\n                ? isActive\n                  ? <SystemIcons.Minus/>\n                  : <SystemIcons.Plus/>\n                : isActive\n                  ? <SystemIcons.ChevronDown/>\n                  : <SystemIcons.ChevronRight/>\n            }\n          </div>\n          <div className={'item-header-text'}>\n            {item.title}\n          </div>\n        </div>\n        <div className={'item-content'}>\n          {\n            item.header &&\n            <div className={'item-content-header'}>\n              {item.header}\n            </div>\n          }\n          <div className={'item-content-body'}>\n            {item.body}\n          </div>\n          {\n            item.footer &&\n            <div className={'item-content-footer'}>\n              {item.footer}\n            </div>\n          }\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <ContentAccordionWrapper className={'content-accordion'.concat(` ${props.size ?? Size.Medium}`)}>\n      {props.items.map(item => renderItem(item))}\n    </ContentAccordionWrapper>\n  );\n};\n\nexport default ContentAccordion;\n"],"file":"ContentAccordion.js"}

package/dist/esm/Accordion/__tests__/ContetnAccordion.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ContentAccordion, { ContentAccordionItem, ContentAccordionItemContentBody, ContentAccordionItemContentFooter, ContentAccordionItemContentHeader, ContentAccordionItemHeader, ContentAccordionWrapper } from '../ContentAccordion';
+import ContentAccordion from '../ContentAccordion';
 import { fireEvent, render } from '@testing-library/react';
 import { Size } from '../../types';
 describe('ContentAccordion', () => {
@@ -52,86 +52,86 @@ describe('ContentAccordion', () => {
     const wrapper = render( /*#__PURE__*/React.createElement(ContentAccordion, {
       items: contentAccordionItemsWithBody
     }));
-    expect(wrapper.container.querySelectorAll(`${ContentAccordionItem}`).length).toBe(4);
-    expect(wrapper.container.querySelectorAll(`${ContentAccordionItem}.disabled`).length).toBe(1);
-    expect(wrapper.container.querySelectorAll(`${ContentAccordionItem}.disabled`)[0].id).toBe('item_3');
-    expect(wrapper.container.querySelectorAll(`${ContentAccordionItem}.active`).length).toBe(1);
-    expect(wrapper.container.querySelectorAll(`${ContentAccordionItem}.active`)[0].id).toBe('item_2');
+    expect(wrapper.baseElement.getElementsByClassName('content-accordion-item').length).toBe(4);
+    expect(wrapper.baseElement.getElementsByClassName('content-accordion-item disabled').length).toBe(1);
+    expect(wrapper.baseElement.getElementsByClassName('content-accordion-item disabled')[0].id).toBe('item_3');
+    expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active').length).toBe(1);
+    expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active')[0].id).toBe('item_2');
   });
   it('should not render header if not provided', () => {
     const wrapper = render( /*#__PURE__*/React.createElement(ContentAccordion, {
       items: contentAccordionItemsWithBody
     }));
-    expect(wrapper.container.querySelectorAll(`${ContentAccordionItemContentBody}`).length).toBe(4);
-    expect(wrapper.container.querySelectorAll(`${ContentAccordionItemContentHeader}`).length).toBe(0);
+    expect(wrapper.baseElement.getElementsByClassName('item-content-body').length).toBe(4);
+    expect(wrapper.baseElement.getElementsByClassName('item-content-header').length).toBe(0);
   });
   it('should not render footer if not provided', () => {
     const wrapper = render( /*#__PURE__*/React.createElement(ContentAccordion, {
       items: contentAccordionItemsWithBody
     }));
-    expect(wrapper.container.querySelectorAll(`${ContentAccordionItemContentBody}`).length).toBe(4);
-    expect(wrapper.container.querySelectorAll(`${ContentAccordionItemContentFooter}`).length).toBe(0);
+    expect(wrapper.baseElement.getElementsByClassName('item-content-body').length).toBe(4);
+    expect(wrapper.baseElement.getElementsByClassName('item-content-footer').length).toBe(0);
   });
   it('should render body, header, and footer if all are provided', () => {
     const wrapper = render( /*#__PURE__*/React.createElement(ContentAccordion, {
       items: contentAccordionItemsWithBodyAndHeaderAndFooter
     }));
-    expect(wrapper.container.querySelectorAll(`${ContentAccordionItem}`).length).toBe(4);
-    expect(wrapper.container.querySelectorAll(`${ContentAccordionItemContentBody}`).length).toBe(4);
-    expect(wrapper.container.querySelectorAll(`${ContentAccordionItemContentHeader}`).length).toBe(4);
-    expect(wrapper.container.querySelectorAll(`${ContentAccordionItemContentFooter}`).length).toBe(4);
+    expect(wrapper.baseElement.getElementsByClassName('content-accordion-item').length).toBe(4);
+    expect(wrapper.baseElement.getElementsByClassName('item-content-body').length).toBe(4);
+    expect(wrapper.baseElement.getElementsByClassName('item-content-header').length).toBe(4);
+    expect(wrapper.baseElement.getElementsByClassName('item-content-footer').length).toBe(4);
   });
   it('should set correct size class name for small accordion', () => {
     const wrapper = render( /*#__PURE__*/React.createElement(ContentAccordion, {
       items: contentAccordionItemsWithBodyAndHeaderAndFooter,
       size: Size.Small
     }));
-    expect(wrapper.container.querySelectorAll(`${ContentAccordionWrapper}.small`).length).toBe(1);
+    expect(wrapper.baseElement.getElementsByClassName('content-accordion small').length).toBe(1);
   });
   it('should set correct size class name for medium accordion', () => {
     const wrapper = render( /*#__PURE__*/React.createElement(ContentAccordion, {
       items: contentAccordionItemsWithBodyAndHeaderAndFooter,
       size: Size.Medium
     }));
-    expect(wrapper.container.querySelectorAll(`${ContentAccordionWrapper}.medium`).length).toBe(1);
+    expect(wrapper.baseElement.getElementsByClassName('content-accordion medium').length).toBe(1);
   });
   it('should set correct size class name for large accordion', () => {
     const wrapper = render( /*#__PURE__*/React.createElement(ContentAccordion, {
       items: contentAccordionItemsWithBodyAndHeaderAndFooter,
       size: Size.Large
     }));
-    expect(wrapper.container.querySelectorAll(`${ContentAccordionWrapper}.large`).length).toBe(1);
+    expect(wrapper.baseElement.getElementsByClassName('content-accordion large').length).toBe(1);
   });
   it('should change active state when item header is clicked', () => {
     const wrapper = render( /*#__PURE__*/React.createElement(ContentAccordion, {
       items: contentAccordionItemsWithBody,
       multi: false
     }));
-    const itemHeader = wrapper.container.querySelectorAll(`${ContentAccordionItemHeader}`)[3];
+    const itemHeader = wrapper.baseElement.getElementsByClassName('item-header')[3];
     fireEvent.click(itemHeader);
-    expect(wrapper.container.querySelectorAll(`${ContentAccordionItem}.active`).length).toBe(1);
-    expect(wrapper.container.querySelectorAll(`${ContentAccordionItem}.active`)[0].id).toBe('item_4');
+    expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active').length).toBe(1);
+    expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active')[0].id).toBe('item_4');
   });
   it('should not change active state when disabled item header is clicked', () => {
     const wrapper = render( /*#__PURE__*/React.createElement(ContentAccordion, {
       items: contentAccordionItemsWithBody,
       multi: false
     }));
-    const itemHeader = wrapper.container.querySelectorAll(`${ContentAccordionItemHeader}`)[2];
+    const itemHeader = wrapper.baseElement.getElementsByClassName('item-header')[2];
     fireEvent.click(itemHeader);
-    expect(wrapper.container.querySelectorAll(`${ContentAccordionItem}.active`).length).toBe(1);
-    expect(wrapper.container.querySelectorAll(`${ContentAccordionItem}.active`)[0].id).toBe('item_2');
+    expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active').length).toBe(1);
+    expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active')[0].id).toBe('item_2');
   });
   it('should append active items if multi property is true', () => {
     const wrapper = render( /*#__PURE__*/React.createElement(ContentAccordion, {
       items: contentAccordionItemsWithBody,
       multi: true
     }));
-    const itemHeader = wrapper.container.querySelectorAll(`${ContentAccordionItemHeader}`)[3];
+    const itemHeader = wrapper.baseElement.getElementsByClassName('item-header')[3];
     fireEvent.click(itemHeader);
-    expect(wrapper.container.querySelectorAll(`${ContentAccordionItem}.active`).length).toBe(2);
-    expect(wrapper.container.querySelectorAll(`${ContentAccordionItem}.active`)[0].id).toBe('item_2');
-    expect(wrapper.container.querySelectorAll(`${ContentAccordionItem}.active`)[1].id).toBe('item_4');
+    expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active').length).toBe(2);
+    expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active')[0].id).toBe('item_2');
+    expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active')[1].id).toBe('item_4');
   });
 });
 //# sourceMappingURL=ContetnAccordion.test.js.map

package/dist/esm/Accordion/__tests__/ContetnAccordion.test.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/Accordion/__tests__/ContetnAccordion.test.tsx"],"names":["React","ContentAccordion","ContentAccordionItem","ContentAccordionItemContentBody","ContentAccordionItemContentFooter","ContentAccordionItemContentHeader","ContentAccordionItemHeader","ContentAccordionWrapper","fireEvent","render","Size","describe","contentAccordionItemsWithBody","key","title","body","active","disabled","contentAccordionItemsWithBodyAndHeaderAndFooter","header","footer","it","wrapper","expect","container","querySelectorAll","length","toBe","id","Small","Medium","Large","itemHeader","click"],"mappings":"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","sourcesContent":["import React from 'react';\nimport ContentAccordion, {\n  ContentAccordionItem,\n  ContentAccordionItemContentBody, ContentAccordionItemContentFooter,\n  ContentAccordionItemContentHeader, ContentAccordionItemHeader, ContentAccordionWrapper\n} from '../ContentAccordion';\nimport {fireEvent, render} from '@testing-library/react';\nimport {Size} from '../../types';\n\ndescribe('ContentAccordion', () => {\n  const contentAccordionItemsWithBody = [\n    {\n      key: '1',\n      title: 'Item 1',\n      body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'\n    },\n    {\n      key: '2',\n      title: 'Item 2',\n      body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',\n      active: true\n    },\n    {\n      key: '3',\n      title: 'Item 3',\n      body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',\n      disabled: true\n    },\n    {\n      key: '4',\n      title: 'Item 4',\n      body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'\n    }\n  ];\n\n  const contentAccordionItemsWithBodyAndHeaderAndFooter = [\n    {\n      key: '1',\n      title: 'Item 1',\n      body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',\n      header: 'Header 1',\n      footer: <span/>,\n    },\n    {\n      key: '2',\n      title: 'Item 2',\n      body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',\n      header: 'Header 2',\n      footer: <span/>,\n    },\n    {\n      key: '3',\n      title: 'Item 3',\n      body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',\n      header: 'Header 3',\n      footer: <span/>,\n      disabled: true\n    },\n    {\n      key: '4',\n      title: 'Item 4',\n      body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',\n      header: 'Header 4',\n      footer: <span/>,\n    }\n  ];\n\n  it('should render items in correct state', () => {\n    const wrapper = render(<ContentAccordion items={contentAccordionItemsWithBody}/>);\n\n    expect(wrapper.container.querySelectorAll(`${ContentAccordionItem}`).length).toBe(4);\n    expect(wrapper.container.querySelectorAll(`${ContentAccordionItem}.disabled`).length).toBe(1);\n    expect(wrapper.container.querySelectorAll(`${ContentAccordionItem}.disabled`)[0].id).toBe('item_3');\n    expect(wrapper.container.querySelectorAll(`${ContentAccordionItem}.active`).length).toBe(1);\n    expect(wrapper.container.querySelectorAll(`${ContentAccordionItem}.active`)[0].id).toBe('item_2');\n  });\n\n  it('should not render header if not provided', () => {\n    const wrapper = render(<ContentAccordion items={contentAccordionItemsWithBody}/>);\n\n    expect(wrapper.container.querySelectorAll(`${ContentAccordionItemContentBody}`).length).toBe(4);\n    expect(wrapper.container.querySelectorAll(`${ContentAccordionItemContentHeader}`).length).toBe(0);\n  });\n\n  it('should not render footer if not provided', () => {\n    const wrapper = render(<ContentAccordion items={contentAccordionItemsWithBody}/>);\n\n    expect(wrapper.container.querySelectorAll(`${ContentAccordionItemContentBody}`).length).toBe(4);\n    expect(wrapper.container.querySelectorAll(`${ContentAccordionItemContentFooter}`).length).toBe(0);\n  });\n\n  it('should render body, header, and footer if all are provided', () => {\n    const wrapper = render(<ContentAccordion items={contentAccordionItemsWithBodyAndHeaderAndFooter}/>);\n\n    expect(wrapper.container.querySelectorAll(`${ContentAccordionItem}`).length).toBe(4);\n    expect(wrapper.container.querySelectorAll(`${ContentAccordionItemContentBody}`).length).toBe(4);\n    expect(wrapper.container.querySelectorAll(`${ContentAccordionItemContentHeader}`).length).toBe(4);\n    expect(wrapper.container.querySelectorAll(`${ContentAccordionItemContentFooter}`).length).toBe(4);\n  });\n\n  it('should set correct size class name for small accordion', () => {\n    const wrapper = render(<ContentAccordion items={contentAccordionItemsWithBodyAndHeaderAndFooter}\n                                             size={Size.Small}/>);\n    expect(wrapper.container.querySelectorAll(`${ContentAccordionWrapper}.small`).length).toBe(1);\n  });\n\n  it('should set correct size class name for medium accordion', () => {\n    const wrapper = render(<ContentAccordion items={contentAccordionItemsWithBodyAndHeaderAndFooter}\n                                             size={Size.Medium}/>);\n    expect(wrapper.container.querySelectorAll(`${ContentAccordionWrapper}.medium`).length).toBe(1);\n  });\n\n  it('should set correct size class name for large accordion', () => {\n    const wrapper = render(<ContentAccordion items={contentAccordionItemsWithBodyAndHeaderAndFooter}\n                                             size={Size.Large}/>);\n    expect(wrapper.container.querySelectorAll(`${ContentAccordionWrapper}.large`).length).toBe(1);\n  });\n\n  it('should change active state when item header is clicked', () => {\n    const wrapper = render(<ContentAccordion items={contentAccordionItemsWithBody} multi={false}/>);\n    const itemHeader = wrapper.container.querySelectorAll(`${ContentAccordionItemHeader}`)[3];\n\n    fireEvent.click(itemHeader);\n\n    expect(wrapper.container.querySelectorAll(`${ContentAccordionItem}.active`).length).toBe(1);\n    expect(wrapper.container.querySelectorAll(`${ContentAccordionItem}.active`)[0].id).toBe('item_4');\n  });\n\n  it('should not change active state when disabled item header is clicked', () => {\n    const wrapper = render(<ContentAccordion items={contentAccordionItemsWithBody} multi={false}/>);\n    const itemHeader = wrapper.container.querySelectorAll(`${ContentAccordionItemHeader}`)[2];\n\n    fireEvent.click(itemHeader);\n\n    expect(wrapper.container.querySelectorAll(`${ContentAccordionItem}.active`).length).toBe(1);\n    expect(wrapper.container.querySelectorAll(`${ContentAccordionItem}.active`)[0].id).toBe('item_2');\n  });\n\n  it('should append active items if multi property is true', () => {\n    const wrapper = render(<ContentAccordion items={contentAccordionItemsWithBody} multi={true}/>);\n    const itemHeader = wrapper.container.querySelectorAll(`${ContentAccordionItemHeader}`)[3];\n\n    fireEvent.click(itemHeader);\n\n    expect(wrapper.container.querySelectorAll(`${ContentAccordionItem}.active`).length).toBe(2);\n    expect(wrapper.container.querySelectorAll(`${ContentAccordionItem}.active`)[0].id).toBe('item_2');\n    expect(wrapper.container.querySelectorAll(`${ContentAccordionItem}.active`)[1].id).toBe('item_4');\n  });\n\n});\n"],"file":"ContetnAccordion.test.js"}
+{"version":3,"sources":["../../../../src/Accordion/__tests__/ContetnAccordion.test.tsx"],"names":["React","ContentAccordion","fireEvent","render","Size","describe","contentAccordionItemsWithBody","key","title","body","active","disabled","contentAccordionItemsWithBodyAndHeaderAndFooter","header","footer","it","wrapper","expect","baseElement","getElementsByClassName","length","toBe","id","Small","Medium","Large","itemHeader","click"],"mappings":"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","sourcesContent":["import React from 'react';\nimport ContentAccordion from '../ContentAccordion';\nimport {fireEvent, render} from '@testing-library/react';\nimport {Size} from '../../types';\n\ndescribe('ContentAccordion', () => {\n  const contentAccordionItemsWithBody = [\n    {\n      key: '1',\n      title: 'Item 1',\n      body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'\n    },\n    {\n      key: '2',\n      title: 'Item 2',\n      body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',\n      active: true\n    },\n    {\n      key: '3',\n      title: 'Item 3',\n      body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',\n      disabled: true\n    },\n    {\n      key: '4',\n      title: 'Item 4',\n      body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'\n    }\n  ];\n\n  const contentAccordionItemsWithBodyAndHeaderAndFooter = [\n    {\n      key: '1',\n      title: 'Item 1',\n      body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',\n      header: 'Header 1',\n      footer: <span/>,\n    },\n    {\n      key: '2',\n      title: 'Item 2',\n      body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',\n      header: 'Header 2',\n      footer: <span/>,\n    },\n    {\n      key: '3',\n      title: 'Item 3',\n      body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',\n      header: 'Header 3',\n      footer: <span/>,\n      disabled: true\n    },\n    {\n      key: '4',\n      title: 'Item 4',\n      body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',\n      header: 'Header 4',\n      footer: <span/>,\n    }\n  ];\n\n  it('should render items in correct state', () => {\n    const wrapper = render(<ContentAccordion items={contentAccordionItemsWithBody}/>);\n\n    expect(wrapper.baseElement.getElementsByClassName('content-accordion-item').length).toBe(4);\n    expect(wrapper.baseElement.getElementsByClassName('content-accordion-item disabled').length).toBe(1);\n    expect(wrapper.baseElement.getElementsByClassName('content-accordion-item disabled')[0].id).toBe('item_3');\n    expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active').length).toBe(1);\n    expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active')[0].id).toBe('item_2');\n  });\n\n  it('should not render header if not provided', () => {\n    const wrapper = render(<ContentAccordion items={contentAccordionItemsWithBody}/>);\n\n    expect(wrapper.baseElement.getElementsByClassName('item-content-body').length).toBe(4);\n    expect(wrapper.baseElement.getElementsByClassName('item-content-header').length).toBe(0);\n  });\n\n  it('should not render footer if not provided', () => {\n    const wrapper = render(<ContentAccordion items={contentAccordionItemsWithBody}/>);\n\n    expect(wrapper.baseElement.getElementsByClassName('item-content-body').length).toBe(4);\n    expect(wrapper.baseElement.getElementsByClassName('item-content-footer').length).toBe(0);\n  });\n\n  it('should render body, header, and footer if all are provided', () => {\n    const wrapper = render(<ContentAccordion items={contentAccordionItemsWithBodyAndHeaderAndFooter}/>);\n\n    expect(wrapper.baseElement.getElementsByClassName('content-accordion-item').length).toBe(4);\n    expect(wrapper.baseElement.getElementsByClassName('item-content-body').length).toBe(4);\n    expect(wrapper.baseElement.getElementsByClassName('item-content-header').length).toBe(4);\n    expect(wrapper.baseElement.getElementsByClassName('item-content-footer').length).toBe(4);\n  });\n\n  it('should set correct size class name for small accordion', () => {\n    const wrapper = render(<ContentAccordion items={contentAccordionItemsWithBodyAndHeaderAndFooter}\n                                             size={Size.Small}/>);\n    expect(wrapper.baseElement.getElementsByClassName('content-accordion small').length).toBe(1);\n  });\n\n  it('should set correct size class name for medium accordion', () => {\n    const wrapper = render(<ContentAccordion items={contentAccordionItemsWithBodyAndHeaderAndFooter}\n                                             size={Size.Medium}/>);\n    expect(wrapper.baseElement.getElementsByClassName('content-accordion medium').length).toBe(1);\n  });\n\n  it('should set correct size class name for large accordion', () => {\n    const wrapper = render(<ContentAccordion items={contentAccordionItemsWithBodyAndHeaderAndFooter}\n                                             size={Size.Large}/>);\n    expect(wrapper.baseElement.getElementsByClassName('content-accordion large').length).toBe(1);\n  });\n\n  it('should change active state when item header is clicked', () => {\n    const wrapper = render(<ContentAccordion items={contentAccordionItemsWithBody} multi={false}/>);\n    const itemHeader = wrapper.baseElement.getElementsByClassName('item-header')[3];\n\n    fireEvent.click(itemHeader);\n\n    expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active').length).toBe(1);\n    expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active')[0].id).toBe('item_4');\n  });\n\n  it('should not change active state when disabled item header is clicked', () => {\n    const wrapper = render(<ContentAccordion items={contentAccordionItemsWithBody} multi={false}/>);\n    const itemHeader = wrapper.baseElement.getElementsByClassName('item-header')[2];\n\n    fireEvent.click(itemHeader);\n\n    expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active').length).toBe(1);\n    expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active')[0].id).toBe('item_2');\n  });\n\n  it('should append active items if multi property is true', () => {\n    const wrapper = render(<ContentAccordion items={contentAccordionItemsWithBody} multi={true}/>);\n    const itemHeader = wrapper.baseElement.getElementsByClassName('item-header')[3];\n\n    fireEvent.click(itemHeader);\n\n    expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active').length).toBe(2);\n    expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active')[0].id).toBe('item_2');\n    expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active')[1].id).toBe('item_4');\n  });\n\n});\n"],"file":"ContetnAccordion.test.js"}

package/dist/esm/Button/Iconbutton.js

@@ -180,7 +180,6 @@ const StyledSecondaryIconButton = styled(StyledIconButton)`
 
   ${props => props.tabbedHere ? tabbedHereStyle('secondary', props.tabbedHereBackgroundColor) : ''};
 `;
-;
 const IconButton = /*#__PURE__*/React.forwardRef(({
   id,
   variant,

package/dist/esm/Button/Iconbutton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Button/Iconbutton.tsx"],"names":["React","styled","css","BREAKPOINTS","COLORS","tabbedHereStyle","variant","tabbedHereBackgroundColor","primary_500","neutral_600","primary_700","white","getBorderRadius","props","borderRadius","getBorderRadiusStyle","radius","flatEdge","StyledIconButton","button","hideOnLowWidth","MEDIUM","unsetIconSize","StyledPrimaryIconButton","useTransparentBackground","iconColor","primary_800","neutral_200","tabbedHere","StyledSecondaryIconButton","primary_20","primary_100","neutral_300","IconButton","forwardRef","id","shape","action","isInMobileMenu","children","disabled","tabIndex","onKeyPress","type","hidden","ref","supressFocusRef","useRef","setTabbedHere","useState","isPressingEnter","e","key","preventDefault","stopPropagation","useEffect","event","current"],"mappings":"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","sourcesContent":["import React from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BREAKPOINTS, COLORS } from '../styles';\n\ninterface HeaderItemProps {\n  hideOnLowWidth: boolean;\n  inMobileMenu?: boolean;\n  useTransparentBackground?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  borderRadius?: number;\n  shape?: string;\n  flatEdge?: string;\n  tabbedHere?: boolean;\n  tabbedHereBackgroundColor?: string;\n}\n\nconst tabbedHereStyle = (variant: string, tabbedHereBackgroundColor?: string) => {\n  switch (variant) {\n    case 'secondary':\n      return css`\n        div {\n          background-color: ${tabbedHereBackgroundColor || 'transparent'} !important;\n          box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n        }\n        div svg path,\n        div svg {\n          fill: ${COLORS.neutral_600};\n        }\n      `;\n    case 'primary':\n    default:\n      return css`\n        div {\n          background-color: ${tabbedHereBackgroundColor || COLORS.primary_700} !important;\n          box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n        }\n        div svg path,\n        div svg {\n          fill: ${COLORS.white};\n        }\n      `;\n  }\n};\n\nconst getBorderRadius = (props:HeaderItemProps) => (props.borderRadius ? `${props.borderRadius}px` : '4px'); \n\nconst getBorderRadiusStyle = (props:HeaderItemProps) => {\n  const radius = getBorderRadius(props);\n  switch(props.flatEdge)\n  {\n      case 'left':\n          return `0px ${radius} ${radius} 0px`;\n      \n      case 'right':\n          return `${radius} 0px 0px ${radius}`;\n\n      case 'none':\n      default:\n          return `${radius}`;\n  }\n};\n\nconst StyledIconButton = styled.button<HeaderItemProps>`\n  border-width: 0;\n  cursor: pointer;\n  height: 48px;\n  width: 48px;\n  background: transparent;\n\n  display: ${(props) => (props.hideOnLowWidth ? 'none' : 'block')};\n  ${BREAKPOINTS.MEDIUM} {\n    display: block;\n  }\n\n  border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\n  div {\n    height: 36px;\n    width: 36px;\n    border-radius: ${getBorderRadiusStyle};\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    svg {\n      height: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      width: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      padding: 0;\n    }\n  }\n  &:only-child {\n    margin: 0;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n  &:focus:not(:disabled) {\n    outline: none;\n    div {\n      outline: none;\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      box-shadow: none;\n    }\n  }\n`;\n\nconst StyledPrimaryIconButton = styled(StyledIconButton)`\n  div {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.primary_500)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.white};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.white};\n      }\n    }\n  }\n  &:hover:not(:disabled) {\n    div {\n      background-color: ${COLORS.primary_700};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      background: ${COLORS.primary_800};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:disabled {\n    div {\n      background-color: ${COLORS.neutral_200};\n    }\n    svg {\n      path {\n        fill: ${COLORS.white};\n      }\n      fill: ${COLORS.white};\n    }\n  }\n  ${(props) => (props.tabbedHere ? tabbedHereStyle('primary', props.tabbedHereBackgroundColor) : '')};\n`;\n\nconst StyledSecondaryIconButton = styled(StyledIconButton)`\n  div {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      }\n    }\n  }\n  &:hover:not(:disabled) {\n    div {\n      background-color: ${COLORS.primary_20};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.primary_700};\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      background: ${COLORS.primary_100};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.primary_800};\n    }\n  }\n\n  &:disabled {\n    div {\n      background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n    }\n    svg {\n      path {\n        fill: ${COLORS.neutral_300};\n      }\n      fill: ${COLORS.neutral_300};\n    }\n  }\n\n  ${(props) => (props.tabbedHere ? tabbedHereStyle('secondary', props.tabbedHereBackgroundColor) : '')};\n`;\n\ninterface Props {\n  id?: string;\n  variant?: 'primary' | 'secondary';\n  shape?: 'square' | 'circular';\n  action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n  hideOnLowWidth?: boolean;\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\n  isInMobileMenu?: boolean;\n  disabled?: boolean;\n  useTransparentBackground?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  tabIndex?: number;\n  borderRadius?: number;\n  onKeyPress?: React.KeyboardEventHandler<HTMLButtonElement>;\n  tabbedHereBackgroundColor?: string;\n  type?: 'submit' | 'reset' | 'button' | undefined;\n  children?: React.ReactNode;\n  hidden?: boolean;\n};\n\nconst IconButton = React.forwardRef<HTMLButtonElement, Props>(({\n  id,\n  variant,\n  shape,\n  action,\n  hideOnLowWidth,\n  isInMobileMenu,\n  children,\n  useTransparentBackground,\n  disabled,\n  iconColor,\n  unsetIconSize,\n  tabIndex,\n  flatEdge,\n  borderRadius,\n  onKeyPress,\n  tabbedHereBackgroundColor,\n  type,\n  hidden\n}: Props, ref) => {\n  const supressFocusRef = React.useRef<any>(null);\n  const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n\n  const isPressingEnter = (e: any) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      e.stopPropagation();\n      return true;\n    }\n    return false;\n  };\n\n  React.useEffect(() => {\n    !!disabled && setTabbedHere(false)\n  }, [disabled]);\n\n  // Let's render button\n  switch (variant) {\n    case 'secondary':\n      return (\n        <StyledSecondaryIconButton\n          id={id}\n          type={type ?? 'button'}\n          data-testid={id}\n          ref={ref}\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) => action(event)}\n          onKeyDown={(e: any) => (isPressingEnter(e) ? action() : null)}\n          disabled={disabled}\n          hideOnLowWidth={hideOnLowWidth || false}\n          inMobileMenu={isInMobileMenu}\n          useTransparentBackground={useTransparentBackground}\n          iconColor={iconColor}\n          unsetIconSize={unsetIconSize}\n          tabIndex={tabIndex || 0}\n          borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n          onMouseDown={(e: any) => {\n            if (!disabled && !tabbedHere) supressFocusRef.current = true;\n          }}\n          onFocus={(e: any) => {\n            if (!disabled) {\n              if (!supressFocusRef.current) setTabbedHere(true);\n              else supressFocusRef.current = false;\n            }\n          }}\n          onBlur={() => {\n            setTabbedHere(false);\n          }}\n          tabbedHere={tabbedHere}\n          onKeyPress={onKeyPress}\n          hidden={hidden}\n          tabbedHereBackgroundColor={tabbedHereBackgroundColor}>\n          <div>{children}</div>\n        </StyledSecondaryIconButton>\n      );\n    case 'primary':\n    default:\n      return (\n        <StyledPrimaryIconButton\n          id={id}\n          type={type ?? 'button'}\n          data-testid={id}\n          flatEdge={flatEdge}\n          ref={ref}\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) => action(event)}\n          onKeyDown={(e: any) => (isPressingEnter(e) ? action() : null)}\n          disabled={disabled}\n          hideOnLowWidth={hideOnLowWidth || false}\n          inMobileMenu={isInMobileMenu}\n          useTransparentBackground={useTransparentBackground}\n          iconColor={iconColor}\n          unsetIconSize={unsetIconSize}\n          tabIndex={tabIndex || 0}\n          borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n          onMouseDown={(e: any) => {\n            if (!disabled && !tabbedHere) supressFocusRef.current = true;\n          }}\n          onFocus={(e: any) => {\n            if (!disabled) {\n              if (!supressFocusRef.current) setTabbedHere(true);\n              else supressFocusRef.current = false;\n            }\n          }}\n          onBlur={() => {\n            setTabbedHere(false);\n          }}\n          tabbedHere={tabbedHere}\n          onKeyPress={onKeyPress}\n          hidden={hidden}\n          tabbedHereBackgroundColor={tabbedHereBackgroundColor}>\n          <div>{children}</div>\n        </StyledPrimaryIconButton>\n      );\n  }\n});\n\nexport default IconButton;\n"],"file":"Iconbutton.js"}
+{"version":3,"sources":["../../../src/Button/Iconbutton.tsx"],"names":["React","styled","css","BREAKPOINTS","COLORS","tabbedHereStyle","variant","tabbedHereBackgroundColor","primary_500","neutral_600","primary_700","white","getBorderRadius","props","borderRadius","getBorderRadiusStyle","radius","flatEdge","StyledIconButton","button","hideOnLowWidth","MEDIUM","unsetIconSize","StyledPrimaryIconButton","useTransparentBackground","iconColor","primary_800","neutral_200","tabbedHere","StyledSecondaryIconButton","primary_20","primary_100","neutral_300","IconButton","forwardRef","id","shape","action","isInMobileMenu","children","disabled","tabIndex","onKeyPress","type","hidden","ref","supressFocusRef","useRef","setTabbedHere","useState","isPressingEnter","e","key","preventDefault","stopPropagation","useEffect","event","current"],"mappings":"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","sourcesContent":["import React from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BREAKPOINTS, COLORS } from '../styles';\n\ninterface HeaderItemProps {\n  hideOnLowWidth: boolean;\n  inMobileMenu?: boolean;\n  useTransparentBackground?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  borderRadius?: number;\n  shape?: string;\n  flatEdge?: string;\n  tabbedHere?: boolean;\n  tabbedHereBackgroundColor?: string;\n}\n\nconst tabbedHereStyle = (variant: string, tabbedHereBackgroundColor?: string) => {\n  switch (variant) {\n    case 'secondary':\n      return css`\n        div {\n          background-color: ${tabbedHereBackgroundColor || 'transparent'} !important;\n          box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n        }\n        div svg path,\n        div svg {\n          fill: ${COLORS.neutral_600};\n        }\n      `;\n    case 'primary':\n    default:\n      return css`\n        div {\n          background-color: ${tabbedHereBackgroundColor || COLORS.primary_700} !important;\n          box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n        }\n        div svg path,\n        div svg {\n          fill: ${COLORS.white};\n        }\n      `;\n  }\n};\n\nconst getBorderRadius = (props:HeaderItemProps) => (props.borderRadius ? `${props.borderRadius}px` : '4px'); \n\nconst getBorderRadiusStyle = (props:HeaderItemProps) => {\n  const radius = getBorderRadius(props);\n  switch(props.flatEdge)\n  {\n      case 'left':\n          return `0px ${radius} ${radius} 0px`;\n      \n      case 'right':\n          return `${radius} 0px 0px ${radius}`;\n\n      case 'none':\n      default:\n          return `${radius}`;\n  }\n};\n\nconst StyledIconButton = styled.button<HeaderItemProps>`\n  border-width: 0;\n  cursor: pointer;\n  height: 48px;\n  width: 48px;\n  background: transparent;\n\n  display: ${(props) => (props.hideOnLowWidth ? 'none' : 'block')};\n  ${BREAKPOINTS.MEDIUM} {\n    display: block;\n  }\n\n  border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\n  div {\n    height: 36px;\n    width: 36px;\n    border-radius: ${getBorderRadiusStyle};\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    svg {\n      height: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      width: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      padding: 0;\n    }\n  }\n  &:only-child {\n    margin: 0;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n  &:focus:not(:disabled) {\n    outline: none;\n    div {\n      outline: none;\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      box-shadow: none;\n    }\n  }\n`;\n\nconst StyledPrimaryIconButton = styled(StyledIconButton)`\n  div {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.primary_500)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.white};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.white};\n      }\n    }\n  }\n  &:hover:not(:disabled) {\n    div {\n      background-color: ${COLORS.primary_700};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      background: ${COLORS.primary_800};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:disabled {\n    div {\n      background-color: ${COLORS.neutral_200};\n    }\n    svg {\n      path {\n        fill: ${COLORS.white};\n      }\n      fill: ${COLORS.white};\n    }\n  }\n  ${(props) => (props.tabbedHere ? tabbedHereStyle('primary', props.tabbedHereBackgroundColor) : '')};\n`;\n\nconst StyledSecondaryIconButton = styled(StyledIconButton)`\n  div {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      }\n    }\n  }\n  &:hover:not(:disabled) {\n    div {\n      background-color: ${COLORS.primary_20};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.primary_700};\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      background: ${COLORS.primary_100};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.primary_800};\n    }\n  }\n\n  &:disabled {\n    div {\n      background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n    }\n    svg {\n      path {\n        fill: ${COLORS.neutral_300};\n      }\n      fill: ${COLORS.neutral_300};\n    }\n  }\n\n  ${(props) => (props.tabbedHere ? tabbedHereStyle('secondary', props.tabbedHereBackgroundColor) : '')};\n`;\n\nexport interface IconButtonProps {\n  id?: string;\n  variant?: 'primary' | 'secondary';\n  shape?: 'square' | 'circular';\n  action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n  hideOnLowWidth?: boolean;\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\n  isInMobileMenu?: boolean;\n  disabled?: boolean;\n  useTransparentBackground?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  tabIndex?: number;\n  borderRadius?: number;\n  onKeyPress?: React.KeyboardEventHandler<HTMLButtonElement>;\n  tabbedHereBackgroundColor?: string;\n  type?: 'submit' | 'reset' | 'button' | undefined;\n  children?: React.ReactNode;\n  hidden?: boolean;\n}\n\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(({\n  id,\n  variant,\n  shape,\n  action,\n  hideOnLowWidth,\n  isInMobileMenu,\n  children,\n  useTransparentBackground,\n  disabled,\n  iconColor,\n  unsetIconSize,\n  tabIndex,\n  flatEdge,\n  borderRadius,\n  onKeyPress,\n  tabbedHereBackgroundColor,\n  type,\n  hidden\n}: IconButtonProps, ref) => {\n  const supressFocusRef = React.useRef<any>(null);\n  const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n\n  const isPressingEnter = (e: any) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      e.stopPropagation();\n      return true;\n    }\n    return false;\n  };\n\n  React.useEffect(() => {\n    !!disabled && setTabbedHere(false)\n  }, [disabled]);\n\n  // Let's render button\n  switch (variant) {\n    case 'secondary':\n      return (\n        <StyledSecondaryIconButton\n          id={id}\n          type={type ?? 'button'}\n          data-testid={id}\n          ref={ref}\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) => action(event)}\n          onKeyDown={(e: any) => (isPressingEnter(e) ? action() : null)}\n          disabled={disabled}\n          hideOnLowWidth={hideOnLowWidth || false}\n          inMobileMenu={isInMobileMenu}\n          useTransparentBackground={useTransparentBackground}\n          iconColor={iconColor}\n          unsetIconSize={unsetIconSize}\n          tabIndex={tabIndex || 0}\n          borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n          onMouseDown={(e: any) => {\n            if (!disabled && !tabbedHere) supressFocusRef.current = true;\n          }}\n          onFocus={(e: any) => {\n            if (!disabled) {\n              if (!supressFocusRef.current) setTabbedHere(true);\n              else supressFocusRef.current = false;\n            }\n          }}\n          onBlur={() => {\n            setTabbedHere(false);\n          }}\n          tabbedHere={tabbedHere}\n          onKeyPress={onKeyPress}\n          hidden={hidden}\n          tabbedHereBackgroundColor={tabbedHereBackgroundColor}>\n          <div>{children}</div>\n        </StyledSecondaryIconButton>\n      );\n    case 'primary':\n    default:\n      return (\n        <StyledPrimaryIconButton\n          id={id}\n          type={type ?? 'button'}\n          data-testid={id}\n          flatEdge={flatEdge}\n          ref={ref}\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) => action(event)}\n          onKeyDown={(e: any) => (isPressingEnter(e) ? action() : null)}\n          disabled={disabled}\n          hideOnLowWidth={hideOnLowWidth || false}\n          inMobileMenu={isInMobileMenu}\n          useTransparentBackground={useTransparentBackground}\n          iconColor={iconColor}\n          unsetIconSize={unsetIconSize}\n          tabIndex={tabIndex || 0}\n          borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n          onMouseDown={(e: any) => {\n            if (!disabled && !tabbedHere) supressFocusRef.current = true;\n          }}\n          onFocus={(e: any) => {\n            if (!disabled) {\n              if (!supressFocusRef.current) setTabbedHere(true);\n              else supressFocusRef.current = false;\n            }\n          }}\n          onBlur={() => {\n            setTabbedHere(false);\n          }}\n          tabbedHere={tabbedHere}\n          onKeyPress={onKeyPress}\n          hidden={hidden}\n          tabbedHereBackgroundColor={tabbedHereBackgroundColor}>\n          <div>{children}</div>\n        </StyledPrimaryIconButton>\n      );\n  }\n});\n\nexport default IconButton;\n"],"file":"Iconbutton.js"}