@laerdal/life-react-components 3.6.0-dev.1.full → 3.6.1

package/dist/Card/VerticalCard/VerticalCardTopSection.js

@@ -0,0 +1,156 @@
+import _pt from "prop-types";
+import * as React from 'react';
+import styled, { useTheme } from 'styled-components';
+import { ComponentS, ComponentTextStyle } from '../../styles/typography';
+import Checkbox from '../../InputFields/Checkbox';
+import { Tag } from '../../Tag';
+import { COLORS } from '../../index';
+import { ImageWithFallbacks } from "../../Image";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const VerticalCardTopSectionImageContainer = styled.div`
+  border-top-right-radius: 8px;
+  border-top-left-radius: 8px;
+  height: 100%;
+  width: 100%;
+  img{
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+    border-top-right-radius: 8px;
+    border-top-left-radius: 8px;
+  }
+`;
+export const VerticalCardTopSectionTagContainer = styled.div`
+  position: absolute;
+
+  top: 16px;
+  left: 16px;
+  width: calc(100% - 32px);
+`;
+export const VerticalCardTopSectionContainer = styled.div`
+  position: relative;
+  width: 100%;
+  overflow: visible;
+
+  ${props => props.disabled ? `
+  img, svg {
+    filter: grayscale(100%);
+  }` : ''}
+`;
+export const VerticalCardTopSectionRibbonContainer = styled.div`
+  min-height: calc(40px - 16px);
+  background-color: ${props => props.$backgroundColor};
+  width: calc(100% - 32px);
+  position: absolute;
+  bottom: 0px;
+  left: 0px;
+  padding: 8px 16px 8px 16px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+
+  svg {
+    color: ${props => props.$color};
+    width: 24px;
+    height: 24px;
+    flex-grow: 0;
+    flex-shrink: 0;
+  }
+`;
+export const VerticalCardTopSectionCheckboxContainer = styled.div`
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 120;
+
+  .checkbox-icon {
+    background-color: ${props => COLORS.getColor('white', props.theme)};
+  }
+`;
+const VerticalCardTopSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    selected,
+    setSelected,
+    image,
+    tagLabel,
+    tagIcon,
+    tagVariant = 'positive',
+    highlightRibbonIcon,
+    highlightRibbonText,
+    highlightRibbonContentColor,
+    highlightRibbonBgColor,
+    disabled
+  } = _ref;
+  const theme = useTheme();
+  return /*#__PURE__*/_jsxs(VerticalCardTopSectionContainer, {
+    disabled: disabled,
+    "data-testid": 'card-topSection',
+    style: {
+      height: image?.height ?? 200
+    },
+    children: [image && /*#__PURE__*/_jsx(VerticalCardTopSectionImageContainer, {
+      role: "none",
+      "aria-hidden": "true",
+      children: /*#__PURE__*/_jsx(ImageWithFallbacks, {
+        fallbacks: image.fallbackSrc ?? '',
+        src: image.src,
+        alt: "",
+        loader: image.loader ?? false,
+        width: image.width,
+        height: image.height
+      })
+    }), (!!selected || !!setSelected) && /*#__PURE__*/_jsx(VerticalCardTopSectionCheckboxContainer, {
+      "data-testid": 'card-topSection-checkbox',
+      children: /*#__PURE__*/_jsx(Checkbox, {
+        ref: ref,
+        disabled: disabled,
+        select: selected => setSelected && setSelected(selected),
+        selected: selected || false
+      })
+    }), (tagLabel || tagIcon) && /*#__PURE__*/_jsx(VerticalCardTopSectionTagContainer, {
+      children: /*#__PURE__*/_jsx(Tag, {
+        label: tagLabel,
+        variant: tagVariant,
+        icon: tagIcon
+      })
+    }), (highlightRibbonIcon || highlightRibbonText) && /*#__PURE__*/_jsxs(VerticalCardTopSectionRibbonContainer, {
+      "data-testid": 'card-topSection-ribbon',
+      $color: highlightRibbonContentColor ?? '',
+      $backgroundColor: disabled ? COLORS.generateToken({
+        componentType: 'bg-fill',
+        state: 'disabled'
+      }, theme) : highlightRibbonBgColor ?? '',
+      children: [highlightRibbonIcon, highlightRibbonText && /*#__PURE__*/_jsx(ComponentS, {
+        color: disabled ? COLORS.generateToken({
+          componentType: 'text',
+          isOnFill: true,
+          state: 'disabled'
+        }, theme) : highlightRibbonContentColor ?? '',
+        textStyle: ComponentTextStyle.Regular,
+        children: highlightRibbonText
+      })]
+    })]
+  });
+});
+VerticalCardTopSection.propTypes = {
+  selected: _pt.bool,
+  setSelected: _pt.func,
+  tagLabel: _pt.string,
+  tagIcon: _pt.node,
+  highlightRibbonText: _pt.string,
+  highlightRibbonIcon: _pt.node,
+  highlightRibbonContentColor: _pt.string,
+  highlightRibbonBgColor: _pt.string,
+  image: _pt.shape({
+    src: _pt.string.isRequired,
+    fallbackSrc: _pt.string,
+    alt: _pt.string.isRequired,
+    height: _pt.string,
+    width: _pt.string,
+    loader: _pt.bool
+  }),
+  disabled: _pt.bool
+};
+export default VerticalCardTopSection;
+//# sourceMappingURL=VerticalCardTopSection.js.map

package/dist/Card/VerticalCard/VerticalCardTopSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VerticalCardTopSection.js","names":["React","styled","useTheme","ComponentS","ComponentTextStyle","Checkbox","Tag","COLORS","ImageWithFallbacks","jsx","_jsx","jsxs","_jsxs","VerticalCardTopSectionImageContainer","div","VerticalCardTopSectionTagContainer","VerticalCardTopSectionContainer","props","disabled","VerticalCardTopSectionRibbonContainer","$backgroundColor","$color","VerticalCardTopSectionCheckboxContainer","getColor","theme","VerticalCardTopSection","forwardRef","_ref","ref","selected","setSelected","image","tagLabel","tagIcon","tagVariant","highlightRibbonIcon","highlightRibbonText","highlightRibbonContentColor","highlightRibbonBgColor","style","height","children","role","fallbacks","fallbackSrc","src","alt","loader","width","select","label","variant","icon","generateToken","componentType","state","color","isOnFill","textStyle","Regular","propTypes","_pt","bool","func","string","node","shape","isRequired"],"sources":["../../../src/Card/VerticalCard/VerticalCardTopSection.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport {ComponentS, ComponentTextStyle} from '../../styles/typography';\r\nimport Checkbox from '../../InputFields/Checkbox';\r\nimport {Tag, TagVariants} from '../../Tag';\r\n\r\nimport {COLORS} from '../../index';\r\nimport {ImageWithFallbacks} from \"../../Image\";\r\n\r\nexport interface VerticalCardTopSectionProps {\r\n  /** Sets initial state of select Checkbox. */\r\n  selected?: boolean;\r\n  /** If this action is provided, then Checkbox will be shown on the top-right corner of the Card. */\r\n  setSelected?: (arg0: boolean) => void;\r\n  /** Label shown in the tag in the top-left corner of the Card. */\r\n  tagLabel?: string;\r\n  /** Icon shown in the tag in the top-left corner of the Card. */\r\n  tagIcon?: React.ReactNode;\r\n  /** Tag variant shown in the tag in the top-left corner of the Card. */\r\n  tagVariant?: TagVariants;\r\n  /** Text shown in the Ribbon, under the Image.  */\r\n  highlightRibbonText?: string;\r\n  /** Icon shown in the Ribbon, under the Image.  */\r\n  highlightRibbonIcon?: React.ReactNode;\r\n  /** Content color (text and image) of the Ribbon, under the Image.  */\r\n  highlightRibbonContentColor?: string;\r\n  /** Background color of the Ribbon, shown under the Image.  */\r\n  highlightRibbonBgColor?: string;\r\n  /** Details of the Image shown in the section. */\r\n  image?: { src: string; fallbackSrc?: string; alt: string, height?: string; width?: string; loader?: boolean };\r\n  /** This property is automatically set in the Card itself and is based on 'disabled' flag of CardProps. */\r\n  disabled?: boolean;\r\n}\r\n\r\nexport const VerticalCardTopSectionImageContainer = styled.div`\r\n  border-top-right-radius: 8px;\r\n  border-top-left-radius: 8px;\r\n  height: 100%;\r\n  width: 100%;\r\n  img{\r\n    object-fit: cover;\r\n    width: 100%;\r\n    height: 100%;\r\n    border-top-right-radius: 8px;\r\n    border-top-left-radius: 8px;\r\n  }\r\n`;\r\n\r\nexport const VerticalCardTopSectionTagContainer = styled.div`\r\n  position: absolute;\r\n\r\n  top: 16px;\r\n  left: 16px;\r\n  width: calc(100% - 32px);\r\n`;\r\n\r\nexport const VerticalCardTopSectionContainer = styled.div<{ disabled?: boolean }>`\r\n  position: relative;\r\n  width: 100%;\r\n  overflow: visible;\r\n\r\n  ${props => props.disabled ? `\r\n  img, svg {\r\n    filter: grayscale(100%);\r\n  }` : ''}\r\n`;\r\n\r\nexport const VerticalCardTopSectionRibbonContainer = styled.div<{ $color: string; $backgroundColor: string }>`\r\n  min-height: calc(40px - 16px);\r\n  background-color: ${props => props.$backgroundColor};\r\n  width: calc(100% - 32px);\r\n  position: absolute;\r\n  bottom: 0px;\r\n  left: 0px;\r\n  padding: 8px 16px 8px 16px;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  gap: 8px;\r\n\r\n  svg {\r\n    color: ${props => props.$color};\r\n    width: 24px;\r\n    height: 24px;\r\n    flex-grow: 0;\r\n    flex-shrink: 0;\r\n  }\r\n`;\r\n\r\nexport const VerticalCardTopSectionCheckboxContainer = styled.div`\r\n  position: absolute;\r\n  top: 0;\r\n  right: 0;\r\n  z-index: 120;\r\n\r\n  .checkbox-icon {\r\n    background-color: ${props => COLORS.getColor('white', props.theme)};\r\n  }\r\n`;\r\n\r\nconst VerticalCardTopSection = React.forwardRef(({\r\n                                           selected,\r\n                                           setSelected,\r\n                                           image,\r\n                                           tagLabel,\r\n                                           tagIcon,\r\n                                           tagVariant = 'positive',\r\n                                           highlightRibbonIcon,\r\n                                           highlightRibbonText,\r\n                                           highlightRibbonContentColor,\r\n                                           highlightRibbonBgColor,\r\n                                           disabled\r\n                                         }: VerticalCardTopSectionProps, ref: React.Ref<HTMLDivElement>) => {\r\n\r\n  const theme = useTheme();\r\n  return (\r\n    <VerticalCardTopSectionContainer disabled={disabled} data-testid={'card-topSection'} style={{height: image?.height ?? 200}}>\r\n      {\r\n        image &&\r\n        <VerticalCardTopSectionImageContainer role=\"none\" aria-hidden=\"true\">\r\n            <ImageWithFallbacks fallbacks={image.fallbackSrc ?? ''} src={image.src} alt=\"\" loader={image.loader ?? false} width={image.width} height={image.height}/>\r\n        </VerticalCardTopSectionImageContainer>\r\n      }\r\n      {(!!selected || !!setSelected) && (\r\n        <VerticalCardTopSectionCheckboxContainer data-testid={'card-topSection-checkbox'}>\r\n          <Checkbox ref={ref}\r\n                    disabled={disabled}\r\n                    select={(selected: boolean) => setSelected && setSelected(selected)}\r\n                    selected={selected || false}/>\r\n        </VerticalCardTopSectionCheckboxContainer>\r\n      )}\r\n      {(tagLabel || tagIcon) && (\r\n        <VerticalCardTopSectionTagContainer>\r\n          <Tag label={tagLabel} variant={tagVariant} icon={tagIcon}/>\r\n        </VerticalCardTopSectionTagContainer>\r\n      )}\r\n      {(highlightRibbonIcon || highlightRibbonText) && (\r\n        <VerticalCardTopSectionRibbonContainer data-testid={'card-topSection-ribbon'} $color={highlightRibbonContentColor ?? ''}\r\n                             $backgroundColor={disabled ? COLORS.generateToken({componentType:'bg-fill', state:'disabled'}, theme) : highlightRibbonBgColor ?? ''}>\r\n          {highlightRibbonIcon}\r\n          {highlightRibbonText && (\r\n            <ComponentS color={disabled ? COLORS.generateToken({componentType:'text', isOnFill: true, state:'disabled'}, theme) : highlightRibbonContentColor ?? ''} textStyle={ComponentTextStyle.Regular}>\r\n              {highlightRibbonText}\r\n            </ComponentS>\r\n          )}\r\n        </VerticalCardTopSectionRibbonContainer>\r\n      )}\r\n    </VerticalCardTopSectionContainer>\r\n  );\r\n});\r\n\r\nexport default VerticalCardTopSection;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Card/VerticalCard/__tests__/VerticalCard.test.tsx

@@ -0,0 +1,124 @@
+import React from 'react';
+import { fireEvent, render } from '../../../test-utils';
+import 'jest-styled-components';
+import { VerticalCard } from '../../VerticalCard/index';
+import { COLORS } from '../../../styles';
+import { SystemIcons } from '../../../icons';
+
+
+describe('<VerticalCard />',()=>{
+    it('renders top section', async () => {
+        const{getByTestId} = render(
+            <VerticalCard topSectionProps={{disabled: false}} disabled/>
+        );
+
+        expect(getByTestId('card-topSection')).toBeDefined();
+    });
+
+    it('renders middle section', async () => {
+        const{getByTestId} = render(
+            <VerticalCard middleSectionProps={{title:'title',disabled:false}} disabled/>
+        );
+
+        expect(getByTestId('card-middleSection')).toBeDefined();
+    });
+
+    it('renders bottom section', async () => {
+        const{getByTestId} = render(
+            <VerticalCard bottomSectionProps={{disabled:false}} disabled/>
+        );
+
+        expect(getByTestId('card-bottomSection')).toBeDefined();
+    });
+
+    it('fires card clicked event on click', async () => {
+        const cardClicked = jest.fn();
+        const{getByTestId} = render(
+            <VerticalCard bottomSectionProps={{disabled:false}} disabled={false} onCardClicked={cardClicked}/>
+        );
+
+        fireEvent.click(getByTestId('card-link'));
+        expect(cardClicked).toHaveBeenCalled();
+    });
+
+    it('fires card clicked event on keyDown', async () => {
+        const cardClicked = jest.fn();
+        const{getByTestId} = render(
+            <VerticalCard bottomSectionProps={{disabled:false}} disabled={false} onCardClicked={cardClicked}/>
+        );
+
+        fireEvent.keyDown(getByTestId('card-wrapper'), {key: 'Enter', code: 'Enter', charCode: 13});
+        expect(cardClicked).toHaveBeenCalled();
+    });
+
+    it('renders tag in top section', async () => {
+        const{getByText} = render(
+            <VerticalCard topSectionProps={{disabled: false, tagLabel:'test_label'}} disabled/>
+        );
+
+        expect(getByText('test_label')).toBeDefined();
+    });
+
+    it('renders checkbox in top section', async () => {
+        const{getByTestId} = render(
+            <VerticalCard topSectionProps={{disabled: false, selected: true}} disabled/>
+        );
+
+        expect(getByTestId('card-topSection-checkbox')).toBeDefined();
+    });
+
+    it('renders highlight ribbon in top section', async () => {
+        const{getByTestId, getByText} = render(
+            <VerticalCard topSectionProps={{disabled: false, highlightRibbonText:'testRibbon', highlightRibbonBgColor:'red'}} disabled={false}/>
+        );
+
+        expect(getByText('testRibbon')).toBeDefined();
+        expect(getByTestId('card-topSection-ribbon')).toHaveStyleRule('background-color','red');
+    });
+
+    it('renders title ,description and category label in middle section', async () => {
+        const{getByText} = render(
+            <VerticalCard middleSectionProps={{title:'testTitle', disabled: false, description:'testDescription', categoryLabel:'testCatLabel'}} disabled={false}/>
+        );
+
+        expect(getByText('testTitle')).toBeDefined();
+        expect(getByText('testDescription')).toBeDefined();
+        expect(getByText('testCatLabel')).toBeDefined();
+    });
+
+    it('renders tags in middle section', async () => {
+        const{getByText} = render(
+            <VerticalCard middleSectionProps={{title:'testTitle', disabled: false, tags:[{label:'testTag'}], row2Tags:[{label:'testTag2'}]}} disabled={false}/>
+        );
+
+        expect(getByText('testTitle')).toBeDefined();
+        expect(getByText('testTag2')).toBeDefined();
+    });
+
+    it('renders note text in bottom section', async () => {
+        const{getByText} = render(
+            <VerticalCard bottomSectionProps={{disabled: false, noteLeft:'leftNote', noteRight:'rightNote'}} disabled={false}/>
+        );
+
+        expect(getByText('leftNote')).toBeDefined();
+        expect(getByText('rightNote')).toBeDefined();
+    });
+
+    it('renders author in bottom section', async () => {
+        const{getByText,getByTestId} = render(
+            <VerticalCard bottomSectionProps={{disabled: true, authorName:'testAuthor'}} disabled={true}/>
+        );
+
+        expect(getByText('testAuthor')).toBeDefined();
+        expect(getByTestId('card-bottomSection-author')).toBeDefined();
+    });
+
+    it('renders actions in bottom section', async () => {
+        const{getByText,getByTestId} = render(
+            <VerticalCard bottomSectionProps={{disabled: true, authorName:'testAuthor', actions:[{icon:<SystemIcons.Add/>,onClick:()=>{}}]}} disabled={true}/>
+        );
+
+        expect(getByText('testAuthor')).toBeDefined();
+        expect(getByTestId('card-bottomSection-author')).toBeDefined();
+    });
+})

package/dist/Card/__tests__/Card.test.tsx

@@ -0,0 +1,146 @@
+import React from 'react';
+import { fireEvent, getByRole, render } from '../../test-utils';
+import 'jest-styled-components';
+import { Card } from '../..';
+import { COLORS } from '../../styles';
+import { SystemIcons } from '../../icons';
+
+describe('<Card />',()=>{
+    it('renders top section', async () => {
+        const{getByTestId} = render(
+            <Card topSectionProps={{disabled: false}} disabled/>
+        );
+
+        expect(getByTestId('card-topSection')).toBeDefined();
+        //expect(getByTestId('card-middleSection')).toBeDefined();
+    });
+
+    it('renders middle section', async () => {
+        const{getByTestId} = render(
+            <Card middleSectionProps={{title:'title',disabled:false}} disabled/>
+        );
+
+        expect(getByTestId('card-middleSection')).toBeDefined();
+    });
+
+    it('renders bottom section', async () => {
+        const{getByTestId} = render(
+            <Card bottomSectionProps={{disabled:false}} disabled/>
+        );
+
+        expect(getByTestId('card-bottomSection')).toBeDefined();
+    });
+
+    it('fires card clicked event on click', async () => {
+        const cardClicked = jest.fn();
+        const{getByTestId} = render(
+            <Card bottomSectionProps={{disabled:false}} disabled={false} onCardClicked={cardClicked}/>
+        );
+
+        fireEvent.click(getByTestId('card-link'));
+        expect(cardClicked).toHaveBeenCalled();
+    });
+
+    it('fires card clicked event on keyDown', async () => {
+        const cardClicked = jest.fn();
+        const{getByTestId} = render(
+            <Card bottomSectionProps={{disabled:false}} disabled={false} onCardClicked={cardClicked}/>
+        );
+
+        fireEvent.keyDown(getByTestId('card-wrapper'), {key: 'Enter', code: 'Enter', charCode: 13});
+        expect(cardClicked).toHaveBeenCalled();
+    });
+
+    it('renders tag in top section', async () => {
+        const{getByText} = render(
+            <Card topSectionProps={{disabled: false, tagLabel:'test_label'}} disabled/>
+        );
+
+        expect(getByText('test_label')).toBeDefined();
+    });
+
+    it('renders checkbox in top section', async () => {
+        const{getByTestId} = render(
+            <Card topSectionProps={{disabled: false, selected: true}} disabled/>
+        );
+
+        expect(getByTestId('card-topSection-checkbox')).toBeDefined();
+    });
+
+    it('renders highlight ribbon in top section', async () => {
+        const{getByTestId, getByText} = render(
+            <Card topSectionProps={{disabled: false, highlightRibbonText:'testRibbon', highlightRibbonBgColor:'red'}} disabled={false}/>
+        );
+
+        expect(getByText('testRibbon')).toBeDefined();
+        expect(getByTestId('card-topSection-ribbon')).toHaveStyleRule('background-color','red');
+    });
+
+    it('renders title ,description and category label in middle section', async () => {
+        const{getByText} = render(
+            <Card middleSectionProps={{title:'testTitle', disabled: false, description:'testDescription', categoryLabel:'testCatLabel'}} disabled={false}/>
+        );
+
+        expect(getByText('testTitle')).toBeDefined();
+        expect(getByText('testDescription')).toBeDefined();
+        expect(getByText('testCatLabel')).toBeDefined();
+    });
+
+    it('renders tags in middle section', async () => {
+        const{getByText} = render(
+            <Card middleSectionProps={{title:'testTitle', disabled: false, tags:[{label:'testTag'}], row2Tags:[{label:'testTag2'}]}} disabled={false}/>
+        );
+
+        expect(getByText('testTitle')).toBeDefined();
+        expect(getByText('testTag2')).toBeDefined();
+    });
+
+    it('renders note text in bottom section', async () => {
+        const{getByText} = render(
+            <Card bottomSectionProps={{disabled: false, noteLeft:'leftNote', noteRight:'rightNote'}} disabled={false}/>
+        );
+
+        expect(getByText('leftNote')).toBeDefined();
+        expect(getByText('rightNote')).toBeDefined();
+    });
+
+    it('renders author in bottom section', async () => {
+        const{getByText,getByTestId} = render(
+            <Card bottomSectionProps={{disabled: true, authorName:'testAuthor'}} disabled={true}/>
+        );
+
+        expect(getByText('testAuthor')).toBeDefined();
+        expect(getByTestId('card-bottomSection-author')).toBeDefined();
+    });
+
+    it('renders actions in bottom section', async () => {
+        const{getByText,getByTestId} = render(
+            <Card bottomSectionProps={{disabled: true, authorName:'testAuthor', actions:[{icon:<SystemIcons.Add/>,onClick:()=>{}}]}} disabled={true}/>
+        );
+
+        expect(getByText('testAuthor')).toBeDefined();
+        expect(getByTestId('card-bottomSection-author')).toBeDefined();
+    });
+
+    it('fires leftButton click event on click', async () => {
+        const leftButtonClicked = jest.fn();
+        const{getByRole} = render(
+            <Card bottomSectionProps={{disabled: true, 
+                authorName:'testAuthor', 
+                actions:[],
+                leftButton: {
+                    variant: 'tertiary',
+                    buttonText: 'button',
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      leftButtonClicked();
+                    }
+                  }
+                }} 
+            disabled={true}/>
+        );
+
+        fireEvent.click(getByRole('button'));
+        expect(leftButtonClicked).toBeCalledTimes(1);
+    });
+})

package/dist/Chips/ChoiceChips.cjs

@@ -84,7 +84,6 @@ var ChoiceChips = function ChoiceChips(_ref) {
         tabIndex: disabled ? -1 : 0,
         className: "".concat(size, " ").concat(disabled ? 'disabled' : '', " ").concat(selectedChip === value ? 'default' : 'outline', " interactive ").concat(className || ''),
         onMouseDown: _common.defaultOnMouseDownHandler,
-        "aria-checked": selectedChip === value,
         onClick: function onClick() {
           return !disabled && onSelectChip(item);
         },

package/dist/Chips/ChoiceChips.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ChoiceChips.cjs","names":["React","_interopRequireWildcard","require","_ChipStyles","_common","_types","_jsxRuntime","_excluded","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","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","ChoiceChips","_ref","selected","disabled","onClick","values","dataTestId","_React$useState","useState","_React$useState2","_slicedToArray2","selectedChip","setSelectedChip","useEffect","onSelectChip","value","handleKeyDown","key","jsx","role","children","map","item","_item$size","size","Size","Medium","label","className","rest","_objectWithoutProperties2","ChipContainer","tabIndex","concat","onMouseDown","defaultOnMouseDownHandler","onKeyDown","ChipContentContainer","ChipContent","_default","exports"],"sources":["../../src/Chips/ChoiceChips.tsx"],"sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\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 {ChipValue, ChoiceChipProps} from './ChipTypes';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\nimport {Size} from '../types';\r\n\r\nconst ChoiceChips: React.FunctionComponent<ChoiceChipProps> = ({\r\n                                                                 selected,\r\n                                                                 disabled,\r\n                                                                 onClick,\r\n                                                                 values,\r\n                                                                 dataTestId\r\n                                                               }: ChoiceChipProps) => {\r\n  /**\r\n   * Globally used variables within the component.\r\n   */\r\n  const [selectedChip, setSelectedChip] = React.useState<string>('');\r\n\r\n  /**\r\n   * Set the selected value for the chip.\r\n   */\r\n  React.useEffect(() => {\r\n    setSelectedChip(selected);\r\n  }, [selected]);\r\n\r\n  /**\r\n   * Sets selected chip and fires an event to parent component.\r\n   * @param value - Chip which was selected.\r\n   */\r\n  const onSelectChip = (value: ChipValue) => {\r\n    // Update selected chip\r\n    setSelectedChip(value.value);\r\n\r\n    // Fire the event\r\n    onClick && onClick(value);\r\n  };\r\n\r\n  const handleKeyDown = (e: any, value: ChipValue) => {\r\n    if (e.key === 'Enter' || e.key === ' ') {\r\n      onSelectChip(value);\r\n    }\r\n  };\r\n\r\n  /**\r\n   * Return Choice Chip component.\r\n   */\r\n  return (\r\n    <div role=\"radiogroup\" data-testid={dataTestId}>\r\n      {values.map((item: ChipValue) => {\r\n        const {value, size = Size.Medium, label, className, ...rest } = item;\r\n        return (\r\n          <ChipContainer\r\n            role=\"radio\"\r\n            key={value}\r\n            tabIndex={disabled ? -1 : 0}\r\n            className={`${size} ${disabled ? 'disabled' : ''} ${selectedChip === value ? 'default' : 'outline'} interactive ${className || ''}`}\r\n            onMouseDown={defaultOnMouseDownHandler}\r\n            aria-checked={selectedChip === value}\r\n            onClick={() => !disabled && onSelectChip(item)}\r\n            onKeyDown={e => !disabled && handleKeyDown(e, item)}\r\n            {...rest}>\r\n            <ChipContentContainer>\r\n              <ChipContent>\r\n                {label}\r\n              </ChipContent>\r\n            </ChipContentContainer>\r\n          </ChipContainer>\r\n        );\r\n      })}\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default ChoiceChips;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ChoiceChips.cjs","names":["React","_interopRequireWildcard","require","_ChipStyles","_common","_types","_jsxRuntime","_excluded","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","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","ChoiceChips","_ref","selected","disabled","onClick","values","dataTestId","_React$useState","useState","_React$useState2","_slicedToArray2","selectedChip","setSelectedChip","useEffect","onSelectChip","value","handleKeyDown","key","jsx","role","children","map","item","_item$size","size","Size","Medium","label","className","rest","_objectWithoutProperties2","ChipContainer","tabIndex","concat","onMouseDown","defaultOnMouseDownHandler","onKeyDown","ChipContentContainer","ChipContent","_default","exports"],"sources":["../../src/Chips/ChoiceChips.tsx"],"sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\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 {ChipValue, ChoiceChipProps} from './ChipTypes';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\nimport {Size} from '../types';\r\n\r\nconst ChoiceChips: React.FunctionComponent<ChoiceChipProps> = ({\r\n                                                                 selected,\r\n                                                                 disabled,\r\n                                                                 onClick,\r\n                                                                 values,\r\n                                                                 dataTestId\r\n                                                               }: ChoiceChipProps) => {\r\n  /**\r\n   * Globally used variables within the component.\r\n   */\r\n  const [selectedChip, setSelectedChip] = React.useState<string>('');\r\n\r\n  /**\r\n   * Set the selected value for the chip.\r\n   */\r\n  React.useEffect(() => {\r\n    setSelectedChip(selected);\r\n  }, [selected]);\r\n\r\n  /**\r\n   * Sets selected chip and fires an event to parent component.\r\n   * @param value - Chip which was selected.\r\n   */\r\n  const onSelectChip = (value: ChipValue) => {\r\n    // Update selected chip\r\n    setSelectedChip(value.value);\r\n\r\n    // Fire the event\r\n    onClick && onClick(value);\r\n  };\r\n\r\n  const handleKeyDown = (e: any, value: ChipValue) => {\r\n    if (e.key === 'Enter' || e.key === ' ') {\r\n      onSelectChip(value);\r\n    }\r\n  };\r\n\r\n  /**\r\n   * Return Choice Chip component.\r\n   */\r\n  return (\r\n    <div role=\"radiogroup\" data-testid={dataTestId}>\r\n      {values.map((item: ChipValue) => {\r\n        const {value, size = Size.Medium, label, className, ...rest } = item;\r\n        return (\r\n          <ChipContainer\r\n            role=\"radio\"\r\n            key={value}\r\n            tabIndex={disabled ? -1 : 0}\r\n            className={`${size} ${disabled ? 'disabled' : ''} ${selectedChip === value ? 'default' : 'outline'} interactive ${className || ''}`}\r\n            onMouseDown={defaultOnMouseDownHandler}\r\n            onClick={() => !disabled && onSelectChip(item)}\r\n            onKeyDown={e => !disabled && handleKeyDown(e, item)}\r\n            {...rest}>\r\n            <ChipContentContainer>\r\n              <ChipContent>\r\n                {label}\r\n              </ChipContent>\r\n            </ChipContentContainer>\r\n          </ChipContainer>\r\n        );\r\n      })}\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default ChoiceChips;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Chips/ChoiceChips.js

@@ -77,7 +77,6 @@ var ChoiceChips = function ChoiceChips(_ref) {
         tabIndex: disabled ? -1 : 0,
         className: "".concat(size, " ").concat(disabled ? 'disabled' : '', " ").concat(selectedChip === value ? 'default' : 'outline', " interactive ").concat(className || ''),
         onMouseDown: defaultOnMouseDownHandler,
-        "aria-checked": selectedChip === value,
         onClick: function onClick() {
           return !disabled && onSelectChip(item);
         },

package/dist/Chips/ChoiceChips.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChoiceChips.js","names":["React","ChipContainer","ChipContent","ChipContentContainer","defaultOnMouseDownHandler","Size","jsx","_jsx","ChoiceChips","_ref","selected","disabled","onClick","values","dataTestId","_React$useState","useState","_React$useState2","_slicedToArray","selectedChip","setSelectedChip","useEffect","onSelectChip","value","handleKeyDown","e","key","role","children","map","item","_item$size","size","Medium","label","className","rest","_objectWithoutProperties","_excluded","_objectSpread","tabIndex","concat","onMouseDown","onKeyDown"],"sources":["../../src/Chips/ChoiceChips.tsx"],"sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\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 {ChipValue, ChoiceChipProps} from './ChipTypes';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\nimport {Size} from '../types';\r\n\r\nconst ChoiceChips: React.FunctionComponent<ChoiceChipProps> = ({\r\n                                                                 selected,\r\n                                                                 disabled,\r\n                                                                 onClick,\r\n                                                                 values,\r\n                                                                 dataTestId\r\n                                                               }: ChoiceChipProps) => {\r\n  /**\r\n   * Globally used variables within the component.\r\n   */\r\n  const [selectedChip, setSelectedChip] = React.useState<string>('');\r\n\r\n  /**\r\n   * Set the selected value for the chip.\r\n   */\r\n  React.useEffect(() => {\r\n    setSelectedChip(selected);\r\n  }, [selected]);\r\n\r\n  /**\r\n   * Sets selected chip and fires an event to parent component.\r\n   * @param value - Chip which was selected.\r\n   */\r\n  const onSelectChip = (value: ChipValue) => {\r\n    // Update selected chip\r\n    setSelectedChip(value.value);\r\n\r\n    // Fire the event\r\n    onClick && onClick(value);\r\n  };\r\n\r\n  const handleKeyDown = (e: any, value: ChipValue) => {\r\n    if (e.key === 'Enter' || e.key === ' ') {\r\n      onSelectChip(value);\r\n    }\r\n  };\r\n\r\n  /**\r\n   * Return Choice Chip component.\r\n   */\r\n  return (\r\n    <div role=\"radiogroup\" data-testid={dataTestId}>\r\n      {values.map((item: ChipValue) => {\r\n        const {value, size = Size.Medium, label, className, ...rest } = item;\r\n        return (\r\n          <ChipContainer\r\n            role=\"radio\"\r\n            key={value}\r\n            tabIndex={disabled ? -1 : 0}\r\n            className={`${size} ${disabled ? 'disabled' : ''} ${selectedChip === value ? 'default' : 'outline'} interactive ${className || ''}`}\r\n            onMouseDown={defaultOnMouseDownHandler}\r\n            aria-checked={selectedChip === value}\r\n            onClick={() => !disabled && onSelectChip(item)}\r\n            onKeyDown={e => !disabled && handleKeyDown(e, item)}\r\n            {...rest}>\r\n            <ChipContentContainer>\r\n              <ChipContent>\r\n                {label}\r\n              </ChipContent>\r\n            </ChipContentContainer>\r\n          </ChipContainer>\r\n        );\r\n      })}\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default ChoiceChips;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ChoiceChips.js","names":["React","ChipContainer","ChipContent","ChipContentContainer","defaultOnMouseDownHandler","Size","jsx","_jsx","ChoiceChips","_ref","selected","disabled","onClick","values","dataTestId","_React$useState","useState","_React$useState2","_slicedToArray","selectedChip","setSelectedChip","useEffect","onSelectChip","value","handleKeyDown","e","key","role","children","map","item","_item$size","size","Medium","label","className","rest","_objectWithoutProperties","_excluded","_objectSpread","tabIndex","concat","onMouseDown","onKeyDown"],"sources":["../../src/Chips/ChoiceChips.tsx"],"sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\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 {ChipValue, ChoiceChipProps} from './ChipTypes';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\nimport {Size} from '../types';\r\n\r\nconst ChoiceChips: React.FunctionComponent<ChoiceChipProps> = ({\r\n                                                                 selected,\r\n                                                                 disabled,\r\n                                                                 onClick,\r\n                                                                 values,\r\n                                                                 dataTestId\r\n                                                               }: ChoiceChipProps) => {\r\n  /**\r\n   * Globally used variables within the component.\r\n   */\r\n  const [selectedChip, setSelectedChip] = React.useState<string>('');\r\n\r\n  /**\r\n   * Set the selected value for the chip.\r\n   */\r\n  React.useEffect(() => {\r\n    setSelectedChip(selected);\r\n  }, [selected]);\r\n\r\n  /**\r\n   * Sets selected chip and fires an event to parent component.\r\n   * @param value - Chip which was selected.\r\n   */\r\n  const onSelectChip = (value: ChipValue) => {\r\n    // Update selected chip\r\n    setSelectedChip(value.value);\r\n\r\n    // Fire the event\r\n    onClick && onClick(value);\r\n  };\r\n\r\n  const handleKeyDown = (e: any, value: ChipValue) => {\r\n    if (e.key === 'Enter' || e.key === ' ') {\r\n      onSelectChip(value);\r\n    }\r\n  };\r\n\r\n  /**\r\n   * Return Choice Chip component.\r\n   */\r\n  return (\r\n    <div role=\"radiogroup\" data-testid={dataTestId}>\r\n      {values.map((item: ChipValue) => {\r\n        const {value, size = Size.Medium, label, className, ...rest } = item;\r\n        return (\r\n          <ChipContainer\r\n            role=\"radio\"\r\n            key={value}\r\n            tabIndex={disabled ? -1 : 0}\r\n            className={`${size} ${disabled ? 'disabled' : ''} ${selectedChip === value ? 'default' : 'outline'} interactive ${className || ''}`}\r\n            onMouseDown={defaultOnMouseDownHandler}\r\n            onClick={() => !disabled && onSelectChip(item)}\r\n            onKeyDown={e => !disabled && handleKeyDown(e, item)}\r\n            {...rest}>\r\n            <ChipContentContainer>\r\n              <ChipContent>\r\n                {label}\r\n              </ChipContent>\r\n            </ChipContentContainer>\r\n          </ChipContainer>\r\n        );\r\n      })}\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default ChoiceChips;\r\n"],"mappings":"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","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();
+  });
+
+
+});