@canonical/react-components 0.57.0 → 0.59.0

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

@@ -0,0 +1,218 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Navigation = exports.ExternalStates = exports.Default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Form = _interopRequireDefault(require("../Form"));
+var _Input = _interopRequireDefault(require("../Input"));
+var _Button = _interopRequireDefault(require("../Button"));
+var _Row = _interopRequireDefault(require("../Row"));
+var _Col = _interopRequireDefault(require("../Col"));
+var _ApplicationLayout = _interopRequireDefault(require("./ApplicationLayout"));
+var _AppAside = _interopRequireDefault(require("./AppAside"));
+var _Panel = _interopRequireDefault(require("../Panel"));
+var _Icon = _interopRequireDefault(require("../Icon"));
+var _SideNavigation = _interopRequireDefault(require("../SideNavigation"));
+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; }
+/* eslint-disable react-hooks/rules-of-hooks */
+
+const meta = {
+  component: _ApplicationLayout.default,
+  tags: ["autodocs"]
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  render: () => {
+    const [showAside, setShowAside] = (0, _react.useState)(true);
+    const [asidePinned, setAsidePinned] = (0, _react.useState)(false);
+    return /*#__PURE__*/_react.default.createElement(_ApplicationLayout.default, {
+      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: "/"
+      },
+      navItems: [{
+        items: [{
+          icon: "drag",
+          label: "Models",
+          href: "/models"
+        }, {
+          icon: "menu",
+          label: "Controllers",
+          href: "/controllers"
+        }, {
+          icon: "user",
+          label: "Permissions",
+          href: "/users"
+        }]
+      }],
+      aside: showAside ? /*#__PURE__*/_react.default.createElement(_AppAside.default, {
+        title: "Aside panel",
+        pinned: asidePinned
+      }, /*#__PURE__*/_react.default.createElement(_Panel.default, {
+        controls: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
+          onClick: () => setAsidePinned(!asidePinned),
+          dense: true,
+          className: "u-no-margin"
+        }, "Pin aside"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+          appearance: "base",
+          className: "u-no-margin--bottom",
+          hasIcon: true,
+          onClick: () => {
+            setShowAside(false);
+            setAsidePinned(false);
+          }
+        }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+          name: "close"
+        }, "Close")))
+      }, /*#__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")))))) : null,
+      status: /*#__PURE__*/_react.default.createElement(_Button.default, {
+        onClick: () => setShowAside(!showAside),
+        dense: true,
+        appearance: "base",
+        className: "u-no-margin"
+      }, "Toggle aside")
+    }, /*#__PURE__*/_react.default.createElement(_Panel.default, {
+      title: "Application Layout"
+    }, /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, {
+      size: 12
+    }, "Content"))));
+  }
+};
+
+/**
+ * The pinned and collapsed states can be handled externally if you need access
+ * to these outside the application layout.
+ */
+const ExternalStates = exports.ExternalStates = {
+  render: () => {
+    const [menuPinned, setMenuPinned] = (0, _react.useState)(false);
+    const [menuCollapsed, setMenuCollapsed] = (0, _react.useState)(true);
+    return /*#__PURE__*/_react.default.createElement(_ApplicationLayout.default, {
+      menuPinned: menuPinned,
+      onPinMenu: setMenuPinned,
+      menuCollapsed: menuCollapsed,
+      onCollapseMenu: setMenuCollapsed,
+      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: "/"
+      },
+      navItems: [{
+        items: [{
+          icon: "drag",
+          label: "Models",
+          href: "/models"
+        }, {
+          icon: "menu",
+          label: "Controllers",
+          href: "/controllers"
+        }, {
+          icon: "user",
+          label: "Permissions",
+          href: "/users"
+        }]
+      }]
+    }, /*#__PURE__*/_react.default.createElement(_Panel.default, {
+      title: "Application Layout"
+    }, /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, {
+      size: 12
+    }, "Content"))));
+  }
+};
+
+/**
+ * Menu items can either be provided as an array given to `navItems` or when
+ * more control is needed then by proving `sideNavigation`.
+ *
+ * For more details about how to provide navigation items see the
+ * [`SideNavigation`](/docs/components-sidenavigation--docs) docs.
+ */
+const Navigation = exports.Navigation = {
+  render: () => {
+    const [menuPinned, setMenuPinned] = (0, _react.useState)(false);
+    const [menuCollapsed, setMenuCollapsed] = (0, _react.useState)(true);
+    return /*#__PURE__*/_react.default.createElement(_ApplicationLayout.default, {
+      menuPinned: menuPinned,
+      onPinMenu: setMenuPinned,
+      menuCollapsed: menuCollapsed,
+      onCollapseMenu: setMenuCollapsed,
+      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: "/"
+      },
+      sideNavigation: /*#__PURE__*/_react.default.createElement(_SideNavigation.default, {
+        items: [{
+          items: [{
+            icon: "drag",
+            label: "Models",
+            href: "/models"
+          }, {
+            icon: "menu",
+            label: "Controllers",
+            href: "/controllers"
+          }, {
+            icon: "user",
+            label: "Permissions",
+            href: "/users"
+          }]
+        }]
+      })
+    }, /*#__PURE__*/_react.default.createElement(_Panel.default, {
+      title: "Application Layout"
+    }, /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, {
+      size: 12
+    }, "Content"))));
+  }
+};

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

@@ -0,0 +1,7 @@
+export { default, type Props as ApplicationLayoutProps, } from "./ApplicationLayout";
+export { default as AppAside, type AppAsideProps } from "./AppAside";
+export { default as Application, type ApplicationProps } from "./Application";
+export { default as AppMain, type AppMainProps } from "./AppMain";
+export { default as AppNavigation, type AppNavigationProps, } from "./AppNavigation";
+export { default as AppNavigationBar, type AppNavigationBarProps, } from "./AppNavigationBar";
+export { default as AppStatus, type AppStatusProps } from "./AppStatus";

package/dist/components/ApplicationLayout/index.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "AppAside", {
+  enumerable: true,
+  get: function () {
+    return _AppAside.default;
+  }
+});
+Object.defineProperty(exports, "AppMain", {
+  enumerable: true,
+  get: function () {
+    return _AppMain.default;
+  }
+});
+Object.defineProperty(exports, "AppNavigation", {
+  enumerable: true,
+  get: function () {
+    return _AppNavigation.default;
+  }
+});
+Object.defineProperty(exports, "AppNavigationBar", {
+  enumerable: true,
+  get: function () {
+    return _AppNavigationBar.default;
+  }
+});
+Object.defineProperty(exports, "AppStatus", {
+  enumerable: true,
+  get: function () {
+    return _AppStatus.default;
+  }
+});
+Object.defineProperty(exports, "Application", {
+  enumerable: true,
+  get: function () {
+    return _Application.default;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _ApplicationLayout.default;
+  }
+});
+var _ApplicationLayout = _interopRequireDefault(require("./ApplicationLayout"));
+var _AppAside = _interopRequireDefault(require("./AppAside"));
+var _Application = _interopRequireDefault(require("./Application"));
+var _AppMain = _interopRequireDefault(require("./AppMain"));
+var _AppNavigation = _interopRequireDefault(require("./AppNavigation"));
+var _AppNavigationBar = _interopRequireDefault(require("./AppNavigationBar"));
+var _AppStatus = _interopRequireDefault(require("./AppStatus"));
+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;