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

package/Input/Input.js

@@ -0,0 +1,144 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Input = void 0;
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _textfield = require("@rmwc/textfield");
+
+var _FormElementMessage = require("../FormElementMessage");
+
+var _pick = _interopRequireDefault(require("lodash/pick"));
+
+var _emotion = require("emotion");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _excluded = ["autoFocus", "value", "label", "description", "placeholder", "rows", "validation", "icon", "trailingIcon", "onEnter"];
+
+/**
+ * fix label position when autofilled
+ * @type {string}
+ */
+var webinyInputStyles = /*#__PURE__*/(0, _emotion.css)(".mdc-text-field__input:-webkit-autofill + .mdc-floating-label{transform:translateY(-106%) scale(0.75);}label:webinyInputStyles;");
+/**
+ * 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.
+ */
+// IconProps directly passed to RMWC
+
+var rmwcProps = ["label", "type", "step", "disabled", "readOnly", "placeholder", "outlined", "onKeyDown", "onKeyPress", "onKeyUp", "onFocus", "rootProps", "fullwidth", "inputRef", "className", "maxLength", "characterCount"];
+
+var Input = function Input(props) {
+  var onChange = (0, _react.useCallback)(function (e) {
+    var onChange = props.onChange,
+        rawOnChange = props.rawOnChange;
+
+    if (!onChange) {
+      return;
+    } // @ts-ignore
+
+
+    onChange(rawOnChange ? e : e.target.value);
+  }, [props.onChange, props.rawOnChange]);
+  var onBlur = (0, _react.useCallback)( /*#__PURE__*/function () {
+    var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee(e) {
+      var validate, onBlur;
+      return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              validate = props.validate, onBlur = props.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);
+    };
+  }(), [props.validate, props.onBlur]);
+  var autoFocus = props.autoFocus,
+      value = props.value,
+      label = props.label,
+      description = props.description,
+      placeholder = props.placeholder,
+      rows = props.rows,
+      validation = props.validation,
+      icon = props.icon,
+      trailingIcon = props.trailingIcon,
+      onEnter = props.onEnter,
+      rest = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var inputValue = value;
+
+  if (value === null || typeof value === "undefined") {
+    inputValue = "";
+  }
+
+  var _ref2 = validation || {},
+      validationIsValid = _ref2.isValid,
+      validationMessage = _ref2.message;
+
+  var inputOnKeyDown = (0, _react.useCallback)(function (e) {
+    if (typeof onEnter === "function" && e.key === "Enter") {
+      onEnter();
+    }
+
+    if (typeof rest.onKeyDown === "function") {
+      return rest.onKeyDown(e);
+    }
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_textfield.TextField, Object.assign({}, (0, _pick.default)(rest, rmwcProps), {
+    onKeyDown: inputOnKeyDown,
+    autoFocus: autoFocus,
+    textarea: Boolean(rows),
+    value: inputValue,
+    onChange: onChange,
+    onBlur: onBlur,
+    label: label,
+    icon: icon,
+    placeholder: !label && placeholder || undefined,
+    trailingIcon: trailingIcon,
+    rows: rows,
+    className: (0, _classnames.default)("webiny-ui-input", webinyInputStyles),
+    "data-testid": props["data-testid"]
+  })), validationIsValid === false && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, {
+    error: true
+  }, validationMessage), validationIsValid !== false && description && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, null, description));
+};
+
+exports.Input = Input;
+Input.defaultProps = {
+  rawOnChange: false
+};

package/Input/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["webinyInputStyles","css","rmwcProps","Input","props","onChange","useCallback","e","rawOnChange","target","value","onBlur","validate","persist","autoFocus","label","description","placeholder","rows","validation","icon","trailingIcon","onEnter","rest","inputValue","validationIsValid","isValid","validationMessage","message","inputOnKeyDown","key","onKeyDown","pick","Boolean","undefined","classNames","defaultProps"],"sources":["Input.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { TextField, TextFieldProps } from \"@rmwc/textfield\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\nimport pick from \"lodash/pick\";\nimport { FormComponentProps } from \"~/types\";\nimport { ReactElement } from \"react\";\nimport { css } from \"emotion\";\nimport classNames from \"classnames\";\n\nexport type InputProps<TValue = any> = FormComponentProps<TValue> &\n    TextFieldProps & {\n        // Should this input be filled with browser values\n        autoComplete?: string;\n\n        // If true, will pass native `event` to the `onChange` callback\n        rawOnChange?: boolean;\n\n        // Auto-focus input\n        autoFocus?: boolean;\n\n        // Input placeholder\n        placeholder?: string;\n\n        // Description beneath the input.\n        description?: string | ReactElement;\n\n        // Converts input into a text area with given number of rows.\n        rows?: number;\n\n        maxLength?: number;\n\n        // A callback that is executed when input focus is lost.\n        onBlur?: (e: React.SyntheticEvent<HTMLInputElement>) => any;\n\n        onKeyDown?: (e: React.SyntheticEvent<HTMLInputElement>) => any;\n\n        // A callback that gets triggered when the user presses the \"Enter\" key.\n        onEnter?: () => any;\n\n        // CSS class name\n        className?: string;\n\n        // For testing purposes.\n        \"data-testid\"?: string;\n    };\n\n/**\n * fix label position when autofilled\n * @type {string}\n */\nconst webinyInputStyles = css`\n    .mdc-text-field__input:-webkit-autofill + .mdc-floating-label {\n        transform: translateY(-106%) scale(0.75);\n    }\n`;\n\n/**\n * Use Input component to store short string values, like first name, last name, e-mail etc.\n * Additionally, with rows prop, it can also be turned into a text area, to store longer strings.\n */\n\n// IconProps directly passed to RMWC\nconst rmwcProps = [\n    \"label\",\n    \"type\",\n    \"step\",\n    \"disabled\",\n    \"readOnly\",\n    \"placeholder\",\n    \"outlined\",\n    \"onKeyDown\",\n    \"onKeyPress\",\n    \"onKeyUp\",\n    \"onFocus\",\n    \"rootProps\",\n    \"fullwidth\",\n    \"inputRef\",\n    \"className\",\n    \"maxLength\",\n    \"characterCount\"\n];\n\nexport const Input: React.FC<InputProps> = props => {\n    const onChange = useCallback(\n        (e: React.SyntheticEvent<HTMLInputElement>) => {\n            const { onChange, rawOnChange } = props;\n            if (!onChange) {\n                return;\n            }\n\n            // @ts-ignore\n            onChange(rawOnChange ? e : e.target.value);\n        },\n        [props.onChange, props.rawOnChange]\n    );\n\n    const onBlur = useCallback(\n        async (e: React.SyntheticEvent<HTMLInputElement>) => {\n            const { validate, onBlur } = props;\n            if (validate) {\n                // Since we are accessing event in an async operation, we need to persist it.\n                // See https://reactjs.org/docs/events.html#event-pooling.\n                e.persist();\n                await validate();\n            }\n            onBlur && onBlur(e);\n        },\n        [props.validate, props.onBlur]\n    );\n\n    const {\n        autoFocus,\n        value,\n        label,\n        description,\n        placeholder,\n        rows,\n        validation,\n        icon,\n        trailingIcon,\n        onEnter,\n        ...rest\n    } = props;\n\n    let inputValue = value;\n    if (value === null || typeof value === \"undefined\") {\n        inputValue = \"\";\n    }\n\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n\n    const inputOnKeyDown = useCallback(e => {\n        if (typeof onEnter === \"function\" && e.key === \"Enter\") {\n            onEnter();\n        }\n\n        if (typeof rest.onKeyDown === \"function\") {\n            return rest.onKeyDown(e);\n        }\n    }, []);\n\n    return (\n        <React.Fragment>\n            <TextField\n                {...pick(rest, rmwcProps)}\n                onKeyDown={inputOnKeyDown}\n                autoFocus={autoFocus}\n                textarea={Boolean(rows)}\n                value={inputValue}\n                onChange={onChange}\n                onBlur={onBlur}\n                label={label}\n                icon={icon}\n                placeholder={(!label && placeholder) || undefined}\n                trailingIcon={trailingIcon}\n                rows={rows}\n                className={classNames(\"webiny-ui-input\", webinyInputStyles)}\n                data-testid={props[\"data-testid\"]}\n            />\n\n            {validationIsValid === false && (\n                <FormElementMessage error>{validationMessage}</FormElementMessage>\n            )}\n            {validationIsValid !== false && description && (\n                <FormElementMessage>{description}</FormElementMessage>\n            )}\n        </React.Fragment>\n    );\n};\n\nInput.defaultProps = { rawOnChange: false };\n"],"mappings":"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"}

package/Input/Input.stories.d.ts

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

package/Input/Input.stories.js

@@ -0,0 +1,120 @@
+"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 _addonKnobs = require("@storybook/addon-knobs");
+
+var _README = _interopRequireDefault(require("./../Input/README.md"));
+
+var _baselineAutorenew24px = require("./svg/baseline-autorenew-24px.svg");
+
+var _baselineCloud_done24px = require("./svg/baseline-cloud_done-24px.svg");
+
+var _baselineDelete24px = require("./svg/baseline-delete-24px.svg");
+
+var _baselineDone24px = require("./svg/baseline-done-24px.svg");
+
+var _form = require("@webiny/form");
+
+var _Input = require("./Input");
+
+var _validation = require("@webiny/validation");
+
+var story = (0, _react2.storiesOf)("Components/Input", module);
+story.addDecorator(_addonKnobs.withKnobs);
+story.add("usage", function () {
+  var bindProps = {
+    name: "name",
+    validators: _validation.validation.create("required,minLength:3")
+  };
+  var disabled = (0, _addonKnobs.boolean)("Disabled", false);
+  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: "Label, description and validation"
+  }, /*#__PURE__*/_react.default.createElement(_form.Form, null, function (_ref) {
+    var Bind = _ref.Bind;
+    return /*#__PURE__*/_react.default.createElement(Bind, bindProps, /*#__PURE__*/_react.default.createElement(_Input.Input, {
+      label: "Your name",
+      disabled: disabled,
+      description: "This is your profile name"
+    }));
+  })), /*#__PURE__*/_react.default.createElement(_Story.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.default.createElement(_Story.StorySandbox, null, /*#__PURE__*/_react.default.createElement(_Story.StorySandboxExample, {
+    title: "With icon (box)"
+  }, /*#__PURE__*/_react.default.createElement(_form.Form, null, function (_ref2) {
+    var Bind = _ref2.Bind;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Bind, {
+      name: "phone"
+    }, /*#__PURE__*/_react.default.createElement(_Input.Input, {
+      icon: /*#__PURE__*/_react.default.createElement(_baselineAutorenew24px.ReactComponent, null),
+      label: "Your phone number",
+      description: "Please enter a real number",
+      disabled: disabled
+    })), /*#__PURE__*/_react.default.createElement(Bind, {
+      name: "mobile"
+    }, /*#__PURE__*/_react.default.createElement(_Input.Input, {
+      trailingIcon: /*#__PURE__*/_react.default.createElement(_baselineCloud_done24px.ReactComponent, null),
+      label: "Your mobile number",
+      description: "An SMS will be sent to this number",
+      disabled: disabled
+    })));
+  })), /*#__PURE__*/_react.default.createElement(_Story.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.default.createElement(_Story.StorySandbox, null, /*#__PURE__*/_react.default.createElement(_Story.StorySandboxExample, {
+    title: "With icon (outlined)"
+  }, /*#__PURE__*/_react.default.createElement(_form.Form, null, function (_ref3) {
+    var Bind = _ref3.Bind;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Bind, {
+      name: "phone"
+    }, /*#__PURE__*/_react.default.createElement(_Input.Input, {
+      outlined: true,
+      icon: /*#__PURE__*/_react.default.createElement(_baselineDelete24px.ReactComponent, null),
+      label: "Your phone number",
+      description: "Please enter a real number",
+      disabled: disabled
+    })), /*#__PURE__*/_react.default.createElement(Bind, {
+      name: "mobile"
+    }, /*#__PURE__*/_react.default.createElement(_Input.Input, {
+      outlined: true,
+      trailingIcon: /*#__PURE__*/_react.default.createElement(_baselineDone24px.ReactComponent, null),
+      label: "Your mobile number",
+      description: "An SMS will be sent to this number",
+      disabled: disabled
+    })));
+  })), /*#__PURE__*/_react.default.createElement(_Story.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.default.createElement(_Story.StorySandbox, null, /*#__PURE__*/_react.default.createElement(_Story.StorySandboxExample, {
+    title: "Full width"
+  }, /*#__PURE__*/_react.default.createElement(_form.Form, null, function (_ref4) {
+    var Bind = _ref4.Bind;
+    return /*#__PURE__*/_react.default.createElement(Bind, bindProps, /*#__PURE__*/_react.default.createElement(_Input.Input, {
+      placeholder: "Your name",
+      fullwidth: true,
+      disabled: disabled
+    }));
+  })), /*#__PURE__*/_react.default.createElement(_Story.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.default.createElement(_Story.StorySandbox, null, /*#__PURE__*/_react.default.createElement(_Story.StorySandboxExample, {
+    title: "Textarea"
+  }, /*#__PURE__*/_react.default.createElement(_form.Form, null, function (_ref5) {
+    var Bind = _ref5.Bind;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Bind, {
+      name: "info"
+    }, /*#__PURE__*/_react.default.createElement(_Input.Input, {
+      rows: 6,
+      placeholder: "Tell us something...",
+      description: "Just a little bit about yourself.",
+      disabled: disabled
+    })), /*#__PURE__*/_react.default.createElement(Bind, {
+      name: "description"
+    }, /*#__PURE__*/_react.default.createElement(_Input.Input, {
+      fullwidth: true,
+      rows: 6,
+      placeholder: "How's the weather today?",
+      description: "We actually need to know.",
+      disabled: disabled
+    })));
+  })), /*#__PURE__*/_react.default.createElement(_Story.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.Input]
+  }
+});

package/Input/Input.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["story","storiesOf","module","addDecorator","withKnobs","add","bindProps","name","validators","validation","create","disabled","boolean","readme","Bind","info","propTables","Input"],"sources":["Input.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 { withKnobs, boolean } from \"@storybook/addon-knobs\";\nimport readme from \"./../Input/README.md\";\nimport { ReactComponent as AutoRenewIcon } from \"./svg/baseline-autorenew-24px.svg\";\nimport { ReactComponent as CloudDoneIcon } from \"./svg/baseline-cloud_done-24px.svg\";\nimport { ReactComponent as BaselineDeleteIcon } from \"./svg/baseline-delete-24px.svg\";\nimport { ReactComponent as BaselineDoneIcon } from \"./svg/baseline-done-24px.svg\";\n\nimport { Form } from \"@webiny/form\";\nimport { Input } from \"./Input\";\nimport { validation } from \"@webiny/validation\";\n\nconst story = storiesOf(\"Components/Input\", module);\nstory.addDecorator(withKnobs);\n\nstory.add(\n    \"usage\",\n    () => {\n        const bindProps = {\n            name: \"name\",\n            validators: validation.create(\"required,minLength:3\")\n        };\n\n        const disabled = boolean(\"Disabled\", false);\n\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox>\n                    <StorySandboxExample title={\"Label, description and validation\"}>\n                        <Form>\n                            {({ Bind }) => (\n                                <Bind {...bindProps}>\n                                    <Input\n                                        label={\"Your name\"}\n                                        disabled={disabled}\n                                        description={\"This is your profile name\"}\n                                    />\n                                </Bind>\n                            )}\n                        </Form>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                    <Form>\n                        {({ Bind }) => (\n                            <Bind\n                                name=\"name\"\n                                validators={validation.create(\"required,minLength:3\")}>\n                                <Input label={\"Your name\"} disabled={${disabled}} description={\"This is your profile name\"}/>\n                            </Bind>\n                        )}\n                    </Form>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n                <StorySandbox>\n                    <StorySandboxExample title={\"With icon (box)\"}>\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={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={disabled}\n                                        />\n                                    </Bind>\n                                </React.Fragment>\n                            )}\n                        </Form>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\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={${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={${disabled}}\n                                    />\n                                </Bind>\n                            </React.Fragment>\n                        )}\n                    </Form>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n                <StorySandbox>\n                    <StorySandboxExample title={\"With icon (outlined)\"}>\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={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={disabled}\n                                        />\n                                    </Bind>\n                                </React.Fragment>\n                            )}\n                        </Form>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\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={${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={${disabled}}\n                                    />\n                                </Bind>\n                            </React.Fragment>\n                        )}\n                    </Form>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n                <StorySandbox>\n                    <StorySandboxExample title={\"Full width\"}>\n                        <Form>\n                            {({ Bind }) => (\n                                <Bind {...bindProps}>\n                                    <Input\n                                        placeholder={\"Your name\"}\n                                        fullwidth\n                                        disabled={disabled}\n                                    />\n                                </Bind>\n                            )}\n                        </Form>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                    <Form>\n                        {({ Bind }) => (\n                            <Bind\n                                name=\"name\"\n                                validators={validation.create(\"required,minLength:3\")}>\n                                <Input placeholder={\"Your name\"} fullwidth disabled={${disabled}}/>\n                            </Bind>\n                        )}\n                    </Form>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n                <StorySandbox>\n                    <StorySandboxExample title={\"Textarea\"}>\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={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={disabled}\n                                        />\n                                    </Bind>\n                                </React.Fragment>\n                            )}\n                        </Form>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\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={${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={${disabled}}\n                                    />\n                                </Bind>\n                            </React.Fragment>\n                        )}\n                    </Form>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [Input] } }\n);\n"],"mappings":"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"}

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,130 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _index = require("../index");
+
+require("jest-dom/extend-expect");
+
+var _react2 = require("@testing-library/react");
+
+afterEach(_react2.cleanup);
+
+function setup() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var renderArg = {
+    // eslint-disable-next-line
+    onChange: function onChange(_) {},
+    value: null
+  };
+  var renderProp = jest.fn(function (controllerArg) {
+    Object.assign(renderArg, controllerArg);
+    return null;
+  });
+  var onChange = props.onChange ? props.onChange : function () {
+    return void 0;
+  };
+
+  var Test = /*#__PURE__*/function (_React$Component) {
+    (0, _inherits2.default)(Test, _React$Component);
+
+    var _super = (0, _createSuper2.default)(Test);
+
+    function Test() {
+      var _this;
+
+      (0, _classCallCheck2.default)(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));
+      (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
+        value: "init-value"
+      });
+      (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onChange", function (value) {
+        _this.setState({
+          value: value
+        });
+      });
+      return _this;
+    }
+
+    (0, _createClass2.default)(Test, [{
+      key: "render",
+      value: function render() {
+        return /*#__PURE__*/_react.default.createElement(_index.Input, Object.assign({}, props, {
+          value: this.state.value,
+          onChange: callAll(onChange, this.onChange)
+        }), renderProp);
+      }
+    }]);
+    return Test;
+  }(_react.default.Component);
+
+  var utils = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(Test, null));
+  return (0, _objectSpread2.default)({
+    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);
+    });
+  };
+}
+
+describe("Input tests", function () {
+  test("passes expected props to render prop", function () {
+    var _setup = setup(),
+        renderArg = _setup.renderArg; // @ts-ignore
+
+
+    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");
+  });
+});

package/Input/__tests__/Input.test.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["afterEach","cleanup","setup","props","renderArg","onChange","_","value","renderProp","jest","fn","controllerArg","Object","assign","Test","setState","state","callAll","React","Component","utils","render","fns","args","forEach","describe","test","expect","toContainKeys","toBe"],"sources":["Input.test.tsx"],"sourcesContent":["import React from \"react\";\nimport { Input } from \"../index\";\nimport \"jest-dom/extend-expect\";\nimport { render, cleanup } from \"@testing-library/react\";\n\nafterEach(cleanup);\n\ninterface SetupProps {\n    onChange?: () => void;\n}\nfunction setup(props: SetupProps = {}) {\n    const renderArg = {\n        // eslint-disable-next-line\n        onChange: (_: string) => {},\n        value: null\n    };\n    const renderProp = jest.fn(controllerArg => {\n        Object.assign(renderArg, controllerArg);\n        return null;\n    });\n\n    const onChange = props.onChange\n        ? props.onChange\n        : () => {\n              return void 0;\n          };\n\n    class Test extends React.Component {\n        public override state = { value: \"init-value\" };\n\n        onChange = (value: string) => {\n            this.setState({ value });\n        };\n\n        public override render() {\n            return (\n                <Input\n                    {...props}\n                    value={this.state.value}\n                    onChange={callAll(onChange, this.onChange)}\n                >\n                    {renderProp}\n                </Input>\n            );\n        }\n    }\n\n    const utils = render(<Test />);\n\n    return { renderArg, ...utils };\n}\n\n/**\n * This return a function that will call all the given functions with\n * the arguments with which it's called. It does a null-check before\n * attempting to call the functions and can take any number of functions.\n * @param {...Function} fns the functions to call\n * @return {Function} the function that calls all the functions\n */\nfunction callAll(...fns: Function[]) {\n    return (...args: any) => {\n        fns.forEach(fn => {\n            fn && fn(...args);\n        });\n    };\n}\n\ndescribe(\"Input tests\", () => {\n    test(\"passes expected props to render prop\", () => {\n        const { renderArg } = setup();\n\n        // @ts-ignore\n        expect(renderArg).toContainKeys([\"value\", \"validation\", \"onChange\", \"onBlur\"]);\n    });\n\n    test(\"updates value via onChange\", () => {\n        const { renderArg } = setup();\n        expect(renderArg.value).toBe(\"init-value\");\n        renderArg.onChange(\"new-value\");\n        expect(renderArg.value).toBe(\"new-value\");\n        renderArg.onChange(\"third-value\");\n        expect(renderArg.value).toBe(\"third-value\");\n    });\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEAA,SAAS,CAACC,eAAD,CAAT;;AAKA,SAASC,KAAT,GAAuC;EAAA,IAAxBC,KAAwB,uEAAJ,EAAI;EACnC,IAAMC,SAAS,GAAG;IACd;IACAC,QAAQ,EAAE,kBAACC,CAAD,EAAe,CAAE,CAFb;IAGdC,KAAK,EAAE;EAHO,CAAlB;EAKA,IAAMC,UAAU,GAAGC,IAAI,CAACC,EAAL,CAAQ,UAAAC,aAAa,EAAI;IACxCC,MAAM,CAACC,MAAP,CAAcT,SAAd,EAAyBO,aAAzB;IACA,OAAO,IAAP;EACH,CAHkB,CAAnB;EAKA,IAAMN,QAAQ,GAAGF,KAAK,CAACE,QAAN,GACXF,KAAK,CAACE,QADK,GAEX,YAAM;IACF,OAAO,KAAK,CAAZ;EACH,CAJP;;EAXmC,IAiB7BS,IAjB6B;IAAA;;IAAA;;IAAA;MAAA;;MAAA;;MAAA;QAAA;MAAA;;MAAA;MAAA,oFAkBP;QAAEP,KAAK,EAAE;MAAT,CAlBO;MAAA,uFAoBpB,UAACA,KAAD,EAAmB;QAC1B,MAAKQ,QAAL,CAAc;UAAER,KAAK,EAALA;QAAF,CAAd;MACH,CAtB8B;MAAA;IAAA;;IAAA;MAAA;MAAA,OAwB/B,kBAAyB;QACrB,oBACI,6BAAC,YAAD,oBACQJ,KADR;UAEI,KAAK,EAAE,KAAKa,KAAL,CAAWT,KAFtB;UAGI,QAAQ,EAAEU,OAAO,CAACZ,QAAD,EAAW,KAAKA,QAAhB;QAHrB,IAKKG,UALL,CADJ;MASH;IAlC8B;IAAA;EAAA,EAiBhBU,cAAA,CAAMC,SAjBU;;EAqCnC,IAAMC,KAAK,GAAG,IAAAC,cAAA,gBAAO,6BAAC,IAAD,OAAP,CAAd;EAEA;IAASjB,SAAS,EAATA;EAAT,GAAuBgB,KAAvB;AACH;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,SAASH,OAAT,GAAqC;EAAA,mCAAjBK,GAAiB;IAAjBA,GAAiB;EAAA;;EACjC,OAAO,YAAkB;IAAA,mCAAdC,IAAc;MAAdA,IAAc;IAAA;;IACrBD,GAAG,CAACE,OAAJ,CAAY,UAAAd,EAAE,EAAI;MACdA,EAAE,IAAIA,EAAE,MAAF,SAAMa,IAAN,CAAN;IACH,CAFD;EAGH,CAJD;AAKH;;AAEDE,QAAQ,CAAC,aAAD,EAAgB,YAAM;EAC1BC,IAAI,CAAC,sCAAD,EAAyC,YAAM;IAC/C,aAAsBxB,KAAK,EAA3B;IAAA,IAAQE,SAAR,UAAQA,SAAR,CAD+C,CAG/C;;;IACAuB,MAAM,CAACvB,SAAD,CAAN,CAAkBwB,aAAlB,CAAgC,CAAC,OAAD,EAAU,YAAV,EAAwB,UAAxB,EAAoC,QAApC,CAAhC;EACH,CALG,CAAJ;EAOAF,IAAI,CAAC,4BAAD,EAA+B,YAAM;IACrC,cAAsBxB,KAAK,EAA3B;IAAA,IAAQE,SAAR,WAAQA,SAAR;;IACAuB,MAAM,CAACvB,SAAS,CAACG,KAAX,CAAN,CAAwBsB,IAAxB,CAA6B,YAA7B;IACAzB,SAAS,CAACC,QAAV,CAAmB,WAAnB;IACAsB,MAAM,CAACvB,SAAS,CAACG,KAAX,CAAN,CAAwBsB,IAAxB,CAA6B,WAA7B;IACAzB,SAAS,CAACC,QAAV,CAAmB,aAAnB;IACAsB,MAAM,CAACvB,SAAS,CAACG,KAAX,CAAN,CAAwBsB,IAAxB,CAA6B,aAA7B;EACH,CAPG,CAAJ;AAQH,CAhBO,CAAR"}

package/Input/index.d.ts

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

package/Input/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _Input = require("./Input");
+
+Object.keys(_Input).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Input[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Input[key];
+    }
+  });
+});

package/Input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Input\";\n"],"mappings":";;;;;;AAAA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

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,37 @@
+"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("./README.md"));
+
+var _addonKnobs = require("@storybook/addon-knobs");
+
+var _index = require("./index");
+
+var _List = require("./../List");
+
+var story = (0, _react2.storiesOf)("Components/List", module);
+story.addDecorator(_addonKnobs.withKnobs);
+story.add("collapsible 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, null, /*#__PURE__*/_react.default.createElement(_index.CollapsibleList, {
+    handle: /*#__PURE__*/_react.default.createElement(_List.SimpleListItem, {
+      text: "Fruits"
+    })
+  }, /*#__PURE__*/_react.default.createElement(_List.SimpleListItem, {
+    text: "Bananas"
+  }), /*#__PURE__*/_react.default.createElement(_List.SimpleListItem, {
+    text: "Grapes"
+  }), /*#__PURE__*/_react.default.createElement(_List.SimpleListItem, {
+    text: "Oranges"
+  }))), /*#__PURE__*/_react.default.createElement(_Story.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: [_index.CollapsibleList, _List.SimpleListItem]
+  }
+});

package/List/CollapsibleList/CollapsibleList.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["story","storiesOf","module","addDecorator","withKnobs","add","readme","info","propTables","CollapsibleList","SimpleListItem"],"sources":["CollapsibleList.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport {\n    Story,\n    StoryReadme,\n    StorySandboxCode,\n    StorySandbox,\n    StorySandboxExample\n} from \"@webiny/storybook-utils/Story\";\nimport readme from \"./README.md\";\nimport { withKnobs } from \"@storybook/addon-knobs\";\n\nimport { CollapsibleList } from \"./index\";\nimport { SimpleListItem } from \"./../List\";\n\nconst story = storiesOf(\"Components/List\", module);\nstory.addDecorator(withKnobs);\n\nstory.add(\n    \"collapsible list\",\n    () => {\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n\n                <StorySandbox>\n                    <StorySandboxExample>\n                        <CollapsibleList handle={<SimpleListItem text=\"Fruits\" />}>\n                            <SimpleListItem text=\"Bananas\" />\n                            <SimpleListItem text=\"Grapes\" />\n                            <SimpleListItem text=\"Oranges\" />\n                        </CollapsibleList>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                         <CollapsibleList handle={<SimpleListItem text=\"Fruits\" />}>\n                            <SimpleListItem text=\"Bananas\" />\n                            <SimpleListItem text=\"Grapes\" />\n                            <SimpleListItem text=\"Oranges\" />\n                        </CollapsibleList>\n                      `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    {\n        info: {\n            propTables: [CollapsibleList, SimpleListItem]\n        }\n    }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AAOA;;AACA;;AAEA;;AACA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,iBAAV,EAA6BC,MAA7B,CAAd;AACAF,KAAK,CAACG,YAAN,CAAmBC,qBAAnB;AAEAJ,KAAK,CAACK,GAAN,CACI,kBADJ,EAEI,YAAM;EACF,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAGI,6BAAC,mBAAD,qBACI,6BAAC,0BAAD,qBACI,6BAAC,sBAAD;IAAiB,MAAM,eAAE,6BAAC,oBAAD;MAAgB,IAAI,EAAC;IAArB;EAAzB,gBACI,6BAAC,oBAAD;IAAgB,IAAI,EAAC;EAArB,EADJ,eAEI,6BAAC,oBAAD;IAAgB,IAAI,EAAC;EAArB,EAFJ,eAGI,6BAAC,oBAAD;IAAgB,IAAI,EAAC;EAArB,EAHJ,CADJ,CADJ,eAQI,6BAAC,uBAAD,yWARJ,CAHJ,CADJ;AAwBH,CA3BL,EA4BI;EACIC,IAAI,EAAE;IACFC,UAAU,EAAE,CAACC,sBAAD,EAAkBC,oBAAlB;EADV;AADV,CA5BJ"}

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";
+```