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

package/Elevation/Elevation.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["story","storiesOf","module","addDecorator","withKnobs","add","transition","boolean","z","select","Array","keys","style","padding","backgroundColor","readme","info","propTables","Elevation"],"sources":["Elevation.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 \"./../Elevation/README.md\";\nimport { withKnobs, boolean, select } from \"@storybook/addon-knobs\";\nimport { Elevation } from \"./Elevation\";\n\nconst story = storiesOf(\"Components/Elevation\", module);\nstory.addDecorator(withKnobs);\n\nstory.add(\n    \"usage\",\n    () => {\n        const transition = boolean(\"Transition\", true);\n        const z = select(\"Z (elevation height)\", [...Array(25).keys()], 1);\n\n        const style = {\n            padding: 20,\n            backgroundColor: \"white\"\n        };\n\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox title={\"An area with applied elevation\"}>\n                    <StorySandboxExample>\n                        <Elevation z={z} transition={transition}>\n                            <div style={style}>This is an elevated content.</div>\n                        </Elevation>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                        <Elevation z={${z}} transition={${transition}}>\n                            <div>This is an elevated content.</div>\n                        </Elevation>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [Elevation] } }\n);\n"],"mappings":";;;;;;AAAA;;AACA;;AACA;;AAOA;;AACA;;AACA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,sBAAV,EAAkCC,MAAlC,CAAd;AACAF,KAAK,CAACG,YAAN,CAAmBC,qBAAnB;AAEAJ,KAAK,CAACK,GAAN,CACI,OADJ,EAEI,YAAM;EACF,IAAMC,UAAU,GAAG,IAAAC,mBAAA,EAAQ,YAAR,EAAsB,IAAtB,CAAnB;EACA,IAAMC,CAAC,GAAG,IAAAC,kBAAA,EAAO,sBAAP,mCAAmCC,KAAK,CAAC,EAAD,CAAL,CAAUC,IAAV,EAAnC,GAAsD,CAAtD,CAAV;EAEA,IAAMC,KAAK,GAAG;IACVC,OAAO,EAAE,EADC;IAEVC,eAAe,EAAE;EAFP,CAAd;EAKA,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,6BAAC,0BAAD,qBACI,6BAAC,oBAAD;IAAW,CAAC,EAAEP,CAAd;IAAiB,UAAU,EAAEF;EAA7B,gBACI;IAAK,KAAK,EAAEM;EAAZ,kCADJ,CADJ,CADJ,eAMI,6BAAC,uBAAD,0DAEoBJ,CAFpB,2BAEsCF,UAFtC,yIANJ,CAFJ,CADJ;AAmBH,CA9BL,EA+BI;EAAEU,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,oBAAD;EAAd;AAAR,CA/BJ"}

package/Elevation/README.md

@@ -0,0 +1,15 @@
+# Elevation
+
+### Design
+
+<a href="https://material.io/develop/web/components/elevation/" target="_blank">https://material.io/develop/web/components/elevation/</a>
+
+### Description
+
+`Elevation` component visually raises any content by applying shadow.
+
+### Import
+
+```js
+import { Elevation } from "@webiny/ui/Elevation";
+```

package/Elevation/index.d.ts

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

package/Elevation/index.js

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

package/Elevation/index.js.map

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

package/FormElementMessage/FormElementMessage.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+declare type Props = {
+    children: React.ReactNode;
+    className?: string;
+    error?: boolean;
+};
+declare const FormElementMessage: (props: Props) => JSX.Element;
+export { FormElementMessage };

package/FormElementMessage/FormElementMessage.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FormElementMessage = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var FormElementMessage = function FormElementMessage(props) {
+  var classNames = (0, _classnames.default)("mdc-text-field-helper-text mdc-text-field-helper-text--persistent", props.className, {
+    "mdc-text-field-helper-text--error": props.error
+  });
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: classNames
+  }, props.children);
+};
+
+exports.FormElementMessage = FormElementMessage;

package/FormElementMessage/FormElementMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["FormElementMessage","props","classNames","classnames","className","error","children"],"sources":["FormElementMessage.tsx"],"sourcesContent":["import React from \"react\";\nimport classnames from \"classnames\";\n\ntype Props = {\n    // message to display\n    children: React.ReactNode;\n\n    // optional class name\n    className?: string;\n\n    // is it an error message we're displaying\n    error?: boolean;\n};\n\nconst FormElementMessage = (props: Props) => {\n    const classNames = classnames(\n        \"mdc-text-field-helper-text mdc-text-field-helper-text--persistent\",\n        props.className,\n        { \"mdc-text-field-helper-text--error\": props.error }\n    );\n\n    return <div className={classNames}>{props.children}</div>;\n};\n\nexport { FormElementMessage };\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AAaA,IAAMA,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,KAAD,EAAkB;EACzC,IAAMC,UAAU,GAAG,IAAAC,mBAAA,EACf,mEADe,EAEfF,KAAK,CAACG,SAFS,EAGf;IAAE,qCAAqCH,KAAK,CAACI;EAA7C,CAHe,CAAnB;EAMA,oBAAO;IAAK,SAAS,EAAEH;EAAhB,GAA6BD,KAAK,CAACK,QAAnC,CAAP;AACH,CARD"}

package/FormElementMessage/index.d.ts

@@ -0,0 +1 @@
+export { FormElementMessage } from "./FormElementMessage";

package/FormElementMessage/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "FormElementMessage", {
+  enumerable: true,
+  get: function get() {
+    return _FormElementMessage.FormElementMessage;
+  }
+});
+
+var _FormElementMessage = require("./FormElementMessage");

package/FormElementMessage/index.js.map

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

package/FullName/FullName.d.ts

@@ -0,0 +1,8 @@
+declare type Props = {
+    data?: {
+        firstName?: string;
+        lastName?: string;
+    };
+};
+declare const FullName: (props: Props) => string;
+export { FullName };

package/FullName/FullName.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FullName = void 0;
+
+var FullName = function FullName(props) {
+  var data = props.data;
+
+  if (!data) {
+    return "N/A";
+  }
+
+  var output = "";
+
+  if (data.firstName) {
+    output += data.firstName;
+  }
+
+  if (data.lastName) {
+    output += " " + data.lastName;
+  }
+
+  return output;
+};
+
+exports.FullName = FullName;

package/FullName/FullName.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["FullName","props","data","output","firstName","lastName"],"sources":["FullName.ts"],"sourcesContent":["type Props = {\n    data?: {\n        firstName?: string;\n        lastName?: string;\n    };\n};\n\nconst FullName = (props: Props) => {\n    const { data } = props;\n\n    if (!data) {\n        return \"N/A\";\n    }\n\n    let output = \"\";\n    if (data.firstName) {\n        output += data.firstName;\n    }\n\n    if (data.lastName) {\n        output += \" \" + data.lastName;\n    }\n\n    return output;\n};\n\nexport { FullName };\n"],"mappings":";;;;;;;AAOA,IAAMA,QAAQ,GAAG,SAAXA,QAAW,CAACC,KAAD,EAAkB;EAC/B,IAAQC,IAAR,GAAiBD,KAAjB,CAAQC,IAAR;;EAEA,IAAI,CAACA,IAAL,EAAW;IACP,OAAO,KAAP;EACH;;EAED,IAAIC,MAAM,GAAG,EAAb;;EACA,IAAID,IAAI,CAACE,SAAT,EAAoB;IAChBD,MAAM,IAAID,IAAI,CAACE,SAAf;EACH;;EAED,IAAIF,IAAI,CAACG,QAAT,EAAmB;IACfF,MAAM,IAAI,MAAMD,IAAI,CAACG,QAArB;EACH;;EAED,OAAOF,MAAP;AACH,CAjBD"}

package/FullName/README.md

@@ -0,0 +1,11 @@
+# FullName
+
+### Description
+
+Use `FullName` component to display first name and last name of users.
+
+### Import
+
+```js
+import { FullName } from "@webiny/ui/FullName";
+```

package/FullName/index.d.ts

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

package/FullName/index.js

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

package/FullName/index.js.map

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

package/Grid/Grid.d.ts

@@ -0,0 +1,33 @@
+import React from "react";
+import { GridCellProps as RmwcGridCellProps, GridProps as RmwcGridProps } from "@rmwc/grid";
+import { CSSProperties } from "react";
+export declare type CellProps = RmwcGridCellProps & {
+    children?: React.ReactNode;
+    className?: string;
+    style?: {
+        [key: string]: any;
+    };
+};
+export declare type GridProps = RmwcGridProps & {
+    className?: string;
+    style?: CSSProperties;
+};
+/**
+ * Cell must be direct children of Grid component.
+ */
+export declare const Cell: (props: CellProps) => JSX.Element;
+export declare type GridInnerProps = {
+    children: React.ReactElement<typeof Cell> | React.ReactElement<typeof Cell>[];
+    /**
+     * CSS class name
+     */
+    className?: string;
+};
+export declare const GridInner: {
+    (props: GridInnerProps): JSX.Element;
+    displayName: string;
+};
+/**
+ * Use Grid component to display a list of choices, once the handler is triggered.
+ */
+export declare const Grid: (props: GridProps) => JSX.Element;

package/Grid/Grid.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridInner = exports.Grid = exports.Cell = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _grid = require("@rmwc/grid");
+
+/**
+ * Cell must be direct children of Grid component.
+ */
+var Cell = function Cell(props) {
+  return /*#__PURE__*/_react.default.createElement(_grid.GridCell, props, props.children);
+};
+
+exports.Cell = Cell;
+
+var GridInner = function GridInner(props) {
+  return /*#__PURE__*/_react.default.createElement(_grid.GridRow, props, props.children);
+};
+
+exports.GridInner = GridInner;
+GridInner.displayName = "GridInner";
+/**
+ * Use Grid component to display a list of choices, once the handler is triggered.
+ */
+
+var Grid = function Grid(props) {
+  return /*#__PURE__*/_react.default.createElement(_grid.Grid, props, props.children);
+};
+
+exports.Grid = Grid;

package/Grid/Grid.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Cell","props","children","GridInner","displayName","Grid"],"sources":["Grid.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n    Grid as RmwcGrid,\n    GridCell as RmwcGridCell,\n    GridRow as RmwcGridInner,\n    GridCellProps as RmwcGridCellProps,\n    GridProps as RmwcGridProps\n} from \"@rmwc/grid\";\nimport { CSSProperties } from \"react\";\n\nexport type CellProps = RmwcGridCellProps & {\n    // One or more Cell components.\n    children?: React.ReactNode;\n\n    // CSS class name that will be added to the element\n    className?: string;\n\n    style?: { [key: string]: any };\n};\n\nexport type GridProps = RmwcGridProps & {\n    className?: string;\n    style?: CSSProperties;\n};\n\n/**\n * Cell must be direct children of Grid component.\n */\nexport const Cell = (props: CellProps) => {\n    return <RmwcGridCell {...props}>{props.children}</RmwcGridCell>;\n};\n\nexport type GridInnerProps = {\n    // One or more Cell components.\n    children: React.ReactElement<typeof Cell> | React.ReactElement<typeof Cell>[];\n\n    /**\n     * CSS class name\n     */\n    className?: string;\n};\n\nexport const GridInner = (props: GridInnerProps) => {\n    return <RmwcGridInner {...props}>{props.children}</RmwcGridInner>;\n};\n\nGridInner.displayName = \"GridInner\";\n\n/**\n * Use Grid component to display a list of choices, once the handler is triggered.\n */\nexport const Grid = (props: GridProps) => {\n    return <RmwcGrid {...props}>{props.children}</RmwcGrid>;\n};\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AAwBA;AACA;AACA;AACO,IAAMA,IAAI,GAAG,SAAPA,IAAO,CAACC,KAAD,EAAsB;EACtC,oBAAO,6BAAC,cAAD,EAAkBA,KAAlB,EAA0BA,KAAK,CAACC,QAAhC,CAAP;AACH,CAFM;;;;AAcA,IAAMC,SAAS,GAAG,SAAZA,SAAY,CAACF,KAAD,EAA2B;EAChD,oBAAO,6BAAC,aAAD,EAAmBA,KAAnB,EAA2BA,KAAK,CAACC,QAAjC,CAAP;AACH,CAFM;;;AAIPC,SAAS,CAACC,WAAV,GAAwB,WAAxB;AAEA;AACA;AACA;;AACO,IAAMC,IAAI,GAAG,SAAPA,IAAO,CAACJ,KAAD,EAAsB;EACtC,oBAAO,6BAAC,UAAD,EAAcA,KAAd,EAAsBA,KAAK,CAACC,QAA5B,CAAP;AACH,CAFM"}

package/Grid/Grid.stories.d.ts

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

package/Grid/Grid.stories.js

@@ -0,0 +1,40 @@
+"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("./../Grid/README.md"));
+
+var _Grid = require("./Grid");
+
+var story = (0, _react2.storiesOf)("Components/Grid", module);
+story.add("usage", function () {
+  return /*#__PURE__*/_react.default.createElement(_Story.Story, null, /*#__PURE__*/_react.default.createElement(_Story.StoryReadme, null, _README.default), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, {
+    title: "A simple grid."
+  }, /*#__PURE__*/_react.default.createElement(_Grid.Grid, null, /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
+    span: 3,
+    tablet: 6,
+    phone: 12
+  }, "Apples"), /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
+    span: 3,
+    tablet: 6,
+    phone: 12
+  }, "Oranges"), /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
+    span: 3,
+    tablet: 6,
+    phone: 12
+  }, "Bananas"), /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
+    span: 3,
+    tablet: 6,
+    phone: 12
+  }, "Strawberries"))));
+}, {
+  info: {
+    propTables: [_Grid.Grid, _Grid.Cell]
+  }
+});

package/Grid/Grid.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["story","storiesOf","module","add","readme","info","propTables","Grid","Cell"],"sources":["Grid.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { Story, StoryReadme, StorySandbox } from \"@webiny/storybook-utils/Story\";\nimport readme from \"./../Grid/README.md\";\nimport { Grid, Cell } from \"./Grid\";\n\nconst story = storiesOf(\"Components/Grid\", module);\n\nstory.add(\n    \"usage\",\n    () => {\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox title={\"A simple grid.\"}>\n                    <Grid>\n                        <Cell span={3} tablet={6} phone={12}>\n                            Apples\n                        </Cell>\n                        <Cell span={3} tablet={6} phone={12}>\n                            Oranges\n                        </Cell>\n                        <Cell span={3} tablet={6} phone={12}>\n                            Bananas\n                        </Cell>\n                        <Cell span={3} tablet={6} phone={12}>\n                            Strawberries\n                        </Cell>\n                    </Grid>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [Grid, Cell] } }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,iBAAV,EAA6BC,MAA7B,CAAd;AAEAF,KAAK,CAACG,GAAN,CACI,OADJ,EAEI,YAAM;EACF,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,6BAAC,UAAD,qBACI,6BAAC,UAAD;IAAM,IAAI,EAAE,CAAZ;IAAe,MAAM,EAAE,CAAvB;IAA0B,KAAK,EAAE;EAAjC,YADJ,eAII,6BAAC,UAAD;IAAM,IAAI,EAAE,CAAZ;IAAe,MAAM,EAAE,CAAvB;IAA0B,KAAK,EAAE;EAAjC,aAJJ,eAOI,6BAAC,UAAD;IAAM,IAAI,EAAE,CAAZ;IAAe,MAAM,EAAE,CAAvB;IAA0B,KAAK,EAAE;EAAjC,aAPJ,eAUI,6BAAC,UAAD;IAAM,IAAI,EAAE,CAAZ;IAAe,MAAM,EAAE,CAAvB;IAA0B,KAAK,EAAE;EAAjC,kBAVJ,CADJ,CAFJ,CADJ;AAqBH,CAxBL,EAyBI;EAAEC,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,UAAD,EAAOC,UAAP;EAAd;AAAR,CAzBJ"}

package/Grid/README.md

@@ -0,0 +1,15 @@
+# Grid
+
+### Design
+
+<a href="https://material.io/design/layout/responsive-layout-grid.html#columns-gutters-margins" target="_blank">https://material.io/design/layout/responsive-layout-grid.html#columns-gutters-margins</a>
+
+### Description
+
+Use `Grid` and `Cell` components to display content and UI in an organized and responsive way.
+
+### Import
+
+```js
+import `{ Grid, Cell }` from "@webiny/ui/Grid";
+```

package/Grid/index.d.ts

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

package/Grid/index.js

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

package/Grid/index.js.map

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

package/Helpers/ClassNames.d.ts

@@ -0,0 +1,11 @@
+/**
+ * This is a pass-through that modifies your object's props and creates the required className prop by merging
+ * the provided appendClasses(string) and any class names defined inside your props.
+ * To you the function just do: {...getClasses (props)}
+ * and make sure you are not spreading the `props` element, as this will clone and spread your current `props` element already.
+ */
+/**
+ * TODO @ts-refactor figure out propList type
+ */
+declare const getClasses: (propList: any, appendClasses: string[] | string) => any;
+export { getClasses };

package/Helpers/ClassNames.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getClasses = void 0;
+
+var _clone2 = _interopRequireDefault(require("lodash/clone"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+/**
+ * This is a pass-through that modifies your object's props and creates the required className prop by merging
+ * the provided appendClasses(string) and any class names defined inside your props.
+ * To you the function just do: {...getClasses (props)}
+ * and make sure you are not spreading the `props` element, as this will clone and spread your current `props` element already.
+ */
+
+/**
+ * TODO @ts-refactor figure out propList type
+ */
+var getClasses = function getClasses(propList, appendClasses) {
+  var classes = "";
+  var props = (0, _clone2.default)(propList);
+
+  if (propList.hasOwnProperty("className")) {
+    classes = (0, _classnames.default)(propList.className);
+    delete props.className;
+  }
+
+  if (typeof appendClasses !== "undefined") {
+    classes = (0, _classnames.default)(classes, appendClasses);
+  }
+
+  props.className = classes;
+  return props;
+};
+
+exports.getClasses = getClasses;

package/Helpers/ClassNames.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["getClasses","propList","appendClasses","classes","props","hasOwnProperty","classnames","className"],"sources":["ClassNames.ts"],"sourcesContent":["import classnames from \"classnames\";\nimport { clone } from \"lodash\";\n\n/**\n * This is a pass-through that modifies your object's props and creates the required className prop by merging\n * the provided appendClasses(string) and any class names defined inside your props.\n * To you the function just do: {...getClasses (props)}\n * and make sure you are not spreading the `props` element, as this will clone and spread your current `props` element already.\n */\n/**\n * TODO @ts-refactor figure out propList type\n */\nconst getClasses = (propList: any, appendClasses: string[] | string) => {\n    let classes = \"\";\n    const props = clone(propList);\n    if (propList.hasOwnProperty(\"className\")) {\n        classes = classnames(propList.className);\n        delete props.className;\n    }\n\n    if (typeof appendClasses !== \"undefined\") {\n        classes = classnames(classes, appendClasses);\n    }\n\n    props.className = classes;\n\n    return props;\n};\n\nexport { getClasses };\n"],"mappings":";;;;;;;;;;;AAAA;;AAGA;AACA;AACA;AACA;AACA;AACA;;AACA;AACA;AACA;AACA,IAAMA,UAAU,GAAG,SAAbA,UAAa,CAACC,QAAD,EAAgBC,aAAhB,EAAqD;EACpE,IAAIC,OAAO,GAAG,EAAd;EACA,IAAMC,KAAK,GAAG,qBAAMH,QAAN,CAAd;;EACA,IAAIA,QAAQ,CAACI,cAAT,CAAwB,WAAxB,CAAJ,EAA0C;IACtCF,OAAO,GAAG,IAAAG,mBAAA,EAAWL,QAAQ,CAACM,SAApB,CAAV;IACA,OAAOH,KAAK,CAACG,SAAb;EACH;;EAED,IAAI,OAAOL,aAAP,KAAyB,WAA7B,EAA0C;IACtCC,OAAO,GAAG,IAAAG,mBAAA,EAAWH,OAAX,EAAoBD,aAApB,CAAV;EACH;;EAEDE,KAAK,CAACG,SAAN,GAAkBJ,OAAlB;EAEA,OAAOC,KAAP;AACH,CAfD"}

package/Helpers/index.d.ts

@@ -0,0 +1,2 @@
+import { getClasses } from "./ClassNames";
+export { getClasses };

package/Helpers/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "getClasses", {
+  enumerable: true,
+  get: function get() {
+    return _ClassNames.getClasses;
+  }
+});
+
+var _ClassNames = require("./ClassNames");

package/Helpers/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["import { getClasses } from \"./ClassNames\";\n\nexport { getClasses };\n"],"mappings":";;;;;;;;;;;;AAAA"}

package/Icon/Icon.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+export declare type IconProps = {
+    /**
+     * SvgComponent containing the svg icon
+     */
+    icon: React.ReactElement;
+    /**
+     * Optional onclick handler
+     */
+    onClick?: Function;
+    /**
+     * CSS class to be added to the icon
+     */
+    className?: string;
+    "data-testid"?: string;
+};
+/**
+ * Use Icon component to display an icon.
+ */
+declare const Icon: React.FC<IconProps>;
+export { Icon };

package/Icon/Icon.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Icon = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _emotion = require("emotion");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var webinyIcon = /*#__PURE__*/(0, _emotion.css)({}, {
+  "&.mdc-button__icon": {
+    marginLeft: 0,
+    width: "inherit",
+    display: "block"
+  }
+}, "label:webinyIcon;");
+/**
+ * Use Icon component to display an icon.
+ */
+
+var Icon = function Icon(props) {
+  return /*#__PURE__*/_react.default.cloneElement(props.icon, {
+    "data-testid": props["data-testid"],
+    className: (0, _classnames.default)("mdc-button__icon webiny-ui-icon", webinyIcon, props.className),
+    onClick: props.onClick
+  });
+};
+
+exports.Icon = Icon;

package/Icon/Icon.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["webinyIcon","css","marginLeft","width","display","Icon","props","React","cloneElement","icon","className","classNames","onClick"],"sources":["Icon.tsx"],"sourcesContent":["import React from \"react\";\nimport { css } from \"emotion\";\nimport classNames from \"classnames\";\n\nexport type IconProps = {\n    /**\n     * SvgComponent containing the svg icon\n     */\n    icon: React.ReactElement;\n\n    /**\n     * Optional onclick handler\n     */\n    onClick?: Function;\n\n    /**\n     * CSS class to be added to the icon\n     */\n    className?: string;\n\n    // For testing purposes.\n    \"data-testid\"?: string;\n};\n\nconst webinyIcon = css(\n    {},\n    {\n        \"&.mdc-button__icon\": {\n            marginLeft: 0,\n            width: \"inherit\",\n            display: \"block\"\n        }\n    }\n);\n\n/**\n * Use Icon component to display an icon.\n */\nconst Icon: React.FC<IconProps> = props => {\n    return React.cloneElement(props.icon, {\n        \"data-testid\": props[\"data-testid\"],\n        className: classNames(\"mdc-button__icon webiny-ui-icon\", webinyIcon, props.className),\n        onClick: props.onClick\n    });\n};\n\nexport { Icon };\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAsBA,IAAMA,UAAU,gBAAG,IAAAC,YAAA,EACf,EADe,EAEf;EACI,sBAAsB;IAClBC,UAAU,EAAE,CADM;IAElBC,KAAK,EAAE,SAFW;IAGlBC,OAAO,EAAE;EAHS;AAD1B,CAFe,sBAAnB;AAWA;AACA;AACA;;AACA,IAAMC,IAAyB,GAAG,SAA5BA,IAA4B,CAAAC,KAAK,EAAI;EACvC,oBAAOC,cAAA,CAAMC,YAAN,CAAmBF,KAAK,CAACG,IAAzB,EAA+B;IAClC,eAAeH,KAAK,CAAC,aAAD,CADc;IAElCI,SAAS,EAAE,IAAAC,mBAAA,EAAW,iCAAX,EAA8CX,UAA9C,EAA0DM,KAAK,CAACI,SAAhE,CAFuB;IAGlCE,OAAO,EAAEN,KAAK,CAACM;EAHmB,CAA/B,CAAP;AAKH,CAND"}

package/Icon/Icon.stories.d.ts

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

package/Icon/Icon.stories.js

@@ -0,0 +1,40 @@
+"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("./../Icon/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 _Icon = require("./Icon");
+
+var story = (0, _react2.storiesOf)("Components/Icon", module);
+story.add("usage", function () {
+  return /*#__PURE__*/_react.default.createElement(_Story.Story, null, /*#__PURE__*/_react.default.createElement(_Story.StoryReadme, null, _README.default), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, {
+    title: "A simple icon"
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+    icon: /*#__PURE__*/_react.default.createElement(_baselineAutorenew24px.ReactComponent, null)
+  }), "\xA0", /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+    icon: /*#__PURE__*/_react.default.createElement(_baselineCloud_done24px.ReactComponent, null)
+  }), "\xA0", /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+    icon: /*#__PURE__*/_react.default.createElement(_baselineDelete24px.ReactComponent, null)
+  }), "\xA0", /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+    icon: /*#__PURE__*/_react.default.createElement(_baselineDone24px.ReactComponent, null)
+  }), "\xA0")));
+}, {
+  info: {
+    propTables: [_Icon.Icon]
+  }
+});

package/Icon/Icon.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["story","storiesOf","module","add","readme","info","propTables","Icon"],"sources":["Icon.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { Story, StoryReadme, StorySandbox } from \"@webiny/storybook-utils/Story\";\nimport readme from \"./../Icon/README.md\";\n\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\";\nimport { Icon } from \"./Icon\";\n\nconst story = storiesOf(\"Components/Icon\", module);\n\nstory.add(\n    \"usage\",\n    () => {\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox title={\"A simple icon\"}>\n                    <div>\n                        <Icon icon={<AutoRenewIcon />} />\n                        &nbsp;\n                        <Icon icon={<CloudDoneIcon />} />\n                        &nbsp;\n                        <Icon icon={<BaselineDeleteIcon />} />\n                        &nbsp;\n                        <Icon icon={<BaselineDoneIcon />} />\n                        &nbsp;\n                    </div>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [Icon] } }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,iBAAV,EAA6BC,MAA7B,CAAd;AAEAF,KAAK,CAACG,GAAN,CACI,OADJ,EAEI,YAAM;EACF,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,uDACI,6BAAC,UAAD;IAAM,IAAI,eAAE,6BAAC,qCAAD;EAAZ,EADJ,uBAGI,6BAAC,UAAD;IAAM,IAAI,eAAE,6BAAC,sCAAD;EAAZ,EAHJ,uBAKI,6BAAC,UAAD;IAAM,IAAI,eAAE,6BAAC,kCAAD;EAAZ,EALJ,uBAOI,6BAAC,UAAD;IAAM,IAAI,eAAE,6BAAC,gCAAD;EAAZ,EAPJ,SADJ,CAFJ,CADJ;AAiBH,CApBL,EAqBI;EAAEC,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,UAAD;EAAd;AAAR,CArBJ"}

package/Icon/README.md

@@ -0,0 +1,11 @@
+# Icon
+
+### Description
+
+Use `Icon` component to display an icon.
+
+### Import
+
+```js
+import { Icon } from "@webiny/ui/Icon";
+```

package/Icon/index.d.ts

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

package/Icon/index.js

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

package/Icon/index.js.map

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

package/Icon/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/Icon/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/Icon/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/Icon/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>