@canonical/react-components 1.6.0 → 1.7.1

package/dist/esm/components/CodeSnippet/CodeSnippetBlock.js

@@ -0,0 +1,64 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import classNames from "classnames";
+import React from "react";
+import CodeSnippetDropdown from "./CodeSnippetDropdown";
+export var CodeSnippetBlockAppearance = {
+  LINUX_PROMPT: "linuxPrompt",
+  NUMBERED: "numbered",
+  URL: "url",
+  WINDOWS_PROMPT: "windowsPrompt"
+};
+export default function CodeSnippetBlock(_ref) {
+  var {
+    appearance,
+    code,
+    content,
+    dropdowns,
+    stacked = false,
+    title,
+    wrapLines = false
+  } = _ref;
+  var className = "p-code-snippet__block";
+  var isNumbered = appearance === CodeSnippetBlockAppearance.NUMBERED;
+  var hasIcon = appearance === CodeSnippetBlockAppearance.LINUX_PROMPT || appearance === CodeSnippetBlockAppearance.WINDOWS_PROMPT || appearance === CodeSnippetBlockAppearance.URL;
+  var numberedCode;
+  if (isNumbered) {
+    className += "--numbered";
+
+    // wrap code lines in spans (and preserve the whitespace)
+    var lines;
+    if (Array.isArray(code)) {
+      lines = code;
+    } else if (typeof code === "string") {
+      lines = code.split(/\r?\n/);
+    } else {
+      // If the code is not able to be split over multiple lines, then display
+      // a single line number.
+      lines = [code];
+    }
+    numberedCode = lines.map((line, i) => /*#__PURE__*/React.createElement(React.Fragment, {
+      key: "p-code-snippet__line-".concat(i)
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "p-code-snippet__line"
+    }, line), "\n"));
+  } else if (hasIcon) {
+    className += "--icon";
+  }
+  className = classNames(className, {
+    "is-windows-prompt": appearance === CodeSnippetBlockAppearance.WINDOWS_PROMPT,
+    "is-url": appearance === CodeSnippetBlockAppearance.URL,
+    "is-wrapped": wrapLines
+  });
+  var hasDropdowns = dropdowns && dropdowns.length;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, (title || hasDropdowns) && /*#__PURE__*/React.createElement("div", {
+    className: "p-code-snippet__header ".concat(stacked ? "is-stacked" : "")
+  }, /*#__PURE__*/React.createElement("h5", {
+    className: "p-code-snippet__title"
+  }, title), hasDropdowns && /*#__PURE__*/React.createElement("div", {
+    className: "p-code-snippet__dropdowns"
+  }, dropdowns.map((dropdown, i) => /*#__PURE__*/React.createElement(CodeSnippetDropdown, _extends({}, dropdown, {
+    key: "code-snippet-dropdown-".concat(i)
+  }))))), /*#__PURE__*/React.createElement("pre", {
+    className: className
+  }, /*#__PURE__*/React.createElement("code", null, isNumbered ? numberedCode : code)), content);
+}

package/dist/esm/components/CodeSnippet/CodeSnippetDropdown.d.ts

@@ -0,0 +1,18 @@
+import type { ChangeEventHandler, HTMLProps } from "react";
+export type DropdownOptionProps = {
+    /**
+     * The label of the dropdown option.
+     */
+    label: string;
+} & HTMLProps<HTMLOptionElement>;
+export type Props = {
+    /**
+     * Function for handling the select value changing.
+     */
+    onChange: ChangeEventHandler<HTMLSelectElement>;
+    /**
+     * Options to pass to the select.
+     */
+    options: DropdownOptionProps[];
+} & HTMLProps<HTMLSelectElement>;
+export default function CodeSnippetDropdown({ options, onChange, ...props }: Props): JSX.Element;

package/dist/esm/components/CodeSnippet/CodeSnippetDropdown.js

@@ -0,0 +1,27 @@
+var _excluded = ["options", "onChange"],
+  _excluded2 = ["label", "value"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import React from "react";
+export default function CodeSnippetDropdown(_ref) {
+  var {
+      options,
+      onChange
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("select", _extends({
+    className: "p-code-snippet__dropdown",
+    onChange: onChange
+  }, props), options.map(_ref2 => {
+    var {
+        label,
+        value
+      } = _ref2,
+      props = _objectWithoutProperties(_ref2, _excluded2);
+    return /*#__PURE__*/React.createElement("option", _extends({
+      value: value,
+      key: value + "" || label
+    }, props), label);
+  }));
+}

package/dist/esm/components/CodeSnippet/index.d.ts

@@ -0,0 +1,5 @@
+export { default } from "./CodeSnippet";
+export type { Props as CodeSnippetProps } from "./CodeSnippet";
+export { CodeSnippetBlockAppearance } from "./CodeSnippetBlock";
+export type { Props as CodeSnippetBlockProps } from "./CodeSnippetBlock";
+export type { Props as CodeSnippetDropdownProps } from "./CodeSnippetDropdown";

package/dist/esm/components/CodeSnippet/index.js

@@ -0,0 +1,2 @@
+export { default } from "./CodeSnippet";
+export { CodeSnippetBlockAppearance } from "./CodeSnippetBlock";

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

@@ -0,0 +1,53 @@
+import type { ElementType, HTMLProps, ReactNode } from "react";
+import type { ClassName, PropsWithSpread } from "../../types";
+export type ColSize = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+export declare const colSizes: ColSize[];
+export type Props = PropsWithSpread<{
+    /**
+     * The content of the column.
+     */
+    children?: ReactNode;
+    /**
+     * Optional class(es) to pass to the wrapping element.
+     */
+    className?: ClassName;
+    /**
+     * Optional element type to give the wrapper if not "div".
+     */
+    element?: ElementType;
+    /**
+     * The number of columns to skip before starting on large screens.
+     */
+    emptyLarge?: ColSize;
+    /**
+     * The number of columns to skip before starting on medium screens.
+     */
+    emptyMedium?: ColSize;
+    /**
+     * The number of columns to skip before starting on small screens.
+     */
+    emptySmall?: ColSize;
+    /**
+     * Override for the number of columns the content occupies on large screens.
+     */
+    large?: ColSize;
+    /**
+     * Override for the number of columns the content occupies on medium screens.
+     */
+    medium?: ColSize;
+    /**
+     * The number of columns the content occupies.
+     */
+    size: ColSize;
+    /**
+     * Override for the number of columns the content occupies on small screens.
+     */
+    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/esm/components/Col/Col.js

@@ -0,0 +1,38 @@
+var _excluded = ["children", "className", "element", "emptyLarge", "emptyMedium", "emptySmall", "large", "medium", "size", "small"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import classNames from "classnames";
+import React from "react";
+export var 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.
+ */
+var Col = _ref => {
+  var {
+      children,
+      className,
+      element: Component = "div",
+      emptyLarge,
+      emptyMedium,
+      emptySmall,
+      large,
+      medium,
+      size,
+      small
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    className: classNames(className, "col-".concat(size), {
+      ["col-small-".concat(small)]: !!small,
+      ["col-medium-".concat(medium)]: !!medium,
+      ["col-large-".concat(large)]: !!large,
+      ["col-start-small-".concat(emptySmall)]: !!emptySmall,
+      ["col-start-medium-".concat(emptyMedium)]: !!emptyMedium,
+      ["col-start-large-".concat(emptyLarge)]: !!emptyLarge
+    })
+  }, props), children);
+};
+export default Col;

package/dist/esm/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/esm/components/Col/Col.stories.js

@@ -0,0 +1,147 @@
+import React from "react";
+import Col from "./Col";
+import Row from "../Row";
+var Template = args => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "grid-demo"
+  }, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, args)));
+};
+var meta = {
+  component: Col,
+  render: Template,
+  tags: ["autodocs"],
+  argTypes: {
+    children: {
+      control: {
+        type: "text"
+      }
+    },
+    size: {
+      control: {
+        type: "range",
+        min: 1,
+        max: 12,
+        step: 1
+      }
+    }
+  }
+};
+export default meta;
+export var Default = {
+  name: "Default",
+  args: {
+    children: "Hi, I'm Col.",
+    size: 12
+  }
+};
+export var Grid = {
+  render: () => {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "grid-demo"
+    }, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, {
+      size: 12
+    }, /*#__PURE__*/React.createElement("span", null, ".col-12"))), /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, {
+      size: 11
+    }, /*#__PURE__*/React.createElement("span", null, ".col-11")), /*#__PURE__*/React.createElement(Col, {
+      size: 1
+    }, /*#__PURE__*/React.createElement("span", null, ".col-1"))), /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, {
+      size: 10
+    }, /*#__PURE__*/React.createElement("span", null, ".col-10")), /*#__PURE__*/React.createElement(Col, {
+      size: 2
+    }, /*#__PURE__*/React.createElement("span", null, ".col-2"))), /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, {
+      size: 9
+    }, /*#__PURE__*/React.createElement("span", null, ".col-9")), /*#__PURE__*/React.createElement(Col, {
+      size: 3
+    }, /*#__PURE__*/React.createElement("span", null, ".col-3"))), /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, {
+      size: 8
+    }, /*#__PURE__*/React.createElement("span", null, ".col-8")), /*#__PURE__*/React.createElement(Col, {
+      size: 4
+    }, /*#__PURE__*/React.createElement("span", null, ".col-4"))), /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, {
+      size: 7
+    }, /*#__PURE__*/React.createElement("span", null, ".col-7")), /*#__PURE__*/React.createElement(Col, {
+      size: 5
+    }, /*#__PURE__*/React.createElement("span", null, ".col-5"))), /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, {
+      size: 6
+    }, /*#__PURE__*/React.createElement("span", null, ".col-6")), /*#__PURE__*/React.createElement(Col, {
+      size: 6
+    }, /*#__PURE__*/React.createElement("span", null, ".col-6"))), /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, {
+      size: 5
+    }, /*#__PURE__*/React.createElement("span", null, ".col-5")), /*#__PURE__*/React.createElement(Col, {
+      size: 7
+    }, /*#__PURE__*/React.createElement("span", null, ".col-7"))), /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, {
+      size: 4
+    }, /*#__PURE__*/React.createElement("span", null, ".col-4")), /*#__PURE__*/React.createElement(Col, {
+      size: 8
+    }, /*#__PURE__*/React.createElement("span", null, ".col-8"))), /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, {
+      size: 3
+    }, /*#__PURE__*/React.createElement("span", null, ".col-3")), /*#__PURE__*/React.createElement(Col, {
+      size: 9
+    }, /*#__PURE__*/React.createElement("span", null, ".col-9"))), /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, {
+      size: 2
+    }, /*#__PURE__*/React.createElement("span", null, ".col-2")), /*#__PURE__*/React.createElement(Col, {
+      size: 10
+    }, /*#__PURE__*/React.createElement("span", null, ".col-10"))), /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, {
+      size: 1
+    }, /*#__PURE__*/React.createElement("span", null, ".col-1")), /*#__PURE__*/React.createElement(Col, {
+      size: 11
+    }, /*#__PURE__*/React.createElement("span", null, ".col-11"))));
+  },
+  name: "Grid"
+};
+export var NestedColumns = {
+  render: () => {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "grid-demo"
+    }, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, {
+      small: 4,
+      medium: 6,
+      size: 12
+    }, "col-small-4 .col-medium-6 .col-12", /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, {
+      small: 3,
+      medium: 3,
+      size: 9
+    }, "col-small-3 .col-medium-3 .col-9", /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, {
+      small: 1,
+      medium: 1,
+      size: 2
+    }, "col-small-1 col-medium-1 col-2"), /*#__PURE__*/React.createElement(Col, {
+      small: 1,
+      medium: 1,
+      size: 3
+    }, "col-small-1 col-medium-1 col-2"), /*#__PURE__*/React.createElement(Col, {
+      small: 1,
+      medium: 1,
+      size: 3
+    }, "col-small-1 col-medium-1 col-2"))), /*#__PURE__*/React.createElement(Col, {
+      small: 1,
+      medium: 3,
+      size: 3
+    }, "col-small-2 col-medium-3 col-3")))));
+  },
+  name: "Nested columns"
+};
+export var EmptyColumns = {
+  render: () => {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "grid-demo"
+    }, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, {
+      size: 8
+    }, ".col-8"), /*#__PURE__*/React.createElement(Col, {
+      size: 4
+    }, ".col-4")), /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, {
+      size: 7
+    }, ".col-7"), /*#__PURE__*/React.createElement(Col, {
+      size: 4
+    }, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, {
+      size: 3,
+      emptyLarge: 2
+    }, "col-3 col-start-large-2 inside col-4")))), /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, {
+      size: 7
+    }, ".col-7"), /*#__PURE__*/React.createElement(Col, {
+      size: 4
+    }, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, {
+      size: 3
+    }, "col-3 inside col-4")))));
+  },
+  name: "Empty columns"
+};

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

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

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

@@ -0,0 +1,2 @@
+export { default, colSizes } from "./Col";
+export type { ColSize, Props as ColProps } from "./Col";

package/dist/esm/components/Col/index.js

@@ -0,0 +1 @@
+export { default, colSizes } from "./Col";

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

@@ -0,0 +1,28 @@
+import { ReactElement } from "react";
+import { PropsWithSpread, SubComponentProps } from "../../types";
+import { ActionButtonProps } from "../ActionButton";
+import { ConfirmationModalProps } from "../ConfirmationModal";
+export type Props = PropsWithSpread<{
+    /**
+     * Additional props to pass to the confirmation modal.
+     */
+    confirmationModalProps: SubComponentProps<ConfirmationModalProps>;
+    /**
+     * An optional text to be shown when hovering over the button.<br/>
+     * Defaults to the label of the confirm button in the modal.
+     */
+    onHoverText?: string;
+    /**
+     * Whether to enable the SHIFT+Click shortcut to skip the confirmation modal and perform the action.
+     */
+    shiftClickEnabled?: boolean;
+    /**
+     * Whether to show a hint about the SHIFT+Click shortcut to skip the confirmation modal.
+     */
+    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/esm/components/ConfirmationButton/ConfirmationButton.js

@@ -0,0 +1,63 @@
+var _excluded = ["confirmationModalProps", "onHoverText", "shiftClickEnabled", "showShiftClickHint"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import React from "react";
+import ActionButton from "../ActionButton";
+import ConfirmationModal from "../ConfirmationModal";
+import usePortal from "react-useportal";
+var 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.
+ */
+export var ConfirmationButton = _ref => {
+  var {
+      confirmationModalProps,
+      onHoverText,
+      shiftClickEnabled = false,
+      showShiftClickHint = false
+    } = _ref,
+    actionButtonProps = _objectWithoutProperties(_ref, _excluded);
+  var {
+    openPortal,
+    closePortal,
+    isOpen,
+    Portal
+  } = usePortal();
+  var handleCancelModal = () => {
+    closePortal();
+    if (confirmationModalProps.close) {
+      confirmationModalProps.close();
+    }
+  };
+  var handleConfirmModal = e => {
+    closePortal();
+    confirmationModalProps.onConfirm(e);
+  };
+  var handleShiftClick = e => {
+    if (e.shiftKey) {
+      confirmationModalProps.onConfirm(e);
+    } else {
+      openPortal(e);
+    }
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, isOpen && /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(ConfirmationModal, _extends({}, confirmationModalProps, {
+    close: handleCancelModal,
+    confirmButtonLabel: confirmationModalProps.confirmButtonLabel,
+    onConfirm: handleConfirmModal
+  }), confirmationModalProps.children, showShiftClickHint && /*#__PURE__*/React.createElement("p", {
+    className: "p-text--small u-text--muted u-hide--small"
+  }, "Next time, you can skip this confirmation by holding", " ", /*#__PURE__*/React.createElement("code", null, "SHIFT"), " and clicking the action."))), /*#__PURE__*/React.createElement(ActionButton, _extends({}, actionButtonProps, {
+    onClick: shiftClickEnabled ? handleShiftClick : openPortal,
+    title: generateTitle(onHoverText !== null && onHoverText !== void 0 ? onHoverText : confirmationModalProps.confirmButtonLabel)
+  }), actionButtonProps.children));
+};
+export default ConfirmationButton;

package/dist/esm/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/esm/components/ConfirmationButton/ConfirmationButton.stories.js

@@ -0,0 +1,100 @@
+import React from "react";
+import { useState } from "react";
+import ConfirmationButton from "./ConfirmationButton";
+import Icon, { ICONS } from "../Icon";
+var doNothing = () => {};
+var meta = {
+  component: ConfirmationButton,
+  tags: ["autodocs"]
+};
+export var Default = {
+  render: () => /*#__PURE__*/React.createElement(ConfirmationButton, {
+    confirmationModalProps: {
+      title: "Confirm delete",
+      confirmButtonLabel: "Delete",
+      onConfirm: doNothing,
+      children: /*#__PURE__*/React.createElement("p", null, "This will permanently delete the user \"Simon\".", /*#__PURE__*/React.createElement("br", null), "You cannot undo this action.")
+    }
+  }, "Delete"),
+  name: "Default"
+};
+export default meta;
+export var IconAndLabel = {
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    var [isLoading, setLoading] = useState(false);
+    var brieflyLoad = () => {
+      setLoading(true);
+      setTimeout(() => setLoading(false), 2000);
+    };
+    return /*#__PURE__*/React.createElement(ConfirmationButton, {
+      confirmationModalProps: {
+        title: "Confirm delete",
+        confirmButtonLabel: "Delete",
+        onConfirm: brieflyLoad,
+        children: /*#__PURE__*/React.createElement("p", null, "This will permanently delete the user \"Simon\".", /*#__PURE__*/React.createElement("br", null), "You cannot undo this action.")
+      },
+      className: "has-icon",
+      disabled: isLoading,
+      loading: isLoading,
+      shiftClickEnabled: true,
+      showShiftClickHint: true
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: ICONS.delete
+    }), /*#__PURE__*/React.createElement("span", null, "Delete"));
+  },
+  name: "Icon and label"
+};
+export var IconOnly = {
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    var [isLoading, setLoading] = useState(false);
+    var brieflyLoad = () => {
+      setLoading(true);
+      setTimeout(() => setLoading(false), 2000);
+    };
+    return /*#__PURE__*/React.createElement(ConfirmationButton, {
+      confirmationModalProps: {
+        title: "Confirm delete",
+        confirmButtonLabel: "Delete",
+        onConfirm: brieflyLoad,
+        children: /*#__PURE__*/React.createElement("p", null, "This will permanently delete the user \"Simon\".", /*#__PURE__*/React.createElement("br", null), "You cannot undo this action.")
+      },
+      className: "has-icon",
+      disabled: isLoading,
+      loading: isLoading,
+      shiftClickEnabled: true,
+      showShiftClickHint: true
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: ICONS.delete
+    }));
+  },
+  name: "Icon only"
+};
+export var BaseAppearance = {
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    var [isLoading, setLoading] = useState(false);
+    var brieflyLoad = () => {
+      setLoading(true);
+      setTimeout(() => setLoading(false), 2000);
+    };
+    return /*#__PURE__*/React.createElement(ConfirmationButton, {
+      appearance: "base",
+      confirmationModalProps: {
+        title: "Confirm delete",
+        confirmButtonLabel: "Delete",
+        onConfirm: brieflyLoad,
+        children: /*#__PURE__*/React.createElement("p", null, "This will permanently delete the user \"Simon\".", /*#__PURE__*/React.createElement("br", null), "You cannot undo this action.")
+      },
+      className: "has-icon",
+      disabled: isLoading,
+      loading: isLoading,
+      shiftClickEnabled: true,
+      showShiftClickHint: true
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: ICONS.delete
+    }));
+  },
+  name: "Base appearance"
+};

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

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

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

@@ -0,0 +1,2 @@
+export { default } from "./ConfirmationButton";
+export type { Props as ConfirmationButtonProps } from "./ConfirmationButton";

package/dist/esm/components/ConfirmationButton/index.js

@@ -0,0 +1 @@
+export { default } from "./ConfirmationButton";

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

@@ -0,0 +1,53 @@
+import { MouseEvent, ReactElement } from "react";
+import type { ReactNode } from "react";
+import { PropsWithSpread, ValueOf } from "../../types";
+import { ButtonAppearance, ButtonProps } from "../Button";
+import { ModalProps } from "../Modal";
+import { ActionButtonProps } from "../ActionButton";
+export type Props = PropsWithSpread<{
+    /**
+     * Label for the cancel button.
+     */
+    cancelButtonLabel?: ReactNode;
+    /**
+     * Additional props to be spread on the cancel button.
+     */
+    cancelButtonProps?: Partial<ButtonProps>;
+    /**
+     * The content of the modal.
+     */
+    children: ReactNode;
+    /**
+     * Appearance of the confirm button.
+     */
+    confirmButtonAppearance?: ValueOf<typeof ButtonAppearance> | string;
+    /**
+     * Label for the confirm button.
+     */
+    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.
+     */
+    confirmExtra?: ReactNode;
+    /**
+     * Function to perform the action prompted by the modal.
+     */
+    onConfirm: (event: MouseEvent<HTMLElement>) => void;
+    /**
+     * Whether the confirm button should be in the loading state.
+     */
+    confirmButtonLoading?: boolean;
+    /**
+     * Whether the confirm button should be disabled.
+     */
+    confirmButtonDisabled?: boolean;
+}, Omit<ModalProps, "buttonRow">>;
+/**
+ * `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;