@webiny/ui 5.34.8 → 5.35.0-beta.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/Accordion/Accordion.js +4 -14
- package/Accordion/Accordion.js.map +1 -1
- package/Accordion/Accordion.stories.js +0 -8
- package/Accordion/Accordion.stories.js.map +1 -1
- package/Accordion/AccordionItem.d.ts +4 -1
- package/Accordion/AccordionItem.js +5 -26
- package/Accordion/AccordionItem.js.map +1 -1
- package/Accordion/AccordionItemActions.js +2 -10
- package/Accordion/AccordionItemActions.js.map +1 -1
- package/Accordion/index.js +0 -4
- package/Accordion/index.js.map +1 -1
- package/Alert/Alert.js +3 -10
- package/Alert/Alert.js.map +1 -1
- package/Alert/Alert.stories.js +0 -6
- package/Alert/Alert.stories.js.map +1 -1
- package/Alert/index.js +0 -2
- package/Alert/index.js.map +1 -1
- package/AutoComplete/AutoComplete.js +38 -88
- package/AutoComplete/AutoComplete.js.map +1 -1
- package/AutoComplete/AutoComplete.stories.js +0 -7
- package/AutoComplete/AutoComplete.stories.js.map +1 -1
- package/AutoComplete/MultiAutoComplete.js +52 -128
- package/AutoComplete/MultiAutoComplete.js.map +1 -1
- package/AutoComplete/MultiAutoComplete.stories.js +0 -8
- package/AutoComplete/MultiAutoComplete.stories.js.map +1 -1
- package/AutoComplete/index.js +0 -4
- package/AutoComplete/index.js.map +1 -1
- package/AutoComplete/styles.js +0 -2
- package/AutoComplete/styles.js.map +1 -1
- package/AutoComplete/utils.js +0 -8
- package/AutoComplete/utils.js.map +1 -1
- package/Avatar/Avatar.js +7 -18
- package/Avatar/Avatar.js.map +1 -1
- package/Avatar/Avatar.stories.js +0 -6
- package/Avatar/Avatar.stories.js.map +1 -1
- package/Avatar/index.js +0 -2
- package/Avatar/index.js.map +1 -1
- package/Button/Button.js +39 -59
- package/Button/Button.js.map +1 -1
- package/Button/Button.stories.js +0 -10
- package/Button/Button.stories.js.map +1 -1
- package/Button/Button.styles.js +0 -2
- package/Button/Button.styles.js.map +1 -1
- package/Button/CopyButton/CopyButton.js +2 -12
- package/Button/CopyButton/CopyButton.js.map +1 -1
- package/Button/CopyButton/CopyButton.stories.js +0 -7
- package/Button/CopyButton/CopyButton.stories.js.map +1 -1
- package/Button/IconButton/IconButton.js +6 -11
- package/Button/IconButton/IconButton.js.map +1 -1
- package/Button/IconButton/IconButton.stories.js +0 -9
- package/Button/IconButton/IconButton.stories.js.map +1 -1
- package/Button/index.js +0 -6
- package/Button/index.js.map +1 -1
- package/Carousel/Carousel.js +0 -14
- package/Carousel/Carousel.js.map +1 -1
- package/Carousel/Carouser.stories.js +0 -7
- package/Carousel/Carouser.stories.js.map +1 -1
- package/Carousel/index.js +0 -2
- package/Carousel/index.js.map +1 -1
- package/Checkbox/Checkbox.d.ts +1 -0
- package/Checkbox/Checkbox.js +13 -31
- package/Checkbox/Checkbox.js.map +1 -1
- package/Checkbox/Checkbox.stories.js +0 -8
- package/Checkbox/Checkbox.stories.js.map +1 -1
- package/Checkbox/Checkbox.styles.js +0 -2
- package/Checkbox/Checkbox.styles.js.map +1 -1
- package/Checkbox/CheckboxGroup.js +7 -24
- package/Checkbox/CheckboxGroup.js.map +1 -1
- package/Checkbox/CheckboxGroup.stories.js +2 -10
- package/Checkbox/CheckboxGroup.stories.js.map +1 -1
- package/Checkbox/index.js +0 -3
- package/Checkbox/index.js.map +1 -1
- package/Chips/Chip.js +1 -8
- package/Chips/Chip.js.map +1 -1
- package/Chips/Chips.js +3 -13
- package/Chips/Chips.js.map +1 -1
- package/Chips/Chips.stories.js +0 -8
- package/Chips/Chips.stories.js.map +1 -1
- package/Chips/index.js +0 -4
- package/Chips/index.js.map +1 -1
- package/Chips/styles.js +0 -2
- package/Chips/styles.js.map +1 -1
- package/CodeEditor/CodeEditor.js +8 -36
- package/CodeEditor/CodeEditor.js.map +1 -1
- package/CodeEditor/CodeEditor.stories.js +0 -10
- package/CodeEditor/CodeEditor.stories.js.map +1 -1
- package/CodeEditor/index.js +0 -2
- package/CodeEditor/index.js.map +1 -1
- package/ColorPicker/ColorPicker.js +7 -31
- package/ColorPicker/ColorPicker.js.map +1 -1
- package/ColorPicker/ColorPicker.stories.js +0 -8
- package/ColorPicker/ColorPicker.stories.js.map +1 -1
- package/ColorPicker/index.js +0 -2
- package/ColorPicker/index.js.map +1 -1
- package/ConfirmationDialog/ConfirmationDialog.js +33 -65
- package/ConfirmationDialog/ConfirmationDialog.js.map +1 -1
- package/ConfirmationDialog/ConfirmationDialog.stories.js +0 -7
- package/ConfirmationDialog/ConfirmationDialog.stories.js.map +1 -1
- package/ConfirmationDialog/index.js +0 -4
- package/ConfirmationDialog/index.js.map +1 -1
- package/ConfirmationDialog/withConfirmation.js +0 -5
- package/ConfirmationDialog/withConfirmation.js.map +1 -1
- package/DataTable/DataTable.d.ts +14 -1
- package/DataTable/DataTable.js +60 -45
- package/DataTable/DataTable.js.map +1 -1
- package/DataTable/DataTable.stories.js +0 -6
- package/DataTable/DataTable.stories.js.map +1 -1
- package/DataTable/index.js +0 -2
- package/DataTable/index.js.map +1 -1
- package/DataTable/styled.d.ts +29 -1
- package/DataTable/styled.js +25 -7
- package/DataTable/styled.js.map +1 -1
- package/DelayedOnChange/DelayedOnChange.js +19 -35
- package/DelayedOnChange/DelayedOnChange.js.map +1 -1
- package/DelayedOnChange/index.js +0 -3
- package/DelayedOnChange/index.js.map +1 -1
- package/DelayedOnChange/withDelayedOnChange.js +3 -9
- package/DelayedOnChange/withDelayedOnChange.js.map +1 -1
- package/Dialog/Dialog.js +5 -40
- package/Dialog/Dialog.js.map +1 -1
- package/Dialog/Dialog.stories.js +0 -7
- package/Dialog/Dialog.stories.js.map +1 -1
- package/Dialog/index.js +0 -2
- package/Dialog/index.js.map +1 -1
- package/Drawer/Drawer.js +0 -9
- package/Drawer/Drawer.js.map +1 -1
- package/Drawer/Drawer.stories.js +0 -8
- package/Drawer/Drawer.stories.js.map +1 -1
- package/Drawer/index.js +0 -2
- package/Drawer/index.js.map +1 -1
- package/DynamicFieldset/Fieldset.js +7 -34
- package/DynamicFieldset/Fieldset.js.map +1 -1
- package/DynamicFieldset/index.js +0 -2
- package/DynamicFieldset/index.js.map +1 -1
- package/Elevation/Elevation.js +0 -5
- package/Elevation/Elevation.js.map +1 -1
- package/Elevation/Elevation.stories.js +0 -8
- package/Elevation/Elevation.stories.js.map +1 -1
- package/Elevation/index.js +0 -2
- package/Elevation/index.js.map +1 -1
- package/FormElementMessage/FormElementMessage.js +0 -5
- package/FormElementMessage/FormElementMessage.js.map +1 -1
- package/FormElementMessage/index.js +0 -1
- package/FormElementMessage/index.js.map +1 -1
- package/FullName/FullName.js +0 -7
- package/FullName/FullName.js.map +1 -1
- package/FullName/index.js +0 -2
- package/FullName/index.js.map +1 -1
- package/Grid/Grid.js +1 -9
- package/Grid/Grid.js.map +1 -1
- package/Grid/Grid.stories.js +0 -6
- package/Grid/Grid.stories.js.map +1 -1
- package/Grid/index.js +0 -2
- package/Grid/index.js.map +1 -1
- package/Helpers/ClassNames.js +0 -9
- package/Helpers/ClassNames.js.map +1 -1
- package/Helpers/index.js +0 -1
- package/Helpers/index.js.map +1 -1
- package/Icon/Icon.js +1 -7
- package/Icon/Icon.js.map +1 -1
- package/Icon/Icon.stories.js +0 -10
- package/Icon/Icon.stories.js.map +1 -1
- package/Icon/index.js +0 -2
- package/Icon/index.js.map +1 -1
- package/Image/Image.js +0 -8
- package/Image/Image.js.map +1 -1
- package/Image/Image.stories.js +0 -7
- package/Image/Image.stories.js.map +1 -1
- package/Image/index.js +0 -2
- package/Image/index.js.map +1 -1
- package/ImageEditor/ImageEditor.js +46 -107
- package/ImageEditor/ImageEditor.js.map +1 -1
- package/ImageEditor/index.js +0 -2
- package/ImageEditor/index.js.map +1 -1
- package/ImageEditor/toolbar/crop.js +1 -16
- package/ImageEditor/toolbar/crop.js.map +1 -1
- package/ImageEditor/toolbar/filter.js +11 -36
- package/ImageEditor/toolbar/filter.js.map +1 -1
- package/ImageEditor/toolbar/flip.js +0 -17
- package/ImageEditor/toolbar/flip.js.map +1 -1
- package/ImageEditor/toolbar/icons/index.js +0 -8
- package/ImageEditor/toolbar/icons/index.js.map +1 -1
- package/ImageEditor/toolbar/index.js +0 -5
- package/ImageEditor/toolbar/index.js.map +1 -1
- package/ImageEditor/toolbar/rotate.js +8 -43
- package/ImageEditor/toolbar/rotate.js.map +1 -1
- package/ImageUpload/Image.js +10 -34
- package/ImageUpload/Image.js.map +1 -1
- package/ImageUpload/ImageEditorDialog.js +11 -33
- package/ImageUpload/ImageEditorDialog.js.map +1 -1
- package/ImageUpload/MultiImageUpload.js +111 -175
- package/ImageUpload/MultiImageUpload.js.map +1 -1
- package/ImageUpload/MultiImageUpload.stories.js +0 -8
- package/ImageUpload/MultiImageUpload.stories.js.map +1 -1
- package/ImageUpload/SingleImageUpload.js +38 -79
- package/ImageUpload/SingleImageUpload.js.map +1 -1
- package/ImageUpload/SingleImageUpload.stories.js +0 -8
- package/ImageUpload/SingleImageUpload.stories.js.map +1 -1
- package/ImageUpload/index.js +0 -5
- package/ImageUpload/index.js.map +1 -1
- package/ImageUpload/styled.d.ts +27 -17
- package/ImageUpload/styled.js +0 -5
- package/ImageUpload/styled.js.map +1 -1
- package/Input/Input.js +34 -60
- package/Input/Input.js.map +1 -1
- package/Input/Input.stories.js +0 -13
- package/Input/Input.stories.js.map +1 -1
- package/Input/__tests__/Input.test.js +4 -30
- package/Input/__tests__/Input.test.js.map +1 -1
- package/Input/index.js +0 -2
- package/Input/index.js.map +1 -1
- package/List/CollapsibleList/CollapsibleList.stories.js +0 -8
- package/List/CollapsibleList/CollapsibleList.stories.js.map +1 -1
- package/List/CollapsibleList/index.js +0 -6
- package/List/CollapsibleList/index.js.map +1 -1
- package/List/DataList/DataList.js +7 -45
- package/List/DataList/DataList.js.map +1 -1
- package/List/DataList/DataList.stories.js +2 -10
- package/List/DataList/DataList.stories.js.map +1 -1
- package/List/DataList/DataListModalOverlay/DataListModalOverlay.d.ts +8 -6
- package/List/DataList/DataListModalOverlay/DataListModalOverlay.js +8 -18
- package/List/DataList/DataListModalOverlay/DataListModalOverlay.js.map +1 -1
- package/List/DataList/DataListModalOverlay/DataListModalOverlayAction.js +3 -14
- package/List/DataList/DataListModalOverlay/DataListModalOverlayAction.js.map +1 -1
- package/List/DataList/DataListModalOverlay/DataListModalOverlayContext.js +3 -12
- package/List/DataList/DataListModalOverlay/DataListModalOverlayContext.js.map +1 -1
- package/List/DataList/DataListModalOverlay/index.js +0 -3
- package/List/DataList/DataListModalOverlay/index.js.map +1 -1
- package/List/DataList/DataListWithSections.js +4 -48
- package/List/DataList/DataListWithSections.js.map +1 -1
- package/List/DataList/Loader.js +0 -7
- package/List/DataList/Loader.js.map +1 -1
- package/List/DataList/NoData.js +0 -7
- package/List/DataList/NoData.js.map +1 -1
- package/List/DataList/icons/index.js +0 -29
- package/List/DataList/icons/index.js.map +1 -1
- package/List/DataList/index.js +0 -6
- package/List/DataList/index.js.map +1 -1
- package/List/List.js +0 -39
- package/List/List.js.map +1 -1
- package/List/List.stories.js +0 -12
- package/List/List.stories.js.map +1 -1
- package/List/icons/index.js +0 -3
- package/List/icons/index.js.map +1 -1
- package/List/index.js +0 -4
- package/List/index.js.map +1 -1
- package/Menu/Menu.js +2 -28
- package/Menu/Menu.js.map +1 -1
- package/Menu/Menu.stories.js +0 -7
- package/Menu/Menu.stories.js.map +1 -1
- package/Menu/index.js +0 -2
- package/Menu/index.js.map +1 -1
- package/Mosaic/Mosaic.js +3 -7
- package/Mosaic/Mosaic.js.map +1 -1
- package/Mosaic/Mosaic.stories.js +0 -6
- package/Mosaic/Mosaic.stories.js.map +1 -1
- package/Mosaic/index.js +0 -2
- package/Mosaic/index.js.map +1 -1
- package/Progress/CircularProgress.js +6 -14
- package/Progress/CircularProgress.js.map +1 -1
- package/Progress/index.js +0 -2
- package/Progress/index.js.map +1 -1
- package/Radio/Radio.js +9 -28
- package/Radio/Radio.js.map +1 -1
- package/Radio/Radio.styles.js +0 -2
- package/Radio/Radio.styles.js.map +1 -1
- package/Radio/RadioGroup.js +5 -21
- package/Radio/RadioGroup.js.map +1 -1
- package/Radio/RadioGroup.stories.js +2 -10
- package/Radio/RadioGroup.stories.js.map +1 -1
- package/Radio/index.js +0 -3
- package/Radio/index.js.map +1 -1
- package/RichTextEditor/RichTextEditor.js +30 -64
- package/RichTextEditor/RichTextEditor.js.map +1 -1
- package/RichTextEditor/RichTextEditor.stories.js +0 -7
- package/RichTextEditor/RichTextEditor.stories.js.map +1 -1
- package/RichTextEditor/createPropsFromConfig.js +0 -4
- package/RichTextEditor/createPropsFromConfig.js.map +1 -1
- package/RichTextEditor/index.js +0 -3
- package/RichTextEditor/index.js.map +1 -1
- package/Ripple/Ripple.js +0 -6
- package/Ripple/Ripple.js.map +1 -1
- package/Ripple/Ripple.stories.js +0 -12
- package/Ripple/Ripple.stories.js.map +1 -1
- package/Ripple/index.js +0 -2
- package/Ripple/index.js.map +1 -1
- package/Scrollbar/Scrollbar.js +0 -5
- package/Scrollbar/Scrollbar.js.map +1 -1
- package/Scrollbar/Scrollbar.stories.js +0 -6
- package/Scrollbar/Scrollbar.stories.js.map +1 -1
- package/Scrollbar/index.js +0 -2
- package/Scrollbar/index.js.map +1 -1
- package/Section/Section.stories.js +0 -7
- package/Section/Section.stories.js.map +1 -1
- package/Section/index.js +2 -12
- package/Section/index.js.map +1 -1
- package/Select/Select.js +9 -32
- package/Select/Select.js.map +1 -1
- package/Select/Select.stories.js +0 -8
- package/Select/Select.stories.js.map +1 -1
- package/Select/index.js +0 -2
- package/Select/index.js.map +1 -1
- package/Skeleton/Skeleton.d.ts +6 -2
- package/Skeleton/Skeleton.js +8 -11
- package/Skeleton/Skeleton.js.map +1 -1
- package/Skeleton/Skeleton.stories.js +0 -6
- package/Skeleton/Skeleton.stories.js.map +1 -1
- package/Skeleton/index.js +0 -2
- package/Skeleton/index.js.map +1 -1
- package/Slider/Slider.js +7 -29
- package/Slider/Slider.js.map +1 -1
- package/Slider/Slider.stories.js +1 -9
- package/Slider/Slider.stories.js.map +1 -1
- package/Slider/index.js +0 -2
- package/Slider/index.js.map +1 -1
- package/Snackbar/Snackbar.js +0 -19
- package/Snackbar/Snackbar.js.map +1 -1
- package/Snackbar/Snackbar.stories.js +0 -23
- package/Snackbar/Snackbar.stories.js.map +1 -1
- package/Snackbar/index.js +0 -1
- package/Snackbar/index.js.map +1 -1
- package/Switch/Switch.js +5 -28
- package/Switch/Switch.js.map +1 -1
- package/Switch/Switch.stories.js +0 -8
- package/Switch/Switch.stories.js.map +1 -1
- package/Switch/index.js +0 -2
- package/Switch/index.js.map +1 -1
- package/Tabs/Tab.js +0 -9
- package/Tabs/Tab.js.map +1 -1
- package/Tabs/Tabs.js +15 -29
- package/Tabs/Tabs.js.map +1 -1
- package/Tabs/Tabs.stories.js +0 -10
- package/Tabs/Tabs.stories.js.map +1 -1
- package/Tabs/index.js +0 -4
- package/Tabs/index.js.map +1 -1
- package/Tags/Tags.js +13 -37
- package/Tags/Tags.js.map +1 -1
- package/Tags/Tags.stories.js +0 -8
- package/Tags/Tags.stories.js.map +1 -1
- package/Tags/index.js +0 -2
- package/Tags/index.js.map +1 -1
- package/Tooltip/Tooltip.js +0 -19
- package/Tooltip/Tooltip.js.map +1 -1
- package/Tooltip/Tooltip.stories.js +0 -6
- package/Tooltip/Tooltip.stories.js.map +1 -1
- package/Tooltip/index.js +0 -2
- package/Tooltip/index.js.map +1 -1
- package/TopAppBar/TopAppBar.js +1 -8
- package/TopAppBar/TopAppBar.js.map +1 -1
- package/TopAppBar/TopAppBar.stories.js +3 -16
- package/TopAppBar/TopAppBar.stories.js.map +1 -1
- package/TopAppBar/TopAppBarActionItem.js +0 -5
- package/TopAppBar/TopAppBarActionItem.js.map +1 -1
- package/TopAppBar/TopAppBarNavigationIcon.js +0 -5
- package/TopAppBar/TopAppBarNavigationIcon.js.map +1 -1
- package/TopAppBar/TopAppBarPrimary.js +1 -8
- package/TopAppBar/TopAppBarPrimary.js.map +1 -1
- package/TopAppBar/TopAppBarSecondary.js +3 -10
- package/TopAppBar/TopAppBarSecondary.js.map +1 -1
- package/TopAppBar/TopAppBarSection.js +1 -8
- package/TopAppBar/TopAppBarSection.js.map +1 -1
- package/TopAppBar/TopAppBarTitle.js +1 -8
- package/TopAppBar/TopAppBarTitle.js.map +1 -1
- package/TopAppBar/index.js +0 -14
- package/TopAppBar/index.js.map +1 -1
- package/TopProgressBar/TopProgressBar.js +0 -5
- package/TopProgressBar/TopProgressBar.js.map +1 -1
- package/TopProgressBar/TopProgressBar.stories.js +1 -8
- package/TopProgressBar/TopProgressBar.stories.js.map +1 -1
- package/TopProgressBar/hoc/index.js +0 -2
- package/TopProgressBar/hoc/index.js.map +1 -1
- package/TopProgressBar/hoc/withTopProgressBar.js +2 -8
- package/TopProgressBar/hoc/withTopProgressBar.js.map +1 -1
- package/TopProgressBar/index.js +0 -2
- package/TopProgressBar/index.js.map +1 -1
- package/Typography/Typography.js +0 -5
- package/Typography/Typography.js.map +1 -1
- package/Typography/Typography.stories.js +0 -6
- package/Typography/Typography.stories.js.map +1 -1
- package/Typography/index.js +0 -2
- package/Typography/index.js.map +1 -1
- package/package.json +16 -15
package/Accordion/Accordion.js
CHANGED
|
@@ -1,33 +1,24 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports.Accordion = void 0;
|
|
9
|
-
|
|
10
8
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
11
|
-
|
|
12
9
|
var _react = _interopRequireDefault(require("react"));
|
|
13
|
-
|
|
14
10
|
var _List = require("../List");
|
|
15
|
-
|
|
16
11
|
var _Elevation = require("../Elevation");
|
|
17
|
-
|
|
18
12
|
var _emotion = require("emotion");
|
|
19
|
-
|
|
20
13
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
21
|
-
|
|
22
14
|
var _excluded = ["children", "elevation", "className"];
|
|
23
15
|
var listStyle = /*#__PURE__*/(0, _emotion.css)("&.mdc-list{padding:0;&.mdc-list--two-line .mdc-list-item{height:48px;padding:8px 20px;}}label:listStyle;");
|
|
24
|
-
|
|
25
16
|
var Accordion = function Accordion(props) {
|
|
26
17
|
var children = props.children,
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
18
|
+
_props$elevation = props.elevation,
|
|
19
|
+
elevation = _props$elevation === void 0 ? 2 : _props$elevation,
|
|
20
|
+
className = props.className,
|
|
21
|
+
other = (0, _objectWithoutProperties2.default)(props, _excluded);
|
|
31
22
|
return /*#__PURE__*/_react.default.createElement(_Elevation.Elevation, {
|
|
32
23
|
z: elevation,
|
|
33
24
|
className: (0, _classnames.default)("webiny-ui-accordion", className)
|
|
@@ -36,5 +27,4 @@ var Accordion = function Accordion(props) {
|
|
|
36
27
|
className: listStyle
|
|
37
28
|
}, other), children));
|
|
38
29
|
};
|
|
39
|
-
|
|
40
30
|
exports.Accordion = Accordion;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["listStyle","css","Accordion","props","children","elevation","className","other","classNames"],"sources":["Accordion.tsx"],"sourcesContent":["import React from \"react\";\nimport { List, ListItem } from \"../List\";\nimport { AccordionItem } from \"./AccordionItem\";\nimport { Elevation } from \"../Elevation\";\nimport { css } from \"emotion\";\nimport classNames from \"classnames\";\n\nexport interface AccordionProps {\n /**\n * Element displayed when accordion is expanded.\n */\n children:\n | React.ReactElement<typeof ListItem>[]\n | React.ReactElement<typeof AccordionItem>\n | React.ReactElement<typeof AccordionItem>[];\n\n /**\n * Elevation number, default set to 2\n */\n elevation?: number;\n\n /**\n * Append a class name\n */\n className?: string;\n}\n\nconst listStyle = css`\n &.mdc-list {\n padding: 0;\n &.mdc-list--two-line .mdc-list-item {\n height: 48px;\n padding: 8px 20px;\n }\n }\n`;\n\nconst Accordion: React.FC<AccordionProps> = props => {\n const { children, elevation = 2, className, ...other } = props;\n return (\n <Elevation z={elevation} className={classNames(\"webiny-ui-accordion\", className)}>\n <List twoLine className={listStyle} {...other}>\n {children}\n </List>\n </Elevation>\n );\n};\n\nexport { Accordion };\n"],"mappings":"
|
|
1
|
+
{"version":3,"names":["listStyle","css","Accordion","props","children","elevation","className","other","classNames"],"sources":["Accordion.tsx"],"sourcesContent":["import React from \"react\";\nimport { List, ListItem } from \"../List\";\nimport { AccordionItem } from \"./AccordionItem\";\nimport { Elevation } from \"../Elevation\";\nimport { css } from \"emotion\";\nimport classNames from \"classnames\";\n\nexport interface AccordionProps {\n /**\n * Element displayed when accordion is expanded.\n */\n children:\n | React.ReactElement<typeof ListItem>[]\n | React.ReactElement<typeof AccordionItem>\n | React.ReactElement<typeof AccordionItem>[];\n\n /**\n * Elevation number, default set to 2\n */\n elevation?: number;\n\n /**\n * Append a class name\n */\n className?: string;\n}\n\nconst listStyle = css`\n &.mdc-list {\n padding: 0;\n &.mdc-list--two-line .mdc-list-item {\n height: 48px;\n padding: 8px 20px;\n }\n }\n`;\n\nconst Accordion: React.FC<AccordionProps> = props => {\n const { children, elevation = 2, className, ...other } = props;\n return (\n <Elevation z={elevation} className={classNames(\"webiny-ui-accordion\", className)}>\n <List twoLine className={listStyle} {...other}>\n {children}\n </List>\n </Elevation>\n );\n};\n\nexport { Accordion };\n"],"mappings":";;;;;;;;AAAA;AACA;AAEA;AACA;AACA;AAAoC;AAsBpC,IAAMA,SAAS,oBAAGC,YAAG,6GAQpB;AAED,IAAMC,SAAmC,GAAG,SAAtCA,SAAmC,CAAGC,KAAK,EAAI;EACjD,IAAQC,QAAQ,GAAyCD,KAAK,CAAtDC,QAAQ;IAAA,mBAAyCD,KAAK,CAA5CE,SAAS;IAATA,SAAS,iCAAG,CAAC;IAAEC,SAAS,GAAeH,KAAK,CAA7BG,SAAS;IAAKC,KAAK,0CAAKJ,KAAK;EAC9D,oBACI,6BAAC,oBAAS;IAAC,CAAC,EAAEE,SAAU;IAAC,SAAS,EAAE,IAAAG,mBAAU,EAAC,qBAAqB,EAAEF,SAAS;EAAE,gBAC7E,6BAAC,UAAI;IAAC,OAAO;IAAC,SAAS,EAAEN;EAAU,GAAKO,KAAK,GACxCH,QAAQ,CACN,CACC;AAEpB,CAAC;AAAC"}
|
|
@@ -1,21 +1,13 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
-
|
|
5
4
|
var _react = _interopRequireDefault(require("react"));
|
|
6
|
-
|
|
7
5
|
var _react2 = require("@storybook/react");
|
|
8
|
-
|
|
9
6
|
var _Story = require("@webiny/storybook-utils/Story");
|
|
10
|
-
|
|
11
7
|
var _README = _interopRequireDefault(require("./README.md"));
|
|
12
|
-
|
|
13
8
|
var _Accordion = require("./Accordion");
|
|
14
|
-
|
|
15
9
|
var _AccordionItem = require("./AccordionItem");
|
|
16
|
-
|
|
17
10
|
var _roundSettings24px = require("./icons/round-settings-24px.svg");
|
|
18
|
-
|
|
19
11
|
var story = (0, _react2.storiesOf)("Components/Accordion", module);
|
|
20
12
|
story.add("usage", function () {
|
|
21
13
|
return /*#__PURE__*/_react.default.createElement(_Story.Story, null, /*#__PURE__*/_react.default.createElement(_Story.StoryReadme, null, _README.default), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["story","storiesOf","module","add","readme","info","propTables","Accordion","AccordionItem"],"sources":["Accordion.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport {\n Story,\n StoryReadme,\n StorySandboxCode,\n StorySandbox,\n StorySandboxExample\n} from \"@webiny/storybook-utils/Story\";\nimport readme from \"./README.md\";\nimport { Accordion } from \"./Accordion\";\nimport { AccordionItem } from \"./AccordionItem\";\nimport { ReactComponent as SettingsIcon } from \"./icons/round-settings-24px.svg\";\n\nconst story = storiesOf(\"Components/Accordion\", module);\n\nstory.add(\n \"usage\",\n () => {\n return (\n <Story>\n <StoryReadme>{readme}</StoryReadme>\n <StorySandbox title={\"Accordion\"}>\n <StorySandboxExample>\n <Accordion>\n <AccordionItem\n icon={<SettingsIcon />}\n title=\"Settings 1\"\n description=\"Settings description\"\n open\n >\n <div>Inner child 1</div>\n </AccordionItem>\n <AccordionItem\n icon={<SettingsIcon />}\n title=\"Settings 2\"\n description=\"Settings description\"\n >\n <div>Inner child 2</div>\n </AccordionItem>\n <AccordionItem\n icon={<SettingsIcon />}\n title=\"Settings 3\"\n description=\"Settings description\"\n >\n <div>Inner child 3</div>\n </AccordionItem>\n </Accordion>\n </StorySandboxExample>\n <StorySandboxCode>\n <div>\n <Accordion>\n <AccordionItem\n icon={<SettingsIcon />}\n title=\"Settings 1\"\n description=\"Settings description\"\n open\n >\n <div>Inner child 1</div>\n </AccordionItem>\n <AccordionItem\n icon={<SettingsIcon />}\n title=\"Settings 2\"\n description=\"Settings description\"\n >\n <div>Inner child 2</div>\n </AccordionItem>\n <AccordionItem\n icon={<SettingsIcon />}\n title=\"Settings 3\"\n description=\"Settings description\"\n >\n <div>Inner child 3</div>\n </AccordionItem>\n </Accordion>\n </div>\n </StorySandboxCode>\n </StorySandbox>\n </Story>\n );\n },\n { info: { propTables: [Accordion, AccordionItem] } }\n);\n"],"mappings":"
|
|
1
|
+
{"version":3,"names":["story","storiesOf","module","add","readme","info","propTables","Accordion","AccordionItem"],"sources":["Accordion.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport {\n Story,\n StoryReadme,\n StorySandboxCode,\n StorySandbox,\n StorySandboxExample\n} from \"@webiny/storybook-utils/Story\";\nimport readme from \"./README.md\";\nimport { Accordion } from \"./Accordion\";\nimport { AccordionItem } from \"./AccordionItem\";\nimport { ReactComponent as SettingsIcon } from \"./icons/round-settings-24px.svg\";\n\nconst story = storiesOf(\"Components/Accordion\", module);\n\nstory.add(\n \"usage\",\n () => {\n return (\n <Story>\n <StoryReadme>{readme}</StoryReadme>\n <StorySandbox title={\"Accordion\"}>\n <StorySandboxExample>\n <Accordion>\n <AccordionItem\n icon={<SettingsIcon />}\n title=\"Settings 1\"\n description=\"Settings description\"\n open\n >\n <div>Inner child 1</div>\n </AccordionItem>\n <AccordionItem\n icon={<SettingsIcon />}\n title=\"Settings 2\"\n description=\"Settings description\"\n >\n <div>Inner child 2</div>\n </AccordionItem>\n <AccordionItem\n icon={<SettingsIcon />}\n title=\"Settings 3\"\n description=\"Settings description\"\n >\n <div>Inner child 3</div>\n </AccordionItem>\n </Accordion>\n </StorySandboxExample>\n <StorySandboxCode>\n <div>\n <Accordion>\n <AccordionItem\n icon={<SettingsIcon />}\n title=\"Settings 1\"\n description=\"Settings description\"\n open\n >\n <div>Inner child 1</div>\n </AccordionItem>\n <AccordionItem\n icon={<SettingsIcon />}\n title=\"Settings 2\"\n description=\"Settings description\"\n >\n <div>Inner child 2</div>\n </AccordionItem>\n <AccordionItem\n icon={<SettingsIcon />}\n title=\"Settings 3\"\n description=\"Settings description\"\n >\n <div>Inner child 3</div>\n </AccordionItem>\n </Accordion>\n </div>\n </StorySandboxCode>\n </StorySandbox>\n </Story>\n );\n },\n { info: { propTables: [Accordion, AccordionItem] } }\n);\n"],"mappings":";;;AAAA;AACA;AACA;AAOA;AACA;AACA;AACA;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAS,EAAC,sBAAsB,EAAEC,MAAM,CAAC;AAEvDF,KAAK,CAACG,GAAG,CACL,OAAO,EACP,YAAM;EACF,oBACI,6BAAC,YAAK,qBACF,6BAAC,kBAAW,QAAEC,eAAM,CAAe,eACnC,6BAAC,mBAAY;IAAC,KAAK,EAAE;EAAY,gBAC7B,6BAAC,0BAAmB,qBAChB,6BAAC,oBAAS,qBACN,6BAAC,4BAAa;IACV,IAAI,eAAE,6BAAC,iCAAY,OAAI;IACvB,KAAK,EAAC,YAAY;IAClB,WAAW,EAAC,sBAAsB;IAClC,IAAI;EAAA,gBAEJ,0CAAK,eAAa,CAAM,CACZ,eAChB,6BAAC,4BAAa;IACV,IAAI,eAAE,6BAAC,iCAAY,OAAI;IACvB,KAAK,EAAC,YAAY;IAClB,WAAW,EAAC;EAAsB,gBAElC,0CAAK,eAAa,CAAM,CACZ,eAChB,6BAAC,4BAAa;IACV,IAAI,eAAE,6BAAC,iCAAY,OAAI;IACvB,KAAK,EAAC,YAAY;IAClB,WAAW,EAAC;EAAsB,gBAElC,0CAAK,eAAa,CAAM,CACZ,CACR,CACM,eACtB,6BAAC,uBAAgB,qBACb,uDACI,6BAAC,oBAAS,qBACN,6BAAC,4BAAa;IACV,IAAI,eAAE,6BAAC,iCAAY,OAAI;IACvB,KAAK,EAAC,YAAY;IAClB,WAAW,EAAC,sBAAsB;IAClC,IAAI;EAAA,gBAEJ,0CAAK,eAAa,CAAM,CACZ,eAChB,6BAAC,4BAAa;IACV,IAAI,eAAE,6BAAC,iCAAY,OAAI;IACvB,KAAK,EAAC,YAAY;IAClB,WAAW,EAAC;EAAsB,gBAElC,0CAAK,eAAa,CAAM,CACZ,eAChB,6BAAC,4BAAa;IACV,IAAI,eAAE,6BAAC,iCAAY,OAAI;IACvB,KAAK,EAAC,YAAY;IAClB,WAAW,EAAC;EAAsB,gBAElC,0CAAK,eAAa,CAAM,CACZ,CACR,CACV,CACS,CACR,CACX;AAEhB,CAAC,EACD;EAAEC,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,oBAAS,EAAEC,4BAAa;EAAE;AAAE,CAAC,CACvD"}
|
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
/// <reference types="web" />
|
|
2
2
|
import React from "react";
|
|
3
3
|
import { AccordionItemAction, AccordionItemActions } from "./AccordionItemActions";
|
|
4
|
-
declare const Divider: import("@emotion/styled
|
|
4
|
+
declare const Divider: import("@emotion/styled").StyledComponent<{
|
|
5
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
6
|
+
as?: React.ElementType<any> | undefined;
|
|
7
|
+
}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
5
8
|
export interface AccordionItemProps {
|
|
6
9
|
/**
|
|
7
10
|
* Can user toggle the accordion item by clicking it? Defaults to `true`.
|
|
@@ -1,42 +1,25 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
4
|
-
|
|
5
4
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
6
|
-
|
|
7
5
|
Object.defineProperty(exports, "__esModule", {
|
|
8
6
|
value: true
|
|
9
7
|
});
|
|
10
8
|
exports.AccordionItem = void 0;
|
|
11
|
-
|
|
12
9
|
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
|
|
13
|
-
|
|
14
10
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
15
|
-
|
|
16
11
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
17
|
-
|
|
18
12
|
var _react = _interopRequireWildcard(require("react"));
|
|
19
|
-
|
|
20
13
|
var _List = require("../List");
|
|
21
|
-
|
|
22
14
|
var _Transition = _interopRequireDefault(require("react-transition-group/Transition"));
|
|
23
|
-
|
|
24
15
|
var _Icon = require("../Icon");
|
|
25
|
-
|
|
26
16
|
var _styled = _interopRequireDefault(require("@emotion/styled"));
|
|
27
|
-
|
|
28
17
|
var _emotion = require("emotion");
|
|
29
|
-
|
|
30
18
|
var _Typography = require("../Typography");
|
|
31
|
-
|
|
32
19
|
var _roundKeyboard_arrow_up24px = require("./icons/round-keyboard_arrow_up-24px.svg");
|
|
33
|
-
|
|
34
20
|
var _roundKeyboard_arrow_down24px = require("./icons/round-keyboard_arrow_down-24px.svg");
|
|
35
|
-
|
|
36
21
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
37
|
-
|
|
38
22
|
var _AccordionItemActions = require("./AccordionItemActions");
|
|
39
|
-
|
|
40
23
|
var Content = /*#__PURE__*/(0, _styled.default)("div", {
|
|
41
24
|
label: "Content",
|
|
42
25
|
target: "eypjd5u0"
|
|
@@ -64,7 +47,6 @@ var defaultStyle = {
|
|
|
64
47
|
pointerEvents: "none",
|
|
65
48
|
overflow: "hidden"
|
|
66
49
|
};
|
|
67
|
-
|
|
68
50
|
/**
|
|
69
51
|
* We are casting pointerEvents as any because csstype does not have PointerEvents exported. Or at least, that is the error.
|
|
70
52
|
*/
|
|
@@ -98,16 +80,14 @@ var Actions = /*#__PURE__*/(0, _styled.default)(_List.ListItemMeta, {
|
|
|
98
80
|
label: "Actions",
|
|
99
81
|
target: "eypjd5u5"
|
|
100
82
|
})("display:flex;height:40%;align-items:center;");
|
|
101
|
-
|
|
102
83
|
var AccordionItemComponent = function AccordionItemComponent(props) {
|
|
103
84
|
var _useState = (0, _react.useState)(props.open ? props.open : false),
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
85
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
86
|
+
open = _useState2[0],
|
|
87
|
+
setState = _useState2[1];
|
|
108
88
|
var _props$interactive = props.interactive,
|
|
109
|
-
|
|
110
|
-
|
|
89
|
+
interactive = _props$interactive === void 0 ? true : _props$interactive,
|
|
90
|
+
actions = props.actions;
|
|
111
91
|
var toggleState = (0, _react.useCallback)(function () {
|
|
112
92
|
setState(!open);
|
|
113
93
|
}, [open]);
|
|
@@ -143,7 +123,6 @@ var AccordionItemComponent = function AccordionItemComponent(props) {
|
|
|
143
123
|
}, props.children);
|
|
144
124
|
}));
|
|
145
125
|
};
|
|
146
|
-
|
|
147
126
|
var AccordionItem = Object.assign(AccordionItemComponent, {
|
|
148
127
|
Divider: Divider,
|
|
149
128
|
Action: _AccordionItemActions.AccordionItemAction,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["Content","styled","listItem","css","ListItemTitle","ListItemDescription","TitleContent","openedState","nonInteractive","duration","defaultStyle","transition","opacity","height","pointerEvents","overflow","transitionStyles","entering","padding","entered","exiting","Divider","Actions","ListItemMeta","AccordionItemComponent","props","useState","open","setState","interactive","actions","toggleState","useCallback","onClick","undefined","divider","arrowIcon","useEffect","classNames","className","icon","iconClassName","title","description","state","children","AccordionItem","Object","assign","Action","AccordionItemAction","AccordionItemActions"],"sources":["AccordionItem.tsx"],"sourcesContent":["import React, { useState, useCallback, useEffect } from \"react\";\nimport { ListItem, ListItemGraphic, ListItemMeta } from \"~/List\";\nimport Transition from \"react-transition-group/Transition\";\nimport { Icon } from \"~/Icon\";\nimport styled from \"@emotion/styled\";\nimport { css } from \"emotion\";\nimport { Typography } from \"~/Typography\";\n\nimport { ReactComponent as UpArrow } from \"./icons/round-keyboard_arrow_up-24px.svg\";\nimport { ReactComponent as DownArrow } from \"./icons/round-keyboard_arrow_down-24px.svg\";\nimport classNames from \"classnames\";\nimport { AccordionItemAction, AccordionItemActions } from \"~/Accordion/AccordionItemActions\";\n\nconst Content = styled.div`\n width: 100%;\n border-right: 1px solid var(--mdc-theme-background);\n border-bottom: 1px solid var(--mdc-theme-background);\n border-left: 1px solid var(--mdc-theme-background);\n box-sizing: border-box;\n > .mdc-layout-grid {\n margin: -24px;\n }\n`;\n\nconst listItem = css`\n cursor: pointer;\n border-bottom: 1px solid var(--mdc-theme-background);\n &:last-child {\n border-bottom: none;\n }\n .mdc-list-item__graphic {\n margin-right: 20px;\n }\n`;\n\nconst ListItemTitle = styled.div`\n font-weight: 600;\n line-height: 100%;\n`;\n\nconst ListItemDescription = styled.div`\n line-height: 100%;\n`;\n\nconst TitleContent = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\nconst openedState = css`\n background-color: var(--mdc-theme-on-background);\n`;\n\nconst nonInteractive = css`\n background-color: var(--mdc-theme-surface);\n`;\n\nconst duration = 150;\nconst defaultStyle = {\n transition: `all ${duration}ms ease-in-out`,\n opacity: 0,\n height: 0,\n pointerEvents: \"none\",\n overflow: \"hidden\"\n};\n\ntype TransitionStylesState = \"entering\" | \"entered\" | \"exiting\";\n\n/**\n * We are casting pointerEvents as any because csstype does not have PointerEvents exported. Or at least, that is the error.\n */\nconst transitionStyles = {\n entering: {\n opacity: 0,\n height: 0,\n padding: \"20px\",\n pointerEvents: \"auto\" as any,\n overflow: \"initial\"\n },\n entered: {\n opacity: 1,\n height: \"auto\",\n padding: \"20px\",\n pointerEvents: \"auto\" as any,\n overflow: \"initial\"\n },\n exiting: {\n height: \"auto\",\n padding: \"20px\",\n pointerEvents: \"auto\" as any,\n overflow: \"initial\"\n }\n};\n\nconst Divider = styled.span`\n width: 1px;\n margin: 0 15px;\n height: 100%;\n background-color: var(--mdc-theme-on-background);\n`;\n\nconst Actions = styled(ListItemMeta)`\n display: flex;\n height: 40%;\n align-items: center;\n`;\n\nexport interface AccordionItemProps {\n /**\n * Can user toggle the accordion item by clicking it? Defaults to `true`.\n */\n interactive?: boolean;\n /**\n * Actions to show on the right side of the accordion item\n */\n actions?: React.ReactElement | null;\n /**\n * Left side icon\n */\n icon?: React.ReactElement | null;\n\n /**\n * Accordion title\n */\n title?: React.ReactNode;\n\n /**\n * Optional description\n */\n description?: string;\n\n /**\n * Append a class name\n */\n className?: string;\n\n /**\n * Render item opened by default\n */\n open?: boolean;\n /**\n * For testing purpose\n */\n \"data-testid\"?: string;\n /**\n * Append a class name to Icon\n */\n iconClassName?: string;\n}\n\nconst AccordionItemComponent: React.FC<AccordionItemProps> = props => {\n const [open, setState] = useState<boolean>(props.open ? props.open : false);\n const { interactive = true, actions } = props;\n\n const toggleState = useCallback(() => {\n setState(!open);\n }, [open]);\n\n const onClick = interactive ? toggleState : undefined;\n const divider = interactive && actions ? <Divider /> : null;\n const arrowIcon = interactive ? <Icon icon={!open ? <DownArrow /> : <UpArrow />} /> : null;\n\n useEffect(() => {\n setState(!!props.open);\n }, [props.open]);\n\n return (\n <div className={classNames(\"webiny-ui-accordion-item\", props.className)}>\n <ListItem\n disabled={!interactive}\n className={classNames(\n listItem,\n { [openedState]: open },\n { [nonInteractive]: !interactive },\n \"webiny-ui-accordion-item__list-item\"\n )}\n onClick={onClick}\n data-testid={props[\"data-testid\"]}\n >\n {props.icon && (\n <ListItemGraphic>\n <Icon icon={props.icon} className={props.iconClassName} />\n </ListItemGraphic>\n )}\n\n <TitleContent className=\"webiny-ui-accordion-item__title\">\n <ListItemTitle>{props.title}</ListItemTitle>\n {props.description && (\n <ListItemDescription>\n <Typography use={\"body2\"}>{props.description}</Typography>\n </ListItemDescription>\n )}\n </TitleContent>\n <Actions>\n {props.actions ? props.actions : null}\n {divider}\n {arrowIcon}\n </Actions>\n </ListItem>\n <Transition in={open} timeout={duration}>\n {(state: TransitionStylesState) => (\n <Content\n style={{ ...defaultStyle, ...transitionStyles[state] }}\n className=\"webiny-ui-accordion-item__content\"\n >\n {props.children}\n </Content>\n )}\n </Transition>\n </div>\n );\n};\n\ntype AccordionItem = React.FC<AccordionItemProps> & {\n Divider: typeof Divider;\n Actions: typeof AccordionItemActions;\n Action: typeof AccordionItemAction;\n};\n\nexport const AccordionItem: AccordionItem = Object.assign(AccordionItemComponent, {\n Divider,\n Action: AccordionItemAction,\n Actions: AccordionItemActions\n});\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"names":["Content","styled","listItem","css","ListItemTitle","ListItemDescription","TitleContent","openedState","nonInteractive","duration","defaultStyle","transition","opacity","height","pointerEvents","overflow","transitionStyles","entering","padding","entered","exiting","Divider","Actions","ListItemMeta","AccordionItemComponent","props","useState","open","setState","interactive","actions","toggleState","useCallback","onClick","undefined","divider","arrowIcon","useEffect","classNames","className","icon","iconClassName","title","description","state","children","AccordionItem","Object","assign","Action","AccordionItemAction","AccordionItemActions"],"sources":["AccordionItem.tsx"],"sourcesContent":["import React, { useState, useCallback, useEffect } from \"react\";\nimport { ListItem, ListItemGraphic, ListItemMeta } from \"~/List\";\nimport Transition from \"react-transition-group/Transition\";\nimport { Icon } from \"~/Icon\";\nimport styled from \"@emotion/styled\";\nimport { css } from \"emotion\";\nimport { Typography } from \"~/Typography\";\n\nimport { ReactComponent as UpArrow } from \"./icons/round-keyboard_arrow_up-24px.svg\";\nimport { ReactComponent as DownArrow } from \"./icons/round-keyboard_arrow_down-24px.svg\";\nimport classNames from \"classnames\";\nimport { AccordionItemAction, AccordionItemActions } from \"~/Accordion/AccordionItemActions\";\n\nconst Content = styled.div`\n width: 100%;\n border-right: 1px solid var(--mdc-theme-background);\n border-bottom: 1px solid var(--mdc-theme-background);\n border-left: 1px solid var(--mdc-theme-background);\n box-sizing: border-box;\n > .mdc-layout-grid {\n margin: -24px;\n }\n`;\n\nconst listItem = css`\n cursor: pointer;\n border-bottom: 1px solid var(--mdc-theme-background);\n &:last-child {\n border-bottom: none;\n }\n .mdc-list-item__graphic {\n margin-right: 20px;\n }\n`;\n\nconst ListItemTitle = styled.div`\n font-weight: 600;\n line-height: 100%;\n`;\n\nconst ListItemDescription = styled.div`\n line-height: 100%;\n`;\n\nconst TitleContent = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\nconst openedState = css`\n background-color: var(--mdc-theme-on-background);\n`;\n\nconst nonInteractive = css`\n background-color: var(--mdc-theme-surface);\n`;\n\nconst duration = 150;\nconst defaultStyle = {\n transition: `all ${duration}ms ease-in-out`,\n opacity: 0,\n height: 0,\n pointerEvents: \"none\",\n overflow: \"hidden\"\n};\n\ntype TransitionStylesState = \"entering\" | \"entered\" | \"exiting\";\n\n/**\n * We are casting pointerEvents as any because csstype does not have PointerEvents exported. Or at least, that is the error.\n */\nconst transitionStyles = {\n entering: {\n opacity: 0,\n height: 0,\n padding: \"20px\",\n pointerEvents: \"auto\" as any,\n overflow: \"initial\"\n },\n entered: {\n opacity: 1,\n height: \"auto\",\n padding: \"20px\",\n pointerEvents: \"auto\" as any,\n overflow: \"initial\"\n },\n exiting: {\n height: \"auto\",\n padding: \"20px\",\n pointerEvents: \"auto\" as any,\n overflow: \"initial\"\n }\n};\n\nconst Divider = styled.span`\n width: 1px;\n margin: 0 15px;\n height: 100%;\n background-color: var(--mdc-theme-on-background);\n`;\n\nconst Actions = styled(ListItemMeta)`\n display: flex;\n height: 40%;\n align-items: center;\n`;\n\nexport interface AccordionItemProps {\n /**\n * Can user toggle the accordion item by clicking it? Defaults to `true`.\n */\n interactive?: boolean;\n /**\n * Actions to show on the right side of the accordion item\n */\n actions?: React.ReactElement | null;\n /**\n * Left side icon\n */\n icon?: React.ReactElement | null;\n\n /**\n * Accordion title\n */\n title?: React.ReactNode;\n\n /**\n * Optional description\n */\n description?: string;\n\n /**\n * Append a class name\n */\n className?: string;\n\n /**\n * Render item opened by default\n */\n open?: boolean;\n /**\n * For testing purpose\n */\n \"data-testid\"?: string;\n /**\n * Append a class name to Icon\n */\n iconClassName?: string;\n}\n\nconst AccordionItemComponent: React.FC<AccordionItemProps> = props => {\n const [open, setState] = useState<boolean>(props.open ? props.open : false);\n const { interactive = true, actions } = props;\n\n const toggleState = useCallback(() => {\n setState(!open);\n }, [open]);\n\n const onClick = interactive ? toggleState : undefined;\n const divider = interactive && actions ? <Divider /> : null;\n const arrowIcon = interactive ? <Icon icon={!open ? <DownArrow /> : <UpArrow />} /> : null;\n\n useEffect(() => {\n setState(!!props.open);\n }, [props.open]);\n\n return (\n <div className={classNames(\"webiny-ui-accordion-item\", props.className)}>\n <ListItem\n disabled={!interactive}\n className={classNames(\n listItem,\n { [openedState]: open },\n { [nonInteractive]: !interactive },\n \"webiny-ui-accordion-item__list-item\"\n )}\n onClick={onClick}\n data-testid={props[\"data-testid\"]}\n >\n {props.icon && (\n <ListItemGraphic>\n <Icon icon={props.icon} className={props.iconClassName} />\n </ListItemGraphic>\n )}\n\n <TitleContent className=\"webiny-ui-accordion-item__title\">\n <ListItemTitle>{props.title}</ListItemTitle>\n {props.description && (\n <ListItemDescription>\n <Typography use={\"body2\"}>{props.description}</Typography>\n </ListItemDescription>\n )}\n </TitleContent>\n <Actions>\n {props.actions ? props.actions : null}\n {divider}\n {arrowIcon}\n </Actions>\n </ListItem>\n <Transition in={open} timeout={duration}>\n {(state: TransitionStylesState) => (\n <Content\n style={{ ...defaultStyle, ...transitionStyles[state] }}\n className=\"webiny-ui-accordion-item__content\"\n >\n {props.children}\n </Content>\n )}\n </Transition>\n </div>\n );\n};\n\ntype AccordionItem = React.FC<AccordionItemProps> & {\n Divider: typeof Divider;\n Actions: typeof AccordionItemActions;\n Action: typeof AccordionItemAction;\n};\n\nexport const AccordionItem: AccordionItem = Object.assign(AccordionItemComponent, {\n Divider,\n Action: AccordionItemAction,\n Actions: AccordionItemActions\n});\n"],"mappings":"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"}
|
|
@@ -1,36 +1,28 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports.AccordionItemActions = exports.AccordionItemAction = void 0;
|
|
9
|
-
|
|
10
8
|
var _react = _interopRequireDefault(require("react"));
|
|
11
|
-
|
|
12
9
|
var _Button = require("../Button");
|
|
13
|
-
|
|
14
10
|
var AccordionItemActions = function AccordionItemActions(_ref) {
|
|
15
11
|
var children = _ref.children;
|
|
16
12
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
|
|
17
13
|
};
|
|
18
|
-
|
|
19
14
|
exports.AccordionItemActions = AccordionItemActions;
|
|
20
|
-
|
|
21
15
|
var AccordionItemAction = function AccordionItemAction(_ref2) {
|
|
22
16
|
var icon = _ref2.icon,
|
|
23
|
-
|
|
24
|
-
|
|
17
|
+
_onClick = _ref2.onClick,
|
|
18
|
+
disabled = _ref2.disabled;
|
|
25
19
|
return /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
|
|
26
20
|
disabled: disabled,
|
|
27
21
|
icon: icon,
|
|
28
22
|
onClick: function onClick(e) {
|
|
29
23
|
e.stopPropagation();
|
|
30
|
-
|
|
31
24
|
_onClick();
|
|
32
25
|
}
|
|
33
26
|
});
|
|
34
27
|
};
|
|
35
|
-
|
|
36
28
|
exports.AccordionItemAction = AccordionItemAction;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["AccordionItemActions","children","AccordionItemAction","icon","onClick","disabled","e","stopPropagation"],"sources":["AccordionItemActions.tsx"],"sourcesContent":["import React from \"react\";\nimport { IconButton } from \"~/Button\";\n\nexport const AccordionItemActions: React.FC = ({ children }) => {\n return <>{children}</>;\n};\n\nexport interface AccordionItemActionProps {\n icon: JSX.Element;\n onClick: () => void;\n disabled?: boolean;\n}\n\nexport const AccordionItemAction = ({ icon, onClick, disabled }: AccordionItemActionProps) => {\n return (\n <IconButton\n disabled={disabled}\n icon={icon}\n onClick={e => {\n e.stopPropagation();\n onClick();\n }}\n />\n );\n};\n"],"mappings":"
|
|
1
|
+
{"version":3,"names":["AccordionItemActions","children","AccordionItemAction","icon","onClick","disabled","e","stopPropagation"],"sources":["AccordionItemActions.tsx"],"sourcesContent":["import React from \"react\";\nimport { IconButton } from \"~/Button\";\n\nexport const AccordionItemActions: React.FC = ({ children }) => {\n return <>{children}</>;\n};\n\nexport interface AccordionItemActionProps {\n icon: JSX.Element;\n onClick: () => void;\n disabled?: boolean;\n}\n\nexport const AccordionItemAction = ({ icon, onClick, disabled }: AccordionItemActionProps) => {\n return (\n <IconButton\n disabled={disabled}\n icon={icon}\n onClick={e => {\n e.stopPropagation();\n onClick();\n }}\n />\n );\n};\n"],"mappings":";;;;;;;AAAA;AACA;AAEO,IAAMA,oBAA8B,GAAG,SAAjCA,oBAA8B,OAAqB;EAAA,IAAfC,QAAQ,QAARA,QAAQ;EACrD,oBAAO,4DAAGA,QAAQ,CAAI;AAC1B,CAAC;AAAC;AAQK,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAmB,QAA8D;EAAA,IAAxDC,IAAI,SAAJA,IAAI;IAAEC,QAAO,SAAPA,OAAO;IAAEC,QAAQ,SAARA,QAAQ;EACzD,oBACI,6BAAC,kBAAU;IACP,QAAQ,EAAEA,QAAS;IACnB,IAAI,EAAEF,IAAK;IACX,OAAO,EAAE,iBAAAG,CAAC,EAAI;MACVA,CAAC,CAACC,eAAe,EAAE;MACnBH,QAAO,EAAE;IACb;EAAE,EACJ;AAEV,CAAC;AAAC"}
|
package/Accordion/index.js
CHANGED
|
@@ -3,9 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
|
|
7
6
|
var _Accordion = require("./Accordion");
|
|
8
|
-
|
|
9
7
|
Object.keys(_Accordion).forEach(function (key) {
|
|
10
8
|
if (key === "default" || key === "__esModule") return;
|
|
11
9
|
if (key in exports && exports[key] === _Accordion[key]) return;
|
|
@@ -16,9 +14,7 @@ Object.keys(_Accordion).forEach(function (key) {
|
|
|
16
14
|
}
|
|
17
15
|
});
|
|
18
16
|
});
|
|
19
|
-
|
|
20
17
|
var _AccordionItem = require("./AccordionItem");
|
|
21
|
-
|
|
22
18
|
Object.keys(_AccordionItem).forEach(function (key) {
|
|
23
19
|
if (key === "default" || key === "__esModule") return;
|
|
24
20
|
if (key in exports && exports[key] === _AccordionItem[key]) return;
|
package/Accordion/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Accordion\";\nexport * from \"./AccordionItem\";\n"],"mappings":"
|
|
1
|
+
{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Accordion\";\nexport * from \"./AccordionItem\";\n"],"mappings":";;;;;AAAA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
|
package/Alert/Alert.js
CHANGED
|
@@ -1,18 +1,13 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports.Alert = void 0;
|
|
9
|
-
|
|
10
8
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
11
|
-
|
|
12
9
|
var _react = _interopRequireDefault(require("react"));
|
|
13
|
-
|
|
14
10
|
var _emotion = require("emotion");
|
|
15
|
-
|
|
16
11
|
var _excluded = ["title", "type", "children"];
|
|
17
12
|
var alertStyles = /*#__PURE__*/(0, _emotion.css)({
|
|
18
13
|
borderLeft: "3px solid red",
|
|
@@ -42,15 +37,14 @@ var alertStyles = /*#__PURE__*/(0, _emotion.css)({
|
|
|
42
37
|
borderColor: "#E4495C"
|
|
43
38
|
}
|
|
44
39
|
}, "label:alertStyles;");
|
|
45
|
-
|
|
46
40
|
/**
|
|
47
41
|
* Use Alert component to display user's avatar.
|
|
48
42
|
*/
|
|
49
43
|
var Alert = function Alert(props) {
|
|
50
44
|
var title = props.title,
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
45
|
+
type = props.type,
|
|
46
|
+
children = props.children,
|
|
47
|
+
rest = (0, _objectWithoutProperties2.default)(props, _excluded);
|
|
54
48
|
return /*#__PURE__*/_react.default.createElement("div", Object.assign({}, rest, {
|
|
55
49
|
className: alertStyles + " webiny-ui-alert webiny-ui-alert--" + type
|
|
56
50
|
}), /*#__PURE__*/_react.default.createElement("p", {
|
|
@@ -59,5 +53,4 @@ var Alert = function Alert(props) {
|
|
|
59
53
|
className: "webiny-ui-alert__message"
|
|
60
54
|
}, children));
|
|
61
55
|
};
|
|
62
|
-
|
|
63
56
|
exports.Alert = Alert;
|
package/Alert/Alert.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["alertStyles","css","borderLeft","margin","padding","fontWeight","lineHeight","color","marginBottom","fontSize","borderColor","Alert","props","title","type","children","rest"],"sources":["Alert.tsx"],"sourcesContent":["import React from \"react\";\nimport { css } from \"emotion\";\n\nconst alertStyles = css({\n borderLeft: \"3px solid red\",\n margin: \"5px 0 15px 0\",\n padding: \"2px 0 2px 10px\",\n \".webiny-ui-alert__title\": {\n fontWeight: 600,\n lineHeight: \"150%\",\n color: \"var(--mdc-theme-on-surface)\",\n marginBottom: 5\n },\n \".webiny-ui-alert__message\": {\n lineHeight: \"120%\",\n fontSize: 14,\n color: \"var(--mdc-theme-on-surface)\"\n },\n \"&.webiny-ui-alert--success\": {\n borderColor: \"#21CEAF\"\n },\n \"&.webiny-ui-alert--info\": {\n borderColor: \"#29A9DB\"\n },\n \"&.webiny-ui-alert--warning\": {\n borderColor: \"#F45C3C\"\n },\n \"&.webiny-ui-alert--danger\": {\n borderColor: \"#E4495C\"\n }\n});\n\nexport type AlertType = \"success\" | \"info\" | \"warning\" | \"danger\";\n\nexport interface AlertProps {\n // Alert title.\n title: string;\n\n // Alert type.\n type: AlertType;\n\n // Alert message.\n children?: React.ReactNode;\n\n // CSS class name\n className?: string;\n\n // Style object\n style?: React.CSSProperties;\n}\n\n/**\n * Use Alert component to display user's avatar.\n */\nconst Alert: React.FC<AlertProps> = props => {\n const { title, type, children, ...rest } = props;\n\n return (\n <div {...rest} className={alertStyles + \" webiny-ui-alert webiny-ui-alert--\" + type}>\n <p className={\"webiny-ui-alert__title\"}>{title}</p>\n <p className={\"webiny-ui-alert__message\"}>{children}</p>\n </div>\n );\n};\n\nexport { Alert };\n"],"mappings":"
|
|
1
|
+
{"version":3,"names":["alertStyles","css","borderLeft","margin","padding","fontWeight","lineHeight","color","marginBottom","fontSize","borderColor","Alert","props","title","type","children","rest"],"sources":["Alert.tsx"],"sourcesContent":["import React from \"react\";\nimport { css } from \"emotion\";\n\nconst alertStyles = css({\n borderLeft: \"3px solid red\",\n margin: \"5px 0 15px 0\",\n padding: \"2px 0 2px 10px\",\n \".webiny-ui-alert__title\": {\n fontWeight: 600,\n lineHeight: \"150%\",\n color: \"var(--mdc-theme-on-surface)\",\n marginBottom: 5\n },\n \".webiny-ui-alert__message\": {\n lineHeight: \"120%\",\n fontSize: 14,\n color: \"var(--mdc-theme-on-surface)\"\n },\n \"&.webiny-ui-alert--success\": {\n borderColor: \"#21CEAF\"\n },\n \"&.webiny-ui-alert--info\": {\n borderColor: \"#29A9DB\"\n },\n \"&.webiny-ui-alert--warning\": {\n borderColor: \"#F45C3C\"\n },\n \"&.webiny-ui-alert--danger\": {\n borderColor: \"#E4495C\"\n }\n});\n\nexport type AlertType = \"success\" | \"info\" | \"warning\" | \"danger\";\n\nexport interface AlertProps {\n // Alert title.\n title: string;\n\n // Alert type.\n type: AlertType;\n\n // Alert message.\n children?: React.ReactNode;\n\n // CSS class name\n className?: string;\n\n // Style object\n style?: React.CSSProperties;\n}\n\n/**\n * Use Alert component to display user's avatar.\n */\nconst Alert: React.FC<AlertProps> = props => {\n const { title, type, children, ...rest } = props;\n\n return (\n <div {...rest} className={alertStyles + \" webiny-ui-alert webiny-ui-alert--\" + type}>\n <p className={\"webiny-ui-alert__title\"}>{title}</p>\n <p className={\"webiny-ui-alert__message\"}>{children}</p>\n </div>\n );\n};\n\nexport { Alert };\n"],"mappings":";;;;;;;;AAAA;AACA;AAA8B;AAE9B,IAAMA,WAAW,gBAAG,IAAAC,YAAG,EAAC;EACpBC,UAAU,EAAE,eAAe;EAC3BC,MAAM,EAAE,cAAc;EACtBC,OAAO,EAAE,gBAAgB;EACzB,yBAAyB,EAAE;IACvBC,UAAU,EAAE,GAAG;IACfC,UAAU,EAAE,MAAM;IAClBC,KAAK,EAAE,6BAA6B;IACpCC,YAAY,EAAE;EAClB,CAAC;EACD,2BAA2B,EAAE;IACzBF,UAAU,EAAE,MAAM;IAClBG,QAAQ,EAAE,EAAE;IACZF,KAAK,EAAE;EACX,CAAC;EACD,4BAA4B,EAAE;IAC1BG,WAAW,EAAE;EACjB,CAAC;EACD,yBAAyB,EAAE;IACvBA,WAAW,EAAE;EACjB,CAAC;EACD,4BAA4B,EAAE;IAC1BA,WAAW,EAAE;EACjB,CAAC;EACD,2BAA2B,EAAE;IACzBA,WAAW,EAAE;EACjB;AACJ,CAAC,uBAAC;AAqBF;AACA;AACA;AACA,IAAMC,KAA2B,GAAG,SAA9BA,KAA2B,CAAGC,KAAK,EAAI;EACzC,IAAQC,KAAK,GAA8BD,KAAK,CAAxCC,KAAK;IAAEC,IAAI,GAAwBF,KAAK,CAAjCE,IAAI;IAAEC,QAAQ,GAAcH,KAAK,CAA3BG,QAAQ;IAAKC,IAAI,0CAAKJ,KAAK;EAEhD,oBACI,sDAASI,IAAI;IAAE,SAAS,EAAEhB,WAAW,GAAG,oCAAoC,GAAGc;EAAK,iBAChF;IAAG,SAAS,EAAE;EAAyB,GAAED,KAAK,CAAK,eACnD;IAAG,SAAS,EAAE;EAA2B,GAAEE,QAAQ,CAAK,CACtD;AAEd,CAAC;AAAC"}
|
package/Alert/Alert.stories.js
CHANGED
|
@@ -1,17 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
-
|
|
5
4
|
var _react = _interopRequireDefault(require("react"));
|
|
6
|
-
|
|
7
5
|
var _react2 = require("@storybook/react");
|
|
8
|
-
|
|
9
6
|
var _Story = require("@webiny/storybook-utils/Story");
|
|
10
|
-
|
|
11
7
|
var _README = _interopRequireDefault(require("./README.md"));
|
|
12
|
-
|
|
13
8
|
var _Alert = require("./Alert");
|
|
14
|
-
|
|
15
9
|
var story = (0, _react2.storiesOf)("Components/Alert", module);
|
|
16
10
|
story.add("usage", function () {
|
|
17
11
|
return /*#__PURE__*/_react.default.createElement(_Story.Story, null, /*#__PURE__*/_react.default.createElement(_Story.StoryReadme, null, _README.default), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, null, /*#__PURE__*/_react.default.createElement(_Story.StorySandboxExample, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["story","storiesOf","module","add","readme","info","propTables","Alert"],"sources":["Alert.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport {\n Story,\n StoryReadme,\n StorySandboxCode,\n StorySandbox,\n StorySandboxExample\n} from \"@webiny/storybook-utils/Story\";\nimport readme from \"./README.md\";\n\nimport { Alert } from \"./Alert\";\n\nconst story = storiesOf(\"Components/Alert\", module);\n\nstory.add(\n \"usage\",\n () => {\n return (\n <Story>\n <StoryReadme>{readme}</StoryReadme>\n <StorySandbox>\n <StorySandboxExample title={\"Info\"}>\n <Alert title={\"Something went wrong!\"} type={\"info\"}>\n We failed to fetch your data.\n </Alert>\n </StorySandboxExample>\n <StorySandboxCode>\n <Alert title={\"Something went wrong!\"} type={\"info\"}>\n We failed to fetch your data.\n </Alert>\n </StorySandboxCode>\n </StorySandbox>\n <StorySandbox>\n <StorySandboxExample title={\"Danger\"}>\n <Alert title={\"Something went wrong!\"} type={\"danger\"}>\n Please contact support!\n </Alert>\n </StorySandboxExample>\n <StorySandboxCode>\n <Alert title={\"Something went wrong!\"} type={\"danger\"}>\n Please contact support!\n </Alert>\n </StorySandboxCode>\n </StorySandbox>\n </Story>\n );\n },\n { info: { propTables: [Alert] } }\n);\n"],"mappings":"
|
|
1
|
+
{"version":3,"names":["story","storiesOf","module","add","readme","info","propTables","Alert"],"sources":["Alert.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport {\n Story,\n StoryReadme,\n StorySandboxCode,\n StorySandbox,\n StorySandboxExample\n} from \"@webiny/storybook-utils/Story\";\nimport readme from \"./README.md\";\n\nimport { Alert } from \"./Alert\";\n\nconst story = storiesOf(\"Components/Alert\", module);\n\nstory.add(\n \"usage\",\n () => {\n return (\n <Story>\n <StoryReadme>{readme}</StoryReadme>\n <StorySandbox>\n <StorySandboxExample title={\"Info\"}>\n <Alert title={\"Something went wrong!\"} type={\"info\"}>\n We failed to fetch your data.\n </Alert>\n </StorySandboxExample>\n <StorySandboxCode>\n <Alert title={\"Something went wrong!\"} type={\"info\"}>\n We failed to fetch your data.\n </Alert>\n </StorySandboxCode>\n </StorySandbox>\n <StorySandbox>\n <StorySandboxExample title={\"Danger\"}>\n <Alert title={\"Something went wrong!\"} type={\"danger\"}>\n Please contact support!\n </Alert>\n </StorySandboxExample>\n <StorySandboxCode>\n <Alert title={\"Something went wrong!\"} type={\"danger\"}>\n Please contact support!\n </Alert>\n </StorySandboxCode>\n </StorySandbox>\n </Story>\n );\n },\n { info: { propTables: [Alert] } }\n);\n"],"mappings":";;;AAAA;AACA;AACA;AAOA;AAEA;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAS,EAAC,kBAAkB,EAAEC,MAAM,CAAC;AAEnDF,KAAK,CAACG,GAAG,CACL,OAAO,EACP,YAAM;EACF,oBACI,6BAAC,YAAK,qBACF,6BAAC,kBAAW,QAAEC,eAAM,CAAe,eACnC,6BAAC,mBAAY,qBACT,6BAAC,0BAAmB;IAAC,KAAK,EAAE;EAAO,gBAC/B,6BAAC,YAAK;IAAC,KAAK,EAAE,uBAAwB;IAAC,IAAI,EAAE;EAAO,GAAC,+BAErD,CAAQ,CACU,eACtB,6BAAC,uBAAgB,qBACb,6BAAC,YAAK;IAAC,KAAK,EAAE,uBAAwB;IAAC,IAAI,EAAE;EAAO,GAAC,+BAErD,CAAQ,CACO,CACR,eACf,6BAAC,mBAAY,qBACT,6BAAC,0BAAmB;IAAC,KAAK,EAAE;EAAS,gBACjC,6BAAC,YAAK;IAAC,KAAK,EAAE,uBAAwB;IAAC,IAAI,EAAE;EAAS,GAAC,yBAEvD,CAAQ,CACU,eACtB,6BAAC,uBAAgB,qBACb,6BAAC,YAAK;IAAC,KAAK,EAAE,uBAAwB;IAAC,IAAI,EAAE;EAAS,GAAC,yBAEvD,CAAQ,CACO,CACR,CACX;AAEhB,CAAC,EACD;EAAEC,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,YAAK;EAAE;AAAE,CAAC,CACpC"}
|
package/Alert/index.js
CHANGED
|
@@ -3,9 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
|
|
7
6
|
var _Alert = require("./Alert");
|
|
8
|
-
|
|
9
7
|
Object.keys(_Alert).forEach(function (key) {
|
|
10
8
|
if (key === "default" || key === "__esModule") return;
|
|
11
9
|
if (key in exports && exports[key] === _Alert[key]) return;
|
package/Alert/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Alert\";\n"],"mappings":"
|
|
1
|
+
{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Alert\";\n"],"mappings":";;;;;AAAA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
|