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

package/Avatar/Avatar.js

@@ -0,0 +1,100 @@
+"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"];
+var avatar = /*#__PURE__*/(0, _emotion.css)({
+  borderRadius: "50%",
+  display: "block",
+  //alignItems: "center",
+  //justifyContent: "center",
+  width: 38,
+  height: 38,
+  position: "relative",
+  top: -7,
+  right: 7,
+  overflow: "hidden",
+  background: "var(--mdc-theme-background)",
+  color: "var(--mdc-theme-text-secondary-on-background)",
+  div: {
+    textAlign: "center",
+    display: "flex",
+    alignContent: "center",
+    justifyContent: "center",
+    flexDirection: "column",
+    width: 38,
+    height: 38,
+    fontSize: "1rem",
+    span: {
+      paddingBottom: 2
+    }
+  },
+  img: {
+    width: "100% !important",
+    height: "100% !important",
+    objectFit: "cover"
+  }
+}, "label:avatar;");
+
+/**
+ * Use Avatar component to display user's avatar.
+ */
+var Avatar = function Avatar(props) {
+  var className = props.className,
+      width = props.width,
+      height = props.height,
+      src = props.src,
+      alt = props.alt,
+      fallbackText = props.fallbackText,
+      renderImage = props.renderImage,
+      rest = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var renderedImage;
+  var imageProps = {
+    src: src,
+    alt: alt
+  };
+
+  if (src) {
+    if (typeof renderImage === "function") {
+      renderedImage = renderImage((0, _objectSpread2.default)((0, _objectSpread2.default)({}, imageProps), {}, {
+        src: src
+      }));
+    } else {
+      renderedImage = /*#__PURE__*/_react.default.createElement("img", Object.assign({}, imageProps, {
+        alt: alt,
+        src: src
+      }));
+    }
+  }
+
+  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.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

@@ -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;;;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.d.ts

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

package/Avatar/Avatar.stories.js

@@ -0,0 +1,36 @@
+"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.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.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.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_Avatar.Avatar, {
+    width: 64,
+    height: 64,
+    alt: "Test alt.",
+    fallbackText: "T",
+    src: ""
+  }))));
+}, {
+  info: {
+    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/README.md

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

package/Avatar/index.d.ts

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

package/Avatar/index.js

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

@@ -0,0 +1,73 @@
+/// <reference types="web" />
+import React from "react";
+import { FabProps } from "@rmwc/fab";
+import { IconProps } from "../Icon/Icon";
+import { SyntheticEvent } from "react";
+export interface ButtonProps {
+    /**
+     * Make button flat (only applicable to Primary button).
+     */
+    flat?: boolean;
+    /**
+     * Make button smaller.
+     */
+    small?: boolean;
+    /**
+     * 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.
+ */
+export declare const ButtonDefault: React.FC<ButtonProps>;
+/**
+ * Shows primary button, eg. for submitting forms.
+ */
+export declare const ButtonPrimary: React.FC<ButtonProps>;
+/**
+ * Shows a secondary button - eg. for doing a reset on a form.
+ */
+export declare const ButtonSecondary: React.FC<ButtonProps>;
+export declare type ButtonFloatingProps = ButtonProps & FabProps & {
+    label?: React.ReactNode;
+    icon?: React.ReactNode;
+    onMouseDown?: (e: SyntheticEvent) => void;
+    onMouseUp?: (e: SyntheticEvent) => void;
+};
+/**
+ * A floating button, shown on the side of the screen, typically used for creating new content or accessing settings.
+ */
+export declare const ButtonFloating: React.FC<ButtonFloatingProps>;
+/**
+ * Shows an icon, suitable to be shown inside of a button.
+ */
+export declare const ButtonIcon: React.FC<IconProps>;

package/Button/Button.js

@@ -0,0 +1,150 @@
+"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.
+ */
+var ButtonDefault = function ButtonDefault(props) {
+  var disabled = props.disabled,
+      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: (0, _classnames.default)("webiny-ui-button", className),
+    "data-testid": props["data-testid"]
+  }, children);
+};
+/**
+ * Shows primary button, eg. for submitting forms.
+ */
+
+
+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,
+      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,
+    unelevated: flat,
+    ripple: ripple,
+    onClick: onClick,
+    style: style,
+    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.
+ */
+
+
+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,
+      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: (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.
+ */
+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,
+      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,
+    onClick: onClick,
+    label: label,
+    ripple: ripple,
+    icon: icon,
+    className: (0, _classnames.default)("webiny-ui-button--floating", className)
+  }, rest));
+};
+/**
+ * Shows an icon, suitable to be shown inside of a button.
+ */
+
+
+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.d.ts

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

package/Button/Button.stories.js

@@ -0,0 +1,66 @@
+"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 = (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.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.default.createElement(_Button.ButtonPrimary, {
+    small: small,
+    flat: flat
+  }, label)), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, {
+    title: "Primary button with icon"
+  }, /*#__PURE__*/_react.default.createElement(_Button.ButtonPrimary, {
+    small: small,
+    flat: flat
+  }, icon, label)), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, {
+    title: "Secondary button"
+  }, /*#__PURE__*/_react.default.createElement(_Button.ButtonSecondary, {
+    small: small
+  }, label)), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, {
+    title: "Secondary button with icon"
+  }, /*#__PURE__*/_react.default.createElement(_Button.ButtonSecondary, {
+    small: small
+  }, icon, label)), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, {
+    title: "Default button"
+  }, /*#__PURE__*/_react.default.createElement(_Button.ButtonDefault, {
+    small: small
+  }, label)), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, {
+    title: "Default button with icon"
+  }, /*#__PURE__*/_react.default.createElement(_Button.ButtonDefault, {
+    small: small
+  }, icon, label)), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, {
+    title: "Floating button"
+  }, /*#__PURE__*/_react.default.createElement(_Button.ButtonFloating, {
+    small: small,
+    icon: icon
+  })));
+}, {
+  info: {
+    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

@@ -0,0 +1,11 @@
+import React from "react";
+import { FormComponentProps } from "../../types";
+export interface CopyButtonProps extends FormComponentProps {
+    value: string;
+    onCopy?: () => void;
+}
+/**
+ * Shows the icon button.
+ */
+declare const CopyButton: React.FC<CopyButtonProps>;
+export { CopyButton };

package/Button/CopyButton/CopyButton.js

@@ -0,0 +1,42 @@
+"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.
+ */
+var CopyButton = function CopyButton(props) {
+  var value = props.value,
+      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.default.createElement(_index.IconButton, Object.assign({}, otherProps, {
+    onClick: copyToClipboard,
+    icon: /*#__PURE__*/_react.default.createElement(_file_copy24px.ReactComponent, null)
+  }));
+};
+
+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"}

package/Button/CopyButton/CopyButton.stories.d.ts

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

package/Button/CopyButton/CopyButton.stories.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@storybook/react");
+
+var _Story = require("@webiny/storybook-utils/Story");
+
+var _README = _interopRequireDefault(require("./README.md"));
+
+var _index = require("./../../Menu/index");
+
+var _CopyButton = require("./CopyButton");
+
+var story = (0, _react2.storiesOf)("Components/Button", module);
+story.add("copy button", function () {
+  return /*#__PURE__*/_react.default.createElement(_Story.Story, null, /*#__PURE__*/_react.default.createElement(_Story.StoryReadme, null, _README.default), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, {
+    title: "Copy button"
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("span", null, "Click the button to copy the \"Hello\" value:"), /*#__PURE__*/_react.default.createElement(_CopyButton.CopyButton, {
+    value: "Hello"
+  }))));
+}, {
+  info: {
+    propTablesExclude: [_index.Menu, _index.MenuItem, _Story.Story, _Story.StoryReadme, _Story.StorySandbox]
+  }
+});

package/Button/CopyButton/CopyButton.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["story","storiesOf","module","add","readme","info","propTablesExclude","Menu","MenuItem","Story","StoryReadme","StorySandbox"],"sources":["CopyButton.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { Story, StoryReadme, StorySandbox } from \"@webiny/storybook-utils/Story\";\nimport readme from \"./README.md\";\nimport { Menu, MenuItem } from \"./../../Menu/index\";\n\nimport { CopyButton } from \"./CopyButton\";\n\nconst story = storiesOf(\"Components/Button\", module);\n\nstory.add(\n    \"copy button\",\n    () => {\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox title={\"Copy button\"}>\n                    <div>\n                        <span>Click the button to copy the &quot;Hello&quot; value:</span>\n                        <CopyButton value=\"Hello\" />\n                    </div>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    {\n        info: {\n            propTablesExclude: [Menu, MenuItem, Story, StoryReadme, StorySandbox]\n        }\n    }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,mBAAV,EAA+BC,MAA/B,CAAd;AAEAF,KAAK,CAACG,GAAN,CACI,aADJ,EAEI,YAAM;EACF,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,uDACI,2FADJ,eAEI,6BAAC,sBAAD;IAAY,KAAK,EAAC;EAAlB,EAFJ,CADJ,CAFJ,CADJ;AAWH,CAdL,EAeI;EACIC,IAAI,EAAE;IACFC,iBAAiB,EAAE,CAACC,WAAD,EAAOC,eAAP,EAAiBC,YAAjB,EAAwBC,kBAAxB,EAAqCC,mBAArC;EADjB;AADV,CAfJ"}