@canonical/react-components 1.6.0 → 1.7.0

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

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from "@storybook/react";
+import Textarea from "./Textarea";
+declare const meta: Meta<typeof Textarea>;
+export default meta;
+type Story = StoryObj<typeof Textarea>;
+export declare const Default: Story;
+export declare const DynamicHeight: Story;

package/dist/components/Textarea/Textarea.stories.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.DynamicHeight = exports.Default = void 0;
+var _Textarea = _interopRequireDefault(require("./Textarea"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const meta = {
+  component: _Textarea.default,
+  tags: ["autodocs"],
+  argTypes: {
+    caution: {
+      control: {
+        type: "text"
+      }
+    },
+    error: {
+      control: {
+        type: "text"
+      }
+    },
+    help: {
+      control: {
+        type: "text"
+      }
+    },
+    label: {
+      control: {
+        type: "text"
+      }
+    },
+    success: {
+      control: {
+        type: "text"
+      }
+    },
+    id: {
+      control: {
+        disable: true
+      }
+    }
+  }
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  name: "Default",
+  args: {
+    label: "Tell us about your project or interest",
+    id: "textarea2",
+    rows: 3,
+    defaultValue: "Ubuntu"
+  }
+};
+const DynamicHeight = exports.DynamicHeight = {
+  name: "Dynamic Height",
+  args: {
+    label: "Text area that will dynamically adjust its height based on content",
+    defaultValue: "Ubuntu",
+    grow: true
+  }
+};

package/dist/components/Textarea/Textarea.test.d.ts

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

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

@@ -0,0 +1,12 @@
+import { Meta, StoryObj } from "@storybook/react";
+import Tooltip from "./Tooltip";
+declare const meta: Meta<typeof Tooltip>;
+export default meta;
+type Story = StoryObj<typeof Tooltip>;
+export declare const Default: Story;
+export declare const FollowMouse: Story;
+/**
+ * The tooltip elements are displayed inside a [Portal](https://reactjs.org/docs/portals.html) so that the tooltip is not constrained by its current position in the DOM.
+ * Sometimes however, you need to target the tooltip elements. This can be achieved by passing class names to the tooltip elements. You can also pass classes to the elements that trigger and position the tooltip.
+ */
+export declare const TargetingElements: Story;

package/dist/components/Tooltip/Tooltip.stories.js

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TargetingElements = exports.FollowMouse = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Button = _interopRequireDefault(require("../Button"));
+var _Tooltip = _interopRequireWildcard(require("./Tooltip"));
+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 && {}.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; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Template = args => {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: "flex",
+      justifyContent: "center",
+      padding: "3rem"
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, args, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    className: "u-no-margin--bottom"
+  }, "Hover over me!")));
+};
+const meta = {
+  component: _Tooltip.default,
+  render: Template,
+  tags: ["autodocs"],
+  argTypes: {
+    position: {
+      control: {
+        type: "radio"
+      },
+      options: Object.values(_Tooltip.position)
+    }
+  }
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  render: Template.bind({}),
+  name: "Default",
+  args: {
+    message: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Tooltip", " ", /*#__PURE__*/_react.default.createElement("a", {
+      href: "#todo",
+      target: "_blank"
+    }, "Link1"))
+  }
+};
+const FollowMouse = exports.FollowMouse = {
+  render: Template.bind({}),
+  name: "Follow mouse",
+  args: {
+    followMouse: true,
+    message: "Tooltip message to display.",
+    position: "top-center"
+  }
+};
+
+/**
+ * The tooltip elements are displayed inside a [Portal](https://reactjs.org/docs/portals.html) so that the tooltip is not constrained by its current position in the DOM.
+ * Sometimes however, you need to target the tooltip elements. This can be achieved by passing class names to the tooltip elements. You can also pass classes to the elements that trigger and position the tooltip.
+ */
+const TargetingElements = exports.TargetingElements = {
+  render: Template.bind({}),
+  name: "Targeting elements",
+  args: {
+    className: "custom-wrapping-class",
+    positionElementClassName: "custom-position-class",
+    tooltipClassName: "custom-tooltip-class",
+    message: "Tooltip message to display."
+  }
+};

package/dist/components/Tooltip/Tooltip.test.d.ts

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

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

@@ -0,0 +1,46 @@
+import { HTMLProps } from "react";
+import type { AccordionHeadings, AccordionSectionProps } from "./AccordionSection";
+import type { ClassName, PropsWithSpread } from "../../types";
+export type Section = AccordionSectionProps & {
+    /**
+     * An optional key for the section component. It will also be
+     * used to track which section is selected.
+     */
+    key?: string | number;
+};
+export type Props = PropsWithSpread<{
+    /**
+     * Optional classes applied to the parent element.
+     */
+    className?: ClassName;
+    /**
+     * An optional value to set the expanded section. The value must match a
+     * section key. This value will only set the expanded section on first render
+     * if externallyControlled is not set to `true`.
+     */
+    expanded?: string;
+    /**
+     * Whether the expanded section will be controlled via external state.
+     */
+    externallyControlled?: boolean;
+    /**
+     * Optional function that is called when the expanded section is changed.
+     * The function is provided the section title or null.
+     */
+    onExpandedChange?: (id: string, title: string) => void;
+    /**
+     * An array of sections and content.
+     */
+    sections: Section[];
+    /**
+     * Optional string describing heading element that should be used for the section titles.
+     */
+    titleElement?: AccordionHeadings;
+}, HTMLProps<HTMLElement>>;
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Accordion](https://docs.vanillaframework.io/patterns/accordion/).
+ *
+ * The sidebar accordion, used in listing pages or as navigation, can hold multiple navigation items or to be used as a filter for content.
+ */
+declare const Accordion: ({ className, expanded, externallyControlled, onExpandedChange, sections, titleElement, ...asideProps }: Props) => JSX.Element;
+export default Accordion;

package/dist/esm/components/Accordion/Accordion.js

@@ -0,0 +1,52 @@
+var _excluded = ["key"],
+  _excluded2 = ["className", "expanded", "externallyControlled", "onExpandedChange", "sections", "titleElement"];
+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, { useState } from "react";
+import AccordionSection from "./AccordionSection";
+var generateSections = (sections, setExpanded, expanded, titleElement) => sections.map((_ref, i) => {
+  var {
+      key
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(AccordionSection, _extends({
+    expanded: expanded,
+    key: key || i,
+    sectionKey: key === null || key === void 0 ? void 0 : key.toString(),
+    setExpanded: setExpanded,
+    titleElement: titleElement
+  }, props));
+});
+
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Accordion](https://docs.vanillaframework.io/patterns/accordion/).
+ *
+ * The sidebar accordion, used in listing pages or as navigation, can hold multiple navigation items or to be used as a filter for content.
+ */
+var Accordion = _ref2 => {
+  var {
+      className,
+      expanded,
+      externallyControlled,
+      onExpandedChange,
+      sections,
+      titleElement
+    } = _ref2,
+    asideProps = _objectWithoutProperties(_ref2, _excluded2);
+  var [expandedSection, setExpandedSection] = useState(expanded);
+  var setExpanded = (id, title) => {
+    setExpandedSection(id);
+    onExpandedChange && onExpandedChange(id, title);
+  };
+  return /*#__PURE__*/React.createElement("aside", _extends({
+    className: classNames(className, "p-accordion")
+  }, asideProps, {
+    role: "tablist",
+    "aria-multiselectable": "true"
+  }), /*#__PURE__*/React.createElement("ul", {
+    className: "p-accordion__list"
+  }, generateSections(sections, setExpanded, externallyControlled ? expanded : expandedSection, titleElement)));
+};
+export default Accordion;

package/dist/esm/components/Accordion/Accordion.stories.d.ts

@@ -0,0 +1,18 @@
+import { Meta, StoryObj } from "@storybook/react";
+import Accordion from "./Accordion";
+declare const meta: Meta<typeof Accordion>;
+export default meta;
+type Story = StoryObj<typeof Accordion>;
+export declare const Default: Story;
+/**
+ * The expanded accordion section can be controlled by external state.
+ */
+export declare const ExternalState: Story;
+/**
+ * `titleElement` prop can be used to define heading element for section titles.
+ */
+export declare const Headings: Story;
+/**
+ * The `title` prop can be a `ReactNode`, allowing a higher degree of customisation of the section titles.
+ */
+export declare const CustomHeadings: Story;

package/dist/esm/components/Accordion/Accordion.stories.js

@@ -0,0 +1,109 @@
+import { useState } from "react";
+import React from "react";
+import Accordion from "./Accordion";
+var meta = {
+  component: Accordion,
+  tags: ["autodocs"],
+  argTypes: {
+    sections: {
+      control: {
+        disable: true
+      }
+    },
+    externallyControlled: {
+      control: {
+        disable: true
+      }
+    }
+  }
+};
+export default meta;
+export var Default = {
+  name: "Default",
+  args: {
+    sections: [{
+      title: "Advanced topics",
+      content: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", null, "Charm bundles"), /*#__PURE__*/React.createElement("p", null, "Machine authentication"), /*#__PURE__*/React.createElement("p", null, "Migrating models"), /*#__PURE__*/React.createElement("p", null, "Using storage"), /*#__PURE__*/React.createElement("p", null, "Working with actions"), /*#__PURE__*/React.createElement("p", null, "Working with resources"), /*#__PURE__*/React.createElement("p", null, "Cloud image metadata"), /*#__PURE__*/React.createElement("p", null, "Tools"))
+    }, {
+      title: "Networking",
+      content: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", null, "Working offline"), /*#__PURE__*/React.createElement("p", null, "Fan container networking"), /*#__PURE__*/React.createElement("p", null, "Network spaces"))
+    }, {
+      title: "Miscellaneous",
+      content: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", null, "Juju GUI"), /*#__PURE__*/React.createElement("p", null, "CentOS support"), /*#__PURE__*/React.createElement("p", null, "Collecting Juju metrics"))
+    }]
+  }
+};
+
+/**
+ * The expanded accordion section can be controlled by external state.
+ */
+export var ExternalState = {
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    var [expandedSection, setExpandedSection] = useState();
+    return /*#__PURE__*/React.createElement(Accordion, {
+      expanded: expandedSection,
+      externallyControlled: true,
+      onExpandedChange: setExpandedSection,
+      sections: [{
+        title: "Advanced topics",
+        key: "advanced-topics",
+        content: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", null, "Charm bundles"), /*#__PURE__*/React.createElement("p", null, "Machine authentication"), /*#__PURE__*/React.createElement("p", null, "Migrating models"), /*#__PURE__*/React.createElement("p", null, "Using storage"), /*#__PURE__*/React.createElement("p", null, "Working with actions"), /*#__PURE__*/React.createElement("p", null, "Working with resources"), /*#__PURE__*/React.createElement("p", null, "Cloud image metadata"), /*#__PURE__*/React.createElement("p", null, "Tools"))
+      }, {
+        title: "Networking",
+        key: "networking",
+        content: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", null, "Working offline"), /*#__PURE__*/React.createElement("p", null, "Fan container networking"), /*#__PURE__*/React.createElement("p", null, "Network spaces"))
+      }, {
+        title: "Miscellaneous",
+        key: "miscellaneous",
+        content: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", null, "Juju GUI"), /*#__PURE__*/React.createElement("p", null, "CentOS support"), /*#__PURE__*/React.createElement("p", null, "Collecting Juju metrics"))
+      }]
+    });
+  },
+  name: "External state"
+};
+
+/**
+ * `titleElement` prop can be used to define heading element for section titles.
+ */
+export var Headings = {
+  name: "Headings",
+  args: {
+    sections: [{
+      title: "Advanced topics",
+      content: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", null, "Charm bundles"), /*#__PURE__*/React.createElement("p", null, "Machine authentication"), /*#__PURE__*/React.createElement("p", null, "Migrating models"), /*#__PURE__*/React.createElement("p", null, "Using storage"), /*#__PURE__*/React.createElement("p", null, "Working with actions"), /*#__PURE__*/React.createElement("p", null, "Working with resources"), /*#__PURE__*/React.createElement("p", null, "Cloud image metadata"), /*#__PURE__*/React.createElement("p", null, "Tools"))
+    }, {
+      title: "Networking",
+      content: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", null, "Working offline"), /*#__PURE__*/React.createElement("p", null, "Fan container networking"), /*#__PURE__*/React.createElement("p", null, "Network spaces"))
+    }, {
+      title: "Miscellaneous",
+      content: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", null, "Juju GUI"), /*#__PURE__*/React.createElement("p", null, "CentOS support"), /*#__PURE__*/React.createElement("p", null, "Collecting Juju metrics"))
+    }],
+    titleElement: "h3"
+  }
+};
+
+/**
+ * The `title` prop can be a `ReactNode`, allowing a higher degree of customisation of the section titles.
+ */
+export var CustomHeadings = {
+  args: {
+    sections: [{
+      title: /*#__PURE__*/React.createElement(React.Fragment, null, "Advanced topics", " ", /*#__PURE__*/React.createElement("span", {
+        className: "u-text--muted p-text--small"
+      }, "optional")),
+      content: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", null, "Charm bundles"), /*#__PURE__*/React.createElement("p", null, "Machine authentication"), /*#__PURE__*/React.createElement("p", null, "Migrating models"), /*#__PURE__*/React.createElement("p", null, "Using storage"), /*#__PURE__*/React.createElement("p", null, "Working with actions"), /*#__PURE__*/React.createElement("p", null, "Working with resources"), /*#__PURE__*/React.createElement("p", null, "Cloud image metadata"), /*#__PURE__*/React.createElement("p", null, "Tools"))
+    }, {
+      title: /*#__PURE__*/React.createElement(React.Fragment, null, "Networking", " ", /*#__PURE__*/React.createElement("span", {
+        className: "u-text--muted p-text--small"
+      }, "optional")),
+      content: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", null, "Working offline"), /*#__PURE__*/React.createElement("p", null, "Fan container networking"), /*#__PURE__*/React.createElement("p", null, "Network spaces"))
+    }, {
+      title: /*#__PURE__*/React.createElement(React.Fragment, null, "Miscellaneous", " ", /*#__PURE__*/React.createElement("span", {
+        className: "u-text--muted p-text--small"
+      }, "optional")),
+      content: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", null, "Juju GUI"), /*#__PURE__*/React.createElement("p", null, "CentOS support"), /*#__PURE__*/React.createElement("p", null, "Collecting Juju metrics"))
+    }],
+    titleElement: "h3"
+  }
+};

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

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

package/dist/esm/components/Accordion/AccordionSection/AccordionSection.d.ts

@@ -0,0 +1,34 @@
+import type { ReactNode } from "react";
+import type { Headings } from "../../../types";
+export type AccordionHeadings = Exclude<Headings, "h1">;
+export type Props = {
+    /**
+     * The content of the section.
+     */
+    content?: ReactNode;
+    /**
+     * An optional value to set the expanded section. The value must match a
+     * section key.
+     */
+    expanded?: string | null;
+    headingLevel?: number;
+    /**
+     * An optional click event when the title is clicked.
+     */
+    onTitleClick?: (expanded: boolean, key: string) => void;
+    /**
+     * An optional key to be used to track which section is selected.
+     */
+    sectionKey?: string;
+    setExpanded?: (key: string | null, title: ReactNode | null) => void;
+    /**
+     * The title of the section.
+     */
+    title?: ReactNode;
+    /**
+     * Optional string describing heading element that should be used for the section titles.
+     */
+    titleElement?: AccordionHeadings;
+};
+declare const AccordionSection: ({ content, expanded, onTitleClick, sectionKey, setExpanded, title, titleElement, headingLevel, }: Props) => JSX.Element;
+export default AccordionSection;

package/dist/esm/components/Accordion/AccordionSection/AccordionSection.js

@@ -0,0 +1,47 @@
+import React, { useId } from "react";
+var AccordionSection = _ref => {
+  var {
+    content,
+    expanded,
+    onTitleClick,
+    sectionKey,
+    setExpanded,
+    title,
+    titleElement,
+    headingLevel = 3
+  } = _ref;
+  var sectionId = useId();
+  var tabId = useId();
+  var key = sectionKey || sectionId;
+  var isExpanded = expanded === key;
+  var Title = titleElement || "div";
+  return /*#__PURE__*/React.createElement("li", {
+    className: "p-accordion__group"
+  }, /*#__PURE__*/React.createElement(Title, {
+    role: titleElement ? null : "heading",
+    "aria-level": titleElement ? null : headingLevel,
+    className: "p-accordion__heading"
+  }, /*#__PURE__*/React.createElement("button", {
+    "aria-controls": "#".concat(sectionId),
+    "aria-expanded": isExpanded ? "true" : "false",
+    className: "p-accordion__tab",
+    id: tabId,
+    onClick: () => {
+      if (isExpanded) {
+        setExpanded(null, null);
+      } else {
+        setExpanded(key, title);
+      }
+      onTitleClick && onTitleClick(!isExpanded, key);
+    },
+    role: "tab",
+    type: "button"
+  }, title)), /*#__PURE__*/React.createElement("section", {
+    "aria-hidden": isExpanded ? "false" : "true",
+    "aria-labelledby": tabId,
+    className: "p-accordion__panel",
+    id: sectionId,
+    role: "tabpanel"
+  }, content));
+};
+export default AccordionSection;

package/dist/esm/components/Accordion/AccordionSection/AccordionSection.test.d.ts

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

package/dist/esm/components/Accordion/AccordionSection/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./AccordionSection";
+export type { Props as AccordionSectionProps, AccordionHeadings, } from "./AccordionSection";

package/dist/esm/components/Accordion/AccordionSection/index.js

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

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

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

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

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

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

@@ -0,0 +1,48 @@
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+import type { ButtonProps } from "../Button";
+import type { ClassName, PropsWithSpread } from "../../types";
+export declare const LOADER_MIN_DURATION = 400;
+export declare const SUCCESS_DURATION = 2000;
+export declare enum Label {
+    WAITING = "Waiting for action to complete",
+    SUCCESS = "Action completed"
+}
+export type Props = PropsWithSpread<{
+    /**
+     * The appearance of the button.
+     */
+    appearance?: ButtonProps["appearance"];
+    /**
+     * The content of the button.
+     */
+    children?: ReactNode;
+    /**
+     * Optional class(es) to pass to the button element.
+     */
+    className?: ClassName;
+    /**
+     * Whether the button should be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Whether the button should display inline.
+     */
+    inline?: boolean;
+    /**
+     * Whether the button should be in the loading state.
+     */
+    loading?: boolean;
+    /**
+     * Whether the button should be in the success state.
+     */
+    success?: boolean;
+}, ButtonHTMLAttributes<HTMLButtonElement>>;
+/**
+ * This is a not an existing Vanilla component. It can be used to display submitting states for forms or other actions.
+ *
+ * ActionButton accepts the props from
+ * [Button](?path=/docs/components-button--docs) in addition to those in the
+ * props table:
+ */
+declare const ActionButton: ({ appearance, children, className, disabled, inline, loading, success, ...buttonProps }: Props) => JSX.Element;
+export default ActionButton;

package/dist/esm/components/ActionButton/ActionButton.js

@@ -0,0 +1,106 @@
+var _excluded = ["appearance", "children", "className", "disabled", "inline", "loading", "success"];
+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, { useEffect, useRef, useState } from "react";
+import Icon from "../Icon";
+export var LOADER_MIN_DURATION = 400; // minimium duration (ms) loader displays
+export var SUCCESS_DURATION = 2000; // duration (ms) success tick is displayed
+
+export var Label = /*#__PURE__*/function (Label) {
+  Label["WAITING"] = "Waiting for action to complete";
+  Label["SUCCESS"] = "Action completed";
+  return Label;
+}({});
+/**
+ * This is a not an existing Vanilla component. It can be used to display submitting states for forms or other actions.
+ *
+ * ActionButton accepts the props from
+ * [Button](?path=/docs/components-button--docs) in addition to those in the
+ * props table:
+ */
+var ActionButton = _ref => {
+  var {
+      appearance,
+      children,
+      className,
+      disabled = false,
+      inline = false,
+      loading = false,
+      success = false
+    } = _ref,
+    buttonProps = _objectWithoutProperties(_ref, _excluded);
+  var [height, setHeight] = useState();
+  var [width, setWidth] = useState();
+  var [showLoader, setShowLoader] = useState(false);
+  var [showSuccess, setShowSuccess] = useState(false);
+  var ref = useRef(null);
+
+  // Set up loader timer
+  useEffect(() => {
+    var loaderTimeout;
+    if (loading) {
+      // Explicitly set button dimensions
+      if (ref.current && !!ref.current.getBoundingClientRect()) {
+        setHeight(ref.current.getBoundingClientRect().height);
+        setWidth(ref.current.getBoundingClientRect().width);
+      }
+      setShowLoader(true);
+    }
+    if (!loading && showLoader) {
+      loaderTimeout = window.setTimeout(() => {
+        setShowLoader(false);
+        if (success) {
+          setShowSuccess(true);
+        }
+      }, LOADER_MIN_DURATION);
+    }
+    if (!loading && !showLoader) {
+      setHeight(null);
+      setWidth(null);
+    }
+    return () => window.clearTimeout(loaderTimeout);
+  }, [loading, showLoader, success]);
+
+  // Set up success timer
+  useEffect(() => {
+    var successTimeout;
+    if (showSuccess) {
+      successTimeout = window.setTimeout(() => {
+        setHeight(null);
+        setWidth(null);
+        setShowSuccess(false);
+      }, SUCCESS_DURATION);
+    }
+    return () => window.clearTimeout(successTimeout);
+  }, [showSuccess]);
+  var buttonClasses = classNames(className, "p-action-button", appearance ? "p-button--".concat(appearance) : "p-button", {
+    "is-processing": showLoader || showSuccess,
+    "is-disabled": disabled,
+    "is-inline": inline
+  });
+  var showIcon = showLoader || showSuccess;
+  var icon = showLoader && "spinner" || showSuccess && "success" || null;
+  var iconLight = appearance === "positive" || appearance === "negative";
+
+  // This component uses the base button element instead of the Button component
+  // as the button requires a ref and Button would have to be updated to use
+  // forwardRef which is not currently supported by components that use
+  // typescript generics.
+  return /*#__PURE__*/React.createElement("button", _extends({
+    className: buttonClasses,
+    disabled: disabled,
+    ref: ref,
+    style: height && width ? {
+      height: "".concat(height, "px"),
+      width: "".concat(width, "px")
+    } : undefined
+  }, buttonProps), showIcon ? /*#__PURE__*/React.createElement(Icon, {
+    "aria-label": showLoader ? Label.WAITING : Label.SUCCESS,
+    className: showLoader ? "u-animation--spin" : null,
+    light: iconLight,
+    name: icon
+  }) : children);
+};
+export default ActionButton;

package/dist/esm/components/ActionButton/ActionButton.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from "@storybook/react";
+import ActionButton from "./ActionButton";
+declare const meta: Meta<typeof ActionButton>;
+export default meta;
+type Story = StoryObj<typeof ActionButton>;
+export declare const Default: Story;
+export declare const Loading: Story;