@uva-glass/component-library 3.29.0 → 3.30.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-BL3dsYxn.js.map +1 -1
- package/dist/Lexical.prod-UwAbgYpF.js.map +1 -1
- package/dist/LexicalClipboard.prod-DHIGjydG.js.map +1 -1
- package/dist/LexicalLink.prod-Bsa9J7L-.js.map +1 -1
- package/dist/LexicalList.prod-jxGuZd4b.js.map +1 -1
- package/dist/LexicalSelection.prod-xk5MiZnZ.js.map +1 -1
- package/dist/LexicalTable.prod-BSjs04iE.js.map +1 -1
- package/dist/LexicalUtils.prod-cQutjKA3.js.map +1 -1
- package/dist/MultiSelectItem-DbOdEllV.js.map +1 -1
- package/dist/SortableProvider-CwX1lFMa.js.map +1 -1
- package/dist/TablePlugin-NmJsn2fm.js.map +1 -1
- package/dist/__mocks__/svgrMock.js.map +1 -1
- package/dist/{client-EQRlhXX7.js → client-D0KlBcsm.js} +1325 -1325
- package/dist/{client-EQRlhXX7.js.map → client-D0KlBcsm.js.map} +1 -1
- package/dist/components/Accordion/Accordion.js.map +1 -1
- package/dist/components/Accordion/Accordion.stories.d.ts +2 -2
- package/dist/components/Accordion/Accordion.stories.js.map +1 -1
- package/dist/components/Accordion/Accordion.test.js +3 -3
- package/dist/components/Accordion/Accordion.test.js.map +1 -1
- package/dist/components/AccordionCard/AccordionCard.js.map +1 -1
- package/dist/components/AccordionCard/AccordionCard.stories.d.ts +1 -1
- package/dist/components/AccordionCard/AccordionCard.stories.js.map +1 -1
- package/dist/components/AccordionCard/AccordionCard.test.js +3 -3
- package/dist/components/AccordionCard/AccordionCard.test.js.map +1 -1
- package/dist/components/ActionList/ActionList.js.map +1 -1
- package/dist/components/ActionList/ActionList.stories.d.ts +1 -1
- package/dist/components/ActionList/ActionList.stories.js.map +1 -1
- package/dist/components/ActionList/ActionList.test.js +3 -3
- package/dist/components/ActionList/ActionList.test.js.map +1 -1
- package/dist/components/AppStatusBar/AppStatusBar.js.map +1 -1
- package/dist/components/AppStatusBar/AppStatusBar.stories.d.ts +1 -1
- package/dist/components/AppStatusBar/AppStatusBar.stories.js.map +1 -1
- package/dist/components/AppStatusBar/AppStatusBar.test.js +2 -2
- package/dist/components/AppStatusBar/AppStatusBar.test.js.map +1 -1
- package/dist/components/Attention/Attention.js.map +1 -1
- package/dist/components/Attention/Attention.stories.d.ts +1 -1
- package/dist/components/Attention/Attention.stories.js.map +1 -1
- package/dist/components/Attention/Attention.test.js +2 -2
- package/dist/components/Attention/Attention.test.js.map +1 -1
- package/dist/components/Backdrop/Backdrop.js.map +1 -1
- package/dist/components/Backdrop/Backdrop.stories.d.ts +1 -1
- package/dist/components/Backdrop/Backdrop.stories.js.map +1 -1
- package/dist/components/Backdrop/Backdrop.test.js +2 -2
- package/dist/components/Backdrop/Backdrop.test.js.map +1 -1
- package/dist/components/ButtonGroup/ButtonGroup.js.map +1 -1
- package/dist/components/ButtonGroup/ButtonGroup.stories.d.ts +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.d.ts +2 -2
- package/dist/components/Buttons/Button.stories.js +8 -8
- package/dist/components/Buttons/Button.stories.js.map +1 -1
- package/dist/components/Buttons/Button.test.js +2 -2
- package/dist/components/Buttons/Button.test.js.map +1 -1
- package/dist/components/Buttons/LinkButton.js.map +1 -1
- package/dist/components/Buttons/LinkButton.stories.d.ts +2 -2
- package/dist/components/Buttons/LinkButton.stories.js +10 -10
- package/dist/components/Buttons/LinkButton.stories.js.map +1 -1
- package/dist/components/Buttons/LinkButton.test.js +2 -2
- package/dist/components/Buttons/LinkButton.test.js.map +1 -1
- package/dist/components/Buttons/MenuButton.js.map +1 -1
- package/dist/components/Buttons/MenuButton.stories.d.ts +3 -3
- package/dist/components/Buttons/MenuButton.stories.js +15 -15
- package/dist/components/Buttons/MenuButton.stories.js.map +1 -1
- package/dist/components/Buttons/MenuButton.test.js +2 -2
- package/dist/components/Buttons/MenuButton.test.js.map +1 -1
- package/dist/components/Card/Card.js.map +1 -1
- package/dist/components/Card/Card.stories.d.ts +3 -3
- package/dist/components/Card/Card.stories.js.map +1 -1
- package/dist/components/Card/Card.test.js +2 -2
- package/dist/components/Card/Card.test.js.map +1 -1
- package/dist/components/Checkbox/Checkbox.js.map +1 -1
- package/dist/components/Checkbox/Checkbox.stories.d.ts +2 -2
- package/dist/components/Checkbox/Checkbox.stories.js +1 -1
- package/dist/components/Checkbox/Checkbox.stories.js.map +1 -1
- package/dist/components/Checkbox/Checkbox.test.js +3 -3
- package/dist/components/Checkbox/Checkbox.test.js.map +1 -1
- package/dist/components/CheckboxButtonBar/CheckboxButtonBar.js.map +1 -1
- package/dist/components/CheckboxButtonBar/CheckboxButtonBar.stories.d.ts +3 -3
- package/dist/components/CheckboxButtonBar/CheckboxButtonBar.stories.js +1 -1
- package/dist/components/CheckboxButtonBar/CheckboxButtonBar.stories.js.map +1 -1
- package/dist/components/CheckboxButtonBar/CheckboxButtonBar.test.js +2 -2
- package/dist/components/CheckboxButtonBar/CheckboxButtonBar.test.js.map +1 -1
- package/dist/components/CheckboxTree/CheckboxTree.js.map +1 -1
- package/dist/components/CheckboxTree/CheckboxTree.stories.d.ts +1 -1
- package/dist/components/CheckboxTree/CheckboxTree.stories.js +108 -123
- package/dist/components/CheckboxTree/CheckboxTree.stories.js.map +1 -1
- package/dist/components/Chip/Chip.js.map +1 -1
- package/dist/components/Chip/Chip.stories.d.ts +2 -2
- package/dist/components/Chip/Chip.stories.js +1 -1
- package/dist/components/Chip/Chip.stories.js.map +1 -1
- package/dist/components/ControlsButton/ControlsButton.js.map +1 -1
- package/dist/components/ControlsButton/ControlsButton.stories.d.ts +1 -1
- package/dist/components/ControlsButton/ControlsButton.stories.js +4 -4
- package/dist/components/ControlsButton/ControlsButton.stories.js.map +1 -1
- package/dist/components/Drawer/Drawer.js.map +1 -1
- package/dist/components/Drawer/Drawer.stories.d.ts +2 -2
- package/dist/components/Drawer/Drawer.stories.js +9 -9
- 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.d.ts +1 -1
- package/dist/components/EmptyStateDataDisplay/EmptyStateDataDisplay.stories.js.map +1 -1
- package/dist/components/ExpandableInfoPanel/ExpandableInfoPanel.js.map +1 -1
- package/dist/components/ExpandableInfoPanel/ExpandableInfoPanel.stories.d.ts +1 -1
- package/dist/components/ExpandableInfoPanel/ExpandableInfoPanel.stories.js.map +1 -1
- package/dist/components/FeedbackBar/FeedbackBar.js.map +1 -1
- package/dist/components/FeedbackBar/FeedbackBar.stories.d.ts +1 -1
- package/dist/components/FeedbackBar/FeedbackBar.stories.js.map +1 -1
- package/dist/components/FeedbackBar/FeedbackBar.test.js +2 -2
- package/dist/components/FeedbackBar/FeedbackBar.test.js.map +1 -1
- package/dist/components/FeedbackBox/FeedbackBox.js.map +1 -1
- package/dist/components/FeedbackBox/FeedbackBox.stories.d.ts +2 -2
- 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.d.ts +2 -2
- package/dist/components/FieldHint/FieldHint.stories.js.map +1 -1
- package/dist/components/Fieldset/Fieldset.js.map +1 -1
- package/dist/components/Fieldset/Fieldset.stories.d.ts +2 -2
- package/dist/components/Fieldset/Fieldset.stories.js.map +1 -1
- package/dist/components/FormField/FormField.stories.d.ts +1 -1
- package/dist/components/FormField/FormField.stories.js.map +1 -1
- package/dist/components/FormInput/FormInput.js.map +1 -1
- package/dist/components/FormInput/FormInput.stories.d.ts +2 -2
- 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.d.ts +2 -2
- 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.d.ts +2 -2
- package/dist/components/HorizontalList/HorizontalList.stories.js.map +1 -1
- package/dist/components/Icon/Icon.js.map +1 -1
- package/dist/components/Icon/Icon.stories.d.ts +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.stories.d.ts +1 -1
- package/dist/components/IconButton/IconButton.stories.js +5 -5
- package/dist/components/IconButton/IconButton.stories.js.map +1 -1
- package/dist/components/InfoBanner/InfoBanner.js.map +1 -1
- package/dist/components/InfoBanner/InfoBanner.stories.d.ts +1 -1
- package/dist/components/InfoBanner/InfoBanner.stories.js.map +1 -1
- package/dist/components/InfoMessage/InfoMessage.js.map +1 -1
- package/dist/components/InfoMessage/InfoMessage.stories.d.ts +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.d.ts +4 -4
- 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.d.ts +3 -3
- package/dist/components/InputField/InputField.stories.js +12 -12
- package/dist/components/InputField/InputField.stories.js.map +1 -1
- package/dist/components/Label/Label.js.map +1 -1
- package/dist/components/Label/Label.stories.d.ts +2 -2
- package/dist/components/Label/Label.stories.js.map +1 -1
- package/dist/components/Label/Label.test.js +2 -2
- package/dist/components/Label/Label.test.js.map +1 -1
- package/dist/components/MenuLink/MenuLink.js.map +1 -1
- package/dist/components/MenuLink/MenuLink.stories.d.ts +2 -2
- 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.d.ts +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.d.ts +3 -3
- package/dist/components/ModalDialog/ModalDialog.stories.js +8 -8
- package/dist/components/ModalDialog/ModalDialog.stories.js.map +1 -1
- package/dist/components/MultiSelect/MultiSelect.stories.d.ts +3 -3
- package/dist/components/MultiSelect/MultiSelect.stories.js +7 -7
- package/dist/components/MultiSelect/MultiSelect.stories.js.map +1 -1
- package/dist/components/MultiSelectBox/MultiSelectBox.js.map +1 -1
- package/dist/components/MultiSelectBox/MultiSelectBox.stories.d.ts +2 -2
- package/dist/components/MultiSelectBox/MultiSelectBox.stories.js +5 -5
- package/dist/components/MultiSelectBox/MultiSelectBox.stories.js.map +1 -1
- package/dist/components/MultiSelectBox/MultiSelectBox.test.js +2 -2
- package/dist/components/MultiSelectBox/MultiSelectBox.test.js.map +1 -1
- package/dist/components/Notification/Notification.js.map +1 -1
- package/dist/components/Notification/Notification.stories.d.ts +2 -2
- package/dist/components/Notification/Notification.stories.js +3 -3
- package/dist/components/Notification/Notification.stories.js.map +1 -1
- package/dist/components/Notification/Notification.test.js +2 -2
- package/dist/components/Notification/Notification.test.js.map +1 -1
- package/dist/components/OverlayCloseButton/OverlayCloseButton.js.map +1 -1
- package/dist/components/OverlayCloseButton/OverlayCloseButton.stories.d.ts +1 -1
- package/dist/components/OverlayCloseButton/OverlayCloseButton.stories.js +4 -4
- package/dist/components/OverlayCloseButton/OverlayCloseButton.stories.js.map +1 -1
- package/dist/components/OverlayStepBar/OverlayStepBar.js.map +1 -1
- package/dist/components/OverlayStepBar/OverlayStepBar.stories.d.ts +2 -2
- package/dist/components/OverlayStepBar/OverlayStepBar.stories.js.map +1 -1
- package/dist/components/PageOverlay/PageOverlay.js.map +1 -1
- package/dist/components/PageOverlay/PageOverlay.stories.d.ts +3 -3
- package/dist/components/PageOverlay/PageOverlay.stories.js.map +1 -1
- package/dist/components/PeriodSelector/PeriodSelector.js.map +1 -1
- package/dist/components/PeriodSelector/PeriodSelector.stories.d.ts +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.d.ts +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.d.ts +3 -3
- package/dist/components/ProgrammeCard/ProgrammeCard.stories.js.map +1 -1
- package/dist/components/RadioButton/RadioButton.js.map +1 -1
- package/dist/components/RadioButton/RadioButton.stories.d.ts +1 -1
- package/dist/components/RadioButton/RadioButton.stories.js.map +1 -1
- package/dist/components/RadioGroup/RadioGroup.js.map +1 -1
- package/dist/components/RadioGroup/RadioGroup.stories.d.ts +1 -1
- package/dist/components/RadioGroup/RadioGroup.stories.js +4 -4
- package/dist/components/RadioGroup/RadioGroup.stories.js.map +1 -1
- package/dist/components/RadioGroup/Radiogroup.test.js +2 -2
- package/dist/components/RadioGroup/Radiogroup.test.js.map +1 -1
- package/dist/components/RadioTabSelector/RadioTabSelector.js.map +1 -1
- package/dist/components/RadioTabSelector/RadioTabSelector.stories.d.ts +1 -1
- package/dist/components/RadioTabSelector/RadioTabSelector.stories.js +1 -1
- package/dist/components/RadioTabSelector/RadioTabSelector.stories.js.map +1 -1
- package/dist/components/Repeater/Repeater.js.map +1 -1
- package/dist/components/Repeater/Repeater.stories.d.ts +1 -1
- package/dist/components/Repeater/Repeater.stories.js.map +1 -1
- 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.map +1 -1
- package/dist/components/RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js.map +1 -1
- 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/TableCellContextMenu/TableCellContextMenu.js.map +1 -1
- package/dist/components/RteEditor/Plugins/TablePlugin/helpers.js.map +1 -1
- package/dist/components/RteEditor/Plugins/ToolbarPlugin/ToolbarPlugin.js.map +1 -1
- package/dist/components/RteEditor/Providers/LanguageProvider.js.map +1 -1
- package/dist/components/RteEditor/RteEditor.js.map +1 -1
- package/dist/components/RteEditor/RteEditor.stories.d.ts +1 -1
- package/dist/components/RteEditor/RteEditor.stories.js.map +1 -1
- package/dist/components/RteEditor/UvaTheme/UvaTheme.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.js.map +1 -1
- package/dist/components/SectionNotification/SectionNotification.stories.d.ts +1 -1
- package/dist/components/SectionNotification/SectionNotification.stories.js.map +1 -1
- package/dist/components/SelectListbox/SelectListBox.stories.d.ts +2 -2
- 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.d.ts +3 -3
- package/dist/components/Sortable/Sortable.stories.js +13 -13
- 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.d.ts +1 -1
- package/dist/components/Spinner/Spinner.stories.js.map +1 -1
- package/dist/components/StatusBadge/StatusBadge.stories.d.ts +1 -1
- package/dist/components/StatusBadge/StatusBadge.stories.js.map +1 -1
- package/dist/components/StatusBadge/StatusBadge.test.js +2 -2
- package/dist/components/StatusBadge/StatusBadge.test.js.map +1 -1
- package/dist/components/StatusBadge/StatusBage.js.map +1 -1
- package/dist/components/StatusPill/StatusPill.js.map +1 -1
- package/dist/components/StatusPill/StatusPill.stories.d.ts +1 -1
- package/dist/components/StatusPill/StatusPill.stories.js.map +1 -1
- package/dist/components/TextArea/TextArea.js.map +1 -1
- package/dist/components/TextArea/TextArea.stories.d.ts +1 -1
- package/dist/components/TextArea/TextArea.stories.js +1 -1
- package/dist/components/TextArea/TextArea.stories.js.map +1 -1
- package/dist/components/TextArea/TextArea.test.js +9 -9
- package/dist/components/TextArea/TextArea.test.js.map +1 -1
- package/dist/components/ToggleSwitch/ToggleSwitch.js.map +1 -1
- package/dist/components/ToggleSwitch/ToggleSwitch.stories.d.ts +1 -1
- package/dist/components/ToggleSwitch/ToggleSwitch.stories.js +5 -5
- package/dist/components/ToggleSwitch/ToggleSwitch.stories.js.map +1 -1
- package/dist/components/Tooltip/Tooltip.js.map +1 -1
- package/dist/components/Tooltip/Tooltip.stories.d.ts +1 -1
- package/dist/components/Tooltip/Tooltip.stories.js.map +1 -1
- package/dist/components/VarIndicator/VarIndicator.js.map +1 -1
- package/dist/components/VarIndicator/VarIndicator.stories.d.ts +1 -1
- package/dist/components/VarIndicator/VarIndicator.stories.js +4 -4
- package/dist/components/VarIndicator/VarIndicator.stories.js.map +1 -1
- package/dist/components/VarIndicator/VarIndicator.test.js +3 -3
- package/dist/components/VarIndicator/VarIndicator.test.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/helpers-DZIm3MiJ.js.map +1 -1
- package/dist/index-BVAvx58-.js +10648 -0
- package/dist/index-BVAvx58-.js.map +1 -0
- package/dist/{index-BqLi4tOb.js → index-DV47hRzi.js} +2891 -2818
- package/dist/index-DV47hRzi.js.map +1 -0
- package/dist/index-Di9WPZUe.js +34752 -0
- package/dist/index-Di9WPZUe.js.map +1 -0
- package/dist/index-DllfJcv4.js.map +1 -1
- package/dist/index-PaHiqSUg.js +3099 -0
- package/dist/index-PaHiqSUg.js.map +1 -0
- package/dist/{react-18-dpbWrd2-.js → react-18-inmoTCp-.js} +2 -2
- package/dist/{react-18-dpbWrd2-.js.map → react-18-inmoTCp-.js.map} +1 -1
- package/dist/{react.esm-CsMDid07.js → react.esm-CFMwGdo5.js} +3 -3
- package/dist/{react.esm-CsMDid07.js.map → react.esm-CFMwGdo5.js.map} +1 -1
- package/dist/setupTests.js +11 -1562
- package/dist/setupTests.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 +5345 -5766
- package/dist/storybook__react.d.js.map +1 -1
- package/dist/test-utils-ea_YDVtd.js.map +1 -1
- package/package.json +14 -18
- package/dist/index-BqLi4tOb.js.map +0 -1
- package/dist/index-CUap8sKR.js +0 -2962
- package/dist/index-CUap8sKR.js.map +0 -1
- package/dist/index-DH9Vbk37.js +0 -9507
- package/dist/index-DH9Vbk37.js.map +0 -1
- package/dist/index-Dwqes6RH.js +0 -14758
- package/dist/index-Dwqes6RH.js.map +0 -1
|
@@ -2,4 +2,4 @@ import { Meta } from '@storybook/react';
|
|
|
2
2
|
import { IconButtonProps } from 'components/IconButton';
|
|
3
3
|
declare const _default: Meta<IconButtonProps>;
|
|
4
4
|
export default _default;
|
|
5
|
-
export declare const IconButtonExample: import('
|
|
5
|
+
export declare const IconButtonExample: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, IconButtonProps>;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import {
|
|
1
|
+
import { jsx as e } from "react/jsx-runtime";
|
|
2
|
+
import { W as r } from "../../index-Di9WPZUe.js";
|
|
3
3
|
import { IconButton as t } from "./IconButton.js";
|
|
4
4
|
import { Icon as i } from "../Icon/Icon.js";
|
|
5
5
|
const l = `<IconButton variant={variant} aria-label={aria-label} onClick={onClickFunction}>
|
|
@@ -40,8 +40,8 @@ const l = `<IconButton variant={variant} aria-label={aria-label} onClick={onClic
|
|
|
40
40
|
codeString: l
|
|
41
41
|
}
|
|
42
42
|
}, s = (o) => {
|
|
43
|
-
const
|
|
44
|
-
return /* @__PURE__ */
|
|
43
|
+
const n = o.variant ?? [], a = { ...o, variant: n.toString() };
|
|
44
|
+
return /* @__PURE__ */ e(t, { ...a });
|
|
45
45
|
}, c = s.bind({});
|
|
46
46
|
c.args = {
|
|
47
47
|
"aria-label": "Trash",
|
|
@@ -49,7 +49,7 @@ c.args = {
|
|
|
49
49
|
noBorder: !1,
|
|
50
50
|
wide: !1,
|
|
51
51
|
disabled: !1,
|
|
52
|
-
children: /* @__PURE__ */
|
|
52
|
+
children: /* @__PURE__ */ e(i, { name: "Trash" }),
|
|
53
53
|
onClick: r()
|
|
54
54
|
};
|
|
55
55
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconButton.stories.js","sources":["../../../src/components/IconButton/IconButton.stories.tsx"],"sourcesContent":["import { fn } from '
|
|
1
|
+
{"version":3,"file":"IconButton.stories.js","sources":["../../../src/components/IconButton/IconButton.stories.tsx"],"sourcesContent":["import { fn } from 'storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { IconButtonProps } from 'components/IconButton';\n\nimport { IconButton } from 'components/IconButton';\nimport { Icon } from 'components/Icon';\n\nconst codeString = `<IconButton variant={variant} aria-label={aria-label} onClick={onClickFunction}>\n <Icon name={iconName} size={size} />\n </IconButton>`;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/IconButton',\n component: IconButton,\n argTypes: {\n variant: {\n options: ['destructive'],\n control: { type: 'check' },\n },\n noBorder: {\n control: 'boolean',\n default: false,\n },\n wide: {\n control: 'boolean',\n default: false,\n },\n 'aria-label': {\n table: {\n disable: true,\n },\n },\n type: {\n options: ['button', 'submit', 'reset'],\n control: { type: 'select' },\n },\n children: {\n table: {\n disable: true,\n },\n },\n },\n parameters: {\n inspectComponent: IconButton,\n codeString: codeString,\n },\n} as Meta<IconButtonProps>;\n\nconst Template: StoryFn<IconButtonProps> = (args) => {\n // args.variant is provided as an array because the control type is set to a checkbox. So this transforms the selected value into its proper value: a string\n const variantArray = (args.variant as unknown as string[]) ?? [];\n const iconButtonArgs = { ...args, ...{ variant: variantArray.toString() } } as IconButtonProps;\n\n return <IconButton {...iconButtonArgs} />;\n};\n\nexport const IconButtonExample = Template.bind({});\nIconButtonExample.args = {\n 'aria-label': 'Trash',\n variant: 'destructive',\n noBorder: false,\n wide: false,\n disabled: false,\n children: <Icon name=\"Trash\" />,\n onClick: fn(),\n};\n"],"names":["codeString","IconButton_stories","IconButton","Template","args","variantArray","iconButtonArgs","jsx","IconButtonExample","Icon","fn"],"mappings":";;;;AAQA,MAAMA,IAAa;AAAA;AAAA,kBAKnBC,IAAe;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS,CAAC,aAAa;AAAA,MACvB,SAAS,EAAE,MAAM,QAAA;AAAA,IAAQ;AAAA,IAE3B,UAAU;AAAA,MACR,SAAS;AAAA,MACT,SAAS;AAAA,IAAA;AAAA,IAEX,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,SAAS;AAAA,IAAA;AAAA,IAEX,cAAc;AAAA,MACZ,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,IAEF,MAAM;AAAA,MACJ,SAAS,CAAC,UAAU,UAAU,OAAO;AAAA,MACrC,SAAS,EAAE,MAAM,SAAA;AAAA,IAAS;AAAA,IAE5B,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EACF;AAAA,EAEF,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAqC,CAACC,MAAS;AAEnD,QAAMC,IAAgBD,EAAK,WAAmC,CAAA,GACxDE,IAAiB,EAAE,GAAGF,GAAW,SAASC,EAAa,SAAA,EAAW;AAExE,SAAO,gBAAAE,EAACL,GAAA,EAAY,GAAGI,EAAA,CAAgB;AACzC,GAEaE,IAAoBL,EAAS,KAAK,CAAA,CAAE;AACjDK,EAAkB,OAAO;AAAA,EACvB,cAAc;AAAA,EACd,SAAS;AAAA,EACT,UAAU;AAAA,EACV,MAAM;AAAA,EACN,UAAU;AAAA,EACV,UAAU,gBAAAD,EAACE,GAAA,EAAK,MAAK,QAAA,CAAQ;AAAA,EAC7B,SAASC,EAAA;AACX;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InfoBanner.js","sources":["../../../src/components/InfoBanner/InfoBanner.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\r\nimport type { IconProps } from 'components/Icon';\r\n\r\nimport styles from './InfoBanner.module.css';\r\n\r\nimport { Icon } from 'components/Icon';\r\n\r\nexport interface InfoBannerProps {\r\n /** The name of the icon to display in the banner. */\r\n iconName?: IconProps['name'];\r\n /** Content or message as sting or react component. */\r\n content?: string | ReactNode;\r\n}\r\n\r\nexport const InfoBanner = ({ iconName, content }: InfoBannerProps) => {\r\n return (\r\n <div className={styles['infobanner_wrapper']}>\r\n {iconName && <Icon name={iconName} size={24} />}\r\n {content}\r\n </div>\r\n );\r\n};\r\n"],"names":["InfoBanner","iconName","content","jsxs","styles","jsx","Icon"],"mappings":";;;;GAcaA,IAAa,CAAC,EAAE,UAAAC,GAAU,SAAAC,
|
|
1
|
+
{"version":3,"file":"InfoBanner.js","sources":["../../../src/components/InfoBanner/InfoBanner.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\r\nimport type { IconProps } from 'components/Icon';\r\n\r\nimport styles from './InfoBanner.module.css';\r\n\r\nimport { Icon } from 'components/Icon';\r\n\r\nexport interface InfoBannerProps {\r\n /** The name of the icon to display in the banner. */\r\n iconName?: IconProps['name'];\r\n /** Content or message as sting or react component. */\r\n content?: string | ReactNode;\r\n}\r\n\r\nexport const InfoBanner = ({ iconName, content }: InfoBannerProps) => {\r\n return (\r\n <div className={styles['infobanner_wrapper']}>\r\n {iconName && <Icon name={iconName} size={24} />}\r\n {content}\r\n </div>\r\n );\r\n};\r\n"],"names":["InfoBanner","iconName","content","jsxs","styles","jsx","Icon"],"mappings":";;;;GAcaA,IAAa,CAAC,EAAE,UAAAC,GAAU,SAAAC,QAEnC,gBAAAC,EAAC,OAAA,EAAI,WAAWC,EAAO,oBACpB,UAAA;AAAA,EAAAH,KAAY,gBAAAI,EAACC,GAAA,EAAK,MAAML,GAAU,MAAM,IAAI;AAAA,EAC5CC;AAAA,GACH;"}
|
|
@@ -2,4 +2,4 @@ import { Meta } from '@storybook/react';
|
|
|
2
2
|
import { InfoBannerProps } from 'components/InfoBanner';
|
|
3
3
|
declare const _default: Meta<InfoBannerProps>;
|
|
4
4
|
export default _default;
|
|
5
|
-
export declare const InfoBannerExample: import('
|
|
5
|
+
export declare const InfoBannerExample: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, InfoBannerProps>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InfoBanner.stories.js","sources":["../../../src/components/InfoBanner/InfoBanner.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\r\nimport type { InfoBannerProps } from 'components/InfoBanner';\r\n\r\nimport { InfoBanner } from 'components/InfoBanner';\r\n\r\nconst codeString = `<InfoBanner iconName={string} content={ReactNode} />`;\r\n\r\n// eslint-disable-next-line import/no-default-export\r\nexport default {\r\n title: 'Atoms/InfoBanner',\r\n component: InfoBanner,\r\n argTypes: {},\r\n parameters: {\r\n inspectComponent: InfoBanner,\r\n codeString: codeString,\r\n },\r\n} as Meta<InfoBannerProps>;\r\n\r\nconst Template: StoryFn<InfoBannerProps> = (args) => <InfoBanner {...args} />;\r\n\r\nexport const InfoBannerExample = Template.bind({});\r\nInfoBannerExample.args = {\r\n content: (\r\n <span>\r\n Je voert de roosterwensen in voor <strong>vakaanbieding 2.</strong>\r\n </span>\r\n ),\r\n iconName: 'CalendarEdit',\r\n};\r\n"],"names":["codeString","InfoBanner_stories","InfoBanner","Template","args","jsx","InfoBannerExample"],"mappings":";;AAKA,MAAMA,IAAa,
|
|
1
|
+
{"version":3,"file":"InfoBanner.stories.js","sources":["../../../src/components/InfoBanner/InfoBanner.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\r\nimport type { InfoBannerProps } from 'components/InfoBanner';\r\n\r\nimport { InfoBanner } from 'components/InfoBanner';\r\n\r\nconst codeString = `<InfoBanner iconName={string} content={ReactNode} />`;\r\n\r\n// eslint-disable-next-line import/no-default-export\r\nexport default {\r\n title: 'Atoms/InfoBanner',\r\n component: InfoBanner,\r\n argTypes: {},\r\n parameters: {\r\n inspectComponent: InfoBanner,\r\n codeString: codeString,\r\n },\r\n} as Meta<InfoBannerProps>;\r\n\r\nconst Template: StoryFn<InfoBannerProps> = (args) => <InfoBanner {...args} />;\r\n\r\nexport const InfoBannerExample = Template.bind({});\r\nInfoBannerExample.args = {\r\n content: (\r\n <span>\r\n Je voert de roosterwensen in voor <strong>vakaanbieding 2.</strong>\r\n </span>\r\n ),\r\n iconName: 'CalendarEdit',\r\n};\r\n"],"names":["codeString","InfoBanner_stories","InfoBanner","Template","args","jsx","InfoBannerExample"],"mappings":";;AAKA,MAAMA,IAAa,wDAGnBC,IAAe;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU,CAAA;AAAA,EACV,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAqC,CAACC,MAAS,gBAAAC,EAACH,GAAA,EAAY,GAAGE,GAAM,GAE9DE,IAAoBH,EAAS,KAAK,CAAA,CAAE;AACjDG,EAAkB,OAAO;AAAA,EACvB,2BACG,QAAA,EAAK,UAAA;AAAA,IAAA;AAAA,IAC8B,gBAAAD,EAAC,YAAO,UAAA,mBAAA,CAAgB;AAAA,EAAA,GAC5D;AAAA,EAEF,UAAU;AACZ;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InfoMessage.js","sources":["../../../src/components/InfoMessage/InfoMessage.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport type { PropsWithChildren, ReactNode } from 'react';\n\nimport styles from './InfoMessage.module.css';\n\nimport { Icon } from 'components/Icon';\n\nexport interface InfoMessageProps {\n /** The message to show. */\n message: string | ReactNode;\n /** `true` if the info message should be wrapped in a container; otherwise, `false`. */\n hasOwnContainer?: boolean;\n}\n\n/** Represents a component to show an info message. */\nexport const InfoMessage = ({ message, hasOwnContainer = false }: PropsWithChildren<InfoMessageProps>) => (\n <div\n className={clsx(styles['info-message'], {\n [styles['info-message__container']]: hasOwnContainer,\n })}\n >\n <Icon name=\"InformationCircleFillMini\" className={styles['info-message__icon']} />\n {message}\n </div>\n);\n"],"names":["InfoMessage","message","hasOwnContainer","jsxs","clsx","styles","jsx","Icon"],"mappings":";;;;;;;GAgBaA,IAAc,CAAC,EAAE,SAAAC,GAAS,iBAAAC,IAAkB,
|
|
1
|
+
{"version":3,"file":"InfoMessage.js","sources":["../../../src/components/InfoMessage/InfoMessage.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport type { PropsWithChildren, ReactNode } from 'react';\n\nimport styles from './InfoMessage.module.css';\n\nimport { Icon } from 'components/Icon';\n\nexport interface InfoMessageProps {\n /** The message to show. */\n message: string | ReactNode;\n /** `true` if the info message should be wrapped in a container; otherwise, `false`. */\n hasOwnContainer?: boolean;\n}\n\n/** Represents a component to show an info message. */\nexport const InfoMessage = ({ message, hasOwnContainer = false }: PropsWithChildren<InfoMessageProps>) => (\n <div\n className={clsx(styles['info-message'], {\n [styles['info-message__container']]: hasOwnContainer,\n })}\n >\n <Icon name=\"InformationCircleFillMini\" className={styles['info-message__icon']} />\n {message}\n </div>\n);\n"],"names":["InfoMessage","message","hasOwnContainer","jsxs","clsx","styles","jsx","Icon"],"mappings":";;;;;;;GAgBaA,IAAc,CAAC,EAAE,SAAAC,GAAS,iBAAAC,IAAkB,SACvD,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,EAAKC,EAAO,cAAc,GAAG;AAAA,MACtC,CAACA,EAAO,yBAAyB,CAAC,GAAGH;AAAA,IAAA,CACtC;AAAA,IAED,UAAA;AAAA,MAAA,gBAAAI,EAACC,KAAK,MAAK,6BAA4B,WAAWF,EAAO,oBAAoB,GAAG;AAAA,MAC/EJ;AAAA,IAAA;AAAA,EAAA;AACH;"}
|
|
@@ -2,4 +2,4 @@ import { Meta } from '@storybook/react';
|
|
|
2
2
|
import { InfoMessageProps } from './InfoMessage';
|
|
3
3
|
declare const _default: Meta<InfoMessageProps>;
|
|
4
4
|
export default _default;
|
|
5
|
-
export declare const InfoMessageExample: import('
|
|
5
|
+
export declare const InfoMessageExample: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, InfoMessageProps>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InfoMessage.stories.js","sources":["../../../src/components/InfoMessage/InfoMessage.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { InfoMessageProps } from './InfoMessage';\n\nimport { InfoMessage } from './InfoMessage';\n\nconst codeString = '<InfoMessage message={message} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/InfoMessage',\n component: InfoMessage,\n argTypes: {\n message: {\n control: 'text',\n },\n hasOwnContainer: {\n control: 'boolean',\n },\n },\n parameters: {\n inspectComponent: InfoMessage,\n codeString: codeString,\n },\n} as Meta<InfoMessageProps>;\n\nconst Template: StoryFn<InfoMessageProps> = (args) => <InfoMessage {...args} />;\n\nexport const InfoMessageExample = Template.bind({});\nInfoMessageExample.args = {\n message: 'This is an example info message',\n hasOwnContainer: false,\n};\n"],"names":["codeString","InfoMessage_stories","InfoMessage","Template","args","jsx","InfoMessageExample"],"mappings":";;AAKA,MAAMA,IAAa,
|
|
1
|
+
{"version":3,"file":"InfoMessage.stories.js","sources":["../../../src/components/InfoMessage/InfoMessage.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { InfoMessageProps } from './InfoMessage';\n\nimport { InfoMessage } from './InfoMessage';\n\nconst codeString = '<InfoMessage message={message} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/InfoMessage',\n component: InfoMessage,\n argTypes: {\n message: {\n control: 'text',\n },\n hasOwnContainer: {\n control: 'boolean',\n },\n },\n parameters: {\n inspectComponent: InfoMessage,\n codeString: codeString,\n },\n} as Meta<InfoMessageProps>;\n\nconst Template: StoryFn<InfoMessageProps> = (args) => <InfoMessage {...args} />;\n\nexport const InfoMessageExample = Template.bind({});\nInfoMessageExample.args = {\n message: 'This is an example info message',\n hasOwnContainer: false,\n};\n"],"names":["codeString","InfoMessage_stories","InfoMessage","Template","args","jsx","InfoMessageExample"],"mappings":";;AAKA,MAAMA,IAAa,qCAGnBC,IAAe;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,IAAA;AAAA,IAEX,iBAAiB;AAAA,MACf,SAAS;AAAA,IAAA;AAAA,EACX;AAAA,EAEF,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAsC,CAACC,MAAS,gBAAAC,EAACH,GAAA,EAAa,GAAGE,GAAM,GAEhEE,IAAqBH,EAAS,KAAK,CAAA,CAAE;AAClDG,EAAmB,OAAO;AAAA,EACxB,SAAS;AAAA,EACT,iBAAiB;AACnB;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { clsx } from 'clsx';\n\nimport type { InputHTMLAttributes } from 'react';\n\nimport styles from './Input.module.css';\n\nexport interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'style'> {\n /** The appearance of the element. Possible values: `error`. */\n appearance?: 'error';\n /** The type of the input element. */\n type?: 'text' | 'search' | 'password' | 'email' | 'file';\n /** `true` if the element should render at full width of its container; otherwise, `false`. The default is `false`. */\n fullWidth?: boolean;\n /** The id of the element. */\n id: string;\n /** `true` if the element is used for numeric values; otherwise, `false`. The default is `false`. */\n isNumeric?: boolean;\n}\n\n/** Represents a component for an input element. */\nexport const Input = forwardRef<HTMLInputElement, InputProps>(function Input(\n { id, appearance, type = 'text', isNumeric, fullWidth, ...restProps }: InputProps,\n forwardedRef\n) {\n return (\n <input\n {...restProps}\n ref={forwardedRef}\n id={id}\n className={clsx(styles['input'], {\n [styles['input--error']]: appearance === 'error',\n [styles['input--full-with']]: fullWidth,\n [styles['input--numeric']]: isNumeric,\n })}\n type={type}\n />\n );\n});\n"],"names":["Input","forwardRef","id","appearance","type","isNumeric","fullWidth","restProps","forwardedRef","jsx","clsx","styles"],"mappings":";;;;;;;;GAqBaA,IAAQC,EAAyC,SAC5D,EAAE,IAAAC,GAAI,YAAAC,GAAY,MAAAC,IAAO,QAAQ,WAAAC,GAAW,WAAAC,GAAW,GAAGC,EAAA,GAC1DC,GACA;
|
|
1
|
+
{"version":3,"file":"Input.js","sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { clsx } from 'clsx';\n\nimport type { InputHTMLAttributes } from 'react';\n\nimport styles from './Input.module.css';\n\nexport interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'style'> {\n /** The appearance of the element. Possible values: `error`. */\n appearance?: 'error';\n /** The type of the input element. */\n type?: 'text' | 'search' | 'password' | 'email' | 'file';\n /** `true` if the element should render at full width of its container; otherwise, `false`. The default is `false`. */\n fullWidth?: boolean;\n /** The id of the element. */\n id: string;\n /** `true` if the element is used for numeric values; otherwise, `false`. The default is `false`. */\n isNumeric?: boolean;\n}\n\n/** Represents a component for an input element. */\nexport const Input = forwardRef<HTMLInputElement, InputProps>(function Input(\n { id, appearance, type = 'text', isNumeric, fullWidth, ...restProps }: InputProps,\n forwardedRef\n) {\n return (\n <input\n {...restProps}\n ref={forwardedRef}\n id={id}\n className={clsx(styles['input'], {\n [styles['input--error']]: appearance === 'error',\n [styles['input--full-with']]: fullWidth,\n [styles['input--numeric']]: isNumeric,\n })}\n type={type}\n />\n );\n});\n"],"names":["Input","forwardRef","id","appearance","type","isNumeric","fullWidth","restProps","forwardedRef","jsx","clsx","styles"],"mappings":";;;;;;;;GAqBaA,IAAQC,EAAyC,SAC5D,EAAE,IAAAC,GAAI,YAAAC,GAAY,MAAAC,IAAO,QAAQ,WAAAC,GAAW,WAAAC,GAAW,GAAGC,EAAA,GAC1DC,GACA;AACA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGF;AAAA,MACJ,KAAKC;AAAA,MACL,IAAAN;AAAA,MACA,WAAWQ,EAAKC,EAAO,OAAU;AAAA,QAC/B,CAACA,EAAO,cAAc,CAAC,GAAGR,MAAe;AAAA,QACzC,CAACQ,EAAO,kBAAkB,CAAC,GAAGL;AAAA,QAC9B,CAACK,EAAO,gBAAgB,CAAC,GAAGN;AAAA,MAAA,CAC7B;AAAA,MACD,MAAAD;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}
|
|
@@ -2,7 +2,7 @@ import { Meta } from '@storybook/react';
|
|
|
2
2
|
import { InputProps } from './Input';
|
|
3
3
|
declare const _default: Meta<InputProps>;
|
|
4
4
|
export default _default;
|
|
5
|
-
export declare const InputExample: import('
|
|
6
|
-
export declare const FullWidth: import('
|
|
7
|
-
export declare const Numeric: import('
|
|
8
|
-
export declare const WithErrorAppearance: import('
|
|
5
|
+
export declare const InputExample: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, InputProps>;
|
|
6
|
+
export declare const FullWidth: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, InputProps>;
|
|
7
|
+
export declare const Numeric: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, InputProps>;
|
|
8
|
+
export declare const WithErrorAppearance: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, InputProps>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.stories.js","sources":["../../../src/components/Input/Input.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { InputProps } from './Input';\n\nimport { Input } from './Input';\n\nconst codeString = `\n// Has all HTMLInputElement props available except \"className\" and \"style\" \n<Input id={id} type={type} aria-label={aria-label} onChange={onChangeFunction} value={value}/>\n`;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/Input',\n component: Input,\n argTypes: {\n appearance: {\n table: {\n disable: true,\n },\n },\n type: {\n control: 'inline-radio',\n },\n },\n args: {\n id: '30daa7c7',\n type: 'text',\n disabled: false,\n placeholder: '',\n },\n parameters: {\n inspectComponent: Input,\n codeString: codeString,\n },\n} as Meta<InputProps>;\n\nconst Template: StoryFn<InputProps> = (args) => {\n return <Input {...args} />;\n};\n\nexport const InputExample = Template.bind({});\nInputExample.args = {};\n\nexport const FullWidth = Template.bind({});\nFullWidth.args = {\n fullWidth: true,\n};\n\nexport const Numeric = Template.bind({});\nNumeric.args = {\n isNumeric: true,\n};\n\nexport const WithErrorAppearance = Template.bind({});\nWithErrorAppearance.args = {\n appearance: 'error',\n};\n"],"names":["codeString","Input_stories","Input","Template","args","jsx","InputExample","FullWidth","Numeric","WithErrorAppearance"],"mappings":";;AAKA,MAAMA,IAAa;AAAA;AAAA;AAAA,
|
|
1
|
+
{"version":3,"file":"Input.stories.js","sources":["../../../src/components/Input/Input.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { InputProps } from './Input';\n\nimport { Input } from './Input';\n\nconst codeString = `\n// Has all HTMLInputElement props available except \"className\" and \"style\" \n<Input id={id} type={type} aria-label={aria-label} onChange={onChangeFunction} value={value}/>\n`;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/Input',\n component: Input,\n argTypes: {\n appearance: {\n table: {\n disable: true,\n },\n },\n type: {\n control: 'inline-radio',\n },\n },\n args: {\n id: '30daa7c7',\n type: 'text',\n disabled: false,\n placeholder: '',\n },\n parameters: {\n inspectComponent: Input,\n codeString: codeString,\n },\n} as Meta<InputProps>;\n\nconst Template: StoryFn<InputProps> = (args) => {\n return <Input {...args} />;\n};\n\nexport const InputExample = Template.bind({});\nInputExample.args = {};\n\nexport const FullWidth = Template.bind({});\nFullWidth.args = {\n fullWidth: true,\n};\n\nexport const Numeric = Template.bind({});\nNumeric.args = {\n isNumeric: true,\n};\n\nexport const WithErrorAppearance = Template.bind({});\nWithErrorAppearance.args = {\n appearance: 'error',\n};\n"],"names":["codeString","Input_stories","Input","Template","args","jsx","InputExample","FullWidth","Numeric","WithErrorAppearance"],"mappings":";;AAKA,MAAMA,IAAa;AAAA;AAAA;AAAA,GAMnBC,IAAe;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,YAAY;AAAA,MACV,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,IAEF,MAAM;AAAA,MACJ,SAAS;AAAA,IAAA;AAAA,EACX;AAAA,EAEF,MAAM;AAAA,IACJ,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,UAAU;AAAA,IACV,aAAa;AAAA,EAAA;AAAA,EAEf,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAgC,CAACC,MAC9B,gBAAAC,EAACH,GAAA,EAAO,GAAGE,EAAA,CAAM,GAGbE,IAAeH,EAAS,KAAK,CAAA,CAAE;AAC5CG,EAAa,OAAO,CAAA;AAEb,MAAMC,IAAYJ,EAAS,KAAK,CAAA,CAAE;AACzCI,EAAU,OAAO;AAAA,EACf,WAAW;AACb;AAEO,MAAMC,IAAUL,EAAS,KAAK,CAAA,CAAE;AACvCK,EAAQ,OAAO;AAAA,EACb,WAAW;AACb;AAEO,MAAMC,IAAsBN,EAAS,KAAK,CAAA,CAAE;AACnDM,EAAoB,OAAO;AAAA,EACzB,YAAY;AACd;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputField.js","sources":["../../../src/components/InputField/InputField.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef, useState } from 'react';\nimport { clsx } from 'clsx';\n\nimport type { InputHTMLAttributes, ReactNode } from 'react';\n\nimport styles from './InputField.module.css';\n\nexport interface InputFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'style'> {\n /** The variant to render. */\n variant?: 'large';\n /** The width to render. */\n width?: 'small' | 'compact';\n /** The type of the input element. */\n type?: 'text' | 'password' | 'email';\n /** The background color of the input. InputField is by default transparent. */\n background?: 'white';\n /** The id of the input element. */\n id: string;\n /** An element that represents a clear button. */\n clearTrigger?: ReactNode;\n /** The callback that is invoked when the clear button is triggered. */\n onClear?: () => void;\n}\n\n/** Represents a component that renders an input field which can have a clear button. */\nexport const InputField = forwardRef<HTMLInputElement, InputFieldProps>(\n (\n {\n autoComplete = 'off',\n id,\n value,\n variant,\n width,\n type = 'text',\n background,\n clearTrigger,\n onClear,\n ...restProps\n }: InputFieldProps,\n forwardedRef\n ) => {\n const [clearButtonWidth, setClearButtonWidth] = useState<number>(0);\n const clearButtonRef = useRef<HTMLButtonElement>(null);\n\n useEffect(() => {\n if (clearButtonRef.current) {\n setClearButtonWidth(clearButtonRef.current.offsetWidth);\n }\n }, [value]);\n\n const handleClearTriggerClick = () => {\n if (onClear && forwardedRef && 'current' in forwardedRef && forwardedRef.current) {\n onClear();\n forwardedRef.current.focus();\n }\n };\n\n return (\n <div className={styles['input-field-wrapper']}>\n <input\n {...restProps}\n autoComplete={autoComplete}\n ref={forwardedRef}\n id={id}\n className={clsx(styles['input-field'], {\n [styles['input-field--large']]: variant === 'large',\n [styles[`input-field--${width}`]]: width,\n [styles[`input-field--${background}`]]: background,\n })}\n type={type}\n value={value}\n style={{ paddingRight: value && clearTrigger ? clearButtonWidth : undefined }}\n />\n {Boolean(value) && clearTrigger && (\n <button\n type=\"button\"\n className={styles['input-field__clear-button']}\n onClick={handleClearTriggerClick}\n ref={clearButtonRef}\n aria-label={`clear trigger for ${id}`}\n >\n {clearTrigger}\n </button>\n )}\n </div>\n );\n }\n);\n"],"names":["InputField","forwardRef","autoComplete","id","value","variant","width","type","background","clearTrigger","onClear","restProps","forwardedRef","clearButtonWidth","setClearButtonWidth","useState","clearButtonRef","useRef","useEffect","handleClearTriggerClick","jsxs","styles","jsx","clsx"],"mappings":";;;;;;;;;;;GAyBaA,IAAaC;AAAA,EACxB,CACE;AAAA,IACE,cAAAC,IAAe;AAAA,IACf,IAAAC;AAAA,IACA,OAAAC;AAAA,IACA,SAAAC;AAAA,IACA,OAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,YAAAC;AAAA,IACA,cAAAC;AAAA,IACA,SAAAC;AAAA,IACA,GAAGC;AAAA,
|
|
1
|
+
{"version":3,"file":"InputField.js","sources":["../../../src/components/InputField/InputField.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef, useState } from 'react';\nimport { clsx } from 'clsx';\n\nimport type { InputHTMLAttributes, ReactNode } from 'react';\n\nimport styles from './InputField.module.css';\n\nexport interface InputFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'style'> {\n /** The variant to render. */\n variant?: 'large';\n /** The width to render. */\n width?: 'small' | 'compact';\n /** The type of the input element. */\n type?: 'text' | 'password' | 'email';\n /** The background color of the input. InputField is by default transparent. */\n background?: 'white';\n /** The id of the input element. */\n id: string;\n /** An element that represents a clear button. */\n clearTrigger?: ReactNode;\n /** The callback that is invoked when the clear button is triggered. */\n onClear?: () => void;\n}\n\n/** Represents a component that renders an input field which can have a clear button. */\nexport const InputField = forwardRef<HTMLInputElement, InputFieldProps>(\n (\n {\n autoComplete = 'off',\n id,\n value,\n variant,\n width,\n type = 'text',\n background,\n clearTrigger,\n onClear,\n ...restProps\n }: InputFieldProps,\n forwardedRef\n ) => {\n const [clearButtonWidth, setClearButtonWidth] = useState<number>(0);\n const clearButtonRef = useRef<HTMLButtonElement>(null);\n\n useEffect(() => {\n if (clearButtonRef.current) {\n setClearButtonWidth(clearButtonRef.current.offsetWidth);\n }\n }, [value]);\n\n const handleClearTriggerClick = () => {\n if (onClear && forwardedRef && 'current' in forwardedRef && forwardedRef.current) {\n onClear();\n forwardedRef.current.focus();\n }\n };\n\n return (\n <div className={styles['input-field-wrapper']}>\n <input\n {...restProps}\n autoComplete={autoComplete}\n ref={forwardedRef}\n id={id}\n className={clsx(styles['input-field'], {\n [styles['input-field--large']]: variant === 'large',\n [styles[`input-field--${width}`]]: width,\n [styles[`input-field--${background}`]]: background,\n })}\n type={type}\n value={value}\n style={{ paddingRight: value && clearTrigger ? clearButtonWidth : undefined }}\n />\n {Boolean(value) && clearTrigger && (\n <button\n type=\"button\"\n className={styles['input-field__clear-button']}\n onClick={handleClearTriggerClick}\n ref={clearButtonRef}\n aria-label={`clear trigger for ${id}`}\n >\n {clearTrigger}\n </button>\n )}\n </div>\n );\n }\n);\n"],"names":["InputField","forwardRef","autoComplete","id","value","variant","width","type","background","clearTrigger","onClear","restProps","forwardedRef","clearButtonWidth","setClearButtonWidth","useState","clearButtonRef","useRef","useEffect","handleClearTriggerClick","jsxs","styles","jsx","clsx"],"mappings":";;;;;;;;;;;GAyBaA,IAAaC;AAAA,EACxB,CACE;AAAA,IACE,cAAAC,IAAe;AAAA,IACf,IAAAC;AAAA,IACA,OAAAC;AAAA,IACA,SAAAC;AAAA,IACA,OAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,YAAAC;AAAA,IACA,cAAAC;AAAA,IACA,SAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAM,CAACC,GAAkBC,CAAmB,IAAIC,EAAiB,CAAC,GAC5DC,IAAiBC,EAA0B,IAAI;AAErD,IAAAC,EAAU,MAAM;AACd,MAAIF,EAAe,WACjBF,EAAoBE,EAAe,QAAQ,WAAW;AAAA,IACxD,GACC,CAACZ,CAAK,CAAC;AAEV,UAAMe,IAA0B,MAAM;AACpC,MAAIT,KAAWE,KAAgB,aAAaA,KAAgBA,EAAa,YACvEF,EAAA,GACAE,EAAa,QAAQ,MAAA;AAAA,IACvB;AAGF,WACE,gBAAAQ,EAAC,OAAA,EAAI,WAAWC,EAAO,qBAAqB,GAC1C,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAGX;AAAA,UACJ,cAAAT;AAAA,UACA,KAAKU;AAAA,UACL,IAAAT;AAAA,UACA,WAAWoB,EAAKF,EAAO,aAAa,GAAG;AAAA,YACrC,CAACA,EAAO,oBAAoB,CAAC,GAAGhB,MAAY;AAAA,YAC5C,CAACgB,EAAO,gBAAgBf,CAAK,EAAE,CAAC,GAAGA;AAAA,YACnC,CAACe,EAAO,gBAAgBb,CAAU,EAAE,CAAC,GAAGA;AAAA,UAAA,CACzC;AAAA,UACD,MAAAD;AAAA,UACA,OAAAH;AAAA,UACA,OAAO,EAAE,cAAcA,KAASK,IAAeI,IAAmB,OAAA;AAAA,QAAU;AAAA,MAAA;AAAA,MAE7E,EAAQT,KAAUK,KACjB,gBAAAa;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAWD,EAAO,2BAA2B;AAAA,UAC7C,SAASF;AAAA,UACT,KAAKH;AAAA,UACL,cAAY,qBAAqBb,CAAE;AAAA,UAElC,UAAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,GAEJ;AAAA,EAAA;AAGN;"}
|
|
@@ -2,6 +2,6 @@ import { Meta } from '@storybook/react';
|
|
|
2
2
|
import { InputFieldProps } from './InputField';
|
|
3
3
|
declare const _default: Meta<InputFieldProps>;
|
|
4
4
|
export default _default;
|
|
5
|
-
export declare const InputFieldExample: import('
|
|
6
|
-
export declare const WithStringClearTrigger: import('
|
|
7
|
-
export declare const WithIconClearTrigger: import('
|
|
5
|
+
export declare const InputFieldExample: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, InputFieldProps>;
|
|
6
|
+
export declare const WithStringClearTrigger: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, InputFieldProps>;
|
|
7
|
+
export declare const WithIconClearTrigger: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, InputFieldProps>;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { jsx as
|
|
1
|
+
import { jsx as e } from "react/jsx-runtime";
|
|
2
2
|
import { useState as d, useRef as g } from "react";
|
|
3
|
-
import {
|
|
4
|
-
import { InputField as
|
|
3
|
+
import { W as l } from "../../index-Di9WPZUe.js";
|
|
4
|
+
import { InputField as o } from "./InputField.js";
|
|
5
5
|
import { Container as u } from "../../storyComponents/Container/Container.js";
|
|
6
6
|
import { Icon as h } from "../Icon/Icon.js";
|
|
7
7
|
import "../Buttons/Button.js";
|
|
@@ -25,16 +25,16 @@ import "../SelectListbox/SelectListbox.js";
|
|
|
25
25
|
import "../SelectListbox/SelectProvider.js";
|
|
26
26
|
import "../Sortable/components/SortableItem.js";
|
|
27
27
|
import "../../SortableProvider-CwX1lFMa.js";
|
|
28
|
-
const
|
|
28
|
+
const C = `
|
|
29
29
|
// Has all HTMLInputElement props available except "className" and "style"
|
|
30
30
|
<InputField aria-labelledby={aria-labelledby} id={id} onChange={onChangeFunction}
|
|
31
31
|
value={value} type={type} clearTrigger={clearTrigger} />
|
|
32
|
-
`,
|
|
32
|
+
`, f = (t) => {
|
|
33
33
|
const r = t.variant ?? [];
|
|
34
34
|
return { ...t, variant: r.toString() };
|
|
35
35
|
}, Q = {
|
|
36
36
|
title: "Atoms/InputField",
|
|
37
|
-
component:
|
|
37
|
+
component: o,
|
|
38
38
|
argTypes: {
|
|
39
39
|
variant: {
|
|
40
40
|
options: ["large"],
|
|
@@ -62,8 +62,8 @@ const f = `
|
|
|
62
62
|
}
|
|
63
63
|
},
|
|
64
64
|
parameters: {
|
|
65
|
-
inspectComponent:
|
|
66
|
-
codeString:
|
|
65
|
+
inspectComponent: o,
|
|
66
|
+
codeString: C
|
|
67
67
|
}
|
|
68
68
|
}, a = (t) => {
|
|
69
69
|
const [r, n] = d(""), p = g(null), m = (c) => {
|
|
@@ -71,10 +71,10 @@ const f = `
|
|
|
71
71
|
}, s = () => {
|
|
72
72
|
n(""), l()("handleClear");
|
|
73
73
|
};
|
|
74
|
-
return /* @__PURE__ */
|
|
75
|
-
|
|
74
|
+
return /* @__PURE__ */ e(u, { children: /* @__PURE__ */ e(
|
|
75
|
+
o,
|
|
76
76
|
{
|
|
77
|
-
...
|
|
77
|
+
...f(t),
|
|
78
78
|
value: r,
|
|
79
79
|
onChange: m,
|
|
80
80
|
onClear: s,
|
|
@@ -97,7 +97,7 @@ b.args = {
|
|
|
97
97
|
const y = a.bind({});
|
|
98
98
|
y.args = {
|
|
99
99
|
...i,
|
|
100
|
-
clearTrigger: /* @__PURE__ */
|
|
100
|
+
clearTrigger: /* @__PURE__ */ e(h, { name: "Cross" })
|
|
101
101
|
};
|
|
102
102
|
export {
|
|
103
103
|
v as InputFieldExample,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputField.stories.js","sources":["../../../src/components/InputField/InputField.stories.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { fn } from '
|
|
1
|
+
{"version":3,"file":"InputField.stories.js","sources":["../../../src/components/InputField/InputField.stories.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { fn } from 'storybook/test';\n\nimport type { ChangeEvent } from 'react';\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { InputFieldProps } from './InputField';\n\nimport { InputField } from './InputField';\n\nimport { Container } from 'storyComponents/Container';\nimport { Icon } from 'components';\n\nconst codeString = `\n// Has all HTMLInputElement props available except \"className\" and \"style\" \n<InputField aria-labelledby={aria-labelledby} id={id} onChange={onChangeFunction}\n value={value} type={type} clearTrigger={clearTrigger} />\n`;\n\nconst transformArgs = (args: InputFieldProps) => {\n // args.variant is provided as an array because the control type is set to a checkbox. So this transforms the selected value into its proper value: a string\n const variantArray = (args.variant as unknown as string[]) ?? [];\n return { ...args, ...{ variant: variantArray.toString() } } as InputFieldProps;\n};\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/InputField',\n component: InputField,\n argTypes: {\n variant: {\n options: ['large'],\n control: 'check',\n },\n width: {\n control: 'radio',\n options: [undefined, 'small', 'compact'],\n },\n type: {\n control: 'radio',\n options: ['text', 'password', 'email'],\n },\n background: {\n control: 'check',\n options: ['white'],\n },\n id: {\n control: 'text',\n },\n autoComplete: {\n table: {\n disable: true,\n },\n },\n },\n parameters: {\n inspectComponent: InputField,\n codeString: codeString,\n },\n} as Meta<InputFieldProps>;\n\nconst Template: StoryFn<InputFieldProps> = (args) => {\n const [inputValue, setInputValue] = useState<InputFieldProps['value']>('');\n const inputRef = useRef<HTMLInputElement>(null);\n\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n setInputValue(event.target.value);\n fn()('handleChange');\n };\n\n const handleClear = () => {\n setInputValue('');\n fn()('handleClear');\n };\n\n return (\n <Container>\n <InputField\n {...transformArgs(args)}\n value={inputValue}\n onChange={handleChange}\n onClear={handleClear}\n ref={inputRef}\n />\n </Container>\n );\n};\n\nconst defaultArgs: Partial<InputFieldProps> = {\n type: 'text',\n variant: undefined,\n id: '4f9ca77d',\n};\n\nexport const InputFieldExample = Template.bind({});\nInputFieldExample.args = {\n ...defaultArgs,\n};\n\nexport const WithStringClearTrigger = Template.bind({});\nWithStringClearTrigger.args = {\n ...defaultArgs,\n clearTrigger: 'Clear',\n};\n\nexport const WithIconClearTrigger = Template.bind({});\nWithIconClearTrigger.args = {\n ...defaultArgs,\n clearTrigger: <Icon name=\"Cross\" />,\n};\n"],"names":["codeString","transformArgs","args","variantArray","InputField_stories","InputField","Template","inputValue","setInputValue","useState","inputRef","useRef","handleChange","event","fn","handleClear","Container","jsx","defaultArgs","InputFieldExample","WithStringClearTrigger","WithIconClearTrigger","Icon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA,MAAMA,IAAa;AAAA;AAAA;AAAA;AAAA,GAMbC,IAAgB,CAACC,MAA0B;AAE/C,QAAMC,IAAgBD,EAAK,WAAmC,CAAA;AAC9D,SAAO,EAAE,GAAGA,GAAW,SAASC,EAAa,SAAA,EAAW;AAC1D,GAGAC,IAAe;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS,CAAC,OAAO;AAAA,MACjB,SAAS;AAAA,IAAA;AAAA,IAEX,OAAO;AAAA,MACL,SAAS;AAAA,MACT,SAAS,CAAC,QAAW,SAAS,SAAS;AAAA,IAAA;AAAA,IAEzC,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,SAAS,CAAC,QAAQ,YAAY,OAAO;AAAA,IAAA;AAAA,IAEvC,YAAY;AAAA,MACV,SAAS;AAAA,MACT,SAAS,CAAC,OAAO;AAAA,IAAA;AAAA,IAEnB,IAAI;AAAA,MACF,SAAS;AAAA,IAAA;AAAA,IAEX,cAAc;AAAA,MACZ,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EACF;AAAA,EAEF,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAL;AAAA,EAAA;AAEJ,GAEMM,IAAqC,CAACJ,MAAS;AACnD,QAAM,CAACK,GAAYC,CAAa,IAAIC,EAAmC,EAAE,GACnEC,IAAWC,EAAyB,IAAI,GAExCC,IAAe,CAACC,MAAyC;AAC7D,IAAAL,EAAcK,EAAM,OAAO,KAAK,GAChCC,EAAA,EAAK,cAAc;AAAA,EAAA,GAGfC,IAAc,MAAM;AACxB,IAAAP,EAAc,EAAE,GAChBM,EAAA,EAAK,aAAa;AAAA,EAAA;AAGpB,2BACGE,GAAA,EACC,UAAA,gBAAAC;AAAA,IAACZ;AAAA,IAAA;AAAA,MACE,GAAGJ,EAAcC,CAAI;AAAA,MACtB,OAAOK;AAAA,MACP,UAAUK;AAAA,MACV,SAASG;AAAA,MACT,KAAKL;AAAA,IAAA;AAAA,EAAA,GAET;AAEJ,GAEMQ,IAAwC;AAAA,EAC5C,MAAM;AAAA,EACN,SAAS;AAAA,EACT,IAAI;AACN,GAEaC,IAAoBb,EAAS,KAAK,CAAA,CAAE;AACjDa,EAAkB,OAAO;AAAA,EACvB,GAAGD;AACL;AAEO,MAAME,IAAyBd,EAAS,KAAK,CAAA,CAAE;AACtDc,EAAuB,OAAO;AAAA,EAC5B,GAAGF;AAAA,EACH,cAAc;AAChB;AAEO,MAAMG,IAAuBf,EAAS,KAAK,CAAA,CAAE;AACpDe,EAAqB,OAAO;AAAA,EAC1B,GAAGH;AAAA,EACH,cAAc,gBAAAD,EAACK,GAAA,EAAK,MAAK,QAAA,CAAQ;AACnC;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Label.js","sources":["../../../src/components/Label/Label.tsx"],"sourcesContent":["import clsx from 'clsx';\n\nimport type { LabelHTMLAttributes } from 'react';\n\nimport styles from './Label.module.css';\n\nexport interface LabelProps extends Omit<LabelHTMLAttributes<HTMLLabelElement>, 'className' | 'style'> {\n /** The id of the element for which the label is intended. */\n htmlFor: string;\n /** `true` if the font-weight needs to be unset; otherwise, `false`. The default is `false`. */\n noFontWeight?: boolean;\n /** `true` to show an asterisk to indicate an item is required; otherwise, `false`. */\n required?: boolean;\n /** `true` to align text right; otherwise, `false`. */\n alignRight?: boolean;\n}\n\n/** Represents a component that renders a label for an input element. */\nexport const Label = ({ children, htmlFor, noFontWeight, required = false, alignRight, ...restProps }: LabelProps) => (\n <label\n {...restProps}\n htmlFor={htmlFor}\n className={clsx(styles['label'], {\n [styles['label--unset-font-weight']]: noFontWeight,\n [styles['label--required']]: required,\n [styles['label--align-right']]: alignRight,\n })}\n >\n {children}\n </label>\n);\n"],"names":["Label","children","htmlFor","noFontWeight","required","alignRight","restProps","jsx","clsx","styles"],"mappings":";;;;;;;GAkBaA,IAAQ,CAAC,EAAE,UAAAC,GAAU,SAAAC,GAAS,cAAAC,GAAc,UAAAC,IAAW,IAAO,YAAAC,GAAY,GAAGC,EAAA,MACxF,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACE,GAAGD;AAAA,IACJ,SAAAJ;AAAA,IACA,WAAWM,EAAKC,EAAO,OAAU;AAAA,MAC/B,CAACA,EAAO,0BAA0B,CAAC,GAAGN;AAAA,MACtC,CAACM,EAAO,iBAAiB,CAAC,GAAGL;AAAA,MAC7B,CAACK,EAAO,oBAAoB,CAAC,GAAGJ;AAAA,IAAA,CACjC;AAAA,IAEA,UAAAJ;AAAA,EAAA;AACH;"}
|
|
1
|
+
{"version":3,"file":"Label.js","sources":["../../../src/components/Label/Label.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport type { LabelHTMLAttributes } from 'react';\n\nimport styles from './Label.module.css';\n\nexport interface LabelProps extends Omit<LabelHTMLAttributes<HTMLLabelElement>, 'className' | 'style'> {\n /** The id of the element for which the label is intended. */\n htmlFor: string;\n /** `true` if the font-weight needs to be unset; otherwise, `false`. The default is `false`. */\n noFontWeight?: boolean;\n /** `true` to show an asterisk to indicate an item is required; otherwise, `false`. */\n required?: boolean;\n /** `true` to align text right; otherwise, `false`. */\n alignRight?: boolean;\n}\n\n/** Represents a component that renders a label for an input element. */\nexport const Label = ({ children, htmlFor, noFontWeight, required = false, alignRight, ...restProps }: LabelProps) => (\n <label\n {...restProps}\n htmlFor={htmlFor}\n className={clsx(styles['label'], {\n [styles['label--unset-font-weight']]: noFontWeight,\n [styles['label--required']]: required,\n [styles['label--align-right']]: alignRight,\n })}\n >\n {children}\n </label>\n);\n"],"names":["Label","children","htmlFor","noFontWeight","required","alignRight","restProps","jsx","clsx","styles"],"mappings":";;;;;;;GAkBaA,IAAQ,CAAC,EAAE,UAAAC,GAAU,SAAAC,GAAS,cAAAC,GAAc,UAAAC,IAAW,IAAO,YAAAC,GAAY,GAAGC,EAAA,MACxF,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACE,GAAGD;AAAA,IACJ,SAAAJ;AAAA,IACA,WAAWM,EAAKC,EAAO,OAAU;AAAA,MAC/B,CAACA,EAAO,0BAA0B,CAAC,GAAGN;AAAA,MACtC,CAACM,EAAO,iBAAiB,CAAC,GAAGL;AAAA,MAC7B,CAACK,EAAO,oBAAoB,CAAC,GAAGJ;AAAA,IAAA,CACjC;AAAA,IAEA,UAAAJ;AAAA,EAAA;AACH;"}
|
|
@@ -2,5 +2,5 @@ import { Meta } from '@storybook/react';
|
|
|
2
2
|
import { LabelProps } from './Label';
|
|
3
3
|
declare const _default: Meta<LabelProps>;
|
|
4
4
|
export default _default;
|
|
5
|
-
export declare const LabelExample: import('
|
|
6
|
-
export declare const WithNoFontWeight: import('
|
|
5
|
+
export declare const LabelExample: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, LabelProps>;
|
|
6
|
+
export declare const WithNoFontWeight: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, LabelProps>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Label.stories.js","sources":["../../../src/components/Label/Label.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { LabelProps } from './Label';\n\nimport { Label } from './Label';\n\nconst codeString = `\n// Has all LabelHTMLAttributes props available except \"className\" and \"style\" \n <Label htmlFor={htmlFor}>{children}</Label>\n`;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/Label',\n component: Label,\n argTypes: {\n htmlFor: {\n control: 'text',\n },\n children: {\n control: 'text',\n },\n },\n parameters: {\n inspectComponent: Label,\n codeString: codeString,\n },\n} as Meta<LabelProps>;\n\nconst Template: StoryFn<LabelProps> = (args) => <Label {...args} />;\n\nconst defaultArgs: Partial<LabelProps> = {\n children: 'Lorem Ipsum',\n htmlFor: 'bd79f7ec',\n};\n\nexport const LabelExample = Template.bind({});\nLabelExample.args = {\n ...defaultArgs,\n};\n\nexport const WithNoFontWeight = Template.bind({});\nWithNoFontWeight.args = {\n ...defaultArgs,\n noFontWeight: true,\n};\n"],"names":["codeString","Label_stories","Label","Template","args","jsx","defaultArgs","LabelExample","WithNoFontWeight"],"mappings":";;AAKA,MAAMA,IAAa;AAAA;AAAA;AAAA,
|
|
1
|
+
{"version":3,"file":"Label.stories.js","sources":["../../../src/components/Label/Label.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { LabelProps } from './Label';\n\nimport { Label } from './Label';\n\nconst codeString = `\n// Has all LabelHTMLAttributes props available except \"className\" and \"style\" \n <Label htmlFor={htmlFor}>{children}</Label>\n`;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/Label',\n component: Label,\n argTypes: {\n htmlFor: {\n control: 'text',\n },\n children: {\n control: 'text',\n },\n },\n parameters: {\n inspectComponent: Label,\n codeString: codeString,\n },\n} as Meta<LabelProps>;\n\nconst Template: StoryFn<LabelProps> = (args) => <Label {...args} />;\n\nconst defaultArgs: Partial<LabelProps> = {\n children: 'Lorem Ipsum',\n htmlFor: 'bd79f7ec',\n};\n\nexport const LabelExample = Template.bind({});\nLabelExample.args = {\n ...defaultArgs,\n};\n\nexport const WithNoFontWeight = Template.bind({});\nWithNoFontWeight.args = {\n ...defaultArgs,\n noFontWeight: true,\n};\n"],"names":["codeString","Label_stories","Label","Template","args","jsx","defaultArgs","LabelExample","WithNoFontWeight"],"mappings":";;AAKA,MAAMA,IAAa;AAAA;AAAA;AAAA,GAMnBC,IAAe;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,IAAA;AAAA,IAEX,UAAU;AAAA,MACR,SAAS;AAAA,IAAA;AAAA,EACX;AAAA,EAEF,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAgC,CAACC,MAAS,gBAAAC,EAACH,GAAA,EAAO,GAAGE,GAAM,GAE3DE,IAAmC;AAAA,EACvC,UAAU;AAAA,EACV,SAAS;AACX,GAEaC,IAAeJ,EAAS,KAAK,CAAA,CAAE;AAC5CI,EAAa,OAAO;AAAA,EAClB,GAAGD;AACL;AAEO,MAAME,IAAmBL,EAAS,KAAK,CAAA,CAAE;AAChDK,EAAiB,OAAO;AAAA,EACtB,GAAGF;AAAA,EACH,cAAc;AAChB;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as e } from "react/jsx-runtime";
|
|
2
|
-
import "../../index-
|
|
3
|
-
import { r as t, s as l } from "../../react.esm-
|
|
2
|
+
import "../../index-DV47hRzi.js";
|
|
3
|
+
import { r as t, s as l } from "../../react.esm-CFMwGdo5.js";
|
|
4
4
|
import { Label as r } from "./Label.js";
|
|
5
5
|
describe("Label", () => {
|
|
6
6
|
it("should render", () => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Label.test.js","sources":["../../../src/components/Label/Label.test.tsx"],"sourcesContent":["import '@testing-library/jest-dom';\nimport { render, screen } from '@testing-library/react';\n\nimport { Label } from './Label';\n\ndescribe('Label', () => {\n it('should render', () => {\n render(<Label htmlFor=\"testComponent\">Test label</Label>);\n expect(screen.getByText('Test label')).toBeInTheDocument();\n });\n\n it('should render with required', () => {\n render(\n <Label htmlFor=\"testComponent\" required={true}>\n Test label\n </Label>\n );\n expect(screen.getByText('Test label')).toHaveClass('label--required');\n });\n\n it('should render with noFontWeight', () => {\n render(\n <Label htmlFor=\"testComponent\" noFontWeight={true}>\n Test label\n </Label>\n );\n expect(screen.getByText('Test label')).toHaveClass('label--unset-font-weight');\n });\n\n it('should render with alignRight', () => {\n render(\n <Label htmlFor=\"testComponent\" alignRight={true}>\n Test label\n </Label>\n );\n expect(screen.getByText('Test label')).toHaveClass('label--align-right');\n });\n});\n"],"names":["render","jsx","Label","screen"],"mappings":";;;;AAKA,SAAS,SAAS,MAAM;AACtB,KAAG,iBAAiB,MAAM;AACxB,IAAAA,
|
|
1
|
+
{"version":3,"file":"Label.test.js","sources":["../../../src/components/Label/Label.test.tsx"],"sourcesContent":["import '@testing-library/jest-dom';\nimport { render, screen } from '@testing-library/react';\n\nimport { Label } from './Label';\n\ndescribe('Label', () => {\n it('should render', () => {\n render(<Label htmlFor=\"testComponent\">Test label</Label>);\n expect(screen.getByText('Test label')).toBeInTheDocument();\n });\n\n it('should render with required', () => {\n render(\n <Label htmlFor=\"testComponent\" required={true}>\n Test label\n </Label>\n );\n expect(screen.getByText('Test label')).toHaveClass('label--required');\n });\n\n it('should render with noFontWeight', () => {\n render(\n <Label htmlFor=\"testComponent\" noFontWeight={true}>\n Test label\n </Label>\n );\n expect(screen.getByText('Test label')).toHaveClass('label--unset-font-weight');\n });\n\n it('should render with alignRight', () => {\n render(\n <Label htmlFor=\"testComponent\" alignRight={true}>\n Test label\n </Label>\n );\n expect(screen.getByText('Test label')).toHaveClass('label--align-right');\n });\n});\n"],"names":["render","jsx","Label","screen"],"mappings":";;;;AAKA,SAAS,SAAS,MAAM;AACtB,KAAG,iBAAiB,MAAM;AACxB,IAAAA,EAAO,gBAAAC,EAACC,GAAA,EAAM,SAAQ,iBAAgB,wBAAU,CAAQ,GACxD,OAAOC,EAAO,UAAU,YAAY,CAAC,EAAE,kBAAA;AAAA,EAAkB,CAC1D,GAED,GAAG,+BAA+B,MAAM;AACtC,IAAAH;AAAA,wBACGE,GAAA,EAAM,SAAQ,iBAAgB,UAAU,IAAM,UAAA,aAAA,CAE/C;AAAA,IAAA,GAEF,OAAOC,EAAO,UAAU,YAAY,CAAC,EAAE,YAAY,iBAAiB;AAAA,EAAA,CACrE,GAED,GAAG,mCAAmC,MAAM;AAC1C,IAAAH;AAAA,wBACGE,GAAA,EAAM,SAAQ,iBAAgB,cAAc,IAAM,UAAA,aAAA,CAEnD;AAAA,IAAA,GAEF,OAAOC,EAAO,UAAU,YAAY,CAAC,EAAE,YAAY,0BAA0B;AAAA,EAAA,CAC9E,GAED,GAAG,iCAAiC,MAAM;AACxC,IAAAH;AAAA,wBACGE,GAAA,EAAM,SAAQ,iBAAgB,YAAY,IAAM,UAAA,aAAA,CAEjD;AAAA,IAAA,GAEF,OAAOC,EAAO,UAAU,YAAY,CAAC,EAAE,YAAY,oBAAoB;AAAA,EAAA,CACxE;AACH,CAAC;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuLink.js","sources":["../../../src/components/MenuLink/MenuLink.tsx"],"sourcesContent":["import classNames from 'clsx';\nimport { NavLink, useLocation } from 'react-router';\n\nimport type { NavLinkProps } from 'react-router';\n\nimport styles from './MenuLink.module.css';\n\n/** Represents a component for a [NavLink](https://reactrouter.com/en/main/components/nav-link) with styling. */\n// Omit style so it cannot be accidentally used\nexport interface MenuLinkProps extends Omit<NavLinkProps, 'style'> {\n overrideDefault?: boolean;\n}\n\nexport const MenuLink = ({ overrideDefault, ...props }: MenuLinkProps) => {\n const location = useLocation();\n\n // Helper function to remove trailing 's' from a string\n const singularize = (str: string) => str.replace(/s$/, '');\n\n // Check if 'to' path (singular version) matches any segment (singular version)\n const isActiveSingular = (to: string) => {\n const currentSegments = location.pathname.split('/').filter(Boolean);\n const latestToPath = to.split('/').filter(Boolean).slice(-1)[0]; // return only lates path removing any prepend path\n const singularizedToPath = singularize(latestToPath);\n\n return currentSegments.some((segment) => singularize(segment) === singularizedToPath);\n };\n\n return (\n <NavLink\n {...props}\n className={({ isActive }) =>\n classNames(styles['menu-link'], {\n [styles['menu-link--active']]: overrideDefault ? '' : isActive || isActiveSingular(props.to as string),\n })\n }\n />\n );\n};\n"],"names":["MenuLink","overrideDefault","props","location","useLocation","singularize","str","isActiveSingular","to","currentSegments","latestToPath","singularizedToPath","segment","jsx","NavLink","isActive","classNames","styles"],"mappings":";;;;;;GAaaA,IAAW,CAAC,EAAE,iBAAAC,GAAiB,GAAGC,QAA2B;AACxE,QAAMC,IAAWC,
|
|
1
|
+
{"version":3,"file":"MenuLink.js","sources":["../../../src/components/MenuLink/MenuLink.tsx"],"sourcesContent":["import classNames from 'clsx';\nimport { NavLink, useLocation } from 'react-router';\n\nimport type { NavLinkProps } from 'react-router';\n\nimport styles from './MenuLink.module.css';\n\n/** Represents a component for a [NavLink](https://reactrouter.com/en/main/components/nav-link) with styling. */\n// Omit style so it cannot be accidentally used\nexport interface MenuLinkProps extends Omit<NavLinkProps, 'style'> {\n overrideDefault?: boolean;\n}\n\nexport const MenuLink = ({ overrideDefault, ...props }: MenuLinkProps) => {\n const location = useLocation();\n\n // Helper function to remove trailing 's' from a string\n const singularize = (str: string) => str.replace(/s$/, '');\n\n // Check if 'to' path (singular version) matches any segment (singular version)\n const isActiveSingular = (to: string) => {\n const currentSegments = location.pathname.split('/').filter(Boolean);\n const latestToPath = to.split('/').filter(Boolean).slice(-1)[0]; // return only lates path removing any prepend path\n const singularizedToPath = singularize(latestToPath);\n\n return currentSegments.some((segment) => singularize(segment) === singularizedToPath);\n };\n\n return (\n <NavLink\n {...props}\n className={({ isActive }) =>\n classNames(styles['menu-link'], {\n [styles['menu-link--active']]: overrideDefault ? '' : isActive || isActiveSingular(props.to as string),\n })\n }\n />\n );\n};\n"],"names":["MenuLink","overrideDefault","props","location","useLocation","singularize","str","isActiveSingular","to","currentSegments","latestToPath","singularizedToPath","segment","jsx","NavLink","isActive","classNames","styles"],"mappings":";;;;;;GAaaA,IAAW,CAAC,EAAE,iBAAAC,GAAiB,GAAGC,QAA2B;AACxE,QAAMC,IAAWC,EAAA,GAGXC,IAAc,CAACC,MAAgBA,EAAI,QAAQ,MAAM,EAAE,GAGnDC,IAAmB,CAACC,MAAe;AACvC,UAAMC,IAAkBN,EAAS,SAAS,MAAM,GAAG,EAAE,OAAO,OAAO,GAC7DO,IAAeF,EAAG,MAAM,GAAG,EAAE,OAAO,OAAO,EAAE,MAAM,EAAE,EAAE,CAAC,GACxDG,IAAqBN,EAAYK,CAAY;AAEnD,WAAOD,EAAgB,KAAK,CAACG,MAAYP,EAAYO,CAAO,MAAMD,CAAkB;AAAA,EAAA;AAGtF,SACE,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACE,GAAGZ;AAAA,MACJ,WAAW,CAAC,EAAE,UAAAa,EAAA,MACZC,EAAWC,EAAO,WAAW,GAAG;AAAA,QAC9B,CAACA,EAAO,mBAAmB,CAAC,GAAGhB,IAAkB,KAAKc,KAAYR,EAAiBL,EAAM,EAAY;AAAA,MAAA,CACtG;AAAA,IAAA;AAAA,EAAA;AAIT;"}
|
|
@@ -3,5 +3,5 @@ import { Meta } from '@storybook/react';
|
|
|
3
3
|
import { MenuLinkProps } from './MenuLink';
|
|
4
4
|
declare const _default: Meta<Omit<NavLinkProps, "style">>;
|
|
5
5
|
export default _default;
|
|
6
|
-
export declare const MenuLinkExample: import('
|
|
7
|
-
export declare const MenuLinkOverrideDefaultBehavior: import('
|
|
6
|
+
export declare const MenuLinkExample: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, Omit<MenuLinkProps, "style">>;
|
|
7
|
+
export declare const MenuLinkOverrideDefaultBehavior: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, Omit<MenuLinkProps, "style">>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuLink.stories.js","sources":["../../../src/components/MenuLink/MenuLink.stories.tsx"],"sourcesContent":["import { MemoryRouter, type NavLinkProps } from 'react-router';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { MenuLinkProps } from './MenuLink';\n\nimport { MenuLink } from './MenuLink';\n\nimport './MenuLink.stories.css';\n\nconst codeString = `\n// Can only be used wrapped in a 'react-router' <MemoryRouter />\n <MenuLink to={linkUrl}>{children}</MenuLink>\n`;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/MenuLink',\n component: MenuLink,\n parameters: {\n inspectComponent: MenuLink,\n codeString: codeString,\n },\n} as Meta<Omit<NavLinkProps, 'style'>>;\n\nconst menuLinks = [\n { to: '/menu-link-1', title: 'Menu Link One' },\n { to: '/menu-link-2', title: 'Menu Link Two' },\n { to: '/menu-link-3', title: 'Menu Link Three' },\n];\n\nconst Template: StoryFn<Omit<MenuLinkProps, 'style'>> = () => {\n return (\n <MemoryRouter initialEntries={menuLinks.map((link) => link.to)} initialIndex={0}>\n <nav className=\"navbar\">\n {menuLinks.map((link) => (\n <MenuLink key={link.to} to={link.to}>\n {link.title}\n </MenuLink>\n ))}\n </nav>\n </MemoryRouter>\n );\n};\n\nexport const MenuLinkExample = Template.bind({});\n\nconst menuLinks02 = [\n { to: '/menu-link-1', title: 'Menu Link One (no default behavior)', overrideDefaultBehavior: true },\n { to: '/menu-link-2', title: 'Menu Link Two', overrideDefaultBehavior: false },\n { to: '/menu-link-3', title: 'Menu Link Three', overrideDefaultBehavior: false },\n];\n\nconst TemplateMenuLinkOverrideDefaultBehavior: StoryFn<Omit<MenuLinkProps, 'style'>> = () => {\n return (\n <MemoryRouter initialEntries={menuLinks02.map((link) => link.to)} initialIndex={0}>\n <nav className=\"navbar\">\n {menuLinks02.map((link) => (\n <MenuLink key={link.to} to={link.to} overrideDefault={link.overrideDefaultBehavior}>\n {link.title}\n </MenuLink>\n ))}\n </nav>\n </MemoryRouter>\n );\n};\n\nexport const MenuLinkOverrideDefaultBehavior = TemplateMenuLinkOverrideDefaultBehavior.bind({});\n"],"names":["codeString","MenuLink_stories","MenuLink","menuLinks","Template","jsx","MemoryRouter","link","MenuLinkExample","menuLinks02","TemplateMenuLinkOverrideDefaultBehavior","MenuLinkOverrideDefaultBehavior"],"mappings":";;;AASA,MAAMA,IAAa;AAAA;AAAA;AAAA,
|
|
1
|
+
{"version":3,"file":"MenuLink.stories.js","sources":["../../../src/components/MenuLink/MenuLink.stories.tsx"],"sourcesContent":["import { MemoryRouter, type NavLinkProps } from 'react-router';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { MenuLinkProps } from './MenuLink';\n\nimport { MenuLink } from './MenuLink';\n\nimport './MenuLink.stories.css';\n\nconst codeString = `\n// Can only be used wrapped in a 'react-router' <MemoryRouter />\n <MenuLink to={linkUrl}>{children}</MenuLink>\n`;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/MenuLink',\n component: MenuLink,\n parameters: {\n inspectComponent: MenuLink,\n codeString: codeString,\n },\n} as Meta<Omit<NavLinkProps, 'style'>>;\n\nconst menuLinks = [\n { to: '/menu-link-1', title: 'Menu Link One' },\n { to: '/menu-link-2', title: 'Menu Link Two' },\n { to: '/menu-link-3', title: 'Menu Link Three' },\n];\n\nconst Template: StoryFn<Omit<MenuLinkProps, 'style'>> = () => {\n return (\n <MemoryRouter initialEntries={menuLinks.map((link) => link.to)} initialIndex={0}>\n <nav className=\"navbar\">\n {menuLinks.map((link) => (\n <MenuLink key={link.to} to={link.to}>\n {link.title}\n </MenuLink>\n ))}\n </nav>\n </MemoryRouter>\n );\n};\n\nexport const MenuLinkExample = Template.bind({});\n\nconst menuLinks02 = [\n { to: '/menu-link-1', title: 'Menu Link One (no default behavior)', overrideDefaultBehavior: true },\n { to: '/menu-link-2', title: 'Menu Link Two', overrideDefaultBehavior: false },\n { to: '/menu-link-3', title: 'Menu Link Three', overrideDefaultBehavior: false },\n];\n\nconst TemplateMenuLinkOverrideDefaultBehavior: StoryFn<Omit<MenuLinkProps, 'style'>> = () => {\n return (\n <MemoryRouter initialEntries={menuLinks02.map((link) => link.to)} initialIndex={0}>\n <nav className=\"navbar\">\n {menuLinks02.map((link) => (\n <MenuLink key={link.to} to={link.to} overrideDefault={link.overrideDefaultBehavior}>\n {link.title}\n </MenuLink>\n ))}\n </nav>\n </MemoryRouter>\n );\n};\n\nexport const MenuLinkOverrideDefaultBehavior = TemplateMenuLinkOverrideDefaultBehavior.bind({});\n"],"names":["codeString","MenuLink_stories","MenuLink","menuLinks","Template","jsx","MemoryRouter","link","MenuLinkExample","menuLinks02","TemplateMenuLinkOverrideDefaultBehavior","MenuLinkOverrideDefaultBehavior"],"mappings":";;;AASA,MAAMA,IAAa;AAAA;AAAA;AAAA,GAMnBC,IAAe;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAY;AAAA,EAChB,EAAE,IAAI,gBAAgB,OAAO,gBAAA;AAAA,EAC7B,EAAE,IAAI,gBAAgB,OAAO,gBAAA;AAAA,EAC7B,EAAE,IAAI,gBAAgB,OAAO,kBAAA;AAC/B,GAEMC,IAAkD,MAEpD,gBAAAC,EAACC,GAAA,EAAa,gBAAgBH,EAAU,IAAI,CAACI,MAASA,EAAK,EAAE,GAAG,cAAc,GAC5E,4BAAC,OAAA,EAAI,WAAU,UACZ,UAAAJ,EAAU,IAAI,CAACI,MACd,gBAAAF,EAACH,KAAuB,IAAIK,EAAK,IAC9B,UAAAA,EAAK,MAAA,GADOA,EAAK,EAEpB,CACD,GACH,GACF,GAISC,IAAkBJ,EAAS,KAAK,CAAA,CAAE,GAEzCK,IAAc;AAAA,EAClB,EAAE,IAAI,gBAAgB,OAAO,uCAAuC,yBAAyB,GAAA;AAAA,EAC7F,EAAE,IAAI,gBAAgB,OAAO,iBAAiB,yBAAyB,GAAA;AAAA,EACvE,EAAE,IAAI,gBAAgB,OAAO,mBAAmB,yBAAyB,GAAA;AAC3E,GAEMC,IAAiF,MAEnF,gBAAAL,EAACC,GAAA,EAAa,gBAAgBG,EAAY,IAAI,CAACF,MAASA,EAAK,EAAE,GAAG,cAAc,GAC9E,UAAA,gBAAAF,EAAC,OAAA,EAAI,WAAU,UACZ,UAAAI,EAAY,IAAI,CAACF,MAChB,gBAAAF,EAACH,GAAA,EAAuB,IAAIK,EAAK,IAAI,iBAAiBA,EAAK,yBACxD,YAAK,MAAA,GADOA,EAAK,EAEpB,CACD,GACH,GACF,GAISI,IAAkCD,EAAwC,KAAK,CAAA,CAAE;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MetaDataList.js","sources":["../../../src/components/MetaDataList/MetaDataList.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport styles from './MetaDataList.module.css';\n\nexport interface MetaDataListProps {\n /** A list of key value pairs to display. The value is be a [ReactNode](https://reactnative.dev/docs/react-node). */\n items: Record<string, ReactNode>;\n}\n\n/** Represents a component of a list of key value pairs. */\nexport const MetaDataList = ({ items }: MetaDataListProps) => (\n <dl className={styles['meta-data-list']}>\n {Object.entries(items).map(([term, description]) => (\n <div key={term} className={styles['meta-data-list__item']}>\n <dt className={styles['meta-data-list__term']}>{term}</dt>\n <dd className={styles['meta-data-list__description']}>{description}</dd>\n </div>\n ))}\n </dl>\n);\n"],"names":["MetaDataList","items","jsx","styles","term","description","jsxs"],"mappings":";;;;;;GAUaA,IAAe,CAAC,EAAE,OAAAC,
|
|
1
|
+
{"version":3,"file":"MetaDataList.js","sources":["../../../src/components/MetaDataList/MetaDataList.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport styles from './MetaDataList.module.css';\n\nexport interface MetaDataListProps {\n /** A list of key value pairs to display. The value is be a [ReactNode](https://reactnative.dev/docs/react-node). */\n items: Record<string, ReactNode>;\n}\n\n/** Represents a component of a list of key value pairs. */\nexport const MetaDataList = ({ items }: MetaDataListProps) => (\n <dl className={styles['meta-data-list']}>\n {Object.entries(items).map(([term, description]) => (\n <div key={term} className={styles['meta-data-list__item']}>\n <dt className={styles['meta-data-list__term']}>{term}</dt>\n <dd className={styles['meta-data-list__description']}>{description}</dd>\n </div>\n ))}\n </dl>\n);\n"],"names":["MetaDataList","items","jsx","styles","term","description","jsxs"],"mappings":";;;;;;GAUaA,IAAe,CAAC,EAAE,OAAAC,EAAA,MAC7B,gBAAAC,EAAC,MAAA,EAAG,WAAWC,EAAO,gBAAgB,GACnC,UAAA,OAAO,QAAQF,CAAK,EAAE,IAAI,CAAC,CAACG,GAAMC,CAAW,MAC5C,gBAAAC,EAAC,OAAA,EAAe,WAAWH,EAAO,sBAAsB,GACtD,UAAA;AAAA,EAAA,gBAAAD,EAAC,MAAA,EAAG,WAAWC,EAAO,sBAAsB,GAAI,UAAAC,GAAK;AAAA,oBACpD,MAAA,EAAG,WAAWD,EAAO,6BAA6B,GAAI,UAAAE,EAAA,CAAY;AAAA,EAAA,GAF3DD,CAGV,CACD,EAAA,CACH;"}
|
|
@@ -2,4 +2,4 @@ import { Meta } from '@storybook/react';
|
|
|
2
2
|
import { MetaDataListProps } from './MetaDataList';
|
|
3
3
|
declare const _default: Meta<MetaDataListProps>;
|
|
4
4
|
export default _default;
|
|
5
|
-
export declare const MetaDataListExample: import('
|
|
5
|
+
export declare const MetaDataListExample: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, MetaDataListProps>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MetaDataList.stories.js","sources":["../../../src/components/MetaDataList/MetaDataList.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { MetaDataListProps } from './MetaDataList';\n\nimport { MetaDataList } from './MetaDataList';\n\nimport { Container } from 'storyComponents/Container/';\n\nconst codeString = '<MetaDataList items={items} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/MetaDataList',\n component: MetaDataList,\n parameters: {\n inspectComponent: MetaDataList,\n codeString: codeString,\n },\n} as Meta<MetaDataListProps>;\n\nconst Template: StoryFn<MetaDataListProps> = (args) => (\n <Container>\n <MetaDataList {...args} />\n </Container>\n);\n\nexport const MetaDataListExample = Template.bind({});\nMetaDataListExample.args = {\n items: {\n 'item one': 'foo',\n 'item two': 'bar',\n 'item three': 'baz',\n },\n};\n"],"names":["codeString","MetaDataList_stories","MetaDataList","Template","args","jsx","Container","MetaDataListExample"],"mappings":";;;AAOA,MAAMA,IAAa,
|
|
1
|
+
{"version":3,"file":"MetaDataList.stories.js","sources":["../../../src/components/MetaDataList/MetaDataList.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { MetaDataListProps } from './MetaDataList';\n\nimport { MetaDataList } from './MetaDataList';\n\nimport { Container } from 'storyComponents/Container/';\n\nconst codeString = '<MetaDataList items={items} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/MetaDataList',\n component: MetaDataList,\n parameters: {\n inspectComponent: MetaDataList,\n codeString: codeString,\n },\n} as Meta<MetaDataListProps>;\n\nconst Template: StoryFn<MetaDataListProps> = (args) => (\n <Container>\n <MetaDataList {...args} />\n </Container>\n);\n\nexport const MetaDataListExample = Template.bind({});\nMetaDataListExample.args = {\n items: {\n 'item one': 'foo',\n 'item two': 'bar',\n 'item three': 'baz',\n },\n};\n"],"names":["codeString","MetaDataList_stories","MetaDataList","Template","args","jsx","Container","MetaDataListExample"],"mappings":";;;AAOA,MAAMA,IAAa,kCAGnBC,IAAe;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAuC,CAACC,MAC5C,gBAAAC,EAACC,KACC,UAAA,gBAAAD,EAACH,GAAA,EAAc,GAAGE,EAAA,CAAM,EAAA,CAC1B,GAGWG,IAAsBJ,EAAS,KAAK,CAAA,CAAE;AACnDI,EAAoB,OAAO;AAAA,EACzB,OAAO;AAAA,IACL,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,cAAc;AAAA,EAAA;AAElB;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModalDialog.js","sources":["../../../src/components/ModalDialog/ModalDialog.tsx"],"sourcesContent":["import { useDialog } from '@react-aria/dialog';\nimport { FocusScope } from '@react-aria/focus';\nimport { OverlayContainer, useModal, useOverlay, usePreventScroll } from '@react-aria/overlays';\nimport clsx from 'clsx';\nimport { useEffect, useRef, useState } from 'react';\n\nimport type { FormHTMLAttributes, KeyboardEvent, PropsWithChildren, ReactNode } from 'react';\nimport type { AriaDialogProps } from '@react-types/dialog';\n\nimport styles from './ModalDialog.module.css';\n\nimport { Backdrop } from 'components/Backdrop';\nimport { OverlayCloseButton } from 'components/OverlayCloseButton';\nimport { Spinner } from 'components/Spinner';\n\nexport interface ModalDialogProps {\n /** The buttons of the dialog. */\n buttons?: ReactNode;\n /** `true` if the dialog can be closed by clicking outside of it; otherwise, `false`. The default is `false`. */\n isDismissable?: boolean;\n /** `true` to disable closing the dialog with the keyboard; otherwise, `false`. The default is `false`. */\n isKeyboardDismissDisabled?: boolean;\n /** `true` to show a spinner, if the contents of the dialog is lazy loaded; otherwise, `false`. The default is `false`. */\n isLoading?: boolean;\n /** The `aria-valuetext` value of the [Spinner](/story/atoms-spinner--spinner-example) component. The default is `'Loading'` Used together with `isLoading`. */\n spinnerAriaValueText?: string;\n /** The `aria-label` value of the [OverlayCloseButton](/story/atoms-overlayclosebutton--overlay-close-button-example) component. The default is `'Close'` */\n closeButtonAriaValueText?: string;\n /** `true` to render the dialog opened; otherwise, `false`. The default is `false`. */\n isOpen: boolean;\n /** `true` to disable form validation; otherwise, `false`. The default is `false`. */\n noValidate?: boolean;\n /** The callback function that is invoked when the dialog is closed. */\n onClose?(): void;\n /** The callback function that is invoked when the form is submitted. */\n onSubmit?: FormHTMLAttributes<HTMLFormElement>['onSubmit'];\n /** The `aria-role` value of the dialog. Possible values are `'dialog'`, `'alertdialog'`. The default is `'dialog'`. */\n role?: AriaDialogProps['role'];\n /** The title of the dialog. */\n title?: string;\n /** The contents of the dialog header. */\n headerContent?: ReactNode;\n /** The variant of the dialog. */\n variant?: 'confirm' | 'dialog';\n /** `true` to add padding to the dialog; otherwise, `false`. The default is `false`. */\n padded?: boolean;\n /** Size of the dialog. */\n size?: 'small' | 'regular' | 'medium' | 'large';\n /** `true` to show a border between the main content of the dialog and the buttons; otherwise, `false`. The default is `false`. */\n noButtonBorder?: boolean;\n}\n\n/** Represents a component for a modal dialog. */\nexport function ModalDialog(props: PropsWithChildren<ModalDialogProps>) {\n const {\n buttons,\n children,\n isDismissable = true,\n isKeyboardDismissDisabled = !isDismissable,\n isLoading,\n spinnerAriaValueText = 'Loading',\n closeButtonAriaValueText = 'Close',\n isOpen,\n noValidate = false,\n onClose,\n onSubmit,\n role = 'dialog',\n title,\n headerContent,\n variant = 'dialog',\n padded,\n size = 'regular',\n noButtonBorder = false,\n } = props;\n\n const ref = useRef<HTMLDivElement>(null);\n const formRef = useRef<HTMLFormElement>(null);\n const [isScrollable, setIsScrollable] = useState(false);\n const [isScrolledToBottom, setIsScrolledToBottom] = useState(false);\n\n const { dialogProps, titleProps } = useDialog({ role }, ref);\n const { modalProps } = useModal({ isDisabled: !isOpen });\n const { overlayProps, underlayProps } = useOverlay(\n { isDismissable, isKeyboardDismissDisabled, isOpen, onClose },\n ref\n );\n\n usePreventScroll({ isDisabled: !isOpen });\n\n useEffect(() => {\n const formElement = formRef.current;\n\n function checkScrollable() {\n if (formElement) {\n const scrollHeight = formElement.scrollHeight;\n const clientHeight = formElement.clientHeight;\n const scrollTop = formElement.scrollTop;\n\n setIsScrollable(scrollHeight > clientHeight);\n setIsScrolledToBottom(scrollTop + clientHeight >= scrollHeight);\n }\n }\n\n function handleScrollAndResize() {\n checkScrollable();\n }\n\n if (formElement) {\n formElement.addEventListener('scroll', handleScrollAndResize);\n window.addEventListener('resize', handleScrollAndResize);\n }\n\n const timeoutId = setTimeout(() => {\n checkScrollable();\n }, 0);\n\n return () => {\n if (formElement) {\n formElement.removeEventListener('scroll', handleScrollAndResize);\n }\n window.removeEventListener('resize', handleScrollAndResize);\n clearTimeout(timeoutId);\n };\n }, [isOpen, headerContent]);\n\n function onKeyUp(event: KeyboardEvent) {\n event.stopPropagation();\n }\n\n if (!isOpen) return null;\n\n return (\n <OverlayContainer>\n <Backdrop {...underlayProps}>\n {isLoading ? (\n <Spinner ariaValueText={spinnerAriaValueText} />\n ) : (\n <>\n {/* eslint-disable-next-line jsx-a11y/no-autofocus */}\n <FocusScope autoFocus contain restoreFocus>\n <div\n {...dialogProps}\n {...modalProps}\n {...overlayProps}\n className={clsx(styles['modal-dialog'], [styles[`modal-dialog--${size}`]], {\n [styles['modal-dialog--confirm']]: variant === 'confirm',\n [styles['modal-dialog--padded']]: padded,\n })}\n onKeyUp={onKeyUp}\n role=\"presentation\"\n ref={ref}\n >\n {(title || headerContent) && variant === 'dialog' && (\n <>\n {title && (\n <h1 {...titleProps} className={styles['modal-dialog__title']}>\n {title}\n </h1>\n )}\n {headerContent}\n {variant === 'dialog' && (\n <span className={styles['modal-dialog__close']}>\n <OverlayCloseButton\n aria-label={closeButtonAriaValueText}\n onClick={onClose}\n paddedModal={padded}\n />\n </span>\n )}\n </>\n )}\n <form\n className={clsx(styles['modal-dialog__content'], {\n [styles['modal-dialog--content-with-buttons']]: buttons,\n })}\n onSubmit={onSubmit}\n noValidate={noValidate}\n ref={formRef}\n >\n <div className={clsx({ [styles['modal-dialog__children']]: !noButtonBorder })}>{children}</div>\n {buttons && (\n <div\n className={clsx(styles['modal-dialog__buttons'], {\n [styles['modal-dialog__buttons--border']]: !noButtonBorder,\n [styles['modal-dialog__buttons--shadow']]: isScrollable && !isScrolledToBottom,\n })}\n >\n {buttons}\n </div>\n )}\n </form>\n </div>\n </FocusScope>\n </>\n )}\n </Backdrop>\n </OverlayContainer>\n );\n}\n"],"names":["ModalDialog","props","buttons","children","isDismissable","isKeyboardDismissDisabled","isLoading","spinnerAriaValueText","closeButtonAriaValueText","isOpen","noValidate","onClose","onSubmit","role","title","headerContent","variant","padded","size","noButtonBorder","ref","useRef","formRef","isScrollable","setIsScrollable","useState","isScrolledToBottom","setIsScrolledToBottom","dialogProps","titleProps","useDialog","modalProps","useModal","overlayProps","underlayProps","useOverlay","usePreventScroll","useEffect","formElement","checkScrollable","scrollHeight","clientHeight","scrollTop","handleScrollAndResize","timeoutId","onKeyUp","event","jsx","OverlayContainer","Backdrop","Spinner","Fragment","FocusScope","jsxs","clsx","styles","OverlayCloseButton"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAqDO,SAASA,GAAYC,GAA4C;AAChE,QAAA;AAAA,IACJ,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,eAAAC,IAAgB;AAAA,IAChB,2BAAAC,IAA4B,CAACD;AAAA,IAC7B,WAAAE;AAAA,IACA,sBAAAC,IAAuB;AAAA,IACvB,0BAAAC,IAA2B;AAAA,IAC3B,QAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,OAAAC;AAAA,IACA,eAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,QAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,gBAAAC,IAAiB;AAAA,EAAA,IACflB,GAEEmB,IAAMC,EAAuB,IAAI,GACjCC,IAAUD,EAAwB,IAAI,GACtC,CAACE,GAAcC,CAAe,IAAIC,EAAS,EAAK,GAChD,CAACC,GAAoBC,CAAqB,IAAIF,EAAS,EAAK,GAE5D,EAAE,aAAAG,GAAa,YAAAC,EAAW,IAAIC,EAAU,EAAE,MAAAjB,KAAQO,CAAG,GACrD,EAAE,YAAAW,MAAeC,EAAS,EAAE,YAAY,CAACvB,GAAQ,GACjD,EAAE,cAAAwB,GAAc,eAAAC,EAAA,IAAkBC;AAAA,IACtC,EAAE,eAAA/B,GAAe,2BAAAC,GAA2B,QAAAI,GAAQ,SAAAE,EAAQ;AAAA,IAC5DS;AAAA,EACF;AAEA,EAAAgB,EAAiB,EAAE,YAAY,CAAC3B,GAAQ,GAExC4B,EAAU,MAAM;AACd,UAAMC,IAAchB,EAAQ;AAE5B,aAASiB,IAAkB;AACzB,UAAID,GAAa;AACf,cAAME,IAAeF,EAAY,cAC3BG,IAAeH,EAAY,cAC3BI,IAAYJ,EAAY;AAE9B,QAAAd,EAAgBgB,IAAeC,CAAY,GACrBd,EAAAe,IAAYD,KAAgBD,CAAY;AAAA,MAAA;AAAA,IAChE;AAGF,aAASG,IAAwB;AACf,MAAAJ,EAAA;AAAA,IAAA;AAGlB,IAAID,MACUA,EAAA,iBAAiB,UAAUK,CAAqB,GACrD,OAAA,iBAAiB,UAAUA,CAAqB;AAGnD,UAAAC,IAAY,WAAW,MAAM;AACjB,MAAAL,EAAA;AAAA,OACf,CAAC;AAEJ,WAAO,MAAM;AACX,MAAID,KACUA,EAAA,oBAAoB,UAAUK,CAAqB,GAE1D,OAAA,oBAAoB,UAAUA,CAAqB,GAC1D,aAAaC,CAAS;AAAA,IACxB;AAAA,EAAA,GACC,CAACnC,GAAQM,CAAa,CAAC;AAE1B,WAAS8B,EAAQC,GAAsB;AACrC,IAAAA,EAAM,gBAAgB;AAAA,EAAA;AAGpB,SAACrC,IAGH,gBAAAsC,EAACC,KACC,UAAC,gBAAAD,EAAAE,GAAA,EAAU,GAAGf,GACX,UAAA5B,sBACE4C,IAAQ,EAAA,eAAe3C,GAAsB,IAE9C,gBAAAwC,EAAAI,GAAA,EAEE,4BAACC,GAAW,EAAA,WAAS,IAAC,SAAO,IAAC,cAAY,IACxC,UAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGzB;AAAA,MACH,GAAGG;AAAA,MACH,GAAGE;AAAA,MACJ,WAAWqB,EAAKC,EAAO,cAAc,GAAG,CAACA,EAAO,iBAAiBrC,CAAI,EAAE,CAAC,GAAG;AAAA,QACzE,CAACqC,EAAO,uBAAuB,CAAC,GAAGvC,MAAY;AAAA,QAC/C,CAACuC,EAAO,sBAAsB,CAAC,GAAGtC;AAAA,MAAA,CACnC;AAAA,MACD,SAAA4B;AAAA,MACA,MAAK;AAAA,MACL,KAAAzB;AAAA,MAEE,UAAA;AAAA,SAASN,KAAAC,MAAkBC,MAAY,YAEpC,gBAAAqC,EAAAF,GAAA,EAAA,UAAA;AAAA,UACCrC,KAAA,gBAAAiC,EAAC,QAAI,GAAGlB,GAAY,WAAW0B,EAAO,qBAAqB,GACxD,UACHzC,EAAA,CAAA;AAAA,UAEDC;AAAA,UACAC,MAAY,YACX,gBAAA+B,EAAC,UAAK,WAAWQ,EAAO,qBAAqB,GAC3C,UAAA,gBAAAR;AAAA,YAACS;AAAA,YAAA;AAAA,cACC,cAAYhD;AAAA,cACZ,SAASG;AAAA,cACT,aAAaM;AAAA,YAAA;AAAA,UAAA,EAEjB,CAAA;AAAA,QAAA,GAEJ;AAAA,QAEF,gBAAAoC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWC,EAAKC,EAAO,uBAAuB,GAAG;AAAA,cAC/C,CAACA,EAAO,oCAAoC,CAAC,GAAGrD;AAAA,YAAA,CACjD;AAAA,YACD,UAAAU;AAAA,YACA,YAAAF;AAAA,YACA,KAAKY;AAAA,YAEL,UAAA;AAAA,cAAA,gBAAAyB,EAAC,OAAI,EAAA,WAAWO,EAAK,EAAE,CAACC,EAAO,wBAAwB,CAAC,GAAG,CAACpC,GAAgB,GAAI,UAAAhB,EAAS,CAAA;AAAA,cACxFD,KACC,gBAAA6C;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAWO,EAAKC,EAAO,uBAAuB,GAAG;AAAA,oBAC/C,CAACA,EAAO,+BAA+B,CAAC,GAAG,CAACpC;AAAA,oBAC5C,CAACoC,EAAO,+BAA+B,CAAC,GAAGhC,KAAgB,CAACG;AAAA,kBAAA,CAC7D;AAAA,kBAEA,UAAAxB;AAAA,gBAAA;AAAA,cAAA;AAAA,YACH;AAAA,UAAA;AAAA,QAAA;AAAA,MAEJ;AAAA,IAAA;AAAA,EAAA,GAEJ,EACF,CAAA,EAEJ,CAAA,GACF,IAnEkB;AAqEtB;"}
|
|
1
|
+
{"version":3,"file":"ModalDialog.js","sources":["../../../src/components/ModalDialog/ModalDialog.tsx"],"sourcesContent":["import { useDialog } from '@react-aria/dialog';\nimport { FocusScope } from '@react-aria/focus';\nimport { OverlayContainer, useModal, useOverlay, usePreventScroll } from '@react-aria/overlays';\nimport { clsx } from 'clsx';\nimport { useEffect, useRef, useState } from 'react';\n\nimport type { FormHTMLAttributes, KeyboardEvent, PropsWithChildren, ReactNode } from 'react';\nimport type { AriaDialogProps } from '@react-types/dialog';\n\nimport styles from './ModalDialog.module.css';\n\nimport { Backdrop } from 'components/Backdrop';\nimport { OverlayCloseButton } from 'components/OverlayCloseButton';\nimport { Spinner } from 'components/Spinner';\n\nexport interface ModalDialogProps {\n /** The buttons of the dialog. */\n buttons?: ReactNode;\n /** `true` if the dialog can be closed by clicking outside of it; otherwise, `false`. The default is `false`. */\n isDismissable?: boolean;\n /** `true` to disable closing the dialog with the keyboard; otherwise, `false`. The default is `false`. */\n isKeyboardDismissDisabled?: boolean;\n /** `true` to show a spinner, if the contents of the dialog is lazy loaded; otherwise, `false`. The default is `false`. */\n isLoading?: boolean;\n /** The `aria-valuetext` value of the [Spinner](/story/atoms-spinner--spinner-example) component. The default is `'Loading'` Used together with `isLoading`. */\n spinnerAriaValueText?: string;\n /** The `aria-label` value of the [OverlayCloseButton](/story/atoms-overlayclosebutton--overlay-close-button-example) component. The default is `'Close'` */\n closeButtonAriaValueText?: string;\n /** `true` to render the dialog opened; otherwise, `false`. The default is `false`. */\n isOpen: boolean;\n /** `true` to disable form validation; otherwise, `false`. The default is `false`. */\n noValidate?: boolean;\n /** The callback function that is invoked when the dialog is closed. */\n onClose?(): void;\n /** The callback function that is invoked when the form is submitted. */\n onSubmit?: FormHTMLAttributes<HTMLFormElement>['onSubmit'];\n /** The `aria-role` value of the dialog. Possible values are `'dialog'`, `'alertdialog'`. The default is `'dialog'`. */\n role?: AriaDialogProps['role'];\n /** The title of the dialog. */\n title?: string;\n /** The contents of the dialog header. */\n headerContent?: ReactNode;\n /** The variant of the dialog. */\n variant?: 'confirm' | 'dialog';\n /** `true` to add padding to the dialog; otherwise, `false`. The default is `false`. */\n padded?: boolean;\n /** Size of the dialog. */\n size?: 'small' | 'regular' | 'medium' | 'large';\n /** `true` to show a border between the main content of the dialog and the buttons; otherwise, `false`. The default is `false`. */\n noButtonBorder?: boolean;\n}\n\n/** Represents a component for a modal dialog. */\nexport function ModalDialog(props: PropsWithChildren<ModalDialogProps>) {\n const {\n buttons,\n children,\n isDismissable = true,\n isKeyboardDismissDisabled = !isDismissable,\n isLoading,\n spinnerAriaValueText = 'Loading',\n closeButtonAriaValueText = 'Close',\n isOpen,\n noValidate = false,\n onClose,\n onSubmit,\n role = 'dialog',\n title,\n headerContent,\n variant = 'dialog',\n padded,\n size = 'regular',\n noButtonBorder = false,\n } = props;\n\n const ref = useRef<HTMLDivElement>(null);\n const formRef = useRef<HTMLFormElement>(null);\n const [isScrollable, setIsScrollable] = useState(false);\n const [isScrolledToBottom, setIsScrolledToBottom] = useState(false);\n\n const { dialogProps, titleProps } = useDialog({ role }, ref);\n const { modalProps } = useModal({ isDisabled: !isOpen });\n const { overlayProps, underlayProps } = useOverlay(\n { isDismissable, isKeyboardDismissDisabled, isOpen, onClose },\n ref\n );\n\n usePreventScroll({ isDisabled: !isOpen });\n\n useEffect(() => {\n const formElement = formRef.current;\n\n function checkScrollable() {\n if (formElement) {\n const scrollHeight = formElement.scrollHeight;\n const clientHeight = formElement.clientHeight;\n const scrollTop = formElement.scrollTop;\n\n setIsScrollable(scrollHeight > clientHeight);\n setIsScrolledToBottom(scrollTop + clientHeight >= scrollHeight);\n }\n }\n\n function handleScrollAndResize() {\n checkScrollable();\n }\n\n if (formElement) {\n formElement.addEventListener('scroll', handleScrollAndResize);\n window.addEventListener('resize', handleScrollAndResize);\n }\n\n const timeoutId = setTimeout(() => {\n checkScrollable();\n }, 0);\n\n return () => {\n if (formElement) {\n formElement.removeEventListener('scroll', handleScrollAndResize);\n }\n window.removeEventListener('resize', handleScrollAndResize);\n clearTimeout(timeoutId);\n };\n }, [isOpen, headerContent]);\n\n function onKeyUp(event: KeyboardEvent) {\n event.stopPropagation();\n }\n\n if (!isOpen) return null;\n\n return (\n <OverlayContainer>\n <Backdrop {...underlayProps}>\n {isLoading ? (\n <Spinner ariaValueText={spinnerAriaValueText} />\n ) : (\n <>\n {/* eslint-disable-next-line jsx-a11y/no-autofocus */}\n <FocusScope autoFocus contain restoreFocus>\n <div\n {...dialogProps}\n {...modalProps}\n {...overlayProps}\n className={clsx(styles['modal-dialog'], [styles[`modal-dialog--${size}`]], {\n [styles['modal-dialog--confirm']]: variant === 'confirm',\n [styles['modal-dialog--padded']]: padded,\n })}\n onKeyUp={onKeyUp}\n role=\"presentation\"\n ref={ref}\n >\n {(title || headerContent) && variant === 'dialog' && (\n <>\n {title && (\n <h1 {...titleProps} className={styles['modal-dialog__title']}>\n {title}\n </h1>\n )}\n {headerContent}\n {variant === 'dialog' && (\n <span className={styles['modal-dialog__close']}>\n <OverlayCloseButton\n aria-label={closeButtonAriaValueText}\n onClick={onClose}\n paddedModal={padded}\n />\n </span>\n )}\n </>\n )}\n <form\n className={clsx(styles['modal-dialog__content'], {\n [styles['modal-dialog--content-with-buttons']]: buttons,\n })}\n onSubmit={onSubmit}\n noValidate={noValidate}\n ref={formRef}\n >\n <div className={clsx({ [styles['modal-dialog__children']]: !noButtonBorder })}>{children}</div>\n {buttons && (\n <div\n className={clsx(styles['modal-dialog__buttons'], {\n [styles['modal-dialog__buttons--border']]: !noButtonBorder,\n [styles['modal-dialog__buttons--shadow']]: isScrollable && !isScrolledToBottom,\n })}\n >\n {buttons}\n </div>\n )}\n </form>\n </div>\n </FocusScope>\n </>\n )}\n </Backdrop>\n </OverlayContainer>\n );\n}\n"],"names":["ModalDialog","props","buttons","children","isDismissable","isKeyboardDismissDisabled","isLoading","spinnerAriaValueText","closeButtonAriaValueText","isOpen","noValidate","onClose","onSubmit","role","title","headerContent","variant","padded","size","noButtonBorder","ref","useRef","formRef","isScrollable","setIsScrollable","useState","isScrolledToBottom","setIsScrolledToBottom","dialogProps","titleProps","useDialog","modalProps","useModal","overlayProps","underlayProps","useOverlay","usePreventScroll","useEffect","formElement","checkScrollable","scrollHeight","clientHeight","scrollTop","handleScrollAndResize","timeoutId","onKeyUp","event","jsx","OverlayContainer","Backdrop","Spinner","Fragment","FocusScope","jsxs","clsx","styles","OverlayCloseButton"],"mappings":"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"}
|
|
@@ -2,6 +2,6 @@ import { Meta } from '@storybook/react';
|
|
|
2
2
|
import { ModalDialogProps } from './ModalDialog';
|
|
3
3
|
declare const _default: Meta<ModalDialogProps>;
|
|
4
4
|
export default _default;
|
|
5
|
-
export declare const ModalDialogExample: import('
|
|
6
|
-
export declare const Loading: import('
|
|
7
|
-
export declare const WithLongContentAndNoBorder: import('
|
|
5
|
+
export declare const ModalDialogExample: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, ModalDialogProps>;
|
|
6
|
+
export declare const Loading: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, ModalDialogProps>;
|
|
7
|
+
export declare const WithLongContentAndNoBorder: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, ModalDialogProps>;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { jsxs as a, jsx as e } from "react/jsx-runtime";
|
|
2
2
|
import { ModalProvider as r } from "@react-aria/overlays";
|
|
3
|
-
import {
|
|
3
|
+
import { W as i } from "../../index-Di9WPZUe.js";
|
|
4
4
|
import { ModalDialog as t } from "./ModalDialog.js";
|
|
5
|
-
import { Button as
|
|
5
|
+
import { Button as n } from "../Buttons/Button.js";
|
|
6
6
|
import "../Buttons/LinkButton.js";
|
|
7
7
|
import "@react-aria/button";
|
|
8
8
|
import { ButtonGroup as m } from "../ButtonGroup/ButtonGroup.js";
|
|
@@ -53,7 +53,7 @@ const p = `
|
|
|
53
53
|
}, u = (o) => /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(t, { ...o, children: /* @__PURE__ */ a(l, { outerSpace: !0, children: [
|
|
54
54
|
/* @__PURE__ */ e(c, { htmlFor: "text-field", children: "Example Text Field" }),
|
|
55
55
|
/* @__PURE__ */ e(d, { id: "text-field" })
|
|
56
|
-
] }) }) }),
|
|
56
|
+
] }) }) }), s = {
|
|
57
57
|
padded: !1,
|
|
58
58
|
size: "regular",
|
|
59
59
|
noButtonBorder: !1,
|
|
@@ -65,17 +65,17 @@ const p = `
|
|
|
65
65
|
onSubmit: i(),
|
|
66
66
|
onClose: i(),
|
|
67
67
|
buttons: /* @__PURE__ */ a(m, { reversed: !0, children: [
|
|
68
|
-
/* @__PURE__ */ e(
|
|
69
|
-
/* @__PURE__ */ e(
|
|
68
|
+
/* @__PURE__ */ e(n, { variant: "primary", onClick: i(), children: "OK" }),
|
|
69
|
+
/* @__PURE__ */ e(n, { variant: "secondary", onClick: i(), children: "Cancel" })
|
|
70
70
|
] }),
|
|
71
71
|
isOpen: !0
|
|
72
72
|
}, b = u.bind({});
|
|
73
73
|
b.args = {
|
|
74
|
-
...
|
|
74
|
+
...s
|
|
75
75
|
};
|
|
76
76
|
const g = u.bind({});
|
|
77
77
|
g.args = {
|
|
78
|
-
...
|
|
78
|
+
...s,
|
|
79
79
|
isLoading: !0,
|
|
80
80
|
spinnerAriaValueText: "Loading"
|
|
81
81
|
};
|
|
@@ -84,7 +84,7 @@ const f = (o) => /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(t, { ...o, c
|
|
|
84
84
|
/* @__PURE__ */ e("div", { children: "Aliquam facilisis massa sed justo rhoncus bibendum. Sed lobortis urna orci, vitae porta leo placerat nec. Nam porta porttitor ornare. Suspendisse vehicula nunc nec egestas finibus. Aliquam non luctus risus. Phasellus ac diam tincidunt, bibendum sem eget, sollicitudin neque. Curabitur mauris risus, feugiat ac euismod non, vulputate ac justo. Curabitur pretium vehicula augue, blandit porta odio rutrum sit amet. Proin semper enim ut sapien tempor, a ornare ipsum faucibus." })
|
|
85
85
|
] }) }) }), h = f.bind({});
|
|
86
86
|
h.args = {
|
|
87
|
-
...
|
|
87
|
+
...s,
|
|
88
88
|
noButtonBorder: !0
|
|
89
89
|
};
|
|
90
90
|
export {
|