@uva-glass/component-library 1.65.0 → 2.0.0
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.
- package/dist/Column-BUyVh2Oo.js.map +1 -1
- package/dist/MultiSelectItem-D9PxdX43.js.map +1 -1
- package/dist/SortableProvider-BUsvniX7.js.map +1 -1
- package/dist/{TablePlugin-BbiBRjod.js → TablePlugin-ByeOn0Zf.js} +5 -6
- package/dist/{TablePlugin-BbiBRjod.js.map → TablePlugin-ByeOn0Zf.js.map} +1 -1
- package/dist/chunk-7R3XDUXW-C-tvzxWq.js +1685 -0
- package/dist/chunk-7R3XDUXW-C-tvzxWq.js.map +1 -0
- package/dist/components/Accordion/Accordion.js.map +1 -1
- package/dist/components/Accordion/Accordion.stories.js.map +1 -1
- package/dist/components/AccordionCard/AccordionCard.js.map +1 -1
- package/dist/components/AccordionCard/AccordionCard.stories.js.map +1 -1
- package/dist/components/ActionList/ActionList.js.map +1 -1
- package/dist/components/ActionList/ActionList.stories.js.map +1 -1
- package/dist/components/AppStatusBar/AppStatusBar.stories.js.map +1 -1
- package/dist/components/Attention/Attention.stories.js.map +1 -1
- package/dist/components/Backdrop/Backdrop.stories.js.map +1 -1
- package/dist/components/ButtonGroup/ButtonGroup.stories.js.map +1 -1
- package/dist/components/Buttons/Button.js.map +1 -1
- package/dist/components/Buttons/Button.stories.js +1 -1
- package/dist/components/Buttons/Button.stories.js.map +1 -1
- package/dist/components/Buttons/LinkButton.d.ts +1 -1
- package/dist/components/Buttons/LinkButton.js +1 -1
- package/dist/components/Buttons/LinkButton.js.map +1 -1
- package/dist/components/Buttons/LinkButton.stories.js +5 -5
- package/dist/components/Buttons/LinkButton.stories.js.map +1 -1
- package/dist/components/Buttons/MenuButton.js.map +1 -1
- package/dist/components/Buttons/MenuButton.stories.js +1 -1
- package/dist/components/Buttons/MenuButton.stories.js.map +1 -1
- package/dist/components/Card/Card.stories.js.map +1 -1
- package/dist/components/Checkbox/Checkbox.stories.js +1 -1
- package/dist/components/Checkbox/Checkbox.stories.js.map +1 -1
- package/dist/components/CheckboxButton/CheckboxButton.js.map +1 -1
- package/dist/components/CheckboxButton/CheckboxButton.stories.js +1 -1
- package/dist/components/CheckboxButton/CheckboxButton.stories.js.map +1 -1
- package/dist/components/CheckboxButtonBar/CheckboxButtonBar.js.map +1 -1
- package/dist/components/CheckboxButtonBar/CheckboxButtonBar.stories.js +1 -1
- package/dist/components/CheckboxButtonBar/CheckboxButtonBar.stories.js.map +1 -1
- package/dist/components/CheckboxTree/CheckboxTree.js +6 -7
- package/dist/components/CheckboxTree/CheckboxTree.js.map +1 -1
- package/dist/components/CheckboxTree/CheckboxTree.stories.js +1 -1
- package/dist/components/CheckboxTree/CheckboxTree.stories.js.map +1 -1
- package/dist/components/Drawer/Drawer.js.map +1 -1
- package/dist/components/Drawer/Drawer.stories.js +1 -1
- package/dist/components/Drawer/Drawer.stories.js.map +1 -1
- package/dist/components/EmptyStateDataDisplay/EmptyStateDataDisplay.js.map +1 -1
- package/dist/components/EmptyStateDataDisplay/EmptyStateDataDisplay.stories.js.map +1 -1
- package/dist/components/FeedbackBox/FeedbackBox.stories.js.map +1 -1
- package/dist/components/FieldHint/FieldHint.js.map +1 -1
- package/dist/components/FieldHint/FieldHint.stories.js.map +1 -1
- package/dist/components/Fieldset/Fieldset.stories.js.map +1 -1
- package/dist/components/FormField/FormField.stories.js.map +1 -1
- package/dist/components/FormInput/FormInput.js +8 -9
- package/dist/components/FormInput/FormInput.js.map +1 -1
- package/dist/components/FormInput/FormInput.stories.js +1 -1
- package/dist/components/FormInput/FormInput.stories.js.map +1 -1
- package/dist/components/GridRow/GridRow.js.map +1 -1
- package/dist/components/GridRow/GridRow.stories.js.map +1 -1
- package/dist/components/HorizontalList/HorizontalList.js.map +1 -1
- package/dist/components/HorizontalList/HorizontalList.stories.js.map +1 -1
- package/dist/components/Icon/Icon.stories.js.map +1 -1
- package/dist/components/Icon/icons/index.js.map +1 -1
- package/dist/components/IconButton/IconButton.js.map +1 -1
- package/dist/components/IconButton/IconButton.stories.js +1 -1
- package/dist/components/IconButton/IconButton.stories.js.map +1 -1
- package/dist/components/InfoMessage/InfoMessage.stories.js.map +1 -1
- package/dist/components/Input/Input.js.map +1 -1
- package/dist/components/Input/Input.stories.js.map +1 -1
- package/dist/components/InputField/InputField.js.map +1 -1
- package/dist/components/InputField/InputField.stories.js +4 -5
- package/dist/components/InputField/InputField.stories.js.map +1 -1
- package/dist/components/Label/Label.stories.js.map +1 -1
- package/dist/components/MenuLink/MenuLink.d.ts +1 -1
- package/dist/components/MenuLink/MenuLink.js +5 -5
- package/dist/components/MenuLink/MenuLink.js.map +1 -1
- package/dist/components/MenuLink/MenuLink.stories.d.ts +1 -1
- package/dist/components/MenuLink/MenuLink.stories.js +1 -1
- package/dist/components/MenuLink/MenuLink.stories.js.map +1 -1
- package/dist/components/MetaDataList/MetaDataList.js.map +1 -1
- package/dist/components/MetaDataList/MetaDataList.stories.js.map +1 -1
- package/dist/components/ModalDialog/ModalDialog.js.map +1 -1
- package/dist/components/ModalDialog/ModalDialog.stories.js +1 -1
- package/dist/components/ModalDialog/ModalDialog.stories.js.map +1 -1
- package/dist/components/MultiSelect/MultiSelect.js +1 -1
- package/dist/components/MultiSelect/MultiSelect.stories.js +2 -2
- package/dist/components/MultiSelect/MultiSelect.stories.js.map +1 -1
- package/dist/components/MultiSelect/components/MultiSelectHeader.js +2 -3
- package/dist/components/MultiSelect/components/MultiSelectHeader.js.map +1 -1
- package/dist/components/MultiSelect/index.js +1 -1
- package/dist/components/OverlayCloseButton/OverlayCloseButton.js.map +1 -1
- package/dist/components/OverlayCloseButton/OverlayCloseButton.stories.js +1 -1
- package/dist/components/OverlayCloseButton/OverlayCloseButton.stories.js.map +1 -1
- package/dist/components/PageOverlay/PageOverlay.js.map +1 -1
- package/dist/components/PageOverlay/PageOverlay.stories.js.map +1 -1
- package/dist/components/PeriodSelector/PeriodSelector.js +3 -4
- package/dist/components/PeriodSelector/PeriodSelector.js.map +1 -1
- package/dist/components/PeriodSelector/PeriodSelector.stories.js +1 -1
- package/dist/components/PeriodSelector/PeriodSelector.stories.js.map +1 -1
- package/dist/components/Periods/Periods.js.map +1 -1
- package/dist/components/Periods/Periods.stories.js.map +1 -1
- package/dist/components/ProgrammeCard/ProgrammeCard.js.map +1 -1
- package/dist/components/ProgrammeCard/ProgrammeCard.stories.js +4 -5
- package/dist/components/ProgrammeCard/ProgrammeCard.stories.js.map +1 -1
- package/dist/components/RadioButton/RadioButton.stories.js.map +1 -1
- package/dist/components/Repeater/Repeater.js.map +1 -1
- package/dist/components/Repeater/Repeater.stories.js.map +1 -1
- package/dist/components/RteEditor/EditorHeader/EditorHeader.js +3 -4
- package/dist/components/RteEditor/EditorHeader/EditorHeader.js.map +1 -1
- package/dist/components/RteEditor/Plugins/BlockFormatPlugin/BlockFormatPlugin.js.map +1 -1
- package/dist/components/RteEditor/Plugins/HistoryPlugin/HistoryPlugin.js +3 -4
- package/dist/components/RteEditor/Plugins/HistoryPlugin/HistoryPlugin.js.map +1 -1
- package/dist/components/RteEditor/Plugins/LinkPlugin/AddLinkForm/AddLinkFrom.js +2 -3
- package/dist/components/RteEditor/Plugins/LinkPlugin/AddLinkForm/AddLinkFrom.js.map +1 -1
- package/dist/components/RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js.map +1 -1
- package/dist/components/RteEditor/Plugins/LinkPlugin/LinkPlugin.js +3 -4
- package/dist/components/RteEditor/Plugins/LinkPlugin/LinkPlugin.js.map +1 -1
- package/dist/components/RteEditor/Plugins/ListPlugin/ListPlugin.js.map +1 -1
- package/dist/components/RteEditor/Plugins/PasteHandlerPlugin/PasteHandlerPlugin.js.map +1 -1
- package/dist/components/RteEditor/Plugins/TablePlugin/AddTableFrom.js +2 -3
- package/dist/components/RteEditor/Plugins/TablePlugin/AddTableFrom.js.map +1 -1
- package/dist/components/RteEditor/Plugins/TablePlugin/TableCellContextMenu/TableCellContextMenu.js.map +1 -1
- package/dist/components/RteEditor/Plugins/TablePlugin/TablePlugin.js +2 -3
- package/dist/components/RteEditor/Plugins/TablePlugin/TablePlugin.js.map +1 -1
- package/dist/components/RteEditor/Plugins/TablePlugin/helpers.js.map +1 -1
- package/dist/components/RteEditor/Plugins/TablePlugin/index.js +1 -1
- package/dist/components/RteEditor/Plugins/ToolbarPlugin/ToolbarPlugin.js +1 -1
- package/dist/components/RteEditor/Plugins/ToolbarPlugin/ToolbarPlugin.js.map +1 -1
- package/dist/components/RteEditor/Plugins/index.js +1 -1
- package/dist/components/RteEditor/Providers/LanguageProvider.js.map +1 -1
- package/dist/components/RteEditor/RteEditor.js +3 -4
- package/dist/components/RteEditor/RteEditor.js.map +1 -1
- package/dist/components/RteEditor/RteEditor.stories.js.map +1 -1
- package/dist/components/RteEditor/helpers.js.map +1 -1
- package/dist/components/RteEditor/hooks/components/Flyout.js.map +1 -1
- package/dist/components/RteEditor/hooks/useFlyout.js.map +1 -1
- package/dist/components/RteEditor/hooks/useTranslation.js.map +1 -1
- package/dist/components/RteEditor/translations.js.map +1 -1
- package/dist/components/SectionNotification/SectionNotification.stories.js.map +1 -1
- package/dist/components/SelectListbox/SelectListBox.stories.js +1 -1
- package/dist/components/SelectListbox/SelectListBox.stories.js.map +1 -1
- package/dist/components/SelectListbox/SelectListbox.js.map +1 -1
- package/dist/components/SelectListbox/SelectProvider.js.map +1 -1
- package/dist/components/SelectListbox/components/SelectButton.js.map +1 -1
- package/dist/components/SelectListbox/components/SelectContainer.js.map +1 -1
- package/dist/components/SelectListbox/components/SelectOption.js.map +1 -1
- package/dist/components/SelectListbox/components/SelectOptionBox.js.map +1 -1
- package/dist/components/Sortable/Sortable.js.map +1 -1
- package/dist/components/Sortable/Sortable.stories.js +1 -1
- package/dist/components/Sortable/Sortable.stories.js.map +1 -1
- package/dist/components/Sortable/actions.js.map +1 -1
- package/dist/components/Sortable/components/SortableHandle.js.map +1 -1
- package/dist/components/Sortable/components/SortableItem.js.map +1 -1
- package/dist/components/Sortable/sortableReducer.js.map +1 -1
- package/dist/components/Spinner/Spinner.js.map +1 -1
- package/dist/components/Spinner/Spinner.stories.js.map +1 -1
- package/dist/components/StatusPill/StatusPill.js.map +1 -1
- package/dist/components/StatusPill/StatusPill.stories.js.map +1 -1
- package/dist/components/Tooltip/Tooltip.js.map +1 -1
- package/dist/components/Tooltip/Tooltip.stories.js.map +1 -1
- package/dist/components/hooks/useDebounce.js.map +1 -1
- package/dist/components/hooks/useOnClickOutside.js.map +1 -1
- package/dist/components/hooks/usePositionedFloaters.js.map +1 -1
- package/dist/components/hooks/useResponsive.js.map +1 -1
- package/dist/components/index.js +1 -1
- package/dist/index-0wq-B7do.js.map +1 -1
- package/dist/index-2mUSc_Ki.js.map +1 -1
- package/dist/index-B9BWML6P.js.map +1 -1
- package/dist/{index-DQyNeMuh.js → index-DWzkl4aY.js} +7 -7
- package/dist/{index-DQyNeMuh.js.map → index-DWzkl4aY.js.map} +1 -1
- package/dist/index.js +1 -1
- package/dist/react-18-BIqxBxbW.js.map +1 -1
- package/dist/storyComponents/ClipboardButton/ClipboardButton.js.map +1 -1
- package/dist/storyComponents/Container/Container.js.map +1 -1
- package/dist/storybook__react.d.js.map +1 -1
- package/package.json +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.js","sources":["../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId, useState } from 'react';\n\nimport type { KeyboardEvent, ReactNode } from 'react';\n\nimport styles from './Accordion.module.css';\n\nimport { Icon } from 'components/Icon';\n\nexport interface AccordionProps {\n /** Clickable title (always visible). */\n title: ReactNode;\n /** Main content (hidden when expanded is false). */\n content: ReactNode;\n /** Indicator if Accordion should be expanded by default.*/\n expanded?: boolean;\n}\n\n/** A controller for accordion display toggling of content with click on a title. */\nexport const Accordion = ({ title, content, expanded = false }: AccordionProps) => {\n const [isExpanded, setIsExpanded] = useState(expanded);\n const accordionId = useId();\n\n function onKeyUp(event: KeyboardEvent<HTMLDivElement>) {\n const { code } = event;\n\n if (code === 'Enter' || code === 'Space') {\n setIsExpanded(!isExpanded);\n }\n }\n\n return (\n <div className={styles['accordion']}>\n <div\n className={styles['accordion__title']}\n id={accordionId}\n role=\"button\"\n tabIndex={0}\n onClick={() => setIsExpanded(!isExpanded)}\n onKeyUp={onKeyUp}\n aria-expanded={isExpanded}\n >\n {title}\n <Icon\n className={clsx(styles['accordion__title-icon'], { [styles['accordion__title-icon--expanded']]: isExpanded })}\n name=\"CheveronLeft\"\n size={16}\n />\n </div>\n <div\n aria-labelledby={accordionId}\n className={clsx(styles.accordion__content, { [styles['accordion__content--expanded']]: isExpanded })}\n >\n {content}\n </div>\n </div>\n );\n};\n"],"names":["Accordion","title","content","expanded","isExpanded","setIsExpanded","useState","accordionId","useId","onKeyUp","event","code","jsxs","styles","jsx","Icon","clsx"],"mappings":";;;;;;;;;;;GAmBaA,IAAY,CAAC,EAAE,OAAAC,GAAO,SAAAC,GAAS,UAAAC,IAAW,SAA4B;AACjF,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAASH,CAAQ,GAC/CI,IAAcC;
|
|
1
|
+
{"version":3,"file":"Accordion.js","sources":["../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId, useState } from 'react';\n\nimport type { KeyboardEvent, ReactNode } from 'react';\n\nimport styles from './Accordion.module.css';\n\nimport { Icon } from 'components/Icon';\n\nexport interface AccordionProps {\n /** Clickable title (always visible). */\n title: ReactNode;\n /** Main content (hidden when expanded is false). */\n content: ReactNode;\n /** Indicator if Accordion should be expanded by default.*/\n expanded?: boolean;\n}\n\n/** A controller for accordion display toggling of content with click on a title. */\nexport const Accordion = ({ title, content, expanded = false }: AccordionProps) => {\n const [isExpanded, setIsExpanded] = useState(expanded);\n const accordionId = useId();\n\n function onKeyUp(event: KeyboardEvent<HTMLDivElement>) {\n const { code } = event;\n\n if (code === 'Enter' || code === 'Space') {\n setIsExpanded(!isExpanded);\n }\n }\n\n return (\n <div className={styles['accordion']}>\n <div\n className={styles['accordion__title']}\n id={accordionId}\n role=\"button\"\n tabIndex={0}\n onClick={() => setIsExpanded(!isExpanded)}\n onKeyUp={onKeyUp}\n aria-expanded={isExpanded}\n >\n {title}\n <Icon\n className={clsx(styles['accordion__title-icon'], { [styles['accordion__title-icon--expanded']]: isExpanded })}\n name=\"CheveronLeft\"\n size={16}\n />\n </div>\n <div\n aria-labelledby={accordionId}\n className={clsx(styles.accordion__content, { [styles['accordion__content--expanded']]: isExpanded })}\n >\n {content}\n </div>\n </div>\n );\n};\n"],"names":["Accordion","title","content","expanded","isExpanded","setIsExpanded","useState","accordionId","useId","onKeyUp","event","code","jsxs","styles","jsx","Icon","clsx"],"mappings":";;;;;;;;;;;GAmBaA,IAAY,CAAC,EAAE,OAAAC,GAAO,SAAAC,GAAS,UAAAC,IAAW,SAA4B;AACjF,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAASH,CAAQ,GAC/CI,IAAcC,EAAM;AAE1B,WAASC,EAAQC,GAAsC;AAC/C,UAAA,EAAE,MAAAC,MAASD;AAEb,KAAAC,MAAS,WAAWA,MAAS,YAC/BN,EAAc,CAACD,CAAU;AAAA,EAC3B;AAGF,SACG,gBAAAQ,EAAA,OAAA,EAAI,WAAWC,EAAO,WACrB,UAAA;AAAA,IAAA,gBAAAD;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWC,EAAO;AAAA,QAClB,IAAIN;AAAA,QACJ,MAAK;AAAA,QACL,UAAU;AAAA,QACV,SAAS,MAAMF,EAAc,CAACD,CAAU;AAAA,QACxC,SAAAK;AAAA,QACA,iBAAeL;AAAA,QAEd,UAAA;AAAA,UAAAH;AAAA,UACD,gBAAAa;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,WAAWC,EAAKH,EAAO,uBAAuB,GAAG,EAAE,CAACA,EAAO,iCAAiC,CAAC,GAAGT,GAAY;AAAA,cAC5G,MAAK;AAAA,cACL,MAAM;AAAA,YAAA;AAAA,UAAA;AAAA,QACR;AAAA,MAAA;AAAA,IACF;AAAA,IACA,gBAAAU;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,mBAAiBP;AAAA,QACjB,WAAWS,EAAKH,EAAO,oBAAoB,EAAE,CAACA,EAAO,8BAA8B,CAAC,GAAGT,GAAY;AAAA,QAElG,UAAAF;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.stories.js","sources":["../../../src/components/Accordion/Accordion.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { AccordionProps } from './Accordion';\n\nimport { Accordion } from './Accordion';\n\nimport { Container } from 'storyComponents/Container';\n\nconst codeString = '<Accordion title={title} content={content}/>';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/Accordion',\n component: Accordion,\n argTypes: {\n expanded: {\n // Hide the expanded prop. Changing the value in Storybook doesn't update the state of the component.\n table: {\n disable: true,\n },\n },\n },\n parameters: {\n inspectComponent: Accordion,\n codeString: codeString,\n },\n} as Meta<AccordionProps>;\n\nconst Template: StoryFn<AccordionProps> = (args) => (\n <Container>\n <Accordion {...args} />\n </Container>\n);\n\nexport const AccordionExample = Template.bind({});\nAccordionExample.args = {\n title: 'Example title',\n content: 'Example content',\n};\n\nexport const WithComplexProps = Template.bind({});\nWithComplexProps.args = {\n title: <div style={{ fontWeight: 'bold' }}>Complex sample title</div>,\n content: <div style={{ fontStyle: 'italic' }}>Complex sample content</div>,\n};\n"],"names":["codeString","Accordion_stories","Accordion","Template","args","jsx","Container","AccordionExample","WithComplexProps"],"mappings":";;;AAOA,MAAMA,IAAa,gDAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,UAAU;AAAA;AAAA,MAER,OAAO;AAAA,QACL,SAAS;AAAA,
|
|
1
|
+
{"version":3,"file":"Accordion.stories.js","sources":["../../../src/components/Accordion/Accordion.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { AccordionProps } from './Accordion';\n\nimport { Accordion } from './Accordion';\n\nimport { Container } from 'storyComponents/Container';\n\nconst codeString = '<Accordion title={title} content={content}/>';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/Accordion',\n component: Accordion,\n argTypes: {\n expanded: {\n // Hide the expanded prop. Changing the value in Storybook doesn't update the state of the component.\n table: {\n disable: true,\n },\n },\n },\n parameters: {\n inspectComponent: Accordion,\n codeString: codeString,\n },\n} as Meta<AccordionProps>;\n\nconst Template: StoryFn<AccordionProps> = (args) => (\n <Container>\n <Accordion {...args} />\n </Container>\n);\n\nexport const AccordionExample = Template.bind({});\nAccordionExample.args = {\n title: 'Example title',\n content: 'Example content',\n};\n\nexport const WithComplexProps = Template.bind({});\nWithComplexProps.args = {\n title: <div style={{ fontWeight: 'bold' }}>Complex sample title</div>,\n content: <div style={{ fontStyle: 'italic' }}>Complex sample content</div>,\n};\n"],"names":["codeString","Accordion_stories","Accordion","Template","args","jsx","Container","AccordionExample","WithComplexProps"],"mappings":";;;AAOA,MAAMA,IAAa,gDAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,UAAU;AAAA;AAAA,MAER,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EAEJ;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAoC,CAACC,MACzC,gBAAAC,EAACC,KACC,UAAC,gBAAAD,EAAAH,GAAA,EAAW,GAAGE,EAAA,CAAM,EACvB,CAAA,GAGWG,IAAmBJ,EAAS,KAAK,CAAE,CAAA;AAChDI,EAAiB,OAAO;AAAA,EACtB,OAAO;AAAA,EACP,SAAS;AACX;AAEO,MAAMC,IAAmBL,EAAS,KAAK,CAAE,CAAA;AAChDK,EAAiB,OAAO;AAAA,EACtB,yBAAQ,OAAI,EAAA,OAAO,EAAE,YAAY,UAAU,UAAoB,wBAAA;AAAA,EAC/D,2BAAU,OAAI,EAAA,OAAO,EAAE,WAAW,SAAA,GAAY,UAAsB,yBAAA,CAAA;AACtE;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionCard.js","sources":["../../../src/components/AccordionCard/AccordionCard.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { useId, useState } from 'react';\n\nimport type { KeyboardEvent, ReactNode } from 'react';\n\nimport styles from './AccordionCard.module.css';\n\nimport { Icon } from 'components/Icon';\n\nexport interface AccordionCardProps {\n /** Clickable title (always visible). */\n title: ReactNode;\n /** Main content (hidden when expanded is false). */\n content: ReactNode;\n /** Indicator if Accordion should be expanded by default.*/\n expanded?: boolean;\n}\n\nexport const AccordionCard = ({ title, content, expanded = false }: AccordionCardProps) => {\n const [isExpanded, setIsExpanded] = useState(expanded);\n const accordionId = useId();\n\n const onKeyUp = (event: KeyboardEvent<HTMLDivElement>) => {\n const { code } = event;\n\n if (code === 'Enter' || code === 'Space') {\n setIsExpanded(!isExpanded);\n }\n };\n\n return (\n <div className={styles['accordion-card']}>\n <div\n className={styles['accordion-card__title']}\n id={accordionId}\n role=\"button\"\n tabIndex={0}\n onClick={() => setIsExpanded(!isExpanded)}\n onKeyUp={onKeyUp}\n aria-expanded={isExpanded}\n >\n <Icon\n className={clsx(styles['accordion-card__title-icon'], {\n [styles['accordion-card__title-icon--expanded']]: isExpanded,\n })}\n name=\"CheveronLeft\"\n size={16}\n />\n <h3>{title}</h3>\n </div>\n <div\n aria-labelledby={accordionId}\n className={clsx(styles['accordion-card__content'], {\n [styles['accordion-card__content--expanded']]: isExpanded,\n })}\n >\n {content}\n </div>\n </div>\n );\n};\n"],"names":["AccordionCard","title","content","expanded","isExpanded","setIsExpanded","useState","accordionId","useId","onKeyUp","event","code","jsxs","styles","jsx","Icon","clsx"],"mappings":";;;;;;;;;;;GAkBaA,IAAgB,CAAC,EAAE,OAAAC,GAAO,SAAAC,GAAS,UAAAC,IAAW,SAAgC;AACzF,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAASH,CAAQ,GAC/CI,IAAcC,
|
|
1
|
+
{"version":3,"file":"AccordionCard.js","sources":["../../../src/components/AccordionCard/AccordionCard.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { useId, useState } from 'react';\n\nimport type { KeyboardEvent, ReactNode } from 'react';\n\nimport styles from './AccordionCard.module.css';\n\nimport { Icon } from 'components/Icon';\n\nexport interface AccordionCardProps {\n /** Clickable title (always visible). */\n title: ReactNode;\n /** Main content (hidden when expanded is false). */\n content: ReactNode;\n /** Indicator if Accordion should be expanded by default.*/\n expanded?: boolean;\n}\n\nexport const AccordionCard = ({ title, content, expanded = false }: AccordionCardProps) => {\n const [isExpanded, setIsExpanded] = useState(expanded);\n const accordionId = useId();\n\n const onKeyUp = (event: KeyboardEvent<HTMLDivElement>) => {\n const { code } = event;\n\n if (code === 'Enter' || code === 'Space') {\n setIsExpanded(!isExpanded);\n }\n };\n\n return (\n <div className={styles['accordion-card']}>\n <div\n className={styles['accordion-card__title']}\n id={accordionId}\n role=\"button\"\n tabIndex={0}\n onClick={() => setIsExpanded(!isExpanded)}\n onKeyUp={onKeyUp}\n aria-expanded={isExpanded}\n >\n <Icon\n className={clsx(styles['accordion-card__title-icon'], {\n [styles['accordion-card__title-icon--expanded']]: isExpanded,\n })}\n name=\"CheveronLeft\"\n size={16}\n />\n <h3>{title}</h3>\n </div>\n <div\n aria-labelledby={accordionId}\n className={clsx(styles['accordion-card__content'], {\n [styles['accordion-card__content--expanded']]: isExpanded,\n })}\n >\n {content}\n </div>\n </div>\n );\n};\n"],"names":["AccordionCard","title","content","expanded","isExpanded","setIsExpanded","useState","accordionId","useId","onKeyUp","event","code","jsxs","styles","jsx","Icon","clsx"],"mappings":";;;;;;;;;;;GAkBaA,IAAgB,CAAC,EAAE,OAAAC,GAAO,SAAAC,GAAS,UAAAC,IAAW,SAAgC;AACzF,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAASH,CAAQ,GAC/CI,IAAcC,EAAM,GAEpBC,IAAU,CAACC,MAAyC;AAClD,UAAA,EAAE,MAAAC,MAASD;AAEb,KAAAC,MAAS,WAAWA,MAAS,YAC/BN,EAAc,CAACD,CAAU;AAAA,EAE7B;AAEA,SACG,gBAAAQ,EAAA,OAAA,EAAI,WAAWC,EAAO,gBAAgB,GACrC,UAAA;AAAA,IAAA,gBAAAD;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWC,EAAO,uBAAuB;AAAA,QACzC,IAAIN;AAAA,QACJ,MAAK;AAAA,QACL,UAAU;AAAA,QACV,SAAS,MAAMF,EAAc,CAACD,CAAU;AAAA,QACxC,SAAAK;AAAA,QACA,iBAAeL;AAAA,QAEf,UAAA;AAAA,UAAA,gBAAAU;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,WAAWC,EAAKH,EAAO,4BAA4B,GAAG;AAAA,gBACpD,CAACA,EAAO,sCAAsC,CAAC,GAAGT;AAAA,cAAA,CACnD;AAAA,cACD,MAAK;AAAA,cACL,MAAM;AAAA,YAAA;AAAA,UACR;AAAA,UACA,gBAAAU,EAAC,QAAI,UAAMb,EAAA,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACb;AAAA,IACA,gBAAAa;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,mBAAiBP;AAAA,QACjB,WAAWS,EAAKH,EAAO,yBAAyB,GAAG;AAAA,UACjD,CAACA,EAAO,mCAAmC,CAAC,GAAGT;AAAA,QAAA,CAChD;AAAA,QAEA,UAAAF;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionCard.stories.js","sources":["../../../src/components/AccordionCard/AccordionCard.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { AccordionCardProps } from './AccordionCard';\n\nimport { AccordionCard } from './AccordionCard';\n\nimport { Container } from 'storyComponents/Container';\n\nconst codeString = '<AccordionCard title={title} content={content}/>';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/AccordionCard',\n component: AccordionCard,\n argTypes: {\n expanded: {\n // Hide the expanded prop. Changing the value in Storybook doesn't update the state of the component.\n table: {\n disable: true,\n },\n },\n },\n parameters: {\n inspectComponent: AccordionCard,\n codeString: codeString,\n },\n} as Meta<AccordionCardProps>;\n\nconst Template: StoryFn<AccordionCardProps> = (args) => (\n <Container size=\"large\">\n <AccordionCard {...args} />\n </Container>\n);\n\nexport const AccordionCardExample = Template.bind({});\nAccordionCardExample.args = {\n title: 'Vakaanbieding 1',\n content: (\n <div>\n <h3 style={{ marginTop: '0' }}>Vakaanmelding: Het Belang van een Goede Start van Je Studiejaar</h3>\n <p>\n Vakaanmelding is een cruciale stap in het studieproces, waarbij studenten zich inschrijven voor de vakken die\n zij tijdens een semester of studiejaar willen volgen. Deze procedure is belangrijk om een gestructureerd en\n succesvol academisch traject te waarborgen. Hieronder bespreken we wat vakaanmelding inhoudt, waarom het\n essentieel is en hoe je je optimaal kunt voorbereiden.\n </p>\n <h3>Wat is vakaanmelding?</h3>\n <p>\n Vakaanmelding is het proces waarbij studenten via een digitaal systeem (zoals Blackboard, Canvas of een\n specifieke universiteitsportal) aangeven welke vakken zij willen volgen. Dit kan variëren van verplichte\n kernvakken tot keuzevakken die aansluiten bij persoonlijke interesses of specialisaties.\n </p>\n </div>\n ),\n};\n"],"names":["codeString","AccordionCard_stories","AccordionCard","Template","args","jsx","Container","AccordionCardExample"],"mappings":";;;AAOA,MAAMA,IAAa,oDAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,UAAU;AAAA;AAAA,MAER,OAAO;AAAA,QACL,SAAS;AAAA,
|
|
1
|
+
{"version":3,"file":"AccordionCard.stories.js","sources":["../../../src/components/AccordionCard/AccordionCard.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { AccordionCardProps } from './AccordionCard';\n\nimport { AccordionCard } from './AccordionCard';\n\nimport { Container } from 'storyComponents/Container';\n\nconst codeString = '<AccordionCard title={title} content={content}/>';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/AccordionCard',\n component: AccordionCard,\n argTypes: {\n expanded: {\n // Hide the expanded prop. Changing the value in Storybook doesn't update the state of the component.\n table: {\n disable: true,\n },\n },\n },\n parameters: {\n inspectComponent: AccordionCard,\n codeString: codeString,\n },\n} as Meta<AccordionCardProps>;\n\nconst Template: StoryFn<AccordionCardProps> = (args) => (\n <Container size=\"large\">\n <AccordionCard {...args} />\n </Container>\n);\n\nexport const AccordionCardExample = Template.bind({});\nAccordionCardExample.args = {\n title: 'Vakaanbieding 1',\n content: (\n <div>\n <h3 style={{ marginTop: '0' }}>Vakaanmelding: Het Belang van een Goede Start van Je Studiejaar</h3>\n <p>\n Vakaanmelding is een cruciale stap in het studieproces, waarbij studenten zich inschrijven voor de vakken die\n zij tijdens een semester of studiejaar willen volgen. Deze procedure is belangrijk om een gestructureerd en\n succesvol academisch traject te waarborgen. Hieronder bespreken we wat vakaanmelding inhoudt, waarom het\n essentieel is en hoe je je optimaal kunt voorbereiden.\n </p>\n <h3>Wat is vakaanmelding?</h3>\n <p>\n Vakaanmelding is het proces waarbij studenten via een digitaal systeem (zoals Blackboard, Canvas of een\n specifieke universiteitsportal) aangeven welke vakken zij willen volgen. Dit kan variëren van verplichte\n kernvakken tot keuzevakken die aansluiten bij persoonlijke interesses of specialisaties.\n </p>\n </div>\n ),\n};\n"],"names":["codeString","AccordionCard_stories","AccordionCard","Template","args","jsx","Container","AccordionCardExample"],"mappings":";;;AAOA,MAAMA,IAAa,oDAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,UAAU;AAAA;AAAA,MAER,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EAEJ;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAwC,CAACC,MAC5C,gBAAAC,EAAAC,GAAA,EAAU,MAAK,SACd,UAAC,gBAAAD,EAAAH,GAAA,EAAe,GAAGE,EAAA,CAAM,EAC3B,CAAA,GAGWG,IAAuBJ,EAAS,KAAK,CAAE,CAAA;AACpDI,EAAqB,OAAO;AAAA,EAC1B,OAAO;AAAA,EACP,2BACG,OACC,EAAA,UAAA;AAAA,IAAA,gBAAAF,EAAC,QAAG,OAAO,EAAE,WAAW,OAAO,UAA+D,mEAAA;AAAA,IAC9F,gBAAAA,EAAC,OAAE,UAKH,4XAAA,CAAA;AAAA,IACA,gBAAAA,EAAC,QAAG,UAAqB,wBAAA,CAAA;AAAA,IACzB,gBAAAA,EAAC,OAAE,UAIH,4SAAA,CAAA;AAAA,EAAA,EACF,CAAA;AAEJ;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActionList.js","sources":["../../../src/components/ActionList/ActionList.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { Children, useEffect, useId, useRef, useState } from 'react';\n\nimport type { KeyboardEvent, MouseEvent as ReactMouseEvent, ReactElement } from 'react';\nimport type { IconProps } from 'components/Icon';\nimport type { UIButtonVariant } from 'types/UserInterface';\n\nimport styles from './ActionList.module.css';\n\nimport { Icon } from 'components/Icon';\nimport { MenuButton } from 'components/Buttons';\n\nexport interface ActionListProps {\n /** The label that is displayed before the icon. */\n label: string;\n /** The icon that is shown in front of the label. */\n prefixIcon?: IconProps['name'];\n /** The icon that is shown to toggle the menu. If none is specified, CheveronUp and CheveronDown is used depending on whether the menu is opened or closed. */\n iconName?: IconProps['name'];\n /** Determines the button variant. */\n variant?: UIButtonVariant;\n /** The child component(s). */\n children: ReactElement | ReactElement[];\n}\n\nconst inactiveIndex = -1;\nconst indexIncrement = 1;\n\n/** A component to show an action list to toggle a menu. */\nexport function ActionList({ label, prefixIcon, iconName, variant = 'secondary', children }: ActionListProps) {\n const listId = useId();\n const triggerRef = useRef<HTMLButtonElement>(null);\n const listRef = useRef<HTMLDivElement>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n\n const numberOfChildren = Children.count(children);\n\n const [activeIndex, setActiveIndex] = useState(inactiveIndex);\n const [isOpen, setIsOpen] = useState(false);\n\n function open() {\n setIsOpen(true);\n\n document.addEventListener('click', onClickOutside, { once: true, capture: true });\n }\n\n function close(event?: ReactMouseEvent<HTMLDivElement>) {\n // When a click occurs on an element that is not an immediate descendant of the action list container\n // (can happen when a modal window is triggered from a button in the action list), the setIsOpen state\n // handler should not be called, because this causes a re-render of the entire component and can lead\n // to undesired effects, like a select element closing immediately after it has been clicked.\n if (event && containerRef.current && !containerRef.current.contains(event.target as Node)) {\n return;\n }\n\n setActiveIndex(inactiveIndex);\n setIsOpen(false);\n\n document.removeEventListener('click', onClickOutside, { capture: true });\n }\n\n function toggle() {\n if (isOpen) close();\n else open();\n }\n\n function onKeyDown(event: KeyboardEvent) {\n if (!isOpen) return;\n\n const eventPreventCodes = ['ArrowUp', 'ArrowDown', 'Home', 'End'];\n\n if (eventPreventCodes.includes(event.code)) {\n // prevent page from scrolling when navigating through items in list\n event.preventDefault();\n }\n\n if (event.code === 'Tab') {\n close();\n }\n }\n\n function onKeyUp(event: KeyboardEvent) {\n if (event.code === 'Space' || event.key === 'Enter') {\n if (event.target === triggerRef.current) {\n toggle();\n } else if (event.key === 'Enter' && event.target !== listRef.current) {\n if ('firstChild' in event.target) {\n const firstChild = event.target.firstChild as HTMLButtonElement;\n\n firstChild.click();\n }\n }\n }\n\n if (event.code === 'Escape') close();\n\n if (event.code === 'ArrowUp') {\n setActiveIndex((prevState) => {\n if (prevState === 0) return numberOfChildren - indexIncrement;\n\n return prevState - indexIncrement;\n });\n }\n\n if (event.code === 'ArrowDown') {\n setActiveIndex((prevState) => {\n if (prevState === numberOfChildren - indexIncrement) return 0;\n\n return prevState + indexIncrement;\n });\n }\n\n if (event.code === 'Home') {\n setActiveIndex(0);\n }\n\n if (event.code === 'End') {\n setActiveIndex(numberOfChildren - indexIncrement);\n }\n }\n\n const onClickOutside = (event: MouseEvent) => {\n const { target } = event;\n\n if (!target || !containerRef.current) return;\n\n if (!containerRef.current.contains(target as Node)) {\n close();\n }\n };\n\n useEffect(() => {\n if (activeIndex < 0 || !listRef.current) return;\n\n const listItem = listRef.current.children.item(activeIndex);\n\n if (listItem) {\n (listItem as HTMLDivElement).focus();\n }\n }, [activeIndex]);\n\n useEffect(() => {\n if (!listRef.current || !listRef.current.hasChildNodes()) return;\n\n Array.from(listRef.current.children)\n .filter((overlayChild) => overlayChild.nodeType === Node.ELEMENT_NODE && overlayChild.hasChildNodes())\n .forEach((overlayChild) => {\n Array.from(overlayChild.children)\n .filter((childOfChild) => childOfChild.nodeType === Node.ELEMENT_NODE)\n .forEach((childOfChild) => {\n // internal children may be buttons and can get focus when tab is pressed; preventing those elements\n // from getting focus so that list can be tabbed over and traversed with arrow keys\n childOfChild.setAttribute('tabIndex', '-1');\n });\n });\n }, [children]);\n\n return (\n <div className={styles['action-list-container']} ref={containerRef}>\n <MenuButton onClick={toggle} onKeyDown={onKeyDown} onKeyUp={onKeyUp} buttonRef={triggerRef} variant={variant}>\n {prefixIcon && <Icon size={24} name={prefixIcon} />}\n {label}\n {iconName ? (\n <Icon size={24} name={iconName} />\n ) : (\n <Icon size={16} name={isOpen ? 'CheveronUp' : 'CheveronDown'} />\n )}\n </MenuButton>\n <div\n aria-activedescendant={`${listId}-child-${activeIndex}`}\n aria-label={label}\n className={clsx(styles['action-list'], {\n [styles['action-list--open']]: isOpen,\n })}\n onClickCapture={close}\n onKeyDown={onKeyDown}\n onKeyUp={onKeyUp}\n ref={listRef}\n role=\"menu\"\n tabIndex={-1}\n >\n {Children.map(children, (child, index) => (\n <div key={`${listId}-child-${index}`} role=\"menuitem\" tabIndex={-1}>\n {child}\n </div>\n ))}\n </div>\n </div>\n );\n}\n"],"names":["inactiveIndex","indexIncrement","ActionList","label","prefixIcon","iconName","variant","children","listId","useId","triggerRef","useRef","listRef","containerRef","numberOfChildren","Children","activeIndex","setActiveIndex","useState","isOpen","setIsOpen","open","onClickOutside","close","event","toggle","onKeyDown","onKeyUp","prevState","target","useEffect","listItem","overlayChild","childOfChild","styles","jsxs","MenuButton","jsx","Icon","clsx","child","index"],"mappings":";;;;;;;;;;;GAyBMA,IAAgB,IAChBC,IAAiB;AAGP,SAAAC,EAAW,EAAE,OAAAC,GAAO,YAAAC,GAAY,UAAAC,GAAU,SAAAC,IAAU,aAAa,UAAAC,KAA6B;AAC5G,QAAMC,IAASC,
|
|
1
|
+
{"version":3,"file":"ActionList.js","sources":["../../../src/components/ActionList/ActionList.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { Children, useEffect, useId, useRef, useState } from 'react';\n\nimport type { KeyboardEvent, MouseEvent as ReactMouseEvent, ReactElement } from 'react';\nimport type { IconProps } from 'components/Icon';\nimport type { UIButtonVariant } from 'types/UserInterface';\n\nimport styles from './ActionList.module.css';\n\nimport { Icon } from 'components/Icon';\nimport { MenuButton } from 'components/Buttons';\n\nexport interface ActionListProps {\n /** The label that is displayed before the icon. */\n label: string;\n /** The icon that is shown in front of the label. */\n prefixIcon?: IconProps['name'];\n /** The icon that is shown to toggle the menu. If none is specified, CheveronUp and CheveronDown is used depending on whether the menu is opened or closed. */\n iconName?: IconProps['name'];\n /** Determines the button variant. */\n variant?: UIButtonVariant;\n /** The child component(s). */\n children: ReactElement | ReactElement[];\n}\n\nconst inactiveIndex = -1;\nconst indexIncrement = 1;\n\n/** A component to show an action list to toggle a menu. */\nexport function ActionList({ label, prefixIcon, iconName, variant = 'secondary', children }: ActionListProps) {\n const listId = useId();\n const triggerRef = useRef<HTMLButtonElement>(null);\n const listRef = useRef<HTMLDivElement>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n\n const numberOfChildren = Children.count(children);\n\n const [activeIndex, setActiveIndex] = useState(inactiveIndex);\n const [isOpen, setIsOpen] = useState(false);\n\n function open() {\n setIsOpen(true);\n\n document.addEventListener('click', onClickOutside, { once: true, capture: true });\n }\n\n function close(event?: ReactMouseEvent<HTMLDivElement>) {\n // When a click occurs on an element that is not an immediate descendant of the action list container\n // (can happen when a modal window is triggered from a button in the action list), the setIsOpen state\n // handler should not be called, because this causes a re-render of the entire component and can lead\n // to undesired effects, like a select element closing immediately after it has been clicked.\n if (event && containerRef.current && !containerRef.current.contains(event.target as Node)) {\n return;\n }\n\n setActiveIndex(inactiveIndex);\n setIsOpen(false);\n\n document.removeEventListener('click', onClickOutside, { capture: true });\n }\n\n function toggle() {\n if (isOpen) close();\n else open();\n }\n\n function onKeyDown(event: KeyboardEvent) {\n if (!isOpen) return;\n\n const eventPreventCodes = ['ArrowUp', 'ArrowDown', 'Home', 'End'];\n\n if (eventPreventCodes.includes(event.code)) {\n // prevent page from scrolling when navigating through items in list\n event.preventDefault();\n }\n\n if (event.code === 'Tab') {\n close();\n }\n }\n\n function onKeyUp(event: KeyboardEvent) {\n if (event.code === 'Space' || event.key === 'Enter') {\n if (event.target === triggerRef.current) {\n toggle();\n } else if (event.key === 'Enter' && event.target !== listRef.current) {\n if ('firstChild' in event.target) {\n const firstChild = event.target.firstChild as HTMLButtonElement;\n\n firstChild.click();\n }\n }\n }\n\n if (event.code === 'Escape') close();\n\n if (event.code === 'ArrowUp') {\n setActiveIndex((prevState) => {\n if (prevState === 0) return numberOfChildren - indexIncrement;\n\n return prevState - indexIncrement;\n });\n }\n\n if (event.code === 'ArrowDown') {\n setActiveIndex((prevState) => {\n if (prevState === numberOfChildren - indexIncrement) return 0;\n\n return prevState + indexIncrement;\n });\n }\n\n if (event.code === 'Home') {\n setActiveIndex(0);\n }\n\n if (event.code === 'End') {\n setActiveIndex(numberOfChildren - indexIncrement);\n }\n }\n\n const onClickOutside = (event: MouseEvent) => {\n const { target } = event;\n\n if (!target || !containerRef.current) return;\n\n if (!containerRef.current.contains(target as Node)) {\n close();\n }\n };\n\n useEffect(() => {\n if (activeIndex < 0 || !listRef.current) return;\n\n const listItem = listRef.current.children.item(activeIndex);\n\n if (listItem) {\n (listItem as HTMLDivElement).focus();\n }\n }, [activeIndex]);\n\n useEffect(() => {\n if (!listRef.current || !listRef.current.hasChildNodes()) return;\n\n Array.from(listRef.current.children)\n .filter((overlayChild) => overlayChild.nodeType === Node.ELEMENT_NODE && overlayChild.hasChildNodes())\n .forEach((overlayChild) => {\n Array.from(overlayChild.children)\n .filter((childOfChild) => childOfChild.nodeType === Node.ELEMENT_NODE)\n .forEach((childOfChild) => {\n // internal children may be buttons and can get focus when tab is pressed; preventing those elements\n // from getting focus so that list can be tabbed over and traversed with arrow keys\n childOfChild.setAttribute('tabIndex', '-1');\n });\n });\n }, [children]);\n\n return (\n <div className={styles['action-list-container']} ref={containerRef}>\n <MenuButton onClick={toggle} onKeyDown={onKeyDown} onKeyUp={onKeyUp} buttonRef={triggerRef} variant={variant}>\n {prefixIcon && <Icon size={24} name={prefixIcon} />}\n {label}\n {iconName ? (\n <Icon size={24} name={iconName} />\n ) : (\n <Icon size={16} name={isOpen ? 'CheveronUp' : 'CheveronDown'} />\n )}\n </MenuButton>\n <div\n aria-activedescendant={`${listId}-child-${activeIndex}`}\n aria-label={label}\n className={clsx(styles['action-list'], {\n [styles['action-list--open']]: isOpen,\n })}\n onClickCapture={close}\n onKeyDown={onKeyDown}\n onKeyUp={onKeyUp}\n ref={listRef}\n role=\"menu\"\n tabIndex={-1}\n >\n {Children.map(children, (child, index) => (\n <div key={`${listId}-child-${index}`} role=\"menuitem\" tabIndex={-1}>\n {child}\n </div>\n ))}\n </div>\n </div>\n );\n}\n"],"names":["inactiveIndex","indexIncrement","ActionList","label","prefixIcon","iconName","variant","children","listId","useId","triggerRef","useRef","listRef","containerRef","numberOfChildren","Children","activeIndex","setActiveIndex","useState","isOpen","setIsOpen","open","onClickOutside","close","event","toggle","onKeyDown","onKeyUp","prevState","target","useEffect","listItem","overlayChild","childOfChild","styles","jsxs","MenuButton","jsx","Icon","clsx","child","index"],"mappings":";;;;;;;;;;;GAyBMA,IAAgB,IAChBC,IAAiB;AAGP,SAAAC,EAAW,EAAE,OAAAC,GAAO,YAAAC,GAAY,UAAAC,GAAU,SAAAC,IAAU,aAAa,UAAAC,KAA6B;AAC5G,QAAMC,IAASC,EAAM,GACfC,IAAaC,EAA0B,IAAI,GAC3CC,IAAUD,EAAuB,IAAI,GACrCE,IAAeF,EAAuB,IAAI,GAE1CG,IAAmBC,EAAS,MAAMR,CAAQ,GAE1C,CAACS,GAAaC,CAAc,IAAIC,EAASlB,CAAa,GACtD,CAACmB,GAAQC,CAAS,IAAIF,EAAS,EAAK;AAE1C,WAASG,IAAO;AACd,IAAAD,EAAU,EAAI,GAEL,SAAA,iBAAiB,SAASE,GAAgB,EAAE,MAAM,IAAM,SAAS,IAAM;AAAA,EAAA;AAGlF,WAASC,EAAMC,GAAyC;AAKlD,IAAAA,KAASX,EAAa,WAAW,CAACA,EAAa,QAAQ,SAASW,EAAM,MAAc,MAIxFP,EAAejB,CAAa,GAC5BoB,EAAU,EAAK,GAEf,SAAS,oBAAoB,SAASE,GAAgB,EAAE,SAAS,IAAM;AAAA,EAAA;AAGzE,WAASG,IAAS;AAChB,IAAIN,IAAcI,EAAA,IACRF,EAAA;AAAA,EAAA;AAGZ,WAASK,EAAUF,GAAsB;AACvC,QAAI,CAACL,EAAQ;AAIb,IAF0B,CAAC,WAAW,aAAa,QAAQ,KAAK,EAE1C,SAASK,EAAM,IAAI,KAEvCA,EAAM,eAAe,GAGnBA,EAAM,SAAS,SACXD,EAAA;AAAA,EACR;AAGF,WAASI,EAAQH,GAAsB;AACrC,KAAIA,EAAM,SAAS,WAAWA,EAAM,QAAQ,aACtCA,EAAM,WAAWd,EAAW,UACvBe,EAAA,IACED,EAAM,QAAQ,WAAWA,EAAM,WAAWZ,EAAQ,WACvD,gBAAgBY,EAAM,UACLA,EAAM,OAAO,WAErB,MAAM,IAKnBA,EAAM,SAAS,YAAgBD,EAAA,GAE/BC,EAAM,SAAS,aACjBP,EAAe,CAACW,MACVA,MAAc,IAAUd,IAAmBb,IAExC2B,IAAY3B,CACpB,GAGCuB,EAAM,SAAS,eACjBP,EAAe,CAACW,MACVA,MAAcd,IAAmBb,IAAuB,IAErD2B,IAAY3B,CACpB,GAGCuB,EAAM,SAAS,UACjBP,EAAe,CAAC,GAGdO,EAAM,SAAS,SACjBP,EAAeH,IAAmBb,CAAc;AAAA,EAClD;AAGI,QAAAqB,IAAiB,CAACE,MAAsB;AACtC,UAAA,EAAE,QAAAK,MAAWL;AAEnB,IAAI,CAACK,KAAU,CAAChB,EAAa,WAExBA,EAAa,QAAQ,SAASgB,CAAc,KACzCN,EAAA;AAAA,EAEV;AAEA,SAAAO,EAAU,MAAM;AACd,QAAId,IAAc,KAAK,CAACJ,EAAQ,QAAS;AAEzC,UAAMmB,IAAWnB,EAAQ,QAAQ,SAAS,KAAKI,CAAW;AAE1D,IAAIe,KACDA,EAA4B,MAAM;AAAA,EACrC,GACC,CAACf,CAAW,CAAC,GAEhBc,EAAU,MAAM;AACd,IAAI,CAAClB,EAAQ,WAAW,CAACA,EAAQ,QAAQ,mBAEzC,MAAM,KAAKA,EAAQ,QAAQ,QAAQ,EAChC,OAAO,CAACoB,MAAiBA,EAAa,aAAa,KAAK,gBAAgBA,EAAa,cAAA,CAAe,EACpG,QAAQ,CAACA,MAAiB;AACzB,YAAM,KAAKA,EAAa,QAAQ,EAC7B,OAAO,CAACC,MAAiBA,EAAa,aAAa,KAAK,YAAY,EACpE,QAAQ,CAACA,MAAiB;AAGZ,QAAAA,EAAA,aAAa,YAAY,IAAI;AAAA,MAAA,CAC3C;AAAA,IAAA,CACJ;AAAA,EAAA,GACF,CAAC1B,CAAQ,CAAC,qBAGV,OAAI,EAAA,WAAW2B,EAAO,uBAAuB,GAAG,KAAKrB,GACpD,UAAA;AAAA,IAAA,gBAAAsB,EAACC,KAAW,SAASX,GAAQ,WAAAC,GAAsB,SAAAC,GAAkB,WAAWjB,GAAY,SAAAJ,GACzF,UAAA;AAAA,MAAAF,KAAe,gBAAAiC,EAAAC,GAAA,EAAK,MAAM,IAAI,MAAMlC,GAAY;AAAA,MAChDD;AAAA,MACAE,IACC,gBAAAgC,EAACC,GAAK,EAAA,MAAM,IAAI,MAAMjC,EAAU,CAAA,IAEhC,gBAAAgC,EAACC,KAAK,MAAM,IAAI,MAAMnB,IAAS,eAAe,eAAgB,CAAA;AAAA,IAAA,GAElE;AAAA,IACA,gBAAAkB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,yBAAuB,GAAG7B,CAAM,UAAUQ,CAAW;AAAA,QACrD,cAAYb;AAAA,QACZ,WAAWoC,EAAKL,EAAO,aAAa,GAAG;AAAA,UACrC,CAACA,EAAO,mBAAmB,CAAC,GAAGf;AAAA,QAAA,CAChC;AAAA,QACD,gBAAgBI;AAAA,QAChB,WAAAG;AAAA,QACA,SAAAC;AAAA,QACA,KAAKf;AAAA,QACL,MAAK;AAAA,QACL,UAAU;AAAA,QAET,YAAS,IAAIL,GAAU,CAACiC,GAAOC,wBAC7B,OAAqC,EAAA,MAAK,YAAW,UAAU,IAC7D,UADOD,EAAA,GAAA,GAAGhC,CAAM,UAAUiC,CAAK,EAElC,CACD;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActionList.stories.js","sources":["../../../src/components/ActionList/ActionList.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { ActionListProps } from './ActionList';\n\nimport { ActionList } from './ActionList';\n\nconst codeString = `\n <ActionList iconName={iconName} variant={variant} label=\"\">\n {mockActions.map(({ action, value }) => (\n <button type=\"button\" onClick={() => onActionClick({ action, id })} key={value}> {action.title} </button>\n ))}\n </ActionList>\n`;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/ActionList',\n component: ActionList,\n argTypes: {\n variant: {\n options: ['primary', 'secondary', 'destructive-primary', 'destructive-secondary', 'blank', 'blank-icon'],\n control: { type: 'radio' },\n },\n },\n parameters: {\n inspectComponent: ActionList,\n codeString: codeString,\n },\n} as Meta<ActionListProps>;\n\nconst Template: StoryFn<ActionListProps> = (args) => (\n <div style={{ marginLeft: '5rem', width: '40px' }}>\n <ActionList {...args} />\n </div>\n);\n\nconst defaultArgs: Partial<ActionListProps> = {\n label: '',\n variant: 'blank-icon',\n iconName: 'EllipsisVertical',\n children: [\n <button key=\"1\" type=\"button\">\n Action 1\n </button>,\n <button key=\"2\" type=\"button\">\n Action 2\n </button>,\n <button key=\"3\" type=\"button\">\n Action 3\n </button>,\n ],\n};\n\nexport const ActionListExample = Template.bind({});\nActionListExample.args = {\n ...defaultArgs,\n};\n"],"names":["codeString","ActionList_stories","ActionList","Template","args","jsx","defaultArgs","ActionListExample"],"mappings":";;AAKA,MAAMA,IAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS,CAAC,WAAW,aAAa,uBAAuB,yBAAyB,SAAS,YAAY;AAAA,MACvG,SAAS,EAAE,MAAM,QAAQ;AAAA,
|
|
1
|
+
{"version":3,"file":"ActionList.stories.js","sources":["../../../src/components/ActionList/ActionList.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { ActionListProps } from './ActionList';\n\nimport { ActionList } from './ActionList';\n\nconst codeString = `\n <ActionList iconName={iconName} variant={variant} label=\"\">\n {mockActions.map(({ action, value }) => (\n <button type=\"button\" onClick={() => onActionClick({ action, id })} key={value}> {action.title} </button>\n ))}\n </ActionList>\n`;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/ActionList',\n component: ActionList,\n argTypes: {\n variant: {\n options: ['primary', 'secondary', 'destructive-primary', 'destructive-secondary', 'blank', 'blank-icon'],\n control: { type: 'radio' },\n },\n },\n parameters: {\n inspectComponent: ActionList,\n codeString: codeString,\n },\n} as Meta<ActionListProps>;\n\nconst Template: StoryFn<ActionListProps> = (args) => (\n <div style={{ marginLeft: '5rem', width: '40px' }}>\n <ActionList {...args} />\n </div>\n);\n\nconst defaultArgs: Partial<ActionListProps> = {\n label: '',\n variant: 'blank-icon',\n iconName: 'EllipsisVertical',\n children: [\n <button key=\"1\" type=\"button\">\n Action 1\n </button>,\n <button key=\"2\" type=\"button\">\n Action 2\n </button>,\n <button key=\"3\" type=\"button\">\n Action 3\n </button>,\n ],\n};\n\nexport const ActionListExample = Template.bind({});\nActionListExample.args = {\n ...defaultArgs,\n};\n"],"names":["codeString","ActionList_stories","ActionList","Template","args","jsx","defaultArgs","ActionListExample"],"mappings":";;AAKA,MAAMA,IAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS,CAAC,WAAW,aAAa,uBAAuB,yBAAyB,SAAS,YAAY;AAAA,MACvG,SAAS,EAAE,MAAM,QAAQ;AAAA,IAAA;AAAA,EAE7B;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAqC,CAACC,MACzC,gBAAAC,EAAA,OAAA,EAAI,OAAO,EAAE,YAAY,QAAQ,OAAO,UACvC,UAAA,gBAAAA,EAACH,GAAY,EAAA,GAAGE,EAAM,CAAA,GACxB,GAGIE,IAAwC;AAAA,EAC5C,OAAO;AAAA,EACP,SAAS;AAAA,EACT,UAAU;AAAA,EACV,UAAU;AAAA,IACP,gBAAAD,EAAA,UAAA,EAAe,MAAK,UAAS,wBAAlB,GAEZ;AAAA,IACC,gBAAAA,EAAA,UAAA,EAAe,MAAK,UAAS,wBAAlB,GAEZ;AAAA,IACC,gBAAAA,EAAA,UAAA,EAAe,MAAK,UAAS,wBAAlB,GAEZ;AAAA,EAAA;AAEJ,GAEaE,IAAoBJ,EAAS,KAAK,CAAE,CAAA;AACjDI,EAAkB,OAAO;AAAA,EACvB,GAAGD;AACL;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppStatusBar.stories.js","sources":["../../../src/components/AppStatusBar/AppStatusBar.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { AppStatusBarProps } from './AppStatusBar';\n\nimport { AppStatusBar } from './AppStatusBar';\n\nconst codeString = '<AppStatusBar severity={severity} message={message} key={key} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/AppStatusBar',\n component: AppStatusBar,\n argTypes: {\n severity: {\n options: ['info', 'warning', 'error'],\n control: { type: 'radio' },\n },\n },\n parameters: {\n inspectComponent: AppStatusBar,\n codeString: codeString,\n },\n} as Meta<AppStatusBarProps>;\n\nconst Template: StoryFn<AppStatusBarProps> = (args) => <AppStatusBar {...args} />;\n\nconst defaultArgs: Partial<AppStatusBarProps> = {\n message: 'Dit is de ontwikkelomgeving van Storybook. Hier kun je componenten bekijken en testen!.',\n severity: 'warning',\n};\n\nexport const AppStatusBarExample = Template.bind({});\nAppStatusBarExample.args = {\n ...defaultArgs,\n};\n"],"names":["codeString","AppStatusBar_stories","AppStatusBar","Template","args","jsx","defaultArgs","AppStatusBarExample"],"mappings":";;AAKA,MAAMA,IAAa,oEAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,UAAU;AAAA,MACR,SAAS,CAAC,QAAQ,WAAW,OAAO;AAAA,MACpC,SAAS,EAAE,MAAM,QAAQ;AAAA,
|
|
1
|
+
{"version":3,"file":"AppStatusBar.stories.js","sources":["../../../src/components/AppStatusBar/AppStatusBar.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { AppStatusBarProps } from './AppStatusBar';\n\nimport { AppStatusBar } from './AppStatusBar';\n\nconst codeString = '<AppStatusBar severity={severity} message={message} key={key} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/AppStatusBar',\n component: AppStatusBar,\n argTypes: {\n severity: {\n options: ['info', 'warning', 'error'],\n control: { type: 'radio' },\n },\n },\n parameters: {\n inspectComponent: AppStatusBar,\n codeString: codeString,\n },\n} as Meta<AppStatusBarProps>;\n\nconst Template: StoryFn<AppStatusBarProps> = (args) => <AppStatusBar {...args} />;\n\nconst defaultArgs: Partial<AppStatusBarProps> = {\n message: 'Dit is de ontwikkelomgeving van Storybook. Hier kun je componenten bekijken en testen!.',\n severity: 'warning',\n};\n\nexport const AppStatusBarExample = Template.bind({});\nAppStatusBarExample.args = {\n ...defaultArgs,\n};\n"],"names":["codeString","AppStatusBar_stories","AppStatusBar","Template","args","jsx","defaultArgs","AppStatusBarExample"],"mappings":";;AAKA,MAAMA,IAAa,oEAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,UAAU;AAAA,MACR,SAAS,CAAC,QAAQ,WAAW,OAAO;AAAA,MACpC,SAAS,EAAE,MAAM,QAAQ;AAAA,IAAA;AAAA,EAE7B;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAuC,CAACC,MAAU,gBAAAC,EAAAH,GAAA,EAAc,GAAGE,GAAM,GAEzEE,IAA0C;AAAA,EAC9C,SAAS;AAAA,EACT,UAAU;AACZ,GAEaC,IAAsBJ,EAAS,KAAK,CAAE,CAAA;AACnDI,EAAoB,OAAO;AAAA,EACzB,GAAGD;AACL;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Attention.stories.js","sources":["../../../src/components/Attention/Attention.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { PropsWithChildren } from 'react';\n\nimport { Attention } from './Attention';\n\nconst codeString = '<Attention>{message}</Attention>';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/Attention',\n component: Attention,\n parameters: {\n inspectComponent: Attention,\n codeString: codeString,\n },\n} as Meta<PropsWithChildren>;\n\nconst Template: StoryFn<PropsWithChildren> = (args) => <Attention {...args}>Example Attention</Attention>;\n\nexport const AttentionExample = Template.bind({});\nAttentionExample.args = {};\n"],"names":["codeString","Attention_stories","Attention","Template","args","AttentionExample"],"mappings":";;AAKA,MAAMA,IAAa,oCAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,
|
|
1
|
+
{"version":3,"file":"Attention.stories.js","sources":["../../../src/components/Attention/Attention.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { PropsWithChildren } from 'react';\n\nimport { Attention } from './Attention';\n\nconst codeString = '<Attention>{message}</Attention>';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/Attention',\n component: Attention,\n parameters: {\n inspectComponent: Attention,\n codeString: codeString,\n },\n} as Meta<PropsWithChildren>;\n\nconst Template: StoryFn<PropsWithChildren> = (args) => <Attention {...args}>Example Attention</Attention>;\n\nexport const AttentionExample = Template.bind({});\nAttentionExample.args = {};\n"],"names":["codeString","Attention_stories","Attention","Template","args","AttentionExample"],"mappings":";;AAKA,MAAMA,IAAa,oCAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAuC,CAACC,wBAAUF,GAAW,EAAA,GAAGE,GAAM,UAAiB,qBAAA,GAEhFC,IAAmBF,EAAS,KAAK,CAAE,CAAA;AAChDE,EAAiB,OAAO,CAAC;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Backdrop.stories.js","sources":["../../../src/components/Backdrop/Backdrop.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { BackdropProps } from './Backdrop';\n\nimport { Backdrop } from './Backdrop';\n\nimport { Container } from 'storyComponents/Container';\n\nimport './Backdrop.stories.css';\n\ntype BackdropStoryProps = BackdropProps & { visible: boolean };\n\nconst codeString = '<Backdrop>{children}</Backdrop>';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/Backdrop',\n component: Backdrop,\n argTypes: {\n children: {\n control: 'text',\n },\n visible: {\n control: 'boolean',\n name: 'Show Backdrop',\n },\n },\n parameters: {\n inspectComponent: Backdrop,\n codeString: codeString,\n },\n} as Meta<BackdropStoryProps>;\n\nconst Template: StoryFn<BackdropStoryProps> = (args) => {\n return (\n <Container visible={args.visible}>\n <Backdrop>\n <div className=\"container\">{args.children}</div>\n </Backdrop>\n </Container>\n );\n};\n\nexport const BackdropExample = Template.bind({});\nBackdropExample.args = {\n visible: true,\n children: 'Dummy Overlay',\n};\n"],"names":["codeString","Backdrop_stories","Backdrop","Template","args","jsx","Container","BackdropExample"],"mappings":";;;AAWA,MAAMA,IAAa,mCAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,UAAU;AAAA,MACR,SAAS;AAAA,IACX;AAAA,IACA,SAAS;AAAA,MACP,SAAS;AAAA,MACT,MAAM;AAAA,
|
|
1
|
+
{"version":3,"file":"Backdrop.stories.js","sources":["../../../src/components/Backdrop/Backdrop.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { BackdropProps } from './Backdrop';\n\nimport { Backdrop } from './Backdrop';\n\nimport { Container } from 'storyComponents/Container';\n\nimport './Backdrop.stories.css';\n\ntype BackdropStoryProps = BackdropProps & { visible: boolean };\n\nconst codeString = '<Backdrop>{children}</Backdrop>';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/Backdrop',\n component: Backdrop,\n argTypes: {\n children: {\n control: 'text',\n },\n visible: {\n control: 'boolean',\n name: 'Show Backdrop',\n },\n },\n parameters: {\n inspectComponent: Backdrop,\n codeString: codeString,\n },\n} as Meta<BackdropStoryProps>;\n\nconst Template: StoryFn<BackdropStoryProps> = (args) => {\n return (\n <Container visible={args.visible}>\n <Backdrop>\n <div className=\"container\">{args.children}</div>\n </Backdrop>\n </Container>\n );\n};\n\nexport const BackdropExample = Template.bind({});\nBackdropExample.args = {\n visible: true,\n children: 'Dummy Overlay',\n};\n"],"names":["codeString","Backdrop_stories","Backdrop","Template","args","jsx","Container","BackdropExample"],"mappings":";;;AAWA,MAAMA,IAAa,mCAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,UAAU;AAAA,MACR,SAAS;AAAA,IACX;AAAA,IACA,SAAS;AAAA,MACP,SAAS;AAAA,MACT,MAAM;AAAA,IAAA;AAAA,EAEV;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAwC,CAACC,MAE1C,gBAAAC,EAAAC,GAAA,EAAU,SAASF,EAAK,SACvB,UAAC,gBAAAC,EAAAH,GAAA,EACC,UAAC,gBAAAG,EAAA,OAAA,EAAI,WAAU,aAAa,UAAKD,EAAA,SAAA,CAAS,EAC5C,CAAA,GACF,GAISG,IAAkBJ,EAAS,KAAK,CAAE,CAAA;AAC/CI,EAAgB,OAAO;AAAA,EACrB,SAAS;AAAA,EACT,UAAU;AACZ;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonGroup.stories.js","sources":["../../../src/components/ButtonGroup/ButtonGroup.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { PropsWithChildren } from 'react';\nimport type { ButtonGroupProps } from './ButtonGroup';\n\nimport { ButtonGroup } from './ButtonGroup';\n\nimport { Button } from 'components/Buttons/Button';\nimport { Container } from 'storyComponents/Container';\n\nconst codeString = `\n <ButtonGroup reversed={reversed} stacked={stacked}>\n <Button variant={variant} onClick={onClickedFunction}>{children}</Button>\n <Button variant={variant} onClick={onClickedFunction}>{children}</Button>\n </ButtonGroup>\n`;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Molecules/ButtonGroup',\n component: ButtonGroup,\n argTypes: {\n children: {\n table: {\n disable: true,\n },\n },\n },\n parameters: {\n inspectComponent: ButtonGroup,\n codeString: codeString,\n },\n} as Meta<PropsWithChildren<ButtonGroupProps>>;\n\nconst Template: StoryFn<PropsWithChildren<ButtonGroupProps>> = (args) => (\n <Container>\n <ButtonGroup {...args} />\n </Container>\n);\n\nconst defaultArgs: Partial<PropsWithChildren<ButtonGroupProps>> = {\n stacked: false,\n reversed: false,\n children: (\n <>\n <Button variant=\"primary\">Primary button</Button>\n <Button variant=\"secondary\">Secondary button</Button>\n </>\n ),\n};\n\nexport const ButtonGroupExample = Template.bind({});\nButtonGroupExample.args = {\n ...defaultArgs,\n};\n"],"names":["codeString","ButtonGroup_stories","ButtonGroup","Template","args","jsx","Container","defaultArgs","jsxs","Fragment","Button","ButtonGroupExample"],"mappings":";;;;AASA,MAAMA,IAAa;AAAA;AAAA;AAAA;AAAA;AAAA,GAQJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SAAS;AAAA,
|
|
1
|
+
{"version":3,"file":"ButtonGroup.stories.js","sources":["../../../src/components/ButtonGroup/ButtonGroup.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { PropsWithChildren } from 'react';\nimport type { ButtonGroupProps } from './ButtonGroup';\n\nimport { ButtonGroup } from './ButtonGroup';\n\nimport { Button } from 'components/Buttons/Button';\nimport { Container } from 'storyComponents/Container';\n\nconst codeString = `\n <ButtonGroup reversed={reversed} stacked={stacked}>\n <Button variant={variant} onClick={onClickedFunction}>{children}</Button>\n <Button variant={variant} onClick={onClickedFunction}>{children}</Button>\n </ButtonGroup>\n`;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Molecules/ButtonGroup',\n component: ButtonGroup,\n argTypes: {\n children: {\n table: {\n disable: true,\n },\n },\n },\n parameters: {\n inspectComponent: ButtonGroup,\n codeString: codeString,\n },\n} as Meta<PropsWithChildren<ButtonGroupProps>>;\n\nconst Template: StoryFn<PropsWithChildren<ButtonGroupProps>> = (args) => (\n <Container>\n <ButtonGroup {...args} />\n </Container>\n);\n\nconst defaultArgs: Partial<PropsWithChildren<ButtonGroupProps>> = {\n stacked: false,\n reversed: false,\n children: (\n <>\n <Button variant=\"primary\">Primary button</Button>\n <Button variant=\"secondary\">Secondary button</Button>\n </>\n ),\n};\n\nexport const ButtonGroupExample = Template.bind({});\nButtonGroupExample.args = {\n ...defaultArgs,\n};\n"],"names":["codeString","ButtonGroup_stories","ButtonGroup","Template","args","jsx","Container","defaultArgs","jsxs","Fragment","Button","ButtonGroupExample"],"mappings":";;;;AASA,MAAMA,IAAa;AAAA;AAAA;AAAA;AAAA;AAAA,GAQJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EAEJ;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAyD,CAACC,MAC9D,gBAAAC,EAACC,KACC,UAAC,gBAAAD,EAAAH,GAAA,EAAa,GAAGE,EAAA,CAAM,EACzB,CAAA,GAGIG,IAA4D;AAAA,EAChE,SAAS;AAAA,EACT,UAAU;AAAA,EACV,UAEI,gBAAAC,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAC,gBAAAJ,EAAAK,GAAA,EAAO,SAAQ,WAAU,UAAc,kBAAA;AAAA,IACvC,gBAAAL,EAAAK,GAAA,EAAO,SAAQ,aAAY,UAAgB,mBAAA,CAAA;AAAA,EAAA,EAC9C,CAAA;AAEJ,GAEaC,IAAqBR,EAAS,KAAK,CAAE,CAAA;AAClDQ,EAAmB,OAAO;AAAA,EACxB,GAAGJ;AACL;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sources":["../../../src/components/Buttons/Button.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport type { ButtonHTMLAttributes, ReactNode } from 'react';\nimport type { UIButtonVariant } from 'types/UserInterface';\n\nimport styles from './Button.module.css';\n\nexport interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'style'> {\n /** The variant of the button. */\n variant: UIButtonVariant;\n /** The element to show inside the button. */\n children: ReactNode;\n /** Renders the button as a flex column. */\n displayColumn?: boolean;\n}\n\n/** Represents a component for a button. */\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n ({ children, type = 'button', variant, displayColumn = false, ...restProps }: ButtonProps, forwardedRef) => {\n return (\n <button\n {...restProps}\n type={type}\n ref={forwardedRef}\n className={clsx(styles['button'], styles[`button--${variant}`], {\n [styles['button--wide-column']]: displayColumn,\n })}\n >\n {children}\n </button>\n );\n }\n);\n"],"names":["Button","forwardRef","children","type","variant","displayColumn","restProps","forwardedRef","jsx","clsx","styles"],"mappings":";;;;AAkBO,MAAMA,IAASC;AAAA,EACpB,CAAC,EAAE,UAAAC,GAAU,MAAAC,IAAO,UAAU,SAAAC,GAAS,eAAAC,IAAgB,IAAO,GAAGC,EAAU,GAAgBC,MAEvF,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGF;AAAA,MACJ,MAAAH;AAAA,MACA,KAAKI;AAAA,MACL,WAAWE,EAAKC,EAAO,QAAWA,EAAO,WAAWN,CAAO,EAAE,GAAG;AAAA,QAC9D,CAACM,EAAO,qBAAqB,CAAC,GAAGL;AAAA,MAAA,CAClC;AAAA,MAEA,UAAAH;AAAA,IAAA;AAAA,
|
|
1
|
+
{"version":3,"file":"Button.js","sources":["../../../src/components/Buttons/Button.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport type { ButtonHTMLAttributes, ReactNode } from 'react';\nimport type { UIButtonVariant } from 'types/UserInterface';\n\nimport styles from './Button.module.css';\n\nexport interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'style'> {\n /** The variant of the button. */\n variant: UIButtonVariant;\n /** The element to show inside the button. */\n children: ReactNode;\n /** Renders the button as a flex column. */\n displayColumn?: boolean;\n}\n\n/** Represents a component for a button. */\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n ({ children, type = 'button', variant, displayColumn = false, ...restProps }: ButtonProps, forwardedRef) => {\n return (\n <button\n {...restProps}\n type={type}\n ref={forwardedRef}\n className={clsx(styles['button'], styles[`button--${variant}`], {\n [styles['button--wide-column']]: displayColumn,\n })}\n >\n {children}\n </button>\n );\n }\n);\n"],"names":["Button","forwardRef","children","type","variant","displayColumn","restProps","forwardedRef","jsx","clsx","styles"],"mappings":";;;;AAkBO,MAAMA,IAASC;AAAA,EACpB,CAAC,EAAE,UAAAC,GAAU,MAAAC,IAAO,UAAU,SAAAC,GAAS,eAAAC,IAAgB,IAAO,GAAGC,EAAU,GAAgBC,MAEvF,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGF;AAAA,MACJ,MAAAH;AAAA,MACA,KAAKI;AAAA,MACL,WAAWE,EAAKC,EAAO,QAAWA,EAAO,WAAWN,CAAO,EAAE,GAAG;AAAA,QAC9D,CAACM,EAAO,qBAAqB,CAAC,GAAGL;AAAA,MAAA,CAClC;AAAA,MAEA,UAAAH;AAAA,IAAA;AAAA,EACH;AAGN;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsxs as a, Fragment as s, jsx as t } from "react/jsx-runtime";
|
|
2
|
-
import { fn as l } from "../../index-
|
|
2
|
+
import { fn as l } from "../../index-DWzkl4aY.js";
|
|
3
3
|
import { Button as n } from "./Button.js";
|
|
4
4
|
const c = "<Button variant={variant} onClick={onClictFunction}>{children}</Button>", h = {
|
|
5
5
|
title: "Atoms/Buttons/Button",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.stories.js","sources":["../../../src/components/Buttons/Button.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { ButtonProps } from './Button';\n\nimport { Button } from './Button';\n\nconst codeString = '<Button variant={variant} onClick={onClictFunction}>{children}</Button>';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/Buttons/Button',\n component: Button,\n argTypes: {\n variant: {\n options: ['primary', 'secondary', 'destructive-primary', 'destructive-secondary', 'blank'],\n control: { type: 'radio' },\n },\n },\n parameters: {\n inspectComponent: Button,\n codeString: codeString,\n },\n} as Meta<ButtonProps>;\n\nconst Template: StoryFn<ButtonProps> = (args) => <Button {...args} />;\n\nconst defaultArgs: Partial<ButtonProps> = {\n variant: 'primary',\n disabled: false,\n displayColumn: false,\n onClick: fn(),\n};\n\nexport const ButtonExample = Template.bind({});\nButtonExample.args = {\n children: 'Click me!',\n ...defaultArgs,\n};\n\nexport const WithMultipleChildren = Template.bind({});\nWithMultipleChildren.args = {\n ...defaultArgs,\n children: (\n <>\n <div>Child 1</div>\n <div>Child 2</div>\n </>\n ),\n};\nWithMultipleChildren.argTypes = {\n ...WithMultipleChildren.argTypes,\n children: {\n table: {\n disable: true, // Disable children controls for this specific story\n },\n },\n};\n"],"names":["codeString","Button_stories","Button","Template","args","jsx","defaultArgs","fn","ButtonExample","WithMultipleChildren","jsxs","Fragment"],"mappings":";;;AAOA,MAAMA,IAAa,2EAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS,CAAC,WAAW,aAAa,uBAAuB,yBAAyB,OAAO;AAAA,MACzF,SAAS,EAAE,MAAM,QAAQ;AAAA,
|
|
1
|
+
{"version":3,"file":"Button.stories.js","sources":["../../../src/components/Buttons/Button.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { ButtonProps } from './Button';\n\nimport { Button } from './Button';\n\nconst codeString = '<Button variant={variant} onClick={onClictFunction}>{children}</Button>';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/Buttons/Button',\n component: Button,\n argTypes: {\n variant: {\n options: ['primary', 'secondary', 'destructive-primary', 'destructive-secondary', 'blank'],\n control: { type: 'radio' },\n },\n },\n parameters: {\n inspectComponent: Button,\n codeString: codeString,\n },\n} as Meta<ButtonProps>;\n\nconst Template: StoryFn<ButtonProps> = (args) => <Button {...args} />;\n\nconst defaultArgs: Partial<ButtonProps> = {\n variant: 'primary',\n disabled: false,\n displayColumn: false,\n onClick: fn(),\n};\n\nexport const ButtonExample = Template.bind({});\nButtonExample.args = {\n children: 'Click me!',\n ...defaultArgs,\n};\n\nexport const WithMultipleChildren = Template.bind({});\nWithMultipleChildren.args = {\n ...defaultArgs,\n children: (\n <>\n <div>Child 1</div>\n <div>Child 2</div>\n </>\n ),\n};\nWithMultipleChildren.argTypes = {\n ...WithMultipleChildren.argTypes,\n children: {\n table: {\n disable: true, // Disable children controls for this specific story\n },\n },\n};\n"],"names":["codeString","Button_stories","Button","Template","args","jsx","defaultArgs","fn","ButtonExample","WithMultipleChildren","jsxs","Fragment"],"mappings":";;;AAOA,MAAMA,IAAa,2EAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS,CAAC,WAAW,aAAa,uBAAuB,yBAAyB,OAAO;AAAA,MACzF,SAAS,EAAE,MAAM,QAAQ;AAAA,IAAA;AAAA,EAE7B;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAiC,CAACC,MAAU,gBAAAC,EAAAH,GAAA,EAAQ,GAAGE,GAAM,GAE7DE,IAAoC;AAAA,EACxC,SAAS;AAAA,EACT,UAAU;AAAA,EACV,eAAe;AAAA,EACf,SAASC,EAAG;AACd,GAEaC,IAAgBL,EAAS,KAAK,CAAE,CAAA;AAC7CK,EAAc,OAAO;AAAA,EACnB,UAAU;AAAA,EACV,GAAGF;AACL;AAEO,MAAMG,IAAuBN,EAAS,KAAK,CAAE,CAAA;AACpDM,EAAqB,OAAO;AAAA,EAC1B,GAAGH;AAAA,EACH,UAEI,gBAAAI,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAA,gBAAAN,EAAC,SAAI,UAAO,UAAA,CAAA;AAAA,IACZ,gBAAAA,EAAC,SAAI,UAAO,UAAA,CAAA;AAAA,EAAA,EACd,CAAA;AAEJ;AACAI,EAAqB,WAAW;AAAA,EAC9B,GAAGA,EAAqB;AAAA,EACxB,UAAU;AAAA,IACR,OAAO;AAAA,MACL,SAAS;AAAA;AAAA,IAAA;AAAA,EACX;AAEJ;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as s } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef as f } from "react";
|
|
3
|
-
import {
|
|
3
|
+
import { L as i } from "../../chunk-7R3XDUXW-C-tvzxWq.js";
|
|
4
4
|
import { c as n } from "../../clsx-OuTLNxxd.js";
|
|
5
5
|
import { s as o } from "../../Button.module-FL3-CODh.js";
|
|
6
6
|
const l = f(
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LinkButton.js","sources":["../../../src/components/Buttons/LinkButton.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { Link } from 'react-router
|
|
1
|
+
{"version":3,"file":"LinkButton.js","sources":["../../../src/components/Buttons/LinkButton.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { Link } from 'react-router';\nimport classNames from 'clsx';\n\nimport type { LinkProps } from 'react-router';\nimport type { UIButtonVariant } from 'types/UserInterface';\n\nimport styles from './Button.module.css';\n\nexport interface LinkButtonProps extends Omit<LinkProps, 'className' | 'style'> {\n /** The variant of the button. */\n variant: UIButtonVariant;\n}\n\n/** Represents a button that is used as a Link within react-router-dom.\n *\n * Only works when rendered inside a 'react-router-dom' BrowserRouter\n */\nexport const LinkButton = forwardRef<HTMLAnchorElement, LinkButtonProps>(\n ({ variant, ...restProps }: LinkButtonProps, forwardedRef) => {\n return (\n <Link {...restProps} className={classNames(styles['button'], styles[`button--${variant}`])} ref={forwardedRef} />\n );\n }\n);\n"],"names":["LinkButton","forwardRef","variant","restProps","forwardedRef","Link","classNames","styles"],"mappings":";;;;;AAkBO,MAAMA,IAAaC;AAAA,EACxB,CAAC,EAAE,SAAAC,GAAS,GAAGC,EAAA,GAA8BC,wBAExCC,GAAM,EAAA,GAAGF,GAAW,WAAWG,EAAWC,EAAO,QAAWA,EAAO,WAAWL,CAAO,EAAE,CAAC,GAAG,KAAKE,GAAc;AAGrH;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { jsxs as a, Fragment as
|
|
2
|
-
import { fn as
|
|
3
|
-
import {
|
|
1
|
+
import { jsxs as a, Fragment as s, jsx as t } from "react/jsx-runtime";
|
|
2
|
+
import { fn as l } from "../../index-DWzkl4aY.js";
|
|
3
|
+
import { B as c } from "../../chunk-7R3XDUXW-C-tvzxWq.js";
|
|
4
4
|
import { LinkButton as n } from "./LinkButton.js";
|
|
5
5
|
const d = `
|
|
6
6
|
// Has all HTMLAnchorElement props available except "className" and "style"
|
|
@@ -28,7 +28,7 @@ const d = `
|
|
|
28
28
|
}
|
|
29
29
|
}, r = (o) => /* @__PURE__ */ t(c, { children: /* @__PURE__ */ t(n, { ...o }) }), i = {
|
|
30
30
|
variant: "primary",
|
|
31
|
-
onClick:
|
|
31
|
+
onClick: l()
|
|
32
32
|
}, p = r.bind({});
|
|
33
33
|
p.args = {
|
|
34
34
|
children: "Click me!",
|
|
@@ -37,7 +37,7 @@ p.args = {
|
|
|
37
37
|
const e = r.bind({});
|
|
38
38
|
e.args = {
|
|
39
39
|
...i,
|
|
40
|
-
children: /* @__PURE__ */ a(
|
|
40
|
+
children: /* @__PURE__ */ a(s, { children: [
|
|
41
41
|
/* @__PURE__ */ t("div", { children: "Child 1" }),
|
|
42
42
|
/* @__PURE__ */ t("div", { children: "Child 2" })
|
|
43
43
|
] })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LinkButton.stories.js","sources":["../../../src/components/Buttons/LinkButton.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\nimport { BrowserRouter } from 'react-router
|
|
1
|
+
{"version":3,"file":"LinkButton.stories.js","sources":["../../../src/components/Buttons/LinkButton.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\nimport { BrowserRouter } from 'react-router';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { LinkButtonProps } from './LinkButton';\n\nimport { LinkButton } from './LinkButton';\n\nconst codeString = `\n// Has all HTMLAnchorElement props available except \"className\" and \"style\" \n <LinkButton variant={variant} to={to} replace={replace} buttonRef={buttonRef}>{children}</LinkButton>\n`;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/Buttons/LinkButton',\n component: LinkButton,\n argTypes: {\n variant: {\n options: [\n 'primary',\n 'secondary',\n 'destructive-primary',\n 'destructive-secondary',\n 'blank',\n 'blank-subtle',\n 'blank-icon',\n ],\n control: { type: 'radio' },\n },\n },\n parameters: {\n inspectComponent: LinkButton,\n codeString: codeString,\n },\n} as Meta<LinkButtonProps>;\n\nconst Template: StoryFn<LinkButtonProps> = (args) => (\n <BrowserRouter>\n <LinkButton {...args} />\n </BrowserRouter>\n);\n\nconst defaultArgs: Partial<LinkButtonProps> = {\n variant: 'primary',\n onClick: fn(),\n};\n\nexport const LinkButtonExample = Template.bind({});\nLinkButtonExample.args = {\n children: 'Click me!',\n ...defaultArgs,\n};\n\nexport const WithMultipleChildren = Template.bind({});\nWithMultipleChildren.args = {\n ...defaultArgs,\n children: (\n <>\n <div>Child 1</div>\n <div>Child 2</div>\n </>\n ),\n};\n\nWithMultipleChildren.argTypes = {\n ...WithMultipleChildren.argTypes,\n children: {\n table: {\n disable: true, // Disable children controls for this specific story\n },\n },\n};\n"],"names":["codeString","LinkButton_stories","LinkButton","Template","args","jsx","BrowserRouter","defaultArgs","fn","LinkButtonExample","WithMultipleChildren","jsxs","Fragment"],"mappings":";;;;AAQA,MAAMA,IAAa;AAAA;AAAA;AAAA,GAMJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,QACP;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACA,SAAS,EAAE,MAAM,QAAQ;AAAA,IAAA;AAAA,EAE7B;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAqC,CAACC,MAC1C,gBAAAC,EAACC,KACC,UAAC,gBAAAD,EAAAH,GAAA,EAAY,GAAGE,EAAA,CAAM,EACxB,CAAA,GAGIG,IAAwC;AAAA,EAC5C,SAAS;AAAA,EACT,SAASC,EAAG;AACd,GAEaC,IAAoBN,EAAS,KAAK,CAAE,CAAA;AACjDM,EAAkB,OAAO;AAAA,EACvB,UAAU;AAAA,EACV,GAAGF;AACL;AAEO,MAAMG,IAAuBP,EAAS,KAAK,CAAE,CAAA;AACpDO,EAAqB,OAAO;AAAA,EAC1B,GAAGH;AAAA,EACH,UAEI,gBAAAI,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAA,gBAAAP,EAAC,SAAI,UAAO,UAAA,CAAA;AAAA,IACZ,gBAAAA,EAAC,SAAI,UAAO,UAAA,CAAA;AAAA,EAAA,EACd,CAAA;AAEJ;AAEAK,EAAqB,WAAW;AAAA,EAC9B,GAAGA,EAAqB;AAAA,EACxB,UAAU;AAAA,IACR,OAAO;AAAA,MACL,SAAS;AAAA;AAAA,IAAA;AAAA,EACX;AAEJ;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuButton.js","sources":["../../../src/components/Buttons/MenuButton.tsx"],"sourcesContent":["import { useButton } from '@react-aria/button';\nimport { clsx } from 'clsx';\n\nimport type { AriaButtonProps } from '@react-aria/button';\nimport type { IconProps } from 'components/Icon';\nimport type { MouseEvent, RefObject } from 'react';\nimport type { UIButtonVariant } from 'types/UserInterface';\n\nimport { Icon } from 'components/Icon';\nimport styles from 'components/Buttons/Button.module.css';\n\nexport interface MenuButtonProps extends AriaButtonProps<'button'> {\n buttonRef: RefObject<HTMLButtonElement>;\n /** The variant of the button. */\n variant: UIButtonVariant;\n /** The icon to show. */\n iconName?: IconProps['name'];\n /** The callback function that is invoked when the button is clicked. */\n onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n}\n\n/** Represents a button that is used to open a menu. */\nexport function MenuButton({ buttonRef, variant, iconName, children, ...restProps }: MenuButtonProps) {\n const { buttonProps } = useButton(restProps, buttonRef);\n\n return (\n <button {...buttonProps} ref={buttonRef} className={clsx(styles['button'], styles[`button--${variant}`])}>\n {children}\n {iconName && <Icon name={iconName} />}\n </button>\n );\n}\n"],"names":["MenuButton","buttonRef","variant","iconName","children","restProps","buttonProps","useButton","clsx","styles","jsx","Icon"],"mappings":";;;;;AAsBgB,SAAAA,EAAW,EAAE,WAAAC,GAAW,SAAAC,GAAS,UAAAC,GAAU,UAAAC,GAAU,GAAGC,KAA8B;AACpG,QAAM,EAAE,aAAAC,EAAgB,IAAAC,EAAUF,GAAWJ,CAAS;AAEtD,2BACG,UAAQ,EAAA,GAAGK,GAAa,KAAKL,GAAW,WAAWO,EAAKC,EAAO,QAAWA,EAAO,WAAWP,CAAO,EAAE,CAAC,GACpG,UAAA;AAAA,IAAAE;AAAA,IACAD,KAAY,gBAAAO,EAACC,GAAK,EAAA,MAAMR,EAAU,CAAA;AAAA,
|
|
1
|
+
{"version":3,"file":"MenuButton.js","sources":["../../../src/components/Buttons/MenuButton.tsx"],"sourcesContent":["import { useButton } from '@react-aria/button';\nimport { clsx } from 'clsx';\n\nimport type { AriaButtonProps } from '@react-aria/button';\nimport type { IconProps } from 'components/Icon';\nimport type { MouseEvent, RefObject } from 'react';\nimport type { UIButtonVariant } from 'types/UserInterface';\n\nimport { Icon } from 'components/Icon';\nimport styles from 'components/Buttons/Button.module.css';\n\nexport interface MenuButtonProps extends AriaButtonProps<'button'> {\n buttonRef: RefObject<HTMLButtonElement>;\n /** The variant of the button. */\n variant: UIButtonVariant;\n /** The icon to show. */\n iconName?: IconProps['name'];\n /** The callback function that is invoked when the button is clicked. */\n onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n}\n\n/** Represents a button that is used to open a menu. */\nexport function MenuButton({ buttonRef, variant, iconName, children, ...restProps }: MenuButtonProps) {\n const { buttonProps } = useButton(restProps, buttonRef);\n\n return (\n <button {...buttonProps} ref={buttonRef} className={clsx(styles['button'], styles[`button--${variant}`])}>\n {children}\n {iconName && <Icon name={iconName} />}\n </button>\n );\n}\n"],"names":["MenuButton","buttonRef","variant","iconName","children","restProps","buttonProps","useButton","clsx","styles","jsx","Icon"],"mappings":";;;;;AAsBgB,SAAAA,EAAW,EAAE,WAAAC,GAAW,SAAAC,GAAS,UAAAC,GAAU,UAAAC,GAAU,GAAGC,KAA8B;AACpG,QAAM,EAAE,aAAAC,EAAgB,IAAAC,EAAUF,GAAWJ,CAAS;AAEtD,2BACG,UAAQ,EAAA,GAAGK,GAAa,KAAKL,GAAW,WAAWO,EAAKC,EAAO,QAAWA,EAAO,WAAWP,CAAO,EAAE,CAAC,GACpG,UAAA;AAAA,IAAAE;AAAA,IACAD,KAAY,gBAAAO,EAACC,GAAK,EAAA,MAAMR,EAAU,CAAA;AAAA,EAAA,GACrC;AAEJ;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsxs as s, Fragment as l, jsx as n } from "react/jsx-runtime";
|
|
2
|
-
import { fn as c } from "../../index-
|
|
2
|
+
import { fn as c } from "../../index-DWzkl4aY.js";
|
|
3
3
|
import { MenuButton as t } from "./MenuButton.js";
|
|
4
4
|
const d = `
|
|
5
5
|
// Has all LabelHTMLAttributes props available except "className" and "style"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuButton.stories.js","sources":["../../../src/components/Buttons/MenuButton.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { MenuButtonProps } from './MenuButton';\n\nimport { MenuButton } from './MenuButton';\n\nconst codeString = `\n// Has all LabelHTMLAttributes props available except \"className\" and \"style\" \n <MenuButton variant={variant} onClick={onClickFunction} onKeyDown={onKeyDown} onKeyUp={onKeyUp} buttonRef={buttonRef}>{children}</MenuButton>\n`;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/Buttons/MenuButton',\n component: MenuButton,\n argTypes: {\n variant: {\n options: ['primary', 'secondary', 'destructive-primary', 'destructive-secondary', 'blank', 'blank-icon'],\n control: { type: 'radio' },\n },\n },\n parameters: {\n inspectComponent: MenuButton,\n codeString: codeString,\n },\n} as Meta<MenuButtonProps>;\n\nconst Template: StoryFn<MenuButtonProps> = (args) => <MenuButton {...args} />;\n\nconst defaultArgs: Partial<MenuButtonProps> = {\n variant: 'primary',\n onClick: fn(),\n};\n\nexport const MenuButtonExample = Template.bind({});\nMenuButtonExample.args = {\n children: 'Click me!',\n ...defaultArgs,\n};\n\nexport const WithIconChildren = Template.bind({});\nWithIconChildren.args = {\n ...defaultArgs,\n iconName: 'EllipsisVertical',\n};\n\nWithIconChildren.argTypes = {\n ...WithIconChildren.argTypes,\n children: {\n table: {\n disable: true, // Disable children controls for this specific story\n },\n },\n};\n\nexport const WithMultipleChildren = Template.bind({});\nWithMultipleChildren.args = {\n ...defaultArgs,\n children: (\n <>\n <div>Child 1</div>\n <div>Child 2</div>\n </>\n ),\n};\n\nWithMultipleChildren.argTypes = {\n ...WithMultipleChildren.argTypes,\n children: {\n table: {\n disable: true, // Disable children controls for this specific story\n },\n },\n};\n"],"names":["codeString","MenuButton_stories","MenuButton","Template","args","jsx","defaultArgs","fn","MenuButtonExample","WithIconChildren","WithMultipleChildren","jsxs","Fragment"],"mappings":";;;AAOA,MAAMA,IAAa;AAAA;AAAA;AAAA,GAMJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS,CAAC,WAAW,aAAa,uBAAuB,yBAAyB,SAAS,YAAY;AAAA,MACvG,SAAS,EAAE,MAAM,QAAQ;AAAA,
|
|
1
|
+
{"version":3,"file":"MenuButton.stories.js","sources":["../../../src/components/Buttons/MenuButton.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { MenuButtonProps } from './MenuButton';\n\nimport { MenuButton } from './MenuButton';\n\nconst codeString = `\n// Has all LabelHTMLAttributes props available except \"className\" and \"style\" \n <MenuButton variant={variant} onClick={onClickFunction} onKeyDown={onKeyDown} onKeyUp={onKeyUp} buttonRef={buttonRef}>{children}</MenuButton>\n`;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/Buttons/MenuButton',\n component: MenuButton,\n argTypes: {\n variant: {\n options: ['primary', 'secondary', 'destructive-primary', 'destructive-secondary', 'blank', 'blank-icon'],\n control: { type: 'radio' },\n },\n },\n parameters: {\n inspectComponent: MenuButton,\n codeString: codeString,\n },\n} as Meta<MenuButtonProps>;\n\nconst Template: StoryFn<MenuButtonProps> = (args) => <MenuButton {...args} />;\n\nconst defaultArgs: Partial<MenuButtonProps> = {\n variant: 'primary',\n onClick: fn(),\n};\n\nexport const MenuButtonExample = Template.bind({});\nMenuButtonExample.args = {\n children: 'Click me!',\n ...defaultArgs,\n};\n\nexport const WithIconChildren = Template.bind({});\nWithIconChildren.args = {\n ...defaultArgs,\n iconName: 'EllipsisVertical',\n};\n\nWithIconChildren.argTypes = {\n ...WithIconChildren.argTypes,\n children: {\n table: {\n disable: true, // Disable children controls for this specific story\n },\n },\n};\n\nexport const WithMultipleChildren = Template.bind({});\nWithMultipleChildren.args = {\n ...defaultArgs,\n children: (\n <>\n <div>Child 1</div>\n <div>Child 2</div>\n </>\n ),\n};\n\nWithMultipleChildren.argTypes = {\n ...WithMultipleChildren.argTypes,\n children: {\n table: {\n disable: true, // Disable children controls for this specific story\n },\n },\n};\n"],"names":["codeString","MenuButton_stories","MenuButton","Template","args","jsx","defaultArgs","fn","MenuButtonExample","WithIconChildren","WithMultipleChildren","jsxs","Fragment"],"mappings":";;;AAOA,MAAMA,IAAa;AAAA;AAAA;AAAA,GAMJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS,CAAC,WAAW,aAAa,uBAAuB,yBAAyB,SAAS,YAAY;AAAA,MACvG,SAAS,EAAE,MAAM,QAAQ;AAAA,IAAA;AAAA,EAE7B;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAqC,CAACC,MAAU,gBAAAC,EAAAH,GAAA,EAAY,GAAGE,GAAM,GAErEE,IAAwC;AAAA,EAC5C,SAAS;AAAA,EACT,SAASC,EAAG;AACd,GAEaC,IAAoBL,EAAS,KAAK,CAAE,CAAA;AACjDK,EAAkB,OAAO;AAAA,EACvB,UAAU;AAAA,EACV,GAAGF;AACL;AAEO,MAAMG,IAAmBN,EAAS,KAAK,CAAE,CAAA;AAChDM,EAAiB,OAAO;AAAA,EACtB,GAAGH;AAAA,EACH,UAAU;AACZ;AAEAG,EAAiB,WAAW;AAAA,EAC1B,GAAGA,EAAiB;AAAA,EACpB,UAAU;AAAA,IACR,OAAO;AAAA,MACL,SAAS;AAAA;AAAA,IAAA;AAAA,EACX;AAEJ;AAEO,MAAMC,IAAuBP,EAAS,KAAK,CAAE,CAAA;AACpDO,EAAqB,OAAO;AAAA,EAC1B,GAAGJ;AAAA,EACH,UAEI,gBAAAK,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAA,gBAAAP,EAAC,SAAI,UAAO,UAAA,CAAA;AAAA,IACZ,gBAAAA,EAAC,SAAI,UAAO,UAAA,CAAA;AAAA,EAAA,EACd,CAAA;AAEJ;AAEAK,EAAqB,WAAW;AAAA,EAC9B,GAAGA,EAAqB;AAAA,EACxB,UAAU;AAAA,IACR,OAAO;AAAA,MACL,SAAS;AAAA;AAAA,IAAA;AAAA,EACX;AAEJ;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.stories.js","sources":["../../../src/components/Card/Card.stories.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { CardProps } from './Card';\n\nimport { Card } from './Card';\n\nconst codeString = '<Card header={header}>{children}</Card>';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/Card',\n component: Card,\n argTypes: {\n highContrast: {\n control: 'boolean',\n },\n padding: {\n control: {\n type: 'select',\n options: ['small', 'regular', 'large'],\n },\n },\n alignCenter: {\n control: 'boolean',\n },\n children: {\n control: 'text',\n },\n },\n parameters: {\n inspectComponent: Card,\n codeString: codeString,\n },\n} as Meta<PropsWithChildren<CardProps>>;\n\nconst Template: StoryFn<PropsWithChildren<CardProps>> = (args) => <Card {...args} />;\n\nconst defaultArgs: Partial<PropsWithChildren<CardProps>> = {\n padding: 'regular',\n highContrast: false,\n alignCenter: false,\n header: 'Example Header',\n};\n\nexport const CardExample = Template.bind({});\nCardExample.args = {\n ...defaultArgs,\n notification: '',\n};\n\nexport const WithNotification = Template.bind({});\nWithNotification.args = {\n ...defaultArgs,\n notification: 'This is an example notification',\n};\n\nexport const WithChildren = Template.bind({});\nWithChildren.args = {\n ...defaultArgs,\n children:\n \"Chuck Norris is the reason why Waldo is hiding Remember the Soviet Union? They decided to quit after watching a DeltaForce marathon on Satellite TV, Chuck Norris CAN eat soup with a fork Morgan Freeman is the only person that could narrate Chuck Norris's life, other than himself, The quickest way to a man's heart is with Chuck Norris' fist. Chuck Norris ran in Nascar and came in 1st place. Then again, Chuck Norris wins everything.\",\n};\n"],"names":["codeString","Card_stories","Card","Template","args","jsx","defaultArgs","CardExample","WithNotification","WithChildren"],"mappings":";;AAMA,MAAMA,IAAa,2CAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,cAAc;AAAA,MACZ,SAAS;AAAA,IACX;AAAA,IACA,SAAS;AAAA,MACP,SAAS;AAAA,QACP,MAAM;AAAA,QACN,SAAS,CAAC,SAAS,WAAW,OAAO;AAAA,
|
|
1
|
+
{"version":3,"file":"Card.stories.js","sources":["../../../src/components/Card/Card.stories.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { CardProps } from './Card';\n\nimport { Card } from './Card';\n\nconst codeString = '<Card header={header}>{children}</Card>';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/Card',\n component: Card,\n argTypes: {\n highContrast: {\n control: 'boolean',\n },\n padding: {\n control: {\n type: 'select',\n options: ['small', 'regular', 'large'],\n },\n },\n alignCenter: {\n control: 'boolean',\n },\n children: {\n control: 'text',\n },\n },\n parameters: {\n inspectComponent: Card,\n codeString: codeString,\n },\n} as Meta<PropsWithChildren<CardProps>>;\n\nconst Template: StoryFn<PropsWithChildren<CardProps>> = (args) => <Card {...args} />;\n\nconst defaultArgs: Partial<PropsWithChildren<CardProps>> = {\n padding: 'regular',\n highContrast: false,\n alignCenter: false,\n header: 'Example Header',\n};\n\nexport const CardExample = Template.bind({});\nCardExample.args = {\n ...defaultArgs,\n notification: '',\n};\n\nexport const WithNotification = Template.bind({});\nWithNotification.args = {\n ...defaultArgs,\n notification: 'This is an example notification',\n};\n\nexport const WithChildren = Template.bind({});\nWithChildren.args = {\n ...defaultArgs,\n children:\n \"Chuck Norris is the reason why Waldo is hiding Remember the Soviet Union? They decided to quit after watching a DeltaForce marathon on Satellite TV, Chuck Norris CAN eat soup with a fork Morgan Freeman is the only person that could narrate Chuck Norris's life, other than himself, The quickest way to a man's heart is with Chuck Norris' fist. Chuck Norris ran in Nascar and came in 1st place. Then again, Chuck Norris wins everything.\",\n};\n"],"names":["codeString","Card_stories","Card","Template","args","jsx","defaultArgs","CardExample","WithNotification","WithChildren"],"mappings":";;AAMA,MAAMA,IAAa,2CAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,cAAc;AAAA,MACZ,SAAS;AAAA,IACX;AAAA,IACA,SAAS;AAAA,MACP,SAAS;AAAA,QACP,MAAM;AAAA,QACN,SAAS,CAAC,SAAS,WAAW,OAAO;AAAA,MAAA;AAAA,IAEzC;AAAA,IACA,aAAa;AAAA,MACX,SAAS;AAAA,IACX;AAAA,IACA,UAAU;AAAA,MACR,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAkD,CAACC,MAAU,gBAAAC,EAAAH,GAAA,EAAM,GAAGE,GAAM,GAE5EE,IAAqD;AAAA,EACzD,SAAS;AAAA,EACT,cAAc;AAAA,EACd,aAAa;AAAA,EACb,QAAQ;AACV,GAEaC,IAAcJ,EAAS,KAAK,CAAE,CAAA;AAC3CI,EAAY,OAAO;AAAA,EACjB,GAAGD;AAAA,EACH,cAAc;AAChB;AAEO,MAAME,IAAmBL,EAAS,KAAK,CAAE,CAAA;AAChDK,EAAiB,OAAO;AAAA,EACtB,GAAGF;AAAA,EACH,cAAc;AAChB;AAEO,MAAMG,IAAeN,EAAS,KAAK,CAAE,CAAA;AAC5CM,EAAa,OAAO;AAAA,EAClB,GAAGH;AAAA,EACH,UACE;AACJ;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsxs as g, jsx as o } from "react/jsx-runtime";
|
|
2
|
-
import { fn as e } from "../../index-
|
|
2
|
+
import { fn as e } from "../../index-DWzkl4aY.js";
|
|
3
3
|
import { Checkbox as n } from "./Checkbox.js";
|
|
4
4
|
import { FormField as t } from "../FormField/FormField.js";
|
|
5
5
|
import { Label as i } from "../Label/Label.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.stories.js","sources":["../../../src/components/Checkbox/Checkbox.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { CheckboxProps } from './Checkbox';\n\nimport { Checkbox } from './Checkbox';\n\nimport { FormField } from 'components/FormField';\nimport { Label } from 'components/Label';\n\nconst codeString = '<Checkbox checked={} id={} onChange={} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/Checkbox',\n component: Checkbox,\n parameters: {\n inspectComponent: Checkbox,\n codeString: codeString,\n },\n} as Meta<CheckboxProps>;\n\nconst Template: StoryFn<CheckboxProps> = (args) => (\n <FormField inline>\n <Checkbox id=\"72103b4d\" {...args} />\n <Label htmlFor=\"72103b4d\">Example Checkbox</Label>\n </FormField>\n);\n\nexport const CheckboxExample = Template.bind({});\nCheckboxExample.args = {\n onChange: fn(),\n};\n\n// Extra story created for UX to see how we can solve placement of checkbox when paired with long content\n// TODO: should this component be refactored to always include a label? (see RadioButton)\nconst WithLongLabelTemplate: StoryFn<CheckboxProps> = (args) => (\n <FormField inline>\n <div\n style={{\n alignSelf: 'flex-start',\n marginTop: '0.18rem',\n }}\n >\n <Checkbox id=\"72103b4e\" {...args} />\n </div>\n <Label htmlFor=\"72103b4e\">\n Example Checkbox with long long long long long long long long long long long long long long long long long long\n long long long long long long long long long long long long long long long long long long long long long long long\n long long long long long long long long long long long long long long long long long long long long long long long\n long long long long long long long long long long long label\n </Label>\n </FormField>\n);\n\nexport const WithLongLabel = WithLongLabelTemplate.bind({});\nWithLongLabel.args = {\n onChange: fn(),\n};\n"],"names":["codeString","Checkbox_stories","Checkbox","Template","args","jsxs","FormField","jsx","Label","CheckboxExample","fn","WithLongLabelTemplate","WithLongLabel"],"mappings":";;;;;AAUA,MAAMA,IAAa,6CAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,
|
|
1
|
+
{"version":3,"file":"Checkbox.stories.js","sources":["../../../src/components/Checkbox/Checkbox.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { CheckboxProps } from './Checkbox';\n\nimport { Checkbox } from './Checkbox';\n\nimport { FormField } from 'components/FormField';\nimport { Label } from 'components/Label';\n\nconst codeString = '<Checkbox checked={} id={} onChange={} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/Checkbox',\n component: Checkbox,\n parameters: {\n inspectComponent: Checkbox,\n codeString: codeString,\n },\n} as Meta<CheckboxProps>;\n\nconst Template: StoryFn<CheckboxProps> = (args) => (\n <FormField inline>\n <Checkbox id=\"72103b4d\" {...args} />\n <Label htmlFor=\"72103b4d\">Example Checkbox</Label>\n </FormField>\n);\n\nexport const CheckboxExample = Template.bind({});\nCheckboxExample.args = {\n onChange: fn(),\n};\n\n// Extra story created for UX to see how we can solve placement of checkbox when paired with long content\n// TODO: should this component be refactored to always include a label? (see RadioButton)\nconst WithLongLabelTemplate: StoryFn<CheckboxProps> = (args) => (\n <FormField inline>\n <div\n style={{\n alignSelf: 'flex-start',\n marginTop: '0.18rem',\n }}\n >\n <Checkbox id=\"72103b4e\" {...args} />\n </div>\n <Label htmlFor=\"72103b4e\">\n Example Checkbox with long long long long long long long long long long long long long long long long long long\n long long long long long long long long long long long long long long long long long long long long long long long\n long long long long long long long long long long long long long long long long long long long long long long long\n long long long long long long long long long long long label\n </Label>\n </FormField>\n);\n\nexport const WithLongLabel = WithLongLabelTemplate.bind({});\nWithLongLabel.args = {\n onChange: fn(),\n};\n"],"names":["codeString","Checkbox_stories","Checkbox","Template","args","jsxs","FormField","jsx","Label","CheckboxExample","fn","WithLongLabelTemplate","WithLongLabel"],"mappings":";;;;;AAUA,MAAMA,IAAa,6CAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAmC,CAACC,MACvC,gBAAAC,EAAAC,GAAA,EAAU,QAAM,IACf,UAAA;AAAA,EAAA,gBAAAC,EAACL,GAAS,EAAA,IAAG,YAAY,GAAGE,EAAM,CAAA;AAAA,EACjC,gBAAAG,EAAAC,GAAA,EAAM,SAAQ,YAAW,UAAgB,mBAAA,CAAA;AAAA,GAC5C,GAGWC,IAAkBN,EAAS,KAAK,CAAE,CAAA;AAC/CM,EAAgB,OAAO;AAAA,EACrB,UAAUC,EAAG;AACf;AAIA,MAAMC,IAAgD,CAACP,MACpD,gBAAAC,EAAAC,GAAA,EAAU,QAAM,IACf,UAAA;AAAA,EAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,QACL,WAAW;AAAA,QACX,WAAW;AAAA,MACb;AAAA,MAEA,UAAC,gBAAAA,EAAAL,GAAA,EAAS,IAAG,YAAY,GAAGE,EAAM,CAAA;AAAA,IAAA;AAAA,EACpC;AAAA,EACC,gBAAAG,EAAAC,GAAA,EAAM,SAAQ,YAAW,UAK1B,qZAAA,CAAA;AAAA,GACF,GAGWI,IAAgBD,EAAsB,KAAK,CAAE,CAAA;AAC1DC,EAAc,OAAO;AAAA,EACnB,UAAUF,EAAG;AACf;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxButton.js","sources":["../../../src/components/CheckboxButton/CheckboxButton.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { useId, useState } from 'react';\n\nimport type { ChangeEvent } from 'react';\n\nimport styles from './CheckboxButton.module.css';\n\nexport interface CheckboxButtonProps {\n label: string;\n value: string;\n /** to set default status */\n isChecked?: boolean;\n /** The button variant. */\n variant?: 'single' | 'start' | 'middle' | 'end';\n /** `true` to disable the button; otherwise, `false`. The default is `false`. */\n disabled?: boolean;\n /** if set border becomes red */\n notValid?: boolean;\n /** The callback function that is invoked when the checkbox button changes value. */\n onSetValue: (value: string | null) => void;\n}\n\n/** Represents a component that acts as a checkbox, it's either set or unset. */\nexport const CheckboxButton = ({\n label,\n value,\n isChecked = false,\n variant = 'single',\n disabled,\n notValid,\n onSetValue,\n}: CheckboxButtonProps) => {\n const idPrefix = useId();\n const [checked, setChecked] = useState(isChecked);\n\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n setChecked(event.target.checked);\n onSetValue(event.target.checked ? event.target.value : null);\n };\n\n return (\n <span className={styles['checkbox-button__container']}>\n <input\n type=\"checkbox\"\n id={`${idPrefix}${label}`}\n disabled={disabled}\n value={value}\n checked={checked}\n onChange={handleChange}\n />\n <label\n htmlFor={`${idPrefix}${label}`}\n className={clsx(styles['checkbox-button'], styles[`checkbox-button--${variant}`], {\n [styles['checkbox-button--not-valid']]: notValid,\n })}\n >\n {label}\n </label>\n </span>\n );\n};\n"],"names":["CheckboxButton","label","value","isChecked","variant","disabled","notValid","onSetValue","idPrefix","useId","checked","setChecked","useState","handleChange","event","jsxs","styles","jsx","clsx"],"mappings":";;;;;;;;;;;GAuBaA,IAAiB,CAAC;AAAA,EAC7B,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,SAAAC,IAAU;AAAA,EACV,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AACF,MAA2B;AACzB,QAAMC,IAAWC,
|
|
1
|
+
{"version":3,"file":"CheckboxButton.js","sources":["../../../src/components/CheckboxButton/CheckboxButton.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { useId, useState } from 'react';\n\nimport type { ChangeEvent } from 'react';\n\nimport styles from './CheckboxButton.module.css';\n\nexport interface CheckboxButtonProps {\n label: string;\n value: string;\n /** to set default status */\n isChecked?: boolean;\n /** The button variant. */\n variant?: 'single' | 'start' | 'middle' | 'end';\n /** `true` to disable the button; otherwise, `false`. The default is `false`. */\n disabled?: boolean;\n /** if set border becomes red */\n notValid?: boolean;\n /** The callback function that is invoked when the checkbox button changes value. */\n onSetValue: (value: string | null) => void;\n}\n\n/** Represents a component that acts as a checkbox, it's either set or unset. */\nexport const CheckboxButton = ({\n label,\n value,\n isChecked = false,\n variant = 'single',\n disabled,\n notValid,\n onSetValue,\n}: CheckboxButtonProps) => {\n const idPrefix = useId();\n const [checked, setChecked] = useState(isChecked);\n\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n setChecked(event.target.checked);\n onSetValue(event.target.checked ? event.target.value : null);\n };\n\n return (\n <span className={styles['checkbox-button__container']}>\n <input\n type=\"checkbox\"\n id={`${idPrefix}${label}`}\n disabled={disabled}\n value={value}\n checked={checked}\n onChange={handleChange}\n />\n <label\n htmlFor={`${idPrefix}${label}`}\n className={clsx(styles['checkbox-button'], styles[`checkbox-button--${variant}`], {\n [styles['checkbox-button--not-valid']]: notValid,\n })}\n >\n {label}\n </label>\n </span>\n );\n};\n"],"names":["CheckboxButton","label","value","isChecked","variant","disabled","notValid","onSetValue","idPrefix","useId","checked","setChecked","useState","handleChange","event","jsxs","styles","jsx","clsx"],"mappings":";;;;;;;;;;;GAuBaA,IAAiB,CAAC;AAAA,EAC7B,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,SAAAC,IAAU;AAAA,EACV,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AACF,MAA2B;AACzB,QAAMC,IAAWC,EAAM,GACjB,CAACC,GAASC,CAAU,IAAIC,EAAST,CAAS,GAE1CU,IAAe,CAACC,MAAyC;AAClD,IAAAH,EAAAG,EAAM,OAAO,OAAO,GAC/BP,EAAWO,EAAM,OAAO,UAAUA,EAAM,OAAO,QAAQ,IAAI;AAAA,EAC7D;AAEA,SACG,gBAAAC,EAAA,QAAA,EAAK,WAAWC,EAAO,4BAA4B,GAClD,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,IAAI,GAAGT,CAAQ,GAAGP,CAAK;AAAA,QACvB,UAAAI;AAAA,QACA,OAAAH;AAAA,QACA,SAAAQ;AAAA,QACA,UAAUG;AAAA,MAAA;AAAA,IACZ;AAAA,IACA,gBAAAI;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAS,GAAGT,CAAQ,GAAGP,CAAK;AAAA,QAC5B,WAAWiB,EAAKF,EAAO,iBAAiB,GAAGA,EAAO,oBAAoBZ,CAAO,EAAE,GAAG;AAAA,UAChF,CAACY,EAAO,4BAA4B,CAAC,GAAGV;AAAA,QAAA,CACzC;AAAA,QAEA,UAAAL;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as e } from "react/jsx-runtime";
|
|
2
|
-
import { fn as n } from "../../index-
|
|
2
|
+
import { fn as n } from "../../index-DWzkl4aY.js";
|
|
3
3
|
import { CheckboxButton as o } from "./CheckboxButton.js";
|
|
4
4
|
const a = "<CheckboxButton label={} value={} isChecked={} variant={} disabled={} notValid={} onSetValue={} key={} />", b = {
|
|
5
5
|
title: "Atoms/CheckboxButton",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxButton.stories.js","sources":["../../../src/components/CheckboxButton/CheckboxButton.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { CheckboxButtonProps } from './CheckboxButton';\n\nimport { CheckboxButton } from './CheckboxButton';\n\nconst codeString =\n '<CheckboxButton label={} value={} isChecked={} variant={} disabled={} notValid={} onSetValue={} key={} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/CheckboxButton',\n component: CheckboxButton,\n argTypes: {\n label: {\n control: 'text',\n },\n value: {\n control: 'string',\n },\n isChecked: {\n control: 'boolean',\n },\n variant: {\n options: ['single', 'start', 'middle', 'end'],\n control: 'radio',\n },\n disabled: {\n control: 'boolean',\n },\n notValid: {\n control: 'boolean',\n },\n onSetValue: {\n table: {\n disable: true,\n },\n },\n },\n parameters: {\n inspectComponent: CheckboxButton,\n codeString: codeString,\n },\n} as Meta<CheckboxButtonProps>;\n\nconst Template: StoryFn<CheckboxButtonProps> = (args) => <CheckboxButton {...args} />;\n\nexport const CheckboxButtonExample = Template.bind({});\nCheckboxButtonExample.args = {\n label: '1.2',\n value: '1.2',\n variant: 'single',\n onSetValue: fn(),\n};\n"],"names":["codeString","CheckboxButton_stories","CheckboxButton","Template","args","jsx","CheckboxButtonExample","fn"],"mappings":";;;AAOA,MAAMA,IACJ,6GAGaC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,OAAO;AAAA,MACL,SAAS;AAAA,IACX;AAAA,IACA,OAAO;AAAA,MACL,SAAS;AAAA,IACX;AAAA,IACA,WAAW;AAAA,MACT,SAAS;AAAA,IACX;AAAA,IACA,SAAS;AAAA,MACP,SAAS,CAAC,UAAU,SAAS,UAAU,KAAK;AAAA,MAC5C,SAAS;AAAA,IACX;AAAA,IACA,UAAU;AAAA,MACR,SAAS;AAAA,IACX;AAAA,IACA,UAAU;AAAA,MACR,SAAS;AAAA,IACX;AAAA,IACA,YAAY;AAAA,MACV,OAAO;AAAA,QACL,SAAS;AAAA,
|
|
1
|
+
{"version":3,"file":"CheckboxButton.stories.js","sources":["../../../src/components/CheckboxButton/CheckboxButton.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { CheckboxButtonProps } from './CheckboxButton';\n\nimport { CheckboxButton } from './CheckboxButton';\n\nconst codeString =\n '<CheckboxButton label={} value={} isChecked={} variant={} disabled={} notValid={} onSetValue={} key={} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/CheckboxButton',\n component: CheckboxButton,\n argTypes: {\n label: {\n control: 'text',\n },\n value: {\n control: 'string',\n },\n isChecked: {\n control: 'boolean',\n },\n variant: {\n options: ['single', 'start', 'middle', 'end'],\n control: 'radio',\n },\n disabled: {\n control: 'boolean',\n },\n notValid: {\n control: 'boolean',\n },\n onSetValue: {\n table: {\n disable: true,\n },\n },\n },\n parameters: {\n inspectComponent: CheckboxButton,\n codeString: codeString,\n },\n} as Meta<CheckboxButtonProps>;\n\nconst Template: StoryFn<CheckboxButtonProps> = (args) => <CheckboxButton {...args} />;\n\nexport const CheckboxButtonExample = Template.bind({});\nCheckboxButtonExample.args = {\n label: '1.2',\n value: '1.2',\n variant: 'single',\n onSetValue: fn(),\n};\n"],"names":["codeString","CheckboxButton_stories","CheckboxButton","Template","args","jsx","CheckboxButtonExample","fn"],"mappings":";;;AAOA,MAAMA,IACJ,6GAGaC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,OAAO;AAAA,MACL,SAAS;AAAA,IACX;AAAA,IACA,OAAO;AAAA,MACL,SAAS;AAAA,IACX;AAAA,IACA,WAAW;AAAA,MACT,SAAS;AAAA,IACX;AAAA,IACA,SAAS;AAAA,MACP,SAAS,CAAC,UAAU,SAAS,UAAU,KAAK;AAAA,MAC5C,SAAS;AAAA,IACX;AAAA,IACA,UAAU;AAAA,MACR,SAAS;AAAA,IACX;AAAA,IACA,UAAU;AAAA,MACR,SAAS;AAAA,IACX;AAAA,IACA,YAAY;AAAA,MACV,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EAEJ;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAyC,CAACC,MAAU,gBAAAC,EAAAH,GAAA,EAAgB,GAAGE,GAAM,GAEtEE,IAAwBH,EAAS,KAAK,CAAE,CAAA;AACrDG,EAAsB,OAAO;AAAA,EAC3B,OAAO;AAAA,EACP,OAAO;AAAA,EACP,SAAS;AAAA,EACT,YAAYC,EAAG;AACjB;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxButtonBar.js","sources":["../../../src/components/CheckboxButtonBar/CheckboxButtonBar.tsx"],"sourcesContent":["import { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport type { CheckboxButtonProps } from 'components/CheckboxButton';\n\nimport styles from './CheckboxButtonBar.module.css';\n\nimport { CheckboxButton } from 'components/CheckboxButton';\nimport { Label } from 'components/Label';\nimport { Icon } from 'components/Icon';\n\ntype CheckboxProps = {\n label: string;\n value: string;\n disabled?: boolean;\n};\n\nexport interface CheckboxButtonBarProps {\n /** array with objects with label, value */\n checkboxes: CheckboxProps[];\n //** array with values */\n defaultValues?: string[];\n label?: string;\n /** 'top' | 'left' */\n labelPosition?: 'top' | 'left';\n required?: boolean;\n /** error text to display if set */\n notValidatedText?: string;\n /** disables all checkboxes in the bar */\n disableGroup?: boolean;\n onSetValues: (value: string[]) => void;\n}\n\n/** Represents a component that shows a collection of [CheckboxButton](/story/atoms-checkboxbutton--checkbox-button-example)s. */\nexport const CheckboxButtonBar = ({\n checkboxes,\n defaultValues,\n label,\n labelPosition = 'top',\n required = false,\n notValidatedText = '',\n disableGroup = false,\n onSetValues,\n}: CheckboxButtonBarProps) => {\n const values = useRef<string[]>(defaultValues ? defaultValues.map(String) : []);\n\n const handleChange = (setValue: string | null, value: string) => {\n if (setValue === null) {\n values.current = values.current.filter((val) => val !== value);\n } else {\n values.current = [...values.current, value];\n }\n onSetValues(values.current);\n };\n\n const getVariant = (index: number, totalItems: number): CheckboxButtonProps['variant'] => {\n if (index === 0 && totalItems !== 1) {\n return 'start';\n } else if (index < totalItems - 1) {\n return 'middle';\n } else if (totalItems === 1) {\n return 'single';\n } else {\n return 'end';\n }\n };\n\n return (\n <div\n className={clsx(\n styles['checkbox-button-bar__container'],\n styles[`checkbox-button-bar__container--label-${labelPosition}`]\n )}\n >\n {label && (\n <Label htmlFor=\"\" required={required}>\n {label}\n </Label>\n )}\n <div className={styles['checkbox-button-bar__row-container']}>\n <div className={styles['checkbox-button-bar__row']}>\n {checkboxes.map(({ label, value, disabled }, index) => (\n <CheckboxButton\n key={`${value}`}\n label={label}\n value={value}\n isChecked={defaultValues ? defaultValues.includes(value) : false}\n variant={getVariant(index, checkboxes.length)}\n disabled={disabled || disableGroup}\n notValid={notValidatedText !== ''}\n onSetValue={(newValue) => handleChange(newValue, value)}\n />\n ))}\n </div>\n {notValidatedText !== '' && (\n <div className={styles['checkbox-button-bar__error']}>\n <Icon name=\"ExclamationTriangleFill\" size={24} />\n {notValidatedText}\n </div>\n )}\n </div>\n </div>\n );\n};\n"],"names":["CheckboxButtonBar","checkboxes","defaultValues","label","labelPosition","required","notValidatedText","disableGroup","onSetValues","values","useRef","handleChange","setValue","value","val","getVariant","index","totalItems","jsxs","clsx","styles","jsx","Label","disabled","CheckboxButton","newValue","Icon"],"mappings":";;;;;;;;;;;;;GAkCaA,IAAoB,CAAC;AAAA,EAChC,YAAAC;AAAA,EACA,eAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,UAAAC,IAAW;AAAA,EACX,kBAAAC,IAAmB;AAAA,EACnB,cAAAC,IAAe;AAAA,EACf,aAAAC;AACF,MAA8B;AACtB,QAAAC,IAASC,EAAiBR,IAAgBA,EAAc,IAAI,MAAM,IAAI,
|
|
1
|
+
{"version":3,"file":"CheckboxButtonBar.js","sources":["../../../src/components/CheckboxButtonBar/CheckboxButtonBar.tsx"],"sourcesContent":["import { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport type { CheckboxButtonProps } from 'components/CheckboxButton';\n\nimport styles from './CheckboxButtonBar.module.css';\n\nimport { CheckboxButton } from 'components/CheckboxButton';\nimport { Label } from 'components/Label';\nimport { Icon } from 'components/Icon';\n\ntype CheckboxProps = {\n label: string;\n value: string;\n disabled?: boolean;\n};\n\nexport interface CheckboxButtonBarProps {\n /** array with objects with label, value */\n checkboxes: CheckboxProps[];\n //** array with values */\n defaultValues?: string[];\n label?: string;\n /** 'top' | 'left' */\n labelPosition?: 'top' | 'left';\n required?: boolean;\n /** error text to display if set */\n notValidatedText?: string;\n /** disables all checkboxes in the bar */\n disableGroup?: boolean;\n onSetValues: (value: string[]) => void;\n}\n\n/** Represents a component that shows a collection of [CheckboxButton](/story/atoms-checkboxbutton--checkbox-button-example)s. */\nexport const CheckboxButtonBar = ({\n checkboxes,\n defaultValues,\n label,\n labelPosition = 'top',\n required = false,\n notValidatedText = '',\n disableGroup = false,\n onSetValues,\n}: CheckboxButtonBarProps) => {\n const values = useRef<string[]>(defaultValues ? defaultValues.map(String) : []);\n\n const handleChange = (setValue: string | null, value: string) => {\n if (setValue === null) {\n values.current = values.current.filter((val) => val !== value);\n } else {\n values.current = [...values.current, value];\n }\n onSetValues(values.current);\n };\n\n const getVariant = (index: number, totalItems: number): CheckboxButtonProps['variant'] => {\n if (index === 0 && totalItems !== 1) {\n return 'start';\n } else if (index < totalItems - 1) {\n return 'middle';\n } else if (totalItems === 1) {\n return 'single';\n } else {\n return 'end';\n }\n };\n\n return (\n <div\n className={clsx(\n styles['checkbox-button-bar__container'],\n styles[`checkbox-button-bar__container--label-${labelPosition}`]\n )}\n >\n {label && (\n <Label htmlFor=\"\" required={required}>\n {label}\n </Label>\n )}\n <div className={styles['checkbox-button-bar__row-container']}>\n <div className={styles['checkbox-button-bar__row']}>\n {checkboxes.map(({ label, value, disabled }, index) => (\n <CheckboxButton\n key={`${value}`}\n label={label}\n value={value}\n isChecked={defaultValues ? defaultValues.includes(value) : false}\n variant={getVariant(index, checkboxes.length)}\n disabled={disabled || disableGroup}\n notValid={notValidatedText !== ''}\n onSetValue={(newValue) => handleChange(newValue, value)}\n />\n ))}\n </div>\n {notValidatedText !== '' && (\n <div className={styles['checkbox-button-bar__error']}>\n <Icon name=\"ExclamationTriangleFill\" size={24} />\n {notValidatedText}\n </div>\n )}\n </div>\n </div>\n );\n};\n"],"names":["CheckboxButtonBar","checkboxes","defaultValues","label","labelPosition","required","notValidatedText","disableGroup","onSetValues","values","useRef","handleChange","setValue","value","val","getVariant","index","totalItems","jsxs","clsx","styles","jsx","Label","disabled","CheckboxButton","newValue","Icon"],"mappings":";;;;;;;;;;;;;GAkCaA,IAAoB,CAAC;AAAA,EAChC,YAAAC;AAAA,EACA,eAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,UAAAC,IAAW;AAAA,EACX,kBAAAC,IAAmB;AAAA,EACnB,cAAAC,IAAe;AAAA,EACf,aAAAC;AACF,MAA8B;AACtB,QAAAC,IAASC,EAAiBR,IAAgBA,EAAc,IAAI,MAAM,IAAI,EAAE,GAExES,IAAe,CAACC,GAAyBC,MAAkB;AAC/D,IAAID,MAAa,OACfH,EAAO,UAAUA,EAAO,QAAQ,OAAO,CAACK,MAAQA,MAAQD,CAAK,IAE7DJ,EAAO,UAAU,CAAC,GAAGA,EAAO,SAASI,CAAK,GAE5CL,EAAYC,EAAO,OAAO;AAAA,EAC5B,GAEMM,IAAa,CAACC,GAAeC,MAC7BD,MAAU,KAAKC,MAAe,IACzB,UACED,IAAQC,IAAa,IACvB,WACEA,MAAe,IACjB,WAEA;AAKT,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACTC,EAAO,gCAAgC;AAAA,QACvCA,EAAO,yCAAyChB,CAAa,EAAE;AAAA,MACjE;AAAA,MAEC,UAAA;AAAA,QAAAD,KACE,gBAAAkB,EAAAC,GAAA,EAAM,SAAQ,IAAG,UAAAjB,GACf,UACHF,GAAA;AAAA,QAED,gBAAAe,EAAA,OAAA,EAAI,WAAWE,EAAO,oCAAoC,GACzD,UAAA;AAAA,UAAA,gBAAAC,EAAC,OAAI,EAAA,WAAWD,EAAO,0BAA0B,GAC9C,UAAWnB,EAAA,IAAI,CAAC,EAAE,OAAAE,GAAO,OAAAU,GAAO,UAAAU,EAAA,GAAYP,MAC3C,gBAAAK;AAAA,YAACG;AAAA,YAAA;AAAA,cAEC,OAAOrB;AAAAA,cACP,OAAAU;AAAA,cACA,WAAWX,IAAgBA,EAAc,SAASW,CAAK,IAAI;AAAA,cAC3D,SAASE,EAAWC,GAAOf,EAAW,MAAM;AAAA,cAC5C,UAAUsB,KAAYhB;AAAA,cACtB,UAAUD,MAAqB;AAAA,cAC/B,YAAY,CAACmB,MAAad,EAAac,GAAUZ,CAAK;AAAA,YAAA;AAAA,YAPjD,GAAGA,CAAK;AAAA,UAShB,CAAA,GACH;AAAA,UACCP,MAAqB,MACpB,gBAAAY,EAAC,SAAI,WAAWE,EAAO,4BAA4B,GACjD,UAAA;AAAA,YAAA,gBAAAC,EAACK,GAAK,EAAA,MAAK,2BAA0B,MAAM,IAAI;AAAA,YAC9CpB;AAAA,UAAA,EACH,CAAA;AAAA,QAAA,EAEJ,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACF;AAEJ;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as t } from "react/jsx-runtime";
|
|
2
|
-
import { fn as l } from "../../index-
|
|
2
|
+
import { fn as l } from "../../index-DWzkl4aY.js";
|
|
3
3
|
import { CheckboxButtonBar as e } from "./CheckboxButtonBar.js";
|
|
4
4
|
const a = "<CheckboxButtonBar checkboxes={} defaultValues={} label={} labelPosition={} required={} notValidatedText={} disableGroup={} onSetValues={} />", i = {
|
|
5
5
|
title: "Molecules/CheckboxButtonBar",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxButtonBar.stories.js","sources":["../../../src/components/CheckboxButtonBar/CheckboxButtonBar.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { CheckboxButtonBarProps } from './CheckboxButtonBar';\n\nimport { CheckboxButtonBar } from './CheckboxButtonBar';\n\nconst codeString =\n '<CheckboxButtonBar checkboxes={} defaultValues={} label={} labelPosition={} required={} notValidatedText={} disableGroup={} onSetValues={} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Molecules/CheckboxButtonBar',\n component: CheckboxButtonBar,\n argTypes: {\n checkboxes: {\n table: {\n disable: true,\n },\n },\n defaultValues: {\n table: {\n disable: true,\n },\n },\n label: {\n control: 'text',\n },\n labelPosition: {\n control: 'radio',\n options: ['top', 'left'],\n },\n required: {\n control: 'boolean',\n },\n notValidatedText: {\n control: 'text',\n },\n disableGroup: {\n control: 'boolean',\n },\n onSetValues: {\n table: {\n disable: true,\n },\n },\n },\n parameters: {\n inspectComponent: CheckboxButtonBar,\n codeString: codeString,\n },\n} as Meta<CheckboxButtonBarProps>;\n\nconst Template: StoryFn<CheckboxButtonBarProps> = (args) => <CheckboxButtonBar {...args} />;\n\nexport const CheckboxButtonBarExample = Template.bind({});\nCheckboxButtonBarExample.args = {\n label: 'Periode',\n required: true,\n checkboxes: [\n {\n label: '1.1',\n value: '1',\n },\n {\n label: '1.2',\n value: '2',\n },\n {\n label: '1.3',\n value: '3',\n },\n ],\n defaultValues: ['1', '2'],\n labelPosition: 'top',\n onSetValues: fn(),\n};\n"],"names":["codeString","CheckboxButtonBar_stories","CheckboxButtonBar","Template","args","jsx","CheckboxButtonBarExample","fn"],"mappings":";;;AAOA,MAAMA,IACJ,iJAGaC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,YAAY;AAAA,MACV,OAAO;AAAA,QACL,SAAS;AAAA,
|
|
1
|
+
{"version":3,"file":"CheckboxButtonBar.stories.js","sources":["../../../src/components/CheckboxButtonBar/CheckboxButtonBar.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { CheckboxButtonBarProps } from './CheckboxButtonBar';\n\nimport { CheckboxButtonBar } from './CheckboxButtonBar';\n\nconst codeString =\n '<CheckboxButtonBar checkboxes={} defaultValues={} label={} labelPosition={} required={} notValidatedText={} disableGroup={} onSetValues={} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Molecules/CheckboxButtonBar',\n component: CheckboxButtonBar,\n argTypes: {\n checkboxes: {\n table: {\n disable: true,\n },\n },\n defaultValues: {\n table: {\n disable: true,\n },\n },\n label: {\n control: 'text',\n },\n labelPosition: {\n control: 'radio',\n options: ['top', 'left'],\n },\n required: {\n control: 'boolean',\n },\n notValidatedText: {\n control: 'text',\n },\n disableGroup: {\n control: 'boolean',\n },\n onSetValues: {\n table: {\n disable: true,\n },\n },\n },\n parameters: {\n inspectComponent: CheckboxButtonBar,\n codeString: codeString,\n },\n} as Meta<CheckboxButtonBarProps>;\n\nconst Template: StoryFn<CheckboxButtonBarProps> = (args) => <CheckboxButtonBar {...args} />;\n\nexport const CheckboxButtonBarExample = Template.bind({});\nCheckboxButtonBarExample.args = {\n label: 'Periode',\n required: true,\n checkboxes: [\n {\n label: '1.1',\n value: '1',\n },\n {\n label: '1.2',\n value: '2',\n },\n {\n label: '1.3',\n value: '3',\n },\n ],\n defaultValues: ['1', '2'],\n labelPosition: 'top',\n onSetValues: fn(),\n};\n"],"names":["codeString","CheckboxButtonBar_stories","CheckboxButtonBar","Template","args","jsx","CheckboxButtonBarExample","fn"],"mappings":";;;AAOA,MAAMA,IACJ,iJAGaC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,YAAY;AAAA,MACV,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IAEb;AAAA,IACA,eAAe;AAAA,MACb,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IAEb;AAAA,IACA,OAAO;AAAA,MACL,SAAS;AAAA,IACX;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,MACT,SAAS,CAAC,OAAO,MAAM;AAAA,IACzB;AAAA,IACA,UAAU;AAAA,MACR,SAAS;AAAA,IACX;AAAA,IACA,kBAAkB;AAAA,MAChB,SAAS;AAAA,IACX;AAAA,IACA,cAAc;AAAA,MACZ,SAAS;AAAA,IACX;AAAA,IACA,aAAa;AAAA,MACX,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EAEJ;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAA4C,CAACC,MAAU,gBAAAC,EAAAH,GAAA,EAAmB,GAAGE,GAAM,GAE5EE,IAA2BH,EAAS,KAAK,CAAE,CAAA;AACxDG,EAAyB,OAAO;AAAA,EAC9B,OAAO;AAAA,EACP,UAAU;AAAA,EACV,YAAY;AAAA,IACV;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IAAA;AAAA,EAEX;AAAA,EACA,eAAe,CAAC,KAAK,GAAG;AAAA,EACxB,eAAe;AAAA,EACf,aAAaC,EAAG;AAClB;"}
|
|
@@ -16,8 +16,7 @@ import "../GridRow/GridRow.js";
|
|
|
16
16
|
import "../IconButton/IconButton.js";
|
|
17
17
|
import "../Input/Input.js";
|
|
18
18
|
import "../InputField/InputField.js";
|
|
19
|
-
import "
|
|
20
|
-
import "../../TablePlugin-BbiBRjod.js";
|
|
19
|
+
import "../../TablePlugin-ByeOn0Zf.js";
|
|
21
20
|
import "../RteEditor/Providers/LanguageProvider.js";
|
|
22
21
|
import "../RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
|
|
23
22
|
import "../RteEditor/hooks/components/Flyout.js";
|
|
@@ -36,7 +35,7 @@ import '../../assets/CheckboxTree.css';const o = {
|
|
|
36
35
|
"checkbox-tree__leaves": "_checkbox-tree__leaves_xbe4e_39",
|
|
37
36
|
"checkbox-tree__leaves--expanded": "_checkbox-tree__leaves--expanded_xbe4e_48",
|
|
38
37
|
"checkbox-tree__leaf": "_checkbox-tree__leaf_xbe4e_52"
|
|
39
|
-
},
|
|
38
|
+
}, ie = ({ title: p, checkboxTree: A, defaultValue: l, onChange: x }) => {
|
|
40
39
|
const s = T([]), { lessThan: n } = j(), _ = (r, e = document) => [].slice.call(e.querySelectorAll(r)), E = () => {
|
|
41
40
|
const r = s.current.reduce((e, t) => (t.name && t.checked && e.push(t.value), e), []);
|
|
42
41
|
x && x(r);
|
|
@@ -46,8 +45,8 @@ import '../../assets/CheckboxTree.css';const o = {
|
|
|
46
45
|
const c = (t = (e = r.closest("[data-ul]")) == null ? void 0 : e.parentNode) == null ? void 0 : t.querySelector("input"), f = _(
|
|
47
46
|
"input",
|
|
48
47
|
(d = c == null ? void 0 : c.closest("[data-li]")) == null ? void 0 : d.querySelector("[data-ul]")
|
|
49
|
-
).reduce((k, v) => (v.disabled || k.push(v.checked), k), []),
|
|
50
|
-
if (c && (c.checked =
|
|
48
|
+
).reduce((k, v) => (v.disabled || k.push(v.checked), k), []), b = f.every(Boolean), F = f.some(Boolean);
|
|
49
|
+
if (c && (c.checked = b, c.indeterminate = !b && b !== F), !c || r === c)
|
|
51
50
|
break;
|
|
52
51
|
r = c;
|
|
53
52
|
}
|
|
@@ -80,7 +79,7 @@ import '../../assets/CheckboxTree.css';const o = {
|
|
|
80
79
|
l.includes(r.value) && (r.checked = !0, m(r));
|
|
81
80
|
});
|
|
82
81
|
}, [l]), /* @__PURE__ */ i("div", { children: [
|
|
83
|
-
|
|
82
|
+
p && /* @__PURE__ */ a("span", { className: o["checkbox-tree__header"], children: p }),
|
|
84
83
|
/* @__PURE__ */ a("div", { onClick: q, "data-ul": !0, role: "tree", tabIndex: 0, children: A.map(({ itemName: r, children: e }) => /* @__PURE__ */ i(
|
|
85
84
|
"div",
|
|
86
85
|
{
|
|
@@ -122,6 +121,6 @@ import '../../assets/CheckboxTree.css';const o = {
|
|
|
122
121
|
] });
|
|
123
122
|
};
|
|
124
123
|
export {
|
|
125
|
-
|
|
124
|
+
ie as CheckboxTree
|
|
126
125
|
};
|
|
127
126
|
//# sourceMappingURL=CheckboxTree.js.map
|