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

package/dist/QuizButton/__tests__/QuizButton.test.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { render } from '../../test-utils';
+import 'jest-styled-components';
+import { QuizButton } from '..';
+import { Size } from '../../types';
+import COLORS from '../../styles/colors';
+import '@testing-library/jest-dom';
+
+
+describe('<QuizButton />',()=>{
+    it('renders correct quiz button', async () => {
+        const{getByText, getByTestId} = render(
+            <QuizButton size={Size.Small} resultType={'correct'} text={'this is sample text'} type={'radio'} id={'1'}/>
+        );
+        expect(getByTestId('txtContainer')).toHaveTextContent('this is sample text');
+        expect(getByTestId('txtContainer')).toHaveClass('quiz-button-text');
+        expect(getByTestId('btnContainer')).toHaveClass('quiz-button-icon');
+    });
+
+    it('renders incorrect quiz button', async () => {
+        const{getByText, getByTestId} = render(
+            <QuizButton size={Size.Small} resultType={'incorrect'} text={'this is sample text'} type={'checkbox'} id={'1'}/>
+        );
+        expect(getByTestId('txtContainer')).toHaveTextContent('this is sample text');
+        expect(getByTestId('txtContainer')).toHaveClass('quiz-button-text');
+        expect(getByTestId('btnContainer')).toHaveClass('quiz-button-icon');
+    });
+
+    it('renders partial quiz button', async () => {
+        const{getByText, getByTestId} = render(
+            <QuizButton size={Size.Small} resultType={'partial'} text={'this is sample text'} type={'radio'} id={'1'}/>
+        );
+        expect(getByTestId('txtContainer')).toHaveTextContent('this is sample text');
+        expect(getByTestId('txtContainer')).toHaveClass('quiz-button-text');
+        expect(getByTestId('btnContainer')).toHaveClass('quiz-button-icon');
+    });
+
+    it('renders quiz button', async () => {
+        const{getByText, getByTestId} = render(
+            <QuizButton size={Size.Small} text={'this is sample text'} type={'checkbox'} id={'1'}/>
+        );
+        expect(getByText('this is sample text')).toHaveTextContent('this is sample text');
+        expect(getByTestId('txtContainer')).toHaveStyleRule('background',COLORS.accent1_20);
+        expect(getByTestId('btnContainer')).toHaveStyleRule('background',COLORS.accent1_100);
+    });
+
+    it('renders selected quiz button', async () => {
+        const{getByText} = render(
+            <QuizButton size={Size.Small} text={'this is sample text'} selected={true} type={'radio'} id={'1'}/>
+        );
+        expect(getByText('this is sample text')).toHaveTextContent('this is sample text');
+    });
+});

package/dist/SegmentControl/SegmentControl.cjs

@@ -27,14 +27,20 @@ const SegmentControlItemContent = exports.SegmentControlItemContent = _styledCom
   padding: 0 16px;
 
   background-color: transparent;
-  color: ${props => _styles.COLORS.getColor('neutral_600', props.theme)};
+  color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme)};
 `;
 const SegmentControlItemBackground = exports.SegmentControlItemBackground = _styledComponents.default.div`
   flex: 1;
   display: flex;
   flex-direction: row;
   align-items: center;
-  background-color: ${props => _styles.COLORS.getColor('neutral_20', props.theme)};
+  background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'subtle'
+}, props.theme)};
   padding: 4px 0px;
 `;
 const SegmentControlItemWrapper = exports.SegmentControlItemWrapper = _styledComponents.default.div`
@@ -54,8 +60,14 @@ const SegmentControlItemWrapper = exports.SegmentControlItemWrapper = _styledCom
     z-index: ${_styles.Z_INDEXES.hover};
 
     ${SegmentControlItemContent} {
-      background-color: ${props => _styles.COLORS.getColor('primary_100', props.theme)};
-      color: ${props => _styles.COLORS.getColor('primary_700', props.theme)};
+      background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'hover'
+}, props.theme)};
+      color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  state: 'hover'
+}, props.theme)};
     }
   }
 
@@ -63,8 +75,14 @@ const SegmentControlItemWrapper = exports.SegmentControlItemWrapper = _styledCom
     z-index: ${_styles.Z_INDEXES.active};
 
     ${SegmentControlItemContent} {
-      background-color: ${props => _styles.COLORS.getColor('primary_200', props.theme)};
-      color: ${props => _styles.COLORS.getColor('primary_800', props.theme)};
+      background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'active'
+}, props.theme)};
+      color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  state: 'active'
+}, props.theme)};
     }
   }
 
@@ -73,7 +91,10 @@ const SegmentControlItemWrapper = exports.SegmentControlItemWrapper = _styledCom
 
     ${SegmentControlItemContent} {
       background-color: transparent;
-      color: ${props => _styles.COLORS.getColor('neutral_300', props.theme)};
+      color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  state: 'disabled'
+}, props.theme)};
     }
   }
 
@@ -82,8 +103,15 @@ const SegmentControlItemWrapper = exports.SegmentControlItemWrapper = _styledCom
     pointer-events: none;
 
     ${SegmentControlItemContent} {
-      background-color: ${props => _styles.COLORS.getColor('primary_500', props.theme)};
-      color: ${props => _styles.COLORS.getColor('white', props.theme)};
+      background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-fill',
+  defaultVariant: 'primary'
+}, props.theme)};
+      color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  isOnFill: true,
+  defaultVariant: 'primary'
+}, props.theme)};
     }
   }
 
@@ -92,8 +120,15 @@ const SegmentControlItemWrapper = exports.SegmentControlItemWrapper = _styledCom
     pointer-events: unset;
     
     ${SegmentControlItemContent} {
-      background-color: ${props => _styles.COLORS.getColor('neutral_100', props.theme)};
-      color: ${props => _styles.COLORS.getColor('neutral_300', props.theme)};
+      background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-fill',
+  state: 'disabled'
+}, props.theme)};
+      color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  isOnFill: true,
+  state: 'disabled'
+}, props.theme)};
     }
   }
 `;

package/dist/SegmentControl/SegmentControl.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentControl.cjs","names":["_react","_interopRequireDefault","require","_types","_styledComponents","_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","SegmentControlItemContent","exports","styled","div","props","COLORS","getColor","theme","SegmentControlItemBackground","SegmentControlItemWrapper","focusStyles","Z_INDEXES","hover","active","SegmentControlWrapper","ComponentSStyling","ComponentTextStyle","Bold","ComponentMStyling","SegmentControl","_ref","items","size","Size","Medium","onChange","selected","className","rest","_objectWithoutProperties2","onKeyPress","item","key","document","activeElement","blur","disabled","onClick","jsx","children","map","a","i","content","tabIndex","undefined","onMouseDown","defaultOnMouseDownHandler","propTypes","_propTypes","arrayOf","shape","string","isRequired","bool","oneOfType","node","func","_default"],"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.cjs","names":["_react","_interopRequireDefault","require","_types","_styledComponents","_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","SegmentControlItemContent","exports","styled","div","props","COLORS","generateToken","componentType","defaultVariant","theme","SegmentControlItemBackground","SegmentControlItemWrapper","focusStyles","Z_INDEXES","hover","state","active","isOnFill","SegmentControlWrapper","ComponentSStyling","ComponentTextStyle","Bold","ComponentMStyling","SegmentControl","_ref","items","size","Size","Medium","onChange","selected","className","rest","_objectWithoutProperties2","onKeyPress","item","key","document","activeElement","blur","disabled","onClick","jsx","children","map","a","i","content","tabIndex","undefined","onMouseDown","defaultOnMouseDownHandler","propTypes","_propTypes","arrayOf","shape","string","isRequired","bool","oneOfType","node","func","_default"],"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/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 => {