@canonical/react-components 1.6.0 → 1.7.0

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

@@ -0,0 +1,29 @@
+import ActionButton from "./ActionButton";
+var meta = {
+  component: ActionButton,
+  tags: ["autodocs"],
+  argTypes: {
+    children: {
+      control: {
+        type: "text"
+      }
+    }
+  }
+};
+export default meta;
+export var Default = {
+  name: "Default",
+  args: {
+    appearance: "positive",
+    children: "Click me!"
+  }
+};
+export var Loading = {
+  name: "Loading",
+  args: {
+    appearance: "positive",
+    loading: true,
+    disabled: true,
+    children: "Click me!"
+  }
+};

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

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

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

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

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

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

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

@@ -0,0 +1,33 @@
+import React from "react";
+import type { PropsWithSpread } from "../../../types";
+import { type HTMLProps, type PropsWithChildren } from "react";
+export type Props = PropsWithSpread<{
+    /**
+     * Whether the aside panel should be collapsed. Toggling this state will animate
+     * the panel open or closed.
+     */
+    collapsed?: boolean;
+    /**
+     * The panel content.
+     */
+    children?: PropsWithChildren["children"];
+    /**
+     * A ref that will be passed to the wrapping `<aside>` element.
+     */
+    forwardRef?: React.Ref<HTMLElement> | null;
+    /**
+     * Whether the aside panel should be narrow.
+     */
+    narrow?: boolean;
+    /**
+     * Whether the aside panel should be pinned. When pinned the panel will appear
+     * beside the main content, instead of above it.
+     */
+    pinned?: boolean;
+    /**
+     * Whether the aside panel should be wide.
+     */
+    wide?: boolean;
+}, HTMLProps<HTMLElement>>;
+declare const AppAside: ({ children, className, collapsed, narrow, forwardRef, pinned, wide, ...props }: Props) => React.JSX.Element;
+export default AppAside;

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

@@ -0,0 +1,29 @@
+var _excluded = ["children", "className", "collapsed", "narrow", "forwardRef", "pinned", "wide"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import React from "react";
+import classNames from "classnames";
+var AppAside = _ref => {
+  var {
+      children,
+      className,
+      collapsed,
+      narrow,
+      forwardRef,
+      pinned,
+      wide
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("aside", _extends({
+    className: classNames("l-aside", className, {
+      "is-collapsed": collapsed,
+      "is-narrow": narrow,
+      "is-pinned": pinned,
+      "is-wide": wide
+    })
+  }, props, {
+    ref: forwardRef
+  }), children);
+};
+export default AppAside;

package/dist/esm/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/esm/components/ApplicationLayout/AppAside/AppAside.stories.js

@@ -0,0 +1,108 @@
+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 */
+import React, { useState } from "react";
+import Application from "../Application";
+import AppMain from "../AppMain";
+import Button from "../../Button";
+import Col from "../../Col";
+import Form from "../../Form";
+import Icon from "../../Icon";
+import Input from "../../Input";
+import Panel from "../../Panel";
+import Row from "../../Row";
+import AppAside from "./AppAside";
+var meta = {
+  component: AppAside,
+  tags: ["autodocs"],
+  argTypes: {
+    children: {
+      control: false
+    }
+  }
+};
+export 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 .../>}>`.
+ */
+export var Default = {
+  render: args => {
+    var [pinned, setPinned] = useState(false);
+    var [width, setWidth] = useState(null);
+    var [collapsed, setCollapsed] = useState(false);
+    return /*#__PURE__*/React.createElement(Application, null, /*#__PURE__*/React.createElement(AppMain, null, /*#__PURE__*/React.createElement("p", null, "Scroll to the right to see the panel."), /*#__PURE__*/React.createElement(Button, {
+      onClick: () => setCollapsed(false)
+    }, "Open"), /*#__PURE__*/React.createElement(Button, {
+      onClick: () => setWidth("narrow")
+    }, "Narrow"), /*#__PURE__*/React.createElement(Button, {
+      onClick: () => setWidth(null)
+    }, "Default"), /*#__PURE__*/React.createElement(Button, {
+      onClick: () => setWidth("wide")
+    }, "Wide")), /*#__PURE__*/React.createElement(AppAside, _extends({}, args, {
+      pinned: pinned,
+      wide: width === "wide",
+      narrow: width === "narrow",
+      collapsed: collapsed
+    }), /*#__PURE__*/React.createElement(Panel, {
+      controls: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+        onClick: () => setPinned(!pinned),
+        dense: true,
+        className: "u-no-margin--bottom"
+      }, "Pin"), /*#__PURE__*/React.createElement(Button, {
+        appearance: "base",
+        className: "u-no-margin--bottom",
+        hasIcon: true,
+        onClick: () => setCollapsed(!collapsed)
+      }, /*#__PURE__*/React.createElement(Icon, {
+        name: "close"
+      }, "Close"))),
+      title: "App aside"
+    }, /*#__PURE__*/React.createElement(Form, {
+      stacked: true
+    }, /*#__PURE__*/React.createElement(Input, {
+      label: "Full name",
+      type: "text",
+      name: "fullName",
+      autoComplete: "name",
+      stacked: true
+    }), /*#__PURE__*/React.createElement(Input, {
+      label: "Username",
+      type: "text",
+      name: "username-stacked",
+      autoComplete: "username",
+      "aria-describedby": "exampleHelpTextMessage",
+      stacked: true,
+      help: "30 characters or fewer."
+    }), /*#__PURE__*/React.createElement(Input, {
+      type: "text",
+      label: "Email address",
+      "aria-invalid": "true",
+      name: "username-stackederror",
+      autoComplete: "email",
+      required: true,
+      error: "This field is required.",
+      stacked: true
+    }), /*#__PURE__*/React.createElement(Input, {
+      label: "Address line 1",
+      type: "text",
+      name: "address-optional-stacked",
+      autoComplete: "address-line1",
+      stacked: true
+    }), /*#__PURE__*/React.createElement(Input, {
+      label: "Address line 2",
+      type: "text",
+      name: "address-optional-stacked",
+      autoComplete: "address-line3",
+      stacked: true
+    }), /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, {
+      size: 12
+    }, /*#__PURE__*/React.createElement(Button, {
+      appearance: "positive",
+      className: "u-float-right",
+      name: "add-details"
+    }, "Add details")))))));
+  }
+};

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

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

package/dist/esm/components/ApplicationLayout/AppAside/index.d.ts

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

package/dist/esm/components/ApplicationLayout/AppAside/index.js

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

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

@@ -0,0 +1,14 @@
+import React from "react";
+import type { HTMLProps, PropsWithChildren } from "react";
+export type Props = {
+    /**
+     * The main content.
+     */
+    children?: PropsWithChildren["children"];
+} & HTMLProps<HTMLDivElement>;
+/**
+ * This is a [React](https://reactjs.org/) component for main content area in the Vanilla
+ * [Application Layout](https://vanillaframework.io/docs/layouts/application).
+ */
+declare const AppMain: ({ children, className, ...props }: Props) => React.JSX.Element;
+export default AppMain;

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

@@ -0,0 +1,21 @@
+var _excluded = ["children", "className"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import React from "react";
+import classNames from "classnames";
+/**
+ * This is a [React](https://reactjs.org/) component for main content area in the Vanilla
+ * [Application Layout](https://vanillaframework.io/docs/layouts/application).
+ */
+var AppMain = _ref => {
+  var {
+      children,
+      className
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("main", _extends({
+    className: classNames("l-main", className)
+  }, props), children);
+};
+export default AppMain;

package/dist/esm/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/esm/components/ApplicationLayout/AppMain/AppMain.stories.js

@@ -0,0 +1,38 @@
+import Application from "../Application";
+import Button from "../../Button";
+import React from "react";
+import Panel from "../../Panel";
+import AppMain from "./AppMain";
+var meta = {
+  component: AppMain,
+  tags: ["autodocs"]
+};
+export 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.
+ */
+export var Default = {
+  args: {
+    children: "AppMain"
+  }
+};
+export var Content = {
+  render: args => {
+    return /*#__PURE__*/React.createElement(Application, null, /*#__PURE__*/React.createElement(AppMain, args, /*#__PURE__*/React.createElement(Panel, {
+      controls: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+        appearance: "positive",
+        onClick: () => {},
+        className: "u-no-margin--bottom"
+      }, "Add"), /*#__PURE__*/React.createElement(Button, {
+        appearance: "negative",
+        onClick: () => {},
+        className: "u-no-margin--bottom"
+      }, "Delete")),
+      title: "App main"
+    }, /*#__PURE__*/React.createElement("p", null, "App main content."), /*#__PURE__*/React.createElement("p", null, "Scroll to the right to see the controls."))));
+  }
+};

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

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

package/dist/esm/components/ApplicationLayout/AppMain/index.d.ts

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

package/dist/esm/components/ApplicationLayout/AppMain/index.js

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

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

@@ -0,0 +1,26 @@
+import React from "react";
+import type { PropsWithSpread } from "../../../types";
+import type { HTMLProps, PropsWithChildren } from "react";
+export type Props = PropsWithSpread<{
+    /**
+     * Whether the navigation panel should be collapsed.
+     */
+    collapsed?: boolean;
+    /**
+     * The navigation drawer content.
+     */
+    children?: PropsWithChildren["children"];
+    /**
+     * Whether the navigation panel should be pinned.
+     */
+    pinned?: boolean;
+}, HTMLProps<HTMLDivElement>>;
+/**
+ * This is a [React](https://reactjs.org/) component for the navigation panel in the Vanilla
+ * [Application Layout](https://vanillaframework.io/docs/layouts/application).
+ *
+ * This component is used to display the left navigation panel. It should be
+ * used alongside [`AppNavigationBar`](/docs/components-applicationlayout-appnavigationbar--docs).
+ */
+declare const AppNavigation: ({ children, className, collapsed, pinned, ...props }: Props) => React.JSX.Element;
+export default AppNavigation;

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

@@ -0,0 +1,31 @@
+var _excluded = ["children", "className", "collapsed", "pinned"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import React from "react";
+import classNames from "classnames";
+/**
+ * This is a [React](https://reactjs.org/) component for the navigation panel in the Vanilla
+ * [Application Layout](https://vanillaframework.io/docs/layouts/application).
+ *
+ * This component is used to display the left navigation panel. It should be
+ * used alongside [`AppNavigationBar`](/docs/components-applicationlayout-appnavigationbar--docs).
+ */
+var AppNavigation = _ref => {
+  var {
+      children,
+      className,
+      collapsed,
+      pinned
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("header", _extends({
+    className: classNames("l-navigation", className, {
+      "is-collapsed": collapsed,
+      "is-pinned": pinned
+    })
+  }, props), /*#__PURE__*/React.createElement("div", {
+    className: "l-navigation__drawer"
+  }, children));
+};
+export default AppNavigation;

package/dist/esm/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/esm/components/ApplicationLayout/AppNavigation/AppNavigation.stories.js

@@ -0,0 +1,97 @@
+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 */
+import { useState } from "react";
+import classNames from "classnames";
+import React from "react";
+import Application from "../Application";
+import AppMain from "../AppMain";
+import Button from "../../Button";
+import Icon from "../../Icon";
+import Panel from "../../Panel";
+import SideNavigation from "../../SideNavigation";
+import Strip from "../../Strip";
+import AppNavigation from "./AppNavigation";
+var meta = {
+  component: AppNavigation,
+  tags: ["autodocs"]
+};
+export 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`.
+ */
+export var Default = {
+  render: args => {
+    var [pinned, setPinned] = useState(false);
+    var [collapsed, setCollapsed] = useState(true);
+    return /*#__PURE__*/React.createElement(Application, null, /*#__PURE__*/React.createElement(AppNavigation, _extends({}, args, {
+      pinned: pinned,
+      collapsed: collapsed
+    }), /*#__PURE__*/React.createElement(Panel, {
+      dark: true,
+      controls: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+        hasIcon: true,
+        appearance: "base",
+        className: classNames("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.createElement(Icon, {
+        name: "close",
+        className: classNames({
+          "is-light": true
+        })
+      }, "Close menu")), /*#__PURE__*/React.createElement(Button, {
+        hasIcon: true,
+        appearance: "base",
+        className: classNames("u-no-margin u-hide--small", {
+          "is-dark": true
+        }),
+        onClick: () => {
+          setPinned(!pinned);
+        }
+      }, /*#__PURE__*/React.createElement(Icon, {
+        name: pinned ? "close" : "pin",
+        className: classNames({
+          "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.createElement(SideNavigation, {
+      dark: true,
+      items: [{
+        items: [{
+          icon: "drag",
+          label: "Models",
+          href: "/models"
+        }, {
+          icon: "menu",
+          label: "Controllers",
+          href: "/controllers"
+        }, {
+          icon: "user",
+          label: "Permissions",
+          href: "/permissions"
+        }]
+      }]
+    }))), /*#__PURE__*/React.createElement(AppMain, null, /*#__PURE__*/React.createElement(Strip, null, /*#__PURE__*/React.createElement("p", null, "These behaviours are only available at smaller screen sizes:"), /*#__PURE__*/React.createElement(Button, {
+      onClick: () => setPinned(!pinned)
+    }, "Pin"), /*#__PURE__*/React.createElement(Button, {
+      onClick: () => setCollapsed(!collapsed)
+    }, "Toggle"))));
+  }
+};

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

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

package/dist/esm/components/ApplicationLayout/AppNavigation/index.d.ts

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

package/dist/esm/components/ApplicationLayout/AppNavigation/index.js

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

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

@@ -0,0 +1,18 @@
+import React from "react";
+import type { PropsWithSpread } from "../../../types";
+import type { HTMLProps, PropsWithChildren } from "react";
+export type Props = PropsWithSpread<{
+    /**
+     * The navigation content.
+     */
+    children?: PropsWithChildren["children"];
+}, HTMLProps<HTMLElement>>;
+/**
+ * This is a [React](https://reactjs.org/) component for navigation bar in the Vanilla
+ * [Application Layout](https://vanillaframework.io/docs/layouts/application).
+ *
+ * This component is used to display the navigation panel on mobile or small
+ * screens. It should be used alongside [`AppNavigation`](/docs/components-applicationlayout-appnavigation--docs).
+ */
+declare const AppNavigationBar: ({ children, className, ...props }: Props) => React.JSX.Element;
+export default AppNavigationBar;

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

@@ -0,0 +1,24 @@
+var _excluded = ["children", "className"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import React from "react";
+import classNames from "classnames";
+/**
+ * This is a [React](https://reactjs.org/) component for navigation bar in the Vanilla
+ * [Application Layout](https://vanillaframework.io/docs/layouts/application).
+ *
+ * This component is used to display the navigation panel on mobile or small
+ * screens. It should be used alongside [`AppNavigation`](/docs/components-applicationlayout-appnavigation--docs).
+ */
+var AppNavigationBar = _ref => {
+  var {
+      children,
+      className
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("header", _extends({
+    className: classNames("l-navigation-bar", className)
+  }, props), children);
+};
+export default AppNavigationBar;

package/dist/esm/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/esm/components/ApplicationLayout/AppNavigationBar/AppNavigationBar.stories.js

@@ -0,0 +1,44 @@
+import React from "react";
+import { useState } from "react";
+import Application from "../Application";
+import AppMain from "../AppMain";
+import Panel from "../../Panel";
+import Strip from "../../Strip";
+import AppNavigationBar from "./AppNavigationBar";
+var meta = {
+  component: AppNavigationBar,
+  tags: ["autodocs"]
+};
+export 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`.
+ */
+export var Default = {
+  args: {
+    children: "AppNavigation"
+  }
+};
+export var States = {
+  render: args => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    var [collapsed, setCollapsed] = useState(true);
+    return /*#__PURE__*/React.createElement(Application, null, /*#__PURE__*/React.createElement(AppNavigationBar, args, /*#__PURE__*/React.createElement(Panel, {
+      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.createElement(AppMain, null, /*#__PURE__*/React.createElement(Strip, null, /*#__PURE__*/React.createElement("p", null, "Reduce your window size to mobile to see the navigation bar."), /*#__PURE__*/React.createElement("p", null, "Pass the collapsed state to the main menu:", " ", /*#__PURE__*/React.createElement("code", null, "<AppNavigation collapsed={".concat(collapsed, "} />"))))));
+  }
+};

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

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

package/dist/esm/components/ApplicationLayout/AppNavigationBar/index.d.ts

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

package/dist/esm/components/ApplicationLayout/AppNavigationBar/index.js

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