@canonical/react-components 0.59.0 → 0.60.0

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

@@ -37,5 +37,10 @@ export type Props = PropsWithSpread<{
      */
     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/components/Accordion/Accordion.js

@@ -24,6 +24,12 @@ const generateSections = (sections, setExpanded, expanded, titleElement) => sect
     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.
+ */
 const Accordion = _ref2 => {
   let {
     className,

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

@@ -0,0 +1,117 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Headings = exports.ExternalState = exports.Default = exports.CustomHeadings = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Accordion = _interopRequireDefault(require("./Accordion"));
+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: _Accordion.default,
+  tags: ["autodocs"],
+  argTypes: {
+    sections: {
+      control: {
+        disable: true
+      }
+    },
+    externallyControlled: {
+      control: {
+        disable: true
+      }
+    }
+  }
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  name: "Default",
+  args: {
+    sections: [{
+      title: "Advanced topics",
+      content: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", null, "Charm bundles"), /*#__PURE__*/_react.default.createElement("p", null, "Machine authentication"), /*#__PURE__*/_react.default.createElement("p", null, "Migrating models"), /*#__PURE__*/_react.default.createElement("p", null, "Using storage"), /*#__PURE__*/_react.default.createElement("p", null, "Working with actions"), /*#__PURE__*/_react.default.createElement("p", null, "Working with resources"), /*#__PURE__*/_react.default.createElement("p", null, "Cloud image metadata"), /*#__PURE__*/_react.default.createElement("p", null, "Tools"))
+    }, {
+      title: "Networking",
+      content: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", null, "Working offline"), /*#__PURE__*/_react.default.createElement("p", null, "Fan container networking"), /*#__PURE__*/_react.default.createElement("p", null, "Network spaces"))
+    }, {
+      title: "Miscellaneous",
+      content: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", null, "Juju GUI"), /*#__PURE__*/_react.default.createElement("p", null, "CentOS support"), /*#__PURE__*/_react.default.createElement("p", null, "Collecting Juju metrics"))
+    }]
+  }
+};
+
+/**
+ * The expanded accordion section can be controlled by external state.
+ */
+const ExternalState = exports.ExternalState = {
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [expandedSection, setExpandedSection] = (0, _react.useState)();
+    return /*#__PURE__*/_react.default.createElement(_Accordion.default, {
+      expanded: expandedSection,
+      externallyControlled: true,
+      onExpandedChange: setExpandedSection,
+      sections: [{
+        title: "Advanced topics",
+        key: "advanced-topics",
+        content: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", null, "Charm bundles"), /*#__PURE__*/_react.default.createElement("p", null, "Machine authentication"), /*#__PURE__*/_react.default.createElement("p", null, "Migrating models"), /*#__PURE__*/_react.default.createElement("p", null, "Using storage"), /*#__PURE__*/_react.default.createElement("p", null, "Working with actions"), /*#__PURE__*/_react.default.createElement("p", null, "Working with resources"), /*#__PURE__*/_react.default.createElement("p", null, "Cloud image metadata"), /*#__PURE__*/_react.default.createElement("p", null, "Tools"))
+      }, {
+        title: "Networking",
+        key: "networking",
+        content: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", null, "Working offline"), /*#__PURE__*/_react.default.createElement("p", null, "Fan container networking"), /*#__PURE__*/_react.default.createElement("p", null, "Network spaces"))
+      }, {
+        title: "Miscellaneous",
+        key: "miscellaneous",
+        content: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", null, "Juju GUI"), /*#__PURE__*/_react.default.createElement("p", null, "CentOS support"), /*#__PURE__*/_react.default.createElement("p", null, "Collecting Juju metrics"))
+      }]
+    });
+  },
+  name: "External state"
+};
+
+/**
+ * `titleElement` prop can be used to define heading element for section titles.
+ */
+const Headings = exports.Headings = {
+  name: "Headings",
+  args: {
+    sections: [{
+      title: "Advanced topics",
+      content: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", null, "Charm bundles"), /*#__PURE__*/_react.default.createElement("p", null, "Machine authentication"), /*#__PURE__*/_react.default.createElement("p", null, "Migrating models"), /*#__PURE__*/_react.default.createElement("p", null, "Using storage"), /*#__PURE__*/_react.default.createElement("p", null, "Working with actions"), /*#__PURE__*/_react.default.createElement("p", null, "Working with resources"), /*#__PURE__*/_react.default.createElement("p", null, "Cloud image metadata"), /*#__PURE__*/_react.default.createElement("p", null, "Tools"))
+    }, {
+      title: "Networking",
+      content: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", null, "Working offline"), /*#__PURE__*/_react.default.createElement("p", null, "Fan container networking"), /*#__PURE__*/_react.default.createElement("p", null, "Network spaces"))
+    }, {
+      title: "Miscellaneous",
+      content: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", null, "Juju GUI"), /*#__PURE__*/_react.default.createElement("p", null, "CentOS support"), /*#__PURE__*/_react.default.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.
+ */
+const CustomHeadings = exports.CustomHeadings = {
+  args: {
+    sections: [{
+      title: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Advanced topics", " ", /*#__PURE__*/_react.default.createElement("span", {
+        className: "u-text--muted p-text--small"
+      }, "optional")),
+      content: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", null, "Charm bundles"), /*#__PURE__*/_react.default.createElement("p", null, "Machine authentication"), /*#__PURE__*/_react.default.createElement("p", null, "Migrating models"), /*#__PURE__*/_react.default.createElement("p", null, "Using storage"), /*#__PURE__*/_react.default.createElement("p", null, "Working with actions"), /*#__PURE__*/_react.default.createElement("p", null, "Working with resources"), /*#__PURE__*/_react.default.createElement("p", null, "Cloud image metadata"), /*#__PURE__*/_react.default.createElement("p", null, "Tools"))
+    }, {
+      title: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Networking", " ", /*#__PURE__*/_react.default.createElement("span", {
+        className: "u-text--muted p-text--small"
+      }, "optional")),
+      content: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", null, "Working offline"), /*#__PURE__*/_react.default.createElement("p", null, "Fan container networking"), /*#__PURE__*/_react.default.createElement("p", null, "Network spaces"))
+    }, {
+      title: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Miscellaneous", " ", /*#__PURE__*/_react.default.createElement("span", {
+        className: "u-text--muted p-text--small"
+      }, "optional")),
+      content: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", null, "Juju GUI"), /*#__PURE__*/_react.default.createElement("p", null, "CentOS support"), /*#__PURE__*/_react.default.createElement("p", null, "Collecting Juju metrics"))
+    }],
+    titleElement: "h3"
+  }
+};

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

@@ -37,5 +37,12 @@ export type Props = PropsWithSpread<{
      */
     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/components/ActionButton/ActionButton.js

@@ -18,6 +18,13 @@ let Label = exports.Label = /*#__PURE__*/function (Label) {
   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:
+ */
 const ActionButton = _ref => {
   let {
     appearance,

package/dist/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;

package/dist/components/ActionButton/ActionButton.stories.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Loading = exports.Default = void 0;
+var _ActionButton = _interopRequireDefault(require("./ActionButton"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const meta = {
+  component: _ActionButton.default,
+  tags: ["autodocs"],
+  argTypes: {
+    children: {
+      control: {
+        type: "text"
+      }
+    }
+  }
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  name: "Default",
+  args: {
+    appearance: "positive",
+    children: "Click me!"
+  }
+};
+const Loading = exports.Loading = {
+  name: "Loading",
+  args: {
+    appearance: "positive",
+    loading: true,
+    disabled: true,
+    children: "Click me!"
+  }
+};

package/dist/components/ApplicationLayout/ApplicationLayout.d.ts

@@ -26,7 +26,7 @@ export type BaseProps<NI = SideNavigationLinkDefaultElement, PL = PanelLogoDefau
     /**
      * The logo to appear in the navigation panels.
      */
-    logo: NonNullable<PanelProps<PL>["logo"]>;
+    logo?: PanelProps<PL>["logo"];
     /**
      * The component to use to render links inside the navigation e.g. when
      * using react-router you'd pass `Link` to this prop.
@@ -70,9 +70,9 @@ export type BaseProps<NI = SideNavigationLinkDefaultElement, PL = PanelLogoDefau
     statusClassName?: string;
 }, HTMLProps<HTMLDivElement>>;
 export type Props<NI = SideNavigationLinkDefaultElement, PL = PanelLogoDefaultElement> = BaseProps<NI, PL> & ExclusiveProps<{
-    navItems: NonNullable<SideNavigationProps<NI>["items"]>;
+    navItems?: SideNavigationProps<NI>["items"];
 }, {
-    sideNavigation: ReactNode;
+    sideNavigation?: ReactNode;
 }>;
 /**
  * This is a [React](https://reactjs.org/) component for the Vanilla

package/dist/components/ApplicationLayout/ApplicationLayout.js

@@ -55,7 +55,7 @@ const ApplicationLayout = _ref => {
   const setMenuPinned = onPinMenu !== null && onPinMenu !== void 0 ? onPinMenu : setInternalMenuPinned;
   const menuIsCollapsed = menuCollapsed !== null && menuCollapsed !== void 0 ? menuCollapsed : internalMenuCollapsed;
   const setMenuCollapsed = onCollapseMenu !== null && onCollapseMenu !== void 0 ? onCollapseMenu : setInternalMenuCollapsed;
-  return /*#__PURE__*/_react.default.createElement(_Application.default, props, /*#__PURE__*/_react.default.createElement(_AppNavigationBar.default, {
+  return /*#__PURE__*/_react.default.createElement(_Application.default, props, (navItems || sideNavigation) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_AppNavigationBar.default, {
     className: navigationBarClassName
   }, /*#__PURE__*/_react.default.createElement(_Panel.default, {
     dark: dark,
@@ -109,10 +109,10 @@ const ApplicationLayout = _ref => {
     dark: dark,
     items: navItems,
     linkComponent: navLinkComponent
-  }) : sideNavigation)), /*#__PURE__*/_react.default.createElement(_AppMain.default, {
+  }) : sideNavigation))), /*#__PURE__*/_react.default.createElement(_AppMain.default, {
     className: mainClassName
-  }, children), aside, status ? /*#__PURE__*/_react.default.createElement(_AppStatus.default, {
+  }, children), aside, status && /*#__PURE__*/_react.default.createElement(_AppStatus.default, {
     className: statusClassName
-  }, status) : null);
+  }, status));
 };
 var _default = exports.default = ApplicationLayout;

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

@@ -17,3 +17,8 @@ export declare const ExternalStates: Story;
  * [`SideNavigation`](/docs/components-sidenavigation--docs) docs.
  */
 export declare const Navigation: Story;
+/**
+ * App navigation can also be completely opted out of, for some
+ * particular scenarios (e.g. login page, error pages).
+ */
+export declare const NoNavigation: Story;

package/dist/components/ApplicationLayout/ApplicationLayout.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Navigation = exports.ExternalStates = exports.Default = void 0;
+exports.default = exports.NoNavigation = exports.Navigation = exports.ExternalStates = exports.Default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _Form = _interopRequireDefault(require("../Form"));
 var _Input = _interopRequireDefault(require("../Input"));
@@ -52,9 +52,9 @@ const Default = exports.Default = {
         }]
       }],
       aside: showAside ? /*#__PURE__*/_react.default.createElement(_AppAside.default, {
-        title: "Aside panel",
         pinned: asidePinned
       }, /*#__PURE__*/_react.default.createElement(_Panel.default, {
+        title: "Aside panel",
         controls: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
           onClick: () => setAsidePinned(!asidePinned),
           dense: true,
@@ -215,4 +215,18 @@ const Navigation = exports.Navigation = {
       size: 12
     }, "Content"))));
   }
+};
+
+/**
+ * App navigation can also be completely opted out of, for some
+ * particular scenarios (e.g. login page, error pages).
+ */
+const NoNavigation = exports.NoNavigation = {
+  render: () => {
+    return /*#__PURE__*/_react.default.createElement(_ApplicationLayout.default, null, /*#__PURE__*/_react.default.createElement(_Panel.default, {
+      title: "Application Layout with no navigation"
+    }, /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, {
+      size: 12
+    }, "Content"))));
+  }
 };

package/dist/components/ArticlePagination/ArticlePagination.d.ts

@@ -22,5 +22,10 @@ export type Props = PropsWithSpread<{
      */
     previousLabel?: string;
 }, HTMLProps<HTMLElement>>;
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Article pagination](https://docs.vanillaframework.io/patterns/article-pagination/).
+ *
+ * The article pagination component should be used to navigate from one article to the next, or previous, in chronological order.
+ */
 declare const ArticlePagination: ({ className, nextURL, nextLabel, previousURL, previousLabel, ...props }: Props) => JSX.Element;
 export default ArticlePagination;

package/dist/components/ArticlePagination/ArticlePagination.js

@@ -8,6 +8,11 @@ var _classnames = _interopRequireDefault(require("classnames"));
 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); }
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Article pagination](https://docs.vanillaframework.io/patterns/article-pagination/).
+ *
+ * The article pagination component should be used to navigate from one article to the next, or previous, in chronological order.
+ */
 const ArticlePagination = _ref => {
   let {
     className,

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

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

package/dist/components/ArticlePagination/ArticlePagination.stories.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Default = void 0;
+var _ArticlePagination = _interopRequireDefault(require("./ArticlePagination"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const meta = {
+  component: _ArticlePagination.default,
+  tags: ["autodocs"]
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  name: "Default",
+  args: {
+    nextLabel: "Consectetur adipisicing elit",
+    nextURL: "#next",
+    previousLabel: "Lorem ipsum dolor sit amet",
+    previousURL: "#previous"
+  }
+};

package/dist/components/Badge/Badge.d.ts

@@ -25,5 +25,10 @@ export type Props = PropsWithSpread<{
      */
     className?: ClassName;
 }, HTMLProps<HTMLSpanElement>>;
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Badge](https://vanillaframework.io/docs/patterns/badge).
+ *
+ * It can be used to display a numeric values.
+ */
 declare const Badge: ({ value, badgeType, className, isNegative, ...spanProps }: Props) => JSX.Element;
 export default Badge;

package/dist/components/Badge/Badge.js

@@ -37,6 +37,12 @@ const clamp = value => {
   }
   return value;
 };
+
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Badge](https://vanillaframework.io/docs/patterns/badge).
+ *
+ * It can be used to display a numeric values.
+ */
 const Badge = _ref => {
   let {
     value,

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

@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from "@storybook/react";
+import Badge from "./Badge";
+declare const meta: Meta<typeof Badge>;
+export default meta;
+type Story = StoryObj<typeof Badge>;
+export declare const Default: Story;
+export declare const ColourCoding: Story;
+/**
+ * When the amount of items is only relevant for small values, this variant should be used. When the value grows further than 999, the badge should show "999+".
+ */
+export declare const UndefinedLargeNumber: Story;
+/**
+ * When the value of the badge represents a type of information where differences between large amounts of items are relevant, it should include a decimal unit prefix and round the value.
+ */
+export declare const RoundedLargeNumber: Story;

package/dist/components/Badge/Badge.stories.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.UndefinedLargeNumber = exports.RoundedLargeNumber = exports.Default = exports.ColourCoding = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Badge = _interopRequireWildcard(require("./Badge"));
+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; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const meta = {
+  component: _Badge.default,
+  tags: ["autodocs"],
+  argTypes: {
+    badgeType: {
+      control: {
+        options: _Badge.BadgeType,
+        type: "select"
+      }
+    }
+  },
+  args: {
+    badgeType: _Badge.BadgeType.UNDEFINED_LARGE_NUMBER
+  }
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  name: "Default",
+  args: {
+    value: 9
+  }
+};
+const ColourCoding = exports.ColourCoding = {
+  render: () => /*#__PURE__*/_react.default.createElement(_Badge.default, {
+    value: 9,
+    isNegative: true
+  }),
+  name: "Colour Coding"
+};
+
+/**
+ * When the amount of items is only relevant for small values, this variant should be used. When the value grows further than 999, the badge should show "999+".
+ */
+const UndefinedLargeNumber = exports.UndefinedLargeNumber = {
+  render: () => /*#__PURE__*/_react.default.createElement(_Badge.default, {
+    value: 1000,
+    badgeType: _Badge.BadgeType.UNDEFINED_LARGE_NUMBER
+  }),
+  name: "Undefined Large Number"
+};
+
+/**
+ * When the value of the badge represents a type of information where differences between large amounts of items are relevant, it should include a decimal unit prefix and round the value.
+ */
+const RoundedLargeNumber = exports.RoundedLargeNumber = {
+  render: () => /*#__PURE__*/_react.default.createElement(_Badge.default, {
+    value: 1234,
+    badgeType: _Badge.BadgeType.ROUNDED_LARGE_NUMBER
+  }),
+  name: "Rounded Large Number"
+};

package/dist/components/Button/Button.d.ts

@@ -55,7 +55,9 @@ export type Props<P = null> = {
     small?: boolean;
 } & (Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onClick"> | P);
 /**
- * A component for the Vanilla button.
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Button](https://docs.vanillaframework.io/patterns/buttons/).
+ *
+ * Buttons are clickable elements used to perform an action, they can be used for buttons and link elements.
  * @template P - The type of the props if providing a component to `element`
  */
 declare const Button: <P>({ appearance, children, className, dense, disabled, element: Component, hasIcon, inline, onClick, small, ...buttonProps }: Props<P>) => JSX.Element;

package/dist/components/Button/Button.js

@@ -23,7 +23,9 @@ const ButtonAppearance = exports.ButtonAppearance = {
  */
 
 /**
- * A component for the Vanilla button.
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Button](https://docs.vanillaframework.io/patterns/buttons/).
+ *
+ * Buttons are clickable elements used to perform an action, they can be used for buttons and link elements.
  * @template P - The type of the props if providing a component to `element`
  */
 const Button = _ref => {

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

@@ -0,0 +1,32 @@
+import { HTMLProps } from "react";
+import { Meta, StoryObj } from "@storybook/react";
+import Button from "./Button";
+declare const meta: Meta<typeof Button>;
+export default meta;
+type Story<P = null> = StoryObj<typeof Button<P>>;
+export declare const Default: Story;
+export declare const DefaultDisabled: Story;
+export declare const Base: Story;
+export declare const BaseDisabled: Story;
+export declare const Link: {
+    name: string;
+    args: {
+        children: string;
+        appearance: string;
+        element: string;
+        href: string;
+    };
+};
+export declare const LinkDisabled: Story<HTMLProps<HTMLAnchorElement>>;
+export declare const Positive: Story;
+export declare const PositiveDisabled: Story;
+export declare const Negative: Story;
+export declare const NegativeDisabled: Story;
+export declare const Brand: Story;
+export declare const BrandDisabled: Story;
+export declare const Inline: Story;
+export declare const Dense: Story;
+export declare const Small: Story;
+export declare const Icon: Story;
+export declare const IconText: Story;
+export declare const IconWithTooltip: Story;