@laerdal/life-react-components 6.0.0-dev.1.full → 6.0.0-dev.12.full

package/dist/SegmentControl/SegmentControl.js

@@ -20,14 +20,20 @@ export const SegmentControlItemContent = styled.div`
   padding: 0 16px;
 
   background-color: transparent;
-  color: ${props => COLORS.getColor('neutral_600', props.theme)};
+  color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme)};
 `;
 export const SegmentControlItemBackground = styled.div`
   flex: 1;
   display: flex;
   flex-direction: row;
   align-items: center;
-  background-color: ${props => COLORS.getColor('neutral_20', props.theme)};
+  background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'subtle'
+}, props.theme)};
   padding: 4px 0px;
 `;
 export const SegmentControlItemWrapper = styled.div`
@@ -47,8 +53,14 @@ export const SegmentControlItemWrapper = styled.div`
     z-index: ${Z_INDEXES.hover};
 
     ${SegmentControlItemContent} {
-      background-color: ${props => COLORS.getColor('primary_100', props.theme)};
-      color: ${props => COLORS.getColor('primary_700', props.theme)};
+      background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'hover'
+}, props.theme)};
+      color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  state: 'hover'
+}, props.theme)};
     }
   }
 
@@ -56,8 +68,14 @@ export const SegmentControlItemWrapper = styled.div`
     z-index: ${Z_INDEXES.active};
 
     ${SegmentControlItemContent} {
-      background-color: ${props => COLORS.getColor('primary_200', props.theme)};
-      color: ${props => COLORS.getColor('primary_800', props.theme)};
+      background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'active'
+}, props.theme)};
+      color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  state: 'active'
+}, props.theme)};
     }
   }
 
@@ -66,7 +84,10 @@ export const SegmentControlItemWrapper = styled.div`
 
     ${SegmentControlItemContent} {
       background-color: transparent;
-      color: ${props => COLORS.getColor('neutral_300', props.theme)};
+      color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  state: 'disabled'
+}, props.theme)};
     }
   }
 
@@ -75,8 +96,15 @@ export const SegmentControlItemWrapper = styled.div`
     pointer-events: none;
 
     ${SegmentControlItemContent} {
-      background-color: ${props => COLORS.getColor('primary_500', props.theme)};
-      color: ${props => COLORS.getColor('white', props.theme)};
+      background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-fill',
+  defaultVariant: 'primary'
+}, props.theme)};
+      color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  isOnFill: true,
+  defaultVariant: 'primary'
+}, props.theme)};
     }
   }
 
@@ -85,8 +113,15 @@ export const SegmentControlItemWrapper = styled.div`
     pointer-events: unset;
     
     ${SegmentControlItemContent} {
-      background-color: ${props => COLORS.getColor('neutral_100', props.theme)};
-      color: ${props => COLORS.getColor('neutral_300', props.theme)};
+      background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-fill',
+  state: 'disabled'
+}, props.theme)};
+      color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  isOnFill: true,
+  state: 'disabled'
+}, props.theme)};
     }
   }
 `;

package/dist/SegmentControl/SegmentControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentControl.js","names":["React","Size","styled","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","focusStyles","Z_INDEXES","defaultOnMouseDownHandler","jsx","_jsx","SegmentControlItemContent","div","props","getColor","theme","SegmentControlItemBackground","SegmentControlItemWrapper","hover","active","SegmentControlWrapper","Bold","SegmentControl","_ref","items","size","Medium","onChange","selected","className","rest","_objectWithoutProperties","_excluded","onKeyPress","e","item","key","document","activeElement","blur","disabled","onClick","_objectSpread","children","map","a","i","content","_excluded2","tabIndex","undefined","onMouseDown","propTypes","_pt","arrayOf","shape","string","isRequired","bool","oneOfType","node","func"],"sources":["../../src/SegmentControl/SegmentControl.tsx"],"sourcesContent":["import React from 'react';\r\nimport {Size} from '../types';\r\nimport styled from 'styled-components';\r\nimport {COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, focusStyles, Z_INDEXES} from '../styles';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\n\r\n\r\nexport const SegmentControlItemContent = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 100%;\r\n  border-radius: 8px;\r\n  padding: 0 16px;\r\n\r\n  background-color: transparent;\r\n  color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n`\r\n\r\nexport const SegmentControlItemBackground = styled.div`\r\n  flex: 1;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  background-color: ${props => COLORS.getColor('neutral_20', props.theme)};\r\n  padding: 4px 0px;\r\n`;\r\n\r\nexport const SegmentControlItemWrapper = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex: 1;\r\n  cursor: pointer;\r\n  min-height: 48px;\r\n\r\n  &:focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:hover {\r\n    z-index: ${Z_INDEXES.hover};\r\n\r\n    ${SegmentControlItemContent} {\r\n      background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n      color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    }\r\n  }\r\n\r\n  &:active {\r\n    z-index: ${Z_INDEXES.active};\r\n\r\n    ${SegmentControlItemContent} {\r\n      background-color: ${props => COLORS.getColor('primary_200', props.theme)};\r\n      color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    ${SegmentControlItemContent} {\r\n      background-color: transparent;\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.selected {\r\n    cursor: default;\r\n    pointer-events: none;\r\n\r\n    ${SegmentControlItemContent} {\r\n      background-color: ${props => COLORS.getColor('primary_500', props.theme)};\r\n      color: ${props => COLORS.getColor('white', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.selected.disabled {\r\n    cursor: not-allowed;\r\n    pointer-events: unset;\r\n    \r\n    ${SegmentControlItemContent} {\r\n      background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\nexport const SegmentControlWrapper = styled.div`\r\n  width: 100%;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n\r\n  ${SegmentControlItemWrapper}:first-of-type {\r\n    ${SegmentControlItemBackground} {\r\n      border-bottom-left-radius: 12px;\r\n      border-top-left-radius: 12px;\r\n      padding-left: 4px;\r\n    }\r\n  }\r\n\r\n  ${SegmentControlItemWrapper}:last-of-type {\r\n    ${SegmentControlItemBackground} {\r\n      border-bottom-right-radius: 12px;\r\n      border-top-right-radius: 12px;\r\n      padding-right: 4px;\r\n    }\r\n  }\r\n\r\n\r\n  &.small {\r\n    ${SegmentControlItemContent} {\r\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\r\n      min-height: 32px;\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    ${SegmentControlItemContent} {\r\n      ${ComponentMStyling(ComponentTextStyle.Bold, null)}\r\n      min-height: 40px;\r\n    }\r\n  }\r\n`;\r\n\r\n\r\nexport interface SegmentControlItem extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'content' | 'onMouseDown' | 'onKeyDown' | 'onClick'> {\r\n  /**\r\n   * Required. The key of the segment control item. This should be unique among all items in the segment control.\r\n   */\r\n  key: string;\r\n\r\n  /**\r\n   * Optional. A boolean indicating whether the segment control item is disabled.\r\n   */\r\n  disabled?: boolean;\r\n\r\n  /**\r\n   * Required. The content of the segment control item. This can be a string or a React node.\r\n   */\r\n  content: React.ReactNode | string;\r\n}\r\n\r\nexport interface SegmentControlProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\r\n  /**\r\n   * Required. An array of SegmentControlItem objects representing the items in the segment control.\r\n   */\r\n  items: SegmentControlItem[];\r\n\r\n  /**\r\n   * Optional. The key of the currently selected item in the segment control. In order to change selected item\r\n   * when user clicks on it, you should update this prop to display item as 'selected'.\r\n   */\r\n  selected: string;\r\n\r\n  /**\r\n   * Required. A function to be called when the selected item in the segment control changes.\r\n   * It should take a string representing the key of the new selected item.\r\n   */\r\n  onChange: (value: string) => void;\r\n\r\n  /**\r\n   * Optional. The size of the segment control. Can be 'Small' or 'Medium'.\r\n   */\r\n  size?: Size.Small | Size.Medium;\r\n}\r\n\r\nconst SegmentControl: React.FunctionComponent<SegmentControlProps> = ({\r\n                                                                        items,\r\n                                                                        size = Size.Medium,\r\n                                                                        onChange,\r\n                                                                        selected,\r\n                                                                        className,\r\n                                                                        ...rest\r\n                                                                      }) => {\r\n  const onKeyPress = (e: React.KeyboardEvent<HTMLDivElement>, item: SegmentControlItem) => {\r\n    if (e.key === 'Enter' || e.key === ' ') {\r\n      //@ts-ignore\r\n      document?.activeElement?.blur();\r\n      !item.disabled && onChange(item.key);\r\n    }\r\n  };\r\n\r\n  const onClick = (e: React.MouseEvent, item: SegmentControlItem) => {\r\n    !item.disabled && onChange(item.key);\r\n  }\r\n\r\n  return (\r\n    <SegmentControlWrapper className={`${size} ${className || ''}`} {...rest}>\r\n      {items.map((a, i) => {\r\n        const {key, disabled, content, className, ...rest} = a;\r\n        return <SegmentControlItemWrapper key={a.key || i}\r\n                                          className={(className || '') + (a.disabled ? 'disabled' : '') + (a.key === selected ? ' selected' : '')}\r\n                                          tabIndex={a.disabled || a.key === selected ? -1 : 0}\r\n                                          onClick={a.disabled ? undefined : (e) => onClick(e, a)}\r\n                                          onMouseDown={defaultOnMouseDownHandler}\r\n                                          onKeyPress={a.disabled ? undefined : (e) => onKeyPress(e, a)}\r\n                                          {...rest}>\r\n          <SegmentControlItemBackground>\r\n            <SegmentControlItemContent>\r\n              {a.content}\r\n            </SegmentControlItemContent>\r\n          </SegmentControlItemBackground>\r\n        </SegmentControlItemWrapper>;\r\n      })\r\n      }\r\n    </SegmentControlWrapper>\r\n  );\r\n};\r\n\r\nexport default SegmentControl;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"SegmentControl.js","names":["React","Size","styled","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","focusStyles","Z_INDEXES","defaultOnMouseDownHandler","jsx","_jsx","SegmentControlItemContent","div","props","generateToken","componentType","defaultVariant","theme","SegmentControlItemBackground","SegmentControlItemWrapper","hover","state","active","isOnFill","SegmentControlWrapper","Bold","SegmentControl","_ref","items","size","Medium","onChange","selected","className","rest","_objectWithoutProperties","_excluded","onKeyPress","e","item","key","document","activeElement","blur","disabled","onClick","_objectSpread","children","map","a","i","content","_excluded2","tabIndex","undefined","onMouseDown","propTypes","_pt","arrayOf","shape","string","isRequired","bool","oneOfType","node","func"],"sources":["../../src/SegmentControl/SegmentControl.tsx"],"sourcesContent":["import React from 'react';\r\nimport {Size} from '../types';\r\nimport styled from 'styled-components';\r\nimport {COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, focusStyles, Z_INDEXES} from '../styles';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\n\r\n\r\nexport const SegmentControlItemContent = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 100%;\r\n  border-radius: 8px;\r\n  padding: 0 16px;\r\n\r\n  background-color: transparent;\r\n  color: ${props => COLORS.generateToken({ componentType: 'text', defaultVariant: 'subtle' }, props.theme)};\r\n`\r\n\r\nexport const SegmentControlItemBackground = styled.div`\r\n  flex: 1;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'subtle' }, props.theme)};\r\n  padding: 4px 0px;\r\n`;\r\n\r\nexport const SegmentControlItemWrapper = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex: 1;\r\n  cursor: pointer;\r\n  min-height: 48px;\r\n\r\n  &:focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:hover {\r\n    z-index: ${Z_INDEXES.hover};\r\n\r\n    ${SegmentControlItemContent} {\r\n      background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', state: 'hover' }, props.theme)};\r\n      color: ${props => COLORS.generateToken({ componentType: 'text', state: 'hover' }, props.theme)};\r\n    }\r\n  }\r\n\r\n  &:active {\r\n    z-index: ${Z_INDEXES.active};\r\n\r\n    ${SegmentControlItemContent} {\r\n      background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', state: 'active' }, props.theme)};\r\n      color: ${props => COLORS.generateToken({ componentType: 'text', state: 'active' }, props.theme)};\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    ${SegmentControlItemContent} {\r\n      background-color: transparent;\r\n      color: ${props => COLORS.generateToken({ componentType: 'text', state: 'disabled' }, props.theme)};\r\n    }\r\n  }\r\n\r\n  &.selected {\r\n    cursor: default;\r\n    pointer-events: none;\r\n\r\n    ${SegmentControlItemContent} {\r\n      background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', defaultVariant: 'primary' }, props.theme)};\r\n      color: ${props => COLORS.generateToken({ componentType: 'text', isOnFill: true, defaultVariant: 'primary' }, props.theme)};\r\n    }\r\n  }\r\n\r\n  &.selected.disabled {\r\n    cursor: not-allowed;\r\n    pointer-events: unset;\r\n    \r\n    ${SegmentControlItemContent} {\r\n      background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', state: 'disabled'}, props.theme)};\r\n      color: ${props => COLORS.generateToken({ componentType: 'text', isOnFill: true, state:'disabled' }, props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\nexport const SegmentControlWrapper = styled.div`\r\n  width: 100%;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n\r\n  ${SegmentControlItemWrapper}:first-of-type {\r\n    ${SegmentControlItemBackground} {\r\n      border-bottom-left-radius: 12px;\r\n      border-top-left-radius: 12px;\r\n      padding-left: 4px;\r\n    }\r\n  }\r\n\r\n  ${SegmentControlItemWrapper}:last-of-type {\r\n    ${SegmentControlItemBackground} {\r\n      border-bottom-right-radius: 12px;\r\n      border-top-right-radius: 12px;\r\n      padding-right: 4px;\r\n    }\r\n  }\r\n\r\n\r\n  &.small {\r\n    ${SegmentControlItemContent} {\r\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\r\n      min-height: 32px;\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    ${SegmentControlItemContent} {\r\n      ${ComponentMStyling(ComponentTextStyle.Bold, null)}\r\n      min-height: 40px;\r\n    }\r\n  }\r\n`;\r\n\r\n\r\nexport interface SegmentControlItem extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'content' | 'onMouseDown' | 'onKeyDown' | 'onClick'> {\r\n  /**\r\n   * Required. The key of the segment control item. This should be unique among all items in the segment control.\r\n   */\r\n  key: string;\r\n\r\n  /**\r\n   * Optional. A boolean indicating whether the segment control item is disabled.\r\n   */\r\n  disabled?: boolean;\r\n\r\n  /**\r\n   * Required. The content of the segment control item. This can be a string or a React node.\r\n   */\r\n  content: React.ReactNode | string;\r\n}\r\n\r\nexport interface SegmentControlProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\r\n  /**\r\n   * Required. An array of SegmentControlItem objects representing the items in the segment control.\r\n   */\r\n  items: SegmentControlItem[];\r\n\r\n  /**\r\n   * Optional. The key of the currently selected item in the segment control. In order to change selected item\r\n   * when user clicks on it, you should update this prop to display item as 'selected'.\r\n   */\r\n  selected: string;\r\n\r\n  /**\r\n   * Required. A function to be called when the selected item in the segment control changes.\r\n   * It should take a string representing the key of the new selected item.\r\n   */\r\n  onChange: (value: string) => void;\r\n\r\n  /**\r\n   * Optional. The size of the segment control. Can be 'Small' or 'Medium'.\r\n   */\r\n  size?: Size.Small | Size.Medium;\r\n}\r\n\r\nconst SegmentControl: React.FunctionComponent<SegmentControlProps> = ({\r\n                                                                        items,\r\n                                                                        size = Size.Medium,\r\n                                                                        onChange,\r\n                                                                        selected,\r\n                                                                        className,\r\n                                                                        ...rest\r\n                                                                      }) => {\r\n  const onKeyPress = (e: React.KeyboardEvent<HTMLDivElement>, item: SegmentControlItem) => {\r\n    if (e.key === 'Enter' || e.key === ' ') {\r\n      //@ts-ignore\r\n      document?.activeElement?.blur();\r\n      !item.disabled && onChange(item.key);\r\n    }\r\n  };\r\n\r\n  const onClick = (e: React.MouseEvent, item: SegmentControlItem) => {\r\n    !item.disabled && onChange(item.key);\r\n  }\r\n\r\n  return (\r\n    <SegmentControlWrapper className={`${size} ${className || ''}`} {...rest}>\r\n      {items.map((a, i) => {\r\n        const {key, disabled, content, className, ...rest} = a;\r\n        return <SegmentControlItemWrapper key={a.key || i}\r\n                                          className={(className || '') + (a.disabled ? 'disabled' : '') + (a.key === selected ? ' selected' : '')}\r\n                                          tabIndex={a.disabled || a.key === selected ? -1 : 0}\r\n                                          onClick={a.disabled ? undefined : (e) => onClick(e, a)}\r\n                                          onMouseDown={defaultOnMouseDownHandler}\r\n                                          onKeyPress={a.disabled ? undefined : (e) => onKeyPress(e, a)}\r\n                                          {...rest}>\r\n          <SegmentControlItemBackground>\r\n            <SegmentControlItemContent>\r\n              {a.content}\r\n            </SegmentControlItemContent>\r\n          </SegmentControlItemBackground>\r\n        </SegmentControlItemWrapper>;\r\n      })\r\n      }\r\n    </SegmentControlWrapper>\r\n  );\r\n};\r\n\r\nexport default SegmentControl;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/SegmentControl/__tests__/SegmentControl.test.tsx

@@ -0,0 +1,145 @@
+import React from 'react';
+import {SegmentControlItemWrapper, SegmentControlWrapper} from '../SegmentControl';
+import {render} from '../../test-utils';
+import {SegmentControl} from '../index';
+import {SystemIcons} from '../../icons';
+import {fireEvent} from '@testing-library/react';
+import { act } from "react";
+
+
+
+
+describe('SegmentControl', () => {
+
+  const items = [
+    {key: 'item1', content: 'Item 1', disabled: false,},
+    {key: 'item2', content: 'Item 2', disabled: false,},
+    {key: 'item3', content: 'Item 3', disabled: false,},
+    {key: 'item4', content: 'Item 4', disabled: false,},
+    {key: 'item5', content: 'Item 5', disabled: false,},
+    {key: 'item6', content: 'Item 6', disabled: true,}
+  ];
+
+  const icons = [
+    {key: 'icon1', content: <SystemIcons.Legend3Star size={'20'}/>, disabled: false,},
+    {key: 'icon2', content: <SystemIcons.Legend4Square size={'20'}/>, disabled: false,},
+    {key: 'icon3', content: <SystemIcons.Legend5Diamond size={'20'}/>, disabled: false,},
+    {key: 'icon4', content: <SystemIcons.Legend6Nabla size={'20'}/>, disabled: false,},
+    {key: 'icon5', content: <SystemIcons.Legend7Pentagon size={'20'}/>, disabled: false,},
+    {key: 'icon6', content: <SystemIcons.Legend8Rectangle size={'20'}/>, disabled: true,}
+  ]
+
+  it('should render a segment control with items', () => {
+    const wrapper = render(
+      <SegmentControl items={items}
+                      selected={items[0].key}
+                      onChange={jest.fn()}/>
+    );
+
+    expect(wrapper.container.querySelectorAll(`${SegmentControlWrapper}`)).toHaveLength(1);
+    expect(wrapper.container.querySelectorAll(`${SegmentControlItemWrapper}`)).toHaveLength(6);
+  });
+
+  it('should render items with correct labels', () => {
+    const wrapper = render(
+      <SegmentControl items={items}
+                      selected={items[0].key}
+                      onChange={jest.fn()}/>
+    );
+
+    for (let item of items) {
+      expect(wrapper.getByText(item.content)).toBeTruthy();
+    }
+  });
+
+  it('should render items with icons', () => {
+    const wrapper = render(
+      <SegmentControl items={icons}
+                      selected={icons[0].key}
+                      onChange={jest.fn()}/>
+    );
+
+    expect(wrapper.container.querySelectorAll(`${SegmentControlWrapper}`)).toHaveLength(1);
+    expect(wrapper.container.querySelectorAll(`${SegmentControlItemWrapper}`)).toHaveLength(6);
+  });
+
+  it('should render correct item as selected', () => {
+    const wrapper = render(
+      <SegmentControl items={items}
+                      selected={items[2].key}
+                      onChange={jest.fn()}/>
+    );
+
+    expect(wrapper.container.querySelectorAll(`${SegmentControlItemWrapper}.selected`)).toHaveLength(1);
+    expect(wrapper.container.querySelectorAll(`${SegmentControlItemWrapper}`)[2].classList).toContain('selected');
+  });
+
+  it('should render correct item as disabled', () => {
+    const wrapper = render(
+      <SegmentControl items={items}
+                      selected={items[2].key}
+                      onChange={jest.fn()}/>
+    );
+
+    expect(wrapper.container.querySelectorAll(`${SegmentControlItemWrapper}.disabled`)).toHaveLength(1);
+    expect(wrapper.container.querySelectorAll(`${SegmentControlItemWrapper}`)[5].classList).toContain('disabled');
+  });
+
+  it('should call on change function on item click', () => {
+    const onChange = jest.fn();
+    const wrapper = render(
+      <SegmentControl items={items}
+                      selected={items[2].key}
+                      onChange={onChange}/>
+    );
+    act(() => {
+      wrapper.getByText(items[0].content).dispatchEvent(new MouseEvent('click', {bubbles: true}));
+    })
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith(items[0].key);
+  });
+
+  it('should call on change function on item key press', () => {
+    const onChange = jest.fn();
+    const wrapper = render(
+      <SegmentControl items={items}
+                      selected={items[2].key}
+                      onChange={onChange}/>
+    );
+    act(() => {
+      fireEvent.keyPress(wrapper.getByText(items[0].content), {key: 'Enter', keyCode: 13, which: 13});
+    })
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith(items[0].key);
+  });
+
+  it('should not call on change function on disabled item click', () => {
+    const onChange = jest.fn();
+    const wrapper = render(
+      <SegmentControl items={items}
+                      selected={items[2].key}
+                      onChange={onChange}/>
+    );
+    act(() => {
+      wrapper.getByText(items[5].content).dispatchEvent(new MouseEvent('click', {bubbles: true}));
+    })
+    expect(onChange).toHaveBeenCalledTimes(0);
+  });
+
+  it('should not call on change function on disabled item key press', () => {
+    const onChange = jest.fn();
+    const wrapper = render(
+      <SegmentControl items={items}
+                      selected={items[2].key}
+                      onChange={onChange}/>
+    );
+    act(() => {
+      fireEvent.keyPress(wrapper.getByText(items[5].content), {key: 'Enter', keyCode: 13, which: 13});
+    })
+
+    expect(onChange).toHaveBeenCalledTimes(0);
+  });
+
+
+});

package/dist/SideMenu/SideMenuHeader.cjs

@@ -37,15 +37,24 @@ const LabelContainer = _styledComponents.default.div`
   margin-left: 8px;
 
   .small & {
-    ${props => (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.getColor('neutral_600', props.theme))}
+    ${props => (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
   }
 
   .medium & {
-    ${props => (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.getColor('neutral_600', props.theme))}
+    ${props => (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
   }
 
   .large & {
-    ${props => (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.getColor('neutral_600', props.theme))}
+    ${props => (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
   }
 `;
 const SideMenuHeader = props => {

package/dist/SideMenu/SideMenuHeader.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SideMenuHeader.cjs","names":["_react","_interopRequireDefault","require","_styledComponents","_styles","_Button","_icons","_jsxRuntime","_excluded","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","default","getOwnPropertyDescriptors","defineProperties","defineProperty","Wrapper","styled","div","LabelContainer","props","ComponentSStyling","ComponentTextStyle","Bold","COLORS","getColor","theme","ComponentMStyling","ComponentLStyling","SideMenuHeader","jsxs","children","header","actions","map","_ref","index","icon","rest","_objectWithoutProperties2","jsx","IconButton","variant","shape","label","action","onClose","style","marginLeft","SystemIcons","Close","exports"],"sources":["../../src/SideMenu/SideMenuHeader.tsx"],"sourcesContent":["import React from 'react';\r\nimport {SideMenuProps} from './types';\r\nimport styled from 'styled-components';\r\nimport {COLORS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle} from '../styles';\r\nimport {IconButton} from '../Button';\r\nimport {SystemIcons} from '../icons';\r\n\r\nconst Wrapper = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  padding: 0 8px;\r\n\r\n  .small & {\r\n    min-height: 48px;\r\n  }\r\n\r\n  .medium & {\r\n    min-height: 56px;\r\n  }\r\n\r\n  .large & {\r\n    min-height: 64px;\r\n  }\r\n`;\r\n\r\nconst LabelContainer = styled.div`\r\n  margin-left: 8px;\r\n\r\n  .small & {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme))}\r\n  }\r\n\r\n  .medium & {\r\n    ${props => ComponentMStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme))}\r\n  }\r\n\r\n  .large & {\r\n    ${props => ComponentLStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme))}\r\n  }\r\n`;\r\n\r\nexport const SideMenuHeader = (props: SideMenuProps) => {\r\n\r\n  return (\r\n    <Wrapper>\r\n      {\r\n        props.header?.actions?.map(({icon, ...rest}, index) =>\r\n          <IconButton key={index} variant={'secondary'} shape={'circular'} {...rest}>\r\n            {icon}\r\n          </IconButton>\r\n        )\r\n      }\r\n      {\r\n        props.header?.label &&\r\n        <LabelContainer>\r\n          {props.header.label}\r\n        </LabelContainer>\r\n      }\r\n      <IconButton action={props.onClose} variant={'secondary'} shape={'circular'} style={{marginLeft: 'auto'}}>\r\n        <SystemIcons.Close/>\r\n      </IconButton>\r\n    </Wrapper>\r\n  )\r\n};\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"SideMenuHeader.cjs","names":["_react","_interopRequireDefault","require","_styledComponents","_styles","_Button","_icons","_jsxRuntime","_excluded","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","default","getOwnPropertyDescriptors","defineProperties","defineProperty","Wrapper","styled","div","LabelContainer","props","ComponentSStyling","ComponentTextStyle","Bold","COLORS","generateToken","componentType","defaultVariant","theme","ComponentMStyling","ComponentLStyling","SideMenuHeader","jsxs","children","header","actions","map","_ref","index","icon","rest","_objectWithoutProperties2","jsx","IconButton","variant","shape","label","action","onClose","style","marginLeft","SystemIcons","Close","exports"],"sources":["../../src/SideMenu/SideMenuHeader.tsx"],"sourcesContent":["import React from 'react';\r\nimport {SideMenuProps} from './types';\r\nimport styled from 'styled-components';\r\nimport {COLORS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle} from '../styles';\r\nimport {IconButton} from '../Button';\r\nimport {SystemIcons} from '../icons';\r\n\r\nconst Wrapper = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  padding: 0 8px;\r\n\r\n  .small & {\r\n    min-height: 48px;\r\n  }\r\n\r\n  .medium & {\r\n    min-height: 56px;\r\n  }\r\n\r\n  .large & {\r\n    min-height: 64px;\r\n  }\r\n`;\r\n\r\nconst LabelContainer = styled.div`\r\n  margin-left: 8px;\r\n\r\n  .small & {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n  }\r\n\r\n  .medium & {\r\n    ${props => ComponentMStyling(ComponentTextStyle.Bold, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n  }\r\n\r\n  .large & {\r\n    ${props => ComponentLStyling(ComponentTextStyle.Bold, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n  }\r\n`;\r\n\r\nexport const SideMenuHeader = (props: SideMenuProps) => {\r\n\r\n  return (\r\n    <Wrapper>\r\n      {\r\n        props.header?.actions?.map(({icon, ...rest}, index) =>\r\n          <IconButton key={index} variant={'secondary'} shape={'circular'} {...rest}>\r\n            {icon}\r\n          </IconButton>\r\n        )\r\n      }\r\n      {\r\n        props.header?.label &&\r\n        <LabelContainer>\r\n          {props.header.label}\r\n        </LabelContainer>\r\n      }\r\n      <IconButton action={props.onClose} variant={'secondary'} shape={'circular'} style={{marginLeft: 'auto'}}>\r\n        <SystemIcons.Close/>\r\n      </IconButton>\r\n    </Wrapper>\r\n  )\r\n};\r\n"],"mappings":"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","ignoreList":[]}

package/dist/SideMenu/SideMenuHeader.js

@@ -30,15 +30,24 @@ const LabelContainer = styled.div`
   margin-left: 8px;
 
   .small & {
-    ${props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme))}
+    ${props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
   }
 
   .medium & {
-    ${props => ComponentMStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme))}
+    ${props => ComponentMStyling(ComponentTextStyle.Bold, COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
   }
 
   .large & {
-    ${props => ComponentLStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme))}
+    ${props => ComponentLStyling(ComponentTextStyle.Bold, COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
   }
 `;
 export const SideMenuHeader = props => {

package/dist/SideMenu/SideMenuHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"SideMenuHeader.js","names":["React","styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","IconButton","SystemIcons","jsx","_jsx","jsxs","_jsxs","Wrapper","div","LabelContainer","props","Bold","getColor","theme","SideMenuHeader","children","header","actions","map","_ref","index","icon","rest","_objectWithoutProperties","_excluded","_objectSpread","variant","shape","label","action","onClose","style","marginLeft","Close"],"sources":["../../src/SideMenu/SideMenuHeader.tsx"],"sourcesContent":["import React from 'react';\r\nimport {SideMenuProps} from './types';\r\nimport styled from 'styled-components';\r\nimport {COLORS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle} from '../styles';\r\nimport {IconButton} from '../Button';\r\nimport {SystemIcons} from '../icons';\r\n\r\nconst Wrapper = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  padding: 0 8px;\r\n\r\n  .small & {\r\n    min-height: 48px;\r\n  }\r\n\r\n  .medium & {\r\n    min-height: 56px;\r\n  }\r\n\r\n  .large & {\r\n    min-height: 64px;\r\n  }\r\n`;\r\n\r\nconst LabelContainer = styled.div`\r\n  margin-left: 8px;\r\n\r\n  .small & {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme))}\r\n  }\r\n\r\n  .medium & {\r\n    ${props => ComponentMStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme))}\r\n  }\r\n\r\n  .large & {\r\n    ${props => ComponentLStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme))}\r\n  }\r\n`;\r\n\r\nexport const SideMenuHeader = (props: SideMenuProps) => {\r\n\r\n  return (\r\n    <Wrapper>\r\n      {\r\n        props.header?.actions?.map(({icon, ...rest}, index) =>\r\n          <IconButton key={index} variant={'secondary'} shape={'circular'} {...rest}>\r\n            {icon}\r\n          </IconButton>\r\n        )\r\n      }\r\n      {\r\n        props.header?.label &&\r\n        <LabelContainer>\r\n          {props.header.label}\r\n        </LabelContainer>\r\n      }\r\n      <IconButton action={props.onClose} variant={'secondary'} shape={'circular'} style={{marginLeft: 'auto'}}>\r\n        <SystemIcons.Close/>\r\n      </IconButton>\r\n    </Wrapper>\r\n  )\r\n};\r\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,MAAM,EAAEC,iBAAiB,EAAEC,iBAAiB,EAAEC,iBAAiB,EAAEC,kBAAkB,QAAO,WAAW;AAC7G,SAAQC,UAAU,QAAO,WAAW;AACpC,SAAQC,WAAW,QAAO,UAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAErC,MAAMC,OAAO,GAAGZ,MAAM,CAACa,GAAG;AAC1B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,MAAMC,cAAc,GAAGd,MAAM,CAACa,GAAG;AACjC;AACA;AACA;AACA,MAAME,KAAK,IAAIX,iBAAiB,CAACC,kBAAkB,CAACW,IAAI,EAAEf,MAAM,CAACgB,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC,CAAC;AACtG;AACA;AACA;AACA,MAAMH,KAAK,IAAIZ,iBAAiB,CAACE,kBAAkB,CAACW,IAAI,EAAEf,MAAM,CAACgB,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC,CAAC;AACtG;AACA;AACA;AACA,MAAMH,KAAK,IAAIb,iBAAiB,CAACG,kBAAkB,CAACW,IAAI,EAAEf,MAAM,CAACgB,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC,CAAC;AACtG;AACA,CAAC;AAED,OAAO,MAAMC,cAAc,GAAIJ,KAAoB,IAAK;EAEtD,oBACEJ,KAAA,CAACC,OAAO;IAAAQ,QAAA,GAEJL,KAAK,CAACM,MAAM,EAAEC,OAAO,EAAEC,GAAG,CAAC,CAAAC,IAAA,EAAkBC,KAAK;MAAA,IAAtB;UAACC;QAAa,CAAC,GAAAF,IAAA;QAALG,IAAI,GAAAC,wBAAA,CAAAJ,IAAA,EAAAK,SAAA;MAAA,oBACxCpB,IAAA,CAACH,UAAU,EAAAwB,aAAA,CAAAA,aAAA;QAAaC,OAAO,EAAE,WAAY;QAACC,KAAK,EAAE;MAAW,GAAKL,IAAI;QAAAP,QAAA,EACtEM;MAAI,IADUD,KAEL,CAAC;IAAA,CACf,CAAC,EAGDV,KAAK,CAACM,MAAM,EAAEY,KAAK,iBACnBxB,IAAA,CAACK,cAAc;MAAAM,QAAA,EACZL,KAAK,CAACM,MAAM,CAACY;IAAK,CACL,CAAC,eAEnBxB,IAAA,CAACH,UAAU;MAAC4B,MAAM,EAAEnB,KAAK,CAACoB,OAAQ;MAACJ,OAAO,EAAE,WAAY;MAACC,KAAK,EAAE,UAAW;MAACI,KAAK,EAAE;QAACC,UAAU,EAAE;MAAM,CAAE;MAAAjB,QAAA,eACtGX,IAAA,CAACF,WAAW,CAAC+B,KAAK,IAAC;IAAC,CACV,CAAC;EAAA,CACN,CAAC;AAEd,CAAC","ignoreList":[]}
+{"version":3,"file":"SideMenuHeader.js","names":["React","styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","IconButton","SystemIcons","jsx","_jsx","jsxs","_jsxs","Wrapper","div","LabelContainer","props","Bold","generateToken","componentType","defaultVariant","theme","SideMenuHeader","children","header","actions","map","_ref","index","icon","rest","_objectWithoutProperties","_excluded","_objectSpread","variant","shape","label","action","onClose","style","marginLeft","Close"],"sources":["../../src/SideMenu/SideMenuHeader.tsx"],"sourcesContent":["import React from 'react';\r\nimport {SideMenuProps} from './types';\r\nimport styled from 'styled-components';\r\nimport {COLORS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle} from '../styles';\r\nimport {IconButton} from '../Button';\r\nimport {SystemIcons} from '../icons';\r\n\r\nconst Wrapper = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  padding: 0 8px;\r\n\r\n  .small & {\r\n    min-height: 48px;\r\n  }\r\n\r\n  .medium & {\r\n    min-height: 56px;\r\n  }\r\n\r\n  .large & {\r\n    min-height: 64px;\r\n  }\r\n`;\r\n\r\nconst LabelContainer = styled.div`\r\n  margin-left: 8px;\r\n\r\n  .small & {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n  }\r\n\r\n  .medium & {\r\n    ${props => ComponentMStyling(ComponentTextStyle.Bold, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n  }\r\n\r\n  .large & {\r\n    ${props => ComponentLStyling(ComponentTextStyle.Bold, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n  }\r\n`;\r\n\r\nexport const SideMenuHeader = (props: SideMenuProps) => {\r\n\r\n  return (\r\n    <Wrapper>\r\n      {\r\n        props.header?.actions?.map(({icon, ...rest}, index) =>\r\n          <IconButton key={index} variant={'secondary'} shape={'circular'} {...rest}>\r\n            {icon}\r\n          </IconButton>\r\n        )\r\n      }\r\n      {\r\n        props.header?.label &&\r\n        <LabelContainer>\r\n          {props.header.label}\r\n        </LabelContainer>\r\n      }\r\n      <IconButton action={props.onClose} variant={'secondary'} shape={'circular'} style={{marginLeft: 'auto'}}>\r\n        <SystemIcons.Close/>\r\n      </IconButton>\r\n    </Wrapper>\r\n  )\r\n};\r\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,MAAM,EAAEC,iBAAiB,EAAEC,iBAAiB,EAAEC,iBAAiB,EAAEC,kBAAkB,QAAO,WAAW;AAC7G,SAAQC,UAAU,QAAO,WAAW;AACpC,SAAQC,WAAW,QAAO,UAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAErC,MAAMC,OAAO,GAAGZ,MAAM,CAACa,GAAG;AAC1B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,MAAMC,cAAc,GAAGd,MAAM,CAACa,GAAG;AACjC;AACA;AACA;AACA,MAAME,KAAK,IAAIX,iBAAiB,CAACC,kBAAkB,CAACW,IAAI,EAAEf,MAAM,CAACgB,aAAa,CAAC;EAACC,aAAa,EAAC,MAAM;EAACC,cAAc,EAAC;AAAQ,CAAC,EAAEJ,KAAK,CAACK,KAAK,CAAC,CAAC;AAC5I;AACA;AACA;AACA,MAAML,KAAK,IAAIZ,iBAAiB,CAACE,kBAAkB,CAACW,IAAI,EAAEf,MAAM,CAACgB,aAAa,CAAC;EAACC,aAAa,EAAC,MAAM;EAACC,cAAc,EAAC;AAAQ,CAAC,EAAEJ,KAAK,CAACK,KAAK,CAAC,CAAC;AAC5I;AACA;AACA;AACA,MAAML,KAAK,IAAIb,iBAAiB,CAACG,kBAAkB,CAACW,IAAI,EAAEf,MAAM,CAACgB,aAAa,CAAC;EAACC,aAAa,EAAC,MAAM;EAACC,cAAc,EAAC;AAAQ,CAAC,EAAEJ,KAAK,CAACK,KAAK,CAAC,CAAC;AAC5I;AACA,CAAC;AAED,OAAO,MAAMC,cAAc,GAAIN,KAAoB,IAAK;EAEtD,oBACEJ,KAAA,CAACC,OAAO;IAAAU,QAAA,GAEJP,KAAK,CAACQ,MAAM,EAAEC,OAAO,EAAEC,GAAG,CAAC,CAAAC,IAAA,EAAkBC,KAAK;MAAA,IAAtB;UAACC;QAAa,CAAC,GAAAF,IAAA;QAALG,IAAI,GAAAC,wBAAA,CAAAJ,IAAA,EAAAK,SAAA;MAAA,oBACxCtB,IAAA,CAACH,UAAU,EAAA0B,aAAA,CAAAA,aAAA;QAAaC,OAAO,EAAE,WAAY;QAACC,KAAK,EAAE;MAAW,GAAKL,IAAI;QAAAP,QAAA,EACtEM;MAAI,IADUD,KAEL,CAAC;IAAA,CACf,CAAC,EAGDZ,KAAK,CAACQ,MAAM,EAAEY,KAAK,iBACnB1B,IAAA,CAACK,cAAc;MAAAQ,QAAA,EACZP,KAAK,CAACQ,MAAM,CAACY;IAAK,CACL,CAAC,eAEnB1B,IAAA,CAACH,UAAU;MAAC8B,MAAM,EAAErB,KAAK,CAACsB,OAAQ;MAACJ,OAAO,EAAE,WAAY;MAACC,KAAK,EAAE,UAAW;MAACI,KAAK,EAAE;QAACC,UAAU,EAAE;MAAM,CAAE;MAAAjB,QAAA,eACtGb,IAAA,CAACF,WAAW,CAACiC,KAAK,IAAC;IAAC,CACV,CAAC;EAAA,CACN,CAAC;AAEd,CAAC","ignoreList":[]}

package/dist/SideMenu/__tests__/SideMenu.test.tsx

@@ -0,0 +1,99 @@
+import * as React from 'react';
+import {SideMenu} from '../index';
+import {act, render} from '../../test-utils';
+
+
+
+describe('SideMenu', () => {
+
+  it('should render content', () => {
+    const wrapper = render(<SideMenu onClose={jest.fn()}>content</SideMenu>);
+
+    expect(wrapper.getByText('content')).toBeDefined();
+  });
+
+  it('should call onClose when close button is clicked', () => {
+    const onClose = jest.fn();
+    const wrapper = render(<SideMenu onClose={onClose}>content</SideMenu>);
+
+    act(() => {
+      wrapper.getByRole('button').click();
+    });
+
+    expect(onClose).toHaveBeenCalled();
+  });
+
+
+  it('should call onClose when close button is clicked', () => {
+    const onClose = jest.fn();
+    const wrapper = render(<SideMenu onClose={onClose}>content</SideMenu>);
+
+    act(() => {
+      wrapper.getByRole('button').click();
+    });
+
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it('should render label', () => {
+    const onClose = jest.fn();
+    const wrapper = render(<SideMenu onClose={onClose} header={{label: 'label'}}>content</SideMenu>);
+
+    expect(wrapper.getByText('label')).toBeDefined();
+  });
+
+  it('should render header icon buttons ', () => {
+    const onClose = jest.fn();
+    const wrapper = render(<SideMenu onClose={onClose} header={{
+      label: 'label', actions: [{
+        action: () => {
+        }, icon: <></>
+      }, {
+        action: () => {
+        }, icon: <></>
+      }]
+    }}>content</SideMenu>);
+
+    expect(wrapper.getAllByRole('button')).toHaveLength(3);
+  });
+
+  it('should render footer note', () => {
+    const onClose = jest.fn();
+    const wrapper = render(<SideMenu onClose={onClose} footer={{note: 'note'}}>content</SideMenu>);
+
+    expect(wrapper.getByText('note')).toBeDefined();
+  });
+
+  it('should render footer buttons', () => {
+    const onClose = jest.fn();
+    const wrapper = render(<SideMenu onClose={onClose} footer={{
+      buttons: [{
+        variant: 'primary', label: 'label', onClick: () => {
+        }
+      }]
+    }}>content</SideMenu>);
+
+    expect(wrapper.getAllByRole('button')).toHaveLength(2);
+  });
+
+  it('should render footer menu items', () => {
+    const onClose = jest.fn();
+    const wrapper = render(<SideMenu onClose={onClose} footer={{
+      items: [{
+        id: '1',
+        active: false,
+        onClickHandler: () => {},
+        item: {displayLabel: 'label 1', value: '1'}
+      }, {
+        id: '2',
+        active: false,
+        onClickHandler: () => {},
+        item: {displayLabel: 'label 2', value: '2'}
+      }]
+    }}>content</SideMenu>);
+
+    expect(wrapper.getByText('label 1')).toBeDefined();
+    expect(wrapper.getByText('label 2')).toBeDefined();
+  });
+
+});

package/dist/Switcher/SwitcherMenuItem.cjs

@@ -20,7 +20,10 @@ const StyledSwitcherItem = _styledComponents.default.div`
   text-align: center;
   position: relative;
 
-  ${props => (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('neutral_600', props.theme))}
+  ${props => (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
 
   text-decoration: none;
 

package/dist/Switcher/SwitcherMenuItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SwitcherMenuItem.cjs","names":["_react","_interopRequireDefault","require","_styledComponents","_styles","_common","_jsxRuntime","StyledSwitcherItem","styled","div","props","ComponentMStyling","ComponentTextStyle","Regular","COLORS","getColor","theme","Z_INDEXES","active","hover","focusStyles","A","a","SwitcherMenuItem","_ref","label","url","disabled","icon","as","testId","jsxs","onClick","window","location","href","onMouseDown","defaultOnMouseDownHandler","target","className","children","React","cloneElement","size","color","propTypes","_propTypes","default","string","isRequired","bool","any","_default","exports"],"sources":["../../src/Switcher/SwitcherMenuItem.tsx"],"sourcesContent":["import React from 'react';\r\nimport styled from 'styled-components';\r\nimport {Z_INDEXES, ComponentMStyling, COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\n\r\nconst StyledSwitcherItem = styled.div`\r\n  padding: 16px 25px;\r\n  margin: 0 2px;\r\n\r\n  display: flex;\r\n  align-items: center;\r\n  text-align: center;\r\n  position: relative;\r\n\r\n  ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\r\n\r\n  text-decoration: none;\r\n\r\n  svg {\r\n    margin-right: 16px;\r\n  }\r\n\r\n  &:after {\r\n    content: '';\r\n    display: block;\r\n    position: absolute;\r\n    left: 4px;\r\n    top: 4px;\r\n    bottom: 4px;\r\n    width: 4px;\r\n    background-color: transparent;\r\n    border-radius: 2px;\r\n  }\r\n\r\n  &.active:not(.disabled) {\r\n    z-index: ${Z_INDEXES.active};\r\n    font-weight: bold;\r\n    color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n\r\n    &:after {\r\n      background-color: ${props => COLORS.getColor('primary_500', props.theme)};\r\n    }\r\n\r\n    svg path {\r\n      fill: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n  }\r\n\r\n  &:hover:not(.disabled) {\r\n    z-index: ${Z_INDEXES.hover};\r\n    color: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n\r\n    svg path {\r\n      fill: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    }\r\n  }\r\n\r\n  &:active:not(.disabled) {\r\n    z-index: ${Z_INDEXES.active};\r\n    color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n\r\n    &:after {\r\n      background-color: ${props => COLORS.getColor('primary_500', props.theme)};\r\n    }\r\n\r\n    svg path {\r\n      fill: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n  }\r\n\r\n  &:focus:not(.disabled) {\r\n    ${focusStyles};\r\n    \r\n    outline-offset: -2px;\r\n  }\r\n`;\r\n\r\nconst A = styled.a``;\r\n\r\nexport interface SwitcherNavItem {\r\n  label: string;\r\n  url: string;\r\n  disabled?: boolean;\r\n  icon?: any;\r\n  as?: any;\r\n  testId?: string;\r\n}\r\n\r\nconst SwitcherMenuItem = ({label, url, disabled, icon, as = A, testId}: SwitcherNavItem) => (\r\n  <StyledSwitcherItem\r\n    onClick={() => (window.location.href = url || '')}\r\n    as={as}\r\n    onMouseDown={defaultOnMouseDownHandler}\r\n    href={url || ''}\r\n    target=\"_parent\"\r\n    key={label}\r\n    className={disabled ? 'disabled' : ''}\r\n    data-testid={testId}>\r\n    {!!icon && React.cloneElement(icon, {size: '24px', color: '#666666'})}\r\n    {label}\r\n  </StyledSwitcherItem>\r\n);\r\n\r\nexport default SwitcherMenuItem;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"SwitcherMenuItem.cjs","names":["_react","_interopRequireDefault","require","_styledComponents","_styles","_common","_jsxRuntime","StyledSwitcherItem","styled","div","props","ComponentMStyling","ComponentTextStyle","Regular","COLORS","generateToken","componentType","defaultVariant","theme","Z_INDEXES","active","getColor","hover","focusStyles","A","a","SwitcherMenuItem","_ref","label","url","disabled","icon","as","testId","jsxs","onClick","window","location","href","onMouseDown","defaultOnMouseDownHandler","target","className","children","React","cloneElement","size","color","propTypes","_propTypes","default","string","isRequired","bool","any","_default","exports"],"sources":["../../src/Switcher/SwitcherMenuItem.tsx"],"sourcesContent":["import React from 'react';\r\nimport styled from 'styled-components';\r\nimport {Z_INDEXES, ComponentMStyling, COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\n\r\nconst StyledSwitcherItem = styled.div`\r\n  padding: 16px 25px;\r\n  margin: 0 2px;\r\n\r\n  display: flex;\r\n  align-items: center;\r\n  text-align: center;\r\n  position: relative;\r\n\r\n  ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n\r\n  text-decoration: none;\r\n\r\n  svg {\r\n    margin-right: 16px;\r\n  }\r\n\r\n  &:after {\r\n    content: '';\r\n    display: block;\r\n    position: absolute;\r\n    left: 4px;\r\n    top: 4px;\r\n    bottom: 4px;\r\n    width: 4px;\r\n    background-color: transparent;\r\n    border-radius: 2px;\r\n  }\r\n\r\n  &.active:not(.disabled) {\r\n    z-index: ${Z_INDEXES.active};\r\n    font-weight: bold;\r\n    color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n\r\n    &:after {\r\n      background-color: ${props => COLORS.getColor('primary_500', props.theme)};\r\n    }\r\n\r\n    svg path {\r\n      fill: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n  }\r\n\r\n  &:hover:not(.disabled) {\r\n    z-index: ${Z_INDEXES.hover};\r\n    color: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n\r\n    svg path {\r\n      fill: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    }\r\n  }\r\n\r\n  &:active:not(.disabled) {\r\n    z-index: ${Z_INDEXES.active};\r\n    color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n\r\n    &:after {\r\n      background-color: ${props => COLORS.getColor('primary_500', props.theme)};\r\n    }\r\n\r\n    svg path {\r\n      fill: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n  }\r\n\r\n  &:focus:not(.disabled) {\r\n    ${focusStyles};\r\n    \r\n    outline-offset: -2px;\r\n  }\r\n`;\r\n\r\nconst A = styled.a``;\r\n\r\nexport interface SwitcherNavItem {\r\n  label: string;\r\n  url: string;\r\n  disabled?: boolean;\r\n  icon?: any;\r\n  as?: any;\r\n  testId?: string;\r\n}\r\n\r\nconst SwitcherMenuItem = ({label, url, disabled, icon, as = A, testId}: SwitcherNavItem) => (\r\n  <StyledSwitcherItem\r\n    onClick={() => (window.location.href = url || '')}\r\n    as={as}\r\n    onMouseDown={defaultOnMouseDownHandler}\r\n    href={url || ''}\r\n    target=\"_parent\"\r\n    key={label}\r\n    className={disabled ? 'disabled' : ''}\r\n    data-testid={testId}>\r\n    {!!icon && React.cloneElement(icon, {size: '24px', color: '#666666'})}\r\n    {label}\r\n  </StyledSwitcherItem>\r\n);\r\n\r\nexport default SwitcherMenuItem;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Switcher/SwitcherMenuItem.js

@@ -13,7 +13,10 @@ const StyledSwitcherItem = styled.div`
   text-align: center;
   position: relative;
 
-  ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}
+  ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
 
   text-decoration: none;
 

package/dist/Switcher/SwitcherMenuItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"SwitcherMenuItem.js","names":["React","styled","Z_INDEXES","ComponentMStyling","COLORS","ComponentTextStyle","focusStyles","defaultOnMouseDownHandler","jsxs","_jsxs","StyledSwitcherItem","div","props","Regular","getColor","theme","active","hover","A","a","SwitcherMenuItem","_ref","label","url","disabled","icon","as","testId","onClick","window","location","href","onMouseDown","target","className","children","cloneElement","size","color","propTypes","_pt","string","isRequired","bool","any"],"sources":["../../src/Switcher/SwitcherMenuItem.tsx"],"sourcesContent":["import React from 'react';\r\nimport styled from 'styled-components';\r\nimport {Z_INDEXES, ComponentMStyling, COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\n\r\nconst StyledSwitcherItem = styled.div`\r\n  padding: 16px 25px;\r\n  margin: 0 2px;\r\n\r\n  display: flex;\r\n  align-items: center;\r\n  text-align: center;\r\n  position: relative;\r\n\r\n  ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\r\n\r\n  text-decoration: none;\r\n\r\n  svg {\r\n    margin-right: 16px;\r\n  }\r\n\r\n  &:after {\r\n    content: '';\r\n    display: block;\r\n    position: absolute;\r\n    left: 4px;\r\n    top: 4px;\r\n    bottom: 4px;\r\n    width: 4px;\r\n    background-color: transparent;\r\n    border-radius: 2px;\r\n  }\r\n\r\n  &.active:not(.disabled) {\r\n    z-index: ${Z_INDEXES.active};\r\n    font-weight: bold;\r\n    color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n\r\n    &:after {\r\n      background-color: ${props => COLORS.getColor('primary_500', props.theme)};\r\n    }\r\n\r\n    svg path {\r\n      fill: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n  }\r\n\r\n  &:hover:not(.disabled) {\r\n    z-index: ${Z_INDEXES.hover};\r\n    color: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n\r\n    svg path {\r\n      fill: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    }\r\n  }\r\n\r\n  &:active:not(.disabled) {\r\n    z-index: ${Z_INDEXES.active};\r\n    color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n\r\n    &:after {\r\n      background-color: ${props => COLORS.getColor('primary_500', props.theme)};\r\n    }\r\n\r\n    svg path {\r\n      fill: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n  }\r\n\r\n  &:focus:not(.disabled) {\r\n    ${focusStyles};\r\n    \r\n    outline-offset: -2px;\r\n  }\r\n`;\r\n\r\nconst A = styled.a``;\r\n\r\nexport interface SwitcherNavItem {\r\n  label: string;\r\n  url: string;\r\n  disabled?: boolean;\r\n  icon?: any;\r\n  as?: any;\r\n  testId?: string;\r\n}\r\n\r\nconst SwitcherMenuItem = ({label, url, disabled, icon, as = A, testId}: SwitcherNavItem) => (\r\n  <StyledSwitcherItem\r\n    onClick={() => (window.location.href = url || '')}\r\n    as={as}\r\n    onMouseDown={defaultOnMouseDownHandler}\r\n    href={url || ''}\r\n    target=\"_parent\"\r\n    key={label}\r\n    className={disabled ? 'disabled' : ''}\r\n    data-testid={testId}>\r\n    {!!icon && React.cloneElement(icon, {size: '24px', color: '#666666'})}\r\n    {label}\r\n  </StyledSwitcherItem>\r\n);\r\n\r\nexport default SwitcherMenuItem;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"SwitcherMenuItem.js","names":["React","styled","Z_INDEXES","ComponentMStyling","COLORS","ComponentTextStyle","focusStyles","defaultOnMouseDownHandler","jsxs","_jsxs","StyledSwitcherItem","div","props","Regular","generateToken","componentType","defaultVariant","theme","active","getColor","hover","A","a","SwitcherMenuItem","_ref","label","url","disabled","icon","as","testId","onClick","window","location","href","onMouseDown","target","className","children","cloneElement","size","color","propTypes","_pt","string","isRequired","bool","any"],"sources":["../../src/Switcher/SwitcherMenuItem.tsx"],"sourcesContent":["import React from 'react';\r\nimport styled from 'styled-components';\r\nimport {Z_INDEXES, ComponentMStyling, COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\n\r\nconst StyledSwitcherItem = styled.div`\r\n  padding: 16px 25px;\r\n  margin: 0 2px;\r\n\r\n  display: flex;\r\n  align-items: center;\r\n  text-align: center;\r\n  position: relative;\r\n\r\n  ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n\r\n  text-decoration: none;\r\n\r\n  svg {\r\n    margin-right: 16px;\r\n  }\r\n\r\n  &:after {\r\n    content: '';\r\n    display: block;\r\n    position: absolute;\r\n    left: 4px;\r\n    top: 4px;\r\n    bottom: 4px;\r\n    width: 4px;\r\n    background-color: transparent;\r\n    border-radius: 2px;\r\n  }\r\n\r\n  &.active:not(.disabled) {\r\n    z-index: ${Z_INDEXES.active};\r\n    font-weight: bold;\r\n    color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n\r\n    &:after {\r\n      background-color: ${props => COLORS.getColor('primary_500', props.theme)};\r\n    }\r\n\r\n    svg path {\r\n      fill: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n  }\r\n\r\n  &:hover:not(.disabled) {\r\n    z-index: ${Z_INDEXES.hover};\r\n    color: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n\r\n    svg path {\r\n      fill: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    }\r\n  }\r\n\r\n  &:active:not(.disabled) {\r\n    z-index: ${Z_INDEXES.active};\r\n    color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n\r\n    &:after {\r\n      background-color: ${props => COLORS.getColor('primary_500', props.theme)};\r\n    }\r\n\r\n    svg path {\r\n      fill: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n  }\r\n\r\n  &:focus:not(.disabled) {\r\n    ${focusStyles};\r\n    \r\n    outline-offset: -2px;\r\n  }\r\n`;\r\n\r\nconst A = styled.a``;\r\n\r\nexport interface SwitcherNavItem {\r\n  label: string;\r\n  url: string;\r\n  disabled?: boolean;\r\n  icon?: any;\r\n  as?: any;\r\n  testId?: string;\r\n}\r\n\r\nconst SwitcherMenuItem = ({label, url, disabled, icon, as = A, testId}: SwitcherNavItem) => (\r\n  <StyledSwitcherItem\r\n    onClick={() => (window.location.href = url || '')}\r\n    as={as}\r\n    onMouseDown={defaultOnMouseDownHandler}\r\n    href={url || ''}\r\n    target=\"_parent\"\r\n    key={label}\r\n    className={disabled ? 'disabled' : ''}\r\n    data-testid={testId}>\r\n    {!!icon && React.cloneElement(icon, {size: '24px', color: '#666666'})}\r\n    {label}\r\n  </StyledSwitcherItem>\r\n);\r\n\r\nexport default SwitcherMenuItem;\r\n"],"mappings":"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","ignoreList":[]}