@laerdal/life-react-components 6.0.0-dev.2.full → 6.0.0-dev.20.full

package/dist/Accordion/ContentAccordion.cjs

@@ -24,12 +24,21 @@ const ContentAccordionItemHeader = exports.ContentAccordionItemHeader = _styledC
   align-items: center;
   box-sizing: border-box;
   min-height: 48px;
-  color: ${props => _styles.COLORS.getColor('neutral_600', props.theme)};
+  color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme)};
   cursor: pointer;
 
   &:hover {
-    color: ${props => _styles.COLORS.getColor('primary_700', props.theme)};
-    background-color: ${props => _styles.COLORS.getColor('primary_20', props.theme)};
+    color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  state: 'hover'
+}, props.theme)};
+    background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'hover'
+}, props.theme)};
     z-index: ${_styles.Z_INDEXES.hover};
   }
 
@@ -38,8 +47,14 @@ const ContentAccordionItemHeader = exports.ContentAccordionItemHeader = _styledC
   }
 
   &:active {
-    color: ${props => _styles.COLORS.getColor('primary_800', props.theme)};
-    background-color: ${props => _styles.COLORS.getColor('primary_100', props.theme)};
+    color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  state: 'active'
+}, props.theme)};
+    background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'active'
+}, props.theme)};
     z-index: ${_styles.Z_INDEXES.active};
   }
 `;
@@ -56,6 +71,11 @@ const ContentAccordionItemHeaderText = exports.ContentAccordionItemHeaderText =
 const ContentAccordionItemContent = exports.ContentAccordionItemContent = _styledComponents.default.div`
   display: none;
   flex-direction: column;
+  color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'default'
+}, props.theme)};
+
 `;
 const ContentAccordionItemContentHeader = exports.ContentAccordionItemContentHeader = _styledComponents.default.div``;
 const ContentAccordionItemContentBody = exports.ContentAccordionItemContentBody = _styledComponents.default.p``;
@@ -63,7 +83,10 @@ const ContentAccordionItemContentFooter = exports.ContentAccordionItemContentFoo
 const ContentAccordionItem = exports.ContentAccordionItem = _styledComponents.default.div`
   display: flex;
   flex-direction: column;
-  border-top: 1px solid ${props => _styles.COLORS.getColor('neutral_100', props.theme)};
+  border-top: 1px solid ${props => _styles.COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'subtle'
+}, props.theme)};
 
   &.active {
     ${ContentAccordionItemContent} {
@@ -73,7 +96,10 @@ const ContentAccordionItem = exports.ContentAccordionItem = _styledComponents.de
 
   &.disabled {
     ${ContentAccordionItemHeader} {
-      color: ${props => _styles.COLORS.getColor('neutral_300', props.theme)};
+      color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  state: 'disabled'
+}, props.theme)};
       cursor: not-allowed;
       pointer-events: none;
     }
@@ -84,7 +110,10 @@ const ContentAccordionWrapper = exports.ContentAccordionWrapper = _styledCompone
   position: relative;
 
   ${ContentAccordionItem}:last-child {
-    border-bottom: 1px solid ${props => _styles.COLORS.getColor('neutral_100', props.theme)};
+    border-bottom: 1px solid ${props => _styles.COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'subtle'
+}, props.theme)};
   }
 
   &.small {
@@ -102,7 +131,7 @@ const ContentAccordionWrapper = exports.ContentAccordionWrapper = _styledCompone
       gap: 8px;
 
       ${ContentAccordionItemContentHeader} {
-        ${props => (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.getColor('black', props.theme))}
+        ${(0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, null)}
       }
 
       ${ContentAccordionItemContentBody} {
@@ -126,7 +155,7 @@ const ContentAccordionWrapper = exports.ContentAccordionWrapper = _styledCompone
       gap: 12px;
 
       ${ContentAccordionItemContentHeader} {
-        ${props => (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.getColor('black', props.theme))}
+        ${props => (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, null)}
       }
 
       ${ContentAccordionItemContentBody} {
@@ -150,7 +179,7 @@ const ContentAccordionWrapper = exports.ContentAccordionWrapper = _styledCompone
       gap: 16px;
 
       ${ContentAccordionItemContentHeader} {
-        ${props => (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.getColor('black', props.theme))}
+        ${props => (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Bold, null)}
       }
 
       ${ContentAccordionItemContentBody} {

package/dist/Accordion/ContentAccordion.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ContentAccordion.cjs","names":["_react","_interopRequireDefault","require","_styledComponents","_types","_icons","_styles","_common","_jsxRuntime","_excluded","_excluded2","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","default","getOwnPropertyDescriptors","defineProperties","defineProperty","ContentAccordionItemHeader","exports","styled","div","props","COLORS","getColor","theme","Z_INDEXES","hover","focusStyles","active","ContentAccordionItemHeaderIcon","ContentAccordionItemHeaderText","ContentAccordionItemContent","ContentAccordionItemContentHeader","ContentAccordionItemContentBody","p","ContentAccordionItemContentFooter","ContentAccordionItem","ContentAccordionWrapper","ComponentSStyling","ComponentTextStyle","Regular","Bold","ComponentMStyling","ComponentLStyling","ContentAccordion","_ref","items","multi","size","Size","Medium","className","onItemStateChanged","rest","_objectWithoutProperties2","opened","setOpened","React","useState","useEffect","item","map","id","find","onItemClick","disabled","includes","newOpened","key","renderItem","title","header","body","footer","isActive","jsxs","concat","children","role","tabIndex","undefined","onMouseDown","defaultOnMouseDownHandler","onClick","onKeyDown","event","jsx","SystemIcons","Minus","Plus","ChevronDown","ChevronRight","cls","trim","propTypes","_propTypes","arrayOf","shape","string","isRequired","any","bool","func","_default"],"sources":["../../src/Accordion/ContentAccordion.tsx"],"sourcesContent":["import React from 'react';\r\nimport styled from 'styled-components';\r\nimport {Size} from '../types';\r\nimport {SystemIcons} from '../icons';\r\nimport {\r\n  COLORS,\r\n  ComponentLStyling,\r\n  ComponentMStyling,\r\n  ComponentSStyling,\r\n  ComponentTextStyle,\r\n  focusStyles,\r\n  Z_INDEXES,\r\n} from '../styles';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\n\r\nexport const ContentAccordionItemHeader = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  box-sizing: border-box;\r\n  min-height: 48px;\r\n  color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n  cursor: pointer;\r\n\r\n  &:hover {\r\n    color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n    z-index: ${Z_INDEXES.hover};\r\n  }\r\n\r\n  &:focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:active {\r\n    color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n    z-index: ${Z_INDEXES.active};\r\n  }\r\n`;\r\n\r\nexport const ContentAccordionItemHeaderIcon = styled.div`\r\n  width: 24px;\r\n  height: 24px;\r\n\r\n  svg {\r\n    width: 24px;\r\n    height: 24px;\r\n  }\r\n`;\r\n\r\nexport const ContentAccordionItemHeaderText = styled.div``;\r\n\r\nexport const ContentAccordionItemContent = styled.div`\r\n  display: none;\r\n  flex-direction: column;\r\n`;\r\n\r\nexport const ContentAccordionItemContentHeader = styled.div``;\r\n\r\nexport const ContentAccordionItemContentBody = styled.p``;\r\n\r\nexport const ContentAccordionItemContentFooter = styled.div``;\r\n\r\nexport const ContentAccordionItem = styled.div`\r\n  display: flex;\r\n  flex-direction: column;\r\n  border-top: 1px solid ${props => COLORS.getColor('neutral_100', props.theme)};\r\n\r\n  &.active {\r\n    ${ContentAccordionItemContent} {\r\n      display: flex;\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    ${ContentAccordionItemHeader} {\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n      cursor: not-allowed;\r\n      pointer-events: none;\r\n    }\r\n  }\r\n`;\r\n\r\nexport const ContentAccordionWrapper = styled.div`\r\n  width: 100%;\r\n  position: relative;\r\n\r\n  ${ContentAccordionItem}:last-child {\r\n    border-bottom: 1px solid ${props => COLORS.getColor('neutral_100', props.theme)};\r\n  }\r\n\r\n  &.small {\r\n    min-width: 320px;\r\n    max-width: 528px;\r\n\r\n    ${ContentAccordionItemHeader} {\r\n      gap: 8px;\r\n      padding: 0 8px;\r\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n\r\n    ${ContentAccordionItemContent} {\r\n      padding: 0 8px 16px 40px;\r\n      gap: 8px;\r\n\r\n      ${ContentAccordionItemContentHeader} {\r\n        ${props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('black', props.theme))}\r\n      }\r\n\r\n      ${ContentAccordionItemContentBody} {\r\n        //TODO\r\n      }\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    min-width: 344px;\r\n    max-width: 584px;\r\n\r\n    ${ContentAccordionItemHeader} {\r\n      gap: 12px;\r\n      padding: 0 12px;\r\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n\r\n    ${ContentAccordionItemContent} {\r\n      padding: 8px 12px 24px 48px;\r\n      gap: 12px;\r\n\r\n      ${ContentAccordionItemContentHeader} {\r\n        ${props => ComponentMStyling(ComponentTextStyle.Bold, COLORS.getColor('black', props.theme))}\r\n      }\r\n\r\n      ${ContentAccordionItemContentBody} {\r\n        //TODO\r\n      }\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    min-width: 384px;\r\n    max-width: 656px;\r\n\r\n    ${ContentAccordionItemHeader} {\r\n      gap: 16px;\r\n      padding: 0 16px;\r\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n\r\n    ${ContentAccordionItemContent} {\r\n      padding: 16px 16px 32px 56px;\r\n      gap: 16px;\r\n\r\n      ${ContentAccordionItemContentHeader} {\r\n        ${props => ComponentLStyling(ComponentTextStyle.Bold, COLORS.getColor('black', props.theme))}\r\n      }\r\n\r\n      ${ContentAccordionItemContentBody} {\r\n        //TODO\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nexport interface ContentAccordionItem extends Omit<React.HTMLAttributes<HTMLDivElement>, 'id' | 'onMouseDown' | 'onClick' | 'onKeyDown'> {\r\n  /** Id of the section. Should be unique. */\r\n  id: string;\r\n  /** Title of the section. */\r\n  title: string;\r\n  /** Header that will be shown in the content area of the item.  */\r\n  header?: string;\r\n  /** Body that will be shown in the content area of the item */\r\n  body: any;\r\n  /** Footer that will be shown in the content area of the item */\r\n  footer?: any;\r\n  /** User can not expand the section if it is disabled */\r\n  disabled?: boolean;\r\n  /** Initial state of the item (expanded/collapsed) */\r\n  active?: boolean;\r\n}\r\n\r\nexport interface ContentAccordionProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  /** List of the content items */\r\n  items: ContentAccordionItem[];\r\n  /** Allow keeping multiple content sections open */\r\n  multi?: boolean;\r\n  /** Size of the whole component */\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n  /** Callback that is called when section is collapsed/expanded. */\r\n  onItemStateChanged?: (opened: string[]) => void; \r\n}\r\n\r\n/**\r\n * ContentAccordion component that is capable of displaying multiple collapsable sections with content.\r\n */\r\nexport const ContentAccordion: React.FunctionComponent<ContentAccordionProps> = ({\r\n                                                                                   items,\r\n                                                                                   multi = false,\r\n                                                                                   size = Size.Medium,\r\n                                                                                   className,\r\n                                                                                   onItemStateChanged,\r\n                                                                                   ...rest\r\n                                                                                 }) => {\r\n  const [opened, setOpened] = React.useState<string[]>([]);\r\n\r\n  React.useEffect(() => {\r\n    if (multi) {\r\n      setOpened(items.filter((item) => item.active).map((item) => item.id));\r\n    } else {\r\n      let active = items.find((item) => !!item.active)?.id;\r\n      if (active) {\r\n        setOpened([active]);\r\n      }\r\n    }\r\n  }, [items, multi]);\r\n\r\n  const onItemClick = (item: ContentAccordionItem) => {\r\n    if (item.disabled) return;\r\n    if (opened.includes(item.id)) {\r\n      const newOpened = opened.filter((key) => key !== item.id);\r\n      setOpened(newOpened);\r\n      onItemStateChanged && onItemStateChanged(newOpened);\r\n    } else {\r\n      if (multi) {\r\n        const newOpened = [...opened, item.id];\r\n        setOpened(newOpened);\r\n        onItemStateChanged && onItemStateChanged(newOpened);\r\n      } else {\r\n        const newOpened = [item.id];\r\n        setOpened(newOpened);\r\n        onItemStateChanged && onItemStateChanged(newOpened);\r\n      }\r\n    }\r\n  };\r\n\r\n  const renderItem = (item: ContentAccordionItem) => {\r\n    const {id, title, header, body, footer, disabled, active, ...rest} = item;\r\n    const isActive = opened.includes(id);\r\n\r\n    return (\r\n      <ContentAccordionItem key={id} id={`item_${id}`}\r\n                            className={''.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : '')}>\r\n        <ContentAccordionItemHeader\r\n          role=\"button\"\r\n          id={`headerFor_${id}`}\r\n          aria-expanded={isActive}\r\n          aria-controls={`itemContentFor_${id}`}\r\n          tabIndex={!disabled ? 0 : undefined}\r\n          onMouseDown={defaultOnMouseDownHandler}\r\n          onClick={() => !disabled && onItemClick(item)}\r\n          onKeyDown={(event) => event.key === 'Enter' && onItemClick(item)}\r\n          {...rest}>\r\n          <ContentAccordionItemHeaderIcon>\r\n            {multi ? isActive ? <SystemIcons.Minus aria-hidden=\"true\" /> : <SystemIcons.Plus aria-hidden=\"true\" /> : isActive ?\r\n              <SystemIcons.ChevronDown aria-hidden=\"true\" /> : <SystemIcons.ChevronRight aria-hidden=\"true\" />}\r\n          </ContentAccordionItemHeaderIcon>\r\n          <ContentAccordionItemHeaderText>{title}</ContentAccordionItemHeaderText>\r\n        </ContentAccordionItemHeader>\r\n        <ContentAccordionItemContent id={`itemContentFor_${id}`}>\r\n          {header && <ContentAccordionItemContentHeader>{header}</ContentAccordionItemContentHeader>}\r\n          <ContentAccordionItemContentBody>{body}</ContentAccordionItemContentBody>\r\n          {footer && <ContentAccordionItemContentFooter>{footer}</ContentAccordionItemContentFooter>}\r\n        </ContentAccordionItemContent>\r\n      </ContentAccordionItem>\r\n    );\r\n  };\r\n\r\n  const cls = `${size} ${className ?? ''}`.trim();\r\n\r\n  return <ContentAccordionWrapper className={cls}>\r\n    {items.map((item) => renderItem(item))}\r\n  </ContentAccordionWrapper>;\r\n};\r\n\r\nexport default ContentAccordion;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ContentAccordion.cjs","names":["_react","_interopRequireDefault","require","_styledComponents","_types","_icons","_styles","_common","_jsxRuntime","_excluded","_excluded2","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","default","getOwnPropertyDescriptors","defineProperties","defineProperty","ContentAccordionItemHeader","exports","styled","div","props","COLORS","generateToken","componentType","defaultVariant","theme","state","Z_INDEXES","hover","focusStyles","active","ContentAccordionItemHeaderIcon","ContentAccordionItemHeaderText","ContentAccordionItemContent","ContentAccordionItemContentHeader","ContentAccordionItemContentBody","p","ContentAccordionItemContentFooter","ContentAccordionItem","ContentAccordionWrapper","ComponentSStyling","ComponentTextStyle","Regular","Bold","ComponentMStyling","ComponentLStyling","ContentAccordion","_ref","items","multi","size","Size","Medium","className","onItemStateChanged","rest","_objectWithoutProperties2","opened","setOpened","React","useState","useEffect","item","map","id","find","onItemClick","disabled","includes","newOpened","key","renderItem","title","header","body","footer","isActive","jsxs","concat","children","role","tabIndex","undefined","onMouseDown","defaultOnMouseDownHandler","onClick","onKeyDown","event","jsx","SystemIcons","Minus","Plus","ChevronDown","ChevronRight","cls","trim","propTypes","_propTypes","arrayOf","shape","string","isRequired","any","bool","func","_default"],"sources":["../../src/Accordion/ContentAccordion.tsx"],"sourcesContent":["import React, { ComponentState } from 'react';\r\nimport styled from 'styled-components';\r\nimport {Size} from '../types';\r\nimport {SystemIcons} from '../icons';\r\nimport {\r\n  COLORS,\r\n  ComponentLStyling,\r\n  ComponentMStyling,\r\n  ComponentSStyling,\r\n  ComponentTextStyle,\r\n  focusStyles,\r\n  Z_INDEXES,\r\n} from '../styles';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\n\r\nexport const ContentAccordionItemHeader = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  box-sizing: border-box;\r\n  min-height: 48px;\r\n  color: ${props => COLORS.generateToken({ componentType: 'text', defaultVariant: 'subtle' }, props.theme)};\r\n  cursor: pointer;\r\n\r\n  &:hover {\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', state: 'hover' }, props.theme)};\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', state: 'hover' }, props.theme)};\r\n    z-index: ${Z_INDEXES.hover};\r\n  }\r\n\r\n  &:focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:active {\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', state: 'active' }, props.theme)};\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', state: 'active' }, props.theme)};\r\n    z-index: ${Z_INDEXES.active};\r\n  }\r\n`;\r\n\r\nexport const ContentAccordionItemHeaderIcon = styled.div`\r\n  width: 24px;\r\n  height: 24px;\r\n\r\n  svg {\r\n    width: 24px;\r\n    height: 24px;\r\n  }\r\n`;\r\n\r\nexport const ContentAccordionItemHeaderText = styled.div``;\r\n\r\nexport const ContentAccordionItemContent = styled.div`\r\n  display: none;\r\n  flex-direction: column;\r\n  color: ${props => COLORS.generateToken({ componentType: 'text', defaultVariant: 'default' }, props.theme)};\r\n\r\n`;\r\n\r\nexport const ContentAccordionItemContentHeader = styled.div``;\r\n\r\nexport const ContentAccordionItemContentBody = styled.p``;\r\n\r\nexport const ContentAccordionItemContentFooter = styled.div``;\r\n\r\nexport const ContentAccordionItem = styled.div`\r\n  display: flex;\r\n  flex-direction: column;\r\n  border-top: 1px solid ${props => COLORS.generateToken({ componentType: 'border', defaultVariant: 'subtle' }, props.theme)};\r\n\r\n  &.active {\r\n    ${ContentAccordionItemContent} {\r\n      display: flex;\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    ${ContentAccordionItemHeader} {\r\n      color: ${props => COLORS.generateToken({ componentType: 'text', state: 'disabled' }, props.theme)};\r\n      cursor: not-allowed;\r\n      pointer-events: none;\r\n    }\r\n  }\r\n`;\r\n\r\nexport const ContentAccordionWrapper = styled.div`\r\n  width: 100%;\r\n  position: relative;\r\n\r\n  ${ContentAccordionItem}:last-child {\r\n    border-bottom: 1px solid ${props => COLORS.generateToken({ componentType: 'border', defaultVariant: 'subtle' }, props.theme)};\r\n  }\r\n\r\n  &.small {\r\n    min-width: 320px;\r\n    max-width: 528px;\r\n\r\n    ${ContentAccordionItemHeader} {\r\n      gap: 8px;\r\n      padding: 0 8px;\r\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n\r\n    ${ContentAccordionItemContent} {\r\n      padding: 0 8px 16px 40px;\r\n      gap: 8px;\r\n\r\n      ${ContentAccordionItemContentHeader} {\r\n        ${ComponentSStyling(ComponentTextStyle.Bold, null)}\r\n      }\r\n\r\n      ${ContentAccordionItemContentBody} {\r\n        //TODO\r\n      }\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    min-width: 344px;\r\n    max-width: 584px;\r\n\r\n    ${ContentAccordionItemHeader} {\r\n      gap: 12px;\r\n      padding: 0 12px;\r\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n\r\n    ${ContentAccordionItemContent} {\r\n      padding: 8px 12px 24px 48px;\r\n      gap: 12px;\r\n\r\n      ${ContentAccordionItemContentHeader} {\r\n        ${props => ComponentMStyling(ComponentTextStyle.Bold, null)}\r\n      }\r\n\r\n      ${ContentAccordionItemContentBody} {\r\n        //TODO\r\n      }\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    min-width: 384px;\r\n    max-width: 656px;\r\n\r\n    ${ContentAccordionItemHeader} {\r\n      gap: 16px;\r\n      padding: 0 16px;\r\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n\r\n    ${ContentAccordionItemContent} {\r\n      padding: 16px 16px 32px 56px;\r\n      gap: 16px;\r\n\r\n      ${ContentAccordionItemContentHeader} {\r\n        ${props => ComponentLStyling(ComponentTextStyle.Bold, null)}\r\n      }\r\n\r\n      ${ContentAccordionItemContentBody} {\r\n        //TODO\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nexport interface ContentAccordionItem extends Omit<React.HTMLAttributes<HTMLDivElement>, 'id' | 'onMouseDown' | 'onClick' | 'onKeyDown'> {\r\n  /** Id of the section. Should be unique. */\r\n  id: string;\r\n  /** Title of the section. */\r\n  title: string;\r\n  /** Header that will be shown in the content area of the item.  */\r\n  header?: string;\r\n  /** Body that will be shown in the content area of the item */\r\n  body: any;\r\n  /** Footer that will be shown in the content area of the item */\r\n  footer?: any;\r\n  /** User can not expand the section if it is disabled */\r\n  disabled?: boolean;\r\n  /** Initial state of the item (expanded/collapsed) */\r\n  active?: boolean;\r\n}\r\n\r\nexport interface ContentAccordionProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  /** List of the content items */\r\n  items: ContentAccordionItem[];\r\n  /** Allow keeping multiple content sections open */\r\n  multi?: boolean;\r\n  /** Size of the whole component */\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n  /** Callback that is called when section is collapsed/expanded. */\r\n  onItemStateChanged?: (opened: string[]) => void; \r\n}\r\n\r\n/**\r\n * ContentAccordion component that is capable of displaying multiple collapsable sections with content.\r\n */\r\nexport const ContentAccordion: React.FunctionComponent<ContentAccordionProps> = ({\r\n                                                                                   items,\r\n                                                                                   multi = false,\r\n                                                                                   size = Size.Medium,\r\n                                                                                   className,\r\n                                                                                   onItemStateChanged,\r\n                                                                                   ...rest\r\n                                                                                 }) => {\r\n  const [opened, setOpened] = React.useState<string[]>([]);\r\n\r\n  React.useEffect(() => {\r\n    if (multi) {\r\n      setOpened(items.filter((item) => item.active).map((item) => item.id));\r\n    } else {\r\n      let active = items.find((item) => !!item.active)?.id;\r\n      if (active) {\r\n        setOpened([active]);\r\n      }\r\n    }\r\n  }, [items, multi]);\r\n\r\n  const onItemClick = (item: ContentAccordionItem) => {\r\n    if (item.disabled) return;\r\n    if (opened.includes(item.id)) {\r\n      const newOpened = opened.filter((key) => key !== item.id);\r\n      setOpened(newOpened);\r\n      onItemStateChanged && onItemStateChanged(newOpened);\r\n    } else {\r\n      if (multi) {\r\n        const newOpened = [...opened, item.id];\r\n        setOpened(newOpened);\r\n        onItemStateChanged && onItemStateChanged(newOpened);\r\n      } else {\r\n        const newOpened = [item.id];\r\n        setOpened(newOpened);\r\n        onItemStateChanged && onItemStateChanged(newOpened);\r\n      }\r\n    }\r\n  };\r\n\r\n  const renderItem = (item: ContentAccordionItem) => {\r\n    const {id, title, header, body, footer, disabled, active, ...rest} = item;\r\n    const isActive = opened.includes(id);\r\n\r\n    return (\r\n      <ContentAccordionItem key={id} id={`item_${id}`}\r\n                            className={''.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : '')}>\r\n        <ContentAccordionItemHeader\r\n          role=\"button\"\r\n          id={`headerFor_${id}`}\r\n          aria-expanded={isActive}\r\n          aria-controls={`itemContentFor_${id}`}\r\n          tabIndex={!disabled ? 0 : undefined}\r\n          onMouseDown={defaultOnMouseDownHandler}\r\n          onClick={() => !disabled && onItemClick(item)}\r\n          onKeyDown={(event) => event.key === 'Enter' && onItemClick(item)}\r\n          {...rest}>\r\n          <ContentAccordionItemHeaderIcon>\r\n            {multi ? isActive ? <SystemIcons.Minus aria-hidden=\"true\" /> : <SystemIcons.Plus aria-hidden=\"true\" /> : isActive ?\r\n              <SystemIcons.ChevronDown aria-hidden=\"true\" /> : <SystemIcons.ChevronRight aria-hidden=\"true\" />}\r\n          </ContentAccordionItemHeaderIcon>\r\n          <ContentAccordionItemHeaderText>{title}</ContentAccordionItemHeaderText>\r\n        </ContentAccordionItemHeader>\r\n        <ContentAccordionItemContent id={`itemContentFor_${id}`}>\r\n          {header && <ContentAccordionItemContentHeader>{header}</ContentAccordionItemContentHeader>}\r\n          <ContentAccordionItemContentBody>{body}</ContentAccordionItemContentBody>\r\n          {footer && <ContentAccordionItemContentFooter>{footer}</ContentAccordionItemContentFooter>}\r\n        </ContentAccordionItemContent>\r\n      </ContentAccordionItem>\r\n    );\r\n  };\r\n\r\n  const cls = `${size} ${className ?? ''}`.trim();\r\n\r\n  return <ContentAccordionWrapper className={cls}>\r\n    {items.map((item) => renderItem(item))}\r\n  </ContentAccordionWrapper>;\r\n};\r\n\r\nexport default ContentAccordion;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Accordion/ContentAccordion.js

@@ -17,12 +17,21 @@ export const ContentAccordionItemHeader = styled.div`
   align-items: center;
   box-sizing: border-box;
   min-height: 48px;
-  color: ${props => COLORS.getColor('neutral_600', props.theme)};
+  color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme)};
   cursor: pointer;
 
   &:hover {
-    color: ${props => COLORS.getColor('primary_700', props.theme)};
-    background-color: ${props => COLORS.getColor('primary_20', props.theme)};
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  state: 'hover'
+}, props.theme)};
+    background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'hover'
+}, props.theme)};
     z-index: ${Z_INDEXES.hover};
   }
 
@@ -31,8 +40,14 @@ export const ContentAccordionItemHeader = styled.div`
   }
 
   &:active {
-    color: ${props => COLORS.getColor('primary_800', props.theme)};
-    background-color: ${props => COLORS.getColor('primary_100', props.theme)};
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  state: 'active'
+}, props.theme)};
+    background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'active'
+}, props.theme)};
     z-index: ${Z_INDEXES.active};
   }
 `;
@@ -49,6 +64,11 @@ export const ContentAccordionItemHeaderText = styled.div``;
 export const ContentAccordionItemContent = styled.div`
   display: none;
   flex-direction: column;
+  color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'default'
+}, props.theme)};
+
 `;
 export const ContentAccordionItemContentHeader = styled.div``;
 export const ContentAccordionItemContentBody = styled.p``;
@@ -56,7 +76,10 @@ export const ContentAccordionItemContentFooter = styled.div``;
 export const ContentAccordionItem = styled.div`
   display: flex;
   flex-direction: column;
-  border-top: 1px solid ${props => COLORS.getColor('neutral_100', props.theme)};
+  border-top: 1px solid ${props => COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'subtle'
+}, props.theme)};
 
   &.active {
     ${ContentAccordionItemContent} {
@@ -66,7 +89,10 @@ export const ContentAccordionItem = styled.div`
 
   &.disabled {
     ${ContentAccordionItemHeader} {
-      color: ${props => COLORS.getColor('neutral_300', props.theme)};
+      color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  state: 'disabled'
+}, props.theme)};
       cursor: not-allowed;
       pointer-events: none;
     }
@@ -77,7 +103,10 @@ export const ContentAccordionWrapper = styled.div`
   position: relative;
 
   ${ContentAccordionItem}:last-child {
-    border-bottom: 1px solid ${props => COLORS.getColor('neutral_100', props.theme)};
+    border-bottom: 1px solid ${props => COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'subtle'
+}, props.theme)};
   }
 
   &.small {
@@ -95,7 +124,7 @@ export const ContentAccordionWrapper = styled.div`
       gap: 8px;
 
       ${ContentAccordionItemContentHeader} {
-        ${props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('black', props.theme))}
+        ${ComponentSStyling(ComponentTextStyle.Bold, null)}
       }
 
       ${ContentAccordionItemContentBody} {
@@ -119,7 +148,7 @@ export const ContentAccordionWrapper = styled.div`
       gap: 12px;
 
       ${ContentAccordionItemContentHeader} {
-        ${props => ComponentMStyling(ComponentTextStyle.Bold, COLORS.getColor('black', props.theme))}
+        ${props => ComponentMStyling(ComponentTextStyle.Bold, null)}
       }
 
       ${ContentAccordionItemContentBody} {
@@ -143,7 +172,7 @@ export const ContentAccordionWrapper = styled.div`
       gap: 16px;
 
       ${ContentAccordionItemContentHeader} {
-        ${props => ComponentLStyling(ComponentTextStyle.Bold, COLORS.getColor('black', props.theme))}
+        ${props => ComponentLStyling(ComponentTextStyle.Bold, null)}
       }
 
       ${ContentAccordionItemContentBody} {

package/dist/Accordion/ContentAccordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContentAccordion.js","names":["React","styled","Size","SystemIcons","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","focusStyles","Z_INDEXES","defaultOnMouseDownHandler","jsx","_jsx","jsxs","_jsxs","ContentAccordionItemHeader","div","props","getColor","theme","hover","active","ContentAccordionItemHeaderIcon","ContentAccordionItemHeaderText","ContentAccordionItemContent","ContentAccordionItemContentHeader","ContentAccordionItemContentBody","p","ContentAccordionItemContentFooter","ContentAccordionItem","ContentAccordionWrapper","Regular","Bold","ContentAccordion","_ref","items","multi","size","Medium","className","onItemStateChanged","rest","_objectWithoutProperties","_excluded","opened","setOpened","useState","useEffect","filter","item","map","id","find","onItemClick","disabled","includes","newOpened","key","renderItem","title","header","body","footer","_excluded2","isActive","concat","children","_objectSpread","role","tabIndex","undefined","onMouseDown","onClick","onKeyDown","event","Minus","Plus","ChevronDown","ChevronRight","cls","trim","propTypes","_pt","arrayOf","shape","string","isRequired","any","bool","func"],"sources":["../../src/Accordion/ContentAccordion.tsx"],"sourcesContent":["import React from 'react';\r\nimport styled from 'styled-components';\r\nimport {Size} from '../types';\r\nimport {SystemIcons} from '../icons';\r\nimport {\r\n  COLORS,\r\n  ComponentLStyling,\r\n  ComponentMStyling,\r\n  ComponentSStyling,\r\n  ComponentTextStyle,\r\n  focusStyles,\r\n  Z_INDEXES,\r\n} from '../styles';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\n\r\nexport const ContentAccordionItemHeader = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  box-sizing: border-box;\r\n  min-height: 48px;\r\n  color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n  cursor: pointer;\r\n\r\n  &:hover {\r\n    color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n    z-index: ${Z_INDEXES.hover};\r\n  }\r\n\r\n  &:focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:active {\r\n    color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n    z-index: ${Z_INDEXES.active};\r\n  }\r\n`;\r\n\r\nexport const ContentAccordionItemHeaderIcon = styled.div`\r\n  width: 24px;\r\n  height: 24px;\r\n\r\n  svg {\r\n    width: 24px;\r\n    height: 24px;\r\n  }\r\n`;\r\n\r\nexport const ContentAccordionItemHeaderText = styled.div``;\r\n\r\nexport const ContentAccordionItemContent = styled.div`\r\n  display: none;\r\n  flex-direction: column;\r\n`;\r\n\r\nexport const ContentAccordionItemContentHeader = styled.div``;\r\n\r\nexport const ContentAccordionItemContentBody = styled.p``;\r\n\r\nexport const ContentAccordionItemContentFooter = styled.div``;\r\n\r\nexport const ContentAccordionItem = styled.div`\r\n  display: flex;\r\n  flex-direction: column;\r\n  border-top: 1px solid ${props => COLORS.getColor('neutral_100', props.theme)};\r\n\r\n  &.active {\r\n    ${ContentAccordionItemContent} {\r\n      display: flex;\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    ${ContentAccordionItemHeader} {\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n      cursor: not-allowed;\r\n      pointer-events: none;\r\n    }\r\n  }\r\n`;\r\n\r\nexport const ContentAccordionWrapper = styled.div`\r\n  width: 100%;\r\n  position: relative;\r\n\r\n  ${ContentAccordionItem}:last-child {\r\n    border-bottom: 1px solid ${props => COLORS.getColor('neutral_100', props.theme)};\r\n  }\r\n\r\n  &.small {\r\n    min-width: 320px;\r\n    max-width: 528px;\r\n\r\n    ${ContentAccordionItemHeader} {\r\n      gap: 8px;\r\n      padding: 0 8px;\r\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n\r\n    ${ContentAccordionItemContent} {\r\n      padding: 0 8px 16px 40px;\r\n      gap: 8px;\r\n\r\n      ${ContentAccordionItemContentHeader} {\r\n        ${props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('black', props.theme))}\r\n      }\r\n\r\n      ${ContentAccordionItemContentBody} {\r\n        //TODO\r\n      }\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    min-width: 344px;\r\n    max-width: 584px;\r\n\r\n    ${ContentAccordionItemHeader} {\r\n      gap: 12px;\r\n      padding: 0 12px;\r\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n\r\n    ${ContentAccordionItemContent} {\r\n      padding: 8px 12px 24px 48px;\r\n      gap: 12px;\r\n\r\n      ${ContentAccordionItemContentHeader} {\r\n        ${props => ComponentMStyling(ComponentTextStyle.Bold, COLORS.getColor('black', props.theme))}\r\n      }\r\n\r\n      ${ContentAccordionItemContentBody} {\r\n        //TODO\r\n      }\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    min-width: 384px;\r\n    max-width: 656px;\r\n\r\n    ${ContentAccordionItemHeader} {\r\n      gap: 16px;\r\n      padding: 0 16px;\r\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n\r\n    ${ContentAccordionItemContent} {\r\n      padding: 16px 16px 32px 56px;\r\n      gap: 16px;\r\n\r\n      ${ContentAccordionItemContentHeader} {\r\n        ${props => ComponentLStyling(ComponentTextStyle.Bold, COLORS.getColor('black', props.theme))}\r\n      }\r\n\r\n      ${ContentAccordionItemContentBody} {\r\n        //TODO\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nexport interface ContentAccordionItem extends Omit<React.HTMLAttributes<HTMLDivElement>, 'id' | 'onMouseDown' | 'onClick' | 'onKeyDown'> {\r\n  /** Id of the section. Should be unique. */\r\n  id: string;\r\n  /** Title of the section. */\r\n  title: string;\r\n  /** Header that will be shown in the content area of the item.  */\r\n  header?: string;\r\n  /** Body that will be shown in the content area of the item */\r\n  body: any;\r\n  /** Footer that will be shown in the content area of the item */\r\n  footer?: any;\r\n  /** User can not expand the section if it is disabled */\r\n  disabled?: boolean;\r\n  /** Initial state of the item (expanded/collapsed) */\r\n  active?: boolean;\r\n}\r\n\r\nexport interface ContentAccordionProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  /** List of the content items */\r\n  items: ContentAccordionItem[];\r\n  /** Allow keeping multiple content sections open */\r\n  multi?: boolean;\r\n  /** Size of the whole component */\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n  /** Callback that is called when section is collapsed/expanded. */\r\n  onItemStateChanged?: (opened: string[]) => void; \r\n}\r\n\r\n/**\r\n * ContentAccordion component that is capable of displaying multiple collapsable sections with content.\r\n */\r\nexport const ContentAccordion: React.FunctionComponent<ContentAccordionProps> = ({\r\n                                                                                   items,\r\n                                                                                   multi = false,\r\n                                                                                   size = Size.Medium,\r\n                                                                                   className,\r\n                                                                                   onItemStateChanged,\r\n                                                                                   ...rest\r\n                                                                                 }) => {\r\n  const [opened, setOpened] = React.useState<string[]>([]);\r\n\r\n  React.useEffect(() => {\r\n    if (multi) {\r\n      setOpened(items.filter((item) => item.active).map((item) => item.id));\r\n    } else {\r\n      let active = items.find((item) => !!item.active)?.id;\r\n      if (active) {\r\n        setOpened([active]);\r\n      }\r\n    }\r\n  }, [items, multi]);\r\n\r\n  const onItemClick = (item: ContentAccordionItem) => {\r\n    if (item.disabled) return;\r\n    if (opened.includes(item.id)) {\r\n      const newOpened = opened.filter((key) => key !== item.id);\r\n      setOpened(newOpened);\r\n      onItemStateChanged && onItemStateChanged(newOpened);\r\n    } else {\r\n      if (multi) {\r\n        const newOpened = [...opened, item.id];\r\n        setOpened(newOpened);\r\n        onItemStateChanged && onItemStateChanged(newOpened);\r\n      } else {\r\n        const newOpened = [item.id];\r\n        setOpened(newOpened);\r\n        onItemStateChanged && onItemStateChanged(newOpened);\r\n      }\r\n    }\r\n  };\r\n\r\n  const renderItem = (item: ContentAccordionItem) => {\r\n    const {id, title, header, body, footer, disabled, active, ...rest} = item;\r\n    const isActive = opened.includes(id);\r\n\r\n    return (\r\n      <ContentAccordionItem key={id} id={`item_${id}`}\r\n                            className={''.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : '')}>\r\n        <ContentAccordionItemHeader\r\n          role=\"button\"\r\n          id={`headerFor_${id}`}\r\n          aria-expanded={isActive}\r\n          aria-controls={`itemContentFor_${id}`}\r\n          tabIndex={!disabled ? 0 : undefined}\r\n          onMouseDown={defaultOnMouseDownHandler}\r\n          onClick={() => !disabled && onItemClick(item)}\r\n          onKeyDown={(event) => event.key === 'Enter' && onItemClick(item)}\r\n          {...rest}>\r\n          <ContentAccordionItemHeaderIcon>\r\n            {multi ? isActive ? <SystemIcons.Minus aria-hidden=\"true\" /> : <SystemIcons.Plus aria-hidden=\"true\" /> : isActive ?\r\n              <SystemIcons.ChevronDown aria-hidden=\"true\" /> : <SystemIcons.ChevronRight aria-hidden=\"true\" />}\r\n          </ContentAccordionItemHeaderIcon>\r\n          <ContentAccordionItemHeaderText>{title}</ContentAccordionItemHeaderText>\r\n        </ContentAccordionItemHeader>\r\n        <ContentAccordionItemContent id={`itemContentFor_${id}`}>\r\n          {header && <ContentAccordionItemContentHeader>{header}</ContentAccordionItemContentHeader>}\r\n          <ContentAccordionItemContentBody>{body}</ContentAccordionItemContentBody>\r\n          {footer && <ContentAccordionItemContentFooter>{footer}</ContentAccordionItemContentFooter>}\r\n        </ContentAccordionItemContent>\r\n      </ContentAccordionItem>\r\n    );\r\n  };\r\n\r\n  const cls = `${size} ${className ?? ''}`.trim();\r\n\r\n  return <ContentAccordionWrapper className={cls}>\r\n    {items.map((item) => renderItem(item))}\r\n  </ContentAccordionWrapper>;\r\n};\r\n\r\nexport default ContentAccordion;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ContentAccordion.js","names":["React","styled","Size","SystemIcons","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","focusStyles","Z_INDEXES","defaultOnMouseDownHandler","jsx","_jsx","jsxs","_jsxs","ContentAccordionItemHeader","div","props","generateToken","componentType","defaultVariant","theme","state","hover","active","ContentAccordionItemHeaderIcon","ContentAccordionItemHeaderText","ContentAccordionItemContent","ContentAccordionItemContentHeader","ContentAccordionItemContentBody","p","ContentAccordionItemContentFooter","ContentAccordionItem","ContentAccordionWrapper","Regular","Bold","ContentAccordion","_ref","items","multi","size","Medium","className","onItemStateChanged","rest","_objectWithoutProperties","_excluded","opened","setOpened","useState","useEffect","filter","item","map","id","find","onItemClick","disabled","includes","newOpened","key","renderItem","title","header","body","footer","_excluded2","isActive","concat","children","_objectSpread","role","tabIndex","undefined","onMouseDown","onClick","onKeyDown","event","Minus","Plus","ChevronDown","ChevronRight","cls","trim","propTypes","_pt","arrayOf","shape","string","isRequired","any","bool","func"],"sources":["../../src/Accordion/ContentAccordion.tsx"],"sourcesContent":["import React, { ComponentState } from 'react';\r\nimport styled from 'styled-components';\r\nimport {Size} from '../types';\r\nimport {SystemIcons} from '../icons';\r\nimport {\r\n  COLORS,\r\n  ComponentLStyling,\r\n  ComponentMStyling,\r\n  ComponentSStyling,\r\n  ComponentTextStyle,\r\n  focusStyles,\r\n  Z_INDEXES,\r\n} from '../styles';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\n\r\nexport const ContentAccordionItemHeader = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  box-sizing: border-box;\r\n  min-height: 48px;\r\n  color: ${props => COLORS.generateToken({ componentType: 'text', defaultVariant: 'subtle' }, props.theme)};\r\n  cursor: pointer;\r\n\r\n  &:hover {\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', state: 'hover' }, props.theme)};\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', state: 'hover' }, props.theme)};\r\n    z-index: ${Z_INDEXES.hover};\r\n  }\r\n\r\n  &:focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:active {\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', state: 'active' }, props.theme)};\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', state: 'active' }, props.theme)};\r\n    z-index: ${Z_INDEXES.active};\r\n  }\r\n`;\r\n\r\nexport const ContentAccordionItemHeaderIcon = styled.div`\r\n  width: 24px;\r\n  height: 24px;\r\n\r\n  svg {\r\n    width: 24px;\r\n    height: 24px;\r\n  }\r\n`;\r\n\r\nexport const ContentAccordionItemHeaderText = styled.div``;\r\n\r\nexport const ContentAccordionItemContent = styled.div`\r\n  display: none;\r\n  flex-direction: column;\r\n  color: ${props => COLORS.generateToken({ componentType: 'text', defaultVariant: 'default' }, props.theme)};\r\n\r\n`;\r\n\r\nexport const ContentAccordionItemContentHeader = styled.div``;\r\n\r\nexport const ContentAccordionItemContentBody = styled.p``;\r\n\r\nexport const ContentAccordionItemContentFooter = styled.div``;\r\n\r\nexport const ContentAccordionItem = styled.div`\r\n  display: flex;\r\n  flex-direction: column;\r\n  border-top: 1px solid ${props => COLORS.generateToken({ componentType: 'border', defaultVariant: 'subtle' }, props.theme)};\r\n\r\n  &.active {\r\n    ${ContentAccordionItemContent} {\r\n      display: flex;\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    ${ContentAccordionItemHeader} {\r\n      color: ${props => COLORS.generateToken({ componentType: 'text', state: 'disabled' }, props.theme)};\r\n      cursor: not-allowed;\r\n      pointer-events: none;\r\n    }\r\n  }\r\n`;\r\n\r\nexport const ContentAccordionWrapper = styled.div`\r\n  width: 100%;\r\n  position: relative;\r\n\r\n  ${ContentAccordionItem}:last-child {\r\n    border-bottom: 1px solid ${props => COLORS.generateToken({ componentType: 'border', defaultVariant: 'subtle' }, props.theme)};\r\n  }\r\n\r\n  &.small {\r\n    min-width: 320px;\r\n    max-width: 528px;\r\n\r\n    ${ContentAccordionItemHeader} {\r\n      gap: 8px;\r\n      padding: 0 8px;\r\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n\r\n    ${ContentAccordionItemContent} {\r\n      padding: 0 8px 16px 40px;\r\n      gap: 8px;\r\n\r\n      ${ContentAccordionItemContentHeader} {\r\n        ${ComponentSStyling(ComponentTextStyle.Bold, null)}\r\n      }\r\n\r\n      ${ContentAccordionItemContentBody} {\r\n        //TODO\r\n      }\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    min-width: 344px;\r\n    max-width: 584px;\r\n\r\n    ${ContentAccordionItemHeader} {\r\n      gap: 12px;\r\n      padding: 0 12px;\r\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n\r\n    ${ContentAccordionItemContent} {\r\n      padding: 8px 12px 24px 48px;\r\n      gap: 12px;\r\n\r\n      ${ContentAccordionItemContentHeader} {\r\n        ${props => ComponentMStyling(ComponentTextStyle.Bold, null)}\r\n      }\r\n\r\n      ${ContentAccordionItemContentBody} {\r\n        //TODO\r\n      }\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    min-width: 384px;\r\n    max-width: 656px;\r\n\r\n    ${ContentAccordionItemHeader} {\r\n      gap: 16px;\r\n      padding: 0 16px;\r\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n\r\n    ${ContentAccordionItemContent} {\r\n      padding: 16px 16px 32px 56px;\r\n      gap: 16px;\r\n\r\n      ${ContentAccordionItemContentHeader} {\r\n        ${props => ComponentLStyling(ComponentTextStyle.Bold, null)}\r\n      }\r\n\r\n      ${ContentAccordionItemContentBody} {\r\n        //TODO\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nexport interface ContentAccordionItem extends Omit<React.HTMLAttributes<HTMLDivElement>, 'id' | 'onMouseDown' | 'onClick' | 'onKeyDown'> {\r\n  /** Id of the section. Should be unique. */\r\n  id: string;\r\n  /** Title of the section. */\r\n  title: string;\r\n  /** Header that will be shown in the content area of the item.  */\r\n  header?: string;\r\n  /** Body that will be shown in the content area of the item */\r\n  body: any;\r\n  /** Footer that will be shown in the content area of the item */\r\n  footer?: any;\r\n  /** User can not expand the section if it is disabled */\r\n  disabled?: boolean;\r\n  /** Initial state of the item (expanded/collapsed) */\r\n  active?: boolean;\r\n}\r\n\r\nexport interface ContentAccordionProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  /** List of the content items */\r\n  items: ContentAccordionItem[];\r\n  /** Allow keeping multiple content sections open */\r\n  multi?: boolean;\r\n  /** Size of the whole component */\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n  /** Callback that is called when section is collapsed/expanded. */\r\n  onItemStateChanged?: (opened: string[]) => void; \r\n}\r\n\r\n/**\r\n * ContentAccordion component that is capable of displaying multiple collapsable sections with content.\r\n */\r\nexport const ContentAccordion: React.FunctionComponent<ContentAccordionProps> = ({\r\n                                                                                   items,\r\n                                                                                   multi = false,\r\n                                                                                   size = Size.Medium,\r\n                                                                                   className,\r\n                                                                                   onItemStateChanged,\r\n                                                                                   ...rest\r\n                                                                                 }) => {\r\n  const [opened, setOpened] = React.useState<string[]>([]);\r\n\r\n  React.useEffect(() => {\r\n    if (multi) {\r\n      setOpened(items.filter((item) => item.active).map((item) => item.id));\r\n    } else {\r\n      let active = items.find((item) => !!item.active)?.id;\r\n      if (active) {\r\n        setOpened([active]);\r\n      }\r\n    }\r\n  }, [items, multi]);\r\n\r\n  const onItemClick = (item: ContentAccordionItem) => {\r\n    if (item.disabled) return;\r\n    if (opened.includes(item.id)) {\r\n      const newOpened = opened.filter((key) => key !== item.id);\r\n      setOpened(newOpened);\r\n      onItemStateChanged && onItemStateChanged(newOpened);\r\n    } else {\r\n      if (multi) {\r\n        const newOpened = [...opened, item.id];\r\n        setOpened(newOpened);\r\n        onItemStateChanged && onItemStateChanged(newOpened);\r\n      } else {\r\n        const newOpened = [item.id];\r\n        setOpened(newOpened);\r\n        onItemStateChanged && onItemStateChanged(newOpened);\r\n      }\r\n    }\r\n  };\r\n\r\n  const renderItem = (item: ContentAccordionItem) => {\r\n    const {id, title, header, body, footer, disabled, active, ...rest} = item;\r\n    const isActive = opened.includes(id);\r\n\r\n    return (\r\n      <ContentAccordionItem key={id} id={`item_${id}`}\r\n                            className={''.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : '')}>\r\n        <ContentAccordionItemHeader\r\n          role=\"button\"\r\n          id={`headerFor_${id}`}\r\n          aria-expanded={isActive}\r\n          aria-controls={`itemContentFor_${id}`}\r\n          tabIndex={!disabled ? 0 : undefined}\r\n          onMouseDown={defaultOnMouseDownHandler}\r\n          onClick={() => !disabled && onItemClick(item)}\r\n          onKeyDown={(event) => event.key === 'Enter' && onItemClick(item)}\r\n          {...rest}>\r\n          <ContentAccordionItemHeaderIcon>\r\n            {multi ? isActive ? <SystemIcons.Minus aria-hidden=\"true\" /> : <SystemIcons.Plus aria-hidden=\"true\" /> : isActive ?\r\n              <SystemIcons.ChevronDown aria-hidden=\"true\" /> : <SystemIcons.ChevronRight aria-hidden=\"true\" />}\r\n          </ContentAccordionItemHeaderIcon>\r\n          <ContentAccordionItemHeaderText>{title}</ContentAccordionItemHeaderText>\r\n        </ContentAccordionItemHeader>\r\n        <ContentAccordionItemContent id={`itemContentFor_${id}`}>\r\n          {header && <ContentAccordionItemContentHeader>{header}</ContentAccordionItemContentHeader>}\r\n          <ContentAccordionItemContentBody>{body}</ContentAccordionItemContentBody>\r\n          {footer && <ContentAccordionItemContentFooter>{footer}</ContentAccordionItemContentFooter>}\r\n        </ContentAccordionItemContent>\r\n      </ContentAccordionItem>\r\n    );\r\n  };\r\n\r\n  const cls = `${size} ${className ?? ''}`.trim();\r\n\r\n  return <ContentAccordionWrapper className={cls}>\r\n    {items.map((item) => renderItem(item))}\r\n  </ContentAccordionWrapper>;\r\n};\r\n\r\nexport default ContentAccordion;\r\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,42 @@
+import React from 'react';
+import { render } from '../../test-utils';
+import 'jest-styled-components';
+import { COLORS } from '../../styles';
+import AccordionMenu from '../AccordionMenu';
+
+const accordionItems = [
+  {
+    id: 'test1_id',
+    title: 'Item label with text 1',
+    children: <div>content test1</div>,
+  },
+  {
+    id: 'test2_id',
+    title: 'Item label with text 2',
+    children: <div>content test2</div>,
+  },
+];
+
+describe('<AccordionMenu />', () => {
+  it('Check correct text placed on labels', async () => {
+    const { queryByText } = render(<AccordionMenu items={accordionItems} onSelect={() => {}}></AccordionMenu>);
+    expect(queryByText('Item label with text 1')).toBeDefined();
+    expect(queryByText('Item label with text 2')).toBeDefined();
+    expect(queryByText('content test1')).toBeNull();
+  });
+
+  it('Check item label element color and label', async () => {
+    const { container } = render(<AccordionMenu items={accordionItems} onSelect={() => {}}></AccordionMenu>);
+    const headerItem = container.querySelector('#test2_id');
+    expect(headerItem).toBeDefined();
+    expect(headerItem?.textContent).toContain('Item label with text 2');
+  });
+
+  it('Check expanded item text', async () => {
+    const { container } = render(<AccordionMenu items={accordionItems} onSelect={() => {}} selectedItems={['test1_id']}></AccordionMenu>);
+    const headerItem = container.querySelector('#test1_id');
+    //check item expanded
+    expect(headerItem?.children[1]).toBeDefined();
+    expect(headerItem?.children[1]?.textContent).toContain('content test1');
+  });
+});

package/dist/Accordion/__tests__/ContentAccordion.test.tsx

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