@canonical/react-components 1.5.0 → 1.7.0

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(e) { return e && e.__esModule ? e : { default: e }; }
+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/Col/Col.test.d.ts

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

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(e) { return e && e.__esModule ? e : { default: e }; }
+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; }
+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/ConfirmationButton/ConfirmationButton.test.d.ts

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

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

@@ -0,0 +1,18 @@
+import { Meta, StoryObj } from "@storybook/react";
+import ConfirmationModal from "./ConfirmationModal";
+declare const meta: Meta<typeof ConfirmationModal>;
+export default meta;
+type Story = StoryObj<typeof ConfirmationModal>;
+export declare const Default: Story;
+/**
+ * The title is optional, and the content is fully customisable.
+ */
+export declare const NoTitle: Story;
+/**
+ * The appearance of the confirm button can be any of the `Button`'s appearance values.
+ */
+export declare const Positive: Story;
+/**
+ * Extra elements can be added to the button row.
+ */
+export declare const Extra: Story;

package/dist/components/ConfirmationModal/ConfirmationModal.stories.js

@@ -0,0 +1,135 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Positive = exports.NoTitle = exports.Extra = exports.Default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _ConfirmationModal = _interopRequireDefault(require("./ConfirmationModal"));
+var _Input = _interopRequireDefault(require("../Input"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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; }
+const doNothing = () => {};
+const meta = {
+  component: _ConfirmationModal.default,
+  tags: ["autodocs"]
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [modalOpen, setModalOpen] = (0, _react.useState)(false);
+    const closeHandler = () => setModalOpen(false);
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
+      onClick: () => setModalOpen(true)
+    }, "Open confirmation modal"), modalOpen ? /*#__PURE__*/_react.default.createElement(_ConfirmationModal.default, {
+      title: "Confirm delete",
+      confirmButtonLabel: "Delete",
+      onConfirm: doNothing,
+      close: closeHandler
+    }, /*#__PURE__*/_react.default.createElement("p", null, "This will permanently delete the user \"Simon\".", /*#__PURE__*/_react.default.createElement("br", null), "You cannot undo this action.")) : null);
+  },
+  name: "Default"
+};
+
+/**
+ * The title is optional, and the content is fully customisable.
+ */
+const NoTitle = exports.NoTitle = {
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [modalOpen, setModalOpen] = (0, _react.useState)(false);
+    const closeHandler = () => setModalOpen(false);
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
+      onClick: () => setModalOpen(true)
+    }, "Run"), modalOpen ? /*#__PURE__*/_react.default.createElement(_ConfirmationModal.default, {
+      close: closeHandler,
+      confirmButtonAppearance: "positive",
+      confirmButtonLabel: "Confirm",
+      onConfirm: doNothing
+    }, /*#__PURE__*/_react.default.createElement("h4", {
+      style: {
+        margin: "1rem 0"
+      }
+    }, "Run list-backups?"), /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        width: "480px",
+        marginBottom: "1rem"
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "u-text--muted"
+    }, "UNIT COUNT"), /*#__PURE__*/_react.default.createElement("div", null, "1")), /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        marginBottom: "1.5rem"
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "u-text--muted"
+    }, "UNIT NAME"), /*#__PURE__*/_react.default.createElement("div", null, "mysql/0"))) : null);
+  },
+  name: "No title"
+};
+
+/**
+ * The appearance of the confirm button can be any of the `Button`'s appearance values.
+ */
+const Positive = exports.Positive = {
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [modalOpen, setModalOpen] = (0, _react.useState)(false);
+    const closeHandler = () => setModalOpen(false);
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
+      onClick: () => setModalOpen(true)
+    }, "Apply changes"), modalOpen ? /*#__PURE__*/_react.default.createElement(_ConfirmationModal.default, {
+      close: closeHandler,
+      confirmButtonAppearance: "positive",
+      confirmButtonLabel: "Yes, apply changes",
+      onConfirm: doNothing
+    }, /*#__PURE__*/_react.default.createElement("h4", {
+      style: {
+        margin: "1rem 0"
+      }
+    }, "Are you sure you wish to apply these changes?"), /*#__PURE__*/_react.default.createElement("p", null, "You have edited the following values to the mysql configuration:"), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h5", {
+      className: "u-no-margin--bottom"
+    }, "cluster-name"), /*#__PURE__*/_react.default.createElement("pre", {
+      className: "u-no-padding",
+      style: {
+        backgroundColor: "transparent"
+      }
+    }, "test")), /*#__PURE__*/_react.default.createElement("div", {
+      className: "p-text--small",
+      style: {
+        width: "480px"
+      }
+    }, "You can revert back to the applications default settings by clicking the \u201CReset all values\u201D button; or reset each edited field by clicking \u201CUse default\u201D.")) : null);
+  },
+  name: "Positive"
+};
+
+/**
+ * Extra elements can be added to the button row.
+ */
+const Extra = exports.Extra = {
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [modalOpen, setModalOpen] = (0, _react.useState)(false);
+    const closeHandler = () => setModalOpen(false);
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
+      onClick: () => setModalOpen(true)
+    }, "Stop"), modalOpen ? /*#__PURE__*/_react.default.createElement(_ConfirmationModal.default, {
+      confirmExtra: /*#__PURE__*/_react.default.createElement("span", {
+        className: "u-float-left"
+      }, /*#__PURE__*/_react.default.createElement(_Input.default, {
+        type: "checkbox",
+        id: "extraCheckbox",
+        label: "Force stop",
+        tabIndex: -1
+      })),
+      title: "Confirm stop",
+      confirmButtonLabel: "Stop",
+      onConfirm: doNothing,
+      close: closeHandler
+    }, /*#__PURE__*/_react.default.createElement("p", null, "This will stop instance", /*#__PURE__*/_react.default.createElement("b", null, "whimsical-mouflon"), ".")) : null);
+  },
+  name: "Extra"
+};

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

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

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

@@ -0,0 +1,13 @@
+import { Meta, StoryObj } from "@storybook/react";
+import ContextualMenu from "./ContextualMenu";
+declare const meta: Meta<typeof ContextualMenu>;
+export default meta;
+type Story = StoryObj<typeof ContextualMenu>;
+/**
+ * The contextual menu will provide a visual wrapper to any provided children. Visibility can be toggled via the `visible` prop.
+ */
+export declare const Default: Story;
+export declare const Toggle: Story;
+export declare const OverflowingContainer: Story;
+export declare const ChildFunction: Story;
+export declare const ChildElement: Story;

package/dist/components/ContextualMenu/ContextualMenu.stories.js

@@ -0,0 +1,107 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Toggle = exports.OverflowingContainer = exports.Default = exports.ChildFunction = exports.ChildElement = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Button = _interopRequireDefault(require("../Button"));
+var _ContextualMenu = _interopRequireDefault(require("./ContextualMenu"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const ScrollTemplate = args => /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    maxWidth: "30rem",
+    maxHeight: "10rem",
+    overflow: "auto",
+    padding: "1rem"
+  }
+}, /*#__PURE__*/_react.default.createElement(_ContextualMenu.default, args), Array(3).fill( /*#__PURE__*/_react.default.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur cum dicta beatae nostrum eligendi similique earum, dolorem fuga quis, sequi voluptates architecto ipsa dolorum eaque rem expedita inventore voluptas odit aspernatur alias molestias facere.")), /*#__PURE__*/_react.default.createElement(_ContextualMenu.default, args));
+const Template = args => /*#__PURE__*/_react.default.createElement("div", {
+  className: "u-align--center"
+}, /*#__PURE__*/_react.default.createElement(_ContextualMenu.default, args));
+const meta = {
+  component: _ContextualMenu.default,
+  render: Template,
+  tags: ["autodocs"],
+  argTypes: {
+    children: {
+      control: {
+        disable: true
+      }
+    },
+    links: {
+      control: {
+        disable: true
+      }
+    }
+  }
+};
+var _default = exports.default = meta;
+/**
+ * The contextual menu will provide a visual wrapper to any provided children. Visibility can be toggled via the `visible` prop.
+ */
+const Default = exports.Default = {
+  name: "Default",
+  args: {
+    children: /*#__PURE__*/_react.default.createElement("span", {
+      style: {
+        padding: "1rem"
+      }
+    }, "This is a menu."),
+    closeOnOutsideClick: false,
+    constrainPanelWidth: false,
+    position: "left",
+    visible: true
+  }
+};
+const Toggle = exports.Toggle = {
+  name: "Toggle",
+  args: {
+    links: [{
+      children: "Link 1",
+      onClick: () => {}
+    }, {
+      children: "Link 2",
+      onClick: () => {}
+    }],
+    hasToggleIcon: true,
+    position: "right",
+    toggleLabel: "Click me!"
+  }
+};
+const OverflowingContainer = exports.OverflowingContainer = {
+  render: ScrollTemplate.bind({}),
+  name: "Overflowing container",
+  args: {
+    links: [{
+      children: "Link 1",
+      onClick: () => {}
+    }, {
+      children: "Long Link 2",
+      onClick: () => {}
+    }],
+    hasToggleIcon: true,
+    position: "right",
+    toggleLabel: "Click me!"
+  }
+};
+const ChildFunction = exports.ChildFunction = {
+  name: "Child function",
+  args: {
+    children: close => /*#__PURE__*/_react.default.createElement(_Button.default, {
+      onClick: close
+    }, "child function"),
+    hasToggleIcon: true,
+    position: "right",
+    toggleLabel: "Click me!"
+  }
+};
+const ChildElement = exports.ChildElement = {
+  name: "Child element",
+  args: {
+    children: /*#__PURE__*/_react.default.createElement(_Button.default, null, "child element"),
+    hasToggleIcon: true,
+    position: "right",
+    toggleLabel: "Click me!"
+  }
+};

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

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

package/dist/components/ContextualMenu/ContextualMenuDropdown/ContextualMenuDropdown.test.d.ts

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

package/dist/components/DoughnutChart/DoughnutChart.d.ts

@@ -0,0 +1,58 @@
+import { FC } from "react";
+import "./DoughnutChart.scss";
+export type Segment = {
+    /**
+     * The colour of the segment.
+     */
+    color: string;
+    /**
+     * The segment tooltip.
+     */
+    tooltip?: string;
+    /**
+     * The segment length.
+     */
+    value: number;
+};
+export type Props = {
+    /**
+     * The label in the centre of the doughnut.
+     */
+    label?: string;
+    /**
+     * An optional class name applied to the label.
+     */
+    labelClassname?: string;
+    /**
+     * An optional class name applied to the wrapping element.
+     */
+    className?: string;
+    /**
+     * The width of the segments when hovered.
+     */
+    segmentHoverWidth: number;
+    /**
+     * The width of the segments.
+     */
+    segmentThickness: number;
+    /**
+     * The doughnut segments.
+     */
+    segments: Segment[];
+    /**
+     * The size of the doughnut.
+     */
+    size: number;
+    /**
+     *  ID associated to the specific instance of a Chart.
+     */
+    chartID: string;
+};
+export declare enum TestIds {
+    Label = "label",
+    Segment = "segment",
+    Chart = "chart",
+    Section = "Section"
+}
+declare const DoughnutChart: FC<Props>;
+export default DoughnutChart;