@canonical/react-components 0.58.0 → 0.59.1

package/dist/components/ApplicationLayout/ApplicationLayout.js

@@ -0,0 +1,118 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _Panel = _interopRequireDefault(require("../Panel"));
+var _SideNavigation = _interopRequireDefault(require("../SideNavigation"));
+var _AppMain = _interopRequireDefault(require("./AppMain"));
+var _AppNavigation = _interopRequireDefault(require("./AppNavigation"));
+var _AppNavigationBar = _interopRequireDefault(require("./AppNavigationBar"));
+var _AppStatus = _interopRequireDefault(require("./AppStatus"));
+var _Application = _interopRequireDefault(require("./Application"));
+var _Button = _interopRequireDefault(require("../Button"));
+var _Icon = _interopRequireDefault(require("../Icon"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla
+ * [Application Layout](https://vanillaframework.io/docs/layouts/application).
+ *
+ * This component combines the various sub-components that make up the
+ * Application Layout to make it easier to consume. For some applications this
+ * component maybe not be flexible enough, in which case you may choose to use
+ * the sub-components directly. Be aware that the application layout requires a
+ * specific structure and states to function correctly so there will be a
+ * trade-off when using the sub-components directly.
+ */
+const ApplicationLayout = _ref => {
+  let {
+    aside,
+    children,
+    dark = true,
+    logo,
+    mainClassName,
+    menuCollapsed,
+    menuPinned,
+    navigationBarClassName,
+    navigationClassName,
+    navItems,
+    navLinkComponent,
+    onCollapseMenu,
+    onPinMenu,
+    sideNavigation,
+    status,
+    statusClassName,
+    ...props
+  } = _ref;
+  const [internalMenuPinned, setInternalMenuPinned] = (0, _react.useState)(false);
+  const [internalMenuCollapsed, setInternalMenuCollapsed] = (0, _react.useState)(true);
+  const menuIsPinned = menuPinned !== null && menuPinned !== void 0 ? menuPinned : internalMenuPinned;
+  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, (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,
+    logo: logo,
+    toggle: {
+      label: "Menu",
+      onClick: () => setMenuCollapsed(!menuIsCollapsed)
+    }
+  })), /*#__PURE__*/_react.default.createElement(_AppNavigation.default, {
+    className: navigationClassName,
+    collapsed: menuIsCollapsed,
+    pinned: menuIsPinned
+  }, /*#__PURE__*/_react.default.createElement(_Panel.default, {
+    dark: dark,
+    controls: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
+      hasIcon: true,
+      appearance: "base",
+      className: (0, _classnames.default)("u-no-margin u-hide--medium", {
+        "is-dark": dark
+      }),
+      onClick: evt => {
+        setMenuCollapsed(true);
+        // The menu stays open while its content has focus, so the
+        // close button must blur to actually close the menu.
+        evt.currentTarget.blur();
+      }
+    }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      name: "close",
+      className: (0, _classnames.default)({
+        "is-light": dark
+      })
+    }, "Close menu")), /*#__PURE__*/_react.default.createElement(_Button.default, {
+      hasIcon: true,
+      appearance: "base",
+      className: (0, _classnames.default)("u-no-margin u-hide--small", {
+        "is-dark": dark
+      }),
+      onClick: () => {
+        setMenuPinned(!menuIsPinned);
+      }
+    }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      name: menuIsPinned ? "close" : "pin",
+      className: (0, _classnames.default)({
+        "is-light": dark
+      })
+    }, menuIsPinned ? "Unpin menu" : "Pin menu"))),
+    controlsClassName: "u-hide--large",
+    stickyHeader: true,
+    logo: logo
+  }, navItems ? /*#__PURE__*/_react.default.createElement(_SideNavigation.default, {
+    dark: dark,
+    items: navItems,
+    linkComponent: navLinkComponent
+  }) : sideNavigation))), /*#__PURE__*/_react.default.createElement(_AppMain.default, {
+    className: mainClassName
+  }, children), aside, status && /*#__PURE__*/_react.default.createElement(_AppStatus.default, {
+    className: statusClassName
+  }, status));
+};
+var _default = exports.default = ApplicationLayout;

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

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import ApplicationLayout from "./ApplicationLayout";
+declare const meta: Meta<typeof ApplicationLayout>;
+export default meta;
+type Story = StoryObj<typeof ApplicationLayout>;
+export declare const Default: Story;
+/**
+ * The pinned and collapsed states can be handled externally if you need access
+ * to these outside the application layout.
+ */
+export declare const ExternalStates: Story;
+/**
+ * Menu items can either be provided as an array given to `navItems` or when
+ * more control is needed then by proving `sideNavigation`.
+ *
+ * For more details about how to provide navigation items see the
+ * [`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

@@ -0,0 +1,232 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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"));
+var _Button = _interopRequireDefault(require("../Button"));
+var _Row = _interopRequireDefault(require("../Row"));
+var _Col = _interopRequireDefault(require("../Col"));
+var _ApplicationLayout = _interopRequireDefault(require("./ApplicationLayout"));
+var _AppAside = _interopRequireDefault(require("./AppAside"));
+var _Panel = _interopRequireDefault(require("../Panel"));
+var _Icon = _interopRequireDefault(require("../Icon"));
+var _SideNavigation = _interopRequireDefault(require("../SideNavigation"));
+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; }
+/* eslint-disable react-hooks/rules-of-hooks */
+
+const meta = {
+  component: _ApplicationLayout.default,
+  tags: ["autodocs"]
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  render: () => {
+    const [showAside, setShowAside] = (0, _react.useState)(true);
+    const [asidePinned, setAsidePinned] = (0, _react.useState)(false);
+    return /*#__PURE__*/_react.default.createElement(_ApplicationLayout.default, {
+      logo: {
+        icon: "https://assets.ubuntu.com/v1/7144ec6d-logo-jaas-icon.svg",
+        name: "https://assets.ubuntu.com/v1/2e04d794-logo-jaas.svg",
+        nameAlt: "JAAS",
+        href: "/"
+      },
+      navItems: [{
+        items: [{
+          icon: "drag",
+          label: "Models",
+          href: "/models"
+        }, {
+          icon: "menu",
+          label: "Controllers",
+          href: "/controllers"
+        }, {
+          icon: "user",
+          label: "Permissions",
+          href: "/users"
+        }]
+      }],
+      aside: showAside ? /*#__PURE__*/_react.default.createElement(_AppAside.default, {
+        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,
+          className: "u-no-margin"
+        }, "Pin aside"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+          appearance: "base",
+          className: "u-no-margin--bottom",
+          hasIcon: true,
+          onClick: () => {
+            setShowAside(false);
+            setAsidePinned(false);
+          }
+        }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+          name: "close"
+        }, "Close")))
+      }, /*#__PURE__*/_react.default.createElement(_Form.default, {
+        stacked: true
+      }, /*#__PURE__*/_react.default.createElement(_Input.default, {
+        label: "Full name",
+        type: "text",
+        name: "fullName",
+        autoComplete: "name",
+        stacked: true
+      }), /*#__PURE__*/_react.default.createElement(_Input.default, {
+        label: "Username",
+        type: "text",
+        name: "username-stacked",
+        autoComplete: "username",
+        "aria-describedby": "exampleHelpTextMessage",
+        stacked: true,
+        help: "30 characters or fewer."
+      }), /*#__PURE__*/_react.default.createElement(_Input.default, {
+        type: "text",
+        label: "Email address",
+        "aria-invalid": "true",
+        name: "username-stackederror",
+        autoComplete: "email",
+        required: true,
+        error: "This field is required.",
+        stacked: true
+      }), /*#__PURE__*/_react.default.createElement(_Input.default, {
+        label: "Address line 1",
+        type: "text",
+        name: "address-optional-stacked",
+        autoComplete: "address-line1",
+        stacked: true
+      }), /*#__PURE__*/_react.default.createElement(_Input.default, {
+        label: "Address line 2",
+        type: "text",
+        name: "address-optional-stacked",
+        autoComplete: "address-line3",
+        stacked: true
+      }), /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, {
+        size: 12
+      }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+        appearance: "positive",
+        className: "u-float-right",
+        name: "add-details"
+      }, "Add details")))))) : null,
+      status: /*#__PURE__*/_react.default.createElement(_Button.default, {
+        onClick: () => setShowAside(!showAside),
+        dense: true,
+        appearance: "base",
+        className: "u-no-margin"
+      }, "Toggle aside")
+    }, /*#__PURE__*/_react.default.createElement(_Panel.default, {
+      title: "Application Layout"
+    }, /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, {
+      size: 12
+    }, "Content"))));
+  }
+};
+
+/**
+ * The pinned and collapsed states can be handled externally if you need access
+ * to these outside the application layout.
+ */
+const ExternalStates = exports.ExternalStates = {
+  render: () => {
+    const [menuPinned, setMenuPinned] = (0, _react.useState)(false);
+    const [menuCollapsed, setMenuCollapsed] = (0, _react.useState)(true);
+    return /*#__PURE__*/_react.default.createElement(_ApplicationLayout.default, {
+      menuPinned: menuPinned,
+      onPinMenu: setMenuPinned,
+      menuCollapsed: menuCollapsed,
+      onCollapseMenu: setMenuCollapsed,
+      logo: {
+        icon: "https://assets.ubuntu.com/v1/7144ec6d-logo-jaas-icon.svg",
+        name: "https://assets.ubuntu.com/v1/2e04d794-logo-jaas.svg",
+        nameAlt: "JAAS",
+        href: "/"
+      },
+      navItems: [{
+        items: [{
+          icon: "drag",
+          label: "Models",
+          href: "/models"
+        }, {
+          icon: "menu",
+          label: "Controllers",
+          href: "/controllers"
+        }, {
+          icon: "user",
+          label: "Permissions",
+          href: "/users"
+        }]
+      }]
+    }, /*#__PURE__*/_react.default.createElement(_Panel.default, {
+      title: "Application Layout"
+    }, /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, {
+      size: 12
+    }, "Content"))));
+  }
+};
+
+/**
+ * Menu items can either be provided as an array given to `navItems` or when
+ * more control is needed then by proving `sideNavigation`.
+ *
+ * For more details about how to provide navigation items see the
+ * [`SideNavigation`](/docs/components-sidenavigation--docs) docs.
+ */
+const Navigation = exports.Navigation = {
+  render: () => {
+    const [menuPinned, setMenuPinned] = (0, _react.useState)(false);
+    const [menuCollapsed, setMenuCollapsed] = (0, _react.useState)(true);
+    return /*#__PURE__*/_react.default.createElement(_ApplicationLayout.default, {
+      menuPinned: menuPinned,
+      onPinMenu: setMenuPinned,
+      menuCollapsed: menuCollapsed,
+      onCollapseMenu: setMenuCollapsed,
+      logo: {
+        icon: "https://assets.ubuntu.com/v1/7144ec6d-logo-jaas-icon.svg",
+        name: "https://assets.ubuntu.com/v1/2e04d794-logo-jaas.svg",
+        nameAlt: "JAAS",
+        href: "/"
+      },
+      sideNavigation: /*#__PURE__*/_react.default.createElement(_SideNavigation.default, {
+        items: [{
+          items: [{
+            icon: "drag",
+            label: "Models",
+            href: "/models"
+          }, {
+            icon: "menu",
+            label: "Controllers",
+            href: "/controllers"
+          }, {
+            icon: "user",
+            label: "Permissions",
+            href: "/users"
+          }]
+        }]
+      })
+    }, /*#__PURE__*/_react.default.createElement(_Panel.default, {
+      title: "Application Layout"
+    }, /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, {
+      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/ApplicationLayout/index.d.ts

@@ -0,0 +1,7 @@
+export { default, type Props as ApplicationLayoutProps, } from "./ApplicationLayout";
+export { default as AppAside, type AppAsideProps } from "./AppAside";
+export { default as Application, type ApplicationProps } from "./Application";
+export { default as AppMain, type AppMainProps } from "./AppMain";
+export { default as AppNavigation, type AppNavigationProps, } from "./AppNavigation";
+export { default as AppNavigationBar, type AppNavigationBarProps, } from "./AppNavigationBar";
+export { default as AppStatus, type AppStatusProps } from "./AppStatus";

package/dist/components/ApplicationLayout/index.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "AppAside", {
+  enumerable: true,
+  get: function () {
+    return _AppAside.default;
+  }
+});
+Object.defineProperty(exports, "AppMain", {
+  enumerable: true,
+  get: function () {
+    return _AppMain.default;
+  }
+});
+Object.defineProperty(exports, "AppNavigation", {
+  enumerable: true,
+  get: function () {
+    return _AppNavigation.default;
+  }
+});
+Object.defineProperty(exports, "AppNavigationBar", {
+  enumerable: true,
+  get: function () {
+    return _AppNavigationBar.default;
+  }
+});
+Object.defineProperty(exports, "AppStatus", {
+  enumerable: true,
+  get: function () {
+    return _AppStatus.default;
+  }
+});
+Object.defineProperty(exports, "Application", {
+  enumerable: true,
+  get: function () {
+    return _Application.default;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _ApplicationLayout.default;
+  }
+});
+var _ApplicationLayout = _interopRequireDefault(require("./ApplicationLayout"));
+var _AppAside = _interopRequireDefault(require("./AppAside"));
+var _Application = _interopRequireDefault(require("./Application"));
+var _AppMain = _interopRequireDefault(require("./AppMain"));
+var _AppNavigation = _interopRequireDefault(require("./AppNavigation"));
+var _AppNavigationBar = _interopRequireDefault(require("./AppNavigationBar"));
+var _AppStatus = _interopRequireDefault(require("./AppStatus"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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;