@canonical/react-components 1.2.4 → 1.3.0

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

@@ -1,62 +0,0 @@
-"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(e) { return e && e.__esModule ? e : { default: e }; }
-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

@@ -1,31 +0,0 @@
-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;
-    /**
-     * A ref to pass to the element.
-     */
-    forwardRef?: React.Ref<C> | null;
-}, C>;
-declare const SideNavigationBase: <C>({ component: Component, dark, icon, label, status, forwardRef, ...props }: Props<C>) => React.JSX.Element;
-export default SideNavigationBase;

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

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

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

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

@@ -1,22 +0,0 @@
-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

@@ -1,70 +0,0 @@
-"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(e) { return e && e.__esModule ? e : { default: e }; }
-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); }
-const meta = {
-  component: _SideNavigationItem.default,
-  render: args => /*#__PURE__*/_react.default.createElement(_SideNavigation.default, {
-    dark: false,
-    items: [{
-      items: [/*#__PURE__*/_react.default.createElement(_SideNavigationItem.default, _extends({
-        key: "item"
-      }, 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

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

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

@@ -1,21 +0,0 @@
-import React from "react";
-import type { HTMLProps, ReactNode } from "react";
-import type { SideNavigationBaseProps } from "../SideNavigationBase";
-export type LinkDefaultElement = HTMLProps<HTMLAnchorElement>;
-export type Props<L = LinkDefaultElement, E = HTMLAnchorElement> = Partial<Omit<SideNavigationBaseProps<L>, "component">> & {
-    /**
-     * The navigation item's label.
-     */
-    label: ReactNode;
-    /**
-     * The component or element to use for the link element e.g. `a` or `NavLink`.
-     * @default a
-     */
-    component?: SideNavigationBaseProps<L>["component"];
-    /**
-     * A ref to pass to the link element.
-     */
-    forwardRef?: React.Ref<E> | null;
-};
-declare const SideNavigationLink: <L = LinkDefaultElement, E = HTMLAnchorElement>({ component, forwardRef, ...props }: Props<L, E>) => React.JSX.Element;
-export default SideNavigationLink;

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

@@ -1,7 +0,0 @@
-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

@@ -1,32 +0,0 @@
-"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(e) { return e && e.__esModule ? e : { default: e }; }
-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

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

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

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

@@ -1,6 +0,0 @@
-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

@@ -1,25 +0,0 @@
-"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(e) { return e && e.__esModule ? e : { default: e }; }
-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

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

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

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

@@ -1,62 +0,0 @@
-import type { ChangeEventHandler, HTMLProps, ReactNode } from "react";
-import type { PropsWithSpread } from "../../types";
-export declare const FILLED_COLOR = "#0066CC";
-export declare const EMPTY_COLOR = "#D9D9D9";
-export type Props = PropsWithSpread<{
-    /**
-     * Field caution message.
-     */
-    caution?: ReactNode;
-    /**
-     * Whether to disable the slider and input (if showInput is true).
-     */
-    disabled?: boolean;
-    /**
-     * Field error message.
-     */
-    error?: ReactNode;
-    /**
-     * Field help message.
-     */
-    help?: ReactNode;
-    /**
-     * Field id. Only passed to range input, not to number input.
-     */
-    id?: string;
-    /**
-     * Whether to disable only the input, but not the slider.
-     */
-    inputDisabled?: boolean;
-    /**
-     * Field label.
-     */
-    label?: ReactNode;
-    /**
-     * Maximum value of the slider.
-     */
-    max: number;
-    /**
-     * Minimum value of the slider.
-     */
-    min: number;
-    /**
-     * Change event handler.
-     */
-    onChange: ChangeEventHandler<HTMLInputElement>;
-    /**
-     * Whether the field is required for the form to submit.
-     */
-    required?: boolean;
-    /**
-     * Whether to show a number input with the numerical value next to the slider.
-     */
-    showInput?: boolean;
-}, HTMLProps<HTMLInputElement>>;
-/**
- * This is the [React](https://reactjs.org/) component for the Vanilla [Slider](https://vanillaframework.io/docs/patterns/slider).
- *
- * Sliders should be used to let a user specify a numeric value between a defined
-minimum and maximum value, however the precise value is not especially important.
- */
-export declare const Slider: ({ caution, disabled, error, help, id, inputDisabled, label, max, min, onChange, required, showInput, ...inputProps }: Props) => JSX.Element;
-export default Slider;

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

@@ -1,10 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import Slider from "./Slider";
-declare const meta: Meta<typeof Slider>;
-export default meta;
-type Story = StoryObj<typeof Slider>;
-export declare const Default: Story;
-/**
- * You can also optionally provide a numeric representation of the slider value.
- */
-export declare const WithInput: Story;

package/dist/components/Slider/Slider.stories.js

@@ -1,74 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.WithInput = exports.Default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _Slider = _interopRequireDefault(require("./Slider"));
-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); }
-const Template = args => {
-  const [selectedValue, setSelectedValue] = (0, _react.useState)(50);
-  return /*#__PURE__*/_react.default.createElement(_Slider.default, _extends({}, args, {
-    onChange: e => setSelectedValue(Number(e.target.value)),
-    value: selectedValue
-  }));
-};
-const meta = {
-  component: _Slider.default,
-  render: Template,
-  tags: ["autodocs"],
-  argTypes: {
-    caution: {
-      control: {
-        type: "text"
-      }
-    },
-    error: {
-      control: {
-        type: "text"
-      }
-    },
-    help: {
-      control: {
-        type: "text"
-      }
-    },
-    label: {
-      control: {
-        type: "text"
-      }
-    }
-  }
-};
-var _default = exports.default = meta;
-const Default = exports.Default = {
-  render: Template.bind({}),
-  name: "Default",
-  args: {
-    disabled: false,
-    label: "Volume",
-    max: 100,
-    min: 0,
-    showInput: false
-  }
-};
-
-/**
- * You can also optionally provide a numeric representation of the slider value.
- */
-const WithInput = exports.WithInput = {
-  render: Template.bind({}),
-  name: "With input",
-  args: {
-    disabled: false,
-    inputDisabled: false,
-    label: "Volume",
-    max: 100,
-    min: 0,
-    showInput: true
-  }
-};

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

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

package/dist/components/Spinner/Spinner.d.ts

@@ -1,29 +0,0 @@
-import { HTMLProps } from "react";
-import type { ClassName } from "../../types";
-export type Props = {
-    /**
-     * Optional class(es) to pass to the wrapping span element.
-     */
-    className?: ClassName;
-    /**
-     * Whether the spinner should have a light appearance.
-     */
-    isLight?: boolean;
-    /**
-     * Text to display next to the spinner.
-     */
-    text?: string;
-    /**
-     * What the role of the spinner should be.
-     */
-    role?: string;
-    /**
-     * The politeness setting of the spinner alert.
-     */
-    ariaLive?: "assertive" | "off" | "polite";
-} & HTMLProps<HTMLSpanElement>;
-/**
- * This is a [React](https://reactjs.org/) component for the Vanilla [Spin](https://docs.vanillaframework.io/settings/animation-settings/#spin) animation.
- */
-declare const Spinner: ({ className, text, isLight, ariaLive, role, ...props }: Props) => JSX.Element;
-export default Spinner;

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

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

package/dist/components/Spinner/Spinner.stories.js

@@ -1,28 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Text = exports.Default = exports.Assertive = void 0;
-var _Spinner = _interopRequireDefault(require("./Spinner"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const meta = {
-  component: _Spinner.default,
-  tags: ["autodocs"]
-};
-var _default = exports.default = meta;
-const Default = exports.Default = {
-  name: "Default"
-};
-const Text = exports.Text = {
-  name: "Text",
-  args: {
-    text: "Loading..."
-  }
-};
-const Assertive = exports.Assertive = {
-  name: "Assertive",
-  args: {
-    ariaLive: "assertive"
-  }
-};

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

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

package/dist/components/StatusLabel/StatusLabel.d.ts

@@ -1,33 +0,0 @@
-import type { HTMLProps, ReactNode } from "react";
-import { ClassName, PropsWithSpread, ValueOf } from "../../types";
-export declare const StatusLabelAppearance: {
-    readonly CAUTION: "caution";
-    readonly DEFAULT: "";
-    readonly INFORMATION: "information";
-    readonly NEGATIVE: "negative";
-    readonly POSITIVE: "positive";
-};
-/**
- * The type of the StatusLabel props.
- */
-export type Props = PropsWithSpread<{
-    /**
-     * The appearance of the label.
-     */
-    appearance?: ValueOf<typeof StatusLabelAppearance> | string;
-    /**
-     * The content of the label.
-     */
-    children?: ReactNode;
-    /**
-     * Optional class(es) to pass to the wrapping element.
-     */
-    className?: ClassName;
-}, HTMLProps<HTMLDivElement>>;
-/**
- * This is a [React](https://reactjs.org/) component for the Vanilla [Label](https://vanillaframework.io/docs/patterns/labels).
- *
- * Labels are static elements which you can apply to signify status, tags or any other information you find useful.
- */
-declare const StatusLabel: ({ appearance, children, className, ...labelProps }: Props) => JSX.Element;
-export default StatusLabel;

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

@@ -1,10 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import StatusLabel from "./StatusLabel";
-declare const meta: Meta<typeof StatusLabel>;
-export default meta;
-type Story = StoryObj<typeof StatusLabel>;
-export declare const Default: Story;
-export declare const Positive: Story;
-export declare const Caution: Story;
-export declare const Negative: Story;
-export declare const Information: Story;