@webiny/ui 0.0.0-mt-1

package/README.md

@@ -0,0 +1,28 @@
+# @webiny/ui
+[![](https://img.shields.io/npm/dw/@webiny/ui.svg)](https://www.npmjs.com/package/@webiny/ui) 
+[![](https://img.shields.io/npm/v/@webiny/ui.svg)](https://www.npmjs.com/package/@webiny/ui)
+[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
+[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
+
+A collection of [material-design](https://material.io/) based 
+components, for all of your UI development needs. 
+
+A large amount of components are basically thin wrappers around the
+already well-known [RMWC](https://rmwc.io/) library. With that, 
+there are a few additional components that weren't included in it.
+
+Please visit the official [storybook](https://storybook.webiny.com/) page 
+for details and examples of each component.
+  
+## Install
+```
+npm install --save @webiny/ui
+```
+
+Or if you prefer yarn: 
+```
+yarn add @webiny/ui
+```
+
+### Note on @rmwc/textfield
+The package `@rmwc/textfield` is being pulled directly from our github due to its typings being broken on typescript versions that are greater than `3.7.4`. 

package/Radio/README.md

@@ -0,0 +1,17 @@
+# Group
+
+### Design
+
+<a href="https://material.io/design/components/selection-controls.html#radio-buttons" target="_blank">https://material.io/design/components/selection-controls.html#radio-buttons</a>
+
+### Description
+
+Wrap `Radio` components with `RadioGroup` to create a set of options.
+Each `Radio` component must receive `value` and `onChange` callback via props.
+
+### Import
+To use, import base `Radio` component.
+
+```js
+import { Radio, RadioGroup } from "@webiny/ui/Radio";
+```

package/Radio/Radio.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { FormComponentProps } from "../types";
+declare type Props = FormComponentProps & {
+    label?: React.ReactNode;
+    disabled?: boolean;
+    description?: string;
+};
+/**
+ * Wrap Radio components with RadioGroup to create a set of options.
+ * Each Radio component must receive value and onChange callback via props.
+ */
+declare class Radio extends React.Component<Props> {
+    static defaultProps: {
+        validation: {
+            isValid: any;
+        };
+    };
+    onChange: (e: React.SyntheticEvent<HTMLInputElement>) => void;
+    render(): JSX.Element;
+}
+export default Radio;

package/Radio/Radio.js

@@ -0,0 +1,68 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _createSuper from "@babel/runtime/helpers/createSuper";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import * as React from "react";
+import { Radio as RmwcRadio } from "@rmwc/radio";
+import { FormElementMessage } from "../FormElementMessage";
+
+/**
+ * Wrap Radio components with RadioGroup to create a set of options.
+ * Each Radio component must receive value and onChange callback via props.
+ */
+var Radio = /*#__PURE__*/function (_React$Component) {
+  _inherits(Radio, _React$Component);
+
+  var _super = _createSuper(Radio);
+
+  function Radio() {
+    var _this;
+
+    _classCallCheck(this, Radio);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _defineProperty(_assertThisInitialized(_this), "onChange", function (e) {
+      _this.props.onChange && _this.props.onChange(e.target.checked);
+    });
+
+    return _this;
+  }
+
+  _createClass(Radio, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          value = _this$props.value,
+          label = _this$props.label,
+          disabled = _this$props.disabled,
+          description = _this$props.description,
+          validation = _this$props.validation;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(RmwcRadio, {
+        disabled: disabled,
+        checked: Boolean(value),
+        onChange: this.onChange // @ts-ignore Although the label is React.ReactNode internally, an error is still thrown.
+        ,
+        label: label
+      }), validation.isValid === false && /*#__PURE__*/React.createElement(FormElementMessage, {
+        error: true
+      }, validation.message), validation.isValid !== false && description && /*#__PURE__*/React.createElement(FormElementMessage, null, description));
+    }
+  }]);
+
+  return Radio;
+}(React.Component);
+
+_defineProperty(Radio, "defaultProps", {
+  validation: {
+    isValid: null
+  }
+});
+
+export default Radio;

package/Radio/Radio.styles.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Controls the helper text below the checkbox.
+ * @type {string}
+ */
+declare const webinyRadioTitle: string;
+export { webinyRadioTitle };

package/Radio/Radio.styles.js

@@ -0,0 +1,15 @@
+import { css } from "emotion";
+/**
+ * Controls the helper text below the checkbox.
+ * @type {string}
+ */
+
+var webinyRadioTitle = /*#__PURE__*/css({}, {
+  "&.mdc-text-field-helper-text": {
+    paddingLeft: 10,
+    //textTransform: "uppercase",
+    //fontWeight: "bold",
+    marginBottom: "5px"
+  }
+}, "label:webinyRadioTitle;");
+export { webinyRadioTitle };

package/Radio/RadioGroup.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { FormComponentProps } from "../types";
+interface RadioGroupRenderParams {
+    onChange: (id: string | number) => () => void;
+    getValue: (id: string | number) => boolean;
+}
+declare type Props = FormComponentProps & {
+    label?: string;
+    description?: string;
+    children: (props: RadioGroupRenderParams) => React.ReactNode;
+};
+declare class RadioGroup extends React.Component<Props> {
+    static defaultProps: {
+        validation: {
+            isValid: any;
+        };
+    };
+    render(): JSX.Element;
+}
+export default RadioGroup;

package/Radio/RadioGroup.js

@@ -0,0 +1,56 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _createSuper from "@babel/runtime/helpers/createSuper";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import * as React from "react";
+import { webinyRadioTitle } from "./Radio.styles";
+import { FormElementMessage } from "../FormElementMessage";
+
+var RadioGroup = /*#__PURE__*/function (_React$Component) {
+  _inherits(RadioGroup, _React$Component);
+
+  var _super = _createSuper(RadioGroup);
+
+  function RadioGroup() {
+    _classCallCheck(this, RadioGroup);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(RadioGroup, [{
+    key: "render",
+    value: function render() {
+      var _this = this;
+
+      var _this$props = this.props,
+          description = _this$props.description,
+          label = _this$props.label,
+          validation = _this$props.validation;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, label && /*#__PURE__*/React.createElement("div", {
+        className: "mdc-text-field-helper-text mdc-text-field-helper-text--persistent " + webinyRadioTitle
+      }, label), this.props.children({
+        onChange: function onChange(value) {
+          return function () {
+            return _this.props.onChange && _this.props.onChange(value);
+          };
+        },
+        getValue: function getValue(id) {
+          return _this.props.value === id;
+        }
+      }), validation.isValid === false && /*#__PURE__*/React.createElement(FormElementMessage, {
+        error: true
+      }, validation.message), validation.isValid !== false && description && /*#__PURE__*/React.createElement(FormElementMessage, null, description));
+    }
+  }]);
+
+  return RadioGroup;
+}(React.Component);
+
+_defineProperty(RadioGroup, "defaultProps", {
+  validation: {
+    isValid: null
+  }
+});
+
+export default RadioGroup;

package/Radio/RadioGroup.stories.d.ts

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

package/Radio/RadioGroup.stories.js

@@ -0,0 +1,55 @@
+import * as React from "react";
+import { storiesOf } from "@storybook/react";
+import { Story, StoryReadme, StorySandboxCode, StorySandbox, StorySandboxExample } from "@webiny/storybook-utils/Story";
+import { withKnobs, boolean } from "@storybook/addon-knobs";
+import readme from "./README.md";
+import { Form } from "@webiny/form";
+import { Radio, RadioGroup } from ".";
+var story = storiesOf("Components/Radio", module);
+story.addDecorator(withKnobs);
+story.add("usage", function () {
+  var disabled = boolean("Disabled", false);
+  var options = [{
+    id: "apple",
+    name: "Apple"
+  }, {
+    id: "pear",
+    name: "Pear"
+  }, {
+    id: "orange",
+    name: "Orange"
+  }];
+  return /*#__PURE__*/React.createElement(Story, null, /*#__PURE__*/React.createElement(StoryReadme, null, readme), /*#__PURE__*/React.createElement(StorySandbox, null, /*#__PURE__*/React.createElement(StorySandboxExample, {
+    title: "Simple radio with label and description"
+  }, /*#__PURE__*/React.createElement(Form, {
+    data: {
+      fruits: "pear"
+    }
+  }, function (_ref) {
+    var Bind = _ref.Bind;
+    return /*#__PURE__*/React.createElement(Bind, {
+      name: "fruits"
+    }, /*#__PURE__*/React.createElement(RadioGroup, {
+      label: "Fruit selection",
+      description: "Choose fruit you like the most."
+    }, function (_ref2) {
+      var onChange = _ref2.onChange,
+          getValue = _ref2.getValue;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, options.map(function (_ref3) {
+        var id = _ref3.id,
+            name = _ref3.name;
+        return /*#__PURE__*/React.createElement(Radio, {
+          disabled: disabled,
+          key: id,
+          label: name,
+          value: getValue(id),
+          onChange: onChange(id)
+        });
+      }));
+    }));
+  })), /*#__PURE__*/React.createElement(StorySandboxCode, null, "\n                     <Form data={{fruits: ['pear']}}>\n                        {({ Bind }) => (\n                            <Bind name=\"fruits\">\n                                <RadioGroup\n                                    label=\"Fruits selection\"\n                                    description={\"Choose only fruits you like.\"}\n                                >\n                                    {({ onChange, getValue }) => (\n                                        <React.Fragment>\n                                            {options.map(({id, name}) => (\n                                                <Radio\n                                                    disabled={disabled}\n                                                    key={id}\n                                                    label={name}\n                                                    value={getValue(id)}\n                                                    onChange={onChange(id)}\n                                                />\n                                            ))}\n                                        </React.Fragment>\n                                    )}\n                                </RadioGroup>\n                            </Bind>\n                        )}\n                    </Form>\n                    ")));
+}, {
+  info: {
+    propTables: [Radio, RadioGroup]
+  }
+});

package/Radio/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Radio } from "./Radio";
+export { default as RadioGroup } from "./RadioGroup";

package/Radio/index.js

@@ -0,0 +1,2 @@
+export { default as Radio } from "./Radio";
+export { default as RadioGroup } from "./RadioGroup";

package/RichTextEditor/README.md

@@ -0,0 +1,10 @@
+# RichTextEditor
+
+### Description
+https://editorjs.io
+
+### Import
+
+```js
+import { RichTextEditor } from "@webiny/ui/RichTextEditor";
+```

package/RichTextEditor/RichTextEditor.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+import { OutputBlockData, OutputData, SanitizerConfig, ToolSettings } from "@editorjs/editorjs/types";
+export declare type OnReadyParams = {
+    editor: any;
+    initialData: OutputData;
+};
+export declare type RichTextEditorProps = {
+    autofocus?: boolean;
+    context?: {
+        [key: string]: any;
+    };
+    logLevel?: string;
+    minHeight?: number;
+    onChange?: (data: OutputBlockData[]) => void;
+    onReady?: (params: OnReadyParams) => void;
+    placeholder?: string;
+    readOnly?: boolean;
+    sanitizer?: SanitizerConfig;
+    tools?: {
+        [toolName: string]: ToolSettings;
+    };
+    value?: OutputBlockData[];
+    label?: string;
+    description?: string;
+    disabled?: boolean;
+};
+export declare const RichTextEditor: (props: RichTextEditorProps) => JSX.Element;

package/RichTextEditor/RichTextEditor.js

@@ -0,0 +1,136 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["value", "context", "onReady"];
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React, { Fragment, useEffect, useRef } from "react";
+import shortid from "shortid";
+import EditorJS from "@editorjs/editorjs";
+import { FormElementMessage } from "../FormElementMessage";
+import { css } from "emotion";
+import classNames from "classnames";
+var classes = {
+  wrapper: /*#__PURE__*/css({
+    backgroundColor: "var(--mdc-theme-background)",
+    padding: "20px 16px 6px"
+  }, "label:wrapper;"),
+  label: /*#__PURE__*/css({
+    marginBottom: "10px !important"
+  }, "label:label;"),
+  disable: /*#__PURE__*/css({
+    opacity: 0.7,
+    pointerEvents: "none"
+  }, "label:disable;")
+};
+export var RichTextEditor = function RichTextEditor(props) {
+  var elementId = useRef("rte-" + shortid.generate());
+  var editorRef = useRef();
+  useEffect(function () {
+    var value = props.value,
+        context = props.context,
+        _onReady = props.onReady,
+        nativeProps = _objectWithoutProperties(props, _excluded);
+
+    var initialData = value ? {
+      blocks: value
+    } : {
+      blocks: []
+    };
+    editorRef.current = new EditorJS(_objectSpread(_objectSpread({}, nativeProps), {}, {
+      holder: elementId.current,
+      logLevel: "ERROR",
+      data: initialData,
+      onChange: function () {
+        var _onChange = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+          var _yield$editorRef$curr, data;
+
+          return _regeneratorRuntime.wrap(function _callee$(_context) {
+            while (1) {
+              switch (_context.prev = _context.next) {
+                case 0:
+                  _context.next = 2;
+                  return editorRef.current.save();
+
+                case 2:
+                  _yield$editorRef$curr = _context.sent;
+                  data = _yield$editorRef$curr.blocks;
+                  props.onChange(data);
+
+                case 5:
+                case "end":
+                  return _context.stop();
+              }
+            }
+          }, _callee);
+        }));
+
+        function onChange() {
+          return _onChange.apply(this, arguments);
+        }
+
+        return onChange;
+      }(),
+      onReady: function onReady() {
+        if (typeof _onReady !== "function") {
+          return;
+        }
+
+        _onReady({
+          editor: editorRef.current,
+          initialData: initialData
+        });
+      },
+      tools: Object.keys(props.tools || {}).reduce(function (tools, name) {
+        var tool = props.tools[name];
+        tools[name] = tool;
+
+        if (!tool.config) {
+          tool.config = {
+            context: context
+          };
+        } else if (typeof tool.config === "function") {
+          tool.config = tool.config();
+        } else {
+          tool.config = _objectSpread(_objectSpread({}, tool.config), {}, {
+            context: context
+          });
+        }
+
+        return tools;
+      }, {})
+    }));
+    return /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              if (!(!editorRef.current || typeof editorRef.current.destroy !== "function")) {
+                _context2.next = 2;
+                break;
+              }
+
+              return _context2.abrupt("return");
+
+            case 2:
+              editorRef.current.destroy();
+
+            case 3:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    }));
+  }, []);
+  var label = props.label,
+      description = props.description,
+      disabled = props.disabled;
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: classNames(classes.wrapper, _defineProperty({}, classes.disable, disabled))
+  }, label && /*#__PURE__*/React.createElement("div", {
+    className: classNames("mdc-text-field-helper-text mdc-text-field-helper-text--persistent", classes.label)
+  }, label), /*#__PURE__*/React.createElement("div", {
+    id: elementId.current
+  })), description && /*#__PURE__*/React.createElement(FormElementMessage, null, description));
+};

package/RichTextEditor/RichTextEditor.stories.d.ts

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

package/RichTextEditor/RichTextEditor.stories.js

@@ -0,0 +1,19 @@
+import React, { useCallback } from "react";
+import { storiesOf } from "@storybook/react";
+import { Story, StoryReadme, StorySandboxCode, StorySandbox, StorySandboxExample } from "@webiny/storybook-utils/Story";
+import readme from "./README.md";
+import { RichTextEditor } from "./index";
+var story = storiesOf("Components/RichTextEditor", module);
+story.add("usage", function () {
+  var onChange = useCallback(function (data) {
+    console.log(data);
+  }, []);
+  return /*#__PURE__*/React.createElement(Story, null, /*#__PURE__*/React.createElement(StoryReadme, null, readme), /*#__PURE__*/React.createElement(StorySandbox, null, /*#__PURE__*/React.createElement(StorySandboxExample, null, /*#__PURE__*/React.createElement(RichTextEditor, {
+    value: null,
+    onChange: onChange
+  })), /*#__PURE__*/React.createElement(StorySandboxCode, null, "\n                        import { RichTextEditor } from \"..\";\n\n                        <RichTextEditor/>\n                    ")));
+}, {
+  info: {
+    propTables: [RichTextEditor]
+  }
+});

package/RichTextEditor/createPropsFromConfig.d.ts

@@ -0,0 +1,5 @@
+import { RichTextEditorProps } from "./RichTextEditor";
+/**
+ * Creates RichTextEditor props from the given config (or array of configs).
+ */
+export declare const createPropsFromConfig: (config: any) => Partial<RichTextEditorProps>;

package/RichTextEditor/createPropsFromConfig.js

@@ -0,0 +1,18 @@
+/**
+ * Creates RichTextEditor props from the given config (or array of configs).
+ */
+export var createPropsFromConfig = function createPropsFromConfig(config) {
+  var configs = Array.isArray(config) ? config : [config];
+  return {
+    onReady: function onReady(editor) {
+      configs.forEach(function (config) {
+        if (typeof config.onReady === "function") {
+          config.onReady(editor);
+        }
+      });
+    },
+    tools: configs.reduce(function (tools, config) {
+      return Object.assign(tools, config.tools);
+    }, {})
+  };
+};

package/RichTextEditor/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./RichTextEditor";
+export { createPropsFromConfig } from "./createPropsFromConfig";

package/RichTextEditor/index.js

@@ -0,0 +1,2 @@
+export * from "./RichTextEditor";
+export { createPropsFromConfig } from "./createPropsFromConfig";

package/Ripple/README.md

@@ -0,0 +1,15 @@
+# Ripple
+
+### Design
+
+<a href="https://material.io/develop/web/components/ripples/" target="_blank">https://material.io/develop/web/components/ripples/</a>
+
+### Description
+
+`Ripple` component is used to represent interactive surfaces.
+
+### Import
+
+```js
+import { Ripple } from "@webiny/ui/Ripple";
+```

package/Ripple/Ripple.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+declare type Props = {
+    children?: React.ReactNode;
+    type?: "unbounded" | "primary" | "accent";
+    disabled?: boolean;
+};
+/**
+ * Use Ripple component to display a list of choices, once the handler is triggered.
+ */
+declare const Ripple: (props: Props) => JSX.Element;
+export { Ripple };

package/Ripple/Ripple.js

@@ -0,0 +1,14 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import * as React from "react";
+import { Ripple as RmwcRipple } from "@rmwc/ripple";
+
+/**
+ * Use Ripple component to display a list of choices, once the handler is triggered.
+ */
+var Ripple = function Ripple(props) {
+  // Let's pass "unbounded" / "primary" / "accent" flags as "type" prop instead.
+  var type = props.type || "surface";
+  return /*#__PURE__*/React.createElement(RmwcRipple, Object.assign({}, _defineProperty({}, type, true), props), props.children);
+};
+
+export { Ripple };

package/Ripple/Ripple.stories.d.ts

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

package/Ripple/Ripple.stories.js

@@ -0,0 +1,71 @@
+import * as React from "react";
+import { storiesOf } from "@storybook/react";
+import { Story, StoryReadme, StorySandboxCode, StorySandbox, StorySandboxExample } from "@webiny/storybook-utils/Story";
+import readme from "./../Ripple/README.md";
+import { Icon } from "./../Icon";
+import { withKnobs, boolean } from "@storybook/addon-knobs";
+import { ReactComponent as AutoRenewIcon } from "@svgr/webpack!./svg/baseline-autorenew-24px.svg";
+import { ReactComponent as CloudDoneIcon } from "@svgr/webpack!./svg/baseline-cloud_done-24px.svg";
+import { ReactComponent as BaselineDeleteIcon } from "@svgr/webpack!./svg/baseline-delete-24px.svg";
+import { ReactComponent as BaselineDoneIcon } from "@svgr/webpack!./svg/baseline-done-24px.svg";
+import { Ripple } from "./Ripple";
+var story = storiesOf("Components/Ripple", module);
+story.addDecorator(withKnobs);
+story.add("usage", function () {
+  var disabled = boolean("Disabled", false);
+  var style = {
+    padding: 20,
+    width: 20,
+    height: 20,
+    display: "inline-block"
+  };
+  return /*#__PURE__*/React.createElement(Story, null, /*#__PURE__*/React.createElement(StoryReadme, null, readme), /*#__PURE__*/React.createElement(StorySandbox, {
+    title: "Icon with and without ripple"
+  }, /*#__PURE__*/React.createElement(StorySandboxExample, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, "No effect"), /*#__PURE__*/React.createElement("div", {
+    style: style
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: /*#__PURE__*/React.createElement(AutoRenewIcon, null)
+  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("code", null, "unbounded")), /*#__PURE__*/React.createElement(Ripple, {
+    type: "unbounded",
+    disabled: disabled
+  }, /*#__PURE__*/React.createElement("div", {
+    style: style
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: /*#__PURE__*/React.createElement(CloudDoneIcon, null)
+  }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("code", null, "primary")), /*#__PURE__*/React.createElement(Ripple, {
+    type: "primary",
+    disabled: disabled
+  }, /*#__PURE__*/React.createElement("div", {
+    style: style
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: /*#__PURE__*/React.createElement(BaselineDeleteIcon, null)
+  }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("code", null, "accent")), /*#__PURE__*/React.createElement(Ripple, {
+    type: "accent",
+    disabled: disabled
+  }, /*#__PURE__*/React.createElement("div", {
+    style: style
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: /*#__PURE__*/React.createElement(BaselineDoneIcon, null)
+  }))))), /*#__PURE__*/React.createElement(StorySandboxCode, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Icon, {
+    icon: /*#__PURE__*/React.createElement(AutoRenewIcon, null)
+  })), /*#__PURE__*/React.createElement(Ripple, {
+    type: "unbounded",
+    disabled: disabled
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Icon, {
+    icon: /*#__PURE__*/React.createElement(CloudDoneIcon, null)
+  }))), /*#__PURE__*/React.createElement(Ripple, {
+    type: "primary",
+    disabled: disabled
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Icon, {
+    icon: /*#__PURE__*/React.createElement(BaselineDeleteIcon, null)
+  }))), /*#__PURE__*/React.createElement(Ripple, {
+    type: "accent",
+    disabled: disabled
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Icon, {
+    icon: /*#__PURE__*/React.createElement(BaselineDoneIcon, null)
+  })))))));
+}, {
+  info: {
+    propTables: [Ripple]
+  }
+});