@canonical/react-components 1.6.0 → 1.7.0

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(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 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/Accordion/Accordion.test.d.ts

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

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

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

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

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

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

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import AppAside from "./AppAside";
+declare const meta: Meta<typeof AppAside>;
+export default meta;
+type Story = StoryObj<typeof AppAside>;
+/**
+ * In most common cases an `AppAside` should contain a `<Panel>` to display the
+ * content as intended in the application layout.
+ *
+ * `AppAside` should be a direct child of an `<Application>` or passed to the
+ * application layout `<ApplicationLayout aside={<AppAside .../>}>`.
+ */
+export declare const Default: Story;

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

@@ -0,0 +1,116 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Application = _interopRequireDefault(require("../Application"));
+var _AppMain = _interopRequireDefault(require("../AppMain"));
+var _Button = _interopRequireDefault(require("../../Button"));
+var _Col = _interopRequireDefault(require("../../Col"));
+var _Form = _interopRequireDefault(require("../../Form"));
+var _Icon = _interopRequireDefault(require("../../Icon"));
+var _Input = _interopRequireDefault(require("../../Input"));
+var _Panel = _interopRequireDefault(require("../../Panel"));
+var _Row = _interopRequireDefault(require("../../Row"));
+var _AppAside = _interopRequireDefault(require("./AppAside"));
+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; }
+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); } /* eslint-disable react-hooks/rules-of-hooks */
+const meta = {
+  component: _AppAside.default,
+  tags: ["autodocs"],
+  argTypes: {
+    children: {
+      control: false
+    }
+  }
+};
+var _default = exports.default = meta;
+/**
+ * In most common cases an `AppAside` should contain a `<Panel>` to display the
+ * content as intended in the application layout.
+ *
+ * `AppAside` should be a direct child of an `<Application>` or passed to the
+ * application layout `<ApplicationLayout aside={<AppAside .../>}>`.
+ */
+const Default = exports.Default = {
+  render: args => {
+    const [pinned, setPinned] = (0, _react.useState)(false);
+    const [width, setWidth] = (0, _react.useState)(null);
+    const [collapsed, setCollapsed] = (0, _react.useState)(false);
+    return /*#__PURE__*/_react.default.createElement(_Application.default, null, /*#__PURE__*/_react.default.createElement(_AppMain.default, null, /*#__PURE__*/_react.default.createElement("p", null, "Scroll to the right to see the panel."), /*#__PURE__*/_react.default.createElement(_Button.default, {
+      onClick: () => setCollapsed(false)
+    }, "Open"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+      onClick: () => setWidth("narrow")
+    }, "Narrow"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+      onClick: () => setWidth(null)
+    }, "Default"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+      onClick: () => setWidth("wide")
+    }, "Wide")), /*#__PURE__*/_react.default.createElement(_AppAside.default, _extends({}, args, {
+      pinned: pinned,
+      wide: width === "wide",
+      narrow: width === "narrow",
+      collapsed: collapsed
+    }), /*#__PURE__*/_react.default.createElement(_Panel.default, {
+      controls: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
+        onClick: () => setPinned(!pinned),
+        dense: true,
+        className: "u-no-margin--bottom"
+      }, "Pin"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+        appearance: "base",
+        className: "u-no-margin--bottom",
+        hasIcon: true,
+        onClick: () => setCollapsed(!collapsed)
+      }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+        name: "close"
+      }, "Close"))),
+      title: "App aside"
+    }, /*#__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")))))));
+  }
+};

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

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

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

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import AppMain from "./AppMain";
+declare const meta: Meta<typeof AppMain>;
+export default meta;
+type Story = StoryObj<typeof AppMain>;
+/**
+ * In most common cases an `AppMain` should contain a `<Panel>` to display the
+ * content as intended in the application layout.
+ *
+ * `AppMain` should be a direct child of an `<Application>` or when using `ApplicationLayout`
+ * it will automatically wrap the component's children.
+ */
+export declare const Default: Story;
+export declare const Content: Story;

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

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Default = exports.Content = void 0;
+var _Application = _interopRequireDefault(require("../Application"));
+var _Button = _interopRequireDefault(require("../../Button"));
+var _react = _interopRequireDefault(require("react"));
+var _Panel = _interopRequireDefault(require("../../Panel"));
+var _AppMain = _interopRequireDefault(require("./AppMain"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const meta = {
+  component: _AppMain.default,
+  tags: ["autodocs"]
+};
+var _default = exports.default = meta;
+/**
+ * In most common cases an `AppMain` should contain a `<Panel>` to display the
+ * content as intended in the application layout.
+ *
+ * `AppMain` should be a direct child of an `<Application>` or when using `ApplicationLayout`
+ * it will automatically wrap the component's children.
+ */
+const Default = exports.Default = {
+  args: {
+    children: "AppMain"
+  }
+};
+const Content = exports.Content = {
+  render: args => {
+    return /*#__PURE__*/_react.default.createElement(_Application.default, null, /*#__PURE__*/_react.default.createElement(_AppMain.default, args, /*#__PURE__*/_react.default.createElement(_Panel.default, {
+      controls: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
+        appearance: "positive",
+        onClick: () => {},
+        className: "u-no-margin--bottom"
+      }, "Add"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+        appearance: "negative",
+        onClick: () => {},
+        className: "u-no-margin--bottom"
+      }, "Delete")),
+      title: "App main"
+    }, /*#__PURE__*/_react.default.createElement("p", null, "App main content."), /*#__PURE__*/_react.default.createElement("p", null, "Scroll to the right to see the controls."))));
+  }
+};

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

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

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

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import AppNavigation from "./AppNavigation";
+declare const meta: Meta<typeof AppNavigation>;
+export default meta;
+type Story = StoryObj<typeof AppNavigation>;
+/**
+ * In most common cases an `AppNavigation` should contain a `<Panel>` and `<SideNavigation>`.
+ *
+ * `AppNavigation` should be a direct child of an `<Application>` or when using `ApplicationLayout`
+ * it will wrap `navItems` and `sideNavigation`.
+ */
+export declare const Default: Story;

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

@@ -0,0 +1,104 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _Application = _interopRequireDefault(require("../Application"));
+var _AppMain = _interopRequireDefault(require("../AppMain"));
+var _Button = _interopRequireDefault(require("../../Button"));
+var _Icon = _interopRequireDefault(require("../../Icon"));
+var _Panel = _interopRequireDefault(require("../../Panel"));
+var _SideNavigation = _interopRequireDefault(require("../../SideNavigation"));
+var _Strip = _interopRequireDefault(require("../../Strip"));
+var _AppNavigation = _interopRequireDefault(require("./AppNavigation"));
+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; }
+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); } /* eslint-disable react-hooks/rules-of-hooks */
+const meta = {
+  component: _AppNavigation.default,
+  tags: ["autodocs"]
+};
+var _default = exports.default = meta;
+/**
+ * In most common cases an `AppNavigation` should contain a `<Panel>` and `<SideNavigation>`.
+ *
+ * `AppNavigation` should be a direct child of an `<Application>` or when using `ApplicationLayout`
+ * it will wrap `navItems` and `sideNavigation`.
+ */
+const Default = exports.Default = {
+  render: args => {
+    const [pinned, setPinned] = (0, _react.useState)(false);
+    const [collapsed, setCollapsed] = (0, _react.useState)(true);
+    return /*#__PURE__*/_react.default.createElement(_Application.default, null, /*#__PURE__*/_react.default.createElement(_AppNavigation.default, _extends({}, args, {
+      pinned: pinned,
+      collapsed: collapsed
+    }), /*#__PURE__*/_react.default.createElement(_Panel.default, {
+      dark: true,
+      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": true
+        }),
+        onClick: evt => {
+          setCollapsed(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": true
+        })
+      }, "Close menu")), /*#__PURE__*/_react.default.createElement(_Button.default, {
+        hasIcon: true,
+        appearance: "base",
+        className: (0, _classnames.default)("u-no-margin u-hide--small", {
+          "is-dark": true
+        }),
+        onClick: () => {
+          setPinned(!pinned);
+        }
+      }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+        name: pinned ? "close" : "pin",
+        className: (0, _classnames.default)({
+          "is-light": true
+        })
+      }, pinned ? "Unpin menu" : "Pin menu"))),
+      controlsClassName: "u-hide--large",
+      stickyHeader: true,
+      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: "/"
+      }
+    }, /*#__PURE__*/_react.default.createElement(_SideNavigation.default, {
+      dark: true,
+      items: [{
+        items: [{
+          icon: "drag",
+          label: "Models",
+          href: "/models"
+        }, {
+          icon: "menu",
+          label: "Controllers",
+          href: "/controllers"
+        }, {
+          icon: "user",
+          label: "Permissions",
+          href: "/permissions"
+        }]
+      }]
+    }))), /*#__PURE__*/_react.default.createElement(_AppMain.default, null, /*#__PURE__*/_react.default.createElement(_Strip.default, null, /*#__PURE__*/_react.default.createElement("p", null, "These behaviours are only available at smaller screen sizes:"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+      onClick: () => setPinned(!pinned)
+    }, "Pin"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+      onClick: () => setCollapsed(!collapsed)
+    }, "Toggle"))));
+  }
+};

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

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

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

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import AppNavigationBar from "./AppNavigationBar";
+declare const meta: Meta<typeof AppNavigationBar>;
+export default meta;
+type Story = StoryObj<typeof AppNavigationBar>;
+/**
+ * In most common cases an `AppNavigationBar` should contain a `<Panel>`.
+ *
+ * `AppNavigationBar` should be a direct child of an `<Application>` or when using `ApplicationLayout`
+ * it will already be included.
+ *
+ * The toggle state should control the collapsed state of `AppNavigation`.
+ */
+export declare const Default: Story;
+export declare const States: Story;

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

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.States = exports.Default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Application = _interopRequireDefault(require("../Application"));
+var _AppMain = _interopRequireDefault(require("../AppMain"));
+var _Panel = _interopRequireDefault(require("../../Panel"));
+var _Strip = _interopRequireDefault(require("../../Strip"));
+var _AppNavigationBar = _interopRequireDefault(require("./AppNavigationBar"));
+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 meta = {
+  component: _AppNavigationBar.default,
+  tags: ["autodocs"]
+};
+var _default = exports.default = meta;
+/**
+ * In most common cases an `AppNavigationBar` should contain a `<Panel>`.
+ *
+ * `AppNavigationBar` should be a direct child of an `<Application>` or when using `ApplicationLayout`
+ * it will already be included.
+ *
+ * The toggle state should control the collapsed state of `AppNavigation`.
+ */
+const Default = exports.Default = {
+  args: {
+    children: "AppNavigation"
+  }
+};
+const States = exports.States = {
+  render: args => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [collapsed, setCollapsed] = (0, _react.useState)(true);
+    return /*#__PURE__*/_react.default.createElement(_Application.default, null, /*#__PURE__*/_react.default.createElement(_AppNavigationBar.default, args, /*#__PURE__*/_react.default.createElement(_Panel.default, {
+      dark: true,
+      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: "/"
+      },
+      toggle: {
+        label: "Menu",
+        onClick: () => setCollapsed(!collapsed)
+      }
+    })), /*#__PURE__*/_react.default.createElement(_AppMain.default, null, /*#__PURE__*/_react.default.createElement(_Strip.default, null, /*#__PURE__*/_react.default.createElement("p", null, "Reduce your window size to mobile to see the navigation bar."), /*#__PURE__*/_react.default.createElement("p", null, "Pass the collapsed state to the main menu:", " ", /*#__PURE__*/_react.default.createElement("code", null, "<AppNavigation collapsed={".concat(collapsed, "} />"))))));
+  }
+};

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

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

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

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import AppStatus from "./AppStatus";
+declare const meta: Meta<typeof AppStatus>;
+export default meta;
+type Story = StoryObj<typeof AppStatus>;
+/**
+ * `AppStatus` can contain a `<Panel>` to display the content as intended in the
+ * application layout.
+ *
+ * `AppStatus` should be a direct child of an `<Application>` or when using `ApplicationLayout`
+ * it will automatically wrap the content passed to the `status` prop.
+ */
+export declare const Default: Story;

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

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Application = _interopRequireDefault(require("../Application"));
+var _Button = _interopRequireDefault(require("../../Button"));
+var _Panel = _interopRequireDefault(require("../../Panel"));
+var _AppStatus = _interopRequireDefault(require("./AppStatus"));
+var _AppMain = _interopRequireDefault(require("../AppMain"));
+var _Strip = _interopRequireDefault(require("../../Strip"));
+var _Spinner = _interopRequireDefault(require("../../Spinner"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const meta = {
+  component: _AppStatus.default,
+  tags: ["autodocs"]
+};
+var _default = exports.default = meta;
+/**
+ * `AppStatus` can contain a `<Panel>` to display the content as intended in the
+ * application layout.
+ *
+ * `AppStatus` should be a direct child of an `<Application>` or when using `ApplicationLayout`
+ * it will automatically wrap the content passed to the `status` prop.
+ */
+const Default = exports.Default = {
+  render: args => {
+    return /*#__PURE__*/_react.default.createElement(_Application.default, null, /*#__PURE__*/_react.default.createElement(_AppMain.default, null, /*#__PURE__*/_react.default.createElement(_Strip.default, null, /*#__PURE__*/_react.default.createElement("p", null, "Scroll to the bottom to see the status bar."))), /*#__PURE__*/_react.default.createElement(_AppStatus.default, args, /*#__PURE__*/_react.default.createElement(_Panel.default, {
+      wrapContent: false
+    }, /*#__PURE__*/_react.default.createElement("p", {
+      className: "u-no-margin--bottom"
+    }, /*#__PURE__*/_react.default.createElement(_Spinner.default, null), " Update in progress...", " ", /*#__PURE__*/_react.default.createElement(_Button.default, {
+      appearance: "base",
+      onClick: () => {},
+      dense: true,
+      className: "u-no-margin"
+    }, "Retry")))));
+  }
+};