@webiny/ui 0.0.0-mt-3 → 0.0.0-unstable.3386f66516

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1 @@
+{"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.d.ts

@@ -1,41 +1,62 @@
-import * as React from "react";
+/// <reference types="web" />
+import React from "react";
 import { FabProps } from "@rmwc/fab";
 import { IconProps } from "../Icon/Icon";
 import { SyntheticEvent } from "react";
-export declare type ButtonProps = {
+export interface ButtonProps {
+    /**
+     * Make button flat (only applicable to Primary button).
+     */
     flat?: boolean;
+    /**
+     * Make button smaller.
+     */
     small?: boolean;
-    onClick?: (event: React.MouseEvent<any, MouseEvent>) => void | null;
+    /**
+     * Returning `any` allows us to pass callbacks to the button without worrying about their
+     * specific return types. Buttons don't use return values from callbacks, so we don't have to worry
+     * about their return types at all.
+     */
+    onClick?: (event: React.MouseEvent<any, MouseEvent>) => any;
+    /**
+     * Label and optionally an icon (using Button.Icon component).
+     */
     children?: React.ReactNode;
+    /**
+     * Show ripple effect on button click.
+     */
     ripple?: boolean;
+    /**
+     * Additional button class name.
+     */
     className?: string;
+    /**
+     * Is button disabled?
+     */
     disabled?: boolean;
+    /**
+     * Additional inline styles.
+     */
     style?: {
         [key: string]: any;
     };
+    /**
+     * ID of the element for testing purposes.
+     */
     "data-testid"?: string;
-};
+}
 /**
  * Shows a default button, used typically when action is not of high priority.
- * @param props
- * @returns {*}
- * @constructor
  */
-export declare const ButtonDefault: (props: ButtonProps) => JSX.Element;
+export declare const ButtonDefault: React.FC<ButtonProps>;
 /**
  * Shows primary button, eg. for submitting forms.
- * @param props
- * @returns {*}
- * @constructor
  */
-export declare const ButtonPrimary: (props: ButtonProps) => JSX.Element;
+export declare const ButtonPrimary: React.FC<ButtonProps>;
 /**
  * Shows a secondary button - eg. for doing a reset on a form.
- * @param props
- * @returns {*}
- * @constructor
  */
-export declare const ButtonSecondary: (props: ButtonProps) => JSX.Element;
+export declare const ButtonSecondary: React.FC<ButtonProps>;
 export declare type ButtonFloatingProps = ButtonProps & FabProps & {
     label?: React.ReactNode;
     icon?: React.ReactNode;
@@ -44,15 +65,9 @@ export declare type ButtonFloatingProps = ButtonProps & FabProps & {
 };
 /**
  * A floating button, shown on the side of the screen, typically used for creating new content or accessing settings.
- * @param props
- * @returns {*}
- * @constructor
  */
-export declare const ButtonFloating: (props: ButtonFloatingProps) => JSX.Element;
+export declare const ButtonFloating: React.FC<ButtonFloatingProps>;
 /**
  * Shows an icon, suitable to be shown inside of a button.
- * @param props
- * @returns {*}
- * @constructor
  */
-export declare const ButtonIcon: (props: IconProps) => JSX.Element;
+export declare const ButtonIcon: React.FC<IconProps>;

package/Button/Button.js

@@ -1,45 +1,60 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["disabled", "icon", "onClick", "small", "label", "ripple", "className"];
-import * as React from "react";
-import * as R from "@rmwc/button";
-import { Fab } from "@rmwc/fab";
-import { Icon } from "../Icon/Icon";
-import classNames from "classnames";
+"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 _Button = require("./Button.styles");
+
+var _excluded = ["disabled", "label", "icon", "onClick", "small", "ripple", "className"];
 
 /**
  * Shows a default button, used typically when action is not of high priority.
- * @param props
- * @returns {*}
- * @constructor
  */
-export var ButtonDefault = function ButtonDefault(props) {
+var ButtonDefault = function ButtonDefault(props) {
   var disabled = props.disabled,
       onClick = props.onClick,
       children = props.children,
       small = props.small,
-      _props$ripple = props.ripple,
-      ripple = _props$ripple === void 0 ? true : _props$ripple,
+      ripple = props.ripple,
       _props$className = props.className,
       className = _props$className === void 0 ? "" : _props$className,
       style = props.style;
-  return /*#__PURE__*/React.createElement(R.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);
 };
 /**
  * Shows primary button, eg. for submitting forms.
- * @param props
- * @returns {*}
- * @constructor
  */
 
-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,13 +62,12 @@ export var ButtonPrimary = function ButtonPrimary(props) {
       small = _props$small === void 0 ? false : _props$small,
       _props$flat = props.flat,
       flat = _props$flat === void 0 ? false : _props$flat,
-      _props$ripple2 = props.ripple,
-      ripple = _props$ripple2 === void 0 ? true : _props$ripple2,
+      ripple = props.ripple,
       _props$style = props.style,
-      style = _props$style === void 0 ? null : _props$style,
+      style = _props$style === void 0 ? {} : _props$style,
       _props$className2 = props.className,
       className = _props$className2 === void 0 ? null : _props$className2;
-  return /*#__PURE__*/React.createElement(R.Button, {
+  return /*#__PURE__*/_react.default.createElement(RmwcButton.Button, {
     raised: !flat,
     dense: small,
     disabled: disabled,
@@ -61,62 +75,57 @@ 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);
 };
 /**
  * Shows a secondary button - eg. for doing a reset on a form.
- * @param props
- * @returns {*}
- * @constructor
  */
 
-export var ButtonSecondary = function ButtonSecondary(props) {
+
+exports.ButtonPrimary = ButtonPrimary;
+
+var ButtonSecondary = function ButtonSecondary(props) {
   var disabled = props.disabled,
       onClick = props.onClick,
       children = props.children,
       _props$small2 = props.small,
       small = _props$small2 === void 0 ? false : _props$small2,
-      _props$ripple3 = props.ripple,
-      ripple = _props$ripple3 === void 0 ? true : _props$ripple3,
+      ripple = props.ripple,
       _props$className3 = props.className,
       className = _props$className3 === void 0 ? null : _props$className3,
       _props$style2 = props.style,
-      style = _props$style2 === void 0 ? null : _props$style2;
-  return /*#__PURE__*/React.createElement(R.Button, {
+      style = _props$style2 === void 0 ? {} : _props$style2;
+  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", _Button.webinyButtonStyles, 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.
- * @param props
- * @returns {*}
- * @constructor
  */
-export var ButtonFloating = function ButtonFloating(props) {
+var ButtonFloating = function ButtonFloating(props) {
   var disabled = props.disabled,
+      label = props.label,
       icon = props.icon,
       onClick = props.onClick,
       _props$small3 = props.small,
       small = _props$small3 === void 0 ? false : _props$small3,
-      _props$label = props.label,
-      label = _props$label === void 0 ? false : _props$label,
-      _props$ripple4 = props.ripple,
-      ripple = _props$ripple4 === void 0 ? true : _props$ripple4,
+      ripple = props.ripple,
       _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,
@@ -124,16 +133,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.
- * @param props
- * @returns {*}
- * @constructor
  */
 
-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

@@ -0,0 +1 @@
+{"version":3,"names":["ButtonDefault","props","disabled","onClick","children","small","ripple","className","style","classNames","ButtonPrimary","flat","ButtonSecondary","webinyButtonStyles","ButtonFloating","label","icon","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\";\nimport { webinyButtonStyles } from \"./Button.styles\";\n\nexport interface ButtonProps {\n    /**\n     * Make button flat (only applicable to Primary button).\n     */\n    flat?: boolean;\n\n    /**\n     * Make button smaller.\n     */\n    small?: boolean;\n\n    /**\n     * Returning `any` allows us to pass callbacks to the button without worrying about their\n     * specific return types. Buttons don't use return values from callbacks, so we don't have to worry\n     * about their return types at all.\n     */\n    onClick?: (event: React.MouseEvent<any, MouseEvent>) => any;\n\n    /**\n     * Label and optionally an icon (using Button.Icon component).\n     */\n    children?: React.ReactNode;\n\n    /**\n     * Show ripple effect on button click.\n     */\n    ripple?: boolean;\n\n    /**\n     * Additional button class name.\n     */\n    className?: string;\n\n    /**\n     * Is button disabled?\n     */\n    disabled?: boolean;\n\n    /**\n     * Additional inline styles.\n     */\n    style?: { [key: string]: any };\n\n    /**\n     * ID of the element for testing purposes.\n     */\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, 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,\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,\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(\n                \"webiny-ui-button webiny-ui-button--secondary\",\n                webinyButtonStyles,\n                className\n            )}\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        label,\n        icon,\n        onClick,\n        small = false,\n        ripple,\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 "@svgr/webpack!./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

@@ -0,0 +1 @@
+{"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/Button.styles.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Controls the button styles
+ * @type {string}
+ */
+declare const webinyButtonStyles: string;
+export { webinyButtonStyles };

package/Button/Button.styles.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.webinyButtonStyles = void 0;
+
+var _emotion = require("emotion");
+
+/**
+ * Controls the button styles
+ * @type {string}
+ */
+var webinyButtonStyles = /*#__PURE__*/(0, _emotion.css)("&.webiny-ui-button--secondary:not(:disabled){border-color:var(--mdc-theme-primary);}}label:webinyButtonStyles;");
+exports.webinyButtonStyles = webinyButtonStyles;

package/Button/Button.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["webinyButtonStyles","css"],"sources":["Button.styles.ts"],"sourcesContent":["import { css } from \"emotion\";\n\n/**\n * Controls the button styles\n * @type {string}\n */\nconst webinyButtonStyles = css`\n    &.webiny-ui-button--secondary:not(:disabled) {\n            border-color: var(--mdc-theme-primary);\n        }\n    }\n`;\n\nexport { webinyButtonStyles };\n"],"mappings":";;;;;;;AAAA;;AAEA;AACA;AACA;AACA;AACA,IAAMA,kBAAkB,oBAAGC,YAAH,mHAAxB"}

package/Button/CopyButton/CopyButton.d.ts

@@ -1,14 +1,11 @@
-/// <reference types="react" />
+import React from "react";
 import { FormComponentProps } from "../../types";
-export declare type CopyButtonProps = FormComponentProps & {
+export interface CopyButtonProps extends FormComponentProps {
     value: string;
     onCopy?: () => void;
-};
+}
 /**
  * Shows the icon button.
- * @param props
- * @returns {*}
- * @constructor
  */
-declare const CopyButton: (props: CopyButtonProps) => JSX.Element;
+declare const CopyButton: React.FC<CopyButtonProps>;
 export { CopyButton };

package/Button/CopyButton/CopyButton.js

@@ -1,32 +1,42 @@
-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 * as React from "react";
-import { ReactComponent as CopyToClipboardIcon } from "@svgr/webpack!../assets/file_copy-24px.svg";
-import { IconButton } from "../index";
-import { useCallback } from "react";
 
 /**
  * Shows the icon button.
- * @param props
- * @returns {*}
- * @constructor
  */
 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

@@ -0,0 +1 @@
+{"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"}