@simplybusiness/mobius 3.7.1 → 3.9.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/CHANGELOG.md +21 -1
- package/dist/cjs/components/Accordion/Accordion.stories.d.ts +12 -0
- package/dist/cjs/components/Accordion/Accordion.stories.js +48 -0
- package/dist/cjs/components/Accordion/Accordion.stories.js.map +1 -0
- package/dist/cjs/components/Alert/Alert.stories.d.ts +17 -0
- package/dist/cjs/components/Alert/Alert.stories.js +35 -0
- package/dist/cjs/components/Alert/Alert.stories.js.map +1 -0
- package/dist/cjs/components/Box/Box.stories.d.ts +17 -0
- package/dist/cjs/components/Box/Box.stories.js +23 -0
- package/dist/cjs/components/Box/Box.stories.js.map +1 -0
- package/dist/cjs/components/Breadcrumbs/Breadcrumbs.stories.d.ts +10 -0
- package/dist/cjs/components/Breadcrumbs/Breadcrumbs.stories.js +20 -0
- package/dist/cjs/components/Breadcrumbs/Breadcrumbs.stories.js.map +1 -0
- package/dist/cjs/components/Button/Button.stories.d.ts +67 -0
- package/dist/cjs/components/Button/Button.stories.js +201 -0
- package/dist/cjs/components/Button/Button.stories.js.map +1 -0
- package/dist/cjs/components/Checkbox/Checkbox.stories.d.ts +32 -0
- package/dist/cjs/components/Checkbox/Checkbox.stories.js +101 -0
- package/dist/cjs/components/Checkbox/Checkbox.stories.js.map +1 -0
- package/dist/cjs/components/Checkbox/CheckboxGroup.stories.d.ts +25 -0
- package/dist/cjs/components/Checkbox/CheckboxGroup.stories.js +74 -0
- package/dist/cjs/components/Checkbox/CheckboxGroup.stories.js.map +1 -0
- package/dist/cjs/components/Checkbox/types.d.ts +1 -1
- package/dist/cjs/components/Chopin/Actions/Actions.stories.d.ts +13 -0
- package/dist/cjs/components/Chopin/Actions/Actions.stories.js +59 -0
- package/dist/cjs/components/Chopin/Actions/Actions.stories.js.map +1 -0
- package/dist/cjs/components/Chopin/Footer/Footer.stories.d.ts +13 -0
- package/dist/cjs/components/Chopin/Footer/Footer.stories.js +169 -0
- package/dist/cjs/components/Chopin/Footer/Footer.stories.js.map +1 -0
- package/dist/cjs/components/Chopin/Header/Header.stories.d.ts +22 -0
- package/dist/cjs/components/Chopin/Header/Header.stories.js +41 -0
- package/dist/cjs/components/Chopin/Header/Header.stories.js.map +1 -0
- package/dist/cjs/components/Chopin/PercentageTotalsQuestion/PercentageTotalsQuestion.stories.d.ts +22 -0
- package/dist/cjs/components/Chopin/PercentageTotalsQuestion/PercentageTotalsQuestion.stories.js +46 -0
- package/dist/cjs/components/Chopin/PercentageTotalsQuestion/PercentageTotalsQuestion.stories.js.map +1 -0
- package/dist/cjs/components/Chopin/Question/Question.stories.d.ts +66 -0
- package/dist/cjs/components/Chopin/Question/Question.stories.js +139 -0
- package/dist/cjs/components/Chopin/Question/Question.stories.js.map +1 -0
- package/dist/cjs/components/Chopin/QuestionGroup/QuestionGroup.stories.d.ts +21 -0
- package/dist/cjs/components/Chopin/QuestionGroup/QuestionGroup.stories.js +43 -0
- package/dist/cjs/components/Chopin/QuestionGroup/QuestionGroup.stories.js.map +1 -0
- package/dist/cjs/components/Chopin/Section/Section.stories.d.ts +9 -0
- package/dist/cjs/components/Chopin/Section/Section.stories.js +19 -0
- package/dist/cjs/components/Chopin/Section/Section.stories.js.map +1 -0
- package/dist/cjs/components/Chopin/Steps/Steps.stories.d.ts +9 -0
- package/dist/cjs/components/Chopin/Steps/Steps.stories.js +15 -0
- package/dist/cjs/components/Chopin/Steps/Steps.stories.js.map +1 -0
- package/dist/cjs/components/Chopin/Testimonial/Testimonial.stories.d.ts +9 -0
- package/dist/cjs/components/Chopin/Testimonial/Testimonial.stories.js +18 -0
- package/dist/cjs/components/Chopin/Testimonial/Testimonial.stories.js.map +1 -0
- package/dist/cjs/components/Chopin/TradeSelector/TradeSelector.stories.d.ts +16 -0
- package/dist/cjs/components/Chopin/TradeSelector/TradeSelector.stories.js +55 -0
- package/dist/cjs/components/Chopin/TradeSelector/TradeSelector.stories.js.map +1 -0
- package/dist/cjs/components/Chopin/TradeSelector/TradeSelector.test.js +3 -0
- package/dist/cjs/components/Chopin/TradeSelector/TradeSelector.test.js.map +1 -1
- package/dist/cjs/components/Container/Container.stories.d.ts +9 -0
- package/dist/cjs/components/Container/Container.stories.js +15 -0
- package/dist/cjs/components/Container/Container.stories.js.map +1 -0
- package/dist/cjs/components/DataTable/DataTable.stories.d.ts +15 -0
- package/dist/cjs/components/DataTable/DataTable.stories.js +200 -0
- package/dist/cjs/components/DataTable/DataTable.stories.js.map +1 -0
- package/dist/cjs/components/DatePicker/DatePicker.stories.d.ts +16 -0
- package/dist/cjs/components/DatePicker/DatePicker.stories.js +28 -0
- package/dist/cjs/components/DatePicker/DatePicker.stories.js.map +1 -0
- package/dist/cjs/components/Divider/Divider.stories.d.ts +13 -0
- package/dist/cjs/components/Divider/Divider.stories.js +15 -0
- package/dist/cjs/components/Divider/Divider.stories.js.map +1 -0
- package/dist/cjs/components/DropdownMenu/DropdownMenu.stories.d.ts +21 -0
- package/dist/cjs/components/DropdownMenu/DropdownMenu.stories.js +64 -0
- package/dist/cjs/components/DropdownMenu/DropdownMenu.stories.js.map +1 -0
- package/dist/cjs/components/ErrorMessage/ErrorMessage.stories.d.ts +14 -0
- package/dist/cjs/components/ErrorMessage/ErrorMessage.stories.js +24 -0
- package/dist/cjs/components/ErrorMessage/ErrorMessage.stories.js.map +1 -0
- package/dist/cjs/components/Fieldset/Fieldset.stories.d.ts +10 -0
- package/dist/cjs/components/Fieldset/Fieldset.stories.js +25 -0
- package/dist/cjs/components/Fieldset/Fieldset.stories.js.map +1 -0
- package/dist/cjs/components/Flex/Flex.stories.d.ts +82 -0
- package/dist/cjs/components/Flex/Flex.stories.js +151 -0
- package/dist/cjs/components/Flex/Flex.stories.js.map +1 -0
- package/dist/cjs/components/Grid/Grid.d.ts +2 -0
- package/dist/cjs/components/Grid/Grid.js +10 -4
- package/dist/cjs/components/Grid/Grid.js.map +1 -1
- package/dist/cjs/components/Grid/Grid.stories.d.ts +86 -0
- package/dist/cjs/components/Grid/Grid.stories.js +230 -0
- package/dist/cjs/components/Grid/Grid.stories.js.map +1 -0
- package/dist/cjs/components/Grid/Item.d.ts +2 -0
- package/dist/cjs/components/Grid/Item.js +7 -2
- package/dist/cjs/components/Grid/Item.js.map +1 -1
- package/dist/cjs/components/Icon/Icon.stories.d.ts +24 -0
- package/dist/cjs/components/Icon/Icon.stories.js +46 -0
- package/dist/cjs/components/Icon/Icon.stories.js.map +1 -0
- package/dist/cjs/components/Icon/types.d.ts +2 -0
- package/dist/cjs/components/Image/Image.stories.d.ts +9 -0
- package/dist/cjs/components/Image/Image.stories.js +20 -0
- package/dist/cjs/components/Image/Image.stories.js.map +1 -0
- package/dist/cjs/components/Label/Label.stories.d.ts +9 -0
- package/dist/cjs/components/Label/Label.stories.js +18 -0
- package/dist/cjs/components/Label/Label.stories.js.map +1 -0
- package/dist/cjs/components/Link/Link.stories.d.ts +38 -0
- package/dist/cjs/components/Link/Link.stories.js +44 -0
- package/dist/cjs/components/Link/Link.stories.js.map +1 -0
- package/dist/cjs/components/LinkButton/LinkButton.stories.d.ts +48 -0
- package/dist/cjs/components/LinkButton/LinkButton.stories.js +45 -0
- package/dist/cjs/components/LinkButton/LinkButton.stories.js.map +1 -0
- package/dist/cjs/components/List/List.stories.d.ts +33 -0
- package/dist/cjs/components/List/List.stories.js +80 -0
- package/dist/cjs/components/List/List.stories.js.map +1 -0
- package/dist/cjs/components/LoadingIndicator/LoadingIndicator.d.ts +2 -0
- package/dist/cjs/components/LoadingIndicator/LoadingIndicator.js.map +1 -1
- package/dist/cjs/components/LoadingIndicator/LoadingIndicator.stories.d.ts +31 -0
- package/dist/cjs/components/LoadingIndicator/LoadingIndicator.stories.js +53 -0
- package/dist/cjs/components/LoadingIndicator/LoadingIndicator.stories.js.map +1 -0
- package/dist/cjs/components/MaskedField/MaskedField.stories.d.ts +16 -0
- package/dist/cjs/components/MaskedField/MaskedField.stories.js +25 -0
- package/dist/cjs/components/MaskedField/MaskedField.stories.js.map +1 -0
- package/dist/cjs/components/Modal/Modal.js +2 -0
- package/dist/cjs/components/Modal/Modal.js.map +1 -1
- package/dist/cjs/components/Modal/Modal.stories.d.ts +44 -0
- package/dist/cjs/components/Modal/Modal.stories.js +82 -0
- package/dist/cjs/components/Modal/Modal.stories.js.map +1 -0
- package/dist/cjs/components/NumberField/NumberField.stories.d.ts +50 -0
- package/dist/cjs/components/NumberField/NumberField.stories.js +106 -0
- package/dist/cjs/components/NumberField/NumberField.stories.js.map +1 -0
- package/dist/cjs/components/PasswordField/PasswordField.stories.d.ts +28 -0
- package/dist/cjs/components/PasswordField/PasswordField.stories.js +34 -0
- package/dist/cjs/components/PasswordField/PasswordField.stories.js.map +1 -0
- package/dist/cjs/components/Progress/Progress.stories.d.ts +56 -0
- package/dist/cjs/components/Progress/Progress.stories.js +92 -0
- package/dist/cjs/components/Progress/Progress.stories.js.map +1 -0
- package/dist/cjs/components/Radio/Radio.stories.d.ts +39 -0
- package/dist/cjs/components/Radio/Radio.stories.js +121 -0
- package/dist/cjs/components/Radio/Radio.stories.js.map +1 -0
- package/dist/cjs/components/Radio/RadioButton.stories.d.ts +23 -0
- package/dist/cjs/components/Radio/RadioButton.stories.js +91 -0
- package/dist/cjs/components/Radio/RadioButton.stories.js.map +1 -0
- package/dist/cjs/components/SVG/SVG.stories.d.ts +9 -0
- package/dist/cjs/components/SVG/SVG.stories.js +22 -0
- package/dist/cjs/components/SVG/SVG.stories.js.map +1 -0
- package/dist/cjs/components/SVG/SVG.test.js.map +1 -1
- package/dist/cjs/components/Segment/Segment.stories.d.ts +32 -0
- package/dist/cjs/components/Segment/Segment.stories.js +78 -0
- package/dist/cjs/components/Segment/Segment.stories.js.map +1 -0
- package/dist/cjs/components/Select/Select.stories.d.ts +31 -0
- package/dist/cjs/components/Select/Select.stories.js +82 -0
- package/dist/cjs/components/Select/Select.stories.js.map +1 -0
- package/dist/cjs/components/Slider/Slider.d.ts +2 -2
- package/dist/cjs/components/Slider/Slider.js.map +1 -1
- package/dist/cjs/components/Slider/Slider.stories.d.ts +12 -0
- package/dist/cjs/components/Slider/Slider.stories.js +66 -0
- package/dist/cjs/components/Slider/Slider.stories.js.map +1 -0
- package/dist/cjs/components/Table/Table.stories.d.ts +10 -0
- package/dist/cjs/components/Table/Table.stories.js +18 -0
- package/dist/cjs/components/Table/Table.stories.js.map +1 -0
- package/dist/cjs/components/Text/Text.stories.d.ts +10 -0
- package/dist/cjs/components/Text/Text.stories.js +29 -0
- package/dist/cjs/components/Text/Text.stories.js.map +1 -0
- package/dist/cjs/components/TextArea/TextArea.stories.d.ts +26 -0
- package/dist/cjs/components/TextArea/TextArea.stories.js +83 -0
- package/dist/cjs/components/TextArea/TextArea.stories.js.map +1 -0
- package/dist/cjs/components/TextField/TextField.stories.d.ts +36 -0
- package/dist/cjs/components/TextField/TextField.stories.js +103 -0
- package/dist/cjs/components/TextField/TextField.stories.js.map +1 -0
- package/dist/cjs/components/Title/Title.stories.d.ts +9 -0
- package/dist/cjs/components/Title/Title.stories.js +19 -0
- package/dist/cjs/components/Title/Title.stories.js.map +1 -0
- package/dist/cjs/components/VisuallyHidden/VisuallyHidden.stories.d.ts +9 -0
- package/dist/cjs/components/VisuallyHidden/VisuallyHidden.stories.js +15 -0
- package/dist/cjs/components/VisuallyHidden/VisuallyHidden.stories.js.map +1 -0
- package/dist/cjs/hooks/index.d.ts +1 -0
- package/dist/cjs/hooks/index.js +1 -0
- package/dist/cjs/hooks/index.js.map +1 -1
- package/dist/cjs/hooks/useBodyScrollLock/index.d.ts +1 -0
- package/dist/cjs/hooks/useBodyScrollLock/index.js +18 -0
- package/dist/cjs/hooks/useBodyScrollLock/index.js.map +1 -0
- package/dist/cjs/hooks/useBodyScrollLock/useBodyScrollLock.d.ts +3 -0
- package/dist/cjs/hooks/useBodyScrollLock/useBodyScrollLock.js +25 -0
- package/dist/cjs/hooks/useBodyScrollLock/useBodyScrollLock.js.map +1 -0
- package/dist/cjs/hooks/useBodyScrollLock/useBodyScrollLock.test.d.ts +1 -0
- package/dist/cjs/hooks/useBodyScrollLock/useBodyScrollLock.test.js +31 -0
- package/dist/cjs/hooks/useBodyScrollLock/useBodyScrollLock.test.js.map +1 -0
- package/dist/cjs/hooks/useBreakpoint/useBreakpoint.stories.d.ts +11 -0
- package/dist/cjs/hooks/useBreakpoint/useBreakpoint.stories.js +43 -0
- package/dist/cjs/hooks/useBreakpoint/useBreakpoint.stories.js.map +1 -0
- package/dist/cjs/tsconfig.tsbuildinfo +1 -1
- package/dist/esm/components/Accordion/Accordion.stories.js +45 -0
- package/dist/esm/components/Accordion/Accordion.stories.js.map +1 -0
- package/dist/esm/components/Alert/Alert.stories.js +32 -0
- package/dist/esm/components/Alert/Alert.stories.js.map +1 -0
- package/dist/esm/components/Box/Box.stories.js +20 -0
- package/dist/esm/components/Box/Box.stories.js.map +1 -0
- package/dist/esm/components/Breadcrumbs/Breadcrumbs.stories.js +17 -0
- package/dist/esm/components/Breadcrumbs/Breadcrumbs.stories.js.map +1 -0
- package/dist/esm/components/Button/Button.stories.js +198 -0
- package/dist/esm/components/Button/Button.stories.js.map +1 -0
- package/dist/esm/components/Checkbox/Checkbox.stories.js +98 -0
- package/dist/esm/components/Checkbox/Checkbox.stories.js.map +1 -0
- package/dist/esm/components/Checkbox/CheckboxGroup.stories.js +71 -0
- package/dist/esm/components/Checkbox/CheckboxGroup.stories.js.map +1 -0
- package/dist/esm/components/Chopin/Actions/Actions.stories.js +56 -0
- package/dist/esm/components/Chopin/Actions/Actions.stories.js.map +1 -0
- package/dist/esm/components/Chopin/Footer/Footer.stories.js +166 -0
- package/dist/esm/components/Chopin/Footer/Footer.stories.js.map +1 -0
- package/dist/esm/components/Chopin/Header/Header.stories.js +38 -0
- package/dist/esm/components/Chopin/Header/Header.stories.js.map +1 -0
- package/dist/esm/components/Chopin/PercentageTotalsQuestion/PercentageTotalsQuestion.stories.js +43 -0
- package/dist/esm/components/Chopin/PercentageTotalsQuestion/PercentageTotalsQuestion.stories.js.map +1 -0
- package/dist/esm/components/Chopin/Question/Question.stories.js +136 -0
- package/dist/esm/components/Chopin/Question/Question.stories.js.map +1 -0
- package/dist/esm/components/Chopin/QuestionGroup/QuestionGroup.stories.js +40 -0
- package/dist/esm/components/Chopin/QuestionGroup/QuestionGroup.stories.js.map +1 -0
- package/dist/esm/components/Chopin/Section/Section.stories.js +16 -0
- package/dist/esm/components/Chopin/Section/Section.stories.js.map +1 -0
- package/dist/esm/components/Chopin/Steps/Steps.stories.js +12 -0
- package/dist/esm/components/Chopin/Steps/Steps.stories.js.map +1 -0
- package/dist/esm/components/Chopin/Testimonial/Testimonial.stories.js +15 -0
- package/dist/esm/components/Chopin/Testimonial/Testimonial.stories.js.map +1 -0
- package/dist/esm/components/Chopin/TradeSelector/TradeSelector.stories.js +52 -0
- package/dist/esm/components/Chopin/TradeSelector/TradeSelector.stories.js.map +1 -0
- package/dist/esm/components/Chopin/TradeSelector/TradeSelector.test.js +3 -0
- package/dist/esm/components/Chopin/TradeSelector/TradeSelector.test.js.map +1 -1
- package/dist/esm/components/Container/Container.stories.js +12 -0
- package/dist/esm/components/Container/Container.stories.js.map +1 -0
- package/dist/esm/components/DataTable/DataTable.stories.js +174 -0
- package/dist/esm/components/DataTable/DataTable.stories.js.map +1 -0
- package/dist/esm/components/DatePicker/DatePicker.stories.js +25 -0
- package/dist/esm/components/DatePicker/DatePicker.stories.js.map +1 -0
- package/dist/esm/components/Divider/Divider.stories.js +12 -0
- package/dist/esm/components/Divider/Divider.stories.js.map +1 -0
- package/dist/esm/components/DropdownMenu/DropdownMenu.stories.js +58 -0
- package/dist/esm/components/DropdownMenu/DropdownMenu.stories.js.map +1 -0
- package/dist/esm/components/ErrorMessage/ErrorMessage.stories.js +21 -0
- package/dist/esm/components/ErrorMessage/ErrorMessage.stories.js.map +1 -0
- package/dist/esm/components/Fieldset/Fieldset.stories.js +22 -0
- package/dist/esm/components/Fieldset/Fieldset.stories.js.map +1 -0
- package/dist/esm/components/Flex/Flex.stories.js +148 -0
- package/dist/esm/components/Flex/Flex.stories.js.map +1 -0
- package/dist/esm/components/Grid/Grid.js +8 -5
- package/dist/esm/components/Grid/Grid.js.map +1 -1
- package/dist/esm/components/Grid/Grid.stories.js +227 -0
- package/dist/esm/components/Grid/Grid.stories.js.map +1 -0
- package/dist/esm/components/Grid/Item.js +5 -3
- package/dist/esm/components/Grid/Item.js.map +1 -1
- package/dist/esm/components/Icon/Icon.stories.js +43 -0
- package/dist/esm/components/Icon/Icon.stories.js.map +1 -0
- package/dist/esm/components/Image/Image.stories.js +17 -0
- package/dist/esm/components/Image/Image.stories.js.map +1 -0
- package/dist/esm/components/Label/Label.stories.js +15 -0
- package/dist/esm/components/Label/Label.stories.js.map +1 -0
- package/dist/esm/components/Link/Link.stories.js +41 -0
- package/dist/esm/components/Link/Link.stories.js.map +1 -0
- package/dist/esm/components/LinkButton/LinkButton.stories.js +42 -0
- package/dist/esm/components/LinkButton/LinkButton.stories.js.map +1 -0
- package/dist/esm/components/List/List.stories.js +77 -0
- package/dist/esm/components/List/List.stories.js.map +1 -0
- package/dist/esm/components/LoadingIndicator/LoadingIndicator.js.map +1 -1
- package/dist/esm/components/LoadingIndicator/LoadingIndicator.stories.js +50 -0
- package/dist/esm/components/LoadingIndicator/LoadingIndicator.stories.js.map +1 -0
- package/dist/esm/components/MaskedField/MaskedField.stories.js +22 -0
- package/dist/esm/components/MaskedField/MaskedField.stories.js.map +1 -0
- package/dist/esm/components/Modal/Modal.js +2 -0
- package/dist/esm/components/Modal/Modal.js.map +1 -1
- package/dist/esm/components/Modal/Modal.stories.js +79 -0
- package/dist/esm/components/Modal/Modal.stories.js.map +1 -0
- package/dist/esm/components/NumberField/NumberField.stories.js +103 -0
- package/dist/esm/components/NumberField/NumberField.stories.js.map +1 -0
- package/dist/esm/components/PasswordField/PasswordField.stories.js +31 -0
- package/dist/esm/components/PasswordField/PasswordField.stories.js.map +1 -0
- package/dist/esm/components/Progress/Progress.stories.js +89 -0
- package/dist/esm/components/Progress/Progress.stories.js.map +1 -0
- package/dist/esm/components/Radio/Radio.stories.js +118 -0
- package/dist/esm/components/Radio/Radio.stories.js.map +1 -0
- package/dist/esm/components/Radio/RadioButton.stories.js +88 -0
- package/dist/esm/components/Radio/RadioButton.stories.js.map +1 -0
- package/dist/esm/components/SVG/SVG.stories.js +19 -0
- package/dist/esm/components/SVG/SVG.stories.js.map +1 -0
- package/dist/esm/components/SVG/SVG.test.js.map +1 -1
- package/dist/esm/components/Segment/Segment.stories.js +75 -0
- package/dist/esm/components/Segment/Segment.stories.js.map +1 -0
- package/dist/esm/components/Select/Select.stories.js +79 -0
- package/dist/esm/components/Select/Select.stories.js.map +1 -0
- package/dist/esm/components/Slider/Slider.js.map +1 -1
- package/dist/esm/components/Slider/Slider.stories.js +63 -0
- package/dist/esm/components/Slider/Slider.stories.js.map +1 -0
- package/dist/esm/components/Table/Table.stories.js +15 -0
- package/dist/esm/components/Table/Table.stories.js.map +1 -0
- package/dist/esm/components/Text/Text.stories.js +26 -0
- package/dist/esm/components/Text/Text.stories.js.map +1 -0
- package/dist/esm/components/TextArea/TextArea.stories.js +80 -0
- package/dist/esm/components/TextArea/TextArea.stories.js.map +1 -0
- package/dist/esm/components/TextField/TextField.stories.js +100 -0
- package/dist/esm/components/TextField/TextField.stories.js.map +1 -0
- package/dist/esm/components/Title/Title.stories.js +16 -0
- package/dist/esm/components/Title/Title.stories.js.map +1 -0
- package/dist/esm/components/VisuallyHidden/VisuallyHidden.stories.js +12 -0
- package/dist/esm/components/VisuallyHidden/VisuallyHidden.stories.js.map +1 -0
- package/dist/esm/hooks/index.js +1 -0
- package/dist/esm/hooks/index.js.map +1 -1
- package/dist/esm/hooks/useBodyScrollLock/index.js +2 -0
- package/dist/esm/hooks/useBodyScrollLock/index.js.map +1 -0
- package/dist/esm/hooks/useBodyScrollLock/useBodyScrollLock.js +21 -0
- package/dist/esm/hooks/useBodyScrollLock/useBodyScrollLock.js.map +1 -0
- package/dist/esm/hooks/useBodyScrollLock/useBodyScrollLock.test.js +29 -0
- package/dist/esm/hooks/useBodyScrollLock/useBodyScrollLock.test.js.map +1 -0
- package/dist/esm/hooks/useBreakpoint/useBreakpoint.stories.js +40 -0
- package/dist/esm/hooks/useBreakpoint/useBreakpoint.stories.js.map +1 -0
- package/dist/esm/tsconfig.esm.tsbuildinfo +1 -1
- package/dist/mobius.d.ts +15 -2
- package/package.json +2 -2
- package/src/components/Accordion/{Accordion.story.mdx → Accordion.mdx} +15 -96
- package/src/components/Accordion/Accordion.stories.tsx +87 -0
- package/src/components/Alert/{Alert.story.mdx → Alert.mdx} +5 -35
- package/src/components/Alert/Alert.stories.tsx +47 -0
- package/src/components/Box/{Box.story.mdx → Box.mdx} +5 -21
- package/src/components/Box/Box.stories.tsx +26 -0
- package/src/components/Breadcrumbs/{Breadcrumbs.story.mdx → Breadcrumbs.mdx} +15 -48
- package/src/components/Breadcrumbs/Breadcrumbs.stories.tsx +52 -0
- package/src/components/Button/Button.mdx +227 -0
- package/src/components/Button/Button.stories.tsx +225 -0
- package/src/components/Button/Button.story.styles.css +3 -0
- package/src/components/Checkbox/Checkbox.mdx +122 -0
- package/src/components/Checkbox/Checkbox.stories.tsx +122 -0
- package/src/components/Checkbox/{CheckboxGroup.story.mdx → CheckboxGroup.mdx} +12 -114
- package/src/components/Checkbox/CheckboxGroup.stories.tsx +109 -0
- package/src/components/Checkbox/types.ts +1 -1
- package/src/components/Chopin/Actions/{Actions.story.mdx → Actions.mdx} +17 -88
- package/src/components/Chopin/Actions/Actions.stories.tsx +81 -0
- package/src/components/Chopin/Footer/Footer.mdx +163 -0
- package/src/components/Chopin/Footer/Footer.stories.tsx +217 -0
- package/src/components/Chopin/Header/{Header.story.mdx → Header.mdx} +7 -47
- package/src/components/Chopin/Header/Header.stories.tsx +50 -0
- package/src/components/Chopin/PercentageTotalsQuestion/{PercentageTotalsQuestion.story.mdx → PercentageTotalsQuestion.mdx} +4 -36
- package/src/components/Chopin/PercentageTotalsQuestion/PercentageTotalsQuestion.stories.tsx +63 -0
- package/src/components/Chopin/Question/{Question.story.mdx → Question.mdx} +29 -227
- package/src/components/Chopin/Question/Question.stories.tsx +211 -0
- package/src/components/Chopin/QuestionGroup/QuestionGroup.mdx +149 -0
- package/src/components/Chopin/QuestionGroup/QuestionGroup.stories.tsx +187 -0
- package/src/components/Chopin/Section/{Section.story.mdx → Section.mdx} +6 -24
- package/src/components/Chopin/Section/Section.stories.tsx +30 -0
- package/src/components/Chopin/Steps/{Steps.story.mdx → Steps.mdx} +6 -20
- package/src/components/Chopin/Steps/Steps.stories.tsx +22 -0
- package/src/components/Chopin/Testimonial/{Testimonial.story.mdx → Testimonial.mdx} +4 -14
- package/src/components/Chopin/Testimonial/Testimonial.stories.tsx +23 -0
- package/src/components/Chopin/TradeSelector/{TradeSelector.story.mdx → TradeSelector.mdx} +14 -52
- package/src/components/Chopin/TradeSelector/TradeSelector.stories.tsx +67 -0
- package/src/components/Chopin/TradeSelector/TradeSelector.test.tsx +3 -0
- package/src/components/Container/{Container.story.mdx → Container.mdx} +4 -16
- package/src/components/Container/Container.stories.tsx +20 -0
- package/src/components/DataTable/{DataTable.story.mdx → DataTable.mdx} +10 -203
- package/src/components/DataTable/DataTable.stories.tsx +228 -0
- package/src/components/DatePicker/{DatePicker.story.mdx → DatePicker.mdx} +9 -29
- package/src/components/DatePicker/DatePicker.stories.tsx +32 -0
- package/src/components/Divider/{Divider.story.mdx → Divider.mdx} +4 -9
- package/src/components/Divider/Divider.stories.tsx +13 -0
- package/src/components/DropdownMenu/{DropdownMenu.story.mdx → DropdownMenu.mdx} +5 -39
- package/src/components/DropdownMenu/DropdownMenu.stories.tsx +84 -0
- package/src/components/DropdownMenu/DropdownMenu.story.styles.css +12 -0
- package/src/components/ErrorMessage/ErrorMessage.mdx +39 -0
- package/src/components/ErrorMessage/ErrorMessage.stories.tsx +24 -0
- package/src/components/Fieldset/{Fieldset.story.mdx → Fieldset.mdx} +5 -28
- package/src/components/Fieldset/Fieldset.stories.tsx +40 -0
- package/src/components/Flex/{Flex.story.mdx → Flex.mdx} +13 -150
- package/src/components/Flex/Flex.stories.tsx +182 -0
- package/src/components/Grid/{Grid.story.mdx → Grid.mdx} +78 -360
- package/src/components/Grid/Grid.stories.tsx +375 -0
- package/src/components/Grid/Grid.story.styles.css +4 -0
- package/src/components/Grid/Grid.tsx +16 -4
- package/src/components/Grid/Item.tsx +14 -2
- package/src/components/Icon/Icon.mdx +75 -0
- package/src/components/Icon/Icon.stories.tsx +50 -0
- package/src/components/Icon/types.ts +2 -0
- package/src/components/Image/{Image.story.mdx → Image.mdx} +4 -9
- package/src/components/Image/Image.stories.tsx +20 -0
- package/src/components/Label/{Label.story.mdx → Label.mdx} +4 -9
- package/src/components/Label/Label.stories.tsx +16 -0
- package/src/components/Link/{Link.story.mdx → Link.mdx} +8 -52
- package/src/components/Link/Link.stories.tsx +50 -0
- package/src/components/LinkButton/LinkButton.mdx +45 -0
- package/src/components/LinkButton/LinkButton.stories.tsx +61 -0
- package/src/components/List/{List.story.mdx → List.mdx} +18 -113
- package/src/components/List/List.stories.tsx +135 -0
- package/src/components/LoadingIndicator/LoadingIndicator.mdx +59 -0
- package/src/components/LoadingIndicator/LoadingIndicator.stories.tsx +59 -0
- package/src/components/LoadingIndicator/LoadingIndicator.tsx +2 -0
- package/src/components/MaskedField/{MaskedField.story.mdx → MaskedField.mdx} +11 -12
- package/src/components/MaskedField/MaskedField.stories.tsx +26 -0
- package/src/components/Modal/{Modal.story.mdx → Modal.mdx} +20 -84
- package/src/components/Modal/Modal.stories.tsx +181 -0
- package/src/components/Modal/Modal.tsx +2 -0
- package/src/components/NumberField/NumberField.mdx +104 -0
- package/src/components/NumberField/NumberField.stories.tsx +114 -0
- package/src/components/PasswordField/{PasswordField.story.mdx → PasswordField.mdx} +10 -49
- package/src/components/PasswordField/PasswordField.stories.tsx +36 -0
- package/src/components/Progress/Progress.mdx +83 -0
- package/src/components/Progress/Progress.stories.tsx +105 -0
- package/src/components/Radio/Radio.mdx +202 -0
- package/src/components/Radio/Radio.stories.tsx +202 -0
- package/src/components/Radio/{RadioButton.story.mdx → RadioButton.mdx} +15 -156
- package/src/components/Radio/RadioButton.stories.tsx +153 -0
- package/src/components/SVG/{SVG.story.mdx → SVG.mdx} +5 -10
- package/src/components/SVG/SVG.stories.tsx +29 -0
- package/src/components/SVG/SVG.test.tsx +3 -14
- package/src/components/Segment/{Segment.story.mdx → Segment.mdx} +79 -107
- package/src/components/Segment/Segment.stories.tsx +129 -0
- package/src/components/Select/{Select.story.mdx → Select.mdx} +25 -186
- package/src/components/Select/Select.stories.tsx +163 -0
- package/src/components/Slider/Slider.mdx +55 -0
- package/src/components/Slider/Slider.stories.tsx +82 -0
- package/src/components/Slider/Slider.tsx +5 -2
- package/src/components/Table/Table.mdx +74 -0
- package/src/components/Table/Table.stories.tsx +149 -0
- package/src/components/Text/{Text.story.mdx → Text.mdx} +20 -16
- package/src/components/Text/Text.stories.tsx +28 -0
- package/src/components/TextArea/TextArea.mdx +82 -0
- package/src/components/TextArea/TextArea.stories.tsx +89 -0
- package/src/components/TextField/TextField.mdx +122 -0
- package/src/components/TextField/TextField.stories.tsx +111 -0
- package/src/components/Title/{Title.story.mdx → Title.mdx} +4 -12
- package/src/components/Title/Title.stories.tsx +17 -0
- package/src/components/VisuallyHidden/{VisuallyHidden.story.mdx → VisuallyHidden.mdx} +4 -13
- package/src/components/VisuallyHidden/VisuallyHidden.stories.tsx +17 -0
- package/src/hooks/index.tsx +1 -0
- package/src/hooks/useBodyScrollLock/index.ts +1 -0
- package/src/hooks/useBodyScrollLock/useBodyScrollLock.test.ts +34 -0
- package/src/hooks/useBodyScrollLock/useBodyScrollLock.ts +25 -0
- package/src/hooks/useBreakpoint/{useBreakpoint.story.mdx → useBreakpoint.mdx} +6 -47
- package/src/hooks/useBreakpoint/useBreakpoint.stories.tsx +61 -0
- package/src/components/Button/Button.story.mdx +0 -401
- package/src/components/Checkbox/Checkbox.story.mdx +0 -233
- package/src/components/Chopin/Footer/Footer.story.mdx +0 -368
- package/src/components/Chopin/QuestionGroup/QuestionGroup.story.mdx +0 -309
- package/src/components/ErrorMessage/ErrorMessage.story.mdx +0 -57
- package/src/components/Icon/Icon.story.mdx +0 -175
- package/src/components/LinkButton/LinkButton.story.mdx +0 -96
- package/src/components/LoadingIndicator/LoadingIndicator.story.mdx +0 -96
- package/src/components/NumberField/NumberField.story.mdx +0 -193
- package/src/components/Progress/Progress.story.mdx +0 -172
- package/src/components/Radio/Radio.story.mdx +0 -402
- package/src/components/Slider/Slider.story.mdx +0 -130
- package/src/components/Table/Table.story.mdx +0 -213
- package/src/components/TextArea/TextArea.story.mdx +0 -172
- package/src/components/TextField/TextField.story.mdx +0 -232
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { MaskedField } from "./MaskedField";
|
|
3
|
+
import { excludeControls } from "../../utils/excludeControls";
|
|
4
|
+
export default {
|
|
5
|
+
title: "Components/MaskedField",
|
|
6
|
+
component: MaskedField,
|
|
7
|
+
argTypes: Object.assign({ type: {
|
|
8
|
+
control: { type: "radio" },
|
|
9
|
+
options: ["text", "number"],
|
|
10
|
+
} }, excludeControls("className")),
|
|
11
|
+
};
|
|
12
|
+
export const Normal = {
|
|
13
|
+
render: (args) => _jsx(MaskedField, Object.assign({}, args)),
|
|
14
|
+
args: {
|
|
15
|
+
label: "MaskedField",
|
|
16
|
+
pattern: "ssn",
|
|
17
|
+
isRequired: false,
|
|
18
|
+
type: "",
|
|
19
|
+
errorMessage: "",
|
|
20
|
+
},
|
|
21
|
+
};
|
|
22
|
+
//# sourceMappingURL=MaskedField.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MaskedField.stories.js","sourceRoot":"","sources":["../../../../src/components/MaskedField/MaskedField.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAoB,MAAM,eAAe,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAE9D,eAAe;IACb,KAAK,EAAE,wBAAwB;IAC/B,SAAS,EAAE,WAAW;IACtB,QAAQ,kBACN,IAAI,EAAE;YACJ,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;YAC1B,OAAO,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC;SAC5B,IACE,eAAe,CAAC,WAAW,CAAC,CAChC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAA6B;IAC9C,MAAM,EAAE,CAAC,IAAsB,EAAE,EAAE,CAAC,KAAC,WAAW,oBAAK,IAAI,EAAI;IAC7D,IAAI,EAAE;QACJ,KAAK,EAAE,aAAa;QACpB,OAAO,EAAE,KAAK;QACd,UAAU,EAAE,KAAK;QACjB,IAAI,EAAE,EAAE;QACR,YAAY,EAAE,EAAE;KACjB;CACF,CAAC"}
|
|
@@ -4,9 +4,11 @@ import { Children, isValidElement, cloneElement, useEffect, } from "react";
|
|
|
4
4
|
import ReactModal from "react-modal";
|
|
5
5
|
import clsx from "clsx";
|
|
6
6
|
import { sizeClasses } from "../../utils/sizeClasses";
|
|
7
|
+
import { useBodyScrollLock } from "../../hooks/useBodyScrollLock";
|
|
7
8
|
const Modal = ({ isOpen, onClose, children, className, closeLabel, size = "md", appElement = "body", preventCloseOnEsc, animation, shouldFocusAfterRender = true, parentSelector, }) => {
|
|
8
9
|
const noPreference = window.matchMedia("(prefers-reduced-motion: no-preference)");
|
|
9
10
|
const shouldAnimate = noPreference.matches && !!animation;
|
|
11
|
+
useBodyScrollLock({ enabled: isOpen });
|
|
10
12
|
const modalClasses = clsx("mobius", "mobius/Modal", Object.assign({ "--slide-up": animation === "slideUp", "--fade": animation === "fade", "--has-reduced-motion": !noPreference.matches, "--is-fullscreen": size === "fullscreen" }, (size !== "fullscreen" && sizeClasses(size))), className);
|
|
11
13
|
const overlayClasses = clsx("mobius/ModalOverlay", {
|
|
12
14
|
"--fade": shouldAnimate,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EACL,QAAQ,EACR,cAAc,EACd,YAAY,EACZ,SAAS,GAEV,MAAM,OAAO,CAAC;AACf,OAAO,UAAU,MAAM,aAAa,CAAC;AACrC,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;
|
|
1
|
+
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EACL,QAAQ,EACR,cAAc,EACd,YAAY,EACZ,SAAS,GAEV,MAAM,OAAO,CAAC;AACf,OAAO,UAAU,MAAM,aAAa,CAAC;AACrC,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAmBlE,MAAM,KAAK,GAAG,CAAC,EACb,MAAM,EACN,OAAO,EACP,QAAQ,EACR,SAAS,EACT,UAAU,EACV,IAAI,GAAG,IAAI,EACX,UAAU,GAAG,MAAM,EACnB,iBAAiB,EACjB,SAAS,EACT,sBAAsB,GAAG,IAAI,EAC7B,cAAc,GACH,EAAE,EAAE;IACf,MAAM,YAAY,GAAG,MAAM,CAAC,UAAU,CACpC,yCAAyC,CAC1C,CAAC;IACF,MAAM,aAAa,GAAG,YAAY,CAAC,OAAO,IAAI,CAAC,CAAC,SAAS,CAAC;IAC1D,iBAAiB,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC,CAAC;IAEvC,MAAM,YAAY,GAAG,IAAI,CACvB,QAAQ,EACR,cAAc,kBAEZ,YAAY,EAAE,SAAS,KAAK,SAAS,EACrC,QAAQ,EAAE,SAAS,KAAK,MAAM,EAC9B,sBAAsB,EAAE,CAAC,YAAY,CAAC,OAAO,EAC7C,iBAAiB,EAAE,IAAI,KAAK,YAAY,IACrC,CAAC,IAAI,KAAK,YAAY,IAAI,WAAW,CAAC,IAAI,CAAC,CAAC,GAEjD,SAAS,CACV,CAAC;IAEF,MAAM,cAAc,GAAG,IAAI,CAAC,qBAAqB,EAAE;QACjD,QAAQ,EAAE,aAAa;KACxB,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,wDAAwD;QACxD,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,MAAM,EAAE;YACnC,UAAU,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;SACtC;IACH,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,OAAO,CACL,KAAC,UAAU,kBACT,MAAM,EAAE,MAAM,EACd,cAAc,EAAE,OAAO,EACvB,SAAS,EAAE;YACT,IAAI,EAAE,YAAY;YAClB,SAAS,EAAE,EAAE;YACb,WAAW,EAAE,cAAc;SAC5B,EACD,eAAe,EAAC,oBAAoB,EACpC,gBAAgB,EAAE;YAChB,IAAI,EAAE,cAAc;YACpB,SAAS,EAAE,EAAE;YACb,WAAW,EAAE,cAAc;SAC5B,EACD,iBAAiB,EAAC,uBAAuB,EACzC,WAAW,EAAE,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,MAAM,EAC5C,gBAAgB,EAAE,CAAC,iBAAiB,EACpC,cAAc,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EACvC,sBAAsB,EAAE,sBAAsB,EAC9C,cAAc,EAAE,cAAc,gBAE7B,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,KAAK,CAAC,EAAE;YAC9B,IAAI,cAAc,CAAC,KAAK,CAAC,EAAE;gBACzB,OAAO,YAAY,CAAC,KAAK,EAAE;oBACzB,OAAO;oBACP,UAAU;iBACJ,CAAC,CAAC;aACX;YAED,OAAO,KAAK,CAAC;QACf,CAAC,CAAC,IACS,CACd,CAAC;AACJ,CAAC,CAAC;AAEF,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,CAAC"}
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { useState } from "react";
|
|
3
|
+
import { Button } from "../Button";
|
|
4
|
+
import { Modal } from ".";
|
|
5
|
+
import { excludeControls } from "../../utils/excludeControls";
|
|
6
|
+
const Demo = (props) => {
|
|
7
|
+
const [open, setOpen] = useState(false);
|
|
8
|
+
return (_jsxs(_Fragment, { children: [_jsx(Button, Object.assign({ onClick: () => setOpen(true) }, { children: "Show Modal" })), _jsxs(Modal, Object.assign({}, props, { isOpen: open, onClose: () => setOpen(false) }, { children: [_jsx(Modal.Header, { children: "The Latin Modal" }), _jsx(Modal.Content, { children: "Aliquam fringilla quam vel purus rhoncus interdum in quis sapien. Sed at eros et lectus mollis posuere. Morbi augue augue, venenatis vel consectetur sed, vulputate et lorem. Integer venenatis nibh molestie commodo lobortis. Phasellus sit amet dignissim nisi. Vivamus nisi augue, scelerisque commodo libero vitae, vulputate interdum ex. Integer non risus sollicitudin, cursus ipsum vitae, rhoncus nulla." })] }))] }));
|
|
9
|
+
};
|
|
10
|
+
const FullScreenDemo = (props) => {
|
|
11
|
+
const [open, setOpen] = useState(false);
|
|
12
|
+
return (_jsxs(_Fragment, { children: [_jsx(Button, Object.assign({ onClick: () => setOpen(true), variant: "secondary" }, { children: "Show Fullscreen Modal \uD83D\uDE80" })), _jsxs(Modal, Object.assign({}, props, { size: "fullscreen", isOpen: open, onClose: () => setOpen(false), preventCloseOnEsc: true }, { children: [_jsx(Modal.Header, { children: "The Full Screen Modal" }), _jsx(Modal.Content, { children: "Aliquam fringilla quam vel purus rhoncus interdum in quis sapien. Sed at eros et lectus mollis posuere. Morbi augue augue, venenatis vel consectetur sed, vulputate et lorem. Integer venenatis nibh molestie commodo lobortis. Phasellus sit amet dignissim nisi. Vivamus nisi augue, scelerisque commodo libero vitae, vulputate interdum ex. Integer non risus sollicitudin, cursus ipsum vitae, rhoncus nulla." })] }))] }));
|
|
13
|
+
};
|
|
14
|
+
const WithCustomSizeDemo = (props) => {
|
|
15
|
+
const [open, setOpen] = useState(false);
|
|
16
|
+
return (_jsxs(_Fragment, { children: [_jsx(Button, Object.assign({ onClick: () => setOpen(true), variant: "secondary" }, { children: "Show Custom Size Modal \uD83D\uDD38" })), _jsxs(Modal, Object.assign({}, props, { size: "sm", isOpen: open, onClose: () => setOpen(false), preventCloseOnEsc: true }, { children: [_jsx(Modal.Header, { children: "The Custom Size Modal" }), _jsx(Modal.Content, { children: "Aliquam fringilla quam vel purus rhoncus interdum in quis sapien. Sed at eros et lectus mollis posuere. Morbi augue augue, venenatis vel consectetur sed, vulputate et lorem. Integer venenatis nibh molestie commodo lobortis. Phasellus sit amet dignissim nisi. Vivamus nisi augue, scelerisque commodo libero vitae, vulputate interdum ex. Integer non risus sollicitudin, cursus ipsum vitae, rhoncus nulla." })] }))] }));
|
|
17
|
+
};
|
|
18
|
+
const WithAnimationDemo = ({ animation, }) => {
|
|
19
|
+
const [open, setOpen] = useState(false);
|
|
20
|
+
return (_jsxs(_Fragment, { children: [_jsx(Button, Object.assign({ onClick: () => setOpen(true) }, { children: "Show Modal With Animation \uD83E\uDDD9\u200D\u2642\uFE0F" })), _jsxs(Modal, Object.assign({ isOpen: open, onClose: () => setOpen(false), animation: animation }, { children: [_jsx(Modal.Header, { children: "The Latin Modal" }), _jsx(Modal.Content, { children: "Aliquam fringilla quam vel purus rhoncus interdum in quis sapien. Sed at eros et lectus mollis posuere. Morbi augue augue, venenatis vel consectetur sed, vulputate et lorem. Integer venenatis nibh molestie commodo lobortis. Phasellus sit amet dignissim nisi. Vivamus nisi augue, scelerisque commodo libero vitae, vulputate interdum ex. Integer non risus sollicitudin, cursus ipsum vitae, rhoncus nulla." })] }))] }));
|
|
21
|
+
};
|
|
22
|
+
export default {
|
|
23
|
+
title: "Components/Modal",
|
|
24
|
+
component: Modal,
|
|
25
|
+
argTypes: Object.assign({ animation: {
|
|
26
|
+
options: ["slideUp", "fade", "neither"],
|
|
27
|
+
control: { type: "radio" },
|
|
28
|
+
mapping: {
|
|
29
|
+
slideUp: "slideUp",
|
|
30
|
+
fade: "fade",
|
|
31
|
+
neither: undefined,
|
|
32
|
+
},
|
|
33
|
+
}, size: {
|
|
34
|
+
control: { type: "radio" },
|
|
35
|
+
options: ["md", "fullscreen"],
|
|
36
|
+
} }, excludeControls("className", "onClose", "appElement", "parentSelector", "isOpen")),
|
|
37
|
+
};
|
|
38
|
+
export const Normal = {
|
|
39
|
+
render: (args) => _jsx(Demo, Object.assign({}, args)),
|
|
40
|
+
args: {
|
|
41
|
+
isOpen: false,
|
|
42
|
+
shouldFocusAfterRender: true,
|
|
43
|
+
preventCloseOnEsc: false,
|
|
44
|
+
closeLabel: "Close",
|
|
45
|
+
size: "md",
|
|
46
|
+
},
|
|
47
|
+
};
|
|
48
|
+
export const FullScreen = {
|
|
49
|
+
render: (args) => _jsx(FullScreenDemo, Object.assign({}, args)),
|
|
50
|
+
args: {
|
|
51
|
+
isOpen: false,
|
|
52
|
+
shouldFocusAfterRender: true,
|
|
53
|
+
preventCloseOnEsc: false,
|
|
54
|
+
closeLabel: "Close",
|
|
55
|
+
size: "fullscreen",
|
|
56
|
+
},
|
|
57
|
+
};
|
|
58
|
+
export const WithCustomSize = {
|
|
59
|
+
render: (args) => _jsx(WithCustomSizeDemo, Object.assign({}, args)),
|
|
60
|
+
args: {
|
|
61
|
+
isOpen: false,
|
|
62
|
+
shouldFocusAfterRender: true,
|
|
63
|
+
preventCloseOnEsc: false,
|
|
64
|
+
closeLabel: "Close",
|
|
65
|
+
size: "sm",
|
|
66
|
+
},
|
|
67
|
+
};
|
|
68
|
+
export const WithAnimation = {
|
|
69
|
+
render: (args) => _jsx(WithAnimationDemo, Object.assign({}, args)),
|
|
70
|
+
args: {
|
|
71
|
+
isOpen: false,
|
|
72
|
+
animation: "slideUp",
|
|
73
|
+
shouldFocusAfterRender: true,
|
|
74
|
+
preventCloseOnEsc: false,
|
|
75
|
+
closeLabel: "Close",
|
|
76
|
+
size: "md",
|
|
77
|
+
},
|
|
78
|
+
};
|
|
79
|
+
//# sourceMappingURL=Modal.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Modal.stories.js","sourceRoot":"","sources":["../../../../src/components/Modal/Modal.stories.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { NumberField } from "./NumberField";
|
|
3
|
+
import { excludeControls } from "../../utils/excludeControls";
|
|
4
|
+
export default {
|
|
5
|
+
title: "Forms/NumberField",
|
|
6
|
+
component: NumberField,
|
|
7
|
+
argTypes: Object.assign({ validationState: {
|
|
8
|
+
options: ["valid", "invalid", "neither"],
|
|
9
|
+
control: { type: "radio" },
|
|
10
|
+
mapping: {
|
|
11
|
+
valid: "valid",
|
|
12
|
+
invalid: "invalid",
|
|
13
|
+
neither: "",
|
|
14
|
+
},
|
|
15
|
+
}, minValue: {
|
|
16
|
+
control: {
|
|
17
|
+
control: { type: "range" },
|
|
18
|
+
min: 0,
|
|
19
|
+
max: 10,
|
|
20
|
+
step: 1,
|
|
21
|
+
},
|
|
22
|
+
}, maxValue: {
|
|
23
|
+
control: {
|
|
24
|
+
control: { type: "range" },
|
|
25
|
+
min: 0,
|
|
26
|
+
max: 10,
|
|
27
|
+
step: 1,
|
|
28
|
+
},
|
|
29
|
+
} }, excludeControls("className", "value", "aria-describedby")),
|
|
30
|
+
args: {
|
|
31
|
+
minValue: 0,
|
|
32
|
+
maxValue: 100,
|
|
33
|
+
},
|
|
34
|
+
};
|
|
35
|
+
export const Normal = {
|
|
36
|
+
render: (args) => _jsx(NumberField, Object.assign({}, args)),
|
|
37
|
+
args: {
|
|
38
|
+
label: "Number field",
|
|
39
|
+
defaultValue: 0,
|
|
40
|
+
errorMessage: "",
|
|
41
|
+
step: 1,
|
|
42
|
+
isRequired: false,
|
|
43
|
+
},
|
|
44
|
+
};
|
|
45
|
+
export const Formatted = {
|
|
46
|
+
render: (args) => _jsx(NumberField, Object.assign({}, args)),
|
|
47
|
+
args: {
|
|
48
|
+
label: "Number field",
|
|
49
|
+
defaultValue: 0,
|
|
50
|
+
formatOptions: {
|
|
51
|
+
style: "percent",
|
|
52
|
+
},
|
|
53
|
+
errorMessage: "",
|
|
54
|
+
step: 1,
|
|
55
|
+
isRequired: false,
|
|
56
|
+
},
|
|
57
|
+
};
|
|
58
|
+
export const LimitedRange = {
|
|
59
|
+
render: (args) => _jsx(NumberField, Object.assign({}, args)),
|
|
60
|
+
args: {
|
|
61
|
+
label: "Number field",
|
|
62
|
+
minValue: -10,
|
|
63
|
+
maxValue: 10,
|
|
64
|
+
defaultValue: 0,
|
|
65
|
+
errorMessage: "",
|
|
66
|
+
step: 1,
|
|
67
|
+
isRequired: false,
|
|
68
|
+
},
|
|
69
|
+
};
|
|
70
|
+
export const Valid = {
|
|
71
|
+
render: (args) => _jsx(NumberField, Object.assign({}, args)),
|
|
72
|
+
args: {
|
|
73
|
+
label: "Number field",
|
|
74
|
+
validationState: "valid",
|
|
75
|
+
defaultValue: 0,
|
|
76
|
+
errorMessage: "",
|
|
77
|
+
step: 1,
|
|
78
|
+
isRequired: false,
|
|
79
|
+
},
|
|
80
|
+
};
|
|
81
|
+
export const Invalid = {
|
|
82
|
+
render: (args) => _jsx(NumberField, Object.assign({}, args)),
|
|
83
|
+
args: {
|
|
84
|
+
label: "Number field",
|
|
85
|
+
validationState: "invalid",
|
|
86
|
+
errorMessage: "Error message",
|
|
87
|
+
defaultValue: 0,
|
|
88
|
+
step: 1,
|
|
89
|
+
isRequired: false,
|
|
90
|
+
},
|
|
91
|
+
};
|
|
92
|
+
export const Disabled = {
|
|
93
|
+
render: (args) => _jsx(NumberField, Object.assign({}, args)),
|
|
94
|
+
args: {
|
|
95
|
+
label: "Number field",
|
|
96
|
+
isDisabled: true,
|
|
97
|
+
defaultValue: 0,
|
|
98
|
+
errorMessage: "",
|
|
99
|
+
step: 1,
|
|
100
|
+
isRequired: false,
|
|
101
|
+
},
|
|
102
|
+
};
|
|
103
|
+
//# sourceMappingURL=NumberField.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"NumberField.stories.js","sourceRoot":"","sources":["../../../../src/components/NumberField/NumberField.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAoB,MAAM,eAAe,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAE9D,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,WAAW;IACtB,QAAQ,kBACN,eAAe,EAAE;YACf,OAAO,EAAE,CAAC,OAAO,EAAE,SAAS,EAAE,SAAS,CAAC;YACxC,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;YAC1B,OAAO,EAAE;gBACP,KAAK,EAAE,OAAO;gBACd,OAAO,EAAE,SAAS;gBAClB,OAAO,EAAE,EAAE;aACZ;SACF,EACD,QAAQ,EAAE;YACR,OAAO,EAAE;gBACP,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;gBAC1B,GAAG,EAAE,CAAC;gBACN,GAAG,EAAE,EAAE;gBACP,IAAI,EAAE,CAAC;aACR;SACF,EACD,QAAQ,EAAE;YACR,OAAO,EAAE;gBACP,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;gBAC1B,GAAG,EAAE,CAAC;gBACN,GAAG,EAAE,EAAE;gBACP,IAAI,EAAE,CAAC;aACR;SACF,IACE,eAAe,CAAC,WAAW,EAAE,OAAO,EAAE,kBAAkB,CAAC,CAC7D;IACD,IAAI,EAAE;QACJ,QAAQ,EAAE,CAAC;QACX,QAAQ,EAAE,GAAG;KACd;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAA6B;IAC9C,MAAM,EAAE,CAAC,IAAsB,EAAE,EAAE,CAAC,KAAC,WAAW,oBAAK,IAAI,EAAI;IAC7D,IAAI,EAAE;QACJ,KAAK,EAAE,cAAc;QACrB,YAAY,EAAE,CAAC;QACf,YAAY,EAAE,EAAE;QAChB,IAAI,EAAE,CAAC;QACP,UAAU,EAAE,KAAK;KAClB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAA6B;IACjD,MAAM,EAAE,CAAC,IAAsB,EAAE,EAAE,CAAC,KAAC,WAAW,oBAAK,IAAI,EAAI;IAC7D,IAAI,EAAE;QACJ,KAAK,EAAE,cAAc;QACrB,YAAY,EAAE,CAAC;QACf,aAAa,EAAE;YACb,KAAK,EAAE,SAAS;SACjB;QACD,YAAY,EAAE,EAAE;QAChB,IAAI,EAAE,CAAC;QACP,UAAU,EAAE,KAAK;KAClB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAA6B;IACpD,MAAM,EAAE,CAAC,IAAsB,EAAE,EAAE,CAAC,KAAC,WAAW,oBAAK,IAAI,EAAI;IAC7D,IAAI,EAAE;QACJ,KAAK,EAAE,cAAc;QACrB,QAAQ,EAAE,CAAC,EAAE;QACb,QAAQ,EAAE,EAAE;QACZ,YAAY,EAAE,CAAC;QACf,YAAY,EAAE,EAAE;QAChB,IAAI,EAAE,CAAC;QACP,UAAU,EAAE,KAAK;KAClB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAA6B;IAC7C,MAAM,EAAE,CAAC,IAAsB,EAAE,EAAE,CAAC,KAAC,WAAW,oBAAK,IAAI,EAAI;IAC7D,IAAI,EAAE;QACJ,KAAK,EAAE,cAAc;QACrB,eAAe,EAAE,OAAO;QACxB,YAAY,EAAE,CAAC;QACf,YAAY,EAAE,EAAE;QAChB,IAAI,EAAE,CAAC;QACP,UAAU,EAAE,KAAK;KAClB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAA6B;IAC/C,MAAM,EAAE,CAAC,IAAsB,EAAE,EAAE,CAAC,KAAC,WAAW,oBAAK,IAAI,EAAI;IAC7D,IAAI,EAAE;QACJ,KAAK,EAAE,cAAc;QACrB,eAAe,EAAE,SAAS;QAC1B,YAAY,EAAE,eAAe;QAC7B,YAAY,EAAE,CAAC;QACf,IAAI,EAAE,CAAC;QACP,UAAU,EAAE,KAAK;KAClB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAA6B;IAChD,MAAM,EAAE,CAAC,IAAsB,EAAE,EAAE,CAAC,KAAC,WAAW,oBAAK,IAAI,EAAI;IAC7D,IAAI,EAAE;QACJ,KAAK,EAAE,cAAc;QACrB,UAAU,EAAE,IAAI;QAChB,YAAY,EAAE,CAAC;QACf,YAAY,EAAE,EAAE;QAChB,IAAI,EAAE,CAAC;QACP,UAAU,EAAE,KAAK;KAClB;CACF,CAAC"}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { PasswordField } from "./PasswordField";
|
|
3
|
+
import { excludeControls } from "../../utils/excludeControls";
|
|
4
|
+
export default {
|
|
5
|
+
title: "Forms/PasswordField",
|
|
6
|
+
component: PasswordField,
|
|
7
|
+
argTypes: Object.assign({ validationState: {
|
|
8
|
+
options: ["valid", "invalid", "neither"],
|
|
9
|
+
control: { type: "radio" },
|
|
10
|
+
mapping: {
|
|
11
|
+
valid: "valid",
|
|
12
|
+
invalid: "invalid",
|
|
13
|
+
neither: "",
|
|
14
|
+
},
|
|
15
|
+
}, type: {
|
|
16
|
+
control: { type: "radio" },
|
|
17
|
+
options: ["text", "password"],
|
|
18
|
+
} }, excludeControls("className")),
|
|
19
|
+
};
|
|
20
|
+
export const Normal = {
|
|
21
|
+
render: (args) => _jsx(PasswordField, Object.assign({}, args)),
|
|
22
|
+
args: {
|
|
23
|
+
label: "Password",
|
|
24
|
+
placeholder: "",
|
|
25
|
+
isDisabled: false,
|
|
26
|
+
errorMessage: "",
|
|
27
|
+
type: "password",
|
|
28
|
+
isRequired: false,
|
|
29
|
+
},
|
|
30
|
+
};
|
|
31
|
+
//# sourceMappingURL=PasswordField.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PasswordField.stories.js","sourceRoot":"","sources":["../../../../src/components/PasswordField/PasswordField.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAsB,MAAM,iBAAiB,CAAC;AACpE,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAE9D,eAAe;IACb,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,aAAa;IACxB,QAAQ,kBACN,eAAe,EAAE;YACf,OAAO,EAAE,CAAC,OAAO,EAAE,SAAS,EAAE,SAAS,CAAC;YACxC,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;YAC1B,OAAO,EAAE;gBACP,KAAK,EAAE,OAAO;gBACd,OAAO,EAAE,SAAS;gBAClB,OAAO,EAAE,EAAE;aACZ;SACF,EACD,IAAI,EAAE;YACJ,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;YAC1B,OAAO,EAAE,CAAC,MAAM,EAAE,UAAU,CAAC;SAC9B,IACE,eAAe,CAAC,WAAW,CAAC,CAChC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAA+B;IAChD,MAAM,EAAE,CAAC,IAAwB,EAAE,EAAE,CAAC,KAAC,aAAa,oBAAK,IAAI,EAAI;IACjE,IAAI,EAAE;QACJ,KAAK,EAAE,UAAU;QACjB,WAAW,EAAE,EAAE;QACf,UAAU,EAAE,KAAK;QACjB,YAAY,EAAE,EAAE;QAChB,IAAI,EAAE,UAAU;QAChB,UAAU,EAAE,KAAK;KAClB;CACF,CAAC"}
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Progress } from "./Progress";
|
|
3
|
+
import { excludeControls } from "../../utils/excludeControls";
|
|
4
|
+
const customValueFormatter = (value, minValue, maxValue) => `Step ${value} of ${maxValue}`;
|
|
5
|
+
export default {
|
|
6
|
+
title: "Components/Progress",
|
|
7
|
+
component: Progress,
|
|
8
|
+
argTypes: Object.assign({ value: {
|
|
9
|
+
control: {
|
|
10
|
+
control: { type: "range" },
|
|
11
|
+
min: 0,
|
|
12
|
+
max: 10,
|
|
13
|
+
step: 1,
|
|
14
|
+
},
|
|
15
|
+
}, minValue: {
|
|
16
|
+
control: {
|
|
17
|
+
control: { type: "range" },
|
|
18
|
+
min: 0,
|
|
19
|
+
max: 10,
|
|
20
|
+
step: 1,
|
|
21
|
+
},
|
|
22
|
+
}, maxValue: {
|
|
23
|
+
control: {
|
|
24
|
+
control: { type: "range" },
|
|
25
|
+
min: 0,
|
|
26
|
+
max: 10,
|
|
27
|
+
step: 1,
|
|
28
|
+
},
|
|
29
|
+
}, label: {
|
|
30
|
+
control: {
|
|
31
|
+
control: { type: "text" },
|
|
32
|
+
},
|
|
33
|
+
}, variant: {
|
|
34
|
+
control: { type: "radio" },
|
|
35
|
+
options: ["primary", "secondary"],
|
|
36
|
+
} }, excludeControls("className", "valueFormatter")),
|
|
37
|
+
};
|
|
38
|
+
export const Primary = {
|
|
39
|
+
render: (args) => _jsx(Progress, Object.assign({}, args)),
|
|
40
|
+
args: {
|
|
41
|
+
value: 2,
|
|
42
|
+
minValue: 0,
|
|
43
|
+
maxValue: 10,
|
|
44
|
+
label: "Progress",
|
|
45
|
+
variant: "primary",
|
|
46
|
+
showValueLabel: true,
|
|
47
|
+
},
|
|
48
|
+
};
|
|
49
|
+
export const Secondary = {
|
|
50
|
+
render: (args) => _jsx(Progress, Object.assign({}, args)),
|
|
51
|
+
args: {
|
|
52
|
+
value: 2,
|
|
53
|
+
minValue: 0,
|
|
54
|
+
maxValue: 10,
|
|
55
|
+
label: "Secondary",
|
|
56
|
+
variant: "secondary",
|
|
57
|
+
showValueLabel: true,
|
|
58
|
+
},
|
|
59
|
+
};
|
|
60
|
+
export const NoVisibleLabel = {
|
|
61
|
+
render: (args) => _jsx(Progress, Object.assign({}, args)),
|
|
62
|
+
args: {
|
|
63
|
+
value: 1,
|
|
64
|
+
minValue: 0,
|
|
65
|
+
maxValue: 4,
|
|
66
|
+
label: "",
|
|
67
|
+
variant: "primary",
|
|
68
|
+
"aria-label": "Progress",
|
|
69
|
+
showValueLabel: true,
|
|
70
|
+
},
|
|
71
|
+
parameters: {
|
|
72
|
+
controls: {
|
|
73
|
+
exclude: ["aria-label"],
|
|
74
|
+
},
|
|
75
|
+
},
|
|
76
|
+
};
|
|
77
|
+
export const CustomValueFormat = {
|
|
78
|
+
render: (args) => _jsx(Progress, Object.assign({}, args)),
|
|
79
|
+
args: {
|
|
80
|
+
value: 1,
|
|
81
|
+
minValue: 0,
|
|
82
|
+
maxValue: 4,
|
|
83
|
+
label: "Progress",
|
|
84
|
+
variant: "primary",
|
|
85
|
+
showValueLabel: true,
|
|
86
|
+
valueFormatter: customValueFormatter,
|
|
87
|
+
},
|
|
88
|
+
};
|
|
89
|
+
//# sourceMappingURL=Progress.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Progress.stories.js","sourceRoot":"","sources":["../../../../src/components/Progress/Progress.stories.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Radio } from "./Radio";
|
|
3
|
+
import { RadioGroup } from "./RadioGroup";
|
|
4
|
+
import { Flex } from "../Flex";
|
|
5
|
+
import { Divider } from "../Divider";
|
|
6
|
+
import { excludeControls } from "../../utils/excludeControls";
|
|
7
|
+
export default {
|
|
8
|
+
title: "Forms/Radio",
|
|
9
|
+
component: Radio,
|
|
10
|
+
argTypes: Object.assign({ validationState: {
|
|
11
|
+
options: ["valid", "invalid", "neither"],
|
|
12
|
+
control: { type: "radio" },
|
|
13
|
+
mapping: {
|
|
14
|
+
valid: "valid",
|
|
15
|
+
invalid: "invalid",
|
|
16
|
+
neither: "",
|
|
17
|
+
},
|
|
18
|
+
}, orientation: {
|
|
19
|
+
control: { type: "radio" },
|
|
20
|
+
options: ["horizontal", "vertical"],
|
|
21
|
+
}, label: {
|
|
22
|
+
control: { type: "text" },
|
|
23
|
+
} }, excludeControls("children", "className", "elementType")),
|
|
24
|
+
};
|
|
25
|
+
export const Normal = {
|
|
26
|
+
render: (args) => (_jsxs(RadioGroup, Object.assign({}, args, { children: [_jsx(Radio, { value: "red", label: "Red" }), _jsx(Radio, { value: "blue", label: "Blue" })] }))),
|
|
27
|
+
args: {
|
|
28
|
+
label: "Color",
|
|
29
|
+
isDisabled: false,
|
|
30
|
+
errorMessage: "",
|
|
31
|
+
orientation: "vertical",
|
|
32
|
+
defaultValue: "blue",
|
|
33
|
+
},
|
|
34
|
+
};
|
|
35
|
+
export const ControlledValue = {
|
|
36
|
+
render: (args) => (_jsxs(RadioGroup, Object.assign({}, args, { children: [_jsx(Radio, { value: "red", label: "Red" }), _jsx(Radio, { value: "blue", label: "Blue" })] }))),
|
|
37
|
+
args: {
|
|
38
|
+
label: "Color",
|
|
39
|
+
isDisabled: false,
|
|
40
|
+
errorMessage: "",
|
|
41
|
+
orientation: "vertical",
|
|
42
|
+
value: "blue",
|
|
43
|
+
},
|
|
44
|
+
};
|
|
45
|
+
export const Disabled = {
|
|
46
|
+
render: (args) => (_jsxs(RadioGroup, Object.assign({}, args, { children: [_jsx(Radio, { value: "red", label: "Red", isDisabled: true }), _jsx(Radio, { value: "blue", label: "Blue" })] }))),
|
|
47
|
+
args: {
|
|
48
|
+
label: "Color",
|
|
49
|
+
isDisabled: true,
|
|
50
|
+
errorMessage: "",
|
|
51
|
+
orientation: "vertical",
|
|
52
|
+
},
|
|
53
|
+
};
|
|
54
|
+
export const DisabledIndividualRadios = {
|
|
55
|
+
render: (args) => (_jsxs(RadioGroup, Object.assign({}, args, { children: [_jsx(Radio, { value: "red", label: "Red", isDisabled: true }), _jsx(Radio, { value: "blue", label: "Blue" })] }))),
|
|
56
|
+
args: {
|
|
57
|
+
label: "Color",
|
|
58
|
+
isDisabled: false,
|
|
59
|
+
errorMessage: "",
|
|
60
|
+
orientation: "vertical",
|
|
61
|
+
},
|
|
62
|
+
};
|
|
63
|
+
export const Valid = {
|
|
64
|
+
render: (args) => (_jsxs(RadioGroup, Object.assign({}, args, { children: [_jsx(Radio, { value: "red", label: "Red" }), _jsx(Radio, { value: "blue", label: "Blue" })] }))),
|
|
65
|
+
args: {
|
|
66
|
+
label: "Color",
|
|
67
|
+
isDisabled: false,
|
|
68
|
+
errorMessage: "",
|
|
69
|
+
validationState: "valid",
|
|
70
|
+
orientation: "vertical",
|
|
71
|
+
},
|
|
72
|
+
};
|
|
73
|
+
export const Invalid = {
|
|
74
|
+
render: (args) => (_jsxs(RadioGroup, Object.assign({}, args, { children: [_jsx(Radio, { value: "red", label: "Red" }), _jsx(Radio, { value: "blue", label: "Blue" })] }))),
|
|
75
|
+
args: {
|
|
76
|
+
label: "Color",
|
|
77
|
+
isDisabled: false,
|
|
78
|
+
errorMessage: "Please select a color",
|
|
79
|
+
validationState: "invalid",
|
|
80
|
+
orientation: "vertical",
|
|
81
|
+
},
|
|
82
|
+
};
|
|
83
|
+
export const ComplexLabel = {
|
|
84
|
+
render: (args) => (_jsxs(RadioGroup, Object.assign({}, args, { children: [_jsx(Radio, Object.assign({ value: "annual", label: "Pay annually" }, { children: _jsxs(Flex, Object.assign({ style: {
|
|
85
|
+
width: "100%",
|
|
86
|
+
flexDirection: "row",
|
|
87
|
+
justifyContent: "space-between",
|
|
88
|
+
} }, { children: [_jsx("div", { children: "To pay today" }), _jsx("div", { children: "$1265.00" })] })) })), _jsxs(Radio, Object.assign({ value: "monthly", label: "Pay monthly" }, { children: [_jsxs(Flex, Object.assign({ style: {
|
|
89
|
+
width: "100%",
|
|
90
|
+
flexDirection: "row",
|
|
91
|
+
justifyContent: "space-between",
|
|
92
|
+
marginBottom: "var(--size-20)",
|
|
93
|
+
} }, { children: [_jsx("div", { children: "To pay today" }), _jsx("div", { children: "$316.25" })] })), _jsxs(Flex, Object.assign({ style: {
|
|
94
|
+
width: "100%",
|
|
95
|
+
flexDirection: "row",
|
|
96
|
+
justifyContent: "space-between",
|
|
97
|
+
} }, { children: [_jsx("div", { children: "10 monthly payments of" }), _jsx("div", { children: "$94.88" })] })), _jsx(Divider, {}), _jsxs(Flex, Object.assign({ style: {
|
|
98
|
+
width: "100%",
|
|
99
|
+
flexDirection: "row",
|
|
100
|
+
justifyContent: "space-between",
|
|
101
|
+
} }, { children: [_jsx("div", { children: _jsx("strong", { children: "Total" }) }), _jsx("div", { children: _jsx("strong", { children: "$1265.00" }) })] }))] }))] }))),
|
|
102
|
+
args: {
|
|
103
|
+
label: "Payment Options",
|
|
104
|
+
isDisabled: false,
|
|
105
|
+
errorMessage: "",
|
|
106
|
+
orientation: "vertical",
|
|
107
|
+
},
|
|
108
|
+
};
|
|
109
|
+
export const HorizontalLayout = {
|
|
110
|
+
render: (args) => (_jsxs(RadioGroup, Object.assign({}, args, { children: [_jsx(Radio, { value: "red", label: "Red" }), _jsx(Radio, { value: "blue", label: "Blue" })] }))),
|
|
111
|
+
args: {
|
|
112
|
+
label: "Color",
|
|
113
|
+
isDisabled: false,
|
|
114
|
+
errorMessage: "",
|
|
115
|
+
orientation: "horizontal",
|
|
116
|
+
},
|
|
117
|
+
};
|
|
118
|
+
//# sourceMappingURL=Radio.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Radio.stories.js","sourceRoot":"","sources":["../../../../src/components/Radio/Radio.stories.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { RadioButton } from "./RadioButton";
|
|
3
|
+
import { RadioGroup } from "./RadioGroup";
|
|
4
|
+
import { Icon } from "../Icon";
|
|
5
|
+
import { excludeControls } from "../../utils/excludeControls";
|
|
6
|
+
export default {
|
|
7
|
+
title: "Forms/RadioButton",
|
|
8
|
+
component: RadioButton,
|
|
9
|
+
argTypes: Object.assign({ orientation: {
|
|
10
|
+
control: { type: "radio" },
|
|
11
|
+
options: ["horizontal", "vertical"],
|
|
12
|
+
} }, excludeControls("className", "children")),
|
|
13
|
+
};
|
|
14
|
+
export const Normal = {
|
|
15
|
+
render: (args) => (_jsxs(RadioGroup, Object.assign({}, args, { children: [_jsx(RadioButton, Object.assign({ value: "red" }, { children: "Red" })), _jsx(RadioButton, Object.assign({ value: "blue" }, { children: "Blue" }))] }))),
|
|
16
|
+
args: {
|
|
17
|
+
label: "Color",
|
|
18
|
+
orientation: "horizontal",
|
|
19
|
+
isDisabled: false,
|
|
20
|
+
defaultValue: "blue",
|
|
21
|
+
},
|
|
22
|
+
};
|
|
23
|
+
export const ControlledValue = {
|
|
24
|
+
render: (args) => (_jsxs(RadioGroup, Object.assign({}, args, { children: [_jsx(RadioButton, Object.assign({ value: "red" }, { children: "Red" })), _jsx(RadioButton, Object.assign({ value: "blue" }, { children: "Blue" }))] }))),
|
|
25
|
+
args: {
|
|
26
|
+
label: "Color",
|
|
27
|
+
orientation: "horizontal",
|
|
28
|
+
isDisabled: false,
|
|
29
|
+
value: "blue",
|
|
30
|
+
},
|
|
31
|
+
};
|
|
32
|
+
export const LabelProp = {
|
|
33
|
+
render: (args) => (_jsxs(RadioGroup, Object.assign({}, args, { children: [_jsx(RadioButton, { value: "red", label: "Red" }), _jsx(RadioButton, { value: "blue", label: "Blue" })] }))),
|
|
34
|
+
args: {
|
|
35
|
+
label: "Color",
|
|
36
|
+
orientation: "horizontal",
|
|
37
|
+
isDisabled: false,
|
|
38
|
+
},
|
|
39
|
+
};
|
|
40
|
+
export const Selected = {
|
|
41
|
+
render: (args) => (_jsxs(RadioGroup, Object.assign({}, args, { children: [_jsx(RadioButton, { value: "red", label: "Red" }), _jsx(RadioButton, { value: "blue", label: "Blue" })] }))),
|
|
42
|
+
args: {
|
|
43
|
+
label: "Color",
|
|
44
|
+
defaultValue: "red",
|
|
45
|
+
orientation: "horizontal",
|
|
46
|
+
isDisabled: false,
|
|
47
|
+
},
|
|
48
|
+
argTypes: {
|
|
49
|
+
value: {
|
|
50
|
+
control: { type: "radio" },
|
|
51
|
+
options: ["red", "blue"],
|
|
52
|
+
},
|
|
53
|
+
},
|
|
54
|
+
};
|
|
55
|
+
export const Disabled = {
|
|
56
|
+
render: (args) => (_jsxs(RadioGroup, Object.assign({}, args, { children: [_jsx(RadioButton, { value: "red", label: "Red" }), _jsx(RadioButton, { value: "blue", label: "Blue" })] }))),
|
|
57
|
+
args: {
|
|
58
|
+
label: "Color",
|
|
59
|
+
orientation: "horizontal",
|
|
60
|
+
isDisabled: true,
|
|
61
|
+
},
|
|
62
|
+
};
|
|
63
|
+
export const VerticalOrientation = {
|
|
64
|
+
render: (args) => (_jsxs(RadioGroup, Object.assign({}, args, { children: [_jsx(RadioButton, { value: "red", label: "Red" }), _jsx(RadioButton, { value: "blue", label: "Blue" })] }))),
|
|
65
|
+
args: {
|
|
66
|
+
label: "Color",
|
|
67
|
+
orientation: "vertical",
|
|
68
|
+
isDisabled: false,
|
|
69
|
+
},
|
|
70
|
+
};
|
|
71
|
+
export const IconButtons = {
|
|
72
|
+
render: (args) => (_jsxs(RadioGroup, Object.assign({}, args, { children: [_jsx(RadioButton, Object.assign({ value: "sole_trader", label: "Sole Trader" }, { children: _jsx(Icon, { name: "user", fontSize: "28px" }) })), _jsx(RadioButton, Object.assign({ value: "partnership", label: "Partnership" }, { children: _jsx(Icon, { name: "star", fontSize: "28px" }) })), _jsx(RadioButton, Object.assign({ value: "company", label: "Ltd Company" }, { children: _jsx(Icon, { name: "menu", fontSize: "28px" }) }))] }))),
|
|
73
|
+
args: {
|
|
74
|
+
label: "Business Type",
|
|
75
|
+
orientation: "horizontal",
|
|
76
|
+
isDisabled: false,
|
|
77
|
+
},
|
|
78
|
+
};
|
|
79
|
+
export const CircularButtons = {
|
|
80
|
+
render: (args) => (_jsxs(RadioGroup, Object.assign({}, args, { children: [_jsx(RadioButton, Object.assign({ value: "sole_trader", label: "Sole Trader" }, { children: _jsx(Icon, { name: "user", fontSize: "28px" }) })), _jsx(RadioButton, Object.assign({ value: "partnership", label: "Partnership" }, { children: _jsx(Icon, { name: "star", fontSize: "28px" }) })), _jsx(RadioButton, Object.assign({ value: "company", label: "Ltd Company" }, { children: _jsx(Icon, { name: "menu", fontSize: "28px" }) }))] }))),
|
|
81
|
+
args: {
|
|
82
|
+
label: "Business Type",
|
|
83
|
+
orientation: "horizontal",
|
|
84
|
+
circular: true,
|
|
85
|
+
isDisabled: false,
|
|
86
|
+
},
|
|
87
|
+
};
|
|
88
|
+
//# sourceMappingURL=RadioButton.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"RadioButton.stories.js","sourceRoot":"","sources":["../../../../src/components/Radio/RadioButton.stories.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { SVG } from "./SVG";
|
|
3
|
+
import { excludeControls } from "../../utils/excludeControls";
|
|
4
|
+
const Star = (_jsx("svg", Object.assign({ viewBox: "0 0 51 48" }, { children: _jsx("path", { fill: "none", stroke: "#000", d: "m25,1 6,17h18l-14,11 5,17-15-10-15,10 5-17-14-11h18z" }) })));
|
|
5
|
+
export default {
|
|
6
|
+
title: "Components/SVG",
|
|
7
|
+
component: SVG,
|
|
8
|
+
argTypes: excludeControls("className"),
|
|
9
|
+
};
|
|
10
|
+
export const Normal = {
|
|
11
|
+
render: (args) => _jsx(SVG, Object.assign({}, args, { children: Star })),
|
|
12
|
+
args: {
|
|
13
|
+
style: {
|
|
14
|
+
width: 75,
|
|
15
|
+
height: 75,
|
|
16
|
+
},
|
|
17
|
+
},
|
|
18
|
+
};
|
|
19
|
+
//# sourceMappingURL=SVG.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SVG.stories.js","sourceRoot":"","sources":["../../../../src/components/SVG/SVG.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,GAAG,EAAY,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAE9D,MAAM,IAAI,GAAG,CACX,4BAAK,OAAO,EAAC,WAAW,gBACtB,eACE,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,MAAM,EACb,CAAC,EAAC,sDAAsD,GACxD,IACE,CACP,CAAC;AAEF,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,GAAG;IACd,QAAQ,EAAE,eAAe,CAAC,WAAW,CAAC;CACvC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAqB;IACtC,MAAM,EAAE,CAAC,IAAc,EAAE,EAAE,CAAC,KAAC,GAAG,oBAAK,IAAI,cAAG,IAAI,IAAO;IACvD,IAAI,EAAE;QACJ,KAAK,EAAE;YACL,KAAK,EAAE,EAAE;YACT,MAAM,EAAE,EAAE;SACX;KACF;CACF,CAAC"}
|