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

package/dist/Chips/FilterChip.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterChip.js","names":["React","Size","SystemIcons","ChipContent","ChipContentContainer","ChipContainer","defaultOnMouseDownHandler","jsx","_jsx","jsxs","_jsxs","FilterChip","_ref","selected","text","size","Medium","disabled","onClick","className","dataTestId","rest","_objectWithoutProperties","_excluded","_objectSpread","role","tabIndex","onKeyDown","e","key","onMouseDown","children","CheckMark"],"sources":["../../src/Chips/FilterChip.tsx"],"sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\nimport {Size} from '../types';\r\n\r\n/**\r\n * Import custom components.\r\n */\r\nimport {SystemIcons} from '../icons/index';\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport {ChipContent, ChipContentContainer, ChipContainer} from './ChipStyles';\r\n\r\n/**\r\n * Import custom types.\r\n */\r\nimport {FilterChipProps} from './ChipTypes';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\n\r\nconst FilterChip: React.FunctionComponent<FilterChipProps> = ({\r\n                                                                selected,\r\n                                                                text,\r\n                                                                size = Size.Medium,\r\n                                                                disabled,\r\n                                                                onClick,\r\n                                                                className,\r\n                                                                dataTestId,\r\n                                                                ...rest\r\n                                                              }: FilterChipProps) => {\r\n\r\n\r\n  /**\r\n   * Return Filter Chip component.\r\n   */\r\n  return (\r\n    <ChipContainer\r\n      role=\"checkbox\"\r\n      data-testid={dataTestId}\r\n      className={`${size} ${disabled ? 'disabled' : ''} ${selected ? 'default' : 'outline'} ${!!onClick ? 'interactive' : ''} ${className || ''}`}\r\n      tabIndex={disabled || !onClick ? -1 : 0}\r\n      onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && !disabled && onClick && onClick()}\r\n      onMouseDown={defaultOnMouseDownHandler}\r\n      onClick={() => !disabled && onClick && onClick()}\r\n      {...rest}>\r\n      <ChipContentContainer>\r\n        <ChipContent>\r\n          {selected && <div className={'chip-icon icon-left'}><SystemIcons.CheckMark className={'icon'}/></div>}\r\n          <div>{text}</div>\r\n        </ChipContent>\r\n      </ChipContentContainer>\r\n    </ChipContainer>\r\n  );\r\n};\r\n\r\nexport default FilterChip;\r\n"],"mappings":";;;;;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAAQC,IAAI,QAAO,UAAU;;AAE7B;AACA;AACA;AACA,SAAQC,WAAW,QAAO,gBAAgB;;AAE1C;AACA;AACA;AACA,SAAQC,WAAW,EAAEC,oBAAoB,EAAEC,aAAa,QAAO,cAAc;;AAE7E;AACA;AACA;;AAEA,SAAQC,yBAAyB,QAAO,WAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAEpD,MAAMC,UAAoD,GAAGC,IAAA,IASwB;EAAA,IATvB;MACEC,QAAQ;MACRC,IAAI;MACJC,IAAI,GAAGd,IAAI,CAACe,MAAM;MAClBC,QAAQ;MACRC,OAAO;MACPC,SAAS;MACTC;IAEe,CAAC,GAAAR,IAAA;IADbS,IAAI,GAAAC,wBAAA,CAAAV,IAAA,EAAAW,SAAA;EAIrE;AACF;AACA;EACE,oBACEf,IAAA,CAACH,aAAa,EAAAmB,aAAA,CAAAA,aAAA;IACZC,IAAI,EAAC,UAAU;IACf,eAAaL,UAAW;IACxBD,SAAS,EAAE,GAAGJ,IAAI,IAAIE,QAAQ,GAAG,UAAU,GAAG,EAAE,IAAIJ,QAAQ,GAAG,SAAS,GAAG,SAAS,IAAI,CAAC,CAACK,OAAO,GAAG,aAAa,GAAG,EAAE,IAAIC,SAAS,IAAI,EAAE,EAAG;IAC5IO,QAAQ,EAAET,QAAQ,IAAI,CAACC,OAAO,GAAG,CAAC,CAAC,GAAG,CAAE;IACxCS,SAAS,EAAEC,CAAC,IAAI,CAACA,CAAC,CAACC,GAAG,KAAK,OAAO,IAAID,CAAC,CAACC,GAAG,KAAK,GAAG,KAAK,CAACZ,QAAQ,IAAIC,OAAO,IAAIA,OAAO,CAAC,CAAE;IAC1FY,WAAW,EAAExB,yBAA0B;IACvCY,OAAO,EAAEA,CAAA,KAAM,CAACD,QAAQ,IAAIC,OAAO,IAAIA,OAAO,CAAC;EAAE,GAC7CG,IAAI;IAAAU,QAAA,eACRvB,IAAA,CAACJ,oBAAoB;MAAA2B,QAAA,eACnBrB,KAAA,CAACP,WAAW;QAAA4B,QAAA,GACTlB,QAAQ,iBAAIL,IAAA;UAAKW,SAAS,EAAE,qBAAsB;UAAAY,QAAA,eAACvB,IAAA,CAACN,WAAW,CAAC8B,SAAS;YAACb,SAAS,EAAE;UAAO,CAAC;QAAC,CAAK,CAAC,eACrGX,IAAA;UAAAuB,QAAA,EAAMjB;QAAI,CAAM,CAAC;MAAA,CACN;IAAC,CACM;EAAC,EACV,CAAC;AAEpB,CAAC;AAED,eAAeH,UAAU","ignoreList":[]}
+{"version":3,"file":"FilterChip.js","names":["React","Size","SystemIcons","ChipContent","ChipContentContainer","ChipContainer","defaultOnMouseDownHandler","jsx","_jsx","jsxs","_jsxs","FilterChip","_ref","selected","text","size","Medium","disabled","onClick","className","dataTestId","rest","_objectWithoutProperties","_excluded","_objectSpread","role","tabIndex","onKeyDown","e","key","onMouseDown","children","style","color","CheckMark"],"sources":["../../src/Chips/FilterChip.tsx"],"sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\nimport {Size} from '../types';\r\n\r\n/**\r\n * Import custom components.\r\n */\r\nimport {SystemIcons} from '../icons/index';\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport {ChipContent, ChipContentContainer, ChipContainer} from './ChipStyles';\r\n\r\n/**\r\n * Import custom types.\r\n */\r\nimport {FilterChipProps} from './ChipTypes';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\n\r\nconst FilterChip: React.FunctionComponent<FilterChipProps> = ({\r\n                                                                selected,\r\n                                                                text,\r\n                                                                size = Size.Medium,\r\n                                                                disabled,\r\n                                                                onClick,\r\n                                                                className,\r\n                                                                dataTestId,\r\n                                                                ...rest\r\n                                                              }: FilterChipProps) => {\r\n\r\n\r\n  /**\r\n   * Return Filter Chip component.\r\n   */\r\n  return (\r\n    <ChipContainer\r\n      role=\"checkbox\"\r\n      aria-checked={selected}\r\n      data-testid={dataTestId}\r\n      className={`${size} ${disabled ? 'disabled' : ''} ${selected ? 'selected' : 'outline'} ${!!onClick ? 'interactive' : ''} ${className || ''}`}\r\n      tabIndex={disabled || !onClick ? -1 : 0}\r\n      onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && !disabled && onClick && onClick()}\r\n      onMouseDown={defaultOnMouseDownHandler}\r\n      onClick={() => !disabled && onClick && onClick()}\r\n      {...rest}>\r\n      <ChipContentContainer>\r\n        <ChipContent>\r\n          {selected && <div style={{color:'inherit'}} className={'chip-icon icon-left'}><SystemIcons.CheckMark className={'icon'}/></div>}\r\n          <div style={{color:'inherit'}}>{text}</div>\r\n        </ChipContent>\r\n      </ChipContentContainer>\r\n    </ChipContainer>\r\n  );\r\n};\r\n\r\nexport default FilterChip;\r\n"],"mappings":";;;;;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAAQC,IAAI,QAAO,UAAU;;AAE7B;AACA;AACA;AACA,SAAQC,WAAW,QAAO,gBAAgB;;AAE1C;AACA;AACA;AACA,SAAQC,WAAW,EAAEC,oBAAoB,EAAEC,aAAa,QAAO,cAAc;;AAE7E;AACA;AACA;;AAEA,SAAQC,yBAAyB,QAAO,WAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAEpD,MAAMC,UAAoD,GAAGC,IAAA,IASwB;EAAA,IATvB;MACEC,QAAQ;MACRC,IAAI;MACJC,IAAI,GAAGd,IAAI,CAACe,MAAM;MAClBC,QAAQ;MACRC,OAAO;MACPC,SAAS;MACTC;IAEe,CAAC,GAAAR,IAAA;IADbS,IAAI,GAAAC,wBAAA,CAAAV,IAAA,EAAAW,SAAA;EAIrE;AACF;AACA;EACE,oBACEf,IAAA,CAACH,aAAa,EAAAmB,aAAA,CAAAA,aAAA;IACZC,IAAI,EAAC,UAAU;IACf,gBAAcZ,QAAS;IACvB,eAAaO,UAAW;IACxBD,SAAS,EAAE,GAAGJ,IAAI,IAAIE,QAAQ,GAAG,UAAU,GAAG,EAAE,IAAIJ,QAAQ,GAAG,UAAU,GAAG,SAAS,IAAI,CAAC,CAACK,OAAO,GAAG,aAAa,GAAG,EAAE,IAAIC,SAAS,IAAI,EAAE,EAAG;IAC7IO,QAAQ,EAAET,QAAQ,IAAI,CAACC,OAAO,GAAG,CAAC,CAAC,GAAG,CAAE;IACxCS,SAAS,EAAEC,CAAC,IAAI,CAACA,CAAC,CAACC,GAAG,KAAK,OAAO,IAAID,CAAC,CAACC,GAAG,KAAK,GAAG,KAAK,CAACZ,QAAQ,IAAIC,OAAO,IAAIA,OAAO,CAAC,CAAE;IAC1FY,WAAW,EAAExB,yBAA0B;IACvCY,OAAO,EAAEA,CAAA,KAAM,CAACD,QAAQ,IAAIC,OAAO,IAAIA,OAAO,CAAC;EAAE,GAC7CG,IAAI;IAAAU,QAAA,eACRvB,IAAA,CAACJ,oBAAoB;MAAA2B,QAAA,eACnBrB,KAAA,CAACP,WAAW;QAAA4B,QAAA,GACTlB,QAAQ,iBAAIL,IAAA;UAAKwB,KAAK,EAAE;YAACC,KAAK,EAAC;UAAS,CAAE;UAACd,SAAS,EAAE,qBAAsB;UAAAY,QAAA,eAACvB,IAAA,CAACN,WAAW,CAACgC,SAAS;YAACf,SAAS,EAAE;UAAO,CAAC;QAAC,CAAK,CAAC,eAC/HX,IAAA;UAAKwB,KAAK,EAAE;YAACC,KAAK,EAAC;UAAS,CAAE;UAAAF,QAAA,EAAEjB;QAAI,CAAM,CAAC;MAAA,CAChC;IAAC,CACM;EAAC,EACV,CAAC;AAEpB,CAAC;AAED,eAAeH,UAAU","ignoreList":[]}

package/dist/Chips/InputChip.cjs

@@ -12,6 +12,8 @@ var _index = require("../icons/index");
 var _ChipStyles = require("./ChipStyles");
 var _common = require("../common");
 var _types = require("../types");
+var _styledComponents = require("styled-components");
+var _colors = _interopRequireDefault(require("../styles/colors"));
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["icon", "text", "variant", "size", "disabled", "onClick", "disableRemove", "dataTestId", "onRemove", "className"];
 /**
@@ -46,6 +48,7 @@ const InputChip = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   const containerRef = ref ?? React.useRef(null);
   const removeRef = React.useRef(null);
+  const theme = (0, _styledComponents.useTheme)();
   (0, _common.useActionWithin)(containerRef, [removeRef]);
 
   /**
@@ -64,6 +67,11 @@ const InputChip = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       !disableRemove && onRemove && onRemove(event);
     }
   };
+  console.log(_colors.default.generateToken({
+    componentType: 'bg-surface',
+    defaultVariant: 'critical',
+    state: 'hover'
+  }, theme));
 
   /**
    * Return Input Chip component.
@@ -83,9 +91,15 @@ const InputChip = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChipStyles.ChipContent, {
         className: 'with-action-right',
         children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          style: {
+            color: 'inherit'
+          },
           className: 'chip-icon icon-left',
           children: icon
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          style: {
+            color: 'inherit'
+          },
           children: text
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           ref: removeRef,

package/dist/Chips/InputChip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"InputChip.cjs","names":["React","_interopRequireWildcard","require","_index","_ChipStyles","_common","_types","_jsxRuntime","_excluded","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","InputChip","forwardRef","_ref","ref","icon","text","variant","States","Default","size","Size","Medium","disabled","onClick","disableRemove","dataTestId","onRemove","className","rest","_objectWithoutProperties2","containerRef","useRef","removeRef","useActionWithin","onRemoveClick","event","stopPropagation","handleContainerKeyDown","key","jsx","ChipContainer","role","tabIndex","onMouseDown","defaultOnMouseDownHandler","onKeyDown","children","ChipContentContainer","jsxs","ChipContent","SystemIcons","Close","_default","exports"],"sources":["../../src/Chips/InputChip.tsx"],"sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\n\r\n/**\r\n * Import custom components.\r\n */\r\nimport {SystemIcons, SystemIcons as icons} from '../icons/index';\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\r\n\r\n/**\r\n * Import custom types.\r\n */\r\nimport {ChipVariant, InputChipProps} from './ChipTypes';\r\nimport {defaultOnMouseDownHandler, useActionWithin} from '../common';\r\nimport {Size, States} from '../types';\r\n\r\nconst InputChip: React.FunctionComponent<InputChipProps> = React.forwardRef(({\r\n                                                                               icon,\r\n                                                                               text,\r\n                                                                               variant = States.Default,\r\n                                                                               size = Size.Medium,\r\n                                                                               disabled,\r\n                                                                               onClick,\r\n                                                                               disableRemove,\r\n                                                                               dataTestId,\r\n                                                                               onRemove,\r\n                                                                               className,\r\n                                                                               ...rest\r\n                                                                             }: InputChipProps, ref) => {\r\n\r\n  const containerRef = ref as React.MutableRefObject<HTMLDivElement> ?? React.useRef<HTMLDivElement>(null);\r\n  const removeRef = React.useRef<HTMLDivElement>(null);\r\n\r\n  useActionWithin(containerRef, [removeRef]);\r\n\r\n  /**\r\n   * Calls onRemove action when remove button is clicked.\r\n   * @param event - Event handler from the button click.\r\n   */\r\n  const onRemoveClick = (event?: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => {\r\n    !!event && event.stopPropagation();\r\n    onRemove(event);\r\n  };\r\n\r\n  const handleContainerKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\r\n    if (event.key === 'Enter' || event.key === ' ') {\r\n      !disabled && onClick && onClick();\r\n    }\r\n    if (event.key === 'Backspace' && !disableRemove) {\r\n      !disableRemove && onRemove && onRemove(event);\r\n    }\r\n  };\r\n\r\n  /**\r\n   * Return Input Chip component.\r\n   */\r\n  return (\r\n    <ChipContainer ref={containerRef}\r\n                   role=\"button\"\r\n                   data-testid={dataTestId}\r\n                   aria-roledescription='Removable filter'\r\n                   className={`${size} ${disabled ? 'disabled' : ''}  ${variant} ${!!onClick ? 'interactive' : ''} ${className || ''}`}\r\n                   tabIndex={disabled || !onClick ? -1 : 0}\r\n                   onMouseDown={defaultOnMouseDownHandler}\r\n                   onKeyDown={handleContainerKeyDown}\r\n                   onClick={() => !disabled && onClick && onClick()}\r\n                   {...rest}>\r\n      <ChipContentContainer>\r\n        <ChipContent className={'with-action-right'}>\r\n          {icon && <div className={'chip-icon icon-left'}>{icon}</div>}\r\n\r\n          <div>{text}</div>\r\n\r\n          <div ref={removeRef}\r\n               className={`action-right ${disableRemove ? 'disabled' : ''}`}\r\n               tabIndex={disableRemove || disabled ? -1 : 0}\r\n               onMouseDown={defaultOnMouseDownHandler}\r\n               onClick={e => !disableRemove && !disabled && onRemoveClick(e)}\r\n               onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && !disableRemove && !disabled && onRemoveClick(e)}>\r\n            <div className={'chip-icon'}>\r\n              <SystemIcons.Close className={'remove'}/>\r\n            </div>\r\n          </div>\r\n        </ChipContent>\r\n      </ChipContentContainer>\r\n    </ChipContainer>\r\n  );\r\n});\r\n\r\nexport default InputChip;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"InputChip.cjs","names":["React","_interopRequireWildcard","require","_index","_ChipStyles","_common","_types","_styledComponents","_colors","_interopRequireDefault","_jsxRuntime","_excluded","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","InputChip","forwardRef","_ref","ref","icon","text","variant","States","Default","size","Size","Medium","disabled","onClick","disableRemove","dataTestId","onRemove","className","rest","_objectWithoutProperties2","containerRef","useRef","removeRef","theme","useTheme","useActionWithin","onRemoveClick","event","stopPropagation","handleContainerKeyDown","key","console","log","COLORS","generateToken","componentType","defaultVariant","state","jsx","ChipContainer","role","tabIndex","onMouseDown","defaultOnMouseDownHandler","onKeyDown","children","ChipContentContainer","jsxs","ChipContent","style","color","SystemIcons","Close","_default","exports"],"sources":["../../src/Chips/InputChip.tsx"],"sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\n\r\n/**\r\n * Import custom components.\r\n */\r\nimport {SystemIcons, SystemIcons as icons} from '../icons/index';\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\r\n\r\n/**\r\n * Import custom types.\r\n */\r\nimport {InputChipProps} from './ChipTypes';\r\nimport {defaultOnMouseDownHandler, useActionWithin} from '../common';\r\nimport {Size, States} from '../types';\r\nimport { useTheme } from 'styled-components';\r\nimport COLORS from '../styles/colors';\r\n\r\nconst InputChip: React.FunctionComponent<InputChipProps> = React.forwardRef(({\r\n                                                                               icon,\r\n                                                                               text,\r\n                                                                               variant = States.Default,\r\n                                                                               size = Size.Medium,\r\n                                                                               disabled,\r\n                                                                               onClick,\r\n                                                                               disableRemove,\r\n                                                                               dataTestId,\r\n                                                                               onRemove,\r\n                                                                               className,\r\n                                                                               ...rest\r\n                                                                             }: InputChipProps, ref) => {\r\n\r\n  const containerRef = ref as React.MutableRefObject<HTMLDivElement> ?? React.useRef<HTMLDivElement>(null);\r\n  const removeRef = React.useRef<HTMLDivElement>(null);\r\n  const theme = useTheme();\r\n\r\n  useActionWithin(containerRef, [removeRef]);\r\n\r\n  /**\r\n   * Calls onRemove action when remove button is clicked.\r\n   * @param event - Event handler from the button click.\r\n   */\r\n  const onRemoveClick = (event?: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => {\r\n    !!event && event.stopPropagation();\r\n    onRemove(event);\r\n  };\r\n\r\n  const handleContainerKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\r\n    if (event.key === 'Enter' || event.key === ' ') {\r\n      !disabled && onClick && onClick();\r\n    }\r\n    if (event.key === 'Backspace' && !disableRemove) {\r\n      !disableRemove && onRemove && onRemove(event);\r\n    }\r\n  };\r\n\r\n  console.log(COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'critical', state: 'hover' }, theme));\r\n\r\n  /**\r\n   * Return Input Chip component.\r\n   */\r\n  return (\r\n    <ChipContainer ref={containerRef}\r\n                   role=\"button\"\r\n                   data-testid={dataTestId}\r\n                   aria-roledescription='Removable filter'\r\n                   className={`${size} ${disabled ? 'disabled' : ''}  ${variant} ${!!onClick ? 'interactive' : ''} ${className || ''}`}\r\n                   tabIndex={disabled || !onClick ? -1 : 0}\r\n                   onMouseDown={defaultOnMouseDownHandler}\r\n                   onKeyDown={handleContainerKeyDown}\r\n                   onClick={() => !disabled && onClick && onClick()}\r\n                   {...rest}>\r\n      <ChipContentContainer>\r\n        <ChipContent className={'with-action-right'}>\r\n          {icon && <div style={{color:'inherit'}} className={'chip-icon icon-left'}>{icon}</div>}\r\n\r\n          <div style={{color:'inherit'}}>{text}</div>\r\n\r\n          <div ref={removeRef}\r\n               className={`action-right ${disableRemove ? 'disabled' : ''}`}\r\n               tabIndex={disableRemove || disabled ? -1 : 0}\r\n               onMouseDown={defaultOnMouseDownHandler}\r\n               onClick={e => !disableRemove && !disabled && onRemoveClick(e)}\r\n               onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && !disableRemove && !disabled && onRemoveClick(e)}>\r\n            <div className={'chip-icon'}>\r\n              <SystemIcons.Close className={'remove'}/>\r\n            </div>\r\n          </div>\r\n        </ChipContent>\r\n      </ChipContentContainer>\r\n    </ChipContainer>\r\n  );\r\n});\r\n\r\nexport default InputChip;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Chips/InputChip.js

@@ -24,6 +24,8 @@ import { ChipContainer, ChipContent, ChipContentContainer } from './ChipStyles';
 
 import { defaultOnMouseDownHandler, useActionWithin } from '../common';
 import { Size, States } from '../types';
+import { useTheme } from 'styled-components';
+import COLORS from '../styles/colors';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const InputChip = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
@@ -41,6 +43,7 @@ const InputChip = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     rest = _objectWithoutProperties(_ref, _excluded);
   const containerRef = ref ?? React.useRef(null);
   const removeRef = React.useRef(null);
+  const theme = useTheme();
   useActionWithin(containerRef, [removeRef]);
 
   /**
@@ -59,6 +62,11 @@ const InputChip = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       !disableRemove && onRemove && onRemove(event);
     }
   };
+  console.log(COLORS.generateToken({
+    componentType: 'bg-surface',
+    defaultVariant: 'critical',
+    state: 'hover'
+  }, theme));
 
   /**
    * Return Input Chip component.
@@ -78,9 +86,15 @@ const InputChip = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       children: /*#__PURE__*/_jsxs(ChipContent, {
         className: 'with-action-right',
         children: [icon && /*#__PURE__*/_jsx("div", {
+          style: {
+            color: 'inherit'
+          },
           className: 'chip-icon icon-left',
           children: icon
         }), /*#__PURE__*/_jsx("div", {
+          style: {
+            color: 'inherit'
+          },
           children: text
         }), /*#__PURE__*/_jsx("div", {
           ref: removeRef,

package/dist/Chips/InputChip.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputChip.js","names":["React","SystemIcons","ChipContainer","ChipContent","ChipContentContainer","defaultOnMouseDownHandler","useActionWithin","Size","States","jsx","_jsx","jsxs","_jsxs","InputChip","forwardRef","_ref","ref","icon","text","variant","Default","size","Medium","disabled","onClick","disableRemove","dataTestId","onRemove","className","rest","_objectWithoutProperties","_excluded","containerRef","useRef","removeRef","onRemoveClick","event","stopPropagation","handleContainerKeyDown","key","_objectSpread","role","tabIndex","onMouseDown","onKeyDown","children","e","Close"],"sources":["../../src/Chips/InputChip.tsx"],"sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\n\r\n/**\r\n * Import custom components.\r\n */\r\nimport {SystemIcons, SystemIcons as icons} from '../icons/index';\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\r\n\r\n/**\r\n * Import custom types.\r\n */\r\nimport {ChipVariant, InputChipProps} from './ChipTypes';\r\nimport {defaultOnMouseDownHandler, useActionWithin} from '../common';\r\nimport {Size, States} from '../types';\r\n\r\nconst InputChip: React.FunctionComponent<InputChipProps> = React.forwardRef(({\r\n                                                                               icon,\r\n                                                                               text,\r\n                                                                               variant = States.Default,\r\n                                                                               size = Size.Medium,\r\n                                                                               disabled,\r\n                                                                               onClick,\r\n                                                                               disableRemove,\r\n                                                                               dataTestId,\r\n                                                                               onRemove,\r\n                                                                               className,\r\n                                                                               ...rest\r\n                                                                             }: InputChipProps, ref) => {\r\n\r\n  const containerRef = ref as React.MutableRefObject<HTMLDivElement> ?? React.useRef<HTMLDivElement>(null);\r\n  const removeRef = React.useRef<HTMLDivElement>(null);\r\n\r\n  useActionWithin(containerRef, [removeRef]);\r\n\r\n  /**\r\n   * Calls onRemove action when remove button is clicked.\r\n   * @param event - Event handler from the button click.\r\n   */\r\n  const onRemoveClick = (event?: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => {\r\n    !!event && event.stopPropagation();\r\n    onRemove(event);\r\n  };\r\n\r\n  const handleContainerKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\r\n    if (event.key === 'Enter' || event.key === ' ') {\r\n      !disabled && onClick && onClick();\r\n    }\r\n    if (event.key === 'Backspace' && !disableRemove) {\r\n      !disableRemove && onRemove && onRemove(event);\r\n    }\r\n  };\r\n\r\n  /**\r\n   * Return Input Chip component.\r\n   */\r\n  return (\r\n    <ChipContainer ref={containerRef}\r\n                   role=\"button\"\r\n                   data-testid={dataTestId}\r\n                   aria-roledescription='Removable filter'\r\n                   className={`${size} ${disabled ? 'disabled' : ''}  ${variant} ${!!onClick ? 'interactive' : ''} ${className || ''}`}\r\n                   tabIndex={disabled || !onClick ? -1 : 0}\r\n                   onMouseDown={defaultOnMouseDownHandler}\r\n                   onKeyDown={handleContainerKeyDown}\r\n                   onClick={() => !disabled && onClick && onClick()}\r\n                   {...rest}>\r\n      <ChipContentContainer>\r\n        <ChipContent className={'with-action-right'}>\r\n          {icon && <div className={'chip-icon icon-left'}>{icon}</div>}\r\n\r\n          <div>{text}</div>\r\n\r\n          <div ref={removeRef}\r\n               className={`action-right ${disableRemove ? 'disabled' : ''}`}\r\n               tabIndex={disableRemove || disabled ? -1 : 0}\r\n               onMouseDown={defaultOnMouseDownHandler}\r\n               onClick={e => !disableRemove && !disabled && onRemoveClick(e)}\r\n               onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && !disableRemove && !disabled && onRemoveClick(e)}>\r\n            <div className={'chip-icon'}>\r\n              <SystemIcons.Close className={'remove'}/>\r\n            </div>\r\n          </div>\r\n        </ChipContent>\r\n      </ChipContentContainer>\r\n    </ChipContainer>\r\n  );\r\n});\r\n\r\nexport default InputChip;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"InputChip.js","names":["React","SystemIcons","ChipContainer","ChipContent","ChipContentContainer","defaultOnMouseDownHandler","useActionWithin","Size","States","useTheme","COLORS","jsx","_jsx","jsxs","_jsxs","InputChip","forwardRef","_ref","ref","icon","text","variant","Default","size","Medium","disabled","onClick","disableRemove","dataTestId","onRemove","className","rest","_objectWithoutProperties","_excluded","containerRef","useRef","removeRef","theme","onRemoveClick","event","stopPropagation","handleContainerKeyDown","key","console","log","generateToken","componentType","defaultVariant","state","_objectSpread","role","tabIndex","onMouseDown","onKeyDown","children","style","color","e","Close"],"sources":["../../src/Chips/InputChip.tsx"],"sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\n\r\n/**\r\n * Import custom components.\r\n */\r\nimport {SystemIcons, SystemIcons as icons} from '../icons/index';\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\r\n\r\n/**\r\n * Import custom types.\r\n */\r\nimport {InputChipProps} from './ChipTypes';\r\nimport {defaultOnMouseDownHandler, useActionWithin} from '../common';\r\nimport {Size, States} from '../types';\r\nimport { useTheme } from 'styled-components';\r\nimport COLORS from '../styles/colors';\r\n\r\nconst InputChip: React.FunctionComponent<InputChipProps> = React.forwardRef(({\r\n                                                                               icon,\r\n                                                                               text,\r\n                                                                               variant = States.Default,\r\n                                                                               size = Size.Medium,\r\n                                                                               disabled,\r\n                                                                               onClick,\r\n                                                                               disableRemove,\r\n                                                                               dataTestId,\r\n                                                                               onRemove,\r\n                                                                               className,\r\n                                                                               ...rest\r\n                                                                             }: InputChipProps, ref) => {\r\n\r\n  const containerRef = ref as React.MutableRefObject<HTMLDivElement> ?? React.useRef<HTMLDivElement>(null);\r\n  const removeRef = React.useRef<HTMLDivElement>(null);\r\n  const theme = useTheme();\r\n\r\n  useActionWithin(containerRef, [removeRef]);\r\n\r\n  /**\r\n   * Calls onRemove action when remove button is clicked.\r\n   * @param event - Event handler from the button click.\r\n   */\r\n  const onRemoveClick = (event?: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => {\r\n    !!event && event.stopPropagation();\r\n    onRemove(event);\r\n  };\r\n\r\n  const handleContainerKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\r\n    if (event.key === 'Enter' || event.key === ' ') {\r\n      !disabled && onClick && onClick();\r\n    }\r\n    if (event.key === 'Backspace' && !disableRemove) {\r\n      !disableRemove && onRemove && onRemove(event);\r\n    }\r\n  };\r\n\r\n  console.log(COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'critical', state: 'hover' }, theme));\r\n\r\n  /**\r\n   * Return Input Chip component.\r\n   */\r\n  return (\r\n    <ChipContainer ref={containerRef}\r\n                   role=\"button\"\r\n                   data-testid={dataTestId}\r\n                   aria-roledescription='Removable filter'\r\n                   className={`${size} ${disabled ? 'disabled' : ''}  ${variant} ${!!onClick ? 'interactive' : ''} ${className || ''}`}\r\n                   tabIndex={disabled || !onClick ? -1 : 0}\r\n                   onMouseDown={defaultOnMouseDownHandler}\r\n                   onKeyDown={handleContainerKeyDown}\r\n                   onClick={() => !disabled && onClick && onClick()}\r\n                   {...rest}>\r\n      <ChipContentContainer>\r\n        <ChipContent className={'with-action-right'}>\r\n          {icon && <div style={{color:'inherit'}} className={'chip-icon icon-left'}>{icon}</div>}\r\n\r\n          <div style={{color:'inherit'}}>{text}</div>\r\n\r\n          <div ref={removeRef}\r\n               className={`action-right ${disableRemove ? 'disabled' : ''}`}\r\n               tabIndex={disableRemove || disabled ? -1 : 0}\r\n               onMouseDown={defaultOnMouseDownHandler}\r\n               onClick={e => !disableRemove && !disabled && onRemoveClick(e)}\r\n               onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && !disableRemove && !disabled && onRemoveClick(e)}>\r\n            <div className={'chip-icon'}>\r\n              <SystemIcons.Close className={'remove'}/>\r\n            </div>\r\n          </div>\r\n        </ChipContent>\r\n      </ChipContentContainer>\r\n    </ChipContainer>\r\n  );\r\n});\r\n\r\nexport default InputChip;\r\n"],"mappings":";;;;;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAK,MAAM,OAAO;;AAE9B;AACA;AACA;AACA,SAAQC,WAAW,QAA6B,gBAAgB;;AAEhE;AACA;AACA;AACA,SAAQC,aAAa,EAAEC,WAAW,EAAEC,oBAAoB,QAAO,cAAc;;AAE7E;AACA;AACA;;AAEA,SAAQC,yBAAyB,EAAEC,eAAe,QAAO,WAAW;AACpE,SAAQC,IAAI,EAAEC,MAAM,QAAO,UAAU;AACrC,SAASC,QAAQ,QAAQ,mBAAmB;AAC5C,OAAOC,MAAM,MAAM,kBAAkB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAEtC,MAAMC,SAAkD,gBAAGf,KAAK,CAACgB,UAAU,CAAC,CAAAC,IAAA,EAYoBC,GAAG,KAAK;EAAA,IAZ3B;MACEC,IAAI;MACJC,IAAI;MACJC,OAAO,GAAGb,MAAM,CAACc,OAAO;MACxBC,IAAI,GAAGhB,IAAI,CAACiB,MAAM;MAClBC,QAAQ;MACRC,OAAO;MACPC,aAAa;MACbC,UAAU;MACVC,QAAQ;MACRC;IAEc,CAAC,GAAAb,IAAA;IADZc,IAAI,GAAAC,wBAAA,CAAAf,IAAA,EAAAgB,SAAA;EAGpF,MAAMC,YAAY,GAAGhB,GAAG,IAA8ClB,KAAK,CAACmC,MAAM,CAAiB,IAAI,CAAC;EACxG,MAAMC,SAAS,GAAGpC,KAAK,CAACmC,MAAM,CAAiB,IAAI,CAAC;EACpD,MAAME,KAAK,GAAG5B,QAAQ,CAAC,CAAC;EAExBH,eAAe,CAAC4B,YAAY,EAAE,CAACE,SAAS,CAAC,CAAC;;EAE1C;AACF;AACA;AACA;EACE,MAAME,aAAa,GAAIC,KAA8E,IAAK;IACxG,CAAC,CAACA,KAAK,IAAIA,KAAK,CAACC,eAAe,CAAC,CAAC;IAClCX,QAAQ,CAACU,KAAK,CAAC;EACjB,CAAC;EAED,MAAME,sBAAsB,GAAIF,KAA0C,IAAK;IAC7E,IAAIA,KAAK,CAACG,GAAG,KAAK,OAAO,IAAIH,KAAK,CAACG,GAAG,KAAK,GAAG,EAAE;MAC9C,CAACjB,QAAQ,IAAIC,OAAO,IAAIA,OAAO,CAAC,CAAC;IACnC;IACA,IAAIa,KAAK,CAACG,GAAG,KAAK,WAAW,IAAI,CAACf,aAAa,EAAE;MAC/C,CAACA,aAAa,IAAIE,QAAQ,IAAIA,QAAQ,CAACU,KAAK,CAAC;IAC/C;EACF,CAAC;EAEDI,OAAO,CAACC,GAAG,CAAClC,MAAM,CAACmC,aAAa,CAAC;IAAEC,aAAa,EAAE,YAAY;IAAEC,cAAc,EAAE,UAAU;IAAEC,KAAK,EAAE;EAAQ,CAAC,EAAEX,KAAK,CAAC,CAAC;;EAErH;AACF;AACA;EACE,oBACEzB,IAAA,CAACV,aAAa,EAAA+C,aAAA,CAAAA,aAAA;IAAC/B,GAAG,EAAEgB,YAAa;IAClBgB,IAAI,EAAC,QAAQ;IACb,eAAatB,UAAW;IACxB,wBAAqB,kBAAkB;IACvCE,SAAS,EAAE,GAAGP,IAAI,IAAIE,QAAQ,GAAG,UAAU,GAAG,EAAE,KAAKJ,OAAO,IAAI,CAAC,CAACK,OAAO,GAAG,aAAa,GAAG,EAAE,IAAII,SAAS,IAAI,EAAE,EAAG;IACpHqB,QAAQ,EAAE1B,QAAQ,IAAI,CAACC,OAAO,GAAG,CAAC,CAAC,GAAG,CAAE;IACxC0B,WAAW,EAAE/C,yBAA0B;IACvCgD,SAAS,EAAEZ,sBAAuB;IAClCf,OAAO,EAAEA,CAAA,KAAM,CAACD,QAAQ,IAAIC,OAAO,IAAIA,OAAO,CAAC;EAAE,GAC7CK,IAAI;IAAAuB,QAAA,eACrB1C,IAAA,CAACR,oBAAoB;MAAAkD,QAAA,eACnBxC,KAAA,CAACX,WAAW;QAAC2B,SAAS,EAAE,mBAAoB;QAAAwB,QAAA,GACzCnC,IAAI,iBAAIP,IAAA;UAAK2C,KAAK,EAAE;YAACC,KAAK,EAAC;UAAS,CAAE;UAAC1B,SAAS,EAAE,qBAAsB;UAAAwB,QAAA,EAAEnC;QAAI,CAAM,CAAC,eAEtFP,IAAA;UAAK2C,KAAK,EAAE;YAACC,KAAK,EAAC;UAAS,CAAE;UAAAF,QAAA,EAAElC;QAAI,CAAM,CAAC,eAE3CR,IAAA;UAAKM,GAAG,EAAEkB,SAAU;UACfN,SAAS,EAAE,gBAAgBH,aAAa,GAAG,UAAU,GAAG,EAAE,EAAG;UAC7DwB,QAAQ,EAAExB,aAAa,IAAIF,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAE;UAC7C2B,WAAW,EAAE/C,yBAA0B;UACvCqB,OAAO,EAAE+B,CAAC,IAAI,CAAC9B,aAAa,IAAI,CAACF,QAAQ,IAAIa,aAAa,CAACmB,CAAC,CAAE;UAC9DJ,SAAS,EAAEI,CAAC,IAAI,CAACA,CAAC,CAACf,GAAG,KAAK,OAAO,IAAIe,CAAC,CAACf,GAAG,KAAK,GAAG,KAAK,CAACf,aAAa,IAAI,CAACF,QAAQ,IAAIa,aAAa,CAACmB,CAAC,CAAE;UAAAH,QAAA,eAC3G1C,IAAA;YAAKkB,SAAS,EAAE,WAAY;YAAAwB,QAAA,eAC1B1C,IAAA,CAACX,WAAW,CAACyD,KAAK;cAAC5B,SAAS,EAAE;YAAS,CAAC;UAAC,CACtC;QAAC,CACH,CAAC;MAAA,CACK;IAAC,CACM;EAAC,EACV,CAAC;AAEpB,CAAC,CAAC;AAEF,eAAef,SAAS","ignoreList":[]}

package/dist/Chips/__tests__/ActionChip.test.tsx

@@ -0,0 +1,94 @@
+import * as React from 'react';
+import {ActionChip} from '../index';
+import {act, fireEvent, render} from '../../test-utils';
+import { SystemIcons } from '../../icons';
+
+describe('ActionChip', () => {
+
+  it('should render', () => {
+    const wrapper = render(<ActionChip text={'label'}/>);
+
+    expect(wrapper.queryByText('label')).toBeInTheDocument();
+  });
+
+  it('should render icon', () => {
+    const wrapper = render(<ActionChip text={'label'} icon={<SystemIcons.Book/>}/>);
+
+    expect(wrapper.queryByLabelText('Book')).toBeInTheDocument();
+  });
+
+  it('should be focusable if it is not disabled and onClick is defined', () => {
+    const wrapper = render(<ActionChip text={'label'} icon={<SystemIcons.Book/>} onClick={jest.fn()}/>);
+
+    expect(wrapper.container.querySelector('[tabindex="0"]')).toBeInTheDocument();
+  });
+
+  it('should not be focusable if it is disabled', () => {
+    const wrapper = render(<ActionChip text={'label'} icon={<SystemIcons.Book/>} disabled={true} onClick={jest.fn()}/>);
+
+    expect(wrapper.container.querySelector('[tabindex="-1"]')).toBeInTheDocument();
+  });
+
+  it('should not be focusable if it is not interactive', () => {
+    const wrapper = render(<ActionChip text={'label'} icon={<SystemIcons.Book/>}/>);
+
+    expect(wrapper.container.querySelector('[tabindex="-1"]')).toBeInTheDocument();
+  });
+
+  it('should call onClick when its clicked', () => {
+    const onClickSpy = jest.fn();
+    const wrapper = render(<ActionChip text={'label'} icon={<SystemIcons.Book/>} onClick={onClickSpy}/>);
+
+    act(() => {
+      wrapper.getByText('label').click();
+    });
+
+    expect(onClickSpy).toHaveBeenCalled();
+  });
+
+  it('should call onClick when Enter is pressed', () => {
+    const onClickSpy = jest.fn();
+    const wrapper = render(<ActionChip text={'label'} icon={<SystemIcons.Book/>} onClick={onClickSpy}/>);
+
+    act(() => {
+      fireEvent.keyDown(wrapper.getByText('label'), {key: 'Enter', code: 'Enter'});
+    });
+
+    expect(onClickSpy).toHaveBeenCalled();
+  });
+
+  it('should call onClick when Space is pressed', () => {
+    const onClickSpy = jest.fn();
+    const wrapper = render(<ActionChip text={'label'} icon={<SystemIcons.Book/>} onClick={onClickSpy}/>);
+
+    act(() => {
+      fireEvent.keyDown(wrapper.getByText('label'), {key: ' '});
+    });
+
+    expect(onClickSpy).toHaveBeenCalled();
+  });
+
+  it('should not call onClick when its clicked if disabled', () => {
+    const onClickSpy = jest.fn();
+    const wrapper = render(<ActionChip text={'label'} icon={<SystemIcons.Book/>} disabled={true} onClick={onClickSpy}/>);
+
+    act(() => {
+      wrapper.getByText('label').click();
+    });
+
+    expect(onClickSpy).not.toHaveBeenCalled();
+  });
+
+  it('should not call onClick when Enter is pressed if disabled', () => {
+    const onClickSpy = jest.fn();
+    const wrapper = render(<ActionChip text={'label'} icon={<SystemIcons.Book/>} disabled={true} onClick={onClickSpy}/>);
+
+    act(() => {
+      fireEvent.keyDown(wrapper.getByText('label'), {key: 'Enter', code: 'Enter'});
+    });
+
+    expect(onClickSpy).not.toHaveBeenCalled();
+  });
+
+
+});

package/dist/Chips/__tests__/ChoiceChips.test.tsx

@@ -0,0 +1,79 @@
+import * as React from 'react';
+import {ChoiceChips} from '../index';
+import {render, act, fireEvent} from '../../test-utils';
+
+
+
+
+describe('ChoiceChips', () => {
+
+  it('should render chips', () => {
+
+    const wrapper = render(<ChoiceChips selected={'1'}
+                                         values={[{value: '1', label: 'label'}, {value: '2', label: 'label 2'}]}/>);
+
+    expect(wrapper.queryAllByRole('radio')).toHaveLength(2);
+    expect(wrapper.queryByText('label')).toBeInTheDocument();
+    expect(wrapper.queryByText('label 2')).toBeInTheDocument();
+  });
+
+  it('should call onClick when chip is clicked', () => {
+    const onClickSpy = jest.fn();
+
+    const wrapper = render(<ChoiceChips selected={'1'}
+                                         onClick={onClickSpy}
+                                         values={[{value: '1', label: 'label'}, {value: '2', label: 'label 2'}]}/>);
+
+    act(() => {
+      wrapper.getByText('label 2').click()
+    });
+
+    expect(onClickSpy).toHaveBeenCalledWith({value: '2', label: 'label 2'});
+  });
+
+  it('should call onClick when enter is pressed on focused chip', () => {
+    const onClickSpy = jest.fn();
+
+    const wrapper = render(<ChoiceChips selected={'1'}
+                                         onClick={onClickSpy}
+                                         values={[{value: '1', label: 'label'}, {value: '2', label: 'label 2'}]}/>);
+
+    act(() => {
+      fireEvent.keyDown(wrapper.getByText('label 2'), {key: 'Enter', code: 'Enter'});
+    });
+
+    expect(onClickSpy).toHaveBeenCalledWith({value: '2', label: 'label 2'});
+  });
+
+  it('should not call onClick when chip is clicked if its disabled', () => {
+    const onClickSpy = jest.fn();
+
+    const wrapper = render(<ChoiceChips selected={'1'}
+                                         disabled={true}
+                                         onClick={onClickSpy}
+                                         values={[{value: '1', label: 'label'}, {value: '2', label: 'label 2'}]}/>);
+
+    act(() => {
+      wrapper.getByText('label 2').click()
+    });
+
+    expect(onClickSpy).not.toHaveBeenCalled();
+  });
+
+  it('should render selected chip with default class others with outline class', () => {
+    const onClickSpy = jest.fn();
+
+    const wrapper = render(<ChoiceChips selected={'1'}
+                                         onClick={onClickSpy}
+                                         values={[{value: '1', label: 'label'}, {value: '2', label: 'label 2'}]}/>);
+
+
+    act(() => {
+      wrapper.getByText('label 2').click()
+    });
+
+    expect(wrapper.queryAllByRole('radio')[0]).toHaveClass('outline');
+    expect(wrapper.queryAllByRole('radio')[1]).toHaveClass('selected')
+  });
+
+})

package/dist/Chips/__tests__/FilterChip.test.tsx

@@ -0,0 +1,95 @@
+import * as React from 'react';
+import {FilterChip} from '../index';
+import {act, fireEvent, render} from '../../test-utils';
+
+
+
+
+describe('FilterChip', () => {
+
+  it('should render', () => {
+    const wrapper = render(<FilterChip selected={false} text={'label'}/>);
+
+    expect(wrapper.queryByText('label')).toBeInTheDocument();
+  });
+
+  it('should render icon when selected', () => {
+    const wrapper = render(<FilterChip selected={true} text={'label'}/>);
+
+    expect(wrapper.queryByLabelText('Checkmark')).toBeInTheDocument();
+  });
+
+  it('should be focusable if it is not disabled and onClick is defined', () => {
+    const wrapper = render(<FilterChip selected={false} text={'label'} onClick={jest.fn()}/>);
+
+    expect(wrapper.container.querySelector('[tabindex="0"]')).toBeInTheDocument();
+  });
+
+  it('should not be focusable if it is disabled', () => {
+    const wrapper = render(<FilterChip selected={false} text={'label'} disabled={true} onClick={jest.fn()}/>);
+
+    expect(wrapper.container.querySelector('[tabindex="-1"]')).toBeInTheDocument();
+  });
+
+  it('should not be focusable if it is not interactive', () => {
+    const wrapper = render(<FilterChip selected={false} text={'label'}/>);
+
+    expect(wrapper.container.querySelector('[tabindex="-1"]')).toBeInTheDocument();
+  });
+
+  it('should call onClick when its clicked', () => {
+    const onClickSpy = jest.fn();
+    const wrapper = render(<FilterChip selected={false} text={'label'} onClick={onClickSpy}/>);
+
+    act(() => {
+      wrapper.getByText('label').click();
+    });
+
+    expect(onClickSpy).toHaveBeenCalled();
+  });
+
+  it('should call onClick when Enter is pressed', () => {
+    const onClickSpy = jest.fn();
+    const wrapper = render(<FilterChip selected={false} text={'label'} onClick={onClickSpy}/>);
+
+    act(() => {
+      fireEvent.keyDown(wrapper.getByText('label'), {key: 'Enter', code: 'Enter'});
+    });
+
+    expect(onClickSpy).toHaveBeenCalled();
+  });
+
+  it('should call onClick when Space is pressed', () => {
+    const onClickSpy = jest.fn();
+    const wrapper = render(<FilterChip selected={false} text={'label'} onClick={onClickSpy}/>);
+
+    act(() => {
+      fireEvent.keyDown(wrapper.getByText('label'), {key: ' ', code: 'Space'});
+    });
+
+    expect(onClickSpy).toHaveBeenCalled();
+  });
+
+  it('should not call onClick when its clicked if disabled', () => {
+    const onClickSpy = jest.fn();
+    const wrapper = render(<FilterChip selected={false} text={'label'} disabled={true} onClick={onClickSpy}/>);
+
+    act(() => {
+      wrapper.getByText('label').click();
+    });
+
+    expect(onClickSpy).not.toHaveBeenCalled();
+  });
+
+  it('should not call onClick when Enter is pressed if disabled', () => {
+    const onClickSpy = jest.fn();
+    const wrapper = render(<FilterChip selected={false} text={'label'} disabled={true} onClick={onClickSpy}/>);
+
+    act(() => {
+      fireEvent.keyDown(wrapper.getByText('label'), {key: 'Enter', code: 'Enter'});
+    });
+
+    expect(onClickSpy).not.toHaveBeenCalled();
+  });
+
+});

package/dist/Chips/__tests__/InputChip.test.tsx

@@ -0,0 +1,155 @@
+import * as React from 'react';
+import {InputChip} from '../index';
+import {act, fireEvent, render} from '../../test-utils';
+import {States} from '../../types';
+import { SystemIcons } from '../../icons';
+
+
+
+
+describe('InputChip', () => {
+
+  it('should render', () => {
+    const wrapper = render(<InputChip variant={States.Default} onRemove={jest.fn()} text={'label'}/>);
+
+    expect(wrapper.queryByText('label')).toBeInTheDocument();
+  });
+
+  it('should render icon', () => {
+    const wrapper = render(<InputChip variant={States.Default} onRemove={jest.fn()} text={'label'} icon={<SystemIcons.Book/>}/>);
+
+    expect(wrapper.queryByLabelText('Book')).toBeInTheDocument();
+  });
+
+  it('should be focusable if it is not disabled and onClick is defined', () => {
+    const wrapper = render(<InputChip variant={States.Default} onRemove={jest.fn()} text={'label'} icon={<SystemIcons.Book/>}
+                                       onClick={jest.fn()}/>);
+
+    expect(wrapper.container.querySelector('[tabindex="0"]')).toBeInTheDocument();
+  });
+
+  it('should not be focusable if it is disabled', () => {
+    const wrapper = render(<InputChip variant={States.Default} onRemove={jest.fn()} text={'label'} icon={<SystemIcons.Book/>}
+                                       disabled={true} onClick={jest.fn()}/>);
+
+    expect(wrapper.container.querySelector('[tabindex="-1"]')).toBeInTheDocument();
+  });
+
+  it('should call onClick when its clicked', () => {
+    const onClickSpy = jest.fn();
+    const wrapper = render(<InputChip variant={States.Default} onRemove={jest.fn()} text={'label'} icon={<SystemIcons.Book/>}
+                                       onClick={onClickSpy}/>);
+
+    act(() => {
+      wrapper.getByText('label').click();
+    });
+
+    expect(onClickSpy).toHaveBeenCalled();
+  });
+
+  it('should call onClick when Enter is pressed', () => {
+    const onClickSpy = jest.fn();
+    const wrapper = render(<InputChip variant={States.Default} onRemove={jest.fn()} text={'label'} icon={<SystemIcons.Book/>}
+                                       onClick={onClickSpy}/>);
+
+    act(() => {
+      fireEvent.keyDown(wrapper.getByText('label'), {key: 'Enter', code: 'Enter'});
+    });
+
+    expect(onClickSpy).toHaveBeenCalled();
+  });
+
+  it('should call onClick when Space is pressed', () => {
+    const onClickSpy = jest.fn();
+    const wrapper = render(<InputChip variant={States.Default} onRemove={jest.fn()} text={'label'} icon={<SystemIcons.Book/>}
+                                       onClick={onClickSpy}/>);
+
+    act(() => {
+      fireEvent.keyDown(wrapper.getByText('label'), {key: ' ', code: 'Space'});
+    });
+
+    expect(onClickSpy).toHaveBeenCalled();
+  });
+
+  it('should not call onClick when its clicked if disabled', () => {
+    const onClickSpy = jest.fn();
+    const wrapper = render(<InputChip variant={States.Default} onRemove={jest.fn()} text={'label'} icon={<SystemIcons.Book/>}
+                                       disabled={true} onClick={onClickSpy}/>);
+
+    act(() => {
+      wrapper.getByText('label').click();
+    });
+
+    expect(onClickSpy).not.toHaveBeenCalled();
+  });
+
+  it('should not call onClick when Enter is pressed if disabled', () => {
+    const onClickSpy = jest.fn();
+    const wrapper = render(<InputChip variant={States.Default} onRemove={jest.fn()} text={'label'} icon={<SystemIcons.Book/>}
+                                       disabled={true} onClick={onClickSpy}/>);
+
+    act(() => {
+      fireEvent.keyDown(wrapper.getByText('label'), {key: 'Enter', code: 'Enter'});
+    });
+
+    expect(onClickSpy).not.toHaveBeenCalled();
+  });
+
+  it('should call onRemove when remove is clicked', () => {
+    const onRemoveSpy = jest.fn();
+    const wrapper = render(<InputChip variant={States.Default} onRemove={onRemoveSpy} text={'label'} icon={<SystemIcons.Book/>}/>);
+
+    act(() => {
+      fireEvent.click(wrapper.getByLabelText('Close'));
+    });
+
+    expect(onRemoveSpy).toHaveBeenCalled();
+  });
+
+  it('should call onRemove when Enter is pressed on remove button', () => {
+    const onRemoveSpy = jest.fn();
+    const wrapper = render(<InputChip variant={States.Default} onRemove={onRemoveSpy} text={'label'} icon={<SystemIcons.Book/>}/>);
+
+    act(() => {
+      fireEvent.keyDown(wrapper.getByLabelText('Close'), {key: 'Enter', code: 'Enter'});
+    });
+
+    expect(onRemoveSpy).toHaveBeenCalled();
+  });
+
+  it('should call onRemove when Space is pressed on remove button', () => {
+    const onRemoveSpy = jest.fn();
+    const wrapper = render(<InputChip variant={States.Default} onRemove={onRemoveSpy} text={'label'} icon={<SystemIcons.Book/>}/>);
+
+    act(() => {
+      fireEvent.keyDown(wrapper.getByLabelText('Close'), {key: ' ', code: 'Space'});
+    });
+
+    expect(onRemoveSpy).toHaveBeenCalled();
+  });
+
+  it('should not call onRemove when remove is clicked and its disabled', () => {
+    const onRemoveSpy = jest.fn();
+    const wrapper = render(<InputChip variant={States.Default} onRemove={onRemoveSpy} disabled={true} text={'label'}
+                                      icon={<SystemIcons.Book/>}/>);
+
+    act(() => {
+      fireEvent.click(wrapper.getByLabelText('Close'));
+    });
+
+    expect(onRemoveSpy).not.toHaveBeenCalled();
+  });
+
+  it('should not call onRemove when Enter is pressed on remove button and it disabled', () => {
+    const onRemoveSpy = jest.fn();
+    const wrapper = render(<InputChip variant={States.Default} onRemove={onRemoveSpy} disabled={true} text={'label'}
+                                      icon={<SystemIcons.Book/>}/>);
+
+    act(() => {
+      fireEvent.keyDown(wrapper.getByLabelText('Close'), {key: 'Enter', code: 'Enter'});
+    });
+
+    expect(onRemoveSpy).not.toHaveBeenCalled();
+  });
+
+});