@webiny/ui 0.0.0-mt-3 → 0.0.0-unstable.40876133bb
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/Accordion/Accordion.d.ts +4 -4
- package/Accordion/Accordion.js +27 -13
- package/Accordion/Accordion.js.map +1 -0
- package/Accordion/Accordion.stories.js +34 -23
- package/Accordion/Accordion.stories.js.map +1 -0
- package/Accordion/AccordionItem.d.ts +8 -8
- package/Accordion/AccordionItem.js +68 -39
- package/Accordion/AccordionItem.js.map +1 -0
- package/Accordion/index.js +31 -2
- package/Accordion/index.js.map +1 -0
- package/Alert/Alert.d.ts +4 -4
- package/Alert/Alert.js +21 -10
- package/Alert/Alert.js.map +1 -0
- package/Alert/Alert.stories.js +22 -13
- package/Alert/Alert.stories.js.map +1 -0
- package/Alert/index.js +18 -1
- package/Alert/index.js.map +1 -0
- package/AutoComplete/AutoComplete.d.ts +12 -19
- package/AutoComplete/AutoComplete.js +150 -101
- package/AutoComplete/AutoComplete.js.map +1 -0
- package/AutoComplete/AutoComplete.stories.js +27 -17
- package/AutoComplete/AutoComplete.stories.js.map +1 -0
- package/AutoComplete/MultiAutoComplete.d.ts +44 -40
- package/AutoComplete/MultiAutoComplete.js +317 -248
- package/AutoComplete/MultiAutoComplete.js.map +1 -0
- package/AutoComplete/MultiAutoComplete.stories.js +39 -28
- package/AutoComplete/MultiAutoComplete.stories.js.map +1 -0
- package/AutoComplete/index.js +31 -2
- package/AutoComplete/index.js.map +1 -0
- package/AutoComplete/styles.js +14 -4
- package/AutoComplete/styles.js.map +1 -0
- package/AutoComplete/types.d.ts +4 -3
- package/AutoComplete/types.js +5 -1
- package/AutoComplete/types.js.map +1 -0
- package/AutoComplete/utils.d.ts +11 -5
- package/AutoComplete/utils.js +21 -6
- package/AutoComplete/utils.js.map +1 -0
- package/Avatar/Avatar.d.ts +5 -11
- package/Avatar/Avatar.js +39 -19
- package/Avatar/Avatar.js.map +1 -0
- package/Avatar/Avatar.stories.js +19 -10
- package/Avatar/Avatar.stories.js.map +1 -0
- package/Avatar/index.js +18 -1
- package/Avatar/index.js.map +1 -0
- package/Button/Button.d.ts +9 -23
- package/Button/Button.js +58 -43
- package/Button/Button.js.map +1 -0
- package/Button/Button.stories.js +42 -29
- package/Button/Button.stories.js.map +1 -0
- package/Button/Button.styles.d.ts +6 -0
- package/Button/Button.styles.js +15 -0
- package/Button/Button.styles.js.map +1 -0
- package/Button/CopyButton/CopyButton.d.ts +4 -7
- package/Button/CopyButton/CopyButton.js +24 -14
- package/Button/CopyButton/CopyButton.js.map +1 -0
- package/Button/CopyButton/CopyButton.stories.js +20 -10
- package/Button/CopyButton/CopyButton.stories.js.map +1 -0
- package/Button/IconButton/IconButton.d.ts +4 -7
- package/Button/IconButton/IconButton.js +14 -7
- package/Button/IconButton/IconButton.js.map +1 -0
- package/Button/IconButton/IconButton.stories.js +31 -19
- package/Button/IconButton/IconButton.stories.js.map +1 -0
- package/Button/index.js +44 -3
- package/Button/index.js.map +1 -0
- package/Carousel/Carousel.d.ts +3 -3
- package/Carousel/Carousel.js +34 -21
- package/Carousel/Carousel.js.map +1 -0
- package/Carousel/Carouser.stories.js +27 -17
- package/Carousel/Carouser.stories.js.map +1 -0
- package/Carousel/index.js +15 -1
- package/Carousel/index.js.map +1 -0
- package/Checkbox/Checkbox.d.ts +5 -9
- package/Checkbox/Checkbox.js +42 -28
- package/Checkbox/Checkbox.js.map +1 -0
- package/Checkbox/Checkbox.stories.js +27 -16
- package/Checkbox/Checkbox.stories.js.map +1 -0
- package/Checkbox/Checkbox.styles.js +11 -4
- package/Checkbox/Checkbox.styles.js.map +1 -0
- package/Checkbox/CheckboxGroup.d.ts +2 -2
- package/Checkbox/CheckboxGroup.js +36 -20
- package/Checkbox/CheckboxGroup.js.map +1 -0
- package/Checkbox/CheckboxGroup.stories.js +29 -18
- package/Checkbox/CheckboxGroup.stories.js.map +1 -0
- package/Checkbox/index.js +23 -2
- package/Checkbox/index.js.map +1 -0
- package/Chips/Chip.d.ts +3 -8
- package/Chips/Chip.js +21 -7
- package/Chips/Chip.js.map +1 -0
- package/Chips/Chips.d.ts +4 -4
- package/Chips/Chips.js +29 -12
- package/Chips/Chips.js.map +1 -0
- package/Chips/Chips.stories.js +33 -18
- package/Chips/Chips.stories.js.map +1 -0
- package/Chips/index.d.ts +0 -1
- package/Chips/index.js +31 -3
- package/Chips/index.js.map +1 -0
- package/Chips/styles.js +21 -9
- package/Chips/styles.js.map +1 -0
- package/CodeEditor/CodeEditor.d.ts +5 -8
- package/CodeEditor/CodeEditor.js +56 -35
- package/CodeEditor/CodeEditor.js.map +1 -0
- package/CodeEditor/CodeEditor.stories.js +30 -17
- package/CodeEditor/CodeEditor.stories.js.map +1 -0
- package/CodeEditor/index.js +18 -1
- package/CodeEditor/index.js.map +1 -0
- package/ColorPicker/ColorPicker.d.ts +9 -10
- package/ColorPicker/ColorPicker.js +63 -51
- package/ColorPicker/ColorPicker.js.map +1 -0
- package/ColorPicker/ColorPicker.stories.js +26 -15
- package/ColorPicker/ColorPicker.stories.js.map +1 -0
- package/ColorPicker/index.js +18 -1
- package/ColorPicker/index.js.map +1 -0
- package/ConfirmationDialog/ConfirmationDialog.d.ts +13 -13
- package/ConfirmationDialog/ConfirmationDialog.js +57 -45
- package/ConfirmationDialog/ConfirmationDialog.js.map +1 -0
- package/ConfirmationDialog/ConfirmationDialog.stories.js +22 -12
- package/ConfirmationDialog/ConfirmationDialog.stories.js.map +1 -0
- package/ConfirmationDialog/index.js +31 -2
- package/ConfirmationDialog/index.js.map +1 -0
- package/ConfirmationDialog/withConfirmation.d.ts +2 -2
- package/ConfirmationDialog/withConfirmation.js +19 -6
- package/ConfirmationDialog/withConfirmation.js.map +1 -0
- package/DataTable/DataTable.d.ts +20 -0
- package/DataTable/DataTable.js +157 -0
- package/DataTable/DataTable.js.map +1 -0
- package/DataTable/DataTable.stories.d.ts +1 -0
- package/DataTable/DataTable.stories.js +77 -0
- package/DataTable/DataTable.stories.js.map +1 -0
- package/DataTable/README.md +72 -0
- package/DataTable/index.d.ts +1 -0
- package/DataTable/index.js +18 -0
- package/DataTable/index.js.map +1 -0
- package/DataTable/styled.d.ts +1 -0
- package/DataTable/styled.js +18 -0
- package/DataTable/styled.js.map +1 -0
- package/DelayedOnChange/DelayedOnChange.d.ts +40 -0
- package/DelayedOnChange/DelayedOnChange.js +129 -0
- package/DelayedOnChange/DelayedOnChange.js.map +1 -0
- package/DelayedOnChange/index.d.ts +2 -0
- package/DelayedOnChange/index.js +23 -0
- package/DelayedOnChange/index.js.map +1 -0
- package/DelayedOnChange/withDelayedOnChange.d.ts +3 -0
- package/DelayedOnChange/withDelayedOnChange.js +37 -0
- package/DelayedOnChange/withDelayedOnChange.js.map +1 -0
- package/Dialog/Dialog.d.ts +22 -30
- package/Dialog/Dialog.js +75 -39
- package/Dialog/Dialog.js.map +1 -0
- package/Dialog/Dialog.stories.js +26 -16
- package/Dialog/Dialog.stories.js.map +1 -0
- package/Dialog/index.js +18 -1
- package/Dialog/index.js.map +1 -0
- package/Drawer/Drawer.d.ts +1 -1
- package/Drawer/Drawer.js +20 -6
- package/Drawer/Drawer.js.map +1 -0
- package/Drawer/Drawer.stories.js +26 -15
- package/Drawer/Drawer.stories.js.map +1 -0
- package/Drawer/index.js +18 -1
- package/Drawer/index.js.map +1 -0
- package/DynamicFieldset/Fieldset.d.ts +26 -16
- package/DynamicFieldset/Fieldset.js +82 -60
- package/DynamicFieldset/Fieldset.js.map +1 -0
- package/DynamicFieldset/index.js +15 -1
- package/DynamicFieldset/index.js.map +1 -0
- package/Elevation/Elevation.d.ts +1 -1
- package/Elevation/Elevation.js +17 -6
- package/Elevation/Elevation.js.map +1 -0
- package/Elevation/Elevation.stories.js +27 -16
- package/Elevation/Elevation.stories.js.map +1 -0
- package/Elevation/index.js +18 -1
- package/Elevation/index.js.map +1 -0
- package/FormElementMessage/FormElementMessage.d.ts +1 -1
- package/FormElementMessage/FormElementMessage.js +15 -5
- package/FormElementMessage/FormElementMessage.js.map +1 -0
- package/FormElementMessage/index.js +13 -1
- package/FormElementMessage/index.js.map +1 -0
- package/FullName/FullName.js +8 -1
- package/FullName/FullName.js.map +1 -0
- package/FullName/index.js +18 -1
- package/FullName/index.js.map +1 -0
- package/Grid/Grid.d.ts +1 -1
- package/Grid/Grid.js +26 -9
- package/Grid/Grid.js.map +1 -0
- package/Grid/Grid.stories.js +21 -12
- package/Grid/Grid.stories.js.map +1 -0
- package/Grid/index.js +18 -1
- package/Grid/index.js.map +1 -0
- package/Helpers/ClassNames.d.ts +4 -3
- package/Helpers/ClassNames.js +21 -10
- package/Helpers/ClassNames.js.map +1 -0
- package/Helpers/index.js +13 -2
- package/Helpers/index.js.map +1 -0
- package/Icon/Icon.d.ts +3 -6
- package/Icon/Icon.js +19 -10
- package/Icon/Icon.js.map +1 -0
- package/Icon/Icon.stories.js +33 -20
- package/Icon/Icon.stories.js.map +1 -0
- package/Icon/index.js +18 -1
- package/Icon/index.js.map +1 -0
- package/Image/Image.d.ts +5 -4
- package/Image/Image.js +22 -10
- package/Image/Image.js.map +1 -0
- package/Image/Image.stories.js +21 -11
- package/Image/Image.stories.js.map +1 -0
- package/Image/index.js +18 -1
- package/Image/index.js.map +1 -0
- package/ImageEditor/ImageEditor.d.ts +33 -34
- package/ImageEditor/ImageEditor.js +110 -83
- package/ImageEditor/ImageEditor.js.map +1 -0
- package/ImageEditor/index.js +18 -1
- package/ImageEditor/index.js.map +1 -0
- package/ImageEditor/toolbar/crop.js +34 -15
- package/ImageEditor/toolbar/crop.js.map +1 -0
- package/ImageEditor/toolbar/filter.js +76 -47
- package/ImageEditor/toolbar/filter.js.map +1 -0
- package/ImageEditor/toolbar/flip.js +35 -16
- package/ImageEditor/toolbar/flip.js.map +1 -0
- package/ImageEditor/toolbar/icons/index.js +69 -8
- package/ImageEditor/toolbar/icons/index.js.map +1 -0
- package/ImageEditor/toolbar/index.js +39 -4
- package/ImageEditor/toolbar/index.js.map +1 -0
- package/ImageEditor/toolbar/rotate.js +65 -36
- package/ImageEditor/toolbar/rotate.js.map +1 -0
- package/ImageEditor/toolbar/types.d.ts +23 -12
- package/ImageEditor/toolbar/types.js +5 -1
- package/ImageEditor/toolbar/types.js.map +1 -0
- package/ImageUpload/Image.d.ts +6 -6
- package/ImageUpload/Image.js +57 -35
- package/ImageUpload/Image.js.map +1 -0
- package/ImageUpload/ImageEditorDialog.d.ts +11 -6
- package/ImageUpload/ImageEditorDialog.js +54 -31
- package/ImageUpload/ImageEditorDialog.js.map +1 -0
- package/ImageUpload/MultiImageUpload.d.ts +10 -31
- package/ImageUpload/MultiImageUpload.js +117 -81
- package/ImageUpload/MultiImageUpload.js.map +1 -0
- package/ImageUpload/MultiImageUpload.stories.js +26 -15
- package/ImageUpload/MultiImageUpload.stories.js.map +1 -0
- package/ImageUpload/SingleImageUpload.d.ts +16 -37
- package/ImageUpload/SingleImageUpload.js +85 -54
- package/ImageUpload/SingleImageUpload.js.map +1 -0
- package/ImageUpload/SingleImageUpload.stories.js +27 -16
- package/ImageUpload/SingleImageUpload.stories.js.map +1 -0
- package/ImageUpload/index.js +39 -4
- package/ImageUpload/index.js.map +1 -0
- package/ImageUpload/styled.d.ts +20 -14
- package/ImageUpload/styled.js +29 -15
- package/ImageUpload/styled.js.map +1 -0
- package/Input/Input.d.ts +4 -8
- package/Input/Input.js +70 -41
- package/Input/Input.js.map +1 -0
- package/Input/Input.stories.js +62 -46
- package/Input/Input.stories.js.map +1 -0
- package/Input/__tests__/Input.test.js +65 -48
- package/Input/__tests__/Input.test.js.map +1 -0
- package/Input/index.js +18 -1
- package/Input/index.js.map +1 -0
- package/List/CollapsibleList/CollapsibleList.stories.js +27 -16
- package/List/CollapsibleList/CollapsibleList.stories.js.map +1 -0
- package/List/CollapsibleList/index.d.ts +2 -2
- package/List/CollapsibleList/index.js +21 -6
- package/List/CollapsibleList/index.js.map +1 -0
- package/List/DataList/DataList.d.ts +24 -43
- package/List/DataList/DataList.js +112 -68
- package/List/DataList/DataList.js.map +1 -0
- package/List/DataList/DataList.stories.js +37 -25
- package/List/DataList/DataList.stories.js.map +1 -0
- package/List/DataList/DataListModalOverlay/DataListModalOverlay.d.ts +8 -8
- package/List/DataList/DataListModalOverlay/DataListModalOverlay.js +29 -10
- package/List/DataList/DataListModalOverlay/DataListModalOverlay.js.map +1 -0
- package/List/DataList/DataListModalOverlay/DataListModalOverlayAction.d.ts +3 -3
- package/List/DataList/DataListModalOverlay/DataListModalOverlayAction.js +27 -9
- package/List/DataList/DataListModalOverlay/DataListModalOverlayAction.js.map +1 -0
- package/List/DataList/DataListModalOverlay/DataListModalOverlayContext.d.ts +9 -4
- package/List/DataList/DataListModalOverlay/DataListModalOverlayContext.js +29 -8
- package/List/DataList/DataListModalOverlay/DataListModalOverlayContext.js.map +1 -0
- package/List/DataList/DataListModalOverlay/index.js +35 -3
- package/List/DataList/DataListModalOverlay/index.js.map +1 -0
- package/List/DataList/DataListWithSections.d.ts +45 -0
- package/List/DataList/DataListWithSections.js +356 -0
- package/List/DataList/DataListWithSections.js.map +1 -0
- package/List/DataList/Loader.d.ts +2 -2
- package/List/DataList/Loader.js +53 -50
- package/List/DataList/Loader.js.map +1 -0
- package/List/DataList/NoData.d.ts +2 -2
- package/List/DataList/NoData.js +19 -6
- package/List/DataList/NoData.js.map +1 -0
- package/List/DataList/icons/index.d.ts +1 -1
- package/List/DataList/icons/index.js +83 -38
- package/List/DataList/icons/index.js.map +1 -0
- package/List/DataList/index.d.ts +1 -0
- package/List/DataList/index.js +64 -3
- package/List/DataList/index.js.map +1 -0
- package/List/DataList/types.d.ts +1 -1
- package/List/DataList/types.js +5 -1
- package/List/DataList/types.js.map +1 -0
- package/List/List.d.ts +3 -2
- package/List/List.js +92 -49
- package/List/List.js.map +1 -0
- package/List/List.stories.js +52 -37
- package/List/List.stories.js.map +1 -0
- package/List/icons/index.js +23 -3
- package/List/icons/index.js.map +1 -0
- package/List/index.d.ts +1 -1
- package/List/index.js +74 -3
- package/List/index.js.map +1 -0
- package/Menu/Menu.d.ts +14 -21
- package/Menu/Menu.js +61 -49
- package/Menu/Menu.js.map +1 -0
- package/Menu/Menu.stories.js +24 -14
- package/Menu/Menu.stories.js.map +1 -0
- package/Menu/index.js +18 -1
- package/Menu/index.js.map +1 -0
- package/Mosaic/Mosaic.d.ts +4 -14
- package/Mosaic/Mosaic.js +22 -5
- package/Mosaic/Mosaic.js.map +1 -0
- package/Mosaic/Mosaic.stories.js +37 -28
- package/Mosaic/Mosaic.stories.js.map +1 -0
- package/Mosaic/index.js +18 -1
- package/Mosaic/index.js.map +1 -0
- package/Progress/CircularProgress.d.ts +8 -16
- package/Progress/CircularProgress.js +38 -20
- package/Progress/CircularProgress.js.map +1 -0
- package/Progress/index.js +15 -1
- package/Progress/index.js.map +1 -0
- package/Radio/Radio.d.ts +2 -6
- package/Radio/Radio.js +42 -28
- package/Radio/Radio.js.map +1 -0
- package/Radio/Radio.styles.js +11 -4
- package/Radio/Radio.styles.js.map +1 -0
- package/Radio/RadioGroup.d.ts +1 -6
- package/Radio/RadioGroup.js +38 -26
- package/Radio/RadioGroup.js.map +1 -0
- package/Radio/RadioGroup.stories.js +29 -18
- package/Radio/RadioGroup.stories.js.map +1 -0
- package/Radio/index.js +23 -2
- package/Radio/index.js.map +1 -0
- package/RichTextEditor/RichTextEditor.d.ts +13 -9
- package/RichTextEditor/RichTextEditor.js +92 -57
- package/RichTextEditor/RichTextEditor.js.map +1 -0
- package/RichTextEditor/RichTextEditor.stories.js +22 -11
- package/RichTextEditor/RichTextEditor.stories.js.map +1 -0
- package/RichTextEditor/createPropsFromConfig.d.ts +11 -1
- package/RichTextEditor/createPropsFromConfig.js +20 -5
- package/RichTextEditor/createPropsFromConfig.js.map +1 -0
- package/RichTextEditor/index.d.ts +1 -0
- package/RichTextEditor/index.js +30 -2
- package/RichTextEditor/index.js.map +1 -0
- package/Ripple/Ripple.d.ts +4 -5
- package/Ripple/Ripple.js +16 -5
- package/Ripple/Ripple.js.map +1 -0
- package/Ripple/Ripple.stories.js +57 -42
- package/Ripple/Ripple.stories.js.map +1 -0
- package/Ripple/index.js +18 -1
- package/Ripple/index.js.map +1 -0
- package/Scrollbar/Scrollbar.d.ts +5 -5
- package/Scrollbar/Scrollbar.js +14 -4
- package/Scrollbar/Scrollbar.js.map +1 -0
- package/Scrollbar/Scrollbar.stories.js +18 -9
- package/Scrollbar/Scrollbar.stories.js.map +1 -0
- package/Scrollbar/index.js +18 -1
- package/Scrollbar/index.js.map +1 -0
- package/Section/Section.stories.js +22 -12
- package/Section/Section.stories.js.map +1 -0
- package/Section/index.d.ts +4 -5
- package/Section/index.js +30 -15
- package/Section/index.js.map +1 -0
- package/Select/Select.d.ts +7 -10
- package/Select/Select.js +101 -23
- package/Select/Select.js.map +1 -0
- package/Select/Select.stories.js +36 -25
- package/Select/Select.stories.js.map +1 -0
- package/Select/index.js +18 -1
- package/Select/index.js.map +1 -0
- package/Skeleton/README.md +21 -0
- package/Skeleton/Skeleton.d.ts +4 -0
- package/Skeleton/Skeleton.js +25 -0
- package/Skeleton/Skeleton.js.map +1 -0
- package/Skeleton/Skeleton.stories.d.ts +1 -0
- package/Skeleton/Skeleton.stories.js +28 -0
- package/Skeleton/Skeleton.stories.js.map +1 -0
- package/Skeleton/index.d.ts +1 -0
- package/Skeleton/index.js +18 -0
- package/Skeleton/index.js.map +1 -0
- package/Slider/Slider.d.ts +1 -6
- package/Slider/Slider.js +47 -33
- package/Slider/Slider.js.map +1 -0
- package/Slider/Slider.stories.js +27 -16
- package/Slider/Slider.stories.js.map +1 -0
- package/Slider/index.js +15 -1
- package/Slider/index.js.map +1 -0
- package/Snackbar/Snackbar.d.ts +5 -7
- package/Snackbar/Snackbar.js +38 -23
- package/Snackbar/Snackbar.js.map +1 -0
- package/Snackbar/Snackbar.stories.js +44 -30
- package/Snackbar/Snackbar.stories.js.map +1 -0
- package/Snackbar/index.js +19 -1
- package/Snackbar/index.js.map +1 -0
- package/Switch/Switch.d.ts +2 -6
- package/Switch/Switch.js +48 -33
- package/Switch/Switch.js.map +1 -0
- package/Switch/Switch.stories.js +27 -16
- package/Switch/Switch.stories.js.map +1 -0
- package/Switch/index.js +18 -1
- package/Switch/index.js.map +1 -0
- package/Tabs/Tab.d.ts +6 -2
- package/Tabs/Tab.js +37 -10
- package/Tabs/Tab.js.map +1 -0
- package/Tabs/Tabs.d.ts +43 -21
- package/Tabs/Tabs.js +131 -125
- package/Tabs/Tabs.js.map +1 -0
- package/Tabs/Tabs.stories.js +34 -22
- package/Tabs/Tabs.stories.js.map +1 -0
- package/Tabs/index.js +31 -2
- package/Tabs/index.js.map +1 -0
- package/Tags/Tags.d.ts +5 -10
- package/Tags/Tags.js +71 -47
- package/Tags/Tags.js.map +1 -0
- package/Tags/Tags.stories.js +27 -16
- package/Tags/Tags.stories.js.map +1 -0
- package/Tags/index.js +18 -1
- package/Tags/index.js.map +1 -0
- package/Tooltip/Tooltip.d.ts +9 -8
- package/Tooltip/Tooltip.js +44 -25
- package/Tooltip/Tooltip.js.map +1 -0
- package/Tooltip/Tooltip.stories.js +20 -11
- package/Tooltip/Tooltip.stories.js.map +1 -0
- package/Tooltip/index.js +18 -1
- package/Tooltip/index.js.map +1 -0
- package/TopAppBar/TopAppBar.d.ts +1 -1
- package/TopAppBar/TopAppBar.js +18 -7
- package/TopAppBar/TopAppBar.js.map +1 -0
- package/TopAppBar/TopAppBar.stories.js +39 -25
- package/TopAppBar/TopAppBar.stories.js.map +1 -0
- package/TopAppBar/TopAppBarActionItem.d.ts +1 -1
- package/TopAppBar/TopAppBarActionItem.js +14 -4
- package/TopAppBar/TopAppBarActionItem.js.map +1 -0
- package/TopAppBar/TopAppBarNavigationIcon.d.ts +1 -1
- package/TopAppBar/TopAppBarNavigationIcon.js +14 -4
- package/TopAppBar/TopAppBarNavigationIcon.js.map +1 -0
- package/TopAppBar/TopAppBarPrimary.js +18 -7
- package/TopAppBar/TopAppBarPrimary.js.map +1 -0
- package/TopAppBar/TopAppBarSecondary.js +18 -7
- package/TopAppBar/TopAppBarSecondary.js.map +1 -0
- package/TopAppBar/TopAppBarSection.d.ts +1 -1
- package/TopAppBar/TopAppBarSection.js +18 -7
- package/TopAppBar/TopAppBarSection.js.map +1 -0
- package/TopAppBar/TopAppBarTitle.d.ts +1 -1
- package/TopAppBar/TopAppBarTitle.js +18 -7
- package/TopAppBar/TopAppBarTitle.js.map +1 -0
- package/TopAppBar/index.js +96 -7
- package/TopAppBar/index.js.map +1 -0
- package/TopProgressBar/TopProgressBar.d.ts +7 -7
- package/TopProgressBar/TopProgressBar.js +20 -7
- package/TopProgressBar/TopProgressBar.js.map +1 -0
- package/TopProgressBar/TopProgressBar.stories.js +22 -12
- package/TopProgressBar/TopProgressBar.stories.js.map +1 -0
- package/TopProgressBar/hoc/index.js +15 -1
- package/TopProgressBar/hoc/index.js.map +1 -0
- package/TopProgressBar/hoc/withTopProgressBar.d.ts +1 -1
- package/TopProgressBar/hoc/withTopProgressBar.js +16 -5
- package/TopProgressBar/hoc/withTopProgressBar.js.map +1 -0
- package/TopProgressBar/index.js +18 -1
- package/TopProgressBar/index.js.map +1 -0
- package/Typography/Typography.d.ts +4 -4
- package/Typography/Typography.js +14 -4
- package/Typography/Typography.js.map +1 -0
- package/Typography/Typography.stories.js +43 -34
- package/Typography/Typography.stories.js.map +1 -0
- package/Typography/index.js +18 -1
- package/Typography/index.js.map +1 -0
- package/package.json +56 -63
- package/styles.scss +3 -4
- package/types.d.ts +2 -2
- package/types.js +5 -1
- package/types.js.map +1 -0
- package/Chips/ChipIcon.d.ts +0 -4
- package/Chips/ChipIcon.js +0 -8
- package/rmwc/textfield/code/index.d.ts +0 -135
- package/rmwc/textfield/code/index.js +0 -571
- package/rmwc/textfield/next/index.d.ts +0 -135
- package/rmwc/textfield/next/index.js +0 -560
- package/rmwc/textfield/package.json +0 -45
package/Avatar/Avatar.stories.js
CHANGED
|
@@ -1,19 +1,28 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
|
|
5
|
+
var _react = _interopRequireDefault(require("react"));
|
|
6
|
+
|
|
7
|
+
var _react2 = require("@storybook/react");
|
|
8
|
+
|
|
9
|
+
var _Story = require("@webiny/storybook-utils/Story");
|
|
10
|
+
|
|
11
|
+
var _README = _interopRequireDefault(require("./../Avatar/README.md"));
|
|
12
|
+
|
|
13
|
+
var _Avatar = require("./Avatar");
|
|
14
|
+
|
|
15
|
+
var story = (0, _react2.storiesOf)("Components/Avatar", module);
|
|
7
16
|
story.add("usage", function () {
|
|
8
|
-
return /*#__PURE__*/
|
|
17
|
+
return /*#__PURE__*/_react.default.createElement(_Story.Story, null, /*#__PURE__*/_react.default.createElement(_Story.StoryReadme, null, _README.default), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, {
|
|
9
18
|
title: "A simple avatar"
|
|
10
|
-
}, /*#__PURE__*/
|
|
19
|
+
}, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Avatar.Avatar, {
|
|
11
20
|
width: 48,
|
|
12
21
|
height: 48,
|
|
13
22
|
alt: "Test alt.",
|
|
14
23
|
fallbackText: "T",
|
|
15
24
|
src: "http://i.pravatar.cc/150?img=49"
|
|
16
|
-
}), /*#__PURE__*/
|
|
25
|
+
}), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_Avatar.Avatar, {
|
|
17
26
|
width: 64,
|
|
18
27
|
height: 64,
|
|
19
28
|
alt: "Test alt.",
|
|
@@ -22,6 +31,6 @@ story.add("usage", function () {
|
|
|
22
31
|
}))));
|
|
23
32
|
}, {
|
|
24
33
|
info: {
|
|
25
|
-
propTables: [Avatar]
|
|
34
|
+
propTables: [_Avatar.Avatar]
|
|
26
35
|
}
|
|
27
36
|
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["story","storiesOf","module","add","readme","info","propTables","Avatar"],"sources":["Avatar.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { Story, StoryReadme, StorySandbox } from \"@webiny/storybook-utils/Story\";\nimport readme from \"./../Avatar/README.md\";\nimport { Avatar } from \"./Avatar\";\n\nconst story = storiesOf(\"Components/Avatar\", module);\n\nstory.add(\n \"usage\",\n () => {\n return (\n <Story>\n <StoryReadme>{readme}</StoryReadme>\n <StorySandbox title={\"A simple avatar\"}>\n <div>\n <Avatar\n width={48}\n height={48}\n alt=\"Test alt.\"\n fallbackText=\"T\"\n src=\"http://i.pravatar.cc/150?img=49\"\n />\n\n <br />\n <br />\n\n <Avatar width={64} height={64} alt=\"Test alt.\" fallbackText=\"T\" src={\"\"} />\n </div>\n </StorySandbox>\n </Story>\n );\n },\n { info: { propTables: [Avatar] } }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,mBAAV,EAA+BC,MAA/B,CAAd;AAEAF,KAAK,CAACG,GAAN,CACI,OADJ,EAEI,YAAM;EACF,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,uDACI,6BAAC,cAAD;IACI,KAAK,EAAE,EADX;IAEI,MAAM,EAAE,EAFZ;IAGI,GAAG,EAAC,WAHR;IAII,YAAY,EAAC,GAJjB;IAKI,GAAG,EAAC;EALR,EADJ,eASI,wCATJ,eAUI,wCAVJ,eAYI,6BAAC,cAAD;IAAQ,KAAK,EAAE,EAAf;IAAmB,MAAM,EAAE,EAA3B;IAA+B,GAAG,EAAC,WAAnC;IAA+C,YAAY,EAAC,GAA5D;IAAgE,GAAG,EAAE;EAArE,EAZJ,CADJ,CAFJ,CADJ;AAqBH,CAxBL,EAyBI;EAAEC,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,cAAD;EAAd;AAAR,CAzBJ"}
|
package/Avatar/index.js
CHANGED
|
@@ -1 +1,18 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
|
|
7
|
+
var _Avatar = require("./Avatar");
|
|
8
|
+
|
|
9
|
+
Object.keys(_Avatar).forEach(function (key) {
|
|
10
|
+
if (key === "default" || key === "__esModule") return;
|
|
11
|
+
if (key in exports && exports[key] === _Avatar[key]) return;
|
|
12
|
+
Object.defineProperty(exports, key, {
|
|
13
|
+
enumerable: true,
|
|
14
|
+
get: function get() {
|
|
15
|
+
return _Avatar[key];
|
|
16
|
+
}
|
|
17
|
+
});
|
|
18
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Avatar\";\n"],"mappings":";;;;;;AAAA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
|
package/Button/Button.d.ts
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
|
|
1
|
+
/// <reference types="web" />
|
|
2
|
+
import React from "react";
|
|
2
3
|
import { FabProps } from "@rmwc/fab";
|
|
3
4
|
import { IconProps } from "../Icon/Icon";
|
|
4
5
|
import { SyntheticEvent } from "react";
|
|
5
|
-
export
|
|
6
|
+
export interface ButtonProps {
|
|
6
7
|
flat?: boolean;
|
|
7
8
|
small?: boolean;
|
|
8
9
|
onClick?: (event: React.MouseEvent<any, MouseEvent>) => void | null;
|
|
@@ -14,28 +15,19 @@ export declare type ButtonProps = {
|
|
|
14
15
|
[key: string]: any;
|
|
15
16
|
};
|
|
16
17
|
"data-testid"?: string;
|
|
17
|
-
}
|
|
18
|
+
}
|
|
18
19
|
/**
|
|
19
20
|
* Shows a default button, used typically when action is not of high priority.
|
|
20
|
-
* @param props
|
|
21
|
-
* @returns {*}
|
|
22
|
-
* @constructor
|
|
23
21
|
*/
|
|
24
|
-
export declare const ButtonDefault:
|
|
22
|
+
export declare const ButtonDefault: React.FC<ButtonProps>;
|
|
25
23
|
/**
|
|
26
24
|
* Shows primary button, eg. for submitting forms.
|
|
27
|
-
* @param props
|
|
28
|
-
* @returns {*}
|
|
29
|
-
* @constructor
|
|
30
25
|
*/
|
|
31
|
-
export declare const ButtonPrimary:
|
|
26
|
+
export declare const ButtonPrimary: React.FC<ButtonProps>;
|
|
32
27
|
/**
|
|
33
28
|
* Shows a secondary button - eg. for doing a reset on a form.
|
|
34
|
-
* @param props
|
|
35
|
-
* @returns {*}
|
|
36
|
-
* @constructor
|
|
37
29
|
*/
|
|
38
|
-
export declare const ButtonSecondary:
|
|
30
|
+
export declare const ButtonSecondary: React.FC<ButtonProps>;
|
|
39
31
|
export declare type ButtonFloatingProps = ButtonProps & FabProps & {
|
|
40
32
|
label?: React.ReactNode;
|
|
41
33
|
icon?: React.ReactNode;
|
|
@@ -44,15 +36,9 @@ export declare type ButtonFloatingProps = ButtonProps & FabProps & {
|
|
|
44
36
|
};
|
|
45
37
|
/**
|
|
46
38
|
* A floating button, shown on the side of the screen, typically used for creating new content or accessing settings.
|
|
47
|
-
* @param props
|
|
48
|
-
* @returns {*}
|
|
49
|
-
* @constructor
|
|
50
39
|
*/
|
|
51
|
-
export declare const ButtonFloating:
|
|
40
|
+
export declare const ButtonFloating: React.FC<ButtonFloatingProps>;
|
|
52
41
|
/**
|
|
53
42
|
* Shows an icon, suitable to be shown inside of a button.
|
|
54
|
-
* @param props
|
|
55
|
-
* @returns {*}
|
|
56
|
-
* @constructor
|
|
57
43
|
*/
|
|
58
|
-
export declare const ButtonIcon:
|
|
44
|
+
export declare const ButtonIcon: React.FC<IconProps>;
|
package/Button/Button.js
CHANGED
|
@@ -1,18 +1,34 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
|
|
5
|
+
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
6
|
+
|
|
7
|
+
Object.defineProperty(exports, "__esModule", {
|
|
8
|
+
value: true
|
|
9
|
+
});
|
|
10
|
+
exports.ButtonSecondary = exports.ButtonPrimary = exports.ButtonIcon = exports.ButtonFloating = exports.ButtonDefault = void 0;
|
|
11
|
+
|
|
12
|
+
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
13
|
+
|
|
14
|
+
var _react = _interopRequireDefault(require("react"));
|
|
15
|
+
|
|
16
|
+
var RmwcButton = _interopRequireWildcard(require("@rmwc/button"));
|
|
17
|
+
|
|
18
|
+
var _fab = require("@rmwc/fab");
|
|
19
|
+
|
|
20
|
+
var _Icon = require("../Icon/Icon");
|
|
21
|
+
|
|
22
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
|
23
|
+
|
|
24
|
+
var _Button = require("./Button.styles");
|
|
25
|
+
|
|
26
|
+
var _excluded = ["disabled", "label", "icon", "onClick", "small", "ripple", "className"];
|
|
8
27
|
|
|
9
28
|
/**
|
|
10
29
|
* Shows a default button, used typically when action is not of high priority.
|
|
11
|
-
* @param props
|
|
12
|
-
* @returns {*}
|
|
13
|
-
* @constructor
|
|
14
30
|
*/
|
|
15
|
-
|
|
31
|
+
var ButtonDefault = function ButtonDefault(props) {
|
|
16
32
|
var disabled = props.disabled,
|
|
17
33
|
onClick = props.onClick,
|
|
18
34
|
children = props.children,
|
|
@@ -22,24 +38,24 @@ export var ButtonDefault = function ButtonDefault(props) {
|
|
|
22
38
|
_props$className = props.className,
|
|
23
39
|
className = _props$className === void 0 ? "" : _props$className,
|
|
24
40
|
style = props.style;
|
|
25
|
-
return /*#__PURE__*/
|
|
41
|
+
return /*#__PURE__*/_react.default.createElement(RmwcButton.Button, {
|
|
26
42
|
style: style,
|
|
27
43
|
disabled: disabled,
|
|
28
44
|
dense: small,
|
|
29
45
|
onClick: onClick,
|
|
30
46
|
ripple: ripple,
|
|
31
|
-
className:
|
|
47
|
+
className: (0, _classnames.default)("webiny-ui-button", className),
|
|
32
48
|
"data-testid": props["data-testid"]
|
|
33
49
|
}, children);
|
|
34
50
|
};
|
|
35
51
|
/**
|
|
36
52
|
* Shows primary button, eg. for submitting forms.
|
|
37
|
-
* @param props
|
|
38
|
-
* @returns {*}
|
|
39
|
-
* @constructor
|
|
40
53
|
*/
|
|
41
54
|
|
|
42
|
-
|
|
55
|
+
|
|
56
|
+
exports.ButtonDefault = ButtonDefault;
|
|
57
|
+
|
|
58
|
+
var ButtonPrimary = function ButtonPrimary(props) {
|
|
43
59
|
var disabled = props.disabled,
|
|
44
60
|
onClick = props.onClick,
|
|
45
61
|
children = props.children,
|
|
@@ -50,10 +66,10 @@ export var ButtonPrimary = function ButtonPrimary(props) {
|
|
|
50
66
|
_props$ripple2 = props.ripple,
|
|
51
67
|
ripple = _props$ripple2 === void 0 ? true : _props$ripple2,
|
|
52
68
|
_props$style = props.style,
|
|
53
|
-
style = _props$style === void 0 ?
|
|
69
|
+
style = _props$style === void 0 ? {} : _props$style,
|
|
54
70
|
_props$className2 = props.className,
|
|
55
71
|
className = _props$className2 === void 0 ? null : _props$className2;
|
|
56
|
-
return /*#__PURE__*/
|
|
72
|
+
return /*#__PURE__*/_react.default.createElement(RmwcButton.Button, {
|
|
57
73
|
raised: !flat,
|
|
58
74
|
dense: small,
|
|
59
75
|
disabled: disabled,
|
|
@@ -61,18 +77,18 @@ export var ButtonPrimary = function ButtonPrimary(props) {
|
|
|
61
77
|
ripple: ripple,
|
|
62
78
|
onClick: onClick,
|
|
63
79
|
style: style,
|
|
64
|
-
className:
|
|
80
|
+
className: (0, _classnames.default)("webiny-ui-button webiny-ui-button--primary", className),
|
|
65
81
|
"data-testid": props["data-testid"]
|
|
66
82
|
}, children);
|
|
67
83
|
};
|
|
68
84
|
/**
|
|
69
85
|
* Shows a secondary button - eg. for doing a reset on a form.
|
|
70
|
-
* @param props
|
|
71
|
-
* @returns {*}
|
|
72
|
-
* @constructor
|
|
73
86
|
*/
|
|
74
87
|
|
|
75
|
-
|
|
88
|
+
|
|
89
|
+
exports.ButtonPrimary = ButtonPrimary;
|
|
90
|
+
|
|
91
|
+
var ButtonSecondary = function ButtonSecondary(props) {
|
|
76
92
|
var disabled = props.disabled,
|
|
77
93
|
onClick = props.onClick,
|
|
78
94
|
children = props.children,
|
|
@@ -83,40 +99,37 @@ export var ButtonSecondary = function ButtonSecondary(props) {
|
|
|
83
99
|
_props$className3 = props.className,
|
|
84
100
|
className = _props$className3 === void 0 ? null : _props$className3,
|
|
85
101
|
_props$style2 = props.style,
|
|
86
|
-
style = _props$style2 === void 0 ?
|
|
87
|
-
return /*#__PURE__*/
|
|
102
|
+
style = _props$style2 === void 0 ? {} : _props$style2;
|
|
103
|
+
return /*#__PURE__*/_react.default.createElement(RmwcButton.Button, {
|
|
88
104
|
disabled: disabled,
|
|
89
105
|
outlined: true,
|
|
90
106
|
dense: small,
|
|
91
107
|
ripple: ripple,
|
|
92
108
|
onClick: onClick,
|
|
93
109
|
style: style,
|
|
94
|
-
className:
|
|
110
|
+
className: (0, _classnames.default)("webiny-ui-button webiny-ui-button--secondary", _Button.webinyButtonStyles, className),
|
|
95
111
|
"data-testid": props["data-testid"]
|
|
96
112
|
}, children);
|
|
97
113
|
};
|
|
98
114
|
|
|
115
|
+
exports.ButtonSecondary = ButtonSecondary;
|
|
116
|
+
|
|
99
117
|
/**
|
|
100
118
|
* A floating button, shown on the side of the screen, typically used for creating new content or accessing settings.
|
|
101
|
-
* @param props
|
|
102
|
-
* @returns {*}
|
|
103
|
-
* @constructor
|
|
104
119
|
*/
|
|
105
|
-
|
|
120
|
+
var ButtonFloating = function ButtonFloating(props) {
|
|
106
121
|
var disabled = props.disabled,
|
|
122
|
+
label = props.label,
|
|
107
123
|
icon = props.icon,
|
|
108
124
|
onClick = props.onClick,
|
|
109
125
|
_props$small3 = props.small,
|
|
110
126
|
small = _props$small3 === void 0 ? false : _props$small3,
|
|
111
|
-
_props$label = props.label,
|
|
112
|
-
label = _props$label === void 0 ? false : _props$label,
|
|
113
127
|
_props$ripple4 = props.ripple,
|
|
114
128
|
ripple = _props$ripple4 === void 0 ? true : _props$ripple4,
|
|
115
129
|
_props$className4 = props.className,
|
|
116
130
|
className = _props$className4 === void 0 ? null : _props$className4,
|
|
117
|
-
rest =
|
|
118
|
-
|
|
119
|
-
return /*#__PURE__*/React.createElement(Fab, Object.assign({
|
|
131
|
+
rest = (0, _objectWithoutProperties2.default)(props, _excluded);
|
|
132
|
+
return /*#__PURE__*/_react.default.createElement(_fab.Fab, Object.assign({
|
|
120
133
|
"data-testid": props["data-testid"],
|
|
121
134
|
disabled: disabled,
|
|
122
135
|
mini: small,
|
|
@@ -124,16 +137,18 @@ export var ButtonFloating = function ButtonFloating(props) {
|
|
|
124
137
|
label: label,
|
|
125
138
|
ripple: ripple,
|
|
126
139
|
icon: icon,
|
|
127
|
-
className:
|
|
140
|
+
className: (0, _classnames.default)("webiny-ui-button--floating", className)
|
|
128
141
|
}, rest));
|
|
129
142
|
};
|
|
130
143
|
/**
|
|
131
144
|
* Shows an icon, suitable to be shown inside of a button.
|
|
132
|
-
* @param props
|
|
133
|
-
* @returns {*}
|
|
134
|
-
* @constructor
|
|
135
145
|
*/
|
|
136
146
|
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
147
|
+
|
|
148
|
+
exports.ButtonFloating = ButtonFloating;
|
|
149
|
+
|
|
150
|
+
var ButtonIcon = function ButtonIcon(props) {
|
|
151
|
+
return /*#__PURE__*/_react.default.createElement(_Icon.Icon, props);
|
|
152
|
+
};
|
|
153
|
+
|
|
154
|
+
exports.ButtonIcon = ButtonIcon;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["ButtonDefault","props","disabled","onClick","children","small","ripple","className","style","classNames","ButtonPrimary","flat","ButtonSecondary","webinyButtonStyles","ButtonFloating","label","icon","rest","ButtonIcon"],"sources":["Button.tsx"],"sourcesContent":["import React from \"react\";\nimport * as RmwcButton from \"@rmwc/button\";\nimport { Fab, FabProps } from \"@rmwc/fab\";\nimport { Icon, IconProps } from \"../Icon/Icon\";\nimport classNames from \"classnames\";\nimport { SyntheticEvent } from \"react\";\nimport { webinyButtonStyles } from \"./Button.styles\";\nexport interface ButtonProps {\n // Make button flat (only applicable to Primary button).\n flat?: boolean;\n\n // Make button smaller.\n small?: boolean;\n\n // onClick handler.\n onClick?: (event: React.MouseEvent<any, MouseEvent>) => void | null;\n\n // Label and optionally an icon (using Button.Icon component).\n children?: React.ReactNode;\n\n // Show ripple effect on button click. Default: true\n ripple?: boolean;\n\n className?: string;\n\n disabled?: boolean;\n\n style?: { [key: string]: any };\n\n // For testing purposes.\n \"data-testid\"?: string;\n}\n\n/**\n * Shows a default button, used typically when action is not of high priority.\n */\nexport const ButtonDefault: React.FC<ButtonProps> = props => {\n const { disabled, onClick, children, small, ripple = true, className = \"\", style } = props;\n\n return (\n <RmwcButton.Button\n style={style}\n disabled={disabled}\n dense={small}\n onClick={onClick}\n ripple={ripple}\n className={classNames(\"webiny-ui-button\", className)}\n data-testid={props[\"data-testid\"]}\n >\n {children}\n </RmwcButton.Button>\n );\n};\n\n/**\n * Shows primary button, eg. for submitting forms.\n */\nexport const ButtonPrimary: React.FC<ButtonProps> = props => {\n const {\n disabled,\n onClick,\n children,\n small = false,\n flat = false,\n ripple = true,\n style = {},\n className = null\n } = props;\n return (\n <RmwcButton.Button\n raised={!flat}\n dense={small}\n disabled={disabled}\n unelevated={flat}\n ripple={ripple}\n onClick={onClick}\n style={style}\n className={classNames(\"webiny-ui-button webiny-ui-button--primary\", className)}\n data-testid={props[\"data-testid\"]}\n >\n {children}\n </RmwcButton.Button>\n );\n};\n\n/**\n * Shows a secondary button - eg. for doing a reset on a form.\n */\nexport const ButtonSecondary: React.FC<ButtonProps> = props => {\n const {\n disabled,\n onClick,\n children,\n small = false,\n ripple = true,\n className = null,\n style = {}\n } = props;\n\n return (\n <RmwcButton.Button\n disabled={disabled}\n outlined\n dense={small}\n ripple={ripple}\n onClick={onClick}\n style={style}\n className={classNames(\n \"webiny-ui-button webiny-ui-button--secondary\",\n webinyButtonStyles,\n className\n )}\n data-testid={props[\"data-testid\"]}\n >\n {children}\n </RmwcButton.Button>\n );\n};\n\nexport type ButtonFloatingProps = ButtonProps &\n FabProps & {\n label?: React.ReactNode;\n icon?: React.ReactNode;\n onMouseDown?: (e: SyntheticEvent) => void;\n onMouseUp?: (e: SyntheticEvent) => void;\n };\n\n/**\n * A floating button, shown on the side of the screen, typically used for creating new content or accessing settings.\n */\nexport const ButtonFloating: React.FC<ButtonFloatingProps> = props => {\n const {\n disabled,\n label,\n icon,\n onClick,\n small = false,\n ripple = true,\n className = null,\n ...rest\n } = props;\n return (\n <Fab\n data-testid={props[\"data-testid\"]}\n disabled={disabled}\n mini={small}\n onClick={onClick}\n label={label}\n ripple={ripple}\n icon={icon}\n className={classNames(\"webiny-ui-button--floating\", className)}\n {...rest}\n />\n );\n};\n\n/**\n * Shows an icon, suitable to be shown inside of a button.\n */\nexport const ButtonIcon: React.FC<IconProps> = props => <Icon {...props} />;\n"],"mappings":"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"}
|
package/Button/Button.stories.js
CHANGED
|
@@ -1,53 +1,66 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
|
|
5
|
+
var _react = _interopRequireDefault(require("react"));
|
|
6
|
+
|
|
7
|
+
var _react2 = require("@storybook/react");
|
|
8
|
+
|
|
9
|
+
var _addonKnobs = require("@storybook/addon-knobs");
|
|
10
|
+
|
|
11
|
+
var _Story = require("@webiny/storybook-utils/Story");
|
|
12
|
+
|
|
13
|
+
var _README = _interopRequireDefault(require("./../Button/README.md"));
|
|
14
|
+
|
|
15
|
+
var _baselineCloud_done24px = require("./assets/baseline-cloud_done-24px.svg");
|
|
16
|
+
|
|
17
|
+
var _Button = require("./Button");
|
|
18
|
+
|
|
19
|
+
var story = (0, _react2.storiesOf)("Components/Button", module);
|
|
20
|
+
story.addDecorator(_addonKnobs.withKnobs);
|
|
10
21
|
story.add("standard buttons", function () {
|
|
11
|
-
var label = text("Label", "Click to proceed");
|
|
12
|
-
var small = boolean("Small", false);
|
|
13
|
-
var flat = boolean("Flat", false);
|
|
14
|
-
|
|
15
|
-
|
|
22
|
+
var label = (0, _addonKnobs.text)("Label", "Click to proceed");
|
|
23
|
+
var small = (0, _addonKnobs.boolean)("Small", false);
|
|
24
|
+
var flat = (0, _addonKnobs.boolean)("Flat", false);
|
|
25
|
+
|
|
26
|
+
var icon = /*#__PURE__*/_react.default.createElement(_Button.ButtonIcon, {
|
|
27
|
+
icon: /*#__PURE__*/_react.default.createElement(_baselineCloud_done24px.ReactComponent, null)
|
|
16
28
|
});
|
|
17
|
-
|
|
29
|
+
|
|
30
|
+
return /*#__PURE__*/_react.default.createElement(_Story.Story, null, /*#__PURE__*/_react.default.createElement(_Story.StoryReadme, null, _README.default), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, {
|
|
18
31
|
title: "Primary button"
|
|
19
|
-
}, /*#__PURE__*/
|
|
32
|
+
}, /*#__PURE__*/_react.default.createElement(_Button.ButtonPrimary, {
|
|
20
33
|
small: small,
|
|
21
34
|
flat: flat
|
|
22
|
-
}, label)), /*#__PURE__*/
|
|
35
|
+
}, label)), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, {
|
|
23
36
|
title: "Primary button with icon"
|
|
24
|
-
}, /*#__PURE__*/
|
|
37
|
+
}, /*#__PURE__*/_react.default.createElement(_Button.ButtonPrimary, {
|
|
25
38
|
small: small,
|
|
26
39
|
flat: flat
|
|
27
|
-
}, icon, label)), /*#__PURE__*/
|
|
40
|
+
}, icon, label)), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, {
|
|
28
41
|
title: "Secondary button"
|
|
29
|
-
}, /*#__PURE__*/
|
|
42
|
+
}, /*#__PURE__*/_react.default.createElement(_Button.ButtonSecondary, {
|
|
30
43
|
small: small
|
|
31
|
-
}, label)), /*#__PURE__*/
|
|
44
|
+
}, label)), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, {
|
|
32
45
|
title: "Secondary button with icon"
|
|
33
|
-
}, /*#__PURE__*/
|
|
46
|
+
}, /*#__PURE__*/_react.default.createElement(_Button.ButtonSecondary, {
|
|
34
47
|
small: small
|
|
35
|
-
}, icon, label)), /*#__PURE__*/
|
|
48
|
+
}, icon, label)), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, {
|
|
36
49
|
title: "Default button"
|
|
37
|
-
}, /*#__PURE__*/
|
|
50
|
+
}, /*#__PURE__*/_react.default.createElement(_Button.ButtonDefault, {
|
|
38
51
|
small: small
|
|
39
|
-
}, label)), /*#__PURE__*/
|
|
52
|
+
}, label)), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, {
|
|
40
53
|
title: "Default button with icon"
|
|
41
|
-
}, /*#__PURE__*/
|
|
54
|
+
}, /*#__PURE__*/_react.default.createElement(_Button.ButtonDefault, {
|
|
42
55
|
small: small
|
|
43
|
-
}, icon, label)), /*#__PURE__*/
|
|
56
|
+
}, icon, label)), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, {
|
|
44
57
|
title: "Floating button"
|
|
45
|
-
}, /*#__PURE__*/
|
|
58
|
+
}, /*#__PURE__*/_react.default.createElement(_Button.ButtonFloating, {
|
|
46
59
|
small: small,
|
|
47
60
|
icon: icon
|
|
48
61
|
})));
|
|
49
62
|
}, {
|
|
50
63
|
info: {
|
|
51
|
-
propTables: [ButtonPrimary, ButtonSecondary, ButtonDefault, ButtonFloating, ButtonIcon]
|
|
64
|
+
propTables: [_Button.ButtonPrimary, _Button.ButtonSecondary, _Button.ButtonDefault, _Button.ButtonFloating, _Button.ButtonIcon]
|
|
52
65
|
}
|
|
53
66
|
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["story","storiesOf","module","addDecorator","withKnobs","add","label","text","small","boolean","flat","icon","readme","info","propTables","ButtonPrimary","ButtonSecondary","ButtonDefault","ButtonFloating","ButtonIcon"],"sources":["Button.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { withKnobs, text, boolean } from \"@storybook/addon-knobs\";\nimport { Story, StoryReadme, StorySandbox } from \"@webiny/storybook-utils/Story\";\nimport readme from \"./../Button/README.md\";\nimport { ReactComponent as CloudIcon } from \"./assets/baseline-cloud_done-24px.svg\";\n\nimport {\n ButtonPrimary,\n ButtonSecondary,\n ButtonDefault,\n ButtonFloating,\n ButtonIcon\n} from \"./Button\";\n\nconst story = storiesOf(\"Components/Button\", module);\nstory.addDecorator(withKnobs);\n\nstory.add(\n \"standard buttons\",\n () => {\n const label = text(\"Label\", \"Click to proceed\");\n const small = boolean(\"Small\", false);\n const flat = boolean(\"Flat\", false);\n const icon = <ButtonIcon icon={<CloudIcon />} />;\n\n return (\n <Story>\n <StoryReadme>{readme}</StoryReadme>\n <StorySandbox title={\"Primary button\"}>\n <ButtonPrimary small={small} flat={flat}>\n {label}\n </ButtonPrimary>\n </StorySandbox>\n <StorySandbox title={\"Primary button with icon\"}>\n <ButtonPrimary small={small} flat={flat}>\n {icon}\n {label}\n </ButtonPrimary>\n </StorySandbox>\n <StorySandbox title={\"Secondary button\"}>\n <ButtonSecondary small={small}>{label}</ButtonSecondary>\n </StorySandbox>\n <StorySandbox title={\"Secondary button with icon\"}>\n <ButtonSecondary small={small}>\n {icon}\n {label}\n </ButtonSecondary>\n </StorySandbox>\n <StorySandbox title={\"Default button\"}>\n <ButtonDefault small={small}>{label}</ButtonDefault>\n </StorySandbox>\n <StorySandbox title={\"Default button with icon\"}>\n <ButtonDefault small={small}>\n {icon}\n {label}\n </ButtonDefault>\n </StorySandbox>\n <StorySandbox title={\"Floating button\"}>\n <ButtonFloating small={small} icon={icon} />\n </StorySandbox>\n </Story>\n );\n },\n {\n info: {\n propTables: [ButtonPrimary, ButtonSecondary, ButtonDefault, ButtonFloating, ButtonIcon]\n }\n }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AAQA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,mBAAV,EAA+BC,MAA/B,CAAd;AACAF,KAAK,CAACG,YAAN,CAAmBC,qBAAnB;AAEAJ,KAAK,CAACK,GAAN,CACI,kBADJ,EAEI,YAAM;EACF,IAAMC,KAAK,GAAG,IAAAC,gBAAA,EAAK,OAAL,EAAc,kBAAd,CAAd;EACA,IAAMC,KAAK,GAAG,IAAAC,mBAAA,EAAQ,OAAR,EAAiB,KAAjB,CAAd;EACA,IAAMC,IAAI,GAAG,IAAAD,mBAAA,EAAQ,MAAR,EAAgB,KAAhB,CAAb;;EACA,IAAME,IAAI,gBAAG,6BAAC,kBAAD;IAAY,IAAI,eAAE,6BAAC,sCAAD;EAAlB,EAAb;;EAEA,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,6BAAC,qBAAD;IAAe,KAAK,EAAEJ,KAAtB;IAA6B,IAAI,EAAEE;EAAnC,GACKJ,KADL,CADJ,CAFJ,eAOI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,6BAAC,qBAAD;IAAe,KAAK,EAAEE,KAAtB;IAA6B,IAAI,EAAEE;EAAnC,GACKC,IADL,EAEKL,KAFL,CADJ,CAPJ,eAaI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,6BAAC,uBAAD;IAAiB,KAAK,EAAEE;EAAxB,GAAgCF,KAAhC,CADJ,CAbJ,eAgBI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,6BAAC,uBAAD;IAAiB,KAAK,EAAEE;EAAxB,GACKG,IADL,EAEKL,KAFL,CADJ,CAhBJ,eAsBI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,6BAAC,qBAAD;IAAe,KAAK,EAAEE;EAAtB,GAA8BF,KAA9B,CADJ,CAtBJ,eAyBI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,6BAAC,qBAAD;IAAe,KAAK,EAAEE;EAAtB,GACKG,IADL,EAEKL,KAFL,CADJ,CAzBJ,eA+BI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,6BAAC,sBAAD;IAAgB,KAAK,EAAEE,KAAvB;IAA8B,IAAI,EAAEG;EAApC,EADJ,CA/BJ,CADJ;AAqCH,CA7CL,EA8CI;EACIE,IAAI,EAAE;IACFC,UAAU,EAAE,CAACC,qBAAD,EAAgBC,uBAAhB,EAAiCC,qBAAjC,EAAgDC,sBAAhD,EAAgEC,kBAAhE;EADV;AADV,CA9CJ"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.webinyButtonStyles = void 0;
|
|
7
|
+
|
|
8
|
+
var _emotion = require("emotion");
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* Controls the button styles
|
|
12
|
+
* @type {string}
|
|
13
|
+
*/
|
|
14
|
+
var webinyButtonStyles = /*#__PURE__*/(0, _emotion.css)("&.webiny-ui-button--secondary:not(:disabled){border-color:var(--mdc-theme-primary);}}label:webinyButtonStyles;");
|
|
15
|
+
exports.webinyButtonStyles = webinyButtonStyles;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["webinyButtonStyles","css"],"sources":["Button.styles.ts"],"sourcesContent":["import { css } from \"emotion\";\n\n/**\n * Controls the button styles\n * @type {string}\n */\nconst webinyButtonStyles = css`\n &.webiny-ui-button--secondary:not(:disabled) {\n border-color: var(--mdc-theme-primary);\n }\n }\n`;\n\nexport { webinyButtonStyles };\n"],"mappings":";;;;;;;AAAA;;AAEA;AACA;AACA;AACA;AACA,IAAMA,kBAAkB,oBAAGC,YAAH,mHAAxB"}
|
|
@@ -1,14 +1,11 @@
|
|
|
1
|
-
|
|
1
|
+
import React from "react";
|
|
2
2
|
import { FormComponentProps } from "../../types";
|
|
3
|
-
export
|
|
3
|
+
export interface CopyButtonProps extends FormComponentProps {
|
|
4
4
|
value: string;
|
|
5
5
|
onCopy?: () => void;
|
|
6
|
-
}
|
|
6
|
+
}
|
|
7
7
|
/**
|
|
8
8
|
* Shows the icon button.
|
|
9
|
-
* @param props
|
|
10
|
-
* @returns {*}
|
|
11
|
-
* @constructor
|
|
12
9
|
*/
|
|
13
|
-
declare const CopyButton:
|
|
10
|
+
declare const CopyButton: React.FC<CopyButtonProps>;
|
|
14
11
|
export { CopyButton };
|
|
@@ -1,32 +1,42 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
|
|
5
|
+
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
6
|
+
|
|
7
|
+
Object.defineProperty(exports, "__esModule", {
|
|
8
|
+
value: true
|
|
9
|
+
});
|
|
10
|
+
exports.CopyButton = void 0;
|
|
11
|
+
|
|
12
|
+
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
13
|
+
|
|
14
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
15
|
+
|
|
16
|
+
var _file_copy24px = require("../assets/file_copy-24px.svg");
|
|
17
|
+
|
|
18
|
+
var _index = require("../index");
|
|
19
|
+
|
|
2
20
|
var _excluded = ["value", "onCopy"];
|
|
3
|
-
import * as React from "react";
|
|
4
|
-
import { ReactComponent as CopyToClipboardIcon } from "@svgr/webpack!../assets/file_copy-24px.svg";
|
|
5
|
-
import { IconButton } from "../index";
|
|
6
|
-
import { useCallback } from "react";
|
|
7
21
|
|
|
8
22
|
/**
|
|
9
23
|
* Shows the icon button.
|
|
10
|
-
* @param props
|
|
11
|
-
* @returns {*}
|
|
12
|
-
* @constructor
|
|
13
24
|
*/
|
|
14
25
|
var CopyButton = function CopyButton(props) {
|
|
15
26
|
var value = props.value,
|
|
16
27
|
onCopy = props.onCopy,
|
|
17
|
-
otherProps =
|
|
18
|
-
|
|
19
|
-
var copyToClipboard = useCallback(function () {
|
|
28
|
+
otherProps = (0, _objectWithoutProperties2.default)(props, _excluded);
|
|
29
|
+
var copyToClipboard = (0, _react.useCallback)(function () {
|
|
20
30
|
navigator.clipboard.writeText(value);
|
|
21
31
|
|
|
22
32
|
if (typeof onCopy === "function") {
|
|
23
33
|
onCopy();
|
|
24
34
|
}
|
|
25
35
|
}, [value]);
|
|
26
|
-
return /*#__PURE__*/
|
|
36
|
+
return /*#__PURE__*/_react.default.createElement(_index.IconButton, Object.assign({}, otherProps, {
|
|
27
37
|
onClick: copyToClipboard,
|
|
28
|
-
icon: /*#__PURE__*/
|
|
38
|
+
icon: /*#__PURE__*/_react.default.createElement(_file_copy24px.ReactComponent, null)
|
|
29
39
|
}));
|
|
30
40
|
};
|
|
31
41
|
|
|
32
|
-
|
|
42
|
+
exports.CopyButton = CopyButton;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["CopyButton","props","value","onCopy","otherProps","copyToClipboard","useCallback","navigator","clipboard","writeText"],"sources":["CopyButton.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as CopyToClipboardIcon } from \"../assets/file_copy-24px.svg\";\nimport { IconButton } from \"../index\";\nimport { FormComponentProps } from \"../../types\";\nimport { useCallback } from \"react\";\n\nexport interface CopyButtonProps extends FormComponentProps {\n value: string;\n onCopy?: () => void;\n}\n\n/**\n * Shows the icon button.\n */\nconst CopyButton: React.FC<CopyButtonProps> = props => {\n const { value, onCopy, ...otherProps } = props;\n\n const copyToClipboard = useCallback(() => {\n navigator.clipboard.writeText(value);\n if (typeof onCopy === \"function\") {\n onCopy();\n }\n }, [value]);\n\n return <IconButton {...otherProps} onClick={copyToClipboard} icon={<CopyToClipboardIcon />} />;\n};\n\nexport { CopyButton };\n"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AACA;;;;AASA;AACA;AACA;AACA,IAAMA,UAAqC,GAAG,SAAxCA,UAAwC,CAAAC,KAAK,EAAI;EACnD,IAAQC,KAAR,GAAyCD,KAAzC,CAAQC,KAAR;EAAA,IAAeC,MAAf,GAAyCF,KAAzC,CAAeE,MAAf;EAAA,IAA0BC,UAA1B,0CAAyCH,KAAzC;EAEA,IAAMI,eAAe,GAAG,IAAAC,kBAAA,EAAY,YAAM;IACtCC,SAAS,CAACC,SAAV,CAAoBC,SAApB,CAA8BP,KAA9B;;IACA,IAAI,OAAOC,MAAP,KAAkB,UAAtB,EAAkC;MAC9BA,MAAM;IACT;EACJ,CALuB,EAKrB,CAACD,KAAD,CALqB,CAAxB;EAOA,oBAAO,6BAAC,iBAAD,oBAAgBE,UAAhB;IAA4B,OAAO,EAAEC,eAArC;IAAsD,IAAI,eAAE,6BAAC,6BAAD;EAA5D,GAAP;AACH,CAXD"}
|
|
@@ -1,18 +1,28 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
var
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
|
|
5
|
+
var _react = _interopRequireDefault(require("react"));
|
|
6
|
+
|
|
7
|
+
var _react2 = require("@storybook/react");
|
|
8
|
+
|
|
9
|
+
var _Story = require("@webiny/storybook-utils/Story");
|
|
10
|
+
|
|
11
|
+
var _README = _interopRequireDefault(require("./README.md"));
|
|
12
|
+
|
|
13
|
+
var _index = require("./../../Menu/index");
|
|
14
|
+
|
|
15
|
+
var _CopyButton = require("./CopyButton");
|
|
16
|
+
|
|
17
|
+
var story = (0, _react2.storiesOf)("Components/Button", module);
|
|
8
18
|
story.add("copy button", function () {
|
|
9
|
-
return /*#__PURE__*/
|
|
19
|
+
return /*#__PURE__*/_react.default.createElement(_Story.Story, null, /*#__PURE__*/_react.default.createElement(_Story.StoryReadme, null, _README.default), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, {
|
|
10
20
|
title: "Copy button"
|
|
11
|
-
}, /*#__PURE__*/
|
|
21
|
+
}, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("span", null, "Click the button to copy the \"Hello\" value:"), /*#__PURE__*/_react.default.createElement(_CopyButton.CopyButton, {
|
|
12
22
|
value: "Hello"
|
|
13
23
|
}))));
|
|
14
24
|
}, {
|
|
15
25
|
info: {
|
|
16
|
-
propTablesExclude: [Menu, MenuItem, Story, StoryReadme, StorySandbox]
|
|
26
|
+
propTablesExclude: [_index.Menu, _index.MenuItem, _Story.Story, _Story.StoryReadme, _Story.StorySandbox]
|
|
17
27
|
}
|
|
18
28
|
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["story","storiesOf","module","add","readme","info","propTablesExclude","Menu","MenuItem","Story","StoryReadme","StorySandbox"],"sources":["CopyButton.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { Story, StoryReadme, StorySandbox } from \"@webiny/storybook-utils/Story\";\nimport readme from \"./README.md\";\nimport { Menu, MenuItem } from \"./../../Menu/index\";\n\nimport { CopyButton } from \"./CopyButton\";\n\nconst story = storiesOf(\"Components/Button\", module);\n\nstory.add(\n \"copy button\",\n () => {\n return (\n <Story>\n <StoryReadme>{readme}</StoryReadme>\n <StorySandbox title={\"Copy button\"}>\n <div>\n <span>Click the button to copy the "Hello" value:</span>\n <CopyButton value=\"Hello\" />\n </div>\n </StorySandbox>\n </Story>\n );\n },\n {\n info: {\n propTablesExclude: [Menu, MenuItem, Story, StoryReadme, StorySandbox]\n }\n }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,mBAAV,EAA+BC,MAA/B,CAAd;AAEAF,KAAK,CAACG,GAAN,CACI,aADJ,EAEI,YAAM;EACF,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,uDACI,2FADJ,eAEI,6BAAC,sBAAD;IAAY,KAAK,EAAC;EAAlB,EAFJ,CADJ,CAFJ,CADJ;AAWH,CAdL,EAeI;EACIC,IAAI,EAAE;IACFC,iBAAiB,EAAE,CAACC,WAAD,EAAOC,eAAP,EAAiBC,YAAjB,EAAwBC,kBAAxB,EAAqCC,mBAArC;EADjB;AADV,CAfJ"}
|