@webiny/ui 5.27.0 → 5.29.0-beta.0

package/Avatar/Avatar.js

@@ -1,10 +1,24 @@
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Avatar = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _emotion = require("emotion");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _excluded = ["className", "width", "height", "src", "alt", "fallbackText", "renderImage"];
-import React from "react";
-import { css } from "emotion";
-import classNames from "classnames";
-var avatar = /*#__PURE__*/css({
+var avatar = /*#__PURE__*/(0, _emotion.css)({
   borderRadius: "50%",
   display: "block",
   //alignItems: "center",
@@ -40,7 +54,7 @@ var avatar = /*#__PURE__*/css({
 /**
  * Use Avatar component to display user's avatar.
  */
-export var Avatar = function Avatar(props) {
+var Avatar = function Avatar(props) {
   var className = props.className,
       width = props.width,
       height = props.height,
@@ -48,8 +62,7 @@ export var Avatar = function Avatar(props) {
       alt = props.alt,
       fallbackText = props.fallbackText,
       renderImage = props.renderImage,
-      rest = _objectWithoutProperties(props, _excluded);
-
+      rest = (0, _objectWithoutProperties2.default)(props, _excluded);
   var renderedImage;
   var imageProps = {
     src: src,
@@ -58,27 +71,29 @@ export var Avatar = function Avatar(props) {
 
   if (src) {
     if (typeof renderImage === "function") {
-      renderedImage = renderImage(_objectSpread(_objectSpread({}, imageProps), {}, {
+      renderedImage = renderImage((0, _objectSpread2.default)((0, _objectSpread2.default)({}, imageProps), {}, {
         src: src
       }));
     } else {
-      renderedImage = /*#__PURE__*/React.createElement("img", Object.assign({}, imageProps, {
+      renderedImage = /*#__PURE__*/_react.default.createElement("img", Object.assign({}, imageProps, {
         alt: alt,
         src: src
       }));
     }
   }
 
-  return /*#__PURE__*/React.createElement("div", Object.assign({}, rest, {
-    className: classNames(avatar, className),
-    style: _objectSpread(_objectSpread({}, props.style), {}, {
+  return /*#__PURE__*/_react.default.createElement("div", Object.assign({}, rest, {
+    className: (0, _classnames.default)(avatar, className),
+    style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props.style), {}, {
       width: width,
       height: height
     })
-  }), props.src ? renderedImage : /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", null, fallbackText.split(" ").map(function (word) {
+  }), props.src ? renderedImage : /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("span", null, fallbackText.split(" ").map(function (word) {
     return word.charAt(0);
   }).join("").toUpperCase())));
 };
+
+exports.Avatar = Avatar;
 Avatar.defaultProps = {
   width: 38,
   height: 38

package/Avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Avatar.tsx"],"names":["React","css","classNames","avatar","borderRadius","display","width","height","position","top","right","overflow","background","color","div","textAlign","alignContent","justifyContent","flexDirection","fontSize","span","paddingBottom","img","objectFit","Avatar","props","className","src","alt","fallbackText","renderImage","rest","renderedImage","imageProps","style","split","map","word","charAt","join","toUpperCase","defaultProps"],"mappings":"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","sourcesContent":["import React from \"react\";\nimport { css } from \"emotion\";\nimport classNames from \"classnames\";\nconst avatar = css({\n    borderRadius: \"50%\",\n    display: \"block\",\n    //alignItems: \"center\",\n    //justifyContent: \"center\",\n    width: 38,\n    height: 38,\n    position: \"relative\",\n    top: -7,\n    right: 7,\n    overflow: \"hidden\",\n    background: \"var(--mdc-theme-background)\",\n    color: \"var(--mdc-theme-text-secondary-on-background)\",\n    div: {\n        textAlign: \"center\",\n        display: \"flex\",\n        alignContent: \"center\",\n        justifyContent: \"center\",\n        flexDirection: \"column\",\n        width: 38,\n        height: 38,\n        fontSize: \"1rem\",\n        span: {\n            paddingBottom: 2\n        }\n    },\n    img: {\n        width: \"100% !important\",\n        height: \"100% !important\",\n        objectFit: \"cover\"\n    }\n});\n\nexport interface AvatarProps {\n    /**\n     * CSS class name.\n     */\n    className?: string;\n\n    /**\n     * Style object.\n     */\n    style?: React.CSSProperties;\n\n    /**\n     * Avatar image source.\n     */\n    src?: string | null;\n\n    /**\n     * \"alt\" text.\n     */\n    alt?: string;\n\n    /**\n     * Width.\n     */\n    width?: number;\n\n    /**\n     * Height.\n     */\n    height?: number;\n\n    /**\n     * Pass a custom image component to be rendered instead of a simple <img> element.\n     * @param props\n     */\n    renderImage?: (props: { src: string; alt?: string }) => React.ReactElement;\n\n    /**\n     * Text that will be shown when there is no image (usually user's initials).\n     */\n    fallbackText: string;\n}\n\n/**\n * Use Avatar component to display user's avatar.\n */\nexport const Avatar: React.FC<AvatarProps> = props => {\n    const { className, width, height, src, alt, fallbackText, renderImage, ...rest } = props;\n\n    let renderedImage;\n    const imageProps = { src, alt };\n    if (src) {\n        if (typeof renderImage === \"function\") {\n            renderedImage = renderImage({\n                ...imageProps,\n                src\n            });\n        } else {\n            renderedImage = <img {...imageProps} alt={alt} src={src} />;\n        }\n    }\n\n    return (\n        <div\n            {...rest}\n            className={classNames(avatar, className)}\n            style={{ ...props.style, width, height }}\n        >\n            {props.src ? (\n                renderedImage\n            ) : (\n                <div>\n                    <span>\n                        {fallbackText\n                            .split(\" \")\n                            .map(word => word.charAt(0))\n                            .join(\"\")\n                            .toUpperCase()}\n                    </span>\n                </div>\n            )}\n        </div>\n    );\n};\n\nAvatar.defaultProps = {\n    width: 38,\n    height: 38\n};\n"]}
+{"version":3,"names":["avatar","css","borderRadius","display","width","height","position","top","right","overflow","background","color","div","textAlign","alignContent","justifyContent","flexDirection","fontSize","span","paddingBottom","img","objectFit","Avatar","props","className","src","alt","fallbackText","renderImage","rest","renderedImage","imageProps","classNames","style","split","map","word","charAt","join","toUpperCase","defaultProps"],"sources":["Avatar.tsx"],"sourcesContent":["import React from \"react\";\nimport { css } from \"emotion\";\nimport classNames from \"classnames\";\nconst avatar = css({\n    borderRadius: \"50%\",\n    display: \"block\",\n    //alignItems: \"center\",\n    //justifyContent: \"center\",\n    width: 38,\n    height: 38,\n    position: \"relative\",\n    top: -7,\n    right: 7,\n    overflow: \"hidden\",\n    background: \"var(--mdc-theme-background)\",\n    color: \"var(--mdc-theme-text-secondary-on-background)\",\n    div: {\n        textAlign: \"center\",\n        display: \"flex\",\n        alignContent: \"center\",\n        justifyContent: \"center\",\n        flexDirection: \"column\",\n        width: 38,\n        height: 38,\n        fontSize: \"1rem\",\n        span: {\n            paddingBottom: 2\n        }\n    },\n    img: {\n        width: \"100% !important\",\n        height: \"100% !important\",\n        objectFit: \"cover\"\n    }\n});\n\nexport interface AvatarProps {\n    /**\n     * CSS class name.\n     */\n    className?: string;\n\n    /**\n     * Style object.\n     */\n    style?: React.CSSProperties;\n\n    /**\n     * Avatar image source.\n     */\n    src?: string | null;\n\n    /**\n     * \"alt\" text.\n     */\n    alt?: string;\n\n    /**\n     * Width.\n     */\n    width?: number;\n\n    /**\n     * Height.\n     */\n    height?: number;\n\n    /**\n     * Pass a custom image component to be rendered instead of a simple <img> element.\n     * @param props\n     */\n    renderImage?: (props: { src: string; alt?: string }) => React.ReactElement;\n\n    /**\n     * Text that will be shown when there is no image (usually user's initials).\n     */\n    fallbackText: string;\n}\n\n/**\n * Use Avatar component to display user's avatar.\n */\nexport const Avatar: React.FC<AvatarProps> = props => {\n    const { className, width, height, src, alt, fallbackText, renderImage, ...rest } = props;\n\n    let renderedImage;\n    const imageProps = { src, alt };\n    if (src) {\n        if (typeof renderImage === \"function\") {\n            renderedImage = renderImage({\n                ...imageProps,\n                src\n            });\n        } else {\n            renderedImage = <img {...imageProps} alt={alt} src={src} />;\n        }\n    }\n\n    return (\n        <div\n            {...rest}\n            className={classNames(avatar, className)}\n            style={{ ...props.style, width, height }}\n        >\n            {props.src ? (\n                renderedImage\n            ) : (\n                <div>\n                    <span>\n                        {fallbackText\n                            .split(\" \")\n                            .map(word => word.charAt(0))\n                            .join(\"\")\n                            .toUpperCase()}\n                    </span>\n                </div>\n            )}\n        </div>\n    );\n};\n\nAvatar.defaultProps = {\n    width: 38,\n    height: 38\n};\n"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AACA;;;AACA,IAAMA,MAAM,gBAAG,IAAAC,YAAA,EAAI;EACfC,YAAY,EAAE,KADC;EAEfC,OAAO,EAAE,OAFM;EAGf;EACA;EACAC,KAAK,EAAE,EALQ;EAMfC,MAAM,EAAE,EANO;EAOfC,QAAQ,EAAE,UAPK;EAQfC,GAAG,EAAE,CAAC,CARS;EASfC,KAAK,EAAE,CATQ;EAUfC,QAAQ,EAAE,QAVK;EAWfC,UAAU,EAAE,6BAXG;EAYfC,KAAK,EAAE,+CAZQ;EAafC,GAAG,EAAE;IACDC,SAAS,EAAE,QADV;IAEDV,OAAO,EAAE,MAFR;IAGDW,YAAY,EAAE,QAHb;IAIDC,cAAc,EAAE,QAJf;IAKDC,aAAa,EAAE,QALd;IAMDZ,KAAK,EAAE,EANN;IAODC,MAAM,EAAE,EAPP;IAQDY,QAAQ,EAAE,MART;IASDC,IAAI,EAAE;MACFC,aAAa,EAAE;IADb;EATL,CAbU;EA0BfC,GAAG,EAAE;IACDhB,KAAK,EAAE,iBADN;IAEDC,MAAM,EAAE,iBAFP;IAGDgB,SAAS,EAAE;EAHV;AA1BU,CAAJ,kBAAf;;AA4EA;AACA;AACA;AACO,IAAMC,MAA6B,GAAG,SAAhCA,MAAgC,CAAAC,KAAK,EAAI;EAClD,IAAQC,SAAR,GAAmFD,KAAnF,CAAQC,SAAR;EAAA,IAAmBpB,KAAnB,GAAmFmB,KAAnF,CAAmBnB,KAAnB;EAAA,IAA0BC,MAA1B,GAAmFkB,KAAnF,CAA0BlB,MAA1B;EAAA,IAAkCoB,GAAlC,GAAmFF,KAAnF,CAAkCE,GAAlC;EAAA,IAAuCC,GAAvC,GAAmFH,KAAnF,CAAuCG,GAAvC;EAAA,IAA4CC,YAA5C,GAAmFJ,KAAnF,CAA4CI,YAA5C;EAAA,IAA0DC,WAA1D,GAAmFL,KAAnF,CAA0DK,WAA1D;EAAA,IAA0EC,IAA1E,0CAAmFN,KAAnF;EAEA,IAAIO,aAAJ;EACA,IAAMC,UAAU,GAAG;IAAEN,GAAG,EAAHA,GAAF;IAAOC,GAAG,EAAHA;EAAP,CAAnB;;EACA,IAAID,GAAJ,EAAS;IACL,IAAI,OAAOG,WAAP,KAAuB,UAA3B,EAAuC;MACnCE,aAAa,GAAGF,WAAW,6DACpBG,UADoB;QAEvBN,GAAG,EAAHA;MAFuB,GAA3B;IAIH,CALD,MAKO;MACHK,aAAa,gBAAG,sDAASC,UAAT;QAAqB,GAAG,EAAEL,GAA1B;QAA+B,GAAG,EAAED;MAApC,GAAhB;IACH;EACJ;;EAED,oBACI,sDACQI,IADR;IAEI,SAAS,EAAE,IAAAG,mBAAA,EAAWhC,MAAX,EAAmBwB,SAAnB,CAFf;IAGI,KAAK,8DAAOD,KAAK,CAACU,KAAb;MAAoB7B,KAAK,EAALA,KAApB;MAA2BC,MAAM,EAANA;IAA3B;EAHT,IAKKkB,KAAK,CAACE,GAAN,GACGK,aADH,gBAGG,uDACI,2CACKH,YAAY,CACRO,KADJ,CACU,GADV,EAEIC,GAFJ,CAEQ,UAAAC,IAAI;IAAA,OAAIA,IAAI,CAACC,MAAL,CAAY,CAAZ,CAAJ;EAAA,CAFZ,EAGIC,IAHJ,CAGS,EAHT,EAIIC,WAJJ,EADL,CADJ,CARR,CADJ;AAqBH,CArCM;;;AAuCPjB,MAAM,CAACkB,YAAP,GAAsB;EAClBpC,KAAK,EAAE,EADW;EAElBC,MAAM,EAAE;AAFU,CAAtB"}

package/Avatar/Avatar.stories.js

@@ -1,19 +1,28 @@
-import React from "react";
-import { storiesOf } from "@storybook/react";
-import { Story, StoryReadme, StorySandbox } from "@webiny/storybook-utils/Story";
-import readme from "./../Avatar/README.md";
-import { Avatar } from "./Avatar";
-var story = storiesOf("Components/Avatar", module);
+"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("./../Avatar/README.md"));
+
+var _Avatar = require("./Avatar");
+
+var story = (0, _react2.storiesOf)("Components/Avatar", module);
 story.add("usage", function () {
-  return /*#__PURE__*/React.createElement(Story, null, /*#__PURE__*/React.createElement(StoryReadme, null, readme), /*#__PURE__*/React.createElement(StorySandbox, {
+  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 avatar"
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Avatar, {
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Avatar.Avatar, {
     width: 48,
     height: 48,
     alt: "Test alt.",
     fallbackText: "T",
     src: "http://i.pravatar.cc/150?img=49"
-  }), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Avatar, {
+  }), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_Avatar.Avatar, {
     width: 64,
     height: 64,
     alt: "Test alt.",
@@ -22,6 +31,6 @@ story.add("usage", function () {
   }))));
 }, {
   info: {
-    propTables: [Avatar]
+    propTables: [_Avatar.Avatar]
   }
 });

package/Avatar/Avatar.stories.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Avatar.stories.tsx"],"names":["React","storiesOf","Story","StoryReadme","StorySandbox","readme","Avatar","story","module","add","info","propTables"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,SAAT,QAA0B,kBAA1B;AACA,SAASC,KAAT,EAAgBC,WAAhB,EAA6BC,YAA7B,QAAiD,+BAAjD;AACA,OAAOC,MAAP;AACA,SAASC,MAAT;AAEA,IAAMC,KAAK,GAAGN,SAAS,CAAC,mBAAD,EAAsBO,MAAtB,CAAvB;AAEAD,KAAK,CAACE,GAAN,CACI,OADJ,EAEI,YAAM;AACF,sBACI,oBAAC,KAAD,qBACI,oBAAC,WAAD,QAAcJ,MAAd,CADJ,eAEI,oBAAC,YAAD;AAAc,IAAA,KAAK,EAAE;AAArB,kBACI,8CACI,oBAAC,MAAD;AACI,IAAA,KAAK,EAAE,EADX;AAEI,IAAA,MAAM,EAAE,EAFZ;AAGI,IAAA,GAAG,EAAC,WAHR;AAII,IAAA,YAAY,EAAC,GAJjB;AAKI,IAAA,GAAG,EAAC;AALR,IADJ,eASI,+BATJ,eAUI,+BAVJ,eAYI,oBAAC,MAAD;AAAQ,IAAA,KAAK,EAAE,EAAf;AAAmB,IAAA,MAAM,EAAE,EAA3B;AAA+B,IAAA,GAAG,EAAC,WAAnC;AAA+C,IAAA,YAAY,EAAC,GAA5D;AAAgE,IAAA,GAAG,EAAE;AAArE,IAZJ,CADJ,CAFJ,CADJ;AAqBH,CAxBL,EAyBI;AAAEK,EAAAA,IAAI,EAAE;AAAEC,IAAAA,UAAU,EAAE,CAACL,MAAD;AAAd;AAAR,CAzBJ","sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { Story, StoryReadme, StorySandbox } from \"@webiny/storybook-utils/Story\";\nimport readme from \"./../Avatar/README.md\";\nimport { Avatar } from \"./Avatar\";\n\nconst story = storiesOf(\"Components/Avatar\", module);\n\nstory.add(\n    \"usage\",\n    () => {\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox title={\"A simple avatar\"}>\n                    <div>\n                        <Avatar\n                            width={48}\n                            height={48}\n                            alt=\"Test alt.\"\n                            fallbackText=\"T\"\n                            src=\"http://i.pravatar.cc/150?img=49\"\n                        />\n\n                        <br />\n                        <br />\n\n                        <Avatar width={64} height={64} alt=\"Test alt.\" fallbackText=\"T\" src={\"\"} />\n                    </div>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [Avatar] } }\n);\n"]}
+{"version":3,"names":["story","storiesOf","module","add","readme","info","propTables","Avatar"],"sources":["Avatar.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { Story, StoryReadme, StorySandbox } from \"@webiny/storybook-utils/Story\";\nimport readme from \"./../Avatar/README.md\";\nimport { Avatar } from \"./Avatar\";\n\nconst story = storiesOf(\"Components/Avatar\", module);\n\nstory.add(\n    \"usage\",\n    () => {\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox title={\"A simple avatar\"}>\n                    <div>\n                        <Avatar\n                            width={48}\n                            height={48}\n                            alt=\"Test alt.\"\n                            fallbackText=\"T\"\n                            src=\"http://i.pravatar.cc/150?img=49\"\n                        />\n\n                        <br />\n                        <br />\n\n                        <Avatar width={64} height={64} alt=\"Test alt.\" fallbackText=\"T\" src={\"\"} />\n                    </div>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [Avatar] } }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,mBAAV,EAA+BC,MAA/B,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,cAAD;IACI,KAAK,EAAE,EADX;IAEI,MAAM,EAAE,EAFZ;IAGI,GAAG,EAAC,WAHR;IAII,YAAY,EAAC,GAJjB;IAKI,GAAG,EAAC;EALR,EADJ,eASI,wCATJ,eAUI,wCAVJ,eAYI,6BAAC,cAAD;IAAQ,KAAK,EAAE,EAAf;IAAmB,MAAM,EAAE,EAA3B;IAA+B,GAAG,EAAC,WAAnC;IAA+C,YAAY,EAAC,GAA5D;IAAgE,GAAG,EAAE;EAArE,EAZJ,CADJ,CAFJ,CADJ;AAqBH,CAxBL,EAyBI;EAAEC,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,cAAD;EAAd;AAAR,CAzBJ"}

package/Avatar/index.js

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

package/Avatar/index.js.map

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

package/Button/Button.js

@@ -1,15 +1,32 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+"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.ButtonSecondary = exports.ButtonPrimary = exports.ButtonIcon = exports.ButtonFloating = exports.ButtonDefault = void 0;
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var RmwcButton = _interopRequireWildcard(require("@rmwc/button"));
+
+var _fab = require("@rmwc/fab");
+
+var _Icon = require("../Icon/Icon");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _excluded = ["disabled", "icon", "onClick", "small", "label", "ripple", "className"];
-import React from "react";
-import * as RmwcButton from "@rmwc/button";
-import { Fab } from "@rmwc/fab";
-import { Icon } from "../Icon/Icon";
-import classNames from "classnames";
 
 /**
  * Shows a default button, used typically when action is not of high priority.
  */
-export var ButtonDefault = function ButtonDefault(props) {
+var ButtonDefault = function ButtonDefault(props) {
   var disabled = props.disabled,
       onClick = props.onClick,
       children = props.children,
@@ -19,13 +36,13 @@ export var ButtonDefault = function ButtonDefault(props) {
       _props$className = props.className,
       className = _props$className === void 0 ? "" : _props$className,
       style = props.style;
-  return /*#__PURE__*/React.createElement(RmwcButton.Button, {
+  return /*#__PURE__*/_react.default.createElement(RmwcButton.Button, {
     style: style,
     disabled: disabled,
     dense: small,
     onClick: onClick,
     ripple: ripple,
-    className: classNames("webiny-ui-button", className),
+    className: (0, _classnames.default)("webiny-ui-button", className),
     "data-testid": props["data-testid"]
   }, children);
 };
@@ -33,7 +50,10 @@ export var ButtonDefault = function ButtonDefault(props) {
  * Shows primary button, eg. for submitting forms.
  */
 
-export var ButtonPrimary = function ButtonPrimary(props) {
+
+exports.ButtonDefault = ButtonDefault;
+
+var ButtonPrimary = function ButtonPrimary(props) {
   var disabled = props.disabled,
       onClick = props.onClick,
       children = props.children,
@@ -47,7 +67,7 @@ export var ButtonPrimary = function ButtonPrimary(props) {
       style = _props$style === void 0 ? {} : _props$style,
       _props$className2 = props.className,
       className = _props$className2 === void 0 ? null : _props$className2;
-  return /*#__PURE__*/React.createElement(RmwcButton.Button, {
+  return /*#__PURE__*/_react.default.createElement(RmwcButton.Button, {
     raised: !flat,
     dense: small,
     disabled: disabled,
@@ -55,7 +75,7 @@ export var ButtonPrimary = function ButtonPrimary(props) {
     ripple: ripple,
     onClick: onClick,
     style: style,
-    className: classNames("webiny-ui-button webiny-ui-button--primary", className),
+    className: (0, _classnames.default)("webiny-ui-button webiny-ui-button--primary", className),
     "data-testid": props["data-testid"]
   }, children);
 };
@@ -63,7 +83,10 @@ export var ButtonPrimary = function ButtonPrimary(props) {
  * Shows a secondary button - eg. for doing a reset on a form.
  */
 
-export var ButtonSecondary = function ButtonSecondary(props) {
+
+exports.ButtonPrimary = ButtonPrimary;
+
+var ButtonSecondary = function ButtonSecondary(props) {
   var disabled = props.disabled,
       onClick = props.onClick,
       children = props.children,
@@ -75,22 +98,24 @@ export var ButtonSecondary = function ButtonSecondary(props) {
       className = _props$className3 === void 0 ? null : _props$className3,
       _props$style2 = props.style,
       style = _props$style2 === void 0 ? {} : _props$style2;
-  return /*#__PURE__*/React.createElement(RmwcButton.Button, {
+  return /*#__PURE__*/_react.default.createElement(RmwcButton.Button, {
     disabled: disabled,
     outlined: true,
     dense: small,
     ripple: ripple,
     onClick: onClick,
     style: style,
-    className: classNames("webiny-ui-button webiny-ui-button--secondary", className),
+    className: (0, _classnames.default)("webiny-ui-button webiny-ui-button--secondary", className),
     "data-testid": props["data-testid"]
   }, children);
 };
 
+exports.ButtonSecondary = ButtonSecondary;
+
 /**
  * A floating button, shown on the side of the screen, typically used for creating new content or accessing settings.
  */
-export var ButtonFloating = function ButtonFloating(props) {
+var ButtonFloating = function ButtonFloating(props) {
   var disabled = props.disabled,
       icon = props.icon,
       onClick = props.onClick,
@@ -102,9 +127,8 @@ export var ButtonFloating = function ButtonFloating(props) {
       ripple = _props$ripple4 === void 0 ? true : _props$ripple4,
       _props$className4 = props.className,
       className = _props$className4 === void 0 ? null : _props$className4,
-      rest = _objectWithoutProperties(props, _excluded);
-
-  return /*#__PURE__*/React.createElement(Fab, Object.assign({
+      rest = (0, _objectWithoutProperties2.default)(props, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_fab.Fab, Object.assign({
     "data-testid": props["data-testid"],
     disabled: disabled,
     mini: small,
@@ -112,13 +136,18 @@ export var ButtonFloating = function ButtonFloating(props) {
     label: label,
     ripple: ripple,
     icon: icon,
-    className: classNames("webiny-ui-button--floating", className)
+    className: (0, _classnames.default)("webiny-ui-button--floating", className)
   }, rest));
 };
 /**
  * Shows an icon, suitable to be shown inside of a button.
  */
 
-export var ButtonIcon = function ButtonIcon(props) {
-  return /*#__PURE__*/React.createElement(Icon, props);
-};
+
+exports.ButtonFloating = ButtonFloating;
+
+var ButtonIcon = function ButtonIcon(props) {
+  return /*#__PURE__*/_react.default.createElement(_Icon.Icon, props);
+};
+
+exports.ButtonIcon = ButtonIcon;

package/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Button.tsx"],"names":["React","RmwcButton","Fab","Icon","classNames","ButtonDefault","props","disabled","onClick","children","small","ripple","className","style","ButtonPrimary","flat","ButtonSecondary","ButtonFloating","icon","label","rest","ButtonIcon"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAO,KAAKC,UAAZ,MAA4B,cAA5B;AACA,SAASC,GAAT,QAA8B,WAA9B;AACA,SAASC,IAAT;AACA,OAAOC,UAAP,MAAuB,YAAvB;;AA6BA;AACA;AACA;AACA,OAAO,IAAMC,aAAoC,GAAG,SAAvCA,aAAuC,CAAAC,KAAK,EAAI;AACzD,MAAQC,QAAR,GAAqFD,KAArF,CAAQC,QAAR;AAAA,MAAkBC,OAAlB,GAAqFF,KAArF,CAAkBE,OAAlB;AAAA,MAA2BC,QAA3B,GAAqFH,KAArF,CAA2BG,QAA3B;AAAA,MAAqCC,KAArC,GAAqFJ,KAArF,CAAqCI,KAArC;AAAA,sBAAqFJ,KAArF,CAA4CK,MAA5C;AAAA,MAA4CA,MAA5C,8BAAqD,IAArD;AAAA,yBAAqFL,KAArF,CAA2DM,SAA3D;AAAA,MAA2DA,SAA3D,iCAAuE,EAAvE;AAAA,MAA2EC,KAA3E,GAAqFP,KAArF,CAA2EO,KAA3E;AAEA,sBACI,oBAAC,UAAD,CAAY,MAAZ;AACI,IAAA,KAAK,EAAEA,KADX;AAEI,IAAA,QAAQ,EAAEN,QAFd;AAGI,IAAA,KAAK,EAAEG,KAHX;AAII,IAAA,OAAO,EAAEF,OAJb;AAKI,IAAA,MAAM,EAAEG,MALZ;AAMI,IAAA,SAAS,EAAEP,UAAU,CAAC,kBAAD,EAAqBQ,SAArB,CANzB;AAOI,mBAAaN,KAAK,CAAC,aAAD;AAPtB,KASKG,QATL,CADJ;AAaH,CAhBM;AAkBP;AACA;AACA;;AACA,OAAO,IAAMK,aAAoC,GAAG,SAAvCA,aAAuC,CAAAR,KAAK,EAAI;AACzD,MACIC,QADJ,GASID,KATJ,CACIC,QADJ;AAAA,MAEIC,OAFJ,GASIF,KATJ,CAEIE,OAFJ;AAAA,MAGIC,QAHJ,GASIH,KATJ,CAGIG,QAHJ;AAAA,qBASIH,KATJ,CAIII,KAJJ;AAAA,MAIIA,KAJJ,6BAIY,KAJZ;AAAA,oBASIJ,KATJ,CAKIS,IALJ;AAAA,MAKIA,IALJ,4BAKW,KALX;AAAA,uBASIT,KATJ,CAMIK,MANJ;AAAA,MAMIA,MANJ,+BAMa,IANb;AAAA,qBASIL,KATJ,CAOIO,KAPJ;AAAA,MAOIA,KAPJ,6BAOY,EAPZ;AAAA,0BASIP,KATJ,CAQIM,SARJ;AAAA,MAQIA,SARJ,kCAQgB,IARhB;AAUA,sBACI,oBAAC,UAAD,CAAY,MAAZ;AACI,IAAA,MAAM,EAAE,CAACG,IADb;AAEI,IAAA,KAAK,EAAEL,KAFX;AAGI,IAAA,QAAQ,EAAEH,QAHd;AAII,IAAA,UAAU,EAAEQ,IAJhB;AAKI,IAAA,MAAM,EAAEJ,MALZ;AAMI,IAAA,OAAO,EAAEH,OANb;AAOI,IAAA,KAAK,EAAEK,KAPX;AAQI,IAAA,SAAS,EAAET,UAAU,CAAC,4CAAD,EAA+CQ,SAA/C,CARzB;AASI,mBAAaN,KAAK,CAAC,aAAD;AATtB,KAWKG,QAXL,CADJ;AAeH,CA1BM;AA4BP;AACA;AACA;;AACA,OAAO,IAAMO,eAAsC,GAAG,SAAzCA,eAAyC,CAAAV,KAAK,EAAI;AAC3D,MACIC,QADJ,GAQID,KARJ,CACIC,QADJ;AAAA,MAEIC,OAFJ,GAQIF,KARJ,CAEIE,OAFJ;AAAA,MAGIC,QAHJ,GAQIH,KARJ,CAGIG,QAHJ;AAAA,sBAQIH,KARJ,CAIII,KAJJ;AAAA,MAIIA,KAJJ,8BAIY,KAJZ;AAAA,uBAQIJ,KARJ,CAKIK,MALJ;AAAA,MAKIA,MALJ,+BAKa,IALb;AAAA,0BAQIL,KARJ,CAMIM,SANJ;AAAA,MAMIA,SANJ,kCAMgB,IANhB;AAAA,sBAQIN,KARJ,CAOIO,KAPJ;AAAA,MAOIA,KAPJ,8BAOY,EAPZ;AAUA,sBACI,oBAAC,UAAD,CAAY,MAAZ;AACI,IAAA,QAAQ,EAAEN,QADd;AAEI,IAAA,QAAQ,MAFZ;AAGI,IAAA,KAAK,EAAEG,KAHX;AAII,IAAA,MAAM,EAAEC,MAJZ;AAKI,IAAA,OAAO,EAAEH,OALb;AAMI,IAAA,KAAK,EAAEK,KANX;AAOI,IAAA,SAAS,EAAET,UAAU,CAAC,8CAAD,EAAiDQ,SAAjD,CAPzB;AAQI,mBAAaN,KAAK,CAAC,aAAD;AARtB,KAUKG,QAVL,CADJ;AAcH,CAzBM;;AAmCP;AACA;AACA;AACA,OAAO,IAAMQ,cAA6C,GAAG,SAAhDA,cAAgD,CAAAX,KAAK,EAAI;AAClE,MACIC,QADJ,GASID,KATJ,CACIC,QADJ;AAAA,MAEIW,IAFJ,GASIZ,KATJ,CAEIY,IAFJ;AAAA,MAGIV,OAHJ,GASIF,KATJ,CAGIE,OAHJ;AAAA,sBASIF,KATJ,CAIII,KAJJ;AAAA,MAIIA,KAJJ,8BAIY,KAJZ;AAAA,qBASIJ,KATJ,CAKIa,KALJ;AAAA,MAKIA,KALJ,6BAKY,KALZ;AAAA,uBASIb,KATJ,CAMIK,MANJ;AAAA,MAMIA,MANJ,+BAMa,IANb;AAAA,0BASIL,KATJ,CAOIM,SAPJ;AAAA,MAOIA,SAPJ,kCAOgB,IAPhB;AAAA,MAQOQ,IARP,4BASId,KATJ;;AAUA,sBACI,oBAAC,GAAD;AACI,mBAAaA,KAAK,CAAC,aAAD,CADtB;AAEI,IAAA,QAAQ,EAAEC,QAFd;AAGI,IAAA,IAAI,EAAEG,KAHV;AAII,IAAA,OAAO,EAAEF,OAJb;AAKI,IAAA,KAAK,EAAEW,KALX;AAMI,IAAA,MAAM,EAAER,MANZ;AAOI,IAAA,IAAI,EAAEO,IAPV;AAQI,IAAA,SAAS,EAAEd,UAAU,CAAC,4BAAD,EAA+BQ,SAA/B;AARzB,KASQQ,IATR,EADJ;AAaH,CAxBM;AA0BP;AACA;AACA;;AACA,OAAO,IAAMC,UAA+B,GAAG,SAAlCA,UAAkC,CAAAf,KAAK;AAAA,sBAAI,oBAAC,IAAD,EAAUA,KAAV,CAAJ;AAAA,CAA7C","sourcesContent":["import React from \"react\";\nimport * as RmwcButton from \"@rmwc/button\";\nimport { Fab, FabProps } from \"@rmwc/fab\";\nimport { Icon, IconProps } from \"../Icon/Icon\";\nimport classNames from \"classnames\";\nimport { SyntheticEvent } from \"react\";\n\nexport interface ButtonProps {\n    // Make button flat (only applicable to Primary button).\n    flat?: boolean;\n\n    // Make button smaller.\n    small?: boolean;\n\n    // onClick handler.\n    onClick?: (event: React.MouseEvent<any, MouseEvent>) => void | null;\n\n    // Label and optionally an icon (using Button.Icon component).\n    children?: React.ReactNode;\n\n    // Show ripple effect on button click. Default: true\n    ripple?: boolean;\n\n    className?: string;\n\n    disabled?: boolean;\n\n    style?: { [key: string]: any };\n\n    // For testing purposes.\n    \"data-testid\"?: string;\n}\n\n/**\n * Shows a default button, used typically when action is not of high priority.\n */\nexport const ButtonDefault: React.FC<ButtonProps> = props => {\n    const { disabled, onClick, children, small, ripple = true, className = \"\", style } = props;\n\n    return (\n        <RmwcButton.Button\n            style={style}\n            disabled={disabled}\n            dense={small}\n            onClick={onClick}\n            ripple={ripple}\n            className={classNames(\"webiny-ui-button\", className)}\n            data-testid={props[\"data-testid\"]}\n        >\n            {children}\n        </RmwcButton.Button>\n    );\n};\n\n/**\n * Shows primary button, eg. for submitting forms.\n */\nexport const ButtonPrimary: React.FC<ButtonProps> = props => {\n    const {\n        disabled,\n        onClick,\n        children,\n        small = false,\n        flat = false,\n        ripple = true,\n        style = {},\n        className = null\n    } = props;\n    return (\n        <RmwcButton.Button\n            raised={!flat}\n            dense={small}\n            disabled={disabled}\n            unelevated={flat}\n            ripple={ripple}\n            onClick={onClick}\n            style={style}\n            className={classNames(\"webiny-ui-button webiny-ui-button--primary\", className)}\n            data-testid={props[\"data-testid\"]}\n        >\n            {children}\n        </RmwcButton.Button>\n    );\n};\n\n/**\n * Shows a secondary button - eg. for doing a reset on a form.\n */\nexport const ButtonSecondary: React.FC<ButtonProps> = props => {\n    const {\n        disabled,\n        onClick,\n        children,\n        small = false,\n        ripple = true,\n        className = null,\n        style = {}\n    } = props;\n\n    return (\n        <RmwcButton.Button\n            disabled={disabled}\n            outlined\n            dense={small}\n            ripple={ripple}\n            onClick={onClick}\n            style={style}\n            className={classNames(\"webiny-ui-button webiny-ui-button--secondary\", className)}\n            data-testid={props[\"data-testid\"]}\n        >\n            {children}\n        </RmwcButton.Button>\n    );\n};\n\nexport type ButtonFloatingProps = ButtonProps &\n    FabProps & {\n        label?: React.ReactNode;\n        icon?: React.ReactNode;\n        onMouseDown?: (e: SyntheticEvent) => void;\n        onMouseUp?: (e: SyntheticEvent) => void;\n    };\n\n/**\n * A floating button, shown on the side of the screen, typically used for creating new content or accessing settings.\n */\nexport const ButtonFloating: React.FC<ButtonFloatingProps> = props => {\n    const {\n        disabled,\n        icon,\n        onClick,\n        small = false,\n        label = false,\n        ripple = true,\n        className = null,\n        ...rest\n    } = props;\n    return (\n        <Fab\n            data-testid={props[\"data-testid\"]}\n            disabled={disabled}\n            mini={small}\n            onClick={onClick}\n            label={label}\n            ripple={ripple}\n            icon={icon}\n            className={classNames(\"webiny-ui-button--floating\", className)}\n            {...rest}\n        />\n    );\n};\n\n/**\n * Shows an icon, suitable to be shown inside of a button.\n */\nexport const ButtonIcon: React.FC<IconProps> = props => <Icon {...props} />;\n"]}
+{"version":3,"names":["ButtonDefault","props","disabled","onClick","children","small","ripple","className","style","classNames","ButtonPrimary","flat","ButtonSecondary","ButtonFloating","icon","label","rest","ButtonIcon"],"sources":["Button.tsx"],"sourcesContent":["import React from \"react\";\nimport * as RmwcButton from \"@rmwc/button\";\nimport { Fab, FabProps } from \"@rmwc/fab\";\nimport { Icon, IconProps } from \"../Icon/Icon\";\nimport classNames from \"classnames\";\nimport { SyntheticEvent } from \"react\";\n\nexport interface ButtonProps {\n    // Make button flat (only applicable to Primary button).\n    flat?: boolean;\n\n    // Make button smaller.\n    small?: boolean;\n\n    // onClick handler.\n    onClick?: (event: React.MouseEvent<any, MouseEvent>) => void | null;\n\n    // Label and optionally an icon (using Button.Icon component).\n    children?: React.ReactNode;\n\n    // Show ripple effect on button click. Default: true\n    ripple?: boolean;\n\n    className?: string;\n\n    disabled?: boolean;\n\n    style?: { [key: string]: any };\n\n    // For testing purposes.\n    \"data-testid\"?: string;\n}\n\n/**\n * Shows a default button, used typically when action is not of high priority.\n */\nexport const ButtonDefault: React.FC<ButtonProps> = props => {\n    const { disabled, onClick, children, small, ripple = true, className = \"\", style } = props;\n\n    return (\n        <RmwcButton.Button\n            style={style}\n            disabled={disabled}\n            dense={small}\n            onClick={onClick}\n            ripple={ripple}\n            className={classNames(\"webiny-ui-button\", className)}\n            data-testid={props[\"data-testid\"]}\n        >\n            {children}\n        </RmwcButton.Button>\n    );\n};\n\n/**\n * Shows primary button, eg. for submitting forms.\n */\nexport const ButtonPrimary: React.FC<ButtonProps> = props => {\n    const {\n        disabled,\n        onClick,\n        children,\n        small = false,\n        flat = false,\n        ripple = true,\n        style = {},\n        className = null\n    } = props;\n    return (\n        <RmwcButton.Button\n            raised={!flat}\n            dense={small}\n            disabled={disabled}\n            unelevated={flat}\n            ripple={ripple}\n            onClick={onClick}\n            style={style}\n            className={classNames(\"webiny-ui-button webiny-ui-button--primary\", className)}\n            data-testid={props[\"data-testid\"]}\n        >\n            {children}\n        </RmwcButton.Button>\n    );\n};\n\n/**\n * Shows a secondary button - eg. for doing a reset on a form.\n */\nexport const ButtonSecondary: React.FC<ButtonProps> = props => {\n    const {\n        disabled,\n        onClick,\n        children,\n        small = false,\n        ripple = true,\n        className = null,\n        style = {}\n    } = props;\n\n    return (\n        <RmwcButton.Button\n            disabled={disabled}\n            outlined\n            dense={small}\n            ripple={ripple}\n            onClick={onClick}\n            style={style}\n            className={classNames(\"webiny-ui-button webiny-ui-button--secondary\", className)}\n            data-testid={props[\"data-testid\"]}\n        >\n            {children}\n        </RmwcButton.Button>\n    );\n};\n\nexport type ButtonFloatingProps = ButtonProps &\n    FabProps & {\n        label?: React.ReactNode;\n        icon?: React.ReactNode;\n        onMouseDown?: (e: SyntheticEvent) => void;\n        onMouseUp?: (e: SyntheticEvent) => void;\n    };\n\n/**\n * A floating button, shown on the side of the screen, typically used for creating new content or accessing settings.\n */\nexport const ButtonFloating: React.FC<ButtonFloatingProps> = props => {\n    const {\n        disabled,\n        icon,\n        onClick,\n        small = false,\n        label = false,\n        ripple = true,\n        className = null,\n        ...rest\n    } = props;\n    return (\n        <Fab\n            data-testid={props[\"data-testid\"]}\n            disabled={disabled}\n            mini={small}\n            onClick={onClick}\n            label={label}\n            ripple={ripple}\n            icon={icon}\n            className={classNames(\"webiny-ui-button--floating\", className)}\n            {...rest}\n        />\n    );\n};\n\n/**\n * Shows an icon, suitable to be shown inside of a button.\n */\nexport const ButtonIcon: React.FC<IconProps> = props => <Icon {...props} />;\n"],"mappings":"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"}

package/Button/Button.stories.js

@@ -1,53 +1,66 @@
-import React from "react";
-import { storiesOf } from "@storybook/react";
-import { withKnobs, text, boolean } from "@storybook/addon-knobs";
-import { Story, StoryReadme, StorySandbox } from "@webiny/storybook-utils/Story";
-import readme from "./../Button/README.md";
-import { ReactComponent as CloudIcon } from "./assets/baseline-cloud_done-24px.svg";
-import { ButtonPrimary, ButtonSecondary, ButtonDefault, ButtonFloating, ButtonIcon } from "./Button";
-var story = storiesOf("Components/Button", module);
-story.addDecorator(withKnobs);
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@storybook/react");
+
+var _addonKnobs = require("@storybook/addon-knobs");
+
+var _Story = require("@webiny/storybook-utils/Story");
+
+var _README = _interopRequireDefault(require("./../Button/README.md"));
+
+var _baselineCloud_done24px = require("./assets/baseline-cloud_done-24px.svg");
+
+var _Button = require("./Button");
+
+var story = (0, _react2.storiesOf)("Components/Button", module);
+story.addDecorator(_addonKnobs.withKnobs);
 story.add("standard buttons", function () {
-  var label = text("Label", "Click to proceed");
-  var small = boolean("Small", false);
-  var flat = boolean("Flat", false);
-  var icon = /*#__PURE__*/React.createElement(ButtonIcon, {
-    icon: /*#__PURE__*/React.createElement(CloudIcon, null)
+  var label = (0, _addonKnobs.text)("Label", "Click to proceed");
+  var small = (0, _addonKnobs.boolean)("Small", false);
+  var flat = (0, _addonKnobs.boolean)("Flat", false);
+
+  var icon = /*#__PURE__*/_react.default.createElement(_Button.ButtonIcon, {
+    icon: /*#__PURE__*/_react.default.createElement(_baselineCloud_done24px.ReactComponent, null)
   });
-  return /*#__PURE__*/React.createElement(Story, null, /*#__PURE__*/React.createElement(StoryReadme, null, readme), /*#__PURE__*/React.createElement(StorySandbox, {
+
+  return /*#__PURE__*/_react.default.createElement(_Story.Story, null, /*#__PURE__*/_react.default.createElement(_Story.StoryReadme, null, _README.default), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, {
     title: "Primary button"
-  }, /*#__PURE__*/React.createElement(ButtonPrimary, {
+  }, /*#__PURE__*/_react.default.createElement(_Button.ButtonPrimary, {
     small: small,
     flat: flat
-  }, label)), /*#__PURE__*/React.createElement(StorySandbox, {
+  }, label)), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, {
     title: "Primary button with icon"
-  }, /*#__PURE__*/React.createElement(ButtonPrimary, {
+  }, /*#__PURE__*/_react.default.createElement(_Button.ButtonPrimary, {
     small: small,
     flat: flat
-  }, icon, label)), /*#__PURE__*/React.createElement(StorySandbox, {
+  }, icon, label)), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, {
     title: "Secondary button"
-  }, /*#__PURE__*/React.createElement(ButtonSecondary, {
+  }, /*#__PURE__*/_react.default.createElement(_Button.ButtonSecondary, {
     small: small
-  }, label)), /*#__PURE__*/React.createElement(StorySandbox, {
+  }, label)), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, {
     title: "Secondary button with icon"
-  }, /*#__PURE__*/React.createElement(ButtonSecondary, {
+  }, /*#__PURE__*/_react.default.createElement(_Button.ButtonSecondary, {
     small: small
-  }, icon, label)), /*#__PURE__*/React.createElement(StorySandbox, {
+  }, icon, label)), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, {
     title: "Default button"
-  }, /*#__PURE__*/React.createElement(ButtonDefault, {
+  }, /*#__PURE__*/_react.default.createElement(_Button.ButtonDefault, {
     small: small
-  }, label)), /*#__PURE__*/React.createElement(StorySandbox, {
+  }, label)), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, {
     title: "Default button with icon"
-  }, /*#__PURE__*/React.createElement(ButtonDefault, {
+  }, /*#__PURE__*/_react.default.createElement(_Button.ButtonDefault, {
     small: small
-  }, icon, label)), /*#__PURE__*/React.createElement(StorySandbox, {
+  }, icon, label)), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, {
     title: "Floating button"
-  }, /*#__PURE__*/React.createElement(ButtonFloating, {
+  }, /*#__PURE__*/_react.default.createElement(_Button.ButtonFloating, {
     small: small,
     icon: icon
   })));
 }, {
   info: {
-    propTables: [ButtonPrimary, ButtonSecondary, ButtonDefault, ButtonFloating, ButtonIcon]
+    propTables: [_Button.ButtonPrimary, _Button.ButtonSecondary, _Button.ButtonDefault, _Button.ButtonFloating, _Button.ButtonIcon]
   }
 });

package/Button/Button.stories.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Button.stories.tsx"],"names":["React","storiesOf","withKnobs","text","boolean","Story","StoryReadme","StorySandbox","readme","ReactComponent","CloudIcon","ButtonPrimary","ButtonSecondary","ButtonDefault","ButtonFloating","ButtonIcon","story","module","addDecorator","add","label","small","flat","icon","info","propTables"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,SAAT,QAA0B,kBAA1B;AACA,SAASC,SAAT,EAAoBC,IAApB,EAA0BC,OAA1B,QAAyC,wBAAzC;AACA,SAASC,KAAT,EAAgBC,WAAhB,EAA6BC,YAA7B,QAAiD,+BAAjD;AACA,OAAOC,MAAP;AACA,SAASC,cAAc,IAAIC,SAA3B;AAEA,SACIC,aADJ,EAEIC,eAFJ,EAGIC,aAHJ,EAIIC,cAJJ,EAKIC,UALJ;AAQA,IAAMC,KAAK,GAAGf,SAAS,CAAC,mBAAD,EAAsBgB,MAAtB,CAAvB;AACAD,KAAK,CAACE,YAAN,CAAmBhB,SAAnB;AAEAc,KAAK,CAACG,GAAN,CACI,kBADJ,EAEI,YAAM;AACF,MAAMC,KAAK,GAAGjB,IAAI,CAAC,OAAD,EAAU,kBAAV,CAAlB;AACA,MAAMkB,KAAK,GAAGjB,OAAO,CAAC,OAAD,EAAU,KAAV,CAArB;AACA,MAAMkB,IAAI,GAAGlB,OAAO,CAAC,MAAD,EAAS,KAAT,CAApB;AACA,MAAMmB,IAAI,gBAAG,oBAAC,UAAD;AAAY,IAAA,IAAI,eAAE,oBAAC,SAAD;AAAlB,IAAb;AAEA,sBACI,oBAAC,KAAD,qBACI,oBAAC,WAAD,QAAcf,MAAd,CADJ,eAEI,oBAAC,YAAD;AAAc,IAAA,KAAK,EAAE;AAArB,kBACI,oBAAC,aAAD;AAAe,IAAA,KAAK,EAAEa,KAAtB;AAA6B,IAAA,IAAI,EAAEC;AAAnC,KACKF,KADL,CADJ,CAFJ,eAOI,oBAAC,YAAD;AAAc,IAAA,KAAK,EAAE;AAArB,kBACI,oBAAC,aAAD;AAAe,IAAA,KAAK,EAAEC,KAAtB;AAA6B,IAAA,IAAI,EAAEC;AAAnC,KACKC,IADL,EAEKH,KAFL,CADJ,CAPJ,eAaI,oBAAC,YAAD;AAAc,IAAA,KAAK,EAAE;AAArB,kBACI,oBAAC,eAAD;AAAiB,IAAA,KAAK,EAAEC;AAAxB,KAAgCD,KAAhC,CADJ,CAbJ,eAgBI,oBAAC,YAAD;AAAc,IAAA,KAAK,EAAE;AAArB,kBACI,oBAAC,eAAD;AAAiB,IAAA,KAAK,EAAEC;AAAxB,KACKE,IADL,EAEKH,KAFL,CADJ,CAhBJ,eAsBI,oBAAC,YAAD;AAAc,IAAA,KAAK,EAAE;AAArB,kBACI,oBAAC,aAAD;AAAe,IAAA,KAAK,EAAEC;AAAtB,KAA8BD,KAA9B,CADJ,CAtBJ,eAyBI,oBAAC,YAAD;AAAc,IAAA,KAAK,EAAE;AAArB,kBACI,oBAAC,aAAD;AAAe,IAAA,KAAK,EAAEC;AAAtB,KACKE,IADL,EAEKH,KAFL,CADJ,CAzBJ,eA+BI,oBAAC,YAAD;AAAc,IAAA,KAAK,EAAE;AAArB,kBACI,oBAAC,cAAD;AAAgB,IAAA,KAAK,EAAEC,KAAvB;AAA8B,IAAA,IAAI,EAAEE;AAApC,IADJ,CA/BJ,CADJ;AAqCH,CA7CL,EA8CI;AACIC,EAAAA,IAAI,EAAE;AACFC,IAAAA,UAAU,EAAE,CAACd,aAAD,EAAgBC,eAAhB,EAAiCC,aAAjC,EAAgDC,cAAhD,EAAgEC,UAAhE;AADV;AADV,CA9CJ","sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { withKnobs, text, boolean } from \"@storybook/addon-knobs\";\nimport { Story, StoryReadme, StorySandbox } from \"@webiny/storybook-utils/Story\";\nimport readme from \"./../Button/README.md\";\nimport { ReactComponent as CloudIcon } from \"./assets/baseline-cloud_done-24px.svg\";\n\nimport {\n    ButtonPrimary,\n    ButtonSecondary,\n    ButtonDefault,\n    ButtonFloating,\n    ButtonIcon\n} from \"./Button\";\n\nconst story = storiesOf(\"Components/Button\", module);\nstory.addDecorator(withKnobs);\n\nstory.add(\n    \"standard buttons\",\n    () => {\n        const label = text(\"Label\", \"Click to proceed\");\n        const small = boolean(\"Small\", false);\n        const flat = boolean(\"Flat\", false);\n        const icon = <ButtonIcon icon={<CloudIcon />} />;\n\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox title={\"Primary button\"}>\n                    <ButtonPrimary small={small} flat={flat}>\n                        {label}\n                    </ButtonPrimary>\n                </StorySandbox>\n                <StorySandbox title={\"Primary button with icon\"}>\n                    <ButtonPrimary small={small} flat={flat}>\n                        {icon}\n                        {label}\n                    </ButtonPrimary>\n                </StorySandbox>\n                <StorySandbox title={\"Secondary button\"}>\n                    <ButtonSecondary small={small}>{label}</ButtonSecondary>\n                </StorySandbox>\n                <StorySandbox title={\"Secondary button with icon\"}>\n                    <ButtonSecondary small={small}>\n                        {icon}\n                        {label}\n                    </ButtonSecondary>\n                </StorySandbox>\n                <StorySandbox title={\"Default button\"}>\n                    <ButtonDefault small={small}>{label}</ButtonDefault>\n                </StorySandbox>\n                <StorySandbox title={\"Default button with icon\"}>\n                    <ButtonDefault small={small}>\n                        {icon}\n                        {label}\n                    </ButtonDefault>\n                </StorySandbox>\n                <StorySandbox title={\"Floating button\"}>\n                    <ButtonFloating small={small} icon={icon} />\n                </StorySandbox>\n            </Story>\n        );\n    },\n    {\n        info: {\n            propTables: [ButtonPrimary, ButtonSecondary, ButtonDefault, ButtonFloating, ButtonIcon]\n        }\n    }\n);\n"]}
+{"version":3,"names":["story","storiesOf","module","addDecorator","withKnobs","add","label","text","small","boolean","flat","icon","readme","info","propTables","ButtonPrimary","ButtonSecondary","ButtonDefault","ButtonFloating","ButtonIcon"],"sources":["Button.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { withKnobs, text, boolean } from \"@storybook/addon-knobs\";\nimport { Story, StoryReadme, StorySandbox } from \"@webiny/storybook-utils/Story\";\nimport readme from \"./../Button/README.md\";\nimport { ReactComponent as CloudIcon } from \"./assets/baseline-cloud_done-24px.svg\";\n\nimport {\n    ButtonPrimary,\n    ButtonSecondary,\n    ButtonDefault,\n    ButtonFloating,\n    ButtonIcon\n} from \"./Button\";\n\nconst story = storiesOf(\"Components/Button\", module);\nstory.addDecorator(withKnobs);\n\nstory.add(\n    \"standard buttons\",\n    () => {\n        const label = text(\"Label\", \"Click to proceed\");\n        const small = boolean(\"Small\", false);\n        const flat = boolean(\"Flat\", false);\n        const icon = <ButtonIcon icon={<CloudIcon />} />;\n\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox title={\"Primary button\"}>\n                    <ButtonPrimary small={small} flat={flat}>\n                        {label}\n                    </ButtonPrimary>\n                </StorySandbox>\n                <StorySandbox title={\"Primary button with icon\"}>\n                    <ButtonPrimary small={small} flat={flat}>\n                        {icon}\n                        {label}\n                    </ButtonPrimary>\n                </StorySandbox>\n                <StorySandbox title={\"Secondary button\"}>\n                    <ButtonSecondary small={small}>{label}</ButtonSecondary>\n                </StorySandbox>\n                <StorySandbox title={\"Secondary button with icon\"}>\n                    <ButtonSecondary small={small}>\n                        {icon}\n                        {label}\n                    </ButtonSecondary>\n                </StorySandbox>\n                <StorySandbox title={\"Default button\"}>\n                    <ButtonDefault small={small}>{label}</ButtonDefault>\n                </StorySandbox>\n                <StorySandbox title={\"Default button with icon\"}>\n                    <ButtonDefault small={small}>\n                        {icon}\n                        {label}\n                    </ButtonDefault>\n                </StorySandbox>\n                <StorySandbox title={\"Floating button\"}>\n                    <ButtonFloating small={small} icon={icon} />\n                </StorySandbox>\n            </Story>\n        );\n    },\n    {\n        info: {\n            propTables: [ButtonPrimary, ButtonSecondary, ButtonDefault, ButtonFloating, ButtonIcon]\n        }\n    }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AAQA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,mBAAV,EAA+BC,MAA/B,CAAd;AACAF,KAAK,CAACG,YAAN,CAAmBC,qBAAnB;AAEAJ,KAAK,CAACK,GAAN,CACI,kBADJ,EAEI,YAAM;EACF,IAAMC,KAAK,GAAG,IAAAC,gBAAA,EAAK,OAAL,EAAc,kBAAd,CAAd;EACA,IAAMC,KAAK,GAAG,IAAAC,mBAAA,EAAQ,OAAR,EAAiB,KAAjB,CAAd;EACA,IAAMC,IAAI,GAAG,IAAAD,mBAAA,EAAQ,MAAR,EAAgB,KAAhB,CAAb;;EACA,IAAME,IAAI,gBAAG,6BAAC,kBAAD;IAAY,IAAI,eAAE,6BAAC,sCAAD;EAAlB,EAAb;;EAEA,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,6BAAC,qBAAD;IAAe,KAAK,EAAEJ,KAAtB;IAA6B,IAAI,EAAEE;EAAnC,GACKJ,KADL,CADJ,CAFJ,eAOI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,6BAAC,qBAAD;IAAe,KAAK,EAAEE,KAAtB;IAA6B,IAAI,EAAEE;EAAnC,GACKC,IADL,EAEKL,KAFL,CADJ,CAPJ,eAaI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,6BAAC,uBAAD;IAAiB,KAAK,EAAEE;EAAxB,GAAgCF,KAAhC,CADJ,CAbJ,eAgBI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,6BAAC,uBAAD;IAAiB,KAAK,EAAEE;EAAxB,GACKG,IADL,EAEKL,KAFL,CADJ,CAhBJ,eAsBI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,6BAAC,qBAAD;IAAe,KAAK,EAAEE;EAAtB,GAA8BF,KAA9B,CADJ,CAtBJ,eAyBI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,6BAAC,qBAAD;IAAe,KAAK,EAAEE;EAAtB,GACKG,IADL,EAEKL,KAFL,CADJ,CAzBJ,eA+BI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,6BAAC,sBAAD;IAAgB,KAAK,EAAEE,KAAvB;IAA8B,IAAI,EAAEG;EAApC,EADJ,CA/BJ,CADJ;AAqCH,CA7CL,EA8CI;EACIE,IAAI,EAAE;IACFC,UAAU,EAAE,CAACC,qBAAD,EAAgBC,uBAAhB,EAAiCC,qBAAjC,EAAgDC,sBAAhD,EAAgEC,kBAAhE;EADV;AADV,CA9CJ"}

package/Button/CopyButton/CopyButton.js

@@ -1,9 +1,23 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+"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.CopyButton = void 0;
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _file_copy24px = require("../assets/file_copy-24px.svg");
+
+var _index = require("../index");
+
 var _excluded = ["value", "onCopy"];
-import React from "react";
-import { ReactComponent as CopyToClipboardIcon } from "../assets/file_copy-24px.svg";
-import { IconButton } from "../index";
-import { useCallback } from "react";
 
 /**
  * Shows the icon button.
@@ -11,19 +25,18 @@ import { useCallback } from "react";
 var CopyButton = function CopyButton(props) {
   var value = props.value,
       onCopy = props.onCopy,
-      otherProps = _objectWithoutProperties(props, _excluded);
-
-  var copyToClipboard = useCallback(function () {
+      otherProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var copyToClipboard = (0, _react.useCallback)(function () {
     navigator.clipboard.writeText(value);
 
     if (typeof onCopy === "function") {
       onCopy();
     }
   }, [value]);
-  return /*#__PURE__*/React.createElement(IconButton, Object.assign({}, otherProps, {
+  return /*#__PURE__*/_react.default.createElement(_index.IconButton, Object.assign({}, otherProps, {
     onClick: copyToClipboard,
-    icon: /*#__PURE__*/React.createElement(CopyToClipboardIcon, null)
+    icon: /*#__PURE__*/_react.default.createElement(_file_copy24px.ReactComponent, null)
   }));
 };
 
-export { CopyButton };
+exports.CopyButton = CopyButton;

package/Button/CopyButton/CopyButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["CopyButton.tsx"],"names":["React","ReactComponent","CopyToClipboardIcon","IconButton","useCallback","CopyButton","props","value","onCopy","otherProps","copyToClipboard","navigator","clipboard","writeText"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,cAAc,IAAIC,mBAA3B;AACA,SAASC,UAAT;AAEA,SAASC,WAAT,QAA4B,OAA5B;;AAOA;AACA;AACA;AACA,IAAMC,UAAqC,GAAG,SAAxCA,UAAwC,CAAAC,KAAK,EAAI;AACnD,MAAQC,KAAR,GAAyCD,KAAzC,CAAQC,KAAR;AAAA,MAAeC,MAAf,GAAyCF,KAAzC,CAAeE,MAAf;AAAA,MAA0BC,UAA1B,4BAAyCH,KAAzC;;AAEA,MAAMI,eAAe,GAAGN,WAAW,CAAC,YAAM;AACtCO,IAAAA,SAAS,CAACC,SAAV,CAAoBC,SAApB,CAA8BN,KAA9B;;AACA,QAAI,OAAOC,MAAP,KAAkB,UAAtB,EAAkC;AAC9BA,MAAAA,MAAM;AACT;AACJ,GALkC,EAKhC,CAACD,KAAD,CALgC,CAAnC;AAOA,sBAAO,oBAAC,UAAD,oBAAgBE,UAAhB;AAA4B,IAAA,OAAO,EAAEC,eAArC;AAAsD,IAAA,IAAI,eAAE,oBAAC,mBAAD;AAA5D,KAAP;AACH,CAXD;;AAaA,SAASL,UAAT","sourcesContent":["import React from \"react\";\nimport { ReactComponent as CopyToClipboardIcon } from \"../assets/file_copy-24px.svg\";\nimport { IconButton } from \"../index\";\nimport { FormComponentProps } from \"../../types\";\nimport { useCallback } from \"react\";\n\nexport interface CopyButtonProps extends FormComponentProps {\n    value: string;\n    onCopy?: () => void;\n}\n\n/**\n * Shows the icon button.\n */\nconst CopyButton: React.FC<CopyButtonProps> = props => {\n    const { value, onCopy, ...otherProps } = props;\n\n    const copyToClipboard = useCallback(() => {\n        navigator.clipboard.writeText(value);\n        if (typeof onCopy === \"function\") {\n            onCopy();\n        }\n    }, [value]);\n\n    return <IconButton {...otherProps} onClick={copyToClipboard} icon={<CopyToClipboardIcon />} />;\n};\n\nexport { CopyButton };\n"]}
+{"version":3,"names":["CopyButton","props","value","onCopy","otherProps","copyToClipboard","useCallback","navigator","clipboard","writeText"],"sources":["CopyButton.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as CopyToClipboardIcon } from \"../assets/file_copy-24px.svg\";\nimport { IconButton } from \"../index\";\nimport { FormComponentProps } from \"../../types\";\nimport { useCallback } from \"react\";\n\nexport interface CopyButtonProps extends FormComponentProps {\n    value: string;\n    onCopy?: () => void;\n}\n\n/**\n * Shows the icon button.\n */\nconst CopyButton: React.FC<CopyButtonProps> = props => {\n    const { value, onCopy, ...otherProps } = props;\n\n    const copyToClipboard = useCallback(() => {\n        navigator.clipboard.writeText(value);\n        if (typeof onCopy === \"function\") {\n            onCopy();\n        }\n    }, [value]);\n\n    return <IconButton {...otherProps} onClick={copyToClipboard} icon={<CopyToClipboardIcon />} />;\n};\n\nexport { CopyButton };\n"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AACA;;;;AASA;AACA;AACA;AACA,IAAMA,UAAqC,GAAG,SAAxCA,UAAwC,CAAAC,KAAK,EAAI;EACnD,IAAQC,KAAR,GAAyCD,KAAzC,CAAQC,KAAR;EAAA,IAAeC,MAAf,GAAyCF,KAAzC,CAAeE,MAAf;EAAA,IAA0BC,UAA1B,0CAAyCH,KAAzC;EAEA,IAAMI,eAAe,GAAG,IAAAC,kBAAA,EAAY,YAAM;IACtCC,SAAS,CAACC,SAAV,CAAoBC,SAApB,CAA8BP,KAA9B;;IACA,IAAI,OAAOC,MAAP,KAAkB,UAAtB,EAAkC;MAC9BA,MAAM;IACT;EACJ,CALuB,EAKrB,CAACD,KAAD,CALqB,CAAxB;EAOA,oBAAO,6BAAC,iBAAD,oBAAgBE,UAAhB;IAA4B,OAAO,EAAEC,eAArC;IAAsD,IAAI,eAAE,6BAAC,6BAAD;EAA5D,GAAP;AACH,CAXD"}