@webiny/ui 0.0.0-mt-1

package/List/List.stories.js

@@ -0,0 +1,47 @@
+import React from "react";
+import { storiesOf } from "@storybook/react";
+import { Story, StoryReadme, StorySandboxCode, StorySandbox, StorySandboxExample } from "@webiny/storybook-utils/Story";
+import readme from "./../List/README.md";
+import { Icon } from "./../Icon";
+import { ButtonPrimary } from "./../Button";
+import { ReactComponent as AutoRenewIcon } from "@svgr/webpack!./icons/baseline-autorenew-24px.svg";
+import { ReactComponent as CloudDoneIcon } from "@svgr/webpack!./icons/baseline-cloud_done-24px.svg";
+import { ReactComponent as BaselineDeleteIcon } from "@svgr/webpack!./icons/baseline-delete-24px.svg";
+import { ReactComponent as BaselineDoneIcon } from "@svgr/webpack!./icons/baseline-done-24px.svg";
+import { List, ListItem, ListItemText, ListItemTextSecondary, ListItemMeta, ListItemGraphic, ListItemTextPrimary } from "./List";
+var story = storiesOf("Components/List", module);
+story.add("simple list", function () {
+  return /*#__PURE__*/React.createElement(Story, null, /*#__PURE__*/React.createElement(StoryReadme, null, readme), /*#__PURE__*/React.createElement(StorySandbox, null, /*#__PURE__*/React.createElement(StorySandboxExample, {
+    title: "Basic list"
+  }, /*#__PURE__*/React.createElement(List, null, /*#__PURE__*/React.createElement(ListItem, null, "Item 1"), /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(ListItemGraphic, null, /*#__PURE__*/React.createElement(Icon, {
+    icon: /*#__PURE__*/React.createElement(BaselineDeleteIcon, null)
+  })), "Item 2 - with icon on left side"), /*#__PURE__*/React.createElement(ListItem, null, "Item 3 - with icon on right side", /*#__PURE__*/React.createElement(ListItemMeta, null, /*#__PURE__*/React.createElement(Icon, {
+    icon: /*#__PURE__*/React.createElement(BaselineDoneIcon, null)
+  }))), /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(ListItemGraphic, null, /*#__PURE__*/React.createElement(Icon, {
+    icon: /*#__PURE__*/React.createElement(BaselineDeleteIcon, null)
+  })), "Item 4 - icons on both sides", /*#__PURE__*/React.createElement(ListItemMeta, null, /*#__PURE__*/React.createElement(Icon, {
+    icon: /*#__PURE__*/React.createElement(BaselineDoneIcon, null)
+  }))))), /*#__PURE__*/React.createElement(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.createElement(StorySandbox, null, /*#__PURE__*/React.createElement(StorySandboxExample, {
+    title: "List with 2 lines"
+  }, /*#__PURE__*/React.createElement(List, {
+    twoLine: true
+  }, /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(ListItemText, null, /*#__PURE__*/React.createElement(ListItemTextPrimary, null, "Primary text"), /*#__PURE__*/React.createElement(ListItemTextSecondary, null, "Secondary text"))), /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(ListItemText, null, /*#__PURE__*/React.createElement(ListItemTextPrimary, null, "Primary text"), /*#__PURE__*/React.createElement(ListItemTextSecondary, null, "Secondary text"))), /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(ListItemText, null, /*#__PURE__*/React.createElement(ListItemTextPrimary, null, "Primary text"), /*#__PURE__*/React.createElement(ListItemTextSecondary, null, "Secondary text"))))), /*#__PURE__*/React.createElement(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.createElement(StorySandbox, null, /*#__PURE__*/React.createElement(StorySandboxExample, {
+    title: "A list with all possible options"
+  }, /*#__PURE__*/React.createElement(List, {
+    twoLine: true
+  }, /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(ListItemGraphic, null, /*#__PURE__*/React.createElement(Icon, {
+    icon: /*#__PURE__*/React.createElement(AutoRenewIcon, null)
+  })), /*#__PURE__*/React.createElement(ListItemText, null, /*#__PURE__*/React.createElement(ListItemTextPrimary, null, "Rocket"), /*#__PURE__*/React.createElement(ListItemTextSecondary, null, "This could be a really cool rocket.")), /*#__PURE__*/React.createElement(ListItemMeta, null, /*#__PURE__*/React.createElement(Icon, {
+    icon: /*#__PURE__*/React.createElement(CloudDoneIcon, null)
+  }))), /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(ListItemGraphic, null, /*#__PURE__*/React.createElement(Icon, {
+    icon: /*#__PURE__*/React.createElement(BaselineDeleteIcon, null)
+  })), /*#__PURE__*/React.createElement(ListItemText, null, /*#__PURE__*/React.createElement(ListItemTextPrimary, null, "Coffee"), /*#__PURE__*/React.createElement(ListItemTextSecondary, null, "A nice cup of coffee.")), /*#__PURE__*/React.createElement(ListItemMeta, null, /*#__PURE__*/React.createElement(Icon, {
+    icon: /*#__PURE__*/React.createElement(BaselineDoneIcon, null)
+  }))), /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(ListItemGraphic, null, /*#__PURE__*/React.createElement(Icon, {
+    icon: /*#__PURE__*/React.createElement(AutoRenewIcon, null)
+  })), /*#__PURE__*/React.createElement(ListItemText, null, /*#__PURE__*/React.createElement(ListItemTextPrimary, null, "E-mail"), /*#__PURE__*/React.createElement(ListItemTextSecondary, null, "Send an e-mail to your best friend.")), /*#__PURE__*/React.createElement(ListItemMeta, null, /*#__PURE__*/React.createElement(ButtonPrimary, null, "Send"))))), /*#__PURE__*/React.createElement(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, ListItem, ListItemText, ListItemTextSecondary, ListItemMeta, ListItemGraphic, ListItemTextPrimary]
+  }
+});

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,3 @@
+import refreshIcon from "./baseline-autorenew-24px.svg";
+import deleteIcon from "./baseline-delete-24px.svg";
+export { refreshIcon, deleteIcon };

package/List/index.d.ts

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

package/List/index.js

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

package/Menu/Menu.d.ts

@@ -0,0 +1,43 @@
+import * as 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;
+};
+declare type State = {
+    menuIsOpen: boolean;
+};
+/**
+ * Use Menu component to display a list of choices, once the handler is triggered.
+ */
+declare class Menu extends React.Component<MenuProps, State> {
+    static defaultProps: {
+        handle: any;
+        anchor: string;
+    };
+    state: {
+        menuIsOpen: boolean;
+    };
+    anchorRef: React.RefObject<unknown>;
+    menuRef: React.RefObject<unknown>;
+    openMenu: () => void;
+    closeMenu: () => void;
+    renderMenuWithPortal: () => JSX.Element;
+    renderCustomContent: () => JSX.Element;
+    renderMenuContent: () => JSX.Element;
+    render(): JSX.Element;
+}
+declare const MenuDivider: () => JSX.Element;
+interface MenuItemProps extends BaseMenuItemProps {
+    children: React.ReactNode;
+    className?: string;
+    onClick?: (event: React.MouseEvent) => void;
+    "data-testid"?: string;
+}
+declare const MenuItem: ({ disabled, className, ...rest }: MenuItemProps) => JSX.Element;
+export { Menu, MenuItem, MenuDivider };

package/Menu/Menu.js

@@ -0,0 +1,128 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _createSuper from "@babel/runtime/helpers/createSuper";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["disabled", "className"];
+import * as React from "react";
+import { Menu as BaseMenu, MenuItem as BaseMenuItem, MenuSurface, MenuSurfaceAnchor } from "@rmwc/menu";
+import { css } from "emotion";
+import classNames from "classnames";
+var style = {
+  disabledMenuItem: /*#__PURE__*/css({
+    opacity: 0.5,
+    pointerEvents: "none"
+  }, "label:disabledMenuItem;")
+};
+
+/**
+ * Use Menu component to display a list of choices, once the handler is triggered.
+ */
+var Menu = /*#__PURE__*/function (_React$Component) {
+  _inherits(Menu, _React$Component);
+
+  var _super = _createSuper(Menu);
+
+  function Menu() {
+    var _this;
+
+    _classCallCheck(this, Menu);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      menuIsOpen: false
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "anchorRef", /*#__PURE__*/React.createRef());
+
+    _defineProperty(_assertThisInitialized(_this), "menuRef", /*#__PURE__*/React.createRef());
+
+    _defineProperty(_assertThisInitialized(_this), "openMenu", function () {
+      _this.setState({
+        menuIsOpen: true
+      }, function () {
+        return _this.props.onOpen && _this.props.onOpen();
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "closeMenu", function () {
+      _this.setState({
+        menuIsOpen: false
+      }, function () {
+        return _this.props.onClose && _this.props.onClose();
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "renderMenuWithPortal", function () {
+      return /*#__PURE__*/React.createElement(BaseMenu, {
+        anchorCorner: _this.props.anchor,
+        open: _this.state.menuIsOpen,
+        className: _this.props.className,
+        onClose: _this.closeMenu,
+        onSelect: _this.props.onSelect,
+        hoistToBody: true
+      }, _this.props.children);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "renderCustomContent", function () {
+      var children = _this.props.children;
+      return /*#__PURE__*/React.createElement(MenuSurface, {
+        open: _this.state.menuIsOpen,
+        onClose: _this.closeMenu
+      }, typeof children === "function" ? children({
+        closeMenu: _this.closeMenu
+      }) : children);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "renderMenuContent", function () {
+      return Array.isArray(_this.props.children) ? _this.renderMenuWithPortal() : _this.renderCustomContent();
+    });
+
+    return _this;
+  }
+
+  _createClass(Menu, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/React.createElement(MenuSurfaceAnchor, {
+        ref: this.anchorRef,
+        "data-testid": this.props["data-testid"]
+      }, this.renderMenuContent(), this.props.handle && /*#__PURE__*/React.cloneElement(this.props.handle, {
+        onClick: this.openMenu
+      }));
+    }
+  }]);
+
+  return Menu;
+}(React.Component);
+
+_defineProperty(Menu, "defaultProps", {
+  handle: null,
+  anchor: "topStart"
+});
+
+var MenuDivider = function MenuDivider() {
+  return /*#__PURE__*/React.createElement("li", {
+    className: "mdc-list-divider",
+    role: "separator"
+  });
+};
+
+var MenuItem = function MenuItem(_ref) {
+  var disabled = _ref.disabled,
+      className = _ref.className,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(BaseMenuItem, Object.assign({}, rest, {
+    className: classNames(className, _defineProperty({}, style.disabledMenuItem, disabled))
+  }));
+};
+
+export { Menu, MenuItem, MenuDivider };

package/Menu/Menu.stories.d.ts

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

package/Menu/Menu.stories.js

@@ -0,0 +1,29 @@
+import React from "react";
+import { storiesOf } from "@storybook/react";
+import { Story, StoryReadme, StorySandbox, StorySandboxExample, StorySandboxCode } from "@webiny/storybook-utils/Story";
+import { ButtonPrimary } from "./../Button";
+import readme from "./../Menu/README.md";
+import { Menu, MenuItem, MenuDivider } from "./Menu";
+var story = storiesOf("Components/Menu", module);
+var style = {
+  position: "relative",
+  width: 200,
+  margin: "0 auto"
+};
+story.add("usage", function () {
+  return /*#__PURE__*/React.createElement(Story, null, /*#__PURE__*/React.createElement(StoryReadme, null, readme), /*#__PURE__*/React.createElement(StorySandbox, null, /*#__PURE__*/React.createElement(StorySandboxExample, {
+    title: "A simple menu, triggered with a button"
+  }, /*#__PURE__*/React.createElement("div", {
+    style: style
+  }, /*#__PURE__*/React.createElement(Menu, {
+    handle: /*#__PURE__*/React.createElement(ButtonPrimary, null, "Open menu")
+  }, /*#__PURE__*/React.createElement(MenuItem, {
+    onClick: function onClick() {
+      console.log("Apple selected!");
+    }
+  }, "Apple"), /*#__PURE__*/React.createElement(MenuItem, null, "Banana"), /*#__PURE__*/React.createElement(MenuItem, null, "Watermelon")))), /*#__PURE__*/React.createElement(StorySandboxCode, null, "\n                   <Menu handle={<ButtonPrimary>Open menu</ButtonPrimary>}>\n                        <MenuItem\n                            onClick={() => {\n                                console.log(\"Apple selected!\");\n                            }}\n                        >\n                            Apple\n                        </MenuItem>\n                        <MenuItem>Banana</MenuItem>\n                        <MenuItem>Watermelon</MenuItem>\n                    </Menu>\n                    ")));
+}, {
+  info: {
+    propTables: [Menu, MenuItem, MenuDivider]
+  }
+});

package/Menu/README.md

@@ -0,0 +1,15 @@
+# Menu
+
+### Design
+
+<a href="https://material.io/design/components/menus.html" target="_blank">https://material.io/design/components/menus.html</a>
+
+### Description
+
+Use `Menu` component to display a list of choices, once the handler is triggered.
+
+### Import
+
+```js
+import { Menu, MenuItem } from "@webiny/ui/Menu";
+```

package/Menu/index.d.ts

@@ -0,0 +1 @@
+export * from "./Menu";

package/Menu/index.js

@@ -0,0 +1 @@
+export * from "./Menu";

package/Mosaic/Mosaic.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+export declare type MosaicProps = {
+    children: React.ReactNode;
+    columns: {
+        [key: string]: number;
+    };
+    className?: string;
+};
+export declare function Mosaic({ children, columns, className }: MosaicProps): JSX.Element;
+export declare namespace Mosaic {
+    var defaultProps: {
+        columns: {
+            320: number;
+            480: number;
+            800: number;
+            1366: number;
+        };
+    };
+}

package/Mosaic/Mosaic.js

@@ -0,0 +1,19 @@
+import React from "react";
+import Columned from "react-columned";
+export function Mosaic(_ref) {
+  var children = _ref.children,
+      columns = _ref.columns,
+      className = _ref.className;
+  return /*#__PURE__*/React.createElement(Columned, {
+    columns: columns,
+    className: className
+  }, children);
+}
+Mosaic.defaultProps = {
+  columns: {
+    320: 1,
+    480: 2,
+    800: 3,
+    1366: 4
+  }
+};

package/Mosaic/Mosaic.stories.d.ts

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

package/Mosaic/Mosaic.stories.js

@@ -0,0 +1,75 @@
+import * as React from "react";
+import { storiesOf } from "@storybook/react";
+import { Story, StoryReadme, StorySandboxCode, StorySandbox, StorySandboxExample } from "@webiny/storybook-utils/Story";
+import readme from "./../Mosaic/README.md";
+import { Mosaic } from "./Mosaic";
+var story = storiesOf("Components/Mosaic", module);
+story.add("usage", function () {
+  return /*#__PURE__*/React.createElement(Story, null, /*#__PURE__*/React.createElement(StoryReadme, null, readme), /*#__PURE__*/React.createElement(StorySandbox, {
+    title: "A simple responsive mosaic."
+  }, /*#__PURE__*/React.createElement(StorySandboxExample, null, /*#__PURE__*/React.createElement(Mosaic, null, /*#__PURE__*/React.createElement("img", {
+    alt: "Image 1",
+    src: "https://via.placeholder.com/800x600/001F3F/FFFFFF.png?text=1"
+  }), /*#__PURE__*/React.createElement("img", {
+    alt: "Image 2",
+    src: "https://via.placeholder.com/400x300/0074D9/FFFFFF.png?text=2"
+  }), /*#__PURE__*/React.createElement("img", {
+    alt: "Image 3",
+    src: "https://via.placeholder.com/1024x768/7FDBFF/FFFFFF.png?text=3"
+  }), /*#__PURE__*/React.createElement("img", {
+    alt: "Image 4",
+    src: "https://via.placeholder.com/1280x1024/39CCCC/FFFFFF.png?text=4"
+  }), /*#__PURE__*/React.createElement("img", {
+    alt: "Image 5",
+    src: "https://via.placeholder.com/640x480/3D9970/FFFFFF.png?text=5"
+  }), /*#__PURE__*/React.createElement("img", {
+    alt: "Image 6",
+    src: "https://via.placeholder.com/1000x500/2ECC40/FFFFFF.png?text=6"
+  }), /*#__PURE__*/React.createElement("img", {
+    alt: "Image 7",
+    src: "https://via.placeholder.com/700x1000/01FF70/FFFFFF.png?text=7"
+  }), /*#__PURE__*/React.createElement("img", {
+    alt: "Image 8",
+    src: "https://via.placeholder.com/800x600/FFDC00/FFFFFF.png?text=8"
+  }), /*#__PURE__*/React.createElement("img", {
+    alt: "Image 9",
+    src: "https://via.placeholder.com/200x100/FF851B/FFFFFF.png?text=9"
+  }), /*#__PURE__*/React.createElement("img", {
+    alt: "Image 10",
+    src: "https://via.placeholder.com/200x100/FF4136/FFFFFF.png?text=10"
+  }))), /*#__PURE__*/React.createElement(StorySandboxCode, null, /*#__PURE__*/React.createElement(Mosaic, null, /*#__PURE__*/React.createElement("img", {
+    alt: "Image 1",
+    src: "https://..."
+  }), /*#__PURE__*/React.createElement("img", {
+    alt: "Image 2",
+    src: "https://..."
+  }), /*#__PURE__*/React.createElement("img", {
+    alt: "Image 3",
+    src: "https://..."
+  }), /*#__PURE__*/React.createElement("img", {
+    alt: "Image 4",
+    src: "https://..."
+  }), /*#__PURE__*/React.createElement("img", {
+    alt: "Image 5",
+    src: "https://..."
+  }), /*#__PURE__*/React.createElement("img", {
+    alt: "Image 6",
+    src: "https://..."
+  }), /*#__PURE__*/React.createElement("img", {
+    alt: "Image 7",
+    src: "https://..."
+  }), /*#__PURE__*/React.createElement("img", {
+    alt: "Image 8",
+    src: "https://..."
+  }), /*#__PURE__*/React.createElement("img", {
+    alt: "Image 9",
+    src: "https://..."
+  }), /*#__PURE__*/React.createElement("img", {
+    alt: "Image 10",
+    src: "https://..."
+  })))));
+}, {
+  info: {
+    propTables: [Mosaic]
+  }
+});

package/Mosaic/README.md

@@ -0,0 +1,15 @@
+# Mosaic
+
+### Additional information
+
+<a href="https://www.npmjs.com/package/react-columned" target="_blank">https://www.npmjs.com/package/react-columned</a>
+
+### Description
+
+`Mosaic` component is used to show images or any other component in columns.
+
+### Import
+
+```js
+import { Mosaic } from "@webiny/ui/Mosaic";
+```

package/Mosaic/index.d.ts

@@ -0,0 +1 @@
+export * from "./Mosaic";

package/Mosaic/index.js

@@ -0,0 +1 @@
+export * from "./Mosaic";

package/Progress/CircularProgress.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+declare type Props = {
+    label?: React.ReactNode;
+    size: number;
+    spinnerColor: string;
+    spinnerWidth: number;
+    visible: boolean;
+    style?: React.CSSProperties;
+};
+declare const CircularProgress: {
+    ({ label, size, spinnerWidth, spinnerColor, visible, style }: Props): JSX.Element;
+    defaultProps: {
+        size: number;
+        spinnerColor: string;
+        spinnerWidth: number;
+        visible: boolean;
+    };
+};
+export default CircularProgress;

package/Progress/CircularProgress.js

@@ -0,0 +1,63 @@
+// This is just to center the spinner
+import * as React from "react";
+import styled from "@emotion/styled";
+import Spinner from "react-spinner-material";
+import { Typography } from "../Typography";
+var SpinnerWrapper = /*#__PURE__*/styled("div", {
+  target: "e1s1fi5k0",
+  label: "SpinnerWrapper"
+})({
+  width: "100%",
+  height: "100%",
+  position: "absolute",
+  background: "var(--mdc-theme-surface)",
+  opacity: 0.92,
+  top: 0,
+  left: 0,
+  zIndex: 10,
+  "& .spinner__inner-wrapper": {
+    position: "absolute",
+    top: "50%",
+    left: "50%",
+    transform: "translate(-50%, -50%)",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center"
+  }
+});
+var Label = /*#__PURE__*/styled("div", {
+  target: "e1s1fi5k1",
+  label: "Label"
+})({
+  marginTop: 15
+});
+
+var CircularProgress = function CircularProgress(_ref) {
+  var label = _ref.label,
+      size = _ref.size,
+      spinnerWidth = _ref.spinnerWidth,
+      spinnerColor = _ref.spinnerColor,
+      visible = _ref.visible,
+      style = _ref.style;
+  return /*#__PURE__*/React.createElement(SpinnerWrapper, {
+    style: style
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "spinner__inner-wrapper"
+  }, /*#__PURE__*/React.createElement(Spinner, {
+    size: size,
+    spinnerColor: spinnerColor,
+    spinnerWidth: spinnerWidth,
+    visible: visible
+  }), label && /*#__PURE__*/React.createElement(Label, null, /*#__PURE__*/React.createElement(Typography, {
+    use: "overline"
+  }, label))));
+};
+
+CircularProgress.defaultProps = {
+  size: 45,
+  spinnerColor: "#fa5723",
+  spinnerWidth: 4,
+  visible: true
+};
+export default CircularProgress;

package/Progress/README.md

@@ -0,0 +1,19 @@
+# Progress
+
+### Design
+
+<a href="https://material.io/design/components/progress-indicators.html#circular-progress-indicators" target="_blank">
+    https://material.io/design/components/progress-indicators.html#circular-progress-indicators
+</a>
+
+### Description
+
+Progress components are used in cases where user has to wait for a background process to finish.
+
+Currently only the `CircularProgress` component is available, which is ideal for forms.
+
+### Import
+
+```js
+import { CircularProgress } from "@webiny/ui/Progress";
+```

package/Progress/index.d.ts

@@ -0,0 +1 @@
+export { default as CircularProgress } from "./CircularProgress";

package/Progress/index.js

@@ -0,0 +1 @@
+export { default as CircularProgress } from "./CircularProgress";

package/Progress/svg/circularProgress.svg

@@ -0,0 +1,3 @@
+<svg class="spinner" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
+    <circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
+</svg>