@canonical/react-components 0.56.0 → 0.58.0

package/dist/components/Panel/Panel.d.ts

@@ -0,0 +1,123 @@
+import React from "react";
+import type { PropsWithSpread } from "../../types";
+import type { ComponentType, ElementType, HTMLProps, PropsWithChildren, ReactNode } from "react";
+import type { ExclusiveProps } from "../../types";
+export type LogoDefaultElement = HTMLProps<HTMLAnchorElement>;
+type PanelLogo<L = LogoDefaultElement> = ReactNode | PropsWithSpread<{
+    /**
+     * The url of the icon image.
+     */
+    icon: string;
+    /**
+     * The alt text for the icon image.
+     */
+    iconAlt?: string;
+    /**
+     * The url of the name image.
+     */
+    name: string;
+    /**
+     * The alt text for the name image.
+     */
+    nameAlt?: string;
+    /**
+     * The element or component to use for displaying the logo e.g. `a` or `NavLink`.
+     * @default a
+     */
+    component?: ElementType | ComponentType<L>;
+}, L>;
+type PanelToggle = {
+    /**
+     * The panel toggle label.
+     */
+    label: string;
+    /**
+     * The function to call when clicking the panel toggle.
+     */
+    onClick: () => void;
+};
+type LogoProps<L = LogoDefaultElement> = {
+    /**
+     * The panel logo content or attributes.
+     */
+    logo?: PanelLogo<L>;
+};
+type TitleProps = {
+    /**
+     * The panel title.
+     */
+    title: ReactNode;
+    /**
+     * Classes to apply to the title element.
+     */
+    titleClassName?: string;
+    /**
+     * The element to use for the panel title e.g. `h1`.
+     * @default h4
+     */
+    titleComponent?: ElementType;
+    /**
+     * An ID for the title element.
+     */
+    titleId?: string;
+};
+type HeaderProps<L = LogoDefaultElement> = ExclusiveProps<{
+    /**
+     * This prop can be used to replace the header area of the panel when the default implementation is not sufficient.
+     */
+    header: ReactNode;
+}, {
+    /**
+     * Content that will be displayed in the controls area.
+     */
+    controls?: ReactNode;
+    /**
+     * Classes that will be applied to the controls element.
+     */
+    controlsClassName?: string;
+    /**
+     * Whether the header should be sticky.
+     */
+    stickyHeader?: boolean;
+    /**
+     * The panel toggle attributes.
+     */
+    toggle?: PanelToggle;
+} & ExclusiveProps<LogoProps<L>, TitleProps>>;
+export type Props<L = LogoDefaultElement> = {
+    /**
+     * The panel content.
+     */
+    children?: PropsWithChildren["children"];
+    /**
+     * Classes that are applied to the content container (when using `wrapContent`).
+     */
+    contentClassName?: string | null;
+    /**
+     * Classes that are applied to the top level panel element.
+     */
+    className?: string | null;
+    /**
+     * Whether to use the dark theme.
+     */
+    dark?: boolean;
+    /**
+     * Whether the panel should wrap the content in the `p-panel__content` element.
+     * @default true
+     */
+    wrapContent?: boolean;
+    /**
+     * A ref to pass to the top level panel element.
+     */
+    forwardRef?: React.Ref<HTMLDivElement> | null;
+} & HeaderProps<L>;
+/**
+ * This is a [React](https://reactjs.org/) component for panels in the
+ * [Vanilla](https://vanillaframework.io/docs/) layouts.
+ *
+ * The Panel component can be used in many areas of the application layout. It
+ * can be the child element of `AppAside`, `AppMain`, `AppNavigation`, `AppNavigationBar`
+ * and `AppStatus`.
+ */
+declare const Panel: <L = LogoDefaultElement>({ forwardRef, children, className, contentClassName, controlsClassName, controls, dark, header, logo, stickyHeader, title, titleClassName, titleComponent: TitleComponent, titleId, toggle, wrapContent, ...props }: Props<L>) => React.JSX.Element;
+export default Panel;

package/dist/components/Panel/Panel.js

@@ -0,0 +1,92 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _utils = require("../../utils");
+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 generateLogo = logo => {
+  if ((0, _utils.isReactNode)(logo)) {
+    return logo;
+  }
+  const {
+    icon,
+    iconAlt,
+    name,
+    nameAlt,
+    component: Component = "a",
+    ...props
+  } = logo;
+  return /*#__PURE__*/_react.default.createElement(Component, _extends({
+    className: "p-panel__logo"
+  }, props), /*#__PURE__*/_react.default.createElement("img", {
+    className: "p-panel__logo-icon",
+    src: icon,
+    alt: iconAlt,
+    width: "24",
+    height: "24"
+  }), /*#__PURE__*/_react.default.createElement("img", {
+    className: "p-panel__logo-name is-fading-when-collapsed",
+    src: name,
+    alt: nameAlt,
+    height: "16"
+  }));
+};
+
+/**
+ * This is a [React](https://reactjs.org/) component for panels in the
+ * [Vanilla](https://vanillaframework.io/docs/) layouts.
+ *
+ * The Panel component can be used in many areas of the application layout. It
+ * can be the child element of `AppAside`, `AppMain`, `AppNavigation`, `AppNavigationBar`
+ * and `AppStatus`.
+ */
+const Panel = _ref => {
+  let {
+    forwardRef,
+    children,
+    className,
+    contentClassName,
+    controlsClassName,
+    controls,
+    dark,
+    header,
+    logo,
+    stickyHeader,
+    title,
+    titleClassName,
+    titleComponent: TitleComponent = "h4",
+    titleId,
+    toggle,
+    wrapContent = true,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", _extends({}, props, {
+    className: (0, _classnames.default)("p-panel", className, {
+      "is-dark": dark
+    }),
+    ref: forwardRef
+  }), logo || title || controls || toggle ? /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)("p-panel__header", {
+      "is-sticky": stickyHeader
+    })
+  }, logo ? generateLogo(logo) : /*#__PURE__*/_react.default.createElement(TitleComponent, {
+    className: (0, _classnames.default)("p-panel__title", titleClassName),
+    id: titleId
+  }, title), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)("p-panel__controls", controlsClassName)
+  }, toggle ? /*#__PURE__*/_react.default.createElement("span", {
+    role: "button",
+    tabIndex: 0,
+    className: "p-panel__toggle",
+    onClick: () => toggle.onClick(),
+    onKeyDown: () => toggle.onClick()
+  }, toggle.label) : null, controls)) : header, children && wrapContent ? /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)("p-panel__content", contentClassName)
+  }, children) : children);
+};
+var _default = exports.default = Panel;

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

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Panel from "./Panel";
+declare const meta: Meta<typeof Panel>;
+export default meta;
+type Story = StoryObj<typeof Panel>;
+export declare const Default: Story;
+export declare const Header: Story;
+/**
+ * The logo may be provided as attributes to use the standard logo. If this is
+ * not sufficient the a `ReactNode` can be passed to the `logo` prop instead.
+ */
+export declare const Logo: Story;
+/**
+ * If the default header does not meet your needs then a `ReactNode` can be
+ * passed to the `header` prop to replace the header.
+ */
+export declare const CustomHeader: Story;

package/dist/components/Panel/Panel.stories.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Logo = exports.Header = exports.Default = exports.CustomHeader = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Panel = _interopRequireDefault(require("./Panel"));
+var _Button = _interopRequireDefault(require("../Button"));
+var _Icon = _interopRequireDefault(require("../Icon"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const meta = {
+  component: _Panel.default,
+  tags: ["autodocs"]
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  args: {
+    children: "Panel content",
+    title: "Panel"
+  }
+};
+const Header = exports.Header = {
+  args: {
+    controls: /*#__PURE__*/_react.default.createElement(_Button.default, {
+      appearance: "positive"
+    }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      name: "plus",
+      light: true
+    }), " Create"),
+    title: "Panel title",
+    titleComponent: "h1"
+  }
+};
+
+/**
+ * The logo may be provided as attributes to use the standard logo. If this is
+ * not sufficient the a `ReactNode` can be passed to the `logo` prop instead.
+ */
+const Logo = exports.Logo = {
+  args: {
+    logo: {
+      icon: "https://assets.ubuntu.com/v1/7144ec6d-logo-jaas-icon.svg",
+      name: "https://assets.ubuntu.com/v1/a85f7947-juju_black-text-only.svg",
+      nameAlt: "Juju"
+    }
+  }
+};
+
+/**
+ * If the default header does not meet your needs then a `ReactNode` can be
+ * passed to the `header` prop to replace the header.
+ */
+const CustomHeader = exports.CustomHeader = {
+  args: {
+    header: /*#__PURE__*/_react.default.createElement("div", {
+      className: "p-panel__header"
+    }, "This header replaces the entire header area")
+  }
+};

package/dist/components/Panel/index.d.ts

@@ -0,0 +1 @@
+export { default, type Props as PanelProps, type LogoDefaultElement as PanelLogoDefaultElement, } from "./Panel";

package/dist/components/Panel/index.js

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

package/dist/components/SideNavigation/SideNavigation.d.ts

@@ -0,0 +1,50 @@
+import React, { PropsWithChildren, ReactNode } from "react";
+import type { PropsWithSpread } from "../../types";
+import { type HTMLProps } from "react";
+import type { SideNavigationItemProps } from "./SideNavigationItem";
+import type { SideNavigationLinkDefaultElement, SideNavigationLinkProps } from "./SideNavigationLink";
+export type NavItem<L = SideNavigationLinkDefaultElement> = SideNavigationItemProps<L> | ReactNode | null;
+export type NavItemGroup<L = SideNavigationLinkDefaultElement> = NavItem<L>[];
+export type NavGroup<L = SideNavigationLinkDefaultElement> = PropsWithSpread<{
+    /**
+     * The navigation items.
+     */
+    items: NavItemGroup<L>;
+}, HTMLProps<HTMLUListElement>>;
+export type Props<L = SideNavigationLinkDefaultElement> = PropsWithSpread<{
+    /**
+     * The navigation content. This can be used instead of supplying `items`.
+     */
+    children?: PropsWithChildren["children"];
+    /**
+     * Whether to use the dark theme.
+     */
+    dark?: boolean;
+    /**
+     * Whether the navigation items contain icons.
+     */
+    hasIcons?: boolean;
+    /**
+     * The navigation items.
+     */
+    items?: (NavGroup<L> | null)[];
+    /**
+     * The component or element to use for the link elements e.g. `a` or `NavLink`.
+     * @default a
+     */
+    linkComponent?: SideNavigationLinkProps["component"];
+    /**
+     * Classes to apply to the navigation list(s).
+     */
+    listClassName?: string;
+    /**
+     * Classes to apply to the nav element.
+     */
+    navClassName?: string;
+}, HTMLProps<HTMLDivElement>>;
+/**
+ * This is a [React](https://reactjs.org/) component for side navigation, used
+ * in the [Vanilla](https://vanillaframework.io/docs/) layouts.
+ */
+declare const SideNavigation: <L = SideNavigationLinkDefaultElement>({ children, className, dark, hasIcons, items, linkComponent, listClassName, navClassName, ...props }: Props<L>) => React.JSX.Element;
+export default SideNavigation;

package/dist/components/SideNavigation/SideNavigation.js

@@ -0,0 +1,90 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _SideNavigationItem = _interopRequireDefault(require("./SideNavigationItem"));
+var _utils = require("../../utils");
+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 generateItem = (item, index, linkComponent, dark) => {
+  if ((0, _utils.isReactNode)(item)) {
+    return /*#__PURE__*/_react.default.createElement(_SideNavigationItem.default, {
+      key: index
+    }, item);
+  }
+  if ("nonInteractive" in item) {
+    var _item$dark;
+    return /*#__PURE__*/_react.default.createElement(_SideNavigationItem.default, _extends({}, item, {
+      dark: (_item$dark = item.dark) !== null && _item$dark !== void 0 ? _item$dark : dark,
+      key: index
+    }));
+  }
+  if ("children" in item) {
+    return /*#__PURE__*/_react.default.createElement(_SideNavigationItem.default, _extends({
+      key: index
+    }, item));
+  }
+  if ("label" in item) {
+    var _item$component, _item$dark2;
+    return /*#__PURE__*/_react.default.createElement(_SideNavigationItem.default, _extends({
+      component: (_item$component = item.component) !== null && _item$component !== void 0 ? _item$component : linkComponent,
+      dark: (_item$dark2 = item.dark) !== null && _item$dark2 !== void 0 ? _item$dark2 : dark
+    }, item, {
+      key: index
+    }));
+  }
+  return null;
+};
+const generateItems = (groups, listClassName, linkComponent, dark) => {
+  return groups === null || groups === void 0 ? void 0 : groups.filter(Boolean).map((group, g) => {
+    let items;
+    let props = {};
+    if (typeof group === "object" && "items" in group) {
+      ({
+        items,
+        ...props
+      } = group);
+    } else {
+      items = group;
+    }
+    return /*#__PURE__*/_react.default.createElement("ul", _extends({}, props, {
+      className: (0, _classnames.default)("p-side-navigation__list", listClassName, "className" in group ? group.className : null),
+      key: g
+    }), items.filter(Boolean).map((item, i) => generateItem(item, i, linkComponent, dark)));
+  });
+};
+const getHasIcons = groups => groups === null || groups === void 0 ? void 0 : groups.some(group => {
+  var _ref;
+  return (_ref = group && "items" in group ? group.items : group) === null || _ref === void 0 ? void 0 : _ref.some(item => (0, _utils.isReactNode)(item) ? false : item && "icon" in item && !!item.icon);
+});
+
+/**
+ * This is a [React](https://reactjs.org/) component for side navigation, used
+ * in the [Vanilla](https://vanillaframework.io/docs/) layouts.
+ */
+const SideNavigation = _ref2 => {
+  let {
+    children,
+    className,
+    dark,
+    hasIcons,
+    items,
+    linkComponent,
+    listClassName,
+    navClassName,
+    ...props
+  } = _ref2;
+  return /*#__PURE__*/_react.default.createElement("div", _extends({
+    className: (0, _classnames.default)(className, {
+      "p-side-navigation--icons": hasIcons || getHasIcons(items),
+      "is-dark": dark
+    })
+  }, props), /*#__PURE__*/_react.default.createElement("nav", {
+    className: navClassName
+  }, children !== null && children !== void 0 ? children : generateItems(items, listClassName, linkComponent, dark)));
+};
+var _default = exports.default = SideNavigation;

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

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import SideNavigation from "./SideNavigation";
+declare const meta: Meta<typeof SideNavigation>;
+export default meta;
+type Story = StoryObj<typeof SideNavigation>;
+/**
+ * Menu items can be provided as links, text or custom components. To provide attributes to individual menus then each menu can be provided as a object containing an items array: `{ className: "menu-one", items: [...] }`.
+ */
+export declare const Default: Story;
+/**
+ * `children` can be provided instead of `items` in cases where custom content
+ * is required.
+ */
+export declare const CustomContent: Story;

package/dist/components/SideNavigation/SideNavigation.stories.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Default = exports.CustomContent = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Badge = _interopRequireDefault(require("../Badge"));
+var _SideNavigation = _interopRequireDefault(require("./SideNavigation"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const meta = {
+  component: _SideNavigation.default,
+  tags: ["autodocs"]
+};
+var _default = exports.default = meta;
+/**
+ * Menu items can be provided as links, text or custom components. To provide attributes to individual menus then each menu can be provided as a object containing an items array: `{ className: "menu-one", items: [...] }`.
+ */
+const Default = exports.Default = {
+  args: {
+    items: [{
+      className: "menu-one",
+      items: [{
+        icon: "drag",
+        label: "Models",
+        href: "/models",
+        status: /*#__PURE__*/_react.default.createElement(_Badge.default, {
+          value: 9,
+          isNegative: true
+        })
+      }, {
+        icon: "menu",
+        label: "Controllers",
+        nonInteractive: true
+      }, {
+        icon: "user",
+        label: "Permissions",
+        href: "/users"
+      }]
+    }, {
+      className: "menu-two",
+      items: [{
+        icon: "information",
+        label: "Docs",
+        href: "/docs"
+      }, {
+        label: "Logout",
+        href: "/logout"
+      }]
+    }]
+  }
+};
+
+/**
+ * `children` can be provided instead of `items` in cases where custom content
+ * is required.
+ */
+const CustomContent = exports.CustomContent = {
+  args: {
+    children: /*#__PURE__*/_react.default.createElement("div", null, "Custom menu content.")
+  }
+};

package/dist/components/SideNavigation/SideNavigationBase/SideNavigationBase.d.ts

@@ -0,0 +1,27 @@
+import React from "react";
+import type { PropsWithSpread } from "../../../types";
+import type { ComponentType, ElementType, ReactNode } from "react";
+export type Props<C> = PropsWithSpread<{
+    /**
+     * The component or element to use for the element e.g. `span` or `NavLink`.
+     */
+    component: ElementType | ComponentType<C>;
+    /**
+     * Whether to use the dark theme.
+     */
+    dark?: boolean;
+    /**
+     * The navigation item's icon.
+     */
+    icon?: string;
+    /**
+     * The navigation item's label.
+     */
+    label: ReactNode;
+    /**
+     * The navigation item's status.
+     */
+    status?: ReactNode;
+}, C>;
+declare const SideNavigationBase: <C>({ component: Component, dark, icon, label, status, ...props }: Props<C>) => React.JSX.Element;
+export default SideNavigationBase;

package/dist/components/SideNavigation/SideNavigationBase/SideNavigationBase.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Icon = _interopRequireDefault(require("../../Icon"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const SideNavigationBase = _ref => {
+  let {
+    component: Component,
+    dark,
+    icon,
+    label,
+    status,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(Component, props, icon ? /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    name: icon,
+    light: dark,
+    className: "p-side-navigation__icon"
+  }) : null, /*#__PURE__*/_react.default.createElement("span", {
+    className: "p-side-navigation__label"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "p-side-navigation__label"
+  }, label)), status ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "p-side-navigation__status"
+  }, status) : null);
+};
+var _default = exports.default = SideNavigationBase;

package/dist/components/SideNavigation/SideNavigationBase/index.d.ts

@@ -0,0 +1 @@
+export { default, type Props as SideNavigationBaseProps, } from "./SideNavigationBase";

package/dist/components/SideNavigation/SideNavigationBase/index.js

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

package/dist/components/SideNavigation/SideNavigationItem/SideNavigationItem.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import type { HTMLProps, PropsWithChildren } from "react";
+import type { SideNavigationLinkProps } from "../SideNavigationLink";
+import type { SideNavigationLinkDefaultElement } from "../SideNavigationLink";
+import { SideNavigationTextProps } from "../SideNavigationText";
+type ItemProps = {
+    /**
+     * The item content.
+     */
+    children: NonNullable<PropsWithChildren["children"]>;
+} & HTMLProps<HTMLLIElement>;
+type ContentProps<L = SideNavigationLinkDefaultElement> = SideNavigationLinkProps<L> | (SideNavigationTextProps & {
+    /**
+     * Whether this should be a content-only item.
+     */
+    nonInteractive: true;
+});
+export type Props<L = SideNavigationLinkDefaultElement> = ItemProps | ContentProps<L>;
+declare const SideNavigationItem: <L = SideNavigationLinkDefaultElement>(props: Props<L>) => React.JSX.Element;
+export default SideNavigationItem;

package/dist/components/SideNavigation/SideNavigationItem/SideNavigationItem.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _SideNavigationLink = _interopRequireDefault(require("../SideNavigationLink"));
+var _SideNavigationText = _interopRequireDefault(require("../SideNavigationText"));
+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 SideNavigationItem = props => {
+  let content;
+  let liProps = {};
+  if ("nonInteractive" in props) {
+    const {
+      nonInteractive: _,
+      ...textProps
+    } = props;
+    content = /*#__PURE__*/_react.default.createElement(_SideNavigationText.default, textProps);
+  } else if (!("children" in props)) {
+    content = /*#__PURE__*/_react.default.createElement(_SideNavigationLink.default, props);
+  } else {
+    ({
+      children: content,
+      ...liProps
+    } = props);
+  }
+  return /*#__PURE__*/_react.default.createElement("li", _extends({
+    className: "p-side-navigation__item"
+  }, liProps), content);
+};
+var _default = exports.default = SideNavigationItem;

package/dist/components/SideNavigation/SideNavigationItem/SideNavigationItem.stories.d.ts

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import SideNavigationItem from "./SideNavigationItem";
+declare const meta: Meta<typeof SideNavigationItem>;
+export default meta;
+type Story = StoryObj<typeof SideNavigationItem>;
+export declare const Default: Story;
+/**
+ * The navigation item can appear as a link and accept the props from [`SideNavigationLink`](/docs/components-sidenavigation-sidenavigationlink--docs).
+ */
+export declare const Links: Story;
+/**
+ * By providing the `nonInteractive` prop the navigation item will appear as a
+ * text entry and accept the props from
+ * [`SideNavigationText`](/docs/components-sidenavigation-sidenavigationtext--docs).
+ */
+export declare const Text: Story;
+/**
+ * The navigation item can display custom content by providing the `children` prop.
+ * In this case, any other attributes provided to the object will be given to
+ * the list item.
+ */
+export declare const CustomContent: Story;

package/dist/components/SideNavigation/SideNavigationItem/SideNavigationItem.stories.js

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Text = exports.Links = exports.Default = exports.CustomContent = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _SideNavigation = _interopRequireDefault(require("../SideNavigation"));
+var _SideNavigationItem = _interopRequireDefault(require("./SideNavigationItem"));
+var _SideNavigationText = _interopRequireDefault(require("../SideNavigationText"));
+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 meta = {
+  component: _SideNavigationItem.default,
+  render: args => /*#__PURE__*/_react.default.createElement(_SideNavigation.default, {
+    dark: false,
+    items: [{
+      items: [/*#__PURE__*/_react.default.createElement(_SideNavigationItem.default, _extends({}, args, {
+        dark: false
+      }))]
+    }]
+  }),
+  tags: ["autodocs"]
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  args: {
+    icon: "drag",
+    label: "Models",
+    href: "/models"
+  }
+};
+
+/**
+ * The navigation item can appear as a link and accept the props from [`SideNavigationLink`](/docs/components-sidenavigation-sidenavigationlink--docs).
+ */
+const Links = exports.Links = {
+  args: {
+    icon: "drag",
+    label: "Models",
+    href: "/models"
+  }
+};
+
+/**
+ * By providing the `nonInteractive` prop the navigation item will appear as a
+ * text entry and accept the props from
+ * [`SideNavigationText`](/docs/components-sidenavigation-sidenavigationtext--docs).
+ */
+const Text = exports.Text = {
+  args: {
+    icon: "drag",
+    label: "Models",
+    nonInteractive: true
+  }
+};
+
+/**
+ * The navigation item can display custom content by providing the `children` prop.
+ * In this case, any other attributes provided to the object will be given to
+ * the list item.
+ */
+const CustomContent = exports.CustomContent = {
+  args: {
+    className: "custom-class",
+    children: /*#__PURE__*/_react.default.createElement(_SideNavigationText.default, null, "This item has been given a custom class")
+  }
+};

package/dist/components/SideNavigation/SideNavigationItem/index.d.ts

@@ -0,0 +1 @@
+export { default, type Props as SideNavigationItemProps, } from "./SideNavigationItem";

package/dist/components/SideNavigation/SideNavigationItem/index.js

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

package/dist/components/SideNavigation/SideNavigationLink/SideNavigationLink.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import type { HTMLProps } from "react";
+import type { SideNavigationBaseProps } from "../SideNavigationBase";
+export type LinkDefaultElement = HTMLProps<HTMLAnchorElement>;
+export type Props<L = LinkDefaultElement> = Omit<SideNavigationBaseProps<L>, "component"> & {
+    /**
+     * The component or element to use for the link element e.g. `a` or `NavLink`.
+     * @default a
+     */
+    component?: SideNavigationBaseProps<L>["component"];
+};
+declare const SideNavigationLink: <L = LinkDefaultElement>({ component, ...props }: Props<L>) => React.JSX.Element;
+export default SideNavigationLink;

package/dist/components/SideNavigation/SideNavigationLink/SideNavigationLink.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _SideNavigationBase = _interopRequireDefault(require("../SideNavigationBase"));
+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 SideNavigationLink = _ref => {
+  let {
+    component,
+    ...props
+  } = _ref;
+  let className = null;
+  if ("className" in props && typeof props.className === "string") {
+    className = props.className;
+    delete props.className;
+  }
+  return /*#__PURE__*/_react.default.createElement(_SideNavigationBase.default, _extends({
+    className: (0, _classnames.default)("p-side-navigation__link", className),
+    component: component !== null && component !== void 0 ? component : "a"
+  }, props));
+};
+var _default = exports.default = SideNavigationLink;

package/dist/components/SideNavigation/SideNavigationLink/SideNavigationLink.stories.d.ts

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

package/dist/components/SideNavigation/SideNavigationLink/SideNavigationLink.stories.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Default = exports.CustomComponent = void 0;
+var _Badge = _interopRequireDefault(require("../../Badge"));
+var _SideNavigationLink = _interopRequireDefault(require("./SideNavigationLink"));
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const meta = {
+  component: _SideNavigationLink.default,
+  tags: ["autodocs"]
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  args: {
+    icon: "drag",
+    label: "Models",
+    status: /*#__PURE__*/_react.default.createElement(_Badge.default, {
+      value: 9,
+      isNegative: true
+    })
+  }
+};
+const CustomComponent = exports.CustomComponent = {
+  args: {
+    component: props => /*#__PURE__*/_react.default.createElement("button", props),
+    icon: "drag",
+    label: "Models"
+  }
+};

package/dist/components/SideNavigation/SideNavigationLink/index.d.ts

@@ -0,0 +1 @@
+export { default, type LinkDefaultElement as SideNavigationLinkDefaultElement, type Props as SideNavigationLinkProps, } from "./SideNavigationLink";

package/dist/components/SideNavigation/SideNavigationLink/index.js

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

package/dist/components/SideNavigation/SideNavigationText/SideNavigationText.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { HTMLProps } from "react";
+import type { SideNavigationBaseProps } from "../SideNavigationBase";
+export type TextDefaultElement = HTMLProps<HTMLSpanElement>;
+export type Props = Omit<SideNavigationBaseProps<TextDefaultElement>, "component" | "label">;
+declare const SideNavigationText: ({ children, className, ...props }: Props) => React.JSX.Element;
+export default SideNavigationText;

package/dist/components/SideNavigation/SideNavigationText/SideNavigationText.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _SideNavigationBase = _interopRequireDefault(require("../SideNavigationBase"));
+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 SideNavigationText = _ref => {
+  let {
+    children,
+    className,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_SideNavigationBase.default, _extends({
+    className: (0, _classnames.default)("p-side-navigation__text", className),
+    component: "span",
+    label: children
+  }, props));
+};
+var _default = exports.default = SideNavigationText;

package/dist/components/SideNavigation/SideNavigationText/SideNavigationText.stories.d.ts

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

package/dist/components/SideNavigation/SideNavigationText/SideNavigationText.stories.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Badge = _interopRequireDefault(require("../../Badge"));
+var _SideNavigationText = _interopRequireDefault(require("./SideNavigationText"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const meta = {
+  component: _SideNavigationText.default,
+  tags: ["autodocs"]
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  args: {
+    icon: "drag",
+    children: "Models",
+    status: /*#__PURE__*/_react.default.createElement(_Badge.default, {
+      value: 9,
+      isNegative: true
+    })
+  }
+};

package/dist/components/SideNavigation/SideNavigationText/index.d.ts

@@ -0,0 +1 @@
+export { default, type Props as SideNavigationTextProps, } from "./SideNavigationText";

package/dist/components/SideNavigation/SideNavigationText/index.js

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

package/dist/components/SideNavigation/index.d.ts

@@ -0,0 +1,5 @@
+export { default } from "./SideNavigation";
+export type { Props as SideNavigationProps } from "./SideNavigation";
+export { default as SideNavigationItem } from "./SideNavigationItem";
+export { default as SideNavigationText } from "./SideNavigationText";
+export { default as SideNavigationLink, type SideNavigationLinkDefaultElement, } from "./SideNavigationLink";

package/dist/components/SideNavigation/index.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "SideNavigationItem", {
+  enumerable: true,
+  get: function () {
+    return _SideNavigationItem.default;
+  }
+});
+Object.defineProperty(exports, "SideNavigationLink", {
+  enumerable: true,
+  get: function () {
+    return _SideNavigationLink.default;
+  }
+});
+Object.defineProperty(exports, "SideNavigationText", {
+  enumerable: true,
+  get: function () {
+    return _SideNavigationText.default;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _SideNavigation.default;
+  }
+});
+var _SideNavigation = _interopRequireDefault(require("./SideNavigation"));
+var _SideNavigationItem = _interopRequireDefault(require("./SideNavigationItem"));
+var _SideNavigationText = _interopRequireDefault(require("./SideNavigationText"));
+var _SideNavigationLink = _interopRequireDefault(require("./SideNavigationLink"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/index.d.ts

@@ -31,12 +31,17 @@ export { default as Notification, NotificationSeverity, } from "./components/Not
 export { NotificationConsumer, NotificationProvider, useNotify, info, success, failure, queue, } from "./components/NotificationProvider";
 export { default as LoginPageLayout } from "./components/LoginPageLayout";
 export { default as Pagination } from "./components/Pagination";
+export { default as Panel } from "./components/Panel";
 export { default as PasswordToggle } from "./components/PasswordToggle";
 export { default as RadioInput } from "./components/RadioInput";
 export { default as Row } from "./components/Row";
 export { default as SearchAndFilter } from "./components/SearchAndFilter";
 export { default as SearchBox } from "./components/SearchBox";
 export { default as Select } from "./components/Select";
+export { default as SideNavigation } from "./components/SideNavigation";
+export { default as SideNavigationItem } from "./components/SideNavigation/SideNavigationItem";
+export { default as SideNavigationLink } from "./components/SideNavigation/SideNavigationLink";
+export { default as SideNavigationText } from "./components/SideNavigation/SideNavigationText";
 export { default as Slider } from "./components/Slider";
 export { default as Switch } from "./components/Switch";
 export { default as Spinner } from "./components/Spinner";
@@ -82,11 +87,16 @@ export type { NotificationProps } from "./components/Notification";
 export type { NotificationAction, NotificationType, QueuedNotification, NotificationHelper, } from "./components/NotificationProvider";
 export type { LoginPageLayoutProps } from "./components/LoginPageLayout";
 export type { PaginationProps } from "./components/Pagination";
+export type { PanelProps } from "./components/Panel";
 export type { RadioInputProps } from "./components/RadioInput";
 export type { RowProps } from "./components/Row";
 export type { SearchAndFilterProps } from "./components/SearchAndFilter";
 export type { SearchBoxProps } from "./components/SearchBox";
 export type { SelectProps } from "./components/Select";
+export type { SideNavigationProps } from "./components/SideNavigation";
+export type { SideNavigationItemProps } from "./components/SideNavigation/SideNavigationItem";
+export type { SideNavigationLinkProps } from "./components/SideNavigation/SideNavigationLink";
+export type { SideNavigationTextProps } from "./components/SideNavigation/SideNavigationText";
 export type { SliderProps } from "./components/Slider";
 export type { SpinnerProps } from "./components/Spinner";
 export type { StatusLabelProps } from "./components/StatusLabel";

package/dist/index.js

@@ -46,12 +46,17 @@ var _exportNames = {
   queue: true,
   LoginPageLayout: true,
   Pagination: true,
+  Panel: true,
   PasswordToggle: true,
   RadioInput: true,
   Row: true,
   SearchAndFilter: true,
   SearchBox: true,
   Select: true,
+  SideNavigation: true,
+  SideNavigationItem: true,
+  SideNavigationLink: true,
+  SideNavigationText: true,
   Slider: true,
   Switch: true,
   Spinner: true,
@@ -302,6 +307,12 @@ Object.defineProperty(exports, "Pagination", {
     return _Pagination.default;
   }
 });
+Object.defineProperty(exports, "Panel", {
+  enumerable: true,
+  get: function () {
+    return _Panel.default;
+  }
+});
 Object.defineProperty(exports, "PasswordToggle", {
   enumerable: true,
   get: function () {
@@ -338,6 +349,30 @@ Object.defineProperty(exports, "Select", {
     return _Select.default;
   }
 });
+Object.defineProperty(exports, "SideNavigation", {
+  enumerable: true,
+  get: function () {
+    return _SideNavigation.default;
+  }
+});
+Object.defineProperty(exports, "SideNavigationItem", {
+  enumerable: true,
+  get: function () {
+    return _SideNavigationItem.default;
+  }
+});
+Object.defineProperty(exports, "SideNavigationLink", {
+  enumerable: true,
+  get: function () {
+    return _SideNavigationLink.default;
+  }
+});
+Object.defineProperty(exports, "SideNavigationText", {
+  enumerable: true,
+  get: function () {
+    return _SideNavigationText.default;
+  }
+});
 Object.defineProperty(exports, "Slider", {
   enumerable: true,
   get: function () {
@@ -574,12 +609,17 @@ var _Notification = _interopRequireWildcard(require("./components/Notification")
 var _NotificationProvider = require("./components/NotificationProvider");
 var _LoginPageLayout = _interopRequireDefault(require("./components/LoginPageLayout"));
 var _Pagination = _interopRequireDefault(require("./components/Pagination"));
+var _Panel = _interopRequireDefault(require("./components/Panel"));
 var _PasswordToggle = _interopRequireDefault(require("./components/PasswordToggle"));
 var _RadioInput = _interopRequireDefault(require("./components/RadioInput"));
 var _Row = _interopRequireDefault(require("./components/Row"));
 var _SearchAndFilter = _interopRequireDefault(require("./components/SearchAndFilter"));
 var _SearchBox = _interopRequireDefault(require("./components/SearchBox"));
 var _Select = _interopRequireDefault(require("./components/Select"));
+var _SideNavigation = _interopRequireDefault(require("./components/SideNavigation"));
+var _SideNavigationItem = _interopRequireDefault(require("./components/SideNavigation/SideNavigationItem"));
+var _SideNavigationLink = _interopRequireDefault(require("./components/SideNavigation/SideNavigationLink"));
+var _SideNavigationText = _interopRequireDefault(require("./components/SideNavigation/SideNavigationText"));
 var _Slider = _interopRequireDefault(require("./components/Slider"));
 var _Switch = _interopRequireDefault(require("./components/Switch"));
 var _Spinner = _interopRequireDefault(require("./components/Spinner"));

package/dist/types/index.d.ts

@@ -35,3 +35,4 @@ export type TSFixMe = any;
  * defined in EnumLike.
  */
 export type ValueOf<T> = T[keyof T];
+export type ExclusiveProps<A, B> = (A & Partial<Record<keyof B, never>>) | (B & Partial<Record<keyof A, never>>);

package/dist/utils.d.ts

@@ -1,4 +1,5 @@
 import { NavLink, NavLinkAnchor, NavLinkButton } from "./components/Navigation";
+import { ReactNode } from "react";
 export declare const IS_DEV: boolean;
 /**
  * Find substring and wrap in <strong /> tag
@@ -20,3 +21,7 @@ export declare const isNavigationAnchor: (link: NavLink) => link is NavLinkAncho
  * @param link - The navigation item.
  */
 export declare const isNavigationButton: (link: NavLink) => link is NavLinkButton;
+/**
+ * A typeguard for whether an element is a ReactNode.
+ */
+export declare const isReactNode: (element: unknown) => element is ReactNode;

package/dist/utils.js

@@ -3,7 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isNavigationButton = exports.isNavigationAnchor = exports.highlightSubString = exports.IS_DEV = void 0;
+exports.isReactNode = exports.isNavigationButton = exports.isNavigationAnchor = exports.highlightSubString = exports.IS_DEV = void 0;
+var _react = require("react");
 const IS_DEV = exports.IS_DEV = process.env.NODE_ENV === "development";
 
 /**
@@ -40,4 +41,10 @@ const isNavigationAnchor = link => !!link.url;
  */
 exports.isNavigationAnchor = isNavigationAnchor;
 const isNavigationButton = link => !link.url;
-exports.isNavigationButton = isNavigationButton;
+
+/**
+ * A typeguard for whether an element is a ReactNode.
+ */
+exports.isNavigationButton = isNavigationButton;
+const isReactNode = element => /*#__PURE__*/(0, _react.isValidElement)(element);
+exports.isReactNode = isReactNode;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "0.56.0",
+  "version": "0.58.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": "Huw Wilkins <huw.wilkins@canonical.com>",