@canonical/react-components 1.2.4 → 1.3.0

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

@@ -1,26 +0,0 @@
-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.stories.d.ts

@@ -1,12 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import AppNavigation from "./AppNavigation";
-declare const meta: Meta<typeof AppNavigation>;
-export default meta;
-type Story = StoryObj<typeof AppNavigation>;
-/**
- * In most common cases an `AppNavigation` should contain a `<Panel>` and `<SideNavigation>`.
- *
- * `AppNavigation` should be a direct child of an `<Application>` or when using `ApplicationLayout`
- * it will wrap `navItems` and `sideNavigation`.
- */
-export declare const Default: Story;

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

@@ -1,104 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _Application = _interopRequireDefault(require("../Application"));
-var _AppMain = _interopRequireDefault(require("../AppMain"));
-var _Button = _interopRequireDefault(require("../../Button"));
-var _Icon = _interopRequireDefault(require("../../Icon"));
-var _Panel = _interopRequireDefault(require("../../Panel"));
-var _SideNavigation = _interopRequireDefault(require("../../SideNavigation"));
-var _Strip = _interopRequireDefault(require("../../Strip"));
-var _AppNavigation = _interopRequireDefault(require("./AppNavigation"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-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 && {}.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() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } /* eslint-disable react-hooks/rules-of-hooks */
-const meta = {
-  component: _AppNavigation.default,
-  tags: ["autodocs"]
-};
-var _default = exports.default = meta;
-/**
- * In most common cases an `AppNavigation` should contain a `<Panel>` and `<SideNavigation>`.
- *
- * `AppNavigation` should be a direct child of an `<Application>` or when using `ApplicationLayout`
- * it will wrap `navItems` and `sideNavigation`.
- */
-const Default = exports.Default = {
-  render: args => {
-    const [pinned, setPinned] = (0, _react.useState)(false);
-    const [collapsed, setCollapsed] = (0, _react.useState)(true);
-    return /*#__PURE__*/_react.default.createElement(_Application.default, null, /*#__PURE__*/_react.default.createElement(_AppNavigation.default, _extends({}, args, {
-      pinned: pinned,
-      collapsed: collapsed
-    }), /*#__PURE__*/_react.default.createElement(_Panel.default, {
-      dark: true,
-      controls: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
-        hasIcon: true,
-        appearance: "base",
-        className: (0, _classnames.default)("u-no-margin u-hide--medium", {
-          "is-dark": true
-        }),
-        onClick: evt => {
-          setCollapsed(true);
-          // The menu stays open while its content has focus, so the
-          // close button must blur to actually close the menu.
-          evt.currentTarget.blur();
-        }
-      }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-        name: "close",
-        className: (0, _classnames.default)({
-          "is-light": true
-        })
-      }, "Close menu")), /*#__PURE__*/_react.default.createElement(_Button.default, {
-        hasIcon: true,
-        appearance: "base",
-        className: (0, _classnames.default)("u-no-margin u-hide--small", {
-          "is-dark": true
-        }),
-        onClick: () => {
-          setPinned(!pinned);
-        }
-      }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-        name: pinned ? "close" : "pin",
-        className: (0, _classnames.default)({
-          "is-light": true
-        })
-      }, pinned ? "Unpin menu" : "Pin menu"))),
-      controlsClassName: "u-hide--large",
-      stickyHeader: true,
-      logo: {
-        icon: "https://assets.ubuntu.com/v1/7144ec6d-logo-jaas-icon.svg",
-        name: "https://assets.ubuntu.com/v1/2e04d794-logo-jaas.svg",
-        nameAlt: "JAAS",
-        href: "/"
-      }
-    }, /*#__PURE__*/_react.default.createElement(_SideNavigation.default, {
-      dark: true,
-      items: [{
-        items: [{
-          icon: "drag",
-          label: "Models",
-          href: "/models"
-        }, {
-          icon: "menu",
-          label: "Controllers",
-          href: "/controllers"
-        }, {
-          icon: "user",
-          label: "Permissions",
-          href: "/permissions"
-        }]
-      }]
-    }))), /*#__PURE__*/_react.default.createElement(_AppMain.default, null, /*#__PURE__*/_react.default.createElement(_Strip.default, null, /*#__PURE__*/_react.default.createElement("p", null, "These behaviours are only available at smaller screen sizes:"), /*#__PURE__*/_react.default.createElement(_Button.default, {
-      onClick: () => setPinned(!pinned)
-    }, "Pin"), /*#__PURE__*/_react.default.createElement(_Button.default, {
-      onClick: () => setCollapsed(!collapsed)
-    }, "Toggle"))));
-  }
-};

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

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

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

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

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

@@ -1,15 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import AppNavigationBar from "./AppNavigationBar";
-declare const meta: Meta<typeof AppNavigationBar>;
-export default meta;
-type Story = StoryObj<typeof AppNavigationBar>;
-/**
- * In most common cases an `AppNavigationBar` should contain a `<Panel>`.
- *
- * `AppNavigationBar` should be a direct child of an `<Application>` or when using `ApplicationLayout`
- * it will already be included.
- *
- * The toggle state should control the collapsed state of `AppNavigation`.
- */
-export declare const Default: Story;
-export declare const States: Story;

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

@@ -1,52 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.States = exports.Default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _Application = _interopRequireDefault(require("../Application"));
-var _AppMain = _interopRequireDefault(require("../AppMain"));
-var _Panel = _interopRequireDefault(require("../../Panel"));
-var _Strip = _interopRequireDefault(require("../../Strip"));
-var _AppNavigationBar = _interopRequireDefault(require("./AppNavigationBar"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-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 && {}.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: _AppNavigationBar.default,
-  tags: ["autodocs"]
-};
-var _default = exports.default = meta;
-/**
- * In most common cases an `AppNavigationBar` should contain a `<Panel>`.
- *
- * `AppNavigationBar` should be a direct child of an `<Application>` or when using `ApplicationLayout`
- * it will already be included.
- *
- * The toggle state should control the collapsed state of `AppNavigation`.
- */
-const Default = exports.Default = {
-  args: {
-    children: "AppNavigation"
-  }
-};
-const States = exports.States = {
-  render: args => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const [collapsed, setCollapsed] = (0, _react.useState)(true);
-    return /*#__PURE__*/_react.default.createElement(_Application.default, null, /*#__PURE__*/_react.default.createElement(_AppNavigationBar.default, args, /*#__PURE__*/_react.default.createElement(_Panel.default, {
-      dark: true,
-      logo: {
-        icon: "https://assets.ubuntu.com/v1/7144ec6d-logo-jaas-icon.svg",
-        name: "https://assets.ubuntu.com/v1/2e04d794-logo-jaas.svg",
-        nameAlt: "JAAS",
-        href: "/"
-      },
-      toggle: {
-        label: "Menu",
-        onClick: () => setCollapsed(!collapsed)
-      }
-    })), /*#__PURE__*/_react.default.createElement(_AppMain.default, null, /*#__PURE__*/_react.default.createElement(_Strip.default, null, /*#__PURE__*/_react.default.createElement("p", null, "Reduce your window size to mobile to see the navigation bar."), /*#__PURE__*/_react.default.createElement("p", null, "Pass the collapsed state to the main menu:", " ", /*#__PURE__*/_react.default.createElement("code", null, "<AppNavigation collapsed={".concat(collapsed, "} />"))))));
-  }
-};

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

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

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

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

package/dist/components/ApplicationLayout/AppStatus/AppStatus.stories.d.ts

@@ -1,13 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import AppStatus from "./AppStatus";
-declare const meta: Meta<typeof AppStatus>;
-export default meta;
-type Story = StoryObj<typeof AppStatus>;
-/**
- * `AppStatus` can contain a `<Panel>` to display the content as intended in the
- * application layout.
- *
- * `AppStatus` should be a direct child of an `<Application>` or when using `ApplicationLayout`
- * it will automatically wrap the content passed to the `status` prop.
- */
-export declare const Default: Story;

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

@@ -1,41 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Application = _interopRequireDefault(require("../Application"));
-var _Button = _interopRequireDefault(require("../../Button"));
-var _Panel = _interopRequireDefault(require("../../Panel"));
-var _AppStatus = _interopRequireDefault(require("./AppStatus"));
-var _AppMain = _interopRequireDefault(require("../AppMain"));
-var _Strip = _interopRequireDefault(require("../../Strip"));
-var _Spinner = _interopRequireDefault(require("../../Spinner"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const meta = {
-  component: _AppStatus.default,
-  tags: ["autodocs"]
-};
-var _default = exports.default = meta;
-/**
- * `AppStatus` can contain a `<Panel>` to display the content as intended in the
- * application layout.
- *
- * `AppStatus` should be a direct child of an `<Application>` or when using `ApplicationLayout`
- * it will automatically wrap the content passed to the `status` prop.
- */
-const Default = exports.Default = {
-  render: args => {
-    return /*#__PURE__*/_react.default.createElement(_Application.default, null, /*#__PURE__*/_react.default.createElement(_AppMain.default, null, /*#__PURE__*/_react.default.createElement(_Strip.default, null, /*#__PURE__*/_react.default.createElement("p", null, "Scroll to the bottom to see the status bar."))), /*#__PURE__*/_react.default.createElement(_AppStatus.default, args, /*#__PURE__*/_react.default.createElement(_Panel.default, {
-      wrapContent: false
-    }, /*#__PURE__*/_react.default.createElement("p", {
-      className: "u-no-margin--bottom"
-    }, /*#__PURE__*/_react.default.createElement(_Spinner.default, null), " Update in progress...", " ", /*#__PURE__*/_react.default.createElement(_Button.default, {
-      appearance: "base",
-      onClick: () => {},
-      dense: true,
-      className: "u-no-margin"
-    }, "Retry")))));
-  }
-};

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

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

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

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

package/dist/components/ApplicationLayout/Application/Application.stories.d.ts

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

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

@@ -1,16 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Default = void 0;
-var _Application = _interopRequireDefault(require("./Application"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const meta = {
-  component: _Application.default,
-  tags: ["autodocs"]
-};
-var _default = exports.default = meta;
-const Default = exports.Default = {
-  args: {}
-};

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

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

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

@@ -1,89 +0,0 @@
-import React from "react";
-import type { PropsWithSpread } from "../../types";
-import type { ReactNode } from "react";
-import { type HTMLProps, type PropsWithChildren } from "react";
-import type { PanelProps } from "../Panel";
-import type { PanelLogoDefaultElement } from "../Panel";
-import type { ExclusiveProps } from "../../types";
-import type { SideNavigationProps } from "../SideNavigation";
-import type { SideNavigationLinkDefaultElement } from "../SideNavigation/SideNavigationLink/index";
-export type BaseProps<NI = SideNavigationLinkDefaultElement, PL = PanelLogoDefaultElement> = PropsWithSpread<{
-    /**
-     * The aside panel. This prop puts the panel in the correct position inside the
-     * application layout DOM structure, but does not wrap the content in an aside,
-     * so the content provided to this prop should include an `<AppAside>` or equivalent.
-     */
-    aside?: ReactNode;
-    /**
-     * The content for the main area.
-     */
-    children?: PropsWithChildren["children"];
-    /**
-     * Whether to use the dark theme.
-     * @default true
-     */
-    dark?: boolean;
-    /**
-     * The logo to appear in the navigation panels.
-     */
-    logo?: PanelProps<PL>["logo"];
-    /**
-     * The component to use to render links inside the navigation e.g. when
-     * using react-router you'd pass `Link` to this prop.
-     */
-    navLinkComponent?: SideNavigationProps<NI>["linkComponent"];
-    /**
-     * Whether the navigation menu should be collapsed.
-     */
-    menuCollapsed?: boolean;
-    /**
-     * Whether the navigation menu should be pinned.
-     */
-    menuPinned?: boolean;
-    /**
-     * A function that is called to collapse the navigation menu.
-     */
-    onCollapseMenu?: (menuCollapsed: boolean) => void;
-    /**
-     * A function that is called to pin the navigation menu.
-     */
-    onPinMenu?: (menuPinned: boolean) => void;
-    /**
-     * The content to appear inside the status area.
-     */
-    status?: ReactNode;
-    /**
-     * Classes to apply to the navigation bar.
-     */
-    navigationBarClassName?: string;
-    /**
-     * Classes to apply to the navigation menu.
-     */
-    navigationClassName?: string;
-    /**
-     * Classes to apply to the main area.
-     */
-    mainClassName?: string;
-    /**
-     * Classes to apply to the status area.
-     */
-    statusClassName?: string;
-}, HTMLProps<HTMLDivElement>>;
-export type Props<NI = SideNavigationLinkDefaultElement, PL = PanelLogoDefaultElement> = BaseProps<NI, PL> & ExclusiveProps<{
-    navItems?: SideNavigationProps<NI>["items"];
-}, {
-    sideNavigation?: ReactNode;
-}>;
-/**
- * This is a [React](https://reactjs.org/) component for the Vanilla
- * [Application Layout](https://vanillaframework.io/docs/layouts/application).
- *
- * This component combines the various sub-components that make up the
- * Application Layout to make it easier to consume. For some applications this
- * component maybe not be flexible enough, in which case you may choose to use
- * the sub-components directly. Be aware that the application layout requires a
- * specific structure and states to function correctly so there will be a
- * trade-off when using the sub-components directly.
- */
-declare const ApplicationLayout: <NI = SideNavigationLinkDefaultElement, PL = PanelLogoDefaultElement>({ aside, children, dark, logo, mainClassName, menuCollapsed, menuPinned, navigationBarClassName, navigationClassName, navItems, navLinkComponent, onCollapseMenu, onPinMenu, sideNavigation, status, statusClassName, ...props }: Props<NI, PL>) => React.JSX.Element;
-export default ApplicationLayout;

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

@@ -1,24 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import ApplicationLayout from "./ApplicationLayout";
-declare const meta: Meta<typeof ApplicationLayout>;
-export default meta;
-type Story = StoryObj<typeof ApplicationLayout>;
-export declare const Default: Story;
-/**
- * The pinned and collapsed states can be handled externally if you need access
- * to these outside the application layout.
- */
-export declare const ExternalStates: Story;
-/**
- * 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.
- */
-export declare const Navigation: Story;
-/**
- * App navigation can also be completely opted out of, for some
- * particular scenarios (e.g. login page, error pages).
- */
-export declare const NoNavigation: Story;