@canonical/react-components 0.58.0 → 0.59.1

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

@@ -37,5 +37,10 @@ export type Props = PropsWithSpread<{
      */
     titleElement?: AccordionHeadings;
 }, HTMLProps<HTMLElement>>;
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Accordion](https://docs.vanillaframework.io/patterns/accordion/).
+ *
+ * The sidebar accordion, used in listing pages or as navigation, can hold multiple navigation items or to be used as a filter for content.
+ */
 declare const Accordion: ({ className, expanded, externallyControlled, onExpandedChange, sections, titleElement, ...asideProps }: Props) => JSX.Element;
 export default Accordion;

package/dist/components/Accordion/Accordion.js

@@ -24,6 +24,12 @@ const generateSections = (sections, setExpanded, expanded, titleElement) => sect
     titleElement: titleElement
   }, props));
 });
+
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Accordion](https://docs.vanillaframework.io/patterns/accordion/).
+ *
+ * The sidebar accordion, used in listing pages or as navigation, can hold multiple navigation items or to be used as a filter for content.
+ */
 const Accordion = _ref2 => {
   let {
     className,

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

@@ -0,0 +1,18 @@
+import { Meta, StoryObj } from "@storybook/react";
+import Accordion from "./Accordion";
+declare const meta: Meta<typeof Accordion>;
+export default meta;
+type Story = StoryObj<typeof Accordion>;
+export declare const Default: Story;
+/**
+ * The expanded accordion section can be controlled by external state.
+ */
+export declare const ExternalState: Story;
+/**
+ * `titleElement` prop can be used to define heading element for section titles.
+ */
+export declare const Headings: Story;
+/**
+ * The `title` prop can be a `ReactNode`, allowing a higher degree of customisation of the section titles.
+ */
+export declare const CustomHeadings: Story;

package/dist/components/Accordion/Accordion.stories.js

@@ -0,0 +1,117 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Headings = exports.ExternalState = exports.Default = exports.CustomHeadings = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Accordion = _interopRequireDefault(require("./Accordion"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const meta = {
+  component: _Accordion.default,
+  tags: ["autodocs"],
+  argTypes: {
+    sections: {
+      control: {
+        disable: true
+      }
+    },
+    externallyControlled: {
+      control: {
+        disable: true
+      }
+    }
+  }
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  name: "Default",
+  args: {
+    sections: [{
+      title: "Advanced topics",
+      content: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", null, "Charm bundles"), /*#__PURE__*/_react.default.createElement("p", null, "Machine authentication"), /*#__PURE__*/_react.default.createElement("p", null, "Migrating models"), /*#__PURE__*/_react.default.createElement("p", null, "Using storage"), /*#__PURE__*/_react.default.createElement("p", null, "Working with actions"), /*#__PURE__*/_react.default.createElement("p", null, "Working with resources"), /*#__PURE__*/_react.default.createElement("p", null, "Cloud image metadata"), /*#__PURE__*/_react.default.createElement("p", null, "Tools"))
+    }, {
+      title: "Networking",
+      content: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", null, "Working offline"), /*#__PURE__*/_react.default.createElement("p", null, "Fan container networking"), /*#__PURE__*/_react.default.createElement("p", null, "Network spaces"))
+    }, {
+      title: "Miscellaneous",
+      content: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", null, "Juju GUI"), /*#__PURE__*/_react.default.createElement("p", null, "CentOS support"), /*#__PURE__*/_react.default.createElement("p", null, "Collecting Juju metrics"))
+    }]
+  }
+};
+
+/**
+ * The expanded accordion section can be controlled by external state.
+ */
+const ExternalState = exports.ExternalState = {
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [expandedSection, setExpandedSection] = (0, _react.useState)();
+    return /*#__PURE__*/_react.default.createElement(_Accordion.default, {
+      expanded: expandedSection,
+      externallyControlled: true,
+      onExpandedChange: setExpandedSection,
+      sections: [{
+        title: "Advanced topics",
+        key: "advanced-topics",
+        content: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", null, "Charm bundles"), /*#__PURE__*/_react.default.createElement("p", null, "Machine authentication"), /*#__PURE__*/_react.default.createElement("p", null, "Migrating models"), /*#__PURE__*/_react.default.createElement("p", null, "Using storage"), /*#__PURE__*/_react.default.createElement("p", null, "Working with actions"), /*#__PURE__*/_react.default.createElement("p", null, "Working with resources"), /*#__PURE__*/_react.default.createElement("p", null, "Cloud image metadata"), /*#__PURE__*/_react.default.createElement("p", null, "Tools"))
+      }, {
+        title: "Networking",
+        key: "networking",
+        content: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", null, "Working offline"), /*#__PURE__*/_react.default.createElement("p", null, "Fan container networking"), /*#__PURE__*/_react.default.createElement("p", null, "Network spaces"))
+      }, {
+        title: "Miscellaneous",
+        key: "miscellaneous",
+        content: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", null, "Juju GUI"), /*#__PURE__*/_react.default.createElement("p", null, "CentOS support"), /*#__PURE__*/_react.default.createElement("p", null, "Collecting Juju metrics"))
+      }]
+    });
+  },
+  name: "External state"
+};
+
+/**
+ * `titleElement` prop can be used to define heading element for section titles.
+ */
+const Headings = exports.Headings = {
+  name: "Headings",
+  args: {
+    sections: [{
+      title: "Advanced topics",
+      content: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", null, "Charm bundles"), /*#__PURE__*/_react.default.createElement("p", null, "Machine authentication"), /*#__PURE__*/_react.default.createElement("p", null, "Migrating models"), /*#__PURE__*/_react.default.createElement("p", null, "Using storage"), /*#__PURE__*/_react.default.createElement("p", null, "Working with actions"), /*#__PURE__*/_react.default.createElement("p", null, "Working with resources"), /*#__PURE__*/_react.default.createElement("p", null, "Cloud image metadata"), /*#__PURE__*/_react.default.createElement("p", null, "Tools"))
+    }, {
+      title: "Networking",
+      content: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", null, "Working offline"), /*#__PURE__*/_react.default.createElement("p", null, "Fan container networking"), /*#__PURE__*/_react.default.createElement("p", null, "Network spaces"))
+    }, {
+      title: "Miscellaneous",
+      content: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", null, "Juju GUI"), /*#__PURE__*/_react.default.createElement("p", null, "CentOS support"), /*#__PURE__*/_react.default.createElement("p", null, "Collecting Juju metrics"))
+    }],
+    titleElement: "h3"
+  }
+};
+
+/**
+ * The `title` prop can be a `ReactNode`, allowing a higher degree of customisation of the section titles.
+ */
+const CustomHeadings = exports.CustomHeadings = {
+  args: {
+    sections: [{
+      title: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Advanced topics", " ", /*#__PURE__*/_react.default.createElement("span", {
+        className: "u-text--muted p-text--small"
+      }, "optional")),
+      content: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", null, "Charm bundles"), /*#__PURE__*/_react.default.createElement("p", null, "Machine authentication"), /*#__PURE__*/_react.default.createElement("p", null, "Migrating models"), /*#__PURE__*/_react.default.createElement("p", null, "Using storage"), /*#__PURE__*/_react.default.createElement("p", null, "Working with actions"), /*#__PURE__*/_react.default.createElement("p", null, "Working with resources"), /*#__PURE__*/_react.default.createElement("p", null, "Cloud image metadata"), /*#__PURE__*/_react.default.createElement("p", null, "Tools"))
+    }, {
+      title: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Networking", " ", /*#__PURE__*/_react.default.createElement("span", {
+        className: "u-text--muted p-text--small"
+      }, "optional")),
+      content: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", null, "Working offline"), /*#__PURE__*/_react.default.createElement("p", null, "Fan container networking"), /*#__PURE__*/_react.default.createElement("p", null, "Network spaces"))
+    }, {
+      title: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Miscellaneous", " ", /*#__PURE__*/_react.default.createElement("span", {
+        className: "u-text--muted p-text--small"
+      }, "optional")),
+      content: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", null, "Juju GUI"), /*#__PURE__*/_react.default.createElement("p", null, "CentOS support"), /*#__PURE__*/_react.default.createElement("p", null, "Collecting Juju metrics"))
+    }],
+    titleElement: "h3"
+  }
+};

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

@@ -37,5 +37,12 @@ export type Props = PropsWithSpread<{
      */
     success?: boolean;
 }, ButtonHTMLAttributes<HTMLButtonElement>>;
+/**
+ * This is a not an existing Vanilla component. It can be used to display submitting states for forms or other actions.
+ *
+ * ActionButton accepts the props from
+ * [Button](?path=/docs/components-button--docs) in addition to those in the
+ * props table:
+ */
 declare const ActionButton: ({ appearance, children, className, disabled, inline, loading, success, ...buttonProps }: Props) => JSX.Element;
 export default ActionButton;

package/dist/components/ActionButton/ActionButton.js

@@ -18,6 +18,13 @@ let Label = exports.Label = /*#__PURE__*/function (Label) {
   Label["SUCCESS"] = "Action completed";
   return Label;
 }({});
+/**
+ * This is a not an existing Vanilla component. It can be used to display submitting states for forms or other actions.
+ *
+ * ActionButton accepts the props from
+ * [Button](?path=/docs/components-button--docs) in addition to those in the
+ * props table:
+ */
 const ActionButton = _ref => {
   let {
     appearance,

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

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

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

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

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