@canonical/react-components 0.59.0 → 0.60.0

package/dist/components/CodeSnippet/CodeSnippet.stories.js

@@ -0,0 +1,279 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WrapLines = exports.Title = exports.MultipleBlocks = exports.JsxCodeElements = exports.DropdownsStacked = exports.Dropdowns = exports.Dropdown = exports.Default = exports.Content = exports.Appearance = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _CodeSnippet = _interopRequireDefault(require("./CodeSnippet"));
+var _CodeSnippetBlock = require("./CodeSnippetBlock");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const meta = {
+  component: _CodeSnippet.default,
+  tags: ["autodocs"],
+  argTypes: {
+    className: {
+      control: {
+        type: "text"
+      }
+    }
+  }
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  render: () => /*#__PURE__*/_react.default.createElement(_CodeSnippet.default, {
+    blocks: [{
+      code: "Mode: all Settings: maas_url=http://192.168.122.1:5240/MAAS"
+    }]
+  }),
+  name: "Default"
+};
+
+/**
+ * Use the `title` prop to add a title to a code block.
+ */
+const Title = exports.Title = {
+  render: () => /*#__PURE__*/_react.default.createElement(_CodeSnippet.default, {
+    blocks: [{
+      title: "Output",
+      code: "Mode: all Settings: maas_url=http://192.168.122.1:5240/MAAS"
+    }]
+  }),
+  name: "Title"
+};
+
+/**
+ * Pass an array of `blocks` to render multiple code blocks (for example input and output) within a single code snippet.
+ */
+const MultipleBlocks = exports.MultipleBlocks = {
+  render: () => /*#__PURE__*/_react.default.createElement(_CodeSnippet.default, {
+    blocks: [{
+      title: "JavaScript",
+      code: "console.log('Vanilla');"
+    }, {
+      title: "Output",
+      code: "Vanilla"
+    }]
+  }),
+  name: "Multiple blocks"
+};
+
+/**
+ * Use `appearance` to control the visual aspects of the code block. `"numbered"` appearance will add line numbers in the code blocks.
+ * Values of `"linuxPrompt"`, `"windowsPrompt"`, `"url"` will add a relevant icon in the code block.
+ */
+const Appearance = exports.Appearance = {
+  render: () => /*#__PURE__*/_react.default.createElement(_CodeSnippet.default, {
+    blocks: [{
+      title: "Install on Linux",
+      appearance: _CodeSnippetBlock.CodeSnippetBlockAppearance.LINUX_PROMPT,
+      code: "snap install toto"
+    }, {
+      title: "Install on Windows",
+      appearance: _CodeSnippetBlock.CodeSnippetBlockAppearance.WINDOWS_PROMPT,
+      code: "snap install toto"
+    }, {
+      title: "Get from the Store",
+      appearance: _CodeSnippetBlock.CodeSnippetBlockAppearance.URL,
+      code: "http://snapcraft.io/toto"
+    }]
+  }),
+  name: "Appearance"
+};
+
+/**
+ * Set `wrapLines` prop to `true` to enable line wrapping inside the code block.
+ */
+const WrapLines = exports.WrapLines = {
+  render: () => /*#__PURE__*/_react.default.createElement(_CodeSnippet.default, {
+    blocks: [{
+      appearance: _CodeSnippetBlock.CodeSnippetBlockAppearance.NUMBERED,
+      wrapLines: true,
+      code: "#!/bin/bash\nset -eu . $CONJURE_UP_SPELLSDIR/sdk/common.sh\nif [[ \"$JUJU_PROVIDERTYPE\" == \"lxd\" ]]; then\n  debug \"Running pre-deploy for $CONJURE_UP_SPELL\"\n  sed \"s/##MODEL##/$JUJU_MODEL/\" $(scriptPath)/lxd-profile.yaml | lxc profile edit \"juju-$JUJU_MODEL\" || exposeResult \"Failed to set profile\" $? \"false\"\nfi\nexposeResult \"Successful pre-deploy.\" 0 \"true\""
+    }]
+  }),
+  name: "Wrap lines"
+};
+
+/**
+ * Dropdown select menus can be added to the headers of code blocks to allow users to choose one of the options. The dropdowns options are passed via `dropdowns` property in the block options object.
+ *
+ * With the `options` being an array of option properties compatible with the `Select` options (`[{ label: string, value: string | number }]`).
+ */
+const Dropdown = exports.Dropdown = {
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [lang, setLang] = (0, _react.useState)("html");
+    const code = {
+      js: "console.log(\"Example 1\");",
+      css: ".p-heading--2 { color: red; }",
+      html: "<h1 class=\"p-heading--2\">How to use code snippets</h1>"
+    };
+    return /*#__PURE__*/_react.default.createElement(_CodeSnippet.default, {
+      blocks: [{
+        code: code[lang],
+        dropdowns: [{
+          options: [{
+            value: "js",
+            label: "JS"
+          }, {
+            value: "css",
+            label: "CSS"
+          }, {
+            value: "html",
+            label: "HTML"
+          }],
+          value: lang,
+          onChange: event => {
+            setLang(event.target.value);
+          }
+        }]
+      }]
+    });
+  },
+  name: "Dropdown"
+};
+
+/**
+ * Multiple dropdowns can be passed in if needed.
+ */
+const Dropdowns = exports.Dropdowns = {
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [channel, setChannel] = (0, _react.useState)("stable");
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [snap, setSnap] = (0, _react.useState)("firefox");
+    const code = "sudo snap install ".concat(snap, " ").concat(channel === "stable" ? "" : "--" + channel);
+    return /*#__PURE__*/_react.default.createElement(_CodeSnippet.default, {
+      blocks: [{
+        title: "Install snap",
+        code: code,
+        dropdowns: [{
+          options: [{
+            value: "stable",
+            label: "stable"
+          }, {
+            value: "candidate",
+            label: "candidate"
+          }, {
+            value: "beta",
+            label: "beta"
+          }, {
+            value: "edge",
+            label: "edge"
+          }],
+          value: channel,
+          onChange: event => {
+            setChannel(event.target.value);
+          }
+        }, {
+          options: [{
+            value: "firefox",
+            label: "Firefox"
+          }, {
+            value: "gimp",
+            label: "Gimp"
+          }, {
+            value: "vlc",
+            label: "VLC"
+          }],
+          value: snap,
+          onChange: event => {
+            setSnap(event.target.value);
+          }
+        }]
+      }]
+    });
+  },
+  name: "Dropdowns"
+};
+
+/**
+ * If multiple dropdowns may overlap with long title you can use `stacked` variant, by setting the relevant property on code block options.
+ */
+const DropdownsStacked = exports.DropdownsStacked = {
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [channel, setChannel] = (0, _react.useState)("stable");
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [snap, setSnap] = (0, _react.useState)("firefox");
+    const code = "sudo snap install ".concat(snap, " ").concat(channel === "stable" ? "" : "--" + channel);
+    return /*#__PURE__*/_react.default.createElement(_CodeSnippet.default, {
+      blocks: [{
+        title: "Install Firefox, Gimp or VLC as a snap from different channels using command line",
+        code: code,
+        stacked: true,
+        dropdowns: [{
+          options: [{
+            value: "stable",
+            label: "stable"
+          }, {
+            value: "candidate",
+            label: "candidate"
+          }, {
+            value: "beta",
+            label: "beta"
+          }, {
+            value: "edge",
+            label: "edge"
+          }],
+          value: channel,
+          onChange: event => {
+            setChannel(event.target.value);
+          }
+        }, {
+          options: [{
+            value: "firefox",
+            label: "Firefox"
+          }, {
+            value: "gimp",
+            label: "Gimp"
+          }, {
+            value: "vlc",
+            label: "VLC"
+          }],
+          value: snap,
+          onChange: event => {
+            setSnap(event.target.value);
+          }
+        }]
+      }]
+    });
+  },
+  name: "DropdownsStacked"
+};
+
+/**
+ * Custom elements can be passed to a CodeBlock via the `content` prop. In these cases, a border will be added around the entire code snippet to visually associate the content with the code block.
+ */
+const Content = exports.Content = {
+  render: () => /*#__PURE__*/_react.default.createElement(_CodeSnippet.default, {
+    blocks: [{
+      title: "With embedded iframe",
+      code: "<iframe src='./iframe.html?viewMode=story&id=components-button--default&args='></iframe>",
+      content: /*#__PURE__*/_react.default.createElement("iframe", {
+        title: "iframe",
+        src: "./iframe.html?viewMode=story&id=components-button--default&args="
+      })
+    }]
+  }),
+  name: "Content"
+};
+
+/**
+ * It's possible to pass JSX instead of strings to the `code` parameter, either as a single element or an array (e.g. if you want to display line numbers).
+ */
+const JsxCodeElements = exports.JsxCodeElements = {
+  render: () => /*#__PURE__*/_react.default.createElement(_CodeSnippet.default, {
+    blocks: [{
+      code: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("strong", null, "snap"), "install", /*#__PURE__*/_react.default.createElement("a", {
+        href: "#test"
+      }, "toto"), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("strong", null, "apt"), "install", /*#__PURE__*/_react.default.createElement("a", {
+        href: "#test"
+      }, "toto"))
+    }]
+  }),
+  name: "JSX code elements"
+};

package/dist/components/Col/Col.d.ts

@@ -44,5 +44,10 @@ export type Props = PropsWithSpread<{
      */
     small?: ColSize;
 }, HTMLProps<HTMLElement>>;
+/**
+ * This is a [React](https://reactjs.org/) component for use within the Vanilla [Grid](https://docs.vanillaframework.io/patterns/grid/).
+ *
+ * Vanilla has a responsive grid using a combination of rows and columns.
+ */
 declare const Col: ({ children, className, element: Component, emptyLarge, emptyMedium, emptySmall, large, medium, size, small, ...props }: Props) => JSX.Element;
 export default Col;

package/dist/components/Col/Col.js

@@ -9,6 +9,11 @@ var _react = _interopRequireDefault(require("react"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 const colSizes = exports.colSizes = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+/**
+ * This is a [React](https://reactjs.org/) component for use within the Vanilla [Grid](https://docs.vanillaframework.io/patterns/grid/).
+ *
+ * Vanilla has a responsive grid using a combination of rows and columns.
+ */
 const Col = _ref => {
   let {
     children,

package/dist/components/Col/Col.stories.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
+import Col from "./Col";
+declare const Template: (args: any) => React.JSX.Element;
+declare const meta: Meta<typeof Template>;
+export default meta;
+type Story = StoryObj<typeof Col>;
+export declare const Default: Story;
+export declare const Grid: Story;
+export declare const NestedColumns: Story;
+export declare const EmptyColumns: Story;

package/dist/components/Col/Col.stories.js

@@ -0,0 +1,154 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.NestedColumns = exports.Grid = exports.EmptyColumns = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Col = _interopRequireDefault(require("./Col"));
+var _Row = _interopRequireDefault(require("../Row"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const Template = args => {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "grid-demo"
+  }, /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, args)));
+};
+const meta = {
+  component: _Col.default,
+  render: Template,
+  tags: ["autodocs"],
+  argTypes: {
+    children: {
+      control: {
+        type: "text"
+      }
+    },
+    size: {
+      control: {
+        type: "range",
+        min: 1,
+        max: 12,
+        step: 1
+      }
+    }
+  }
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  name: "Default",
+  args: {
+    children: "Hi, I'm Col.",
+    size: 12
+  }
+};
+const Grid = exports.Grid = {
+  render: () => {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "grid-demo"
+    }, /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, {
+      size: 12
+    }, /*#__PURE__*/_react.default.createElement("span", null, ".col-12"))), /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, {
+      size: 11
+    }, /*#__PURE__*/_react.default.createElement("span", null, ".col-11")), /*#__PURE__*/_react.default.createElement(_Col.default, {
+      size: 1
+    }, /*#__PURE__*/_react.default.createElement("span", null, ".col-1"))), /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, {
+      size: 10
+    }, /*#__PURE__*/_react.default.createElement("span", null, ".col-10")), /*#__PURE__*/_react.default.createElement(_Col.default, {
+      size: 2
+    }, /*#__PURE__*/_react.default.createElement("span", null, ".col-2"))), /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, {
+      size: 9
+    }, /*#__PURE__*/_react.default.createElement("span", null, ".col-9")), /*#__PURE__*/_react.default.createElement(_Col.default, {
+      size: 3
+    }, /*#__PURE__*/_react.default.createElement("span", null, ".col-3"))), /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, {
+      size: 8
+    }, /*#__PURE__*/_react.default.createElement("span", null, ".col-8")), /*#__PURE__*/_react.default.createElement(_Col.default, {
+      size: 4
+    }, /*#__PURE__*/_react.default.createElement("span", null, ".col-4"))), /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, {
+      size: 7
+    }, /*#__PURE__*/_react.default.createElement("span", null, ".col-7")), /*#__PURE__*/_react.default.createElement(_Col.default, {
+      size: 5
+    }, /*#__PURE__*/_react.default.createElement("span", null, ".col-5"))), /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, {
+      size: 6
+    }, /*#__PURE__*/_react.default.createElement("span", null, ".col-6")), /*#__PURE__*/_react.default.createElement(_Col.default, {
+      size: 6
+    }, /*#__PURE__*/_react.default.createElement("span", null, ".col-6"))), /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, {
+      size: 5
+    }, /*#__PURE__*/_react.default.createElement("span", null, ".col-5")), /*#__PURE__*/_react.default.createElement(_Col.default, {
+      size: 7
+    }, /*#__PURE__*/_react.default.createElement("span", null, ".col-7"))), /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, {
+      size: 4
+    }, /*#__PURE__*/_react.default.createElement("span", null, ".col-4")), /*#__PURE__*/_react.default.createElement(_Col.default, {
+      size: 8
+    }, /*#__PURE__*/_react.default.createElement("span", null, ".col-8"))), /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, {
+      size: 3
+    }, /*#__PURE__*/_react.default.createElement("span", null, ".col-3")), /*#__PURE__*/_react.default.createElement(_Col.default, {
+      size: 9
+    }, /*#__PURE__*/_react.default.createElement("span", null, ".col-9"))), /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, {
+      size: 2
+    }, /*#__PURE__*/_react.default.createElement("span", null, ".col-2")), /*#__PURE__*/_react.default.createElement(_Col.default, {
+      size: 10
+    }, /*#__PURE__*/_react.default.createElement("span", null, ".col-10"))), /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, {
+      size: 1
+    }, /*#__PURE__*/_react.default.createElement("span", null, ".col-1")), /*#__PURE__*/_react.default.createElement(_Col.default, {
+      size: 11
+    }, /*#__PURE__*/_react.default.createElement("span", null, ".col-11"))));
+  },
+  name: "Grid"
+};
+const NestedColumns = exports.NestedColumns = {
+  render: () => {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "grid-demo"
+    }, /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, {
+      small: 4,
+      medium: 6,
+      size: 12
+    }, "col-small-4 .col-medium-6 .col-12", /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, {
+      small: 3,
+      medium: 3,
+      size: 9
+    }, "col-small-3 .col-medium-3 .col-9", /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, {
+      small: 1,
+      medium: 1,
+      size: 2
+    }, "col-small-1 col-medium-1 col-2"), /*#__PURE__*/_react.default.createElement(_Col.default, {
+      small: 1,
+      medium: 1,
+      size: 3
+    }, "col-small-1 col-medium-1 col-2"), /*#__PURE__*/_react.default.createElement(_Col.default, {
+      small: 1,
+      medium: 1,
+      size: 3
+    }, "col-small-1 col-medium-1 col-2"))), /*#__PURE__*/_react.default.createElement(_Col.default, {
+      small: 1,
+      medium: 3,
+      size: 3
+    }, "col-small-2 col-medium-3 col-3")))));
+  },
+  name: "Nested columns"
+};
+const EmptyColumns = exports.EmptyColumns = {
+  render: () => {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "grid-demo"
+    }, /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, {
+      size: 8
+    }, ".col-8"), /*#__PURE__*/_react.default.createElement(_Col.default, {
+      size: 4
+    }, ".col-4")), /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, {
+      size: 7
+    }, ".col-7"), /*#__PURE__*/_react.default.createElement(_Col.default, {
+      size: 4
+    }, /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, {
+      size: 3,
+      emptyLarge: 2
+    }, "col-3 col-start-large-2 inside col-4")))), /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, {
+      size: 7
+    }, ".col-7"), /*#__PURE__*/_react.default.createElement(_Col.default, {
+      size: 4
+    }, /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, {
+      size: 3
+    }, "col-3 inside col-4")))));
+  },
+  name: "Empty columns"
+};

package/dist/components/ConfirmationButton/ConfirmationButton.d.ts

@@ -21,5 +21,8 @@ export type Props = PropsWithSpread<{
      */
     showShiftClickHint?: boolean;
 }, ActionButtonProps>;
+/**
+ * `ConfirmationButton` is a specialised version of the [ActionButton](?path=/docs/actionbutton--default-story) component that uses a [ConfirmationModal](?path=/docs/confirmationmodal--default-story) to prompt a confirmation from the user before executing an action.
+ */
 export declare const ConfirmationButton: ({ confirmationModalProps, onHoverText, shiftClickEnabled, showShiftClickHint, ...actionButtonProps }: Props) => ReactElement;
 export default ConfirmationButton;

package/dist/components/ConfirmationButton/ConfirmationButton.js

@@ -10,6 +10,18 @@ var _ConfirmationModal = _interopRequireDefault(require("../ConfirmationModal"))
 var _reactUseportal = _interopRequireDefault(require("react-useportal"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+const generateTitle = title => {
+  if (typeof title === "string") {
+    return title;
+  }
+  if (typeof title === "number") {
+    return title.toString();
+  }
+  return null;
+};
+/**
+ * `ConfirmationButton` is a specialised version of the [ActionButton](?path=/docs/actionbutton--default-story) component that uses a [ConfirmationModal](?path=/docs/confirmationmodal--default-story) to prompt a confirmation from the user before executing an action.
+ */
 const ConfirmationButton = _ref => {
   let {
     confirmationModalProps,
@@ -49,7 +61,7 @@ const ConfirmationButton = _ref => {
     className: "p-text--small u-text--muted u-hide--small"
   }, "Next time, you can skip this confirmation by holding", " ", /*#__PURE__*/_react.default.createElement("code", null, "SHIFT"), " and clicking the action."))), /*#__PURE__*/_react.default.createElement(_ActionButton.default, _extends({}, actionButtonProps, {
     onClick: shiftClickEnabled ? handleShiftClick : openPortal,
-    title: onHoverText !== null && onHoverText !== void 0 ? onHoverText : confirmationModalProps.confirmButtonLabel
+    title: generateTitle(onHoverText !== null && onHoverText !== void 0 ? onHoverText : confirmationModalProps.confirmButtonLabel)
   }), actionButtonProps.children));
 };
 exports.ConfirmationButton = ConfirmationButton;

package/dist/components/ConfirmationButton/ConfirmationButton.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from "@storybook/react";
+import ConfirmationButton from "./ConfirmationButton";
+declare const meta: Meta<typeof ConfirmationButton>;
+export declare const Default: Story;
+export default meta;
+type Story = StoryObj<typeof ConfirmationButton>;
+export declare const IconAndLabel: Story;
+export declare const IconOnly: Story;
+export declare const BaseAppearance: Story;

package/dist/components/ConfirmationButton/ConfirmationButton.stories.js

@@ -0,0 +1,108 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.IconOnly = exports.IconAndLabel = exports.Default = exports.BaseAppearance = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _ConfirmationButton = _interopRequireDefault(require("./ConfirmationButton"));
+var _Icon = _interopRequireWildcard(require("../Icon"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const doNothing = () => {};
+const meta = {
+  component: _ConfirmationButton.default,
+  tags: ["autodocs"]
+};
+const Default = exports.Default = {
+  render: () => /*#__PURE__*/_react.default.createElement(_ConfirmationButton.default, {
+    confirmationModalProps: {
+      title: "Confirm delete",
+      confirmButtonLabel: "Delete",
+      onConfirm: doNothing,
+      children: /*#__PURE__*/_react.default.createElement("p", null, "This will permanently delete the user \"Simon\".", /*#__PURE__*/_react.default.createElement("br", null), "You cannot undo this action.")
+    }
+  }, "Delete"),
+  name: "Default"
+};
+var _default = exports.default = meta;
+const IconAndLabel = exports.IconAndLabel = {
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [isLoading, setLoading] = (0, _react.useState)(false);
+    const brieflyLoad = () => {
+      setLoading(true);
+      setTimeout(() => setLoading(false), 2000);
+    };
+    return /*#__PURE__*/_react.default.createElement(_ConfirmationButton.default, {
+      confirmationModalProps: {
+        title: "Confirm delete",
+        confirmButtonLabel: "Delete",
+        onConfirm: brieflyLoad,
+        children: /*#__PURE__*/_react.default.createElement("p", null, "This will permanently delete the user \"Simon\".", /*#__PURE__*/_react.default.createElement("br", null), "You cannot undo this action.")
+      },
+      className: "has-icon",
+      disabled: isLoading,
+      loading: isLoading,
+      shiftClickEnabled: true,
+      showShiftClickHint: true
+    }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      name: _Icon.ICONS.delete
+    }), /*#__PURE__*/_react.default.createElement("span", null, "Delete"));
+  },
+  name: "Icon and label"
+};
+const IconOnly = exports.IconOnly = {
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [isLoading, setLoading] = (0, _react.useState)(false);
+    const brieflyLoad = () => {
+      setLoading(true);
+      setTimeout(() => setLoading(false), 2000);
+    };
+    return /*#__PURE__*/_react.default.createElement(_ConfirmationButton.default, {
+      confirmationModalProps: {
+        title: "Confirm delete",
+        confirmButtonLabel: "Delete",
+        onConfirm: brieflyLoad,
+        children: /*#__PURE__*/_react.default.createElement("p", null, "This will permanently delete the user \"Simon\".", /*#__PURE__*/_react.default.createElement("br", null), "You cannot undo this action.")
+      },
+      className: "has-icon",
+      disabled: isLoading,
+      loading: isLoading,
+      shiftClickEnabled: true,
+      showShiftClickHint: true
+    }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      name: _Icon.ICONS.delete
+    }));
+  },
+  name: "Icon only"
+};
+const BaseAppearance = exports.BaseAppearance = {
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [isLoading, setLoading] = (0, _react.useState)(false);
+    const brieflyLoad = () => {
+      setLoading(true);
+      setTimeout(() => setLoading(false), 2000);
+    };
+    return /*#__PURE__*/_react.default.createElement(_ConfirmationButton.default, {
+      appearance: "base",
+      confirmationModalProps: {
+        title: "Confirm delete",
+        confirmButtonLabel: "Delete",
+        onConfirm: brieflyLoad,
+        children: /*#__PURE__*/_react.default.createElement("p", null, "This will permanently delete the user \"Simon\".", /*#__PURE__*/_react.default.createElement("br", null), "You cannot undo this action.")
+      },
+      className: "has-icon",
+      disabled: isLoading,
+      loading: isLoading,
+      shiftClickEnabled: true,
+      showShiftClickHint: true
+    }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      name: _Icon.ICONS.delete
+    }));
+  },
+  name: "Base appearance"
+};

package/dist/components/ConfirmationModal/ConfirmationModal.d.ts

@@ -1,13 +1,18 @@
 import { MouseEvent, ReactElement } from "react";
 import type { ReactNode } from "react";
 import { PropsWithSpread, ValueOf } from "../../types";
-import { ButtonAppearance } from "../Button";
+import { ButtonAppearance, ButtonProps } from "../Button";
 import { ModalProps } from "../Modal";
+import { ActionButtonProps } from "../ActionButton";
 export type Props = PropsWithSpread<{
     /**
      * Label for the cancel button.
      */
-    cancelButtonLabel?: string;
+    cancelButtonLabel?: ReactNode;
+    /**
+     * Additional props to be spread on the cancel button.
+     */
+    cancelButtonProps?: Partial<ButtonProps>;
     /**
      * The content of the modal.
      */
@@ -19,7 +24,11 @@ export type Props = PropsWithSpread<{
     /**
      * Label for the confirm button.
      */
-    confirmButtonLabel: string;
+    confirmButtonLabel: ReactNode;
+    /**
+     * Additional props to be spread on the confirm button.
+     */
+    confirmButtonProps?: Partial<ActionButtonProps>;
     /**
      * Extra elements to be placed in the button row of the modal.
      */
@@ -37,5 +46,8 @@ export type Props = PropsWithSpread<{
      */
     confirmButtonDisabled?: boolean;
 }, Omit<ModalProps, "buttonRow">>;
-export declare const ConfirmationModal: ({ cancelButtonLabel, children, confirmButtonAppearance, confirmButtonLabel, confirmExtra, onConfirm, confirmButtonLoading, confirmButtonDisabled, ...props }: Props) => ReactElement;
+/**
+ * `ConfirmationModal` is a specialised version of the [Modal](?path=/docs/modal--default-story) component to prompt a confirmation from the user before executing an action.
+ */
+export declare const ConfirmationModal: ({ cancelButtonLabel, cancelButtonProps, children, confirmButtonAppearance, confirmButtonLabel, confirmExtra, onConfirm, confirmButtonLoading, confirmButtonDisabled, confirmButtonProps, ...props }: Props) => ReactElement;
 export default ConfirmationModal;