@webiny/ui 0.0.0-mt-1

package/ImageUpload/styled.js

@@ -0,0 +1,122 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+var _hover, _styled;
+
+// TODO remove
+// @ts-nocheck
+import styled from "@emotion/styled";
+export var AddImageIconWrapper = /*#__PURE__*/styled("div", {
+  target: "e1engwcq0",
+  label: "AddImageIconWrapper"
+})({
+  color: "var(--mdc-theme-text-secondary-on-background)",
+  ">svg": {
+    width: "100%",
+    height: "100%",
+    maxWidth: 50,
+    maxHeight: 50,
+    display: "block",
+    opacity: 0.5,
+    margin: "0 auto"
+  }
+});
+export var AddImageWrapper = /*#__PURE__*/styled("div", {
+  target: "e1engwcq1",
+  label: "AddImageWrapper"
+})({
+  width: "100%",
+  height: "100%",
+  minHeight: 50,
+  minWidth: 50,
+  textAlign: "center",
+  backgroundColor: "var(--mdc-theme-on-background)",
+  borderRadius: 0,
+  borderBottom: "1px solid var(--mdc-theme-text-hint-on-background)",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-around",
+  flexDirection: "column",
+  transition: "color 0.2s",
+  cursor: "pointer",
+  padding: 10,
+  boxSizing: "border-box",
+  "&:hover": {
+    backgroundColor: "rgba(0,0,0, 0.5)",
+    borderBottom: "1px solid var(--mdc-theme-on-surface)"
+  }
+});
+export var AddImageWrapperRound = /*#__PURE__*/styled(AddImageWrapper, {
+  target: "e1engwcq2",
+  label: "AddImageWrapperRound"
+})({
+  margin: "auto",
+  width: "150px",
+  height: "150px",
+  borderRadius: "50%"
+});
+export var RemoveImage = /*#__PURE__*/styled("div", {
+  target: "e1engwcq3",
+  label: "RemoveImage"
+})({
+  position: "absolute",
+  cursor: "pointer",
+  top: 10,
+  right: 10,
+  display: "none",
+  color: "white",
+  opacity: 0.5,
+  "&:hover": {
+    opacity: 0.75
+  }
+});
+export var EditImage = /*#__PURE__*/styled("div", {
+  target: "e1engwcq4",
+  label: "EditImage"
+})({
+  position: "absolute",
+  cursor: "pointer",
+  top: 10,
+  left: 10,
+  display: "none",
+  color: "white",
+  opacity: 0.5,
+  "&:hover": {
+    opacity: 0.75
+  }
+});
+export var ImagePreviewWrapper = /*#__PURE__*/styled("div", {
+  target: "e1engwcq5",
+  label: "ImagePreviewWrapper"
+})((_styled = {
+  width: "100%",
+  height: "100%",
+  minHeight: 50,
+  minWidth: 50,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-around",
+  flexDirection: "column",
+  boxSizing: "border-box",
+  position: "relative"
+}, _defineProperty(_styled, AddImageWrapper, _defineProperty({
+  position: "absolute",
+  display: "none",
+  top: 0,
+  height: "100%",
+  zIndex: 1,
+  backgroundColor: "rgba(0,0,0, 0.75)"
+}, AddImageIconWrapper, {
+  top: "50%",
+  left: "50%",
+  transform: "translateY(-50%) translateX(-50%)",
+  position: "absolute",
+  color: "white"
+})), _defineProperty(_styled, "&:hover", (_hover = {}, _defineProperty(_hover, AddImageWrapper, {
+  display: "block"
+}), _defineProperty(_hover, RemoveImage, {
+  display: "block",
+  zIndex: 2
+}), _defineProperty(_hover, EditImage, {
+  display: "block",
+  zIndex: 2
+}), _hover)), _styled));

package/Input/Input.d.ts

@@ -0,0 +1,34 @@
+import * as React from "react";
+import { TextFieldProps } from "@rmwc/textfield";
+import { FormComponentProps } from "../types";
+import { ReactElement } from "react";
+export declare type InputProps = FormComponentProps & TextFieldProps & {
+    autoComplete?: string;
+    rawOnChange?: boolean;
+    autoFocus?: boolean;
+    placeholder?: string;
+    description?: string | ReactElement;
+    rows?: number;
+    maxLength?: number;
+    onBlur?: (e: React.SyntheticEvent<HTMLInputElement>) => any;
+    onKeyDown?: (e: React.SyntheticEvent<HTMLInputElement>) => any;
+    onEnter?: () => any;
+    className?: string;
+};
+/**
+ * Use Input component to store short string values, like first name, last name, e-mail etc.
+ * Additionally, with rows prop, it can also be turned into a text area, to store longer strings.
+ */
+export declare class Input extends React.Component<InputProps> {
+    static defaultProps: {
+        rawOnChange: boolean;
+        validation: {
+            isValid: any;
+            message: any;
+        };
+    };
+    static rmwcProps: string[];
+    onChange: (e: React.SyntheticEvent<HTMLInputElement>) => void;
+    onBlur: (e: React.SyntheticEvent<HTMLInputElement>) => Promise<void>;
+    render(): JSX.Element;
+}

package/Input/Input.js

@@ -0,0 +1,152 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+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 = ["autoFocus", "value", "label", "description", "placeholder", "rows", "validation", "icon", "trailingIcon", "onEnter"];
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import * as React from "react";
+import { TextField } from "@rmwc/textfield";
+import { FormElementMessage } from "../FormElementMessage";
+import pick from "lodash/pick";
+
+/**
+ * Use Input component to store short string values, like first name, last name, e-mail etc.
+ * Additionally, with rows prop, it can also be turned into a text area, to store longer strings.
+ */
+export var Input = /*#__PURE__*/function (_React$Component) {
+  _inherits(Input, _React$Component);
+
+  var _super = _createSuper(Input);
+
+  function Input() {
+    var _this;
+
+    _classCallCheck(this, Input);
+
+    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), "onChange", function (e) {
+      var _this$props = _this.props,
+          onChange = _this$props.onChange,
+          rawOnChange = _this$props.rawOnChange;
+
+      if (!onChange) {
+        return;
+      } // @ts-ignore
+
+
+      onChange(rawOnChange ? e : e.target.value);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onBlur", /*#__PURE__*/function () {
+      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(e) {
+        var _this$props2, validate, onBlur;
+
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                _this$props2 = _this.props, validate = _this$props2.validate, onBlur = _this$props2.onBlur;
+
+                if (!validate) {
+                  _context.next = 5;
+                  break;
+                }
+
+                // Since we are accessing event in an async operation, we need to persist it.
+                // See https://reactjs.org/docs/events.html#event-pooling.
+                e.persist();
+                _context.next = 5;
+                return validate();
+
+              case 5:
+                onBlur && onBlur(e);
+
+              case 6:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }));
+
+      return function (_x) {
+        return _ref.apply(this, arguments);
+      };
+    }());
+
+    return _this;
+  }
+
+  _createClass(Input, [{
+    key: "render",
+    value: function render() {
+      var _this$props3 = this.props,
+          autoFocus = _this$props3.autoFocus,
+          value = _this$props3.value,
+          label = _this$props3.label,
+          description = _this$props3.description,
+          placeholder = _this$props3.placeholder,
+          rows = _this$props3.rows,
+          validation = _this$props3.validation,
+          icon = _this$props3.icon,
+          trailingIcon = _this$props3.trailingIcon,
+          onEnter = _this$props3.onEnter,
+          props = _objectWithoutProperties(_this$props3, _excluded);
+
+      var inputValue = value;
+
+      if (value === null || typeof value === "undefined") {
+        inputValue = "";
+      }
+
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TextField, Object.assign({}, pick(props, Input.rmwcProps), {
+        onKeyDown: function onKeyDown(e) {
+          if (typeof onEnter === "function" && e.key === "Enter") {
+            onEnter();
+          }
+
+          if (typeof props.onKeyDown === "function") {
+            for (var _len2 = arguments.length, rest = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+              rest[_key2 - 1] = arguments[_key2];
+            }
+
+            return props.onKeyDown.apply(props, [e].concat(rest));
+          }
+        },
+        autoFocus: autoFocus,
+        textarea: Boolean(rows),
+        value: inputValue,
+        onChange: this.onChange,
+        onBlur: this.onBlur,
+        label: label,
+        icon: icon,
+        placeholder: !label && placeholder || undefined,
+        trailingIcon: trailingIcon,
+        rows: this.props.rows
+      })), validation.isValid === false && /*#__PURE__*/React.createElement(FormElementMessage, {
+        error: true
+      }, validation.message), validation.isValid !== false && description && /*#__PURE__*/React.createElement(FormElementMessage, null, description));
+    }
+  }]);
+
+  return Input;
+}(React.Component);
+
+_defineProperty(Input, "defaultProps", {
+  rawOnChange: false,
+  validation: {
+    isValid: null,
+    message: null
+  }
+});
+
+_defineProperty(Input, "rmwcProps", ["label", "type", "step", "disabled", "readOnly", "placeholder", "outlined", "onKeyDown", "onKeyPress", "onKeyUp", "onFocus", "rootProps", "fullwidth", "inputRef", "className", "maxLength", "characterCount"]);

package/Input/Input.stories.d.ts

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

package/Input/Input.stories.js

@@ -0,0 +1,104 @@
+import * as React from "react";
+import { storiesOf } from "@storybook/react";
+import { Story, StoryReadme, StorySandboxCode, StorySandbox, StorySandboxExample } from "@webiny/storybook-utils/Story";
+import { withKnobs, boolean } from "@storybook/addon-knobs";
+import readme from "./../Input/README.md";
+import { ReactComponent as AutoRenewIcon } from "@svgr/webpack!./svg/baseline-autorenew-24px.svg";
+import { ReactComponent as CloudDoneIcon } from "@svgr/webpack!./svg/baseline-cloud_done-24px.svg";
+import { ReactComponent as BaselineDeleteIcon } from "@svgr/webpack!./svg/baseline-delete-24px.svg";
+import { ReactComponent as BaselineDoneIcon } from "@svgr/webpack!./svg/baseline-done-24px.svg";
+import { Form } from "@webiny/form";
+import { Input } from "./Input";
+import { validation } from "@webiny/validation";
+var story = storiesOf("Components/Input", module);
+story.addDecorator(withKnobs);
+story.add("usage", function () {
+  var bindProps = {
+    name: "name",
+    validators: validation.create("required,minLength:3")
+  };
+  var disabled = boolean("Disabled", false);
+  return /*#__PURE__*/React.createElement(Story, null, /*#__PURE__*/React.createElement(StoryReadme, null, readme), /*#__PURE__*/React.createElement(StorySandbox, null, /*#__PURE__*/React.createElement(StorySandboxExample, {
+    title: "Label, description and validation"
+  }, /*#__PURE__*/React.createElement(Form, null, function (_ref) {
+    var Bind = _ref.Bind;
+    return /*#__PURE__*/React.createElement(Bind, bindProps, /*#__PURE__*/React.createElement(Input, {
+      label: "Your name",
+      disabled: disabled,
+      description: "This is your profile name"
+    }));
+  })), /*#__PURE__*/React.createElement(StorySandboxCode, null, "\n                    <Form>\n                        {({ Bind }) => (\n                            <Bind\n                                name=\"name\"\n                                validators={validation.create(\"required,minLength:3\")}>\n                                <Input label={\"Your name\"} disabled={".concat(disabled, "} description={\"This is your profile name\"}/>\n                            </Bind>\n                        )}\n                    </Form>\n                    "))), /*#__PURE__*/React.createElement(StorySandbox, null, /*#__PURE__*/React.createElement(StorySandboxExample, {
+    title: "With icon (box)"
+  }, /*#__PURE__*/React.createElement(Form, null, function (_ref2) {
+    var Bind = _ref2.Bind;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Bind, {
+      name: "phone"
+    }, /*#__PURE__*/React.createElement(Input, {
+      icon: /*#__PURE__*/React.createElement(AutoRenewIcon, null),
+      label: "Your phone number",
+      description: "Please enter a real number",
+      disabled: disabled
+    })), /*#__PURE__*/React.createElement(Bind, {
+      name: "mobile"
+    }, /*#__PURE__*/React.createElement(Input, {
+      trailingIcon: /*#__PURE__*/React.createElement(CloudDoneIcon, null),
+      label: "Your mobile number",
+      description: "An SMS will be sent to this number",
+      disabled: disabled
+    })));
+  })), /*#__PURE__*/React.createElement(StorySandboxCode, null, "\n                    <Form>\n                        {({ Bind }) => (\n                            <React.Fragment>\n                                <Bind name=\"phone\">\n                                    <Input\n                                        icon={<AutoRenewIcon />}\n                                        label={\"Your phone number\"}\n                                        description={\"Please enter a real number\"}\n                                        disabled={".concat(disabled, "}\n                                    />\n                                </Bind>\n                                <Bind name=\"mobile\">\n                                    <Input\n                                        trailingIcon={<CloudDoneIcon />}\n                                        label={\"Your mobile number\"}\n                                        description={\"An SMS will be sent to this number\"}\n                                        disabled={").concat(disabled, "}\n                                    />\n                                </Bind>\n                            </React.Fragment>\n                        )}\n                    </Form>\n                    "))), /*#__PURE__*/React.createElement(StorySandbox, null, /*#__PURE__*/React.createElement(StorySandboxExample, {
+    title: "With icon (outlined)"
+  }, /*#__PURE__*/React.createElement(Form, null, function (_ref3) {
+    var Bind = _ref3.Bind;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Bind, {
+      name: "phone"
+    }, /*#__PURE__*/React.createElement(Input, {
+      outlined: true,
+      icon: /*#__PURE__*/React.createElement(BaselineDeleteIcon, null),
+      label: "Your phone number",
+      description: "Please enter a real number",
+      disabled: disabled
+    })), /*#__PURE__*/React.createElement(Bind, {
+      name: "mobile"
+    }, /*#__PURE__*/React.createElement(Input, {
+      outlined: true,
+      trailingIcon: /*#__PURE__*/React.createElement(BaselineDoneIcon, null),
+      label: "Your mobile number",
+      description: "An SMS will be sent to this number",
+      disabled: disabled
+    })));
+  })), /*#__PURE__*/React.createElement(StorySandboxCode, null, "\n                    <Form>\n                        {({ Bind }) => (\n                            <React.Fragment>\n                                <Bind name=\"phone\">\n                                    <Input\n                                        outlined\n                                        icon={<BaselineDeleteIcon />}\n                                        label={\"Your phone number\"}\n                                        description={\"Please enter a real number\"}\n                                        disabled={".concat(disabled, "}\n                                    />\n                                </Bind>\n                                <Bind name=\"mobile\">\n                                    <Input\n                                        outlined\n                                        trailingIcon={<BaselineDoneIcon />}\n                                        label={\"Your mobile number\"}\n                                        description={\"An SMS will be sent to this number\"}\n                                        disabled={").concat(disabled, "}\n                                    />\n                                </Bind>\n                            </React.Fragment>\n                        )}\n                    </Form>\n                    "))), /*#__PURE__*/React.createElement(StorySandbox, null, /*#__PURE__*/React.createElement(StorySandboxExample, {
+    title: "Full width"
+  }, /*#__PURE__*/React.createElement(Form, null, function (_ref4) {
+    var Bind = _ref4.Bind;
+    return /*#__PURE__*/React.createElement(Bind, bindProps, /*#__PURE__*/React.createElement(Input, {
+      placeholder: "Your name",
+      fullwidth: true,
+      disabled: disabled
+    }));
+  })), /*#__PURE__*/React.createElement(StorySandboxCode, null, "\n                    <Form>\n                        {({ Bind }) => (\n                            <Bind\n                                name=\"name\"\n                                validators={validation.create(\"required,minLength:3\")}>\n                                <Input placeholder={\"Your name\"} fullwidth disabled={".concat(disabled, "}/>\n                            </Bind>\n                        )}\n                    </Form>\n                    "))), /*#__PURE__*/React.createElement(StorySandbox, null, /*#__PURE__*/React.createElement(StorySandboxExample, {
+    title: "Textarea"
+  }, /*#__PURE__*/React.createElement(Form, null, function (_ref5) {
+    var Bind = _ref5.Bind;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Bind, {
+      name: "info"
+    }, /*#__PURE__*/React.createElement(Input, {
+      rows: 6,
+      placeholder: "Tell us something...",
+      description: "Just a little bit about yourself.",
+      disabled: disabled
+    })), /*#__PURE__*/React.createElement(Bind, {
+      name: "description"
+    }, /*#__PURE__*/React.createElement(Input, {
+      fullwidth: true,
+      rows: 6,
+      placeholder: "How's the weather today?",
+      description: "We actually need to know.",
+      disabled: disabled
+    })));
+  })), /*#__PURE__*/React.createElement(StorySandboxCode, null, "\n                    <Form>\n                        {({ Bind }) => (\n                            <React.Fragment>\n                                <Bind name=\"info\">\n                                    <Input\n                                        rows={6}\n                                        placeholder={\"Tell us something...\"}\n                                        description={\"Just a little bit about yourself.\"}\n                                        disabled={".concat(disabled, "}\n                                    />\n                                </Bind>\n                                <Bind name=\"description\">\n                                    <Input\n                                        fullwidth\n                                        rows={6}\n                                        placeholder={\"How's the weather today?\"}\n                                        description={\"We actually need to know.\"}\n                                        disabled={").concat(disabled, "}\n                                    />\n                                </Bind>\n                            </React.Fragment>\n                        )}\n                    </Form>\n                    "))));
+}, {
+  info: {
+    propTables: [Input]
+  }
+});

package/Input/README.md

@@ -0,0 +1,16 @@
+# Input
+
+### Design
+
+<a href="https://material.io/design/components/text-fields.html" target="_blank">https://material.io/design/components/text-fields.html</a>
+
+### Description
+
+Use `Input` component to store short string values, like first name, last name, e-mail etc.
+Additionally, with `rows` prop, it can also be turned into a text area, to store longer strings.
+
+### Import
+
+```js
+import { Input } from "@webiny/ui/Input";
+```

package/Input/__tests__/Input.test.d.ts

@@ -0,0 +1 @@
+import "jest-dom/extend-expect";

package/Input/__tests__/Input.test.js

@@ -0,0 +1,113 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+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";
+// TODO remove
+// @ts-nocheck
+import React from "react"; // eslint-disable-next-line
+
+import { Input } from "../index";
+import "jest-dom/extend-expect";
+import { render, cleanup } from "react-testing-library";
+afterEach(cleanup);
+describe("Input tests", function () {
+  test("passes expected props to render prop", function () {
+    var _setup = setup(),
+        renderArg = _setup.renderArg;
+
+    expect(renderArg).toContainKeys(["value", "validation", "onChange", "onBlur"]);
+  });
+  test("updates value via onChange", function () {
+    var _setup2 = setup(),
+        renderArg = _setup2.renderArg;
+
+    expect(renderArg.value).toBe("init-value");
+    renderArg.onChange("new-value");
+    expect(renderArg.value).toBe("new-value");
+    renderArg.onChange("third-value");
+    expect(renderArg.value).toBe("third-value");
+  });
+});
+
+function setup() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var renderArg = {};
+  var renderProp = jest.fn(function (controllerArg) {
+    Object.assign(renderArg, controllerArg);
+    return null;
+  });
+
+  var Test = /*#__PURE__*/function (_React$Component) {
+    _inherits(Test, _React$Component);
+
+    var _super = _createSuper(Test);
+
+    function Test() {
+      var _this;
+
+      _classCallCheck(this, Test);
+
+      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", {
+        value: "init-value"
+      });
+
+      _defineProperty(_assertThisInitialized(_this), "onChange", function (value) {
+        _this.setState({
+          value: value
+        });
+      });
+
+      return _this;
+    }
+
+    _createClass(Test, [{
+      key: "render",
+      value: function render() {
+        return /*#__PURE__*/React.createElement(Input, Object.assign({}, props, {
+          value: this.state.value,
+          onChange: callAll(props.onChange, this.onChange)
+        }), renderProp);
+      }
+    }]);
+
+    return Test;
+  }(React.Component);
+
+  var utils = render( /*#__PURE__*/React.createElement(Test, null));
+  return _objectSpread({
+    renderArg: renderArg
+  }, utils);
+}
+/**
+ * This return a function that will call all the given functions with
+ * the arguments with which it's called. It does a null-check before
+ * attempting to call the functions and can take any number of functions.
+ * @param {...Function} fns the functions to call
+ * @return {Function} the function that calls all the functions
+ */
+
+
+function callAll() {
+  for (var _len2 = arguments.length, fns = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+    fns[_key2] = arguments[_key2];
+  }
+
+  return function () {
+    for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+      args[_key3] = arguments[_key3];
+    }
+
+    fns.forEach(function (fn) {
+      fn && fn.apply(void 0, args);
+    });
+  };
+}

package/Input/index.d.ts

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

package/Input/index.js

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

package/Input/svg/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/Input/svg/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/Input/svg/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/Input/svg/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/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Webiny
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/List/CollapsibleList/CollapsibleList.stories.d.ts

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

package/List/CollapsibleList/CollapsibleList.stories.js

@@ -0,0 +1,26 @@
+import React from "react";
+import { storiesOf } from "@storybook/react";
+import { Story, StoryReadme, StorySandboxCode, StorySandbox, StorySandboxExample } from "@webiny/storybook-utils/Story";
+import readme from "./README.md";
+import { withKnobs } from "@storybook/addon-knobs";
+import { CollapsibleList } from "./index";
+import { SimpleListItem } from "./../List";
+var story = storiesOf("Components/List", module);
+story.addDecorator(withKnobs);
+story.add("collapsible list", function () {
+  return /*#__PURE__*/React.createElement(Story, null, /*#__PURE__*/React.createElement(StoryReadme, null, readme), /*#__PURE__*/React.createElement(StorySandbox, null, /*#__PURE__*/React.createElement(StorySandboxExample, null, /*#__PURE__*/React.createElement(CollapsibleList, {
+    handle: /*#__PURE__*/React.createElement(SimpleListItem, {
+      text: "Fruits"
+    })
+  }, /*#__PURE__*/React.createElement(SimpleListItem, {
+    text: "Bananas"
+  }), /*#__PURE__*/React.createElement(SimpleListItem, {
+    text: "Grapes"
+  }), /*#__PURE__*/React.createElement(SimpleListItem, {
+    text: "Oranges"
+  }))), /*#__PURE__*/React.createElement(StorySandboxCode, null, "\n                         <CollapsibleList handle={<SimpleListItem text=\"Fruits\" />}>\n                            <SimpleListItem text=\"Bananas\" />\n                            <SimpleListItem text=\"Grapes\" />\n                            <SimpleListItem text=\"Oranges\" />\n                        </CollapsibleList>\n                      ")));
+}, {
+  info: {
+    propTables: [CollapsibleList, SimpleListItem]
+  }
+});

package/List/CollapsibleList/README.md

@@ -0,0 +1,11 @@
+# CollapsibleList
+
+### Description
+
+Use `CollapsibleList` to display a list of items that are made visible when you click the assigned `handle` element.
+
+### Import
+
+```js
+import { CollapsibleList, SimpleListItem } from "@webiny/ui/List";
+```