@canonical/react-components 1.2.4 → 1.3.0

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

@@ -1,232 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.NoNavigation = 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(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; }
-/* 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, {
-        pinned: asidePinned
-      }, /*#__PURE__*/_react.default.createElement(_Panel.default, {
-        title: "Aside panel",
-        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"))));
-  }
-};
-
-/**
- * App navigation can also be completely opted out of, for some
- * particular scenarios (e.g. login page, error pages).
- */
-const NoNavigation = exports.NoNavigation = {
-  render: () => {
-    return /*#__PURE__*/_react.default.createElement(_ApplicationLayout.default, null, /*#__PURE__*/_react.default.createElement(_Panel.default, {
-      title: "Application Layout with no navigation"
-    }, /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, {
-      size: 12
-    }, "Content"))));
-  }
-};

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

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

@@ -1,31 +0,0 @@
-import type { HTMLProps } from "react";
-import type { ClassName, PropsWithSpread } from "../../types";
-export type Props = PropsWithSpread<{
-    /**
-     * Optional classes to add to the wrapping element.
-     */
-    className?: ClassName;
-    /**
-     * The URL for the next link.
-     */
-    nextURL?: string;
-    /**
-     * The label for the next link.
-     */
-    nextLabel?: string;
-    /**
-     * The URL for the previous link.
-     */
-    previousURL?: string;
-    /**
-     * The label for the previous link.
-     */
-    previousLabel?: string;
-}, HTMLProps<HTMLElement>>;
-/**
- * This is a [React](https://reactjs.org/) component for the Vanilla [Article pagination](https://docs.vanillaframework.io/patterns/article-pagination/).
- *
- * The article pagination component should be used to navigate from one article to the next, or previous, in chronological order.
- */
-declare const ArticlePagination: ({ className, nextURL, nextLabel, previousURL, previousLabel, ...props }: Props) => JSX.Element;
-export default ArticlePagination;

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

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

package/dist/components/ArticlePagination/ArticlePagination.stories.js

@@ -1,22 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Default = void 0;
-var _ArticlePagination = _interopRequireDefault(require("./ArticlePagination"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const meta = {
-  component: _ArticlePagination.default,
-  tags: ["autodocs"]
-};
-var _default = exports.default = meta;
-const Default = exports.Default = {
-  name: "Default",
-  args: {
-    nextLabel: "Consectetur adipisicing elit",
-    nextURL: "#next",
-    previousLabel: "Lorem ipsum dolor sit amet",
-    previousURL: "#previous"
-  }
-};

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

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

package/dist/components/Badge/Badge.d.ts

@@ -1,34 +0,0 @@
-import { HTMLProps } from "react";
-import type { ClassName, PropsWithSpread, ValueOf } from "../../types";
-export declare const BadgeType: {
-    readonly ROUNDED_LARGE_NUMBER: "ROUNDED_LARGE_NUMBER";
-    readonly UNDEFINED_LARGE_NUMBER: "UNDEFINED_LARGE_NUMBER";
-};
-/**
- * The props for the Badge component.
- */
-export type Props = PropsWithSpread<{
-    /**
-     * Numeric value to be displayed.
-     */
-    value: number;
-    /**
-     * The type of the badge component.
-     */
-    badgeType?: ValueOf<typeof BadgeType>;
-    /**
-     * The appearance of the badge.
-     */
-    isNegative?: boolean;
-    /**
-     * Optional class(es) to give to the badge.
-     */
-    className?: ClassName;
-}, HTMLProps<HTMLSpanElement>>;
-/**
- * This is a [React](https://reactjs.org/) component for the Vanilla [Badge](https://vanillaframework.io/docs/patterns/badge).
- *
- * It can be used to display a numeric values.
- */
-declare const Badge: ({ value, badgeType, className, isNegative, ...spanProps }: Props) => JSX.Element;
-export default Badge;

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

@@ -1,15 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import Badge from "./Badge";
-declare const meta: Meta<typeof Badge>;
-export default meta;
-type Story = StoryObj<typeof Badge>;
-export declare const Default: Story;
-export declare const ColourCoding: Story;
-/**
- * When the amount of items is only relevant for small values, this variant should be used. When the value grows further than 999, the badge should show "999+".
- */
-export declare const UndefinedLargeNumber: Story;
-/**
- * When the value of the badge represents a type of information where differences between large amounts of items are relevant, it should include a decimal unit prefix and round the value.
- */
-export declare const RoundedLargeNumber: Story;

package/dist/components/Badge/Badge.stories.js

@@ -1,62 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.UndefinedLargeNumber = exports.RoundedLargeNumber = exports.Default = exports.ColourCoding = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Badge = _interopRequireWildcard(require("./Badge"));
-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 _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const meta = {
-  component: _Badge.default,
-  tags: ["autodocs"],
-  argTypes: {
-    badgeType: {
-      control: {
-        options: _Badge.BadgeType,
-        type: "select"
-      }
-    }
-  },
-  args: {
-    badgeType: _Badge.BadgeType.UNDEFINED_LARGE_NUMBER
-  }
-};
-var _default = exports.default = meta;
-const Default = exports.Default = {
-  name: "Default",
-  args: {
-    value: 9
-  }
-};
-const ColourCoding = exports.ColourCoding = {
-  render: () => /*#__PURE__*/_react.default.createElement(_Badge.default, {
-    value: 9,
-    isNegative: true
-  }),
-  name: "Colour Coding"
-};
-
-/**
- * When the amount of items is only relevant for small values, this variant should be used. When the value grows further than 999, the badge should show "999+".
- */
-const UndefinedLargeNumber = exports.UndefinedLargeNumber = {
-  render: () => /*#__PURE__*/_react.default.createElement(_Badge.default, {
-    value: 1000,
-    badgeType: _Badge.BadgeType.UNDEFINED_LARGE_NUMBER
-  }),
-  name: "Undefined Large Number"
-};
-
-/**
- * When the value of the badge represents a type of information where differences between large amounts of items are relevant, it should include a decimal unit prefix and round the value.
- */
-const RoundedLargeNumber = exports.RoundedLargeNumber = {
-  render: () => /*#__PURE__*/_react.default.createElement(_Badge.default, {
-    value: 1234,
-    badgeType: _Badge.BadgeType.ROUNDED_LARGE_NUMBER
-  }),
-  name: "Rounded Large Number"
-};

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

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

package/dist/components/Button/Button.d.ts

@@ -1,64 +0,0 @@
-import type { ButtonHTMLAttributes, ComponentType, ElementType, MouseEventHandler, ReactNode } from "react";
-import type { ClassName, ValueOf } from "../../types";
-export declare const ButtonAppearance: {
-    readonly BASE: "base";
-    readonly BRAND: "brand";
-    readonly DEFAULT: "";
-    readonly LINK: "link";
-    readonly NEGATIVE: "negative";
-    readonly POSITIVE: "positive";
-};
-/**
- * The type of the Button props.
- * @template P - The type of the props if providing a component to `element`
- */
-export type Props<P = null> = {
-    /**
-     * The appearance of the button.
-     */
-    appearance?: ValueOf<typeof ButtonAppearance> | string;
-    /**
-     * The content of the button.
-     */
-    children?: ReactNode;
-    /**
-     * Optional class(es) to pass to the button element.
-     */
-    className?: ClassName;
-    /**
-     * Whether the button should have dense padding.
-     */
-    dense?: boolean;
-    /**
-     * Whether the button should be disabled.
-     */
-    disabled?: boolean;
-    /**
-     * Optional element or component to use instead of `button`.
-     */
-    element?: ElementType | ComponentType<P>;
-    /**
-     * Whether the button has an icon in the content.
-     */
-    hasIcon?: boolean;
-    /**
-     * Whether the button should display inline.
-     */
-    inline?: boolean;
-    /**
-     * Function for handling button click event.
-     */
-    onClick?: MouseEventHandler<HTMLButtonElement>;
-    /**
-     * Whether the button should be small.
-     */
-    small?: boolean;
-} & (Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onClick"> | P);
-/**
- * This is a [React](https://reactjs.org/) component for the Vanilla [Button](https://docs.vanillaframework.io/patterns/buttons/).
- *
- * Buttons are clickable elements used to perform an action, they can be used for buttons and link elements.
- * @template P - The type of the props if providing a component to `element`
- */
-declare const Button: <P>({ appearance, children, className, dense, disabled, element: Component, hasIcon, inline, onClick, small, ...buttonProps }: Props<P>) => JSX.Element;
-export default Button;

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

@@ -1,32 +0,0 @@
-import { HTMLProps } from "react";
-import { Meta, StoryObj } from "@storybook/react";
-import Button from "./Button";
-declare const meta: Meta<typeof Button>;
-export default meta;
-type Story<P = null> = StoryObj<typeof Button<P>>;
-export declare const Default: Story;
-export declare const DefaultDisabled: Story;
-export declare const Base: Story;
-export declare const BaseDisabled: Story;
-export declare const Link: {
-    name: string;
-    args: {
-        children: string;
-        appearance: string;
-        element: string;
-        href: string;
-    };
-};
-export declare const LinkDisabled: Story<HTMLProps<HTMLAnchorElement>>;
-export declare const Positive: Story;
-export declare const PositiveDisabled: Story;
-export declare const Negative: Story;
-export declare const NegativeDisabled: Story;
-export declare const Brand: Story;
-export declare const BrandDisabled: Story;
-export declare const Inline: Story;
-export declare const Dense: Story;
-export declare const Small: Story;
-export declare const Icon: Story;
-export declare const IconText: Story;
-export declare const IconWithTooltip: Story;