npm - @popsure/dirty-swan - Versions diffs - 0.57.8 → 0.57.9 - Mend

@popsure/dirty-swan 0.57.8 → 0.57.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (31) hide show

package/dist/esm/components/input/radio/index.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.stories.js","sources":["../../../../../../src/lib/components/input/radio/index.stories.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { Radio, RadioProps } from '.';\nimport { images } from '../../../util/images';\n\nconst story = {\n title: 'JSX/Inputs/Radio',\n component: Radio,\n argTypes: {\n options: {\n description:\n 'Object that contains the possible options for rendering in the input.',\n },\n value: {\n description: 'Current checked values.',\n },\n onChange: {\n description: 'Function called everytime a value changes.',\n action: true,\n table: {\n category: 'Callbacks',\n },\n },\n wide: {\n description:\n 'Property that defines if options should fill 100% of available horizontal space',\n },\n inlineLayout: {\n description:\n 'Property that defines if options should show inline instead of block. Check inline radio options story for examples.',\n },\n inlineIcon: {\n description: 'Property that defines if options should show inline with icon',\n },\n classNames: {\n description: 'ClassNames for custom styling',\n },\n bordered: {\n description: 'Property that defines if option should show with border',\n },\n disabled: {\n description:\n 'Property that defines if the input and corresponding label are disabled and not clickable',\n },\n },\n args: {\n options: {\n CAT: {\n title: 'Cat',\n description: 'At least 1',\n },\n DOG: {\n title: 'Dog',\n description: 'At least 2',\n },\n NONE: {\n title: 'None',\n description: 'No pets',\n },\n },\n value: '',\n wide: false,\n classNames: {\n container: '',\n label: '',\n option: '',\n },\n bordered: true,\n inlineLayout: false,\n inlineIcon: false,\n disabled: false,\n }\n};\n\nexport const RadioStory = ({\n onChange,\n options,\n wide,\n classNames,\n inlineLayout,\n bordered,\n disabled,\n}: RadioProps<string>) => {\n const [checkedValues, setCheckedValues] = useState<string>();\n\n const handleOnChange = (newValue: string) => {\n setCheckedValues(newValue);\n onChange(newValue);\n };\n\n return (\n <Radio\n wide={wide}\n options={options}\n onChange={handleOnChange}\n value={checkedValues}\n classNames={classNames}\n inlineLayout={inlineLayout}\n bordered={bordered}\n disabled={disabled}\n />\n );\n};\n\nexport const RadioWithCustomWrapperStyles = ({\n onChange,\n}: RadioProps<string>) => {\n const [checkedValues, setCheckedValues] = useState<string>();\n\n const handleOnChange = (newValue: string) => {\n setCheckedValues(newValue);\n onChange(newValue);\n };\n\n return (\n <Radio\n onChange={handleOnChange}\n value={checkedValues}\n options={{\n CAT1: 'Cat',\n DOG1: 'Dog',\n }}\n classNames={{ container: 'p32 bg-primary-300 br24 bs-lg' }}\n />\n );\n};\n\nexport const RadioWithCustomOptionStyles = ({\n onChange,\n}: RadioProps<string>) => {\n const [checkedValues, setCheckedValues] = useState<string>();\n\n const handleOnChange = (newValue: string) => {\n setCheckedValues(newValue);\n onChange(newValue);\n };\n\n return (\n <Radio\n onChange={handleOnChange}\n value={checkedValues}\n options={{\n CAT2: 'Cat',\n DOG2: 'Dog',\n }}\n classNames={{ option: 'mb32 p24 bg-green-100 br12 bs-lg' }}\n />\n );\n};\n\nexport const RadioWithCustomLabelStyles = ({\n onChange,\n}: RadioProps<string>) => {\n const [checkedValues, setCheckedValues] = useState<string>();\n\n const handleOnChange = (newValue: string) => {\n setCheckedValues(newValue);\n onChange(newValue);\n };\n\n return (\n <Radio\n onChange={handleOnChange}\n value={checkedValues}\n options={{\n CAT3: 'Cat',\n DOG3: 'Dog',\n }}\n classNames={{ label: 'bg-grey-900 tc-white' }}\n />\n );\n};\n\nexport const RadioWithInlineLayout = ({ onChange }: RadioProps<string>) => {\n const [checkedValues, setCheckedValues] = useState<string>();\n\n const handleOnChange = (newValue: string) => {\n setCheckedValues(newValue);\n onChange(newValue);\n };\n\n return (\n <Radio\n onChange={handleOnChange}\n value={checkedValues}\n options={{\n CAT4: 'Cat',\n DOG4: 'Dog',\n FISHER: 'Fish',\n RABBIT: 'Rabbit',\n RAT: 'Rat',\n ANOTHER: 'Other',\n }}\n classNames={{ option: 'w30' }}\n inlineLayout\n wide\n />\n );\n};\n\nexport const RadioWithCustomLabel = ({\n onChange,\n wide,\n classNames,\n inlineLayout,\n}: RadioProps<string>) => {\n const [checkedValues, setCheckedValues] = useState<string>();\n\n const handleOnChange = (newValue: string) => {\n setCheckedValues(newValue);\n onChange(newValue);\n };\n\n return (\n <Radio\n options={{\n BIGDOG: {\n icon: () => <img src={images.bigDog} alt=\"\" />,\n title: 'Dog',\n },\n FISH: {\n icon: () => <img src={images.brokenAquarium} alt=\"\" />,\n title: 'Fish',\n },\n OTHER: {\n icon: () => <img src={images.brokenGlass} alt=\"\" />,\n title: 'Other',\n },\n }}\n onChange={handleOnChange}\n value={checkedValues}\n classNames={{ option: 'w30' }}\n inlineLayout\n />\n );\n};\n\nexport const RadioWithCustomLabelInline = ({\n onChange,\n wide,\n classNames,\n inlineLayout,\n}: RadioProps<string>) => {\n const [checkedValues, setCheckedValues] = useState<string>();\n\n const handleOnChange = (newValue: string) => {\n setCheckedValues(newValue);\n onChange(newValue);\n };\n\n return (\n <Radio\n options={{\n BIGDOG: {\n icon: () => <img src={images.bigDog} alt=\"\" />,\n title: 'Dog',\n },\n FISH: {\n icon: () => <img src={images.brokenAquarium} alt=\"\" />,\n title: 'Fish',\n },\n OTHER: {\n icon: () => <img src={images.brokenGlass} alt=\"\" />,\n title: 'Other',\n },\n }}\n onChange={handleOnChange}\n inlineIcon\n value={checkedValues}\n classNames={{ option: 'w30' }}\n inlineLayout\n />\n );\n};\n\nRadioStory.storyName = 'Radio';\n\nexport const RadioIconOnly = ({ onChange }: RadioProps<string>) => {\n const [checkedValues, setCheckedValues] = useState<string>();\n\n const handleOnChange = (newValue: string) => {\n setCheckedValues(newValue);\n onChange(newValue);\n };\n\n return (\n <Radio\n options={{ NOTHING: '' }}\n onChange={handleOnChange}\n classNames={{ label: 'jc-start' }}\n value={checkedValues}\n bordered={false}\n />\n );\n};\n\nRadioStory.storyName = 'Radio';\n\nexport default story;\n"],"names":["_jsx"],"mappings":"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"}
1	+ {"version":3,"file":"index.stories.js","sources":["../../../../../../src/lib/components/input/radio/index.stories.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { Radio, RadioProps } from '.';\nimport { images } from '../../../util/images';\n\nconst story = {\n title: 'JSX/Inputs/Radio',\n component: Radio,\n argTypes: {\n options: {\n description:\n 'Object that contains the possible options for rendering in the input.',\n },\n value: {\n description: 'Current checked values.',\n },\n fieldLegend: {\n description:\n 'Property that describes the purpose of a group of radio buttons, read aloud by screen readers to provide context.',\n },\n groupName: {\n description:\n 'Property passed to each radio button. Informs the browser that the radio buttons belong to the same group, so only one can be selected',\n },\n onChange: {\n description: 'Function called everytime a value changes.',\n action: true,\n table: {\n category: 'Callbacks',\n },\n },\n wide: {\n description:\n 'Property that defines if options should fill 100% of available horizontal space',\n },\n inlineLayout: {\n description:\n 'Property that defines if options should show inline instead of block. Check inline radio options story for examples.',\n },\n inlineIcon: {\n description:\n 'Property that defines if options should show inline with icon',\n },\n classNames: {\n description: 'ClassNames for custom styling',\n },\n bordered: {\n description: 'Property that defines if option should show with border',\n },\n disabled: {\n description:\n 'Property that defines if the input and corresponding label are disabled and not clickable',\n },\n },\n args: {\n options: {\n CAT: {\n title: 'Cat',\n description: 'At least 1',\n },\n DOG: {\n title: 'Dog',\n description: 'At least 2',\n },\n NONE: {\n title: 'None',\n description: 'No pets',\n },\n },\n fieldLegend: 'Owned pets',\n groupName: 'Pets',\n value: '',\n wide: false,\n classNames: {\n container: '',\n label: '',\n option: '',\n },\n bordered: true,\n inlineLayout: false,\n inlineIcon: false,\n disabled: false,\n },\n};\n\nexport const RadioStory = ({\n onChange,\n options,\n wide,\n classNames,\n inlineLayout,\n bordered,\n disabled,\n fieldLegend,\n groupName,\n}: RadioProps<string>) => {\n const [checkedValues, setCheckedValues] = useState<string>();\n\n const handleOnChange = (newValue: string) => {\n setCheckedValues(newValue);\n onChange(newValue);\n };\n\n return (\n <Radio\n wide={wide}\n options={options}\n onChange={handleOnChange}\n value={checkedValues}\n classNames={classNames}\n inlineLayout={inlineLayout}\n bordered={bordered}\n disabled={disabled}\n fieldLegend={fieldLegend}\n groupName={groupName}\n />\n );\n};\n\nexport const RadioWithCustomWrapperStyles = ({\n onChange,\n}: RadioProps<string>) => {\n const [checkedValues, setCheckedValues] = useState<string>();\n\n const handleOnChange = (newValue: string) => {\n setCheckedValues(newValue);\n onChange(newValue);\n };\n\n return (\n <Radio\n onChange={handleOnChange}\n value={checkedValues}\n options={{\n CAT1: 'Cat',\n DOG1: 'Dog',\n }}\n classNames={{ container: 'p32 bg-primary-300 br24 bs-lg' }}\n />\n );\n};\n\nexport const RadioWithCustomOptionStyles = ({\n onChange,\n}: RadioProps<string>) => {\n const [checkedValues, setCheckedValues] = useState<string>();\n\n const handleOnChange = (newValue: string) => {\n setCheckedValues(newValue);\n onChange(newValue);\n };\n\n return (\n <Radio\n onChange={handleOnChange}\n value={checkedValues}\n options={{\n CAT2: 'Cat',\n DOG2: 'Dog',\n }}\n classNames={{ option: 'mb32 p24 bg-green-100 br12 bs-lg' }}\n />\n );\n};\n\nexport const RadioWithCustomLabelStyles = ({\n onChange,\n}: RadioProps<string>) => {\n const [checkedValues, setCheckedValues] = useState<string>();\n\n const handleOnChange = (newValue: string) => {\n setCheckedValues(newValue);\n onChange(newValue);\n };\n\n return (\n <Radio\n onChange={handleOnChange}\n value={checkedValues}\n options={{\n CAT3: 'Cat',\n DOG3: 'Dog',\n }}\n classNames={{ label: 'bg-grey-900 tc-white' }}\n />\n );\n};\n\nexport const RadioWithInlineLayout = ({ onChange }: RadioProps<string>) => {\n const [checkedValues, setCheckedValues] = useState<string>();\n\n const handleOnChange = (newValue: string) => {\n setCheckedValues(newValue);\n onChange(newValue);\n };\n\n return (\n <Radio\n onChange={handleOnChange}\n value={checkedValues}\n options={{\n CAT4: 'Cat',\n DOG4: 'Dog',\n FISHER: 'Fish',\n RABBIT: 'Rabbit',\n RAT: 'Rat',\n ANOTHER: 'Other',\n }}\n classNames={{ option: 'w30' }}\n inlineLayout\n wide\n />\n );\n};\n\nexport const RadioWithCustomLabel = ({\n onChange,\n wide,\n classNames,\n inlineLayout,\n}: RadioProps<string>) => {\n const [checkedValues, setCheckedValues] = useState<string>();\n\n const handleOnChange = (newValue: string) => {\n setCheckedValues(newValue);\n onChange(newValue);\n };\n\n return (\n <Radio\n options={{\n BIGDOG: {\n icon: () => <img src={images.bigDog} alt=\"\" />,\n title: 'Dog',\n },\n FISH: {\n icon: () => <img src={images.brokenAquarium} alt=\"\" />,\n title: 'Fish',\n },\n OTHER: {\n icon: () => <img src={images.brokenGlass} alt=\"\" />,\n title: 'Other',\n },\n }}\n onChange={handleOnChange}\n value={checkedValues}\n classNames={{ option: 'w30' }}\n inlineLayout\n />\n );\n};\n\nexport const RadioWithCustomLabelInline = ({\n onChange,\n wide,\n classNames,\n inlineLayout,\n}: RadioProps<string>) => {\n const [checkedValues, setCheckedValues] = useState<string>();\n\n const handleOnChange = (newValue: string) => {\n setCheckedValues(newValue);\n onChange(newValue);\n };\n\n return (\n <Radio\n options={{\n BIGDOG: {\n icon: () => <img src={images.bigDog} alt=\"\" />,\n title: 'Dog',\n },\n FISH: {\n icon: () => <img src={images.brokenAquarium} alt=\"\" />,\n title: 'Fish',\n },\n OTHER: {\n icon: () => <img src={images.brokenGlass} alt=\"\" />,\n title: 'Other',\n },\n }}\n onChange={handleOnChange}\n inlineIcon\n value={checkedValues}\n classNames={{ option: 'w30' }}\n inlineLayout\n />\n );\n};\n\nRadioStory.storyName = 'Radio';\n\nexport const RadioIconOnly = ({ onChange }: RadioProps<string>) => {\n const [checkedValues, setCheckedValues] = useState<string>();\n\n const handleOnChange = (newValue: string) => {\n setCheckedValues(newValue);\n onChange(newValue);\n };\n\n return (\n <Radio\n options={{ NOTHING: '' }}\n onChange={handleOnChange}\n classNames={{ label: 'jc-start' }}\n value={checkedValues}\n bordered={false}\n />\n );\n};\n\nRadioStory.storyName = 'Radio';\n\nexport default story;\n"],"names":["_jsx"],"mappings":"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"}

package/dist/esm/components/input/radio/index.test.js CHANGED Viewed

@@ -8,6 +8,7 @@ import '../../../_commonjsHelpers-4730bd53.js';
 import 'react-dom/test-utils';
 import '../../../index-6ea95111.js';
 import '../../../style-inject.es-1f59c1d0.js';
+import '../../../index-69a46657.js';
 var mockOnChange = jest.fn();
 var setup = function (onChange, value) {

package/dist/esm/components/input/radio/index.test.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.test.js","sources":["../../../../../../src/lib/components/input/radio/index.test.tsx"],"sourcesContent":["import { render } from '../../../util/testUtils';\n\nimport { Radio, RadioProps } from '.';\n\nconst mockOnChange = jest.fn();\n\nconst setup = (onChange: RadioProps<string>['onChange'], value?: string) => {\n const utils = render(\n <Radio\n options={{\n CAT: 'Cat',\n DOG: 'Dog',\n NONE: 'None',\n }}\n onChange={onChange}\n value={value}\n />\n );\n\n return utils;\n};\n\ndescribe('Radio component', () => {\n it('Should render options', () => {\n const { getByText } = setup(mockOnChange);\n\n expect(getByText('Cat')).toBeInTheDocument();\n expect(getByText('Dog')).toBeInTheDocument();\n expect(getByText('None')).toBeInTheDocument();\n });\n\n it('Should call onchange on selecting an option', async () => {\n const { getByTestId, user } = setup(mockOnChange);\n\n await user.click(getByTestId('radio-DOG'));\n\n expect(mockOnChange).toBeCalledWith('DOG');\n });\n\n it('Should render checked items when value is passed', async () => {\n const { getByTestId } = setup(mockOnChange, 'CAT');\n\n expect(getByTestId('radio-input-CAT')).toBeChecked();\n });\n\n it('Should render custom description', () => {\n const { getByText } = render(\n <Radio\n options={{\n CAT: {\n title: 'Cat',\n description: 'Cat description',\n },\n }}\n onChange={mockOnChange}\n />\n );\n\n expect(getByText('Cat description')).toBeInTheDocument();\n });\n\n it('Should render custom icon', () => {\n const { getByText } = render(\n <Radio\n options={{\n CAT: {\n title: 'Cat',\n icon: () => 'ICON',\n },\n }}\n onChange={mockOnChange}\n />\n );\n\n expect(getByText('ICON')).toBeInTheDocument();\n });\n\n it('Should render custom icon with selected', () => {\n const { getByText } = render(\n <Radio\n options={{\n CAT: {\n title: 'Cat',\n icon: (selected) => (selected ? 'SELECTED-ICON' : 'ICON'),\n },\n }}\n onChange={mockOnChange}\n value={'CAT'}\n />\n );\n\n expect(getByText('SELECTED-ICON')).toBeInTheDocument();\n });\n\n it('Should render label text passed in HTML format', () => {\n const { getByText } = render(\n <Radio\n options={{\n CAT: {\n title: <p>Cat</p>,\n description: 'Cat description',\n },\n }}\n onChange={mockOnChange}\n />\n );\n\n expect(getByText('Cat')).toBeInTheDocument();\n });\n\n it('Should disable the input', async () => {\n const { getByTestId } = render(\n <Radio\n options={{\n CAT: {\n title: 'Cat',\n description: 'Cat description',\n },\n }}\n onChange={mockOnChange}\n disabled\n />\n );\n\n const radioInput = getByTestId('radio-input-CAT');\n\n expect(radioInput).toBeDisabled();\n });\n});\n"],"names":["render","_jsx"],"mappings":"~~;;;;;;;;;;;~~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"}
1	+ {"version":3,"file":"index.test.js","sources":["../../../../../../src/lib/components/input/radio/index.test.tsx"],"sourcesContent":["import { render } from '../../../util/testUtils';\n\nimport { Radio, RadioProps } from '.';\n\nconst mockOnChange = jest.fn();\n\nconst setup = (onChange: RadioProps<string>['onChange'], value?: string) => {\n const utils = render(\n <Radio\n options={{\n CAT: 'Cat',\n DOG: 'Dog',\n NONE: 'None',\n }}\n onChange={onChange}\n value={value}\n />\n );\n\n return utils;\n};\n\ndescribe('Radio component', () => {\n it('Should render options', () => {\n const { getByText } = setup(mockOnChange);\n\n expect(getByText('Cat')).toBeInTheDocument();\n expect(getByText('Dog')).toBeInTheDocument();\n expect(getByText('None')).toBeInTheDocument();\n });\n\n it('Should call onchange on selecting an option', async () => {\n const { getByTestId, user } = setup(mockOnChange);\n\n await user.click(getByTestId('radio-DOG'));\n\n expect(mockOnChange).toBeCalledWith('DOG');\n });\n\n it('Should render checked items when value is passed', async () => {\n const { getByTestId } = setup(mockOnChange, 'CAT');\n\n expect(getByTestId('radio-input-CAT')).toBeChecked();\n });\n\n it('Should render custom description', () => {\n const { getByText } = render(\n <Radio\n options={{\n CAT: {\n title: 'Cat',\n description: 'Cat description',\n },\n }}\n onChange={mockOnChange}\n />\n );\n\n expect(getByText('Cat description')).toBeInTheDocument();\n });\n\n it('Should render custom icon', () => {\n const { getByText } = render(\n <Radio\n options={{\n CAT: {\n title: 'Cat',\n icon: () => 'ICON',\n },\n }}\n onChange={mockOnChange}\n />\n );\n\n expect(getByText('ICON')).toBeInTheDocument();\n });\n\n it('Should render custom icon with selected', () => {\n const { getByText } = render(\n <Radio\n options={{\n CAT: {\n title: 'Cat',\n icon: (selected) => (selected ? 'SELECTED-ICON' : 'ICON'),\n },\n }}\n onChange={mockOnChange}\n value={'CAT'}\n />\n );\n\n expect(getByText('SELECTED-ICON')).toBeInTheDocument();\n });\n\n it('Should render label text passed in HTML format', () => {\n const { getByText } = render(\n <Radio\n options={{\n CAT: {\n title: <p>Cat</p>,\n description: 'Cat description',\n },\n }}\n onChange={mockOnChange}\n />\n );\n\n expect(getByText('Cat')).toBeInTheDocument();\n });\n\n it('Should disable the input', async () => {\n const { getByTestId } = render(\n <Radio\n options={{\n CAT: {\n title: 'Cat',\n description: 'Cat description',\n },\n }}\n onChange={mockOnChange}\n disabled\n />\n );\n\n const radioInput = getByTestId('radio-input-CAT');\n\n expect(radioInput).toBeDisabled();\n });\n});\n"],"names":["render","_jsx"],"mappings":"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"}

package/dist/esm/lib/components/input/checkbox/index.d.ts CHANGED Viewed

@@ -16,5 +16,6 @@ export interface CheckboxProps<ValueType extends string> {
         label?: string;
         option?: string;
     };
+    fieldLegend?: string;
 }
-export declare const Checkbox: <ValueType extends string>({ options, value, onChange, wide, inlineLayout, bordered, classNames: classNamesObj, }: CheckboxProps<ValueType> & {}) => JSX.Element;
+export declare const Checkbox: <ValueType extends string>({ options, value, onChange, wide, inlineLayout, bordered, classNames: classNamesObj, fieldLegend, }: CheckboxProps<ValueType> & {}) => JSX.Element;

package/dist/esm/lib/components/input/checkbox/index.stories.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import { CheckboxProps } from '.';
 declare const story: {
     title: string;
-    component: <ValueType extends string>({ options, value, onChange, wide, inlineLayout, bordered, classNames: classNamesObj, }: CheckboxProps<ValueType>) => JSX.Element;
+    component: <ValueType extends string>({ options, value, onChange, wide, inlineLayout, bordered, classNames: classNamesObj, fieldLegend, }: CheckboxProps<ValueType>) => JSX.Element;
     argTypes: {
         options: {
             description: string;
@@ -9,6 +9,9 @@ declare const story: {
         value: {
             description: string;
         };
+        fieldLegend: {
+            description: string;
+        };
         onChange: {
             description: string;
             action: boolean;
@@ -46,6 +49,7 @@ declare const story: {
                 description: string;
             };
         };
+        fieldLegend: string;
         wide: boolean;
         bordered: boolean;
         inlineLayout: boolean;
@@ -59,12 +63,12 @@ declare const story: {
     };
 };
 export declare const CheckboxStory: {
-    ({ onChange, options, wide, bordered, classNames, inlineLayout, }: CheckboxProps<string>): JSX.Element;
+    ({ onChange, options, wide, bordered, classNames, inlineLayout, fieldLegend, }: CheckboxProps<string>): JSX.Element;
     storyName: string;
 };
-export declare const CheckboxWithCustomWrapperStyles: ({ onChange }: CheckboxProps<string>) => JSX.Element;
-export declare const CheckboxWithCustomOptionStyles: ({ onChange }: CheckboxProps<string>) => JSX.Element;
-export declare const CheckboxWithCustomLabelStyles: ({ onChange }: CheckboxProps<string>) => JSX.Element;
-export declare const CheckboxWithInlineLayout: ({ onChange }: CheckboxProps<string>) => JSX.Element;
-export declare const CheckboxWithCustomLabel: ({ onChange, wide, classNames, inlineLayout }: CheckboxProps<string>) => JSX.Element;
+export declare const CheckboxWithCustomWrapperStyles: ({ onChange, }: CheckboxProps<string>) => JSX.Element;
+export declare const CheckboxWithCustomOptionStyles: ({ onChange, }: CheckboxProps<string>) => JSX.Element;
+export declare const CheckboxWithCustomLabelStyles: ({ onChange, }: CheckboxProps<string>) => JSX.Element;
+export declare const CheckboxWithInlineLayout: ({ onChange, }: CheckboxProps<string>) => JSX.Element;
+export declare const CheckboxWithCustomLabel: ({ onChange, wide, classNames, inlineLayout, }: CheckboxProps<string>) => JSX.Element;
 export default story;

package/dist/esm/lib/components/input/radio/index.d.ts CHANGED Viewed

@@ -19,5 +19,7 @@ export interface RadioProps<ValueType extends string> {
     };
     bordered?: boolean;
     disabled?: boolean;
+    fieldLegend?: string;
+    groupName?: string;
 }
-export declare const Radio: <ValueType extends string>({ options, value, onChange, wide, inlineLayout, inlineIcon, classNames: classNamesObj, bordered, disabled, }: RadioProps<ValueType>) => JSX.Element;
+export declare const Radio: <ValueType extends string>({ options, value, onChange, wide, inlineLayout, inlineIcon, classNames: classNamesObj, bordered, disabled, fieldLegend, groupName, }: RadioProps<ValueType>) => JSX.Element;

package/dist/esm/lib/components/input/radio/index.stories.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import { RadioProps } from '.';
 declare const story: {
     title: string;
-    component: <ValueType extends string>({ options, value, onChange, wide, inlineLayout, inlineIcon, classNames: classNamesObj, bordered, disabled, }: RadioProps<ValueType>) => JSX.Element;
+    component: <ValueType extends string>({ options, value, onChange, wide, inlineLayout, inlineIcon, classNames: classNamesObj, bordered, disabled, fieldLegend, groupName, }: RadioProps<ValueType>) => JSX.Element;
     argTypes: {
         options: {
             description: string;
@@ -9,6 +9,12 @@ declare const story: {
         value: {
             description: string;
         };
+        fieldLegend: {
+            description: string;
+        };
+        groupName: {
+            description: string;
+        };
         onChange: {
             description: string;
             action: boolean;
@@ -50,6 +56,8 @@ declare const story: {
                 description: string;
             };
         };
+        fieldLegend: string;
+        groupName: string;
         value: string;
         wide: boolean;
         classNames: {
@@ -64,7 +72,7 @@ declare const story: {
     };
 };
 export declare const RadioStory: {
-    ({ onChange, options, wide, classNames, inlineLayout, bordered, disabled, }: RadioProps<string>): JSX.Element;
+    ({ onChange, options, wide, classNames, inlineLayout, bordered, disabled, fieldLegend, groupName, }: RadioProps<string>): JSX.Element;
     storyName: string;
 };
 export declare const RadioWithCustomWrapperStyles: ({ onChange, }: RadioProps<string>) => JSX.Element;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@popsure/dirty-swan",
-  "version": "0.57.8",
+  "version": "0.57.9",
   "author": "Vincent Audoire <vincent@getpopsure.com>",
   "license": "MIT",
   "private": false,

package/src/lib/components/chip/index.tsx CHANGED Viewed

@@ -27,6 +27,7 @@ export default ({
       className={`c-pointer ${styles['chip-button-container']}`}
       type="button"
       onClick={() => onRemove(value)}
+      aria-label={`Remove ${value.value} option`}
     >
       <XIcon className={styles['chip-remove-button']} />
     </button>

package/src/lib/components/chip/style.module.scss CHANGED Viewed

@@ -48,6 +48,11 @@
   &:hover {
     color: $ds-purple-500;
   }
+  &:focus-visible {
+    outline: 2px solid var(--ds-primary-500);
+    border-radius: 2px;
+  }
 }
 .chip-remove-button {

package/src/lib/components/input/checkbox/index.stories.tsx CHANGED Viewed

@@ -1,4 +1,3 @@
 import { useState } from 'react';
 import { Checkbox, CheckboxProps } from '.';
 import { images } from '../../../util/images';
@@ -9,28 +8,36 @@ const story = {
   component: Checkbox,
   argTypes: {
     options: {
-      description: 'Object that contains the possible options for rendering in the input.',
+      description:
+        'Object that contains the possible options for rendering in the input.',
     },
     value: {
       description: 'Current checked values.',
     },
+    fieldLegend: {
+      description:
+        'Accessibility property that describes the purpose of a group of checkbox buttons, read aloud by screen readers to provide context.',
+    },
     onChange: {
       description: 'Function called everytime a value changes.',
       action: true,
       table: {
-        category: "Callbacks",
+        category: 'Callbacks',
       },
     },
     wide: {
-      description: 'Property that defines if options should fill 100% of available horizontal space',
-      defaultValue: false
+      description:
+        'Property that defines if options should fill 100% of available horizontal space',
+      defaultValue: false,
     },
     bordered: {
       control: 'boolean',
-      description: 'Property that defines if checkbox should show the border around each label',
+      description:
+        'Property that defines if checkbox should show the border around each label',
     },
     inlineLayout: {
-      description: 'Property that defines if options should show inline instead of block. Check inline checkbox options story for examples.',
+      description:
+        'Property that defines if options should show inline instead of block. Check inline checkbox options story for examples.',
     },
     className: {
       description: 'ClassNames for custom styling',
@@ -38,133 +45,144 @@ const story = {
   },
   args: {
     options: {
-      CAT:{
+      CAT: {
         title: 'Cat',
-        description: 'At least 1'
+        description: 'At least 1',
       },
-      DOG:{
+      DOG: {
         title: 'Dog',
-        description: 'At least 2'
+        description: 'At least 2',
       },
-      NONE:{
+      NONE: {
         title: 'None',
-        description: 'No pets'
-      }
+        description: 'No pets',
+      },
     },
+    fieldLegend: 'Owned pets',
     wide: false,
     bordered: true,
     inlineLayout: false,
     classNames: {
       container: '',
       label: '',
-      option: ''
+      option: '',
     },
     value: [],
-    className: ''
-  }
+    className: '',
+  },
 };
-export const CheckboxStory = ({
+export const CheckboxStory = ({
   onChange,
   options,
   wide,
   bordered,
   classNames,
   inlineLayout,
+  fieldLegend,
 }: CheckboxProps<string>) => {
   const [checkedValues, setCheckedValues] = useState<string[]>([]);
   const handleOnChange = (newValue: string[]) => {
     setCheckedValues(newValue);
     onChange(newValue);
-  }
+  };
   return (
-    <Checkbox
+    <Checkbox
       wide={wide}
-      options={options}
+      options={options}
       onChange={handleOnChange}
       value={checkedValues}
       bordered={bordered}
       classNames={classNames}
       inlineLayout={inlineLayout}
+      fieldLegend={fieldLegend}
     />
   );
-}
+};
-export const CheckboxWithCustomWrapperStyles = ({ onChange }: CheckboxProps<string>) => {
+export const CheckboxWithCustomWrapperStyles = ({
+  onChange,
+}: CheckboxProps<string>) => {
   const [checkedValues, setCheckedValues] = useState<string[]>([]);
   const handleOnChange = (newValue: string[] = []) => {
     setCheckedValues(newValue);
     onChange(newValue);
-  }
+  };
   return (
-    <Checkbox
+    <Checkbox
       onChange={handleOnChange}
       value={checkedValues}
       options={{
         CAT1: 'Cat',
         DOG1: 'Dog',
-      }}
-      classNames={{ container: "p32 bg-primary-300 br24 bs-lg" }}
+      }}
+      classNames={{ container: 'p32 bg-primary-300 br24 bs-lg' }}
     />
   );
-}
+};
-export const CheckboxWithCustomOptionStyles = ({ onChange }: CheckboxProps<string>) => {
+export const CheckboxWithCustomOptionStyles = ({
+  onChange,
+}: CheckboxProps<string>) => {
   const [checkedValues, setCheckedValues] = useState<string[]>([]);
   const handleOnChange = (newValue: string[] = []) => {
     setCheckedValues(newValue);
     onChange(newValue);
-  }
+  };
   return (
-    <Checkbox
+    <Checkbox
       onChange={handleOnChange}
       value={checkedValues}
       options={{
         CAT2: 'Cat',
         DOG2: 'Dog',
-      }}
-      classNames={{ option: "mb32 p24 bg-green-100 br12 bs-lg" }}
+      }}
+      classNames={{ option: 'mb32 p24 bg-green-100 br12 bs-lg' }}
     />
   );
-}
+};
-export const CheckboxWithCustomLabelStyles = ({ onChange }: CheckboxProps<string>) => {
+export const CheckboxWithCustomLabelStyles = ({
+  onChange,
+}: CheckboxProps<string>) => {
   const [checkedValues, setCheckedValues] = useState<string[]>([]);
   const handleOnChange = (newValue: string[] = []) => {
     setCheckedValues(newValue);
     onChange(newValue);
-  }
+  };
   return (
-    <Checkbox
+    <Checkbox
       onChange={handleOnChange}
       value={checkedValues}
       options={{
         CAT3: 'Cat',
         DOG3: 'Dog',
-      }}
-      classNames={{ label: "bg-grey-900 tc-white" }}
+      }}
+      classNames={{ label: 'bg-grey-900 tc-white' }}
     />
   );
-}
+};
-export const CheckboxWithInlineLayout = ({ onChange }: CheckboxProps<string>) => {
+export const CheckboxWithInlineLayout = ({
+  onChange,
+}: CheckboxProps<string>) => {
   const [checkedValues, setCheckedValues] = useState<string[]>([]);
   const handleOnChange = (newValue: string[] = []) => {
     setCheckedValues(newValue);
     onChange(newValue);
-  }
+  };
   return (
-    <Checkbox
+    <Checkbox
       onChange={handleOnChange}
       value={checkedValues}
       options={{
@@ -174,45 +192,50 @@ export const CheckboxWithInlineLayout = ({ onChange }: CheckboxProps<string>) =>
         RABBIT: 'Rabbit',
         RAT: 'Rat',
         ANOTHER: 'Other',
-      }}
-      classNames={{ option: "w30" }}
+      }}
+      classNames={{ option: 'w30' }}
       inlineLayout
       wide
     />
   );
-}
+};
-export const CheckboxWithCustomLabel = ({ onChange, wide, classNames, inlineLayout }: CheckboxProps<string>) => {
+export const CheckboxWithCustomLabel = ({
+  onChange,
+  wide,
+  classNames,
+  inlineLayout,
+}: CheckboxProps<string>) => {
   const [checkedValues, setCheckedValues] = useState<string[]>([]);
   const handleOnChange = (newValue: string[] = []) => {
     setCheckedValues(newValue);
     onChange(newValue);
-  }
+  };
   return (
-    <Checkbox
+    <Checkbox
       options={{
         BIGDOG: {
-          icon: () => <img src={images.bigDog} alt='' />,
+          icon: () => <img src={images.bigDog} alt="" />,
           title: 'Dog',
         },
-        FISH:{
-          icon: () => <img src={images.brokenAquarium} alt='' />,
+        FISH: {
+          icon: () => <img src={images.brokenAquarium} alt="" />,
           title: 'Fish',
         },
-        OTHER:{
-          icon: () => <img src={images.brokenGlass} alt='' />,
+        OTHER: {
+          icon: () => <img src={images.brokenGlass} alt="" />,
           title: 'Other',
-        }
-      }}
+        },
+      }}
       onChange={handleOnChange}
       value={checkedValues}
-      classNames={{ option: "w30" }}
+      classNames={{ option: 'w30' }}
       inlineLayout
     />
   );
-}
+};
 CheckboxStory.storyName = 'Checkbox';

package/src/lib/components/input/checkbox/index.tsx CHANGED Viewed

@@ -20,6 +20,7 @@ export interface CheckboxProps<ValueType extends string> {
     label?: string;
     option?: string;
   };
+  fieldLegend?: string;
 }
 export const Checkbox = <ValueType extends string>({
@@ -30,6 +31,7 @@ export const Checkbox = <ValueType extends string>({
   inlineLayout = false,
   bordered = true,
   classNames: classNamesObj,
+  fieldLegend = 'Select one or more options',
 }: CheckboxProps<ValueType> & {}) => {
   const hasNoneValue = Object.keys(options).includes('NONE');
@@ -72,7 +74,7 @@ export const Checkbox = <ValueType extends string>({
   };
   return (
-    <div
+    <fieldset
       className={classNames(
         classNamesObj?.container,
         styles.container,
@@ -85,6 +87,7 @@ export const Checkbox = <ValueType extends string>({
         }
       )}
     >
+      <legend className="sr-only">{fieldLegend}</legend>
       {entries.map(([currentValue, label]) => {
         const checked = value?.includes(currentValue);
         const customIcon = (label as CheckboxWithDescription)?.icon;
@@ -129,6 +132,6 @@ export const Checkbox = <ValueType extends string>({
           </div>
         );
       })}
-    </div>
+    </fieldset>
   );
 };

package/src/lib/components/input/checkbox/styles.module.scss CHANGED Viewed

@@ -1,5 +1,9 @@
 .container {
   max-width: 100%;
+  border: 0;
+  margin: 0;
+  min-width: 0;
+  padding: 0.01em 0 0 0;
 }
 .narrow {

package/src/lib/components/input/radio/index.stories.tsx CHANGED Viewed

@@ -13,6 +13,14 @@ const story = {
     value: {
       description: 'Current checked values.',
     },
+    fieldLegend: {
+      description:
+        'Property that describes the purpose of a group of radio buttons, read aloud by screen readers to provide context.',
+    },
+    groupName: {
+      description:
+        'Property passed to each radio button. Informs the browser that the radio buttons belong to the same group, so only one can be selected',
+    },
     onChange: {
       description: 'Function called everytime a value changes.',
       action: true,
@@ -29,7 +37,8 @@ const story = {
         'Property that defines if options should show inline instead of block. Check inline radio options story for examples.',
     },
     inlineIcon: {
-      description: 'Property that defines if options should show inline with icon',
+      description:
+        'Property that defines if options should show inline with icon',
     },
     classNames: {
       description: 'ClassNames for custom styling',
@@ -57,6 +66,8 @@ const story = {
         description: 'No pets',
       },
     },
+    fieldLegend: 'Owned pets',
+    groupName: 'Pets',
     value: '',
     wide: false,
     classNames: {
@@ -68,7 +79,7 @@ const story = {
     inlineLayout: false,
     inlineIcon: false,
     disabled: false,
-  }
+  },
 };
 export const RadioStory = ({
@@ -79,6 +90,8 @@ export const RadioStory = ({
   inlineLayout,
   bordered,
   disabled,
+  fieldLegend,
+  groupName,
 }: RadioProps<string>) => {
   const [checkedValues, setCheckedValues] = useState<string>();
@@ -97,6 +110,8 @@ export const RadioStory = ({
       inlineLayout={inlineLayout}
       bordered={bordered}
       disabled={disabled}
+      fieldLegend={fieldLegend}
+      groupName={groupName}
     />
   );
 };