@canonical/react-components 0.57.0 → 0.59.0

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

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+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); }
+const AppAside = _ref => {
+  let {
+    children,
+    className,
+    collapsed,
+    narrow,
+    forwardRef,
+    pinned,
+    wide,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("aside", _extends({
+    className: (0, _classnames.default)("l-aside", className, {
+      "is-collapsed": collapsed,
+      "is-narrow": narrow,
+      "is-pinned": pinned,
+      "is-wide": wide
+    })
+  }, props, {
+    ref: forwardRef
+  }), children);
+};
+var _default = exports.default = AppAside;

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(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; }
+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); } /* 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/index.d.ts

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

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _AppAside.default;
+  }
+});
+var _AppAside = _interopRequireDefault(require("./AppAside"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+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 main content area in the Vanilla
+ * [Application Layout](https://vanillaframework.io/docs/layouts/application).
+ */
+const AppMain = _ref => {
+  let {
+    children,
+    className,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("main", _extends({
+    className: (0, _classnames.default)("l-main", className)
+  }, props), children);
+};
+var _default = exports.default = AppMain;

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

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

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _AppMain.default;
+  }
+});
+var _AppMain = _interopRequireDefault(require("./AppMain"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+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 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).
+ */
+const AppNavigation = _ref => {
+  let {
+    children,
+    className,
+    collapsed,
+    pinned,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("header", _extends({
+    className: (0, _classnames.default)("l-navigation", className, {
+      "is-collapsed": collapsed,
+      "is-pinned": pinned
+    })
+  }, props), /*#__PURE__*/_react.default.createElement("div", {
+    className: "l-navigation__drawer"
+  }, children));
+};
+var _default = exports.default = AppNavigation;

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(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; }
+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); } /* 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/index.d.ts

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

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _AppNavigation.default;
+  }
+});
+var _AppNavigation = _interopRequireDefault(require("./AppNavigation"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+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 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).
+ */
+const AppNavigationBar = _ref => {
+  let {
+    children,
+    className,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("header", _extends({
+    className: (0, _classnames.default)("l-navigation-bar", className)
+  }, props), children);
+};
+var _default = exports.default = AppNavigationBar;

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;