@webiny/ui 0.0.0-ee-vpcs.549378cf03

package/List/List.js

@@ -0,0 +1,210 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SimpleListItem = exports.ListTopCaption = exports.ListTextOverline = exports.ListSelectBox = exports.ListItemTextSecondary = exports.ListItemTextPrimary = exports.ListItemText = exports.ListItemMeta = exports.ListItemGraphic = exports.ListItem = exports.ListBottomCaption = exports.ListActions = exports.List = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _list = require("@rmwc/list");
+
+var _Typography = require("../Typography");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+/**
+ * ListItem components are placed as direct children to List component.
+ * @param props
+ * @returns {*}
+ * @constructor
+ */
+var ListItem = function ListItem(props) {
+  return /*#__PURE__*/_react.default.createElement(_list.ListItem, props);
+};
+
+exports.ListItem = ListItem;
+
+/**
+ * Use List component to display data and offer additional actions if needed.
+ */
+var List = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(List, _React$Component);
+
+  var _super = (0, _createSuper2.default)(List);
+
+  function List() {
+    (0, _classCallCheck2.default)(this, List);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2.default)(List, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react.default.createElement(_list.List, this.props, this.props.children);
+    }
+  }]);
+  return List;
+}(_react.default.Component);
+
+exports.List = List;
+
+/**
+ * Used to show regular text in list items.
+ * @param props
+ * @returns {*}
+ * @constructor
+ */
+var ListItemText = function ListItemText(props) {
+  return /*#__PURE__*/_react.default.createElement(_list.ListItemText, props, props.children);
+};
+
+exports.ListItemText = ListItemText;
+
+var ListItemTextPrimary = function ListItemTextPrimary(props) {
+  return /*#__PURE__*/_react.default.createElement(_list.ListItemPrimaryText, null, props.children);
+};
+
+exports.ListItemTextPrimary = ListItemTextPrimary;
+
+/**
+ * Used to show secondary text in list items.
+ * @param props
+ * @returns {*}
+ * @constructor
+ */
+var ListItemTextSecondary = function ListItemTextSecondary(props) {
+  return /*#__PURE__*/_react.default.createElement(_list.ListItemSecondaryText, null, props.children);
+};
+
+exports.ListItemTextSecondary = ListItemTextSecondary;
+
+/**
+ * Can be used to show an icon or any other custom element. Rendered on the left side.
+ * @param props
+ * @returns {*}
+ * @constructor
+ */
+var ListItemGraphic = function ListItemGraphic(props) {
+  return /*#__PURE__*/_react.default.createElement("div", Object.assign({}, props, {
+    className: (0, _classnames.default)("mdc-list-item__graphic", props.className)
+  }), props.children);
+};
+
+exports.ListItemGraphic = ListItemGraphic;
+
+/**
+ * Can be used to show an icon or any other custom element. Rendered on the right side.
+ * @param props
+ * @returns {*}
+ * @constructor
+ */
+var ListItemMeta = function ListItemMeta(props) {
+  return /*#__PURE__*/_react.default.createElement("span", Object.assign({}, props, {
+    className: (0, _classnames.default)("mdc-list-item__meta", props.className)
+  }), props.children);
+};
+
+exports.ListItemMeta = ListItemMeta;
+
+/**
+ * Can be used to show a top caption inside ListItemMeta component.
+ * @param props
+ * @returns {*}
+ * @constructor
+ */
+var ListTopCaption = function ListTopCaption(props) {
+  return /*#__PURE__*/_react.default.createElement("span", Object.assign({}, props, {
+    className: "webiny-list-top-caption"
+  }), /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+    use: "overline"
+  }, props.children));
+};
+
+exports.ListTopCaption = ListTopCaption;
+
+/**
+ * Can be used to show a bottom caption inside ListItemMeta component.
+ * @param props
+ * @returns {*}
+ * @constructor
+ */
+var ListBottomCaption = function ListBottomCaption(props) {
+  return /*#__PURE__*/_react.default.createElement("span", Object.assign({}, props, {
+    className: "webiny-list-bottom-caption"
+  }), /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+    use: "overline"
+  }, props.children));
+};
+
+exports.ListBottomCaption = ListBottomCaption;
+
+/**
+ * Can be used to show an overline text inside ListItem component.
+ * @param props
+ * @returns {*}
+ * @constructor
+ */
+var ListTextOverline = function ListTextOverline(props) {
+  return /*#__PURE__*/_react.default.createElement("span", Object.assign({}, props, {
+    className: "webiny-list-text-overline"
+  }), /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+    use: "overline"
+  }, props.children));
+};
+
+exports.ListTextOverline = ListTextOverline;
+
+/**
+ * Used to contain the actions inside ListItemMate component.
+ * @param props
+ * @returns {*}
+ * @constructor
+ */
+var ListActions = function ListActions(props) {
+  return /*#__PURE__*/_react.default.createElement("span", Object.assign({}, props, {
+    className: "webiny-list-actions"
+  }), props.children);
+};
+
+exports.ListActions = ListActions;
+var SelectBoxWrapper = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "entzw6n0",
+  label: "SelectBoxWrapper"
+})({
+  overflow: "hidden",
+  width: 25,
+  height: 25,
+  display: "flex",
+  position: "relative",
+  alignItems: "center",
+  justifyContent: "center"
+});
+
+/**
+ * Used to hold the Checkbox element for multi-select options.
+ * @param {*} props
+ */
+var ListSelectBox = function ListSelectBox(props) {
+  return /*#__PURE__*/_react.default.createElement(ListItemGraphic, null, /*#__PURE__*/_react.default.createElement(SelectBoxWrapper, null, props.children));
+};
+
+exports.ListSelectBox = ListSelectBox;
+
+var SimpleListItem = function SimpleListItem(props) {
+  return /*#__PURE__*/_react.default.createElement(_list.SimpleListItem, props);
+};
+
+exports.SimpleListItem = SimpleListItem;

package/List/List.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ListItem","props","List","children","React","Component","ListItemText","ListItemTextPrimary","ListItemTextSecondary","ListItemGraphic","classNames","className","ListItemMeta","ListTopCaption","ListBottomCaption","ListTextOverline","ListActions","SelectBoxWrapper","styled","overflow","width","height","display","position","alignItems","justifyContent","ListSelectBox","SimpleListItem"],"sources":["List.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n    List as RmwcList,\n    ListProps as RmwcListProps,\n    ListItem as RmwcListItem,\n    ListItemProps as RmwcListItemProps,\n    ListItemText as RmwcListItemText,\n    ListItemTextProps as RmwcListItemTextProps,\n    ListItemPrimaryText as RmwcListItemPrimaryText,\n    ListItemSecondaryText as RmwcListItemSecondaryText,\n    SimpleListItem as RmwcSimpleListItem,\n    SimpleListItemProps as RmwcSimpleListItemProps\n} from \"@rmwc/list\";\nimport { Typography } from \"~/Typography\";\nimport classNames from \"classnames\";\nimport styled from \"@emotion/styled\";\n\nexport type ListItemProps = RmwcListItemProps & {\n    children: React.ReactNode;\n    className?: string;\n    style?: React.CSSProperties;\n    onClick?: (e: React.MouseEvent) => void;\n};\n\n/**\n * ListItem components are placed as direct children to List component.\n * @param props\n * @returns {*}\n * @constructor\n */\nexport const ListItem = (props: ListItemProps) => {\n    return <RmwcListItem {...props} />;\n};\n\nexport type ListProps = RmwcListProps & {\n    children?: any;\n\n    className?: string;\n\n    style?: React.CSSProperties;\n};\n\n/**\n * Use List component to display data and offer additional actions if needed.\n */\nexport class List extends React.Component<ListProps> {\n    public override render() {\n        return <RmwcList {...this.props}>{this.props.children}</RmwcList>;\n    }\n}\n\nexport type ListItemTextProps = RmwcListItemTextProps & {\n    children: React.ReactNode;\n    className?: string;\n    onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n};\n\n/**\n * Used to show regular text in list items.\n * @param props\n * @returns {*}\n * @constructor\n */\nexport const ListItemText = (props: ListItemTextProps) => {\n    return <RmwcListItemText {...props}>{props.children}</RmwcListItemText>;\n};\n\nexport type ListItemTextPrimaryProps = {\n    /**\n     * Text content\n     */\n    children: React.ReactNode;\n};\n\nexport const ListItemTextPrimary = (props: ListItemTextPrimaryProps) => {\n    return <RmwcListItemPrimaryText>{props.children}</RmwcListItemPrimaryText>;\n};\n\nexport type ListItemTextSecondaryProps = {\n    /**\n     * Text content\n     */\n    children: React.ReactNode;\n};\n\n/**\n * Used to show secondary text in list items.\n * @param props\n * @returns {*}\n * @constructor\n */\nexport const ListItemTextSecondary = (props: ListItemTextSecondaryProps) => {\n    return <RmwcListItemSecondaryText>{props.children}</RmwcListItemSecondaryText>;\n};\n\nexport type ListItemGraphicProps = { children: React.ReactNode; className?: string };\n\n/**\n * Can be used to show an icon or any other custom element. Rendered on the left side.\n * @param props\n * @returns {*}\n * @constructor\n */\nexport const ListItemGraphic = (props: ListItemGraphicProps) => {\n    return (\n        <div {...props} className={classNames(\"mdc-list-item__graphic\", props.className)}>\n            {props.children}\n        </div>\n    );\n};\n\nexport type ListItemMetaProps = { children: React.ReactNode; className?: string };\n\n/**\n * Can be used to show an icon or any other custom element. Rendered on the right side.\n * @param props\n * @returns {*}\n * @constructor\n */\nexport const ListItemMeta = (props: ListItemMetaProps) => {\n    return (\n        <span {...props} className={classNames(\"mdc-list-item__meta\", props.className)}>\n            {props.children}\n        </span>\n    );\n};\n\nexport type ListTopCaptionProps = {\n    children: React.ReactNode;\n};\n\n/**\n * Can be used to show a top caption inside ListItemMeta component.\n * @param props\n * @returns {*}\n * @constructor\n */\nexport const ListTopCaption = (props: ListTopCaptionProps) => {\n    return (\n        <span {...props} className={\"webiny-list-top-caption\"}>\n            <Typography use=\"overline\">{props.children}</Typography>\n        </span>\n    );\n};\n\nexport type ListBottomCaptionProps = {\n    children: React.ReactNode;\n};\n\n/**\n * Can be used to show a bottom caption inside ListItemMeta component.\n * @param props\n * @returns {*}\n * @constructor\n */\nexport const ListBottomCaption = (props: ListBottomCaptionProps) => {\n    return (\n        <span {...props} className={\"webiny-list-bottom-caption\"}>\n            <Typography use=\"overline\">{props.children}</Typography>\n        </span>\n    );\n};\n\nexport type ListTextOverlineProps = {\n    children: React.ReactNode;\n};\n\n/**\n * Can be used to show an overline text inside ListItem component.\n * @param props\n * @returns {*}\n * @constructor\n */\nexport const ListTextOverline = (props: ListTextOverlineProps) => {\n    return (\n        <span {...props} className={\"webiny-list-text-overline\"}>\n            <Typography use=\"overline\">{props.children}</Typography>\n        </span>\n    );\n};\n\nexport type ListActionsProps = {\n    children: React.ReactNode;\n};\n\n/**\n * Used to contain the actions inside ListItemMate component.\n * @param props\n * @returns {*}\n * @constructor\n */\nexport const ListActions = (props: ListActionsProps) => {\n    return (\n        <span {...props} className={\"webiny-list-actions\"}>\n            {props.children}\n        </span>\n    );\n};\n\nconst SelectBoxWrapper = styled(\"div\")({\n    overflow: \"hidden\",\n    width: 25,\n    height: 25,\n    display: \"flex\",\n    position: \"relative\",\n    alignItems: \"center\",\n    justifyContent: \"center\"\n});\n\nexport type ListSelectBoxProps = {\n    children: React.ReactNode;\n};\n\n/**\n * Used to hold the Checkbox element for multi-select options.\n * @param {*} props\n */\nexport const ListSelectBox = (props: ListSelectBoxProps) => {\n    return (\n        <ListItemGraphic>\n            <SelectBoxWrapper>{props.children}</SelectBoxWrapper>\n        </ListItemGraphic>\n    );\n};\n\nexport const SimpleListItem = (props: RmwcSimpleListItemProps & { onClick?: any }) => {\n    return <RmwcSimpleListItem {...props} />;\n};\n"],"mappings":"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"}

package/List/List.stories.d.ts

@@ -0,0 +1 @@
+export {};

package/List/List.stories.js

@@ -0,0 +1,62 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@storybook/react");
+
+var _Story = require("@webiny/storybook-utils/Story");
+
+var _README = _interopRequireDefault(require("./../List/README.md"));
+
+var _Icon = require("./../Icon");
+
+var _Button = require("./../Button");
+
+var _baselineAutorenew24px = require("./icons/baseline-autorenew-24px.svg");
+
+var _baselineCloud_done24px = require("./icons/baseline-cloud_done-24px.svg");
+
+var _baselineDelete24px = require("./icons/baseline-delete-24px.svg");
+
+var _baselineDone24px = require("./icons/baseline-done-24px.svg");
+
+var _List = require("./List");
+
+var story = (0, _react2.storiesOf)("Components/List", module);
+story.add("simple list", function () {
+  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, {
+    title: "Basic list"
+  }, /*#__PURE__*/_react.default.createElement(_List.List, null, /*#__PURE__*/_react.default.createElement(_List.ListItem, null, "Item 1"), /*#__PURE__*/_react.default.createElement(_List.ListItem, null, /*#__PURE__*/_react.default.createElement(_List.ListItemGraphic, null, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+    icon: /*#__PURE__*/_react.default.createElement(_baselineDelete24px.ReactComponent, null)
+  })), "Item 2 - with icon on left side"), /*#__PURE__*/_react.default.createElement(_List.ListItem, null, "Item 3 - with icon on right side", /*#__PURE__*/_react.default.createElement(_List.ListItemMeta, null, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+    icon: /*#__PURE__*/_react.default.createElement(_baselineDone24px.ReactComponent, null)
+  }))), /*#__PURE__*/_react.default.createElement(_List.ListItem, null, /*#__PURE__*/_react.default.createElement(_List.ListItemGraphic, null, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+    icon: /*#__PURE__*/_react.default.createElement(_baselineDelete24px.ReactComponent, null)
+  })), "Item 4 - icons on both sides", /*#__PURE__*/_react.default.createElement(_List.ListItemMeta, null, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+    icon: /*#__PURE__*/_react.default.createElement(_baselineDone24px.ReactComponent, null)
+  }))))), /*#__PURE__*/_react.default.createElement(_Story.StorySandboxCode, null, "\n                        <List>\n                        <ListItem>\n                            Item 1\n                        </ListItem>\n\n                        <ListItem>\n                            <ListItemGraphic>\n                                <Icon icon={<BaselineDeleteIcon />} />\n                            </ListItemGraphic>\n                            Item 2 - with icon on left side\n                        </ListItem>\n                        <ListItem>\n                            Item 3 - with icon on right side\n                            <ListItemMeta>\n                                <Icon icon={<BaselineDoneIcon />} />\n                            </ListItemMeta>\n                        </ListItem>\n                        <ListItem>\n                            <ListItemGraphic>\n                                <Icon icon={<BaselineDeleteIcon />} />\n                            </ListItemGraphic>\n                            Item 4 - icons on both sides\n                            <ListItemMeta>\n                                <Icon icon={<BaselineDoneIcon />} />\n                            </ListItemMeta>\n                        </ListItem>\n                    </List>\n                    ")), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, null, /*#__PURE__*/_react.default.createElement(_Story.StorySandboxExample, {
+    title: "List with 2 lines"
+  }, /*#__PURE__*/_react.default.createElement(_List.List, {
+    twoLine: true
+  }, /*#__PURE__*/_react.default.createElement(_List.ListItem, null, /*#__PURE__*/_react.default.createElement(_List.ListItemText, null, /*#__PURE__*/_react.default.createElement(_List.ListItemTextPrimary, null, "Primary text"), /*#__PURE__*/_react.default.createElement(_List.ListItemTextSecondary, null, "Secondary text"))), /*#__PURE__*/_react.default.createElement(_List.ListItem, null, /*#__PURE__*/_react.default.createElement(_List.ListItemText, null, /*#__PURE__*/_react.default.createElement(_List.ListItemTextPrimary, null, "Primary text"), /*#__PURE__*/_react.default.createElement(_List.ListItemTextSecondary, null, "Secondary text"))), /*#__PURE__*/_react.default.createElement(_List.ListItem, null, /*#__PURE__*/_react.default.createElement(_List.ListItemText, null, /*#__PURE__*/_react.default.createElement(_List.ListItemTextPrimary, null, "Primary text"), /*#__PURE__*/_react.default.createElement(_List.ListItemTextSecondary, null, "Secondary text"))))), /*#__PURE__*/_react.default.createElement(_Story.StorySandboxCode, null, "\n                        <List twoLine>\n                        <ListItem>\n                            <ListItemText>\n                                <ListItemTextPrimary>\n                                    Primary text\n                                </ListItemTextPrimary>\n                                <ListItemTextSecondary>\n                                    Secondary text\n                                </ListItemTextSecondary>\n                            </ListItemText>\n                        </ListItem>\n                        <ListItem>\n                            <ListItemText>\n                                <ListItemTextPrimary>\n                                    Primary text\n                                </ListItemTextPrimary>\n                                <ListItemTextSecondary>\n                                    Secondary text\n                                </ListItemTextSecondary>\n                            </ListItemText>\n                        </ListItem>\n                        <ListItem>\n                            <ListItemText>\n                                <ListItemTextPrimary>\n                                    Primary text\n                                </ListItemTextPrimary>\n                                <ListItemTextSecondary>\n                                    Secondary text\n                                </ListItemTextSecondary>\n                            </ListItemText>\n                        </ListItem>\n                    </List>\n                    ")), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, null, /*#__PURE__*/_react.default.createElement(_Story.StorySandboxExample, {
+    title: "A list with all possible options"
+  }, /*#__PURE__*/_react.default.createElement(_List.List, {
+    twoLine: true
+  }, /*#__PURE__*/_react.default.createElement(_List.ListItem, null, /*#__PURE__*/_react.default.createElement(_List.ListItemGraphic, null, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+    icon: /*#__PURE__*/_react.default.createElement(_baselineAutorenew24px.ReactComponent, null)
+  })), /*#__PURE__*/_react.default.createElement(_List.ListItemText, null, /*#__PURE__*/_react.default.createElement(_List.ListItemTextPrimary, null, "Rocket"), /*#__PURE__*/_react.default.createElement(_List.ListItemTextSecondary, null, "This could be a really cool rocket.")), /*#__PURE__*/_react.default.createElement(_List.ListItemMeta, null, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+    icon: /*#__PURE__*/_react.default.createElement(_baselineCloud_done24px.ReactComponent, null)
+  }))), /*#__PURE__*/_react.default.createElement(_List.ListItem, null, /*#__PURE__*/_react.default.createElement(_List.ListItemGraphic, null, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+    icon: /*#__PURE__*/_react.default.createElement(_baselineDelete24px.ReactComponent, null)
+  })), /*#__PURE__*/_react.default.createElement(_List.ListItemText, null, /*#__PURE__*/_react.default.createElement(_List.ListItemTextPrimary, null, "Coffee"), /*#__PURE__*/_react.default.createElement(_List.ListItemTextSecondary, null, "A nice cup of coffee.")), /*#__PURE__*/_react.default.createElement(_List.ListItemMeta, null, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+    icon: /*#__PURE__*/_react.default.createElement(_baselineDone24px.ReactComponent, null)
+  }))), /*#__PURE__*/_react.default.createElement(_List.ListItem, null, /*#__PURE__*/_react.default.createElement(_List.ListItemGraphic, null, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+    icon: /*#__PURE__*/_react.default.createElement(_baselineAutorenew24px.ReactComponent, null)
+  })), /*#__PURE__*/_react.default.createElement(_List.ListItemText, null, /*#__PURE__*/_react.default.createElement(_List.ListItemTextPrimary, null, "E-mail"), /*#__PURE__*/_react.default.createElement(_List.ListItemTextSecondary, null, "Send an e-mail to your best friend.")), /*#__PURE__*/_react.default.createElement(_List.ListItemMeta, null, /*#__PURE__*/_react.default.createElement(_Button.ButtonPrimary, null, "Send"))))), /*#__PURE__*/_react.default.createElement(_Story.StorySandboxCode, null, "\n                        <List twoLine>\n                        <ListItem>\n                            <ListItemGraphic>\n                                <Icon icon={<AutoRenewIcon />} />\n                            </ListItemGraphic>\n                            <ListItemText>\n                                <ListItemTextPrimary>Rocket</ListItemTextPrimary>\n                                <ListItemTextSecondary>\n                                    This could be a really cool rocket.\n                                </ListItemTextSecondary>\n                            </ListItemText>\n                            <ListItemMeta>\n                                <Icon icon={<CloudDoneIcon />} />\n                            </ListItemMeta>\n                        </ListItem>\n\n                        <ListItem>\n                            <ListItemGraphic>\n                                <Icon icon={<BaselineDeleteIcon />} />\n                            </ListItemGraphic>\n                            <ListItemText>\n                                <ListItemTextPrimary>Coffee</ListItemTextPrimary>\n                                <ListItemTextSecondary>A nice cup of coffee.</ListItemTextSecondary>\n                            </ListItemText>\n                            <ListItemMeta>\n                                <Icon icon={<BaselineDoneIcon />} />\n                            </ListItemMeta>\n                        </ListItem>\n                        <ListItem>\n                            <ListItemGraphic>\n                                <Icon icon={<AutoRenewIcon />} />\n                            </ListItemGraphic>\n                            <ListItemText>\n                                <ListItemTextPrimary>E-mail</ListItemTextPrimary>\n                                <ListItemTextSecondary>\n                                    Send an e-mail to your best friend.\n                                </ListItemTextSecondary>\n                            </ListItemText>\n                            <ListItemMeta>\n                                <ButtonPrimary>Send</ButtonPrimary>\n                            </ListItemMeta>\n                        </ListItem>\n                    </List>\n                    ")));
+}, {
+  info: {
+    propTables: [_List.List, _List.ListItem, _List.ListItemText, _List.ListItemTextSecondary, _List.ListItemMeta, _List.ListItemGraphic, _List.ListItemTextPrimary]
+  }
+});

package/List/List.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["story","storiesOf","module","add","readme","info","propTables","List","ListItem","ListItemText","ListItemTextSecondary","ListItemMeta","ListItemGraphic","ListItemTextPrimary"],"sources":["List.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 \"./../List/README.md\";\n\nimport { Icon } from \"./../Icon\";\nimport { ButtonPrimary } from \"./../Button\";\n\nimport { ReactComponent as AutoRenewIcon } from \"./icons/baseline-autorenew-24px.svg\";\nimport { ReactComponent as CloudDoneIcon } from \"./icons/baseline-cloud_done-24px.svg\";\nimport { ReactComponent as BaselineDeleteIcon } from \"./icons/baseline-delete-24px.svg\";\nimport { ReactComponent as BaselineDoneIcon } from \"./icons/baseline-done-24px.svg\";\n\nimport {\n    List,\n    ListItem,\n    ListItemText,\n    ListItemTextSecondary,\n    ListItemMeta,\n    ListItemGraphic,\n    ListItemTextPrimary\n} from \"./List\";\n\nconst story = storiesOf(\"Components/List\", module);\n\nstory.add(\n    \"simple list\",\n    () => {\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox>\n                    <StorySandboxExample title={\"Basic list\"}>\n                        <List>\n                            <ListItem>Item 1</ListItem>\n                            <ListItem>\n                                <ListItemGraphic>\n                                    <Icon icon={<BaselineDeleteIcon />} />\n                                </ListItemGraphic>\n                                Item 2 - with icon on left side\n                            </ListItem>\n                            <ListItem>\n                                Item 3 - with icon on right side\n                                <ListItemMeta>\n                                    <Icon icon={<BaselineDoneIcon />} />\n                                </ListItemMeta>\n                            </ListItem>\n                            <ListItem>\n                                <ListItemGraphic>\n                                    <Icon icon={<BaselineDeleteIcon />} />\n                                </ListItemGraphic>\n                                Item 4 - icons on both sides\n                                <ListItemMeta>\n                                    <Icon icon={<BaselineDoneIcon />} />\n                                </ListItemMeta>\n                            </ListItem>\n                        </List>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                        <List>\n                        <ListItem>\n                            Item 1\n                        </ListItem>\n\n                        <ListItem>\n                            <ListItemGraphic>\n                                <Icon icon={<BaselineDeleteIcon />} />\n                            </ListItemGraphic>\n                            Item 2 - with icon on left side\n                        </ListItem>\n                        <ListItem>\n                            Item 3 - with icon on right side\n                            <ListItemMeta>\n                                <Icon icon={<BaselineDoneIcon />} />\n                            </ListItemMeta>\n                        </ListItem>\n                        <ListItem>\n                            <ListItemGraphic>\n                                <Icon icon={<BaselineDeleteIcon />} />\n                            </ListItemGraphic>\n                            Item 4 - icons on both sides\n                            <ListItemMeta>\n                                <Icon icon={<BaselineDoneIcon />} />\n                            </ListItemMeta>\n                        </ListItem>\n                    </List>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n\n                <StorySandbox>\n                    <StorySandboxExample title={\"List with 2 lines\"}>\n                        <List twoLine>\n                            <ListItem>\n                                <ListItemText>\n                                    <ListItemTextPrimary>Primary text</ListItemTextPrimary>\n                                    <ListItemTextSecondary>Secondary text</ListItemTextSecondary>\n                                </ListItemText>\n                            </ListItem>\n                            <ListItem>\n                                <ListItemText>\n                                    <ListItemTextPrimary>Primary text</ListItemTextPrimary>\n                                    <ListItemTextSecondary>Secondary text</ListItemTextSecondary>\n                                </ListItemText>\n                            </ListItem>\n                            <ListItem>\n                                <ListItemText>\n                                    <ListItemTextPrimary>Primary text</ListItemTextPrimary>\n                                    <ListItemTextSecondary>Secondary text</ListItemTextSecondary>\n                                </ListItemText>\n                            </ListItem>\n                        </List>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                        <List twoLine>\n                        <ListItem>\n                            <ListItemText>\n                                <ListItemTextPrimary>\n                                    Primary text\n                                </ListItemTextPrimary>\n                                <ListItemTextSecondary>\n                                    Secondary text\n                                </ListItemTextSecondary>\n                            </ListItemText>\n                        </ListItem>\n                        <ListItem>\n                            <ListItemText>\n                                <ListItemTextPrimary>\n                                    Primary text\n                                </ListItemTextPrimary>\n                                <ListItemTextSecondary>\n                                    Secondary text\n                                </ListItemTextSecondary>\n                            </ListItemText>\n                        </ListItem>\n                        <ListItem>\n                            <ListItemText>\n                                <ListItemTextPrimary>\n                                    Primary text\n                                </ListItemTextPrimary>\n                                <ListItemTextSecondary>\n                                    Secondary text\n                                </ListItemTextSecondary>\n                            </ListItemText>\n                        </ListItem>\n                    </List>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n\n                <StorySandbox>\n                    <StorySandboxExample title={\"A list with all possible options\"}>\n                        <List twoLine>\n                            <ListItem>\n                                <ListItemGraphic>\n                                    <Icon icon={<AutoRenewIcon />} />\n                                </ListItemGraphic>\n                                <ListItemText>\n                                    <ListItemTextPrimary>Rocket</ListItemTextPrimary>\n                                    <ListItemTextSecondary>\n                                        This could be a really cool rocket.\n                                    </ListItemTextSecondary>\n                                </ListItemText>\n                                <ListItemMeta>\n                                    <Icon icon={<CloudDoneIcon />} />\n                                </ListItemMeta>\n                            </ListItem>\n\n                            <ListItem>\n                                <ListItemGraphic>\n                                    <Icon icon={<BaselineDeleteIcon />} />\n                                </ListItemGraphic>\n                                <ListItemText>\n                                    <ListItemTextPrimary>Coffee</ListItemTextPrimary>\n                                    <ListItemTextSecondary>\n                                        A nice cup of coffee.\n                                    </ListItemTextSecondary>\n                                </ListItemText>\n                                <ListItemMeta>\n                                    <Icon icon={<BaselineDoneIcon />} />\n                                </ListItemMeta>\n                            </ListItem>\n                            <ListItem>\n                                <ListItemGraphic>\n                                    <Icon icon={<AutoRenewIcon />} />\n                                </ListItemGraphic>\n                                <ListItemText>\n                                    <ListItemTextPrimary>E-mail</ListItemTextPrimary>\n                                    <ListItemTextSecondary>\n                                        Send an e-mail to your best friend.\n                                    </ListItemTextSecondary>\n                                </ListItemText>\n                                <ListItemMeta>\n                                    <ButtonPrimary>Send</ButtonPrimary>\n                                </ListItemMeta>\n                            </ListItem>\n                        </List>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                        <List twoLine>\n                        <ListItem>\n                            <ListItemGraphic>\n                                <Icon icon={<AutoRenewIcon />} />\n                            </ListItemGraphic>\n                            <ListItemText>\n                                <ListItemTextPrimary>Rocket</ListItemTextPrimary>\n                                <ListItemTextSecondary>\n                                    This could be a really cool rocket.\n                                </ListItemTextSecondary>\n                            </ListItemText>\n                            <ListItemMeta>\n                                <Icon icon={<CloudDoneIcon />} />\n                            </ListItemMeta>\n                        </ListItem>\n\n                        <ListItem>\n                            <ListItemGraphic>\n                                <Icon icon={<BaselineDeleteIcon />} />\n                            </ListItemGraphic>\n                            <ListItemText>\n                                <ListItemTextPrimary>Coffee</ListItemTextPrimary>\n                                <ListItemTextSecondary>A nice cup of coffee.</ListItemTextSecondary>\n                            </ListItemText>\n                            <ListItemMeta>\n                                <Icon icon={<BaselineDoneIcon />} />\n                            </ListItemMeta>\n                        </ListItem>\n                        <ListItem>\n                            <ListItemGraphic>\n                                <Icon icon={<AutoRenewIcon />} />\n                            </ListItemGraphic>\n                            <ListItemText>\n                                <ListItemTextPrimary>E-mail</ListItemTextPrimary>\n                                <ListItemTextSecondary>\n                                    Send an e-mail to your best friend.\n                                </ListItemTextSecondary>\n                            </ListItemText>\n                            <ListItemMeta>\n                                <ButtonPrimary>Send</ButtonPrimary>\n                            </ListItemMeta>\n                        </ListItem>\n                    </List>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    {\n        info: {\n            propTables: [\n                List,\n                ListItem,\n                ListItemText,\n                ListItemTextSecondary,\n                ListItemMeta,\n                ListItemGraphic,\n                ListItemTextPrimary\n            ]\n        }\n    }\n);\n"],"mappings":"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"}

package/List/README.md

@@ -0,0 +1,22 @@
+# List
+
+### Design
+
+<a href="https://material.io/design/components/lists.html" target="_blank">https://material.io/design/components/lists.html</a>
+
+### Description
+
+Use `List` component to display data and offer additional actions if needed.
+
+### Import
+
+```js
+import {
+  List,
+  ListItem,
+  ListItemText,
+  ListItemTextSecondary,
+  ListItemGraphic,
+  ListItemMeta
+} from "@webiny/ui/List";
+```

package/List/icons/baseline-autorenew-24px.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path d="M12 6v3l4-4-4-4v3c-4.42 0-8 3.58-8 8 0 1.57.46 3.03 1.24 4.26L6.7 14.8c-.45-.83-.7-1.79-.7-2.8 0-3.31 2.69-6 6-6zm6.76 1.74L17.3 9.2c.44.84.7 1.79.7 2.8 0 3.31-2.69 6-6 6v-3l-4 4 4 4v-3c4.42 0 8-3.58 8-8 0-1.57-.46-3.03-1.24-4.26z"/>
+    <path d="M0 0h24v24H0z" fill="none"/>
+</svg>

package/List/icons/baseline-cloud_done-24px.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path d="M0 0h24v24H0z" fill="none"/>
+    <path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM10 17l-3.5-3.5 1.41-1.41L10 14.17 15.18 9l1.41 1.41L10 17z"/>
+</svg>

package/List/icons/baseline-delete-24px.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>
+    <path d="M0 0h24v24H0z" fill="none"/>
+</svg>

package/List/icons/baseline-done-24px.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path fill="none" d="M0 0h24v24H0z"/>
+    <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
+</svg>

package/List/icons/baseline-email-24px.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
+    <path d="M0 0h24v24H0z" fill="none"/>
+</svg>

package/List/icons/index.d.ts

@@ -0,0 +1,3 @@
+import refreshIcon from "./baseline-autorenew-24px.svg";
+import deleteIcon from "./baseline-delete-24px.svg";
+export { refreshIcon, deleteIcon };

package/List/icons/index.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "deleteIcon", {
+  enumerable: true,
+  get: function get() {
+    return _baselineDelete24px.default;
+  }
+});
+Object.defineProperty(exports, "refreshIcon", {
+  enumerable: true,
+  get: function get() {
+    return _baselineAutorenew24px.default;
+  }
+});
+
+var _baselineAutorenew24px = _interopRequireDefault(require("./baseline-autorenew-24px.svg"));
+
+var _baselineDelete24px = _interopRequireDefault(require("./baseline-delete-24px.svg"));

package/List/icons/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["import refreshIcon from \"./baseline-autorenew-24px.svg\";\nimport deleteIcon from \"./baseline-delete-24px.svg\";\n\nexport { refreshIcon, deleteIcon };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;AACA"}

package/List/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./List";
+export { DataList, ScrollList, DataListModalOverlay, DataListModalOverlayAction, DataListWithSections, ScrollListWithSections } from "./DataList";
+export { CollapsibleList } from "./CollapsibleList";

package/List/index.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  DataList: true,
+  ScrollList: true,
+  DataListModalOverlay: true,
+  DataListModalOverlayAction: true,
+  DataListWithSections: true,
+  ScrollListWithSections: true,
+  CollapsibleList: true
+};
+Object.defineProperty(exports, "CollapsibleList", {
+  enumerable: true,
+  get: function get() {
+    return _CollapsibleList.CollapsibleList;
+  }
+});
+Object.defineProperty(exports, "DataList", {
+  enumerable: true,
+  get: function get() {
+    return _DataList.DataList;
+  }
+});
+Object.defineProperty(exports, "DataListModalOverlay", {
+  enumerable: true,
+  get: function get() {
+    return _DataList.DataListModalOverlay;
+  }
+});
+Object.defineProperty(exports, "DataListModalOverlayAction", {
+  enumerable: true,
+  get: function get() {
+    return _DataList.DataListModalOverlayAction;
+  }
+});
+Object.defineProperty(exports, "DataListWithSections", {
+  enumerable: true,
+  get: function get() {
+    return _DataList.DataListWithSections;
+  }
+});
+Object.defineProperty(exports, "ScrollList", {
+  enumerable: true,
+  get: function get() {
+    return _DataList.ScrollList;
+  }
+});
+Object.defineProperty(exports, "ScrollListWithSections", {
+  enumerable: true,
+  get: function get() {
+    return _DataList.ScrollListWithSections;
+  }
+});
+
+var _List = require("./List");
+
+Object.keys(_List).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _List[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _List[key];
+    }
+  });
+});
+
+var _DataList = require("./DataList");
+
+var _CollapsibleList = require("./CollapsibleList");

package/List/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./List\";\n\nexport {\n    DataList,\n    ScrollList,\n    DataListModalOverlay,\n    DataListModalOverlayAction,\n    DataListWithSections,\n    ScrollListWithSections\n} from \"./DataList\";\nexport { CollapsibleList } from \"./CollapsibleList\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AAQA"}

package/Menu/Menu.d.ts

@@ -0,0 +1,36 @@
+import React from "react";
+import { MenuProps as RmwcMenuProps, MenuItemProps as BaseMenuItemProps } from "@rmwc/menu";
+declare type MenuProps = RmwcMenuProps & {
+    children: React.ReactNode;
+    handle?: React.ReactElement;
+    anchor?: "bottomEnd" | "bottomLeft" | "bottomRight" | "bottomStart" | "topEnd" | "topLeft" | "topRight" | "topStart";
+    className?: string;
+    onOpen?: () => void;
+    onClose?: () => void;
+    "data-testid"?: string;
+};
+interface MenuState {
+    menuIsOpen: boolean;
+}
+/**
+ * Use Menu component to display a list of choices, once the handler is triggered.
+ */
+declare class Menu extends React.Component<MenuProps, MenuState> {
+    static defaultProps: Partial<MenuProps>;
+    state: MenuState;
+    private readonly openMenu;
+    private readonly closeMenu;
+    private readonly renderMenuWithPortal;
+    private readonly renderCustomContent;
+    private readonly renderMenuContent;
+    render(): React.ReactNode;
+}
+declare const MenuDivider: React.FC;
+interface MenuItemProps extends BaseMenuItemProps {
+    children: React.ReactNode;
+    className?: string;
+    onClick?: (event: React.MouseEvent) => void;
+    "data-testid"?: string;
+}
+declare const MenuItem: React.FC<MenuItemProps>;
+export { Menu, MenuItem, MenuDivider };