@webiny/ui 0.0.0-mt-3 → 0.0.0-unstable.085ff6572f

package/Avatar/Avatar.js.map

@@ -0,0 +1 @@
+{"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;AAAoC;AACpC,IAAMA,MAAM,gBAAG,IAAAC,YAAG,EAAC;EACfC,YAAY,EAAE,KAAK;EACnBC,OAAO,EAAE,OAAO;EAChB;EACA;EACAC,KAAK,EAAE,EAAE;EACTC,MAAM,EAAE,EAAE;EACVC,QAAQ,EAAE,UAAU;EACpBC,GAAG,EAAE,CAAC,CAAC;EACPC,KAAK,EAAE,CAAC;EACRC,QAAQ,EAAE,QAAQ;EAClBC,UAAU,EAAE,6BAA6B;EACzCC,KAAK,EAAE,+CAA+C;EACtDC,GAAG,EAAE;IACDC,SAAS,EAAE,QAAQ;IACnBV,OAAO,EAAE,MAAM;IACfW,YAAY,EAAE,QAAQ;IACtBC,cAAc,EAAE,QAAQ;IACxBC,aAAa,EAAE,QAAQ;IACvBZ,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE,EAAE;IACVY,QAAQ,EAAE,MAAM;IAChBC,IAAI,EAAE;MACFC,aAAa,EAAE;IACnB;EACJ,CAAC;EACDC,GAAG,EAAE;IACDhB,KAAK,EAAE,iBAAiB;IACxBC,MAAM,EAAE,iBAAiB;IACzBgB,SAAS,EAAE;EACf;AACJ,CAAC,kBAAC;AA6CF;AACA;AACA;AACO,IAAMC,MAA6B,GAAG,SAAhCA,MAA6B,CAAGC,KAAK,EAAI;EAClD,IAAQC,SAAS,GAAkED,KAAK,CAAhFC,SAAS;IAAEpB,KAAK,GAA2DmB,KAAK,CAArEnB,KAAK;IAAEC,MAAM,GAAmDkB,KAAK,CAA9DlB,MAAM;IAAEoB,GAAG,GAA8CF,KAAK,CAAtDE,GAAG;IAAEC,GAAG,GAAyCH,KAAK,CAAjDG,GAAG;IAAEC,YAAY,GAA2BJ,KAAK,CAA5CI,YAAY;IAAEC,WAAW,GAAcL,KAAK,CAA9BK,WAAW;IAAKC,IAAI,0CAAKN,KAAK;EAExF,IAAIO,aAAa;EACjB,IAAMC,UAAU,GAAG;IAAEN,GAAG,EAAHA,GAAG;IAAEC,GAAG,EAAHA;EAAI,CAAC;EAC/B,IAAID,GAAG,EAAE;IACL,IAAI,OAAOG,WAAW,KAAK,UAAU,EAAE;MACnCE,aAAa,GAAGF,WAAW,6DACpBG,UAAU;QACbN,GAAG,EAAHA;MAAG,GACL;IACN,CAAC,MAAM;MACHK,aAAa,gBAAG,sDAASC,UAAU;QAAE,GAAG,EAAEL,GAAI;QAAC,GAAG,EAAED;MAAI,GAAG;IAC/D;EACJ;EAEA,oBACI,sDACQI,IAAI;IACR,SAAS,EAAE,IAAAG,mBAAU,EAAChC,MAAM,EAAEwB,SAAS,CAAE;IACzC,KAAK,8DAAOD,KAAK,CAACU,KAAK;MAAE7B,KAAK,EAALA,KAAK;MAAEC,MAAM,EAANA;IAAM;EAAG,IAExCkB,KAAK,CAACE,GAAG,GACNK,aAAa,gBAEb,uDACI,2CACKH,YAAY,CACRO,KAAK,CAAC,GAAG,CAAC,CACVC,GAAG,CAAC,UAAAC,IAAI;IAAA,OAAIA,IAAI,CAACC,MAAM,CAAC,CAAC,CAAC;EAAA,EAAC,CAC3BC,IAAI,CAAC,EAAE,CAAC,CACRC,WAAW,EAAE,CACf,CAEd,CACC;AAEd,CAAC;AAAC;AAEFjB,MAAM,CAACkB,YAAY,GAAG;EAClBpC,KAAK,EAAE,EAAE;EACTC,MAAM,EAAE;AACZ,CAAC"}

package/Avatar/Avatar.stories.js

@@ -1,19 +1,22 @@
-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 +25,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,iBAAS,EAAC,mBAAmB,EAAEC,MAAM,CAAC;AAEpDF,KAAK,CAACG,GAAG,CACL,OAAO,EACP,YAAM;EACF,oBACI,6BAAC,YAAK,qBACF,6BAAC,kBAAW,QAAEC,eAAM,CAAe,eACnC,6BAAC,mBAAY;IAAC,KAAK,EAAE;EAAkB,gBACnC,uDACI,6BAAC,cAAM;IACH,KAAK,EAAE,EAAG;IACV,MAAM,EAAE,EAAG;IACX,GAAG,EAAC,WAAW;IACf,YAAY,EAAC,GAAG;IAChB,GAAG,EAAC;EAAiC,EACvC,eAEF,wCAAM,eACN,wCAAM,eAEN,6BAAC,cAAM;IAAC,KAAK,EAAE,EAAG;IAAC,MAAM,EAAE,EAAG;IAAC,GAAG,EAAC,WAAW;IAAC,YAAY,EAAC,GAAG;IAAC,GAAG,EAAE;EAAG,EAAG,CACzE,CACK,CACX;AAEhB,CAAC,EACD;EAAEC,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,cAAM;EAAE;AAAE,CAAC,CACrC"}

package/Avatar/index.js

@@ -1 +1,16 @@
-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,59 +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,
-      _props$className = props.className,
-      className = _props$className === void 0 ? "" : _props$className,
-      style = props.style;
-  return /*#__PURE__*/React.createElement(R.Button, {
+    onClick = props.onClick,
+    children = props.children,
+    small = props.small,
+    ripple = props.ripple,
+    _props$className = props.className,
+    className = _props$className === void 0 ? "" : _props$className,
+    style = props.style;
+  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,
-      _props$small = props.small,
-      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,
-      _props$style = props.style,
-      style = _props$style === void 0 ? null : _props$style,
-      _props$className2 = props.className,
-      className = _props$className2 === void 0 ? null : _props$className2;
-  return /*#__PURE__*/React.createElement(R.Button, {
+    onClick = props.onClick,
+    children = props.children,
+    _props$small = props.small,
+    small = _props$small === void 0 ? false : _props$small,
+    _props$flat = props.flat,
+    flat = _props$flat === void 0 ? false : _props$flat,
+    ripple = props.ripple,
+    _props$style = props.style,
+    style = _props$style === void 0 ? {} : _props$style,
+    _props$className2 = props.className,
+    className = _props$className2 === void 0 ? null : _props$className2;
+  return /*#__PURE__*/_react.default.createElement(RmwcButton.Button, {
     raised: !flat,
     dense: small,
     disabled: disabled,
@@ -61,62 +62,53 @@ 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,
-      _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, {
+    onClick = props.onClick,
+    children = props.children,
+    _props$small2 = props.small,
+    small = _props$small2 === void 0 ? false : _props$small2,
+    ripple = props.ripple,
+    _props$className3 = props.className,
+    className = _props$className3 === void 0 ? null : _props$className3,
+    _props$style2 = props.style,
+    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,
-      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,
-      _props$className4 = props.className,
-      className = _props$className4 === void 0 ? null : _props$className4,
-      rest = _objectWithoutProperties(props, _excluded);
-
-  return /*#__PURE__*/React.createElement(Fab, Object.assign({
+    label = props.label,
+    icon = props.icon,
+    onClick = props.onClick,
+    _props$small3 = props.small,
+    small = _props$small3 === void 0 ? false : _props$small3,
+    ripple = props.ripple,
+    _props$className4 = props.className,
+    className = _props$className4 === void 0 ? null : _props$className4,
+    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 +116,15 @@ 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,56 @@
-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,iBAAS,EAAC,mBAAmB,EAAEC,MAAM,CAAC;AACpDF,KAAK,CAACG,YAAY,CAACC,qBAAS,CAAC;AAE7BJ,KAAK,CAACK,GAAG,CACL,kBAAkB,EAClB,YAAM;EACF,IAAMC,KAAK,GAAG,IAAAC,gBAAI,EAAC,OAAO,EAAE,kBAAkB,CAAC;EAC/C,IAAMC,KAAK,GAAG,IAAAC,mBAAO,EAAC,OAAO,EAAE,KAAK,CAAC;EACrC,IAAMC,IAAI,GAAG,IAAAD,mBAAO,EAAC,MAAM,EAAE,KAAK,CAAC;EACnC,IAAME,IAAI,gBAAG,6BAAC,kBAAU;IAAC,IAAI,eAAE,6BAAC,sCAAS;EAAI,EAAG;EAEhD,oBACI,6BAAC,YAAK,qBACF,6BAAC,kBAAW,QAAEC,eAAM,CAAe,eACnC,6BAAC,mBAAY;IAAC,KAAK,EAAE;EAAiB,gBAClC,6BAAC,qBAAa;IAAC,KAAK,EAAEJ,KAAM;IAAC,IAAI,EAAEE;EAAK,GACnCJ,KAAK,CACM,CACL,eACf,6BAAC,mBAAY;IAAC,KAAK,EAAE;EAA2B,gBAC5C,6BAAC,qBAAa;IAAC,KAAK,EAAEE,KAAM;IAAC,IAAI,EAAEE;EAAK,GACnCC,IAAI,EACJL,KAAK,CACM,CACL,eACf,6BAAC,mBAAY;IAAC,KAAK,EAAE;EAAmB,gBACpC,6BAAC,uBAAe;IAAC,KAAK,EAAEE;EAAM,GAAEF,KAAK,CAAmB,CAC7C,eACf,6BAAC,mBAAY;IAAC,KAAK,EAAE;EAA6B,gBAC9C,6BAAC,uBAAe;IAAC,KAAK,EAAEE;EAAM,GACzBG,IAAI,EACJL,KAAK,CACQ,CACP,eACf,6BAAC,mBAAY;IAAC,KAAK,EAAE;EAAiB,gBAClC,6BAAC,qBAAa;IAAC,KAAK,EAAEE;EAAM,GAAEF,KAAK,CAAiB,CACzC,eACf,6BAAC,mBAAY;IAAC,KAAK,EAAE;EAA2B,gBAC5C,6BAAC,qBAAa;IAAC,KAAK,EAAEE;EAAM,GACvBG,IAAI,EACJL,KAAK,CACM,CACL,eACf,6BAAC,mBAAY;IAAC,KAAK,EAAE;EAAkB,gBACnC,6BAAC,sBAAc;IAAC,KAAK,EAAEE,KAAM;IAAC,IAAI,EAAEG;EAAK,EAAG,CACjC,CACX;AAEhB,CAAC,EACD;EACIE,IAAI,EAAE;IACFC,UAAU,EAAE,CAACC,qBAAa,EAAEC,uBAAe,EAAEC,qBAAa,EAAEC,sBAAc,EAAEC,kBAAU;EAC1F;AACJ,CAAC,CACJ"}

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,13 @@
+"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,YAAG,mHAK7B;AAAC"}

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,32 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-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";
+"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"];
 /**
  * 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 () {
+    onCopy = props.onCopy,
+    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;AAAsC;AAStC;AACA;AACA;AACA,IAAMA,UAAqC,GAAG,SAAxCA,UAAqC,CAAGC,KAAK,EAAI;EACnD,IAAQC,KAAK,GAA4BD,KAAK,CAAtCC,KAAK;IAAEC,MAAM,GAAoBF,KAAK,CAA/BE,MAAM;IAAKC,UAAU,0CAAKH,KAAK;EAE9C,IAAMI,eAAe,GAAG,IAAAC,kBAAW,EAAC,YAAM;IACtCC,SAAS,CAACC,SAAS,CAACC,SAAS,CAACP,KAAK,CAAC;IACpC,IAAI,OAAOC,MAAM,KAAK,UAAU,EAAE;MAC9BA,MAAM,EAAE;IACZ;EACJ,CAAC,EAAE,CAACD,KAAK,CAAC,CAAC;EAEX,oBAAO,6BAAC,iBAAU,oBAAKE,UAAU;IAAE,OAAO,EAAEC,eAAgB;IAAC,IAAI,eAAE,6BAAC,6BAAmB;EAAI,GAAG;AAClG,CAAC;AAAC"}