@canonical/react-components 1.2.4 → 1.3.0

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

@@ -1,14 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import Input from "./Input";
-declare const meta: Meta<typeof Input>;
-export default meta;
-type Story = StoryObj<typeof Input>;
-export declare const TextInput: Story;
-export declare const Stacked: Story;
-export declare const Disabled: Story;
-export declare const Error: Story;
-export declare const Success: Story;
-export declare const Caution: Story;
-export declare const Required: Story;
-export declare const Checkbox: Story;
-export declare const RadioButton: Story;

package/dist/components/Input/Input.stories.js

@@ -1,148 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.TextInput = exports.Success = exports.Stacked = exports.Required = exports.RadioButton = exports.Error = exports.Disabled = exports.Checkbox = exports.Caution = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Input = _interopRequireDefault(require("./Input"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const meta = {
-  component: _Input.default,
-  tags: ["autodocs"],
-  argTypes: {
-    caution: {
-      control: {
-        type: "text"
-      }
-    },
-    error: {
-      control: {
-        type: "text"
-      }
-    },
-    help: {
-      control: {
-        type: "text"
-      }
-    },
-    helpClassName: {
-      control: {
-        type: "text"
-      }
-    },
-    label: {
-      control: {
-        type: "text"
-      }
-    },
-    success: {
-      control: {
-        type: "text"
-      }
-    },
-    id: {
-      control: {
-        disable: true
-      }
-    },
-    placeholder: {
-      control: {
-        type: "text"
-      }
-    }
-  }
-};
-var _default = exports.default = meta;
-const TextInput = exports.TextInput = {
-  name: "Text input",
-  args: {
-    type: "text",
-    id: "exampleTextInput2",
-    placeholder: "example@canonical.com",
-    label: "Email address",
-    help: "Additional description for the field",
-    helpClassName: "u-no-margin--bottom"
-  }
-};
-const Stacked = exports.Stacked = {
-  render: () => /*#__PURE__*/_react.default.createElement(_Input.default, {
-    type: "text",
-    id: "exampleTextInput3",
-    placeholder: "example@canonical.com",
-    stacked: true,
-    label: "Email address"
-  }),
-  name: "Stacked"
-};
-const Disabled = exports.Disabled = {
-  render: () => /*#__PURE__*/_react.default.createElement(_Input.default, {
-    type: "text",
-    id: "exampleTextInput4",
-    placeholder: "example@canonical.com",
-    disabled: true,
-    label: "Email address"
-  }),
-  name: "Disabled"
-};
-const Error = exports.Error = {
-  render: () => /*#__PURE__*/_react.default.createElement(_Input.default, {
-    type: "text",
-    id: "exampleTextInput5",
-    placeholder: "example@canonical.com",
-    error: "This field is required.",
-    label: "Email address"
-  }),
-  name: "Error"
-};
-const Success = exports.Success = {
-  render: () => /*#__PURE__*/_react.default.createElement(_Input.default, {
-    type: "text",
-    id: "exampleTextInput6",
-    placeholder: "example@canonical.com",
-    success: "Verified.",
-    label: "Email address"
-  }),
-  name: "Success"
-};
-const Caution = exports.Caution = {
-  render: () => /*#__PURE__*/_react.default.createElement(_Input.default, {
-    type: "text",
-    id: "exampleTextInput7",
-    placeholder: "example@canonical.com",
-    caution: "No validation is performed in preview mode.",
-    label: "Email address"
-  }),
-  name: "Caution"
-};
-const Required = exports.Required = {
-  render: () => /*#__PURE__*/_react.default.createElement(_Input.default, {
-    type: "text",
-    id: "exampleTextInput8",
-    placeholder: "example@canonical.com",
-    required: true,
-    label: "Email address"
-  }),
-  name: "Required"
-};
-const Checkbox = exports.Checkbox = {
-  render: () => /*#__PURE__*/_react.default.createElement(_Input.default, {
-    type: "checkbox",
-    id: "checkExample12",
-    defaultChecked: true,
-    label: "HTML"
-  }),
-  name: "Checkbox"
-};
-const RadioButton = exports.RadioButton = {
-  render: () => /*#__PURE__*/_react.default.createElement(_Input.default, {
-    label: "Linux",
-    type: "radio",
-    name: "RadioOptions",
-    id: "Radio12",
-    defaultValue: "option1",
-    defaultChecked: true,
-    help: "Ubuntu"
-  }),
-  name: "Radio button"
-};

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

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

package/dist/components/Label/Label.d.ts

@@ -1,25 +0,0 @@
-import type { LabelHTMLAttributes, ReactNode } from "react";
-import type { ClassName, PropsWithSpread } from "../../types";
-/**
- * The props for the Label component.
- */
-export type Props = PropsWithSpread<{
-    /**
-     * The label content.
-     */
-    children?: ReactNode;
-    /**
-     * Optional class(es) to give to the label element.
-     */
-    className?: ClassName;
-    /**
-     * The id of the input this label is connected to.
-     */
-    forId?: string;
-    /**
-     * Whether to apply required styling to the label.
-     */
-    required?: boolean;
-}, LabelHTMLAttributes<HTMLLabelElement>>;
-declare const Label: ({ children, className, forId, required, ...props }: Props) => JSX.Element;
-export default Label;

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

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

package/dist/components/Link/Link.d.ts

@@ -1,31 +0,0 @@
-import type { HTMLProps, ReactNode } from "react";
-import type { ClassName, PropsWithSpread } from "../../types";
-export type Props = PropsWithSpread<{
-    /**
-     * The content of the link.
-     */
-    children: ReactNode;
-    /**
-     * Optional class(es) to pass to the wrapping anchor element.
-     */
-    className?: ClassName;
-    /**
-     * Whether the link should have inverted styling.
-     */
-    inverted?: boolean;
-    /**
-     * Whether the link should have soft styling.
-     */
-    soft?: boolean;
-    /**
-     * Whether the link should have "back to top" styling.
-     */
-    top?: boolean;
-}, HTMLProps<HTMLAnchorElement>>;
-/**
- * This is a [React](https://reactjs.org/) component for the Vanilla [Link](https://docs.vanillaframework.io/patterns/links/).
- *
- * Links are used to embed actions or pathways to more information, allowing users to click their way from page to page.
- */
-declare const Link: ({ children, className, href, inverted, soft, top, ...props }: Props) => JSX.Element;
-export default Link;

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

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

package/dist/components/Link/Link.stories.js

@@ -1,48 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Soft = exports.Inverted = exports.Default = exports.BackToTop = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Link = _interopRequireDefault(require("./Link"));
-var _Strip = _interopRequireDefault(require("../Strip"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const meta = {
-  component: _Link.default,
-  tags: ["autodocs"],
-  argTypes: {
-    children: {
-      control: {
-        type: "text"
-      }
-    }
-  }
-};
-var _default = exports.default = meta;
-const Default = exports.Default = {
-  name: "Default",
-  args: {
-    children: "Fast, secure and simple, Ubuntu powers millions of PCs worldwide"
-  }
-};
-const Soft = exports.Soft = {
-  render: () => /*#__PURE__*/_react.default.createElement(_Link.default, {
-    soft: true
-  }, "Learn about MAAS"),
-  name: "Soft"
-};
-const Inverted = exports.Inverted = {
-  render: () => /*#__PURE__*/_react.default.createElement(_Strip.default, {
-    type: "dark"
-  }, /*#__PURE__*/_react.default.createElement(_Link.default, {
-    inverted: true
-  }, "Package & publish your app")),
-  name: "Inverted"
-};
-const BackToTop = exports.BackToTop = {
-  render: () => /*#__PURE__*/_react.default.createElement(_Link.default, {
-    top: true
-  }, "Back to top"),
-  name: "Back to top"
-};

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

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

package/dist/components/List/List.d.ts

@@ -1,36 +0,0 @@
-import type { HTMLProps, ReactNode } from "react";
-import { ClassName, Headings, PropsWithSpread } from "../../types";
-export type ListItem = ReactNode | PropsWithSpread<{
-    content: ReactNode;
-}, HTMLProps<HTMLLIElement>>;
-export type SteppedListItem = PropsWithSpread<{
-    content: ReactNode;
-    title: ReactNode;
-    titleElement?: Headings;
-}, HTMLProps<HTMLLIElement>>;
-export type Props = {
-    /**
-     * Optional class(es) to pass to the wrapping element.
-     */
-    className?: ClassName;
-    /**
-     * The list's items.
-     */
-    items: ListItem[] | SteppedListItem[];
-    detailed?: boolean;
-    divided?: boolean;
-    inline?: boolean;
-    isDark?: boolean;
-    middot?: boolean;
-    split?: boolean;
-    stepped?: boolean;
-    stretch?: boolean;
-    ticked?: boolean;
-} & Omit<HTMLProps<HTMLOListElement>, "type">;
-/**
- * This is a [React](https://reactjs.org/) component for the Vanilla [List](https://docs.vanillaframework.io/patterns/lists/).
- *
- * If you want to display lists in a way that is more visually distinctive than the standard `<ol>` and `<ul>`, we have 7 list styles at your disposal.
- */
-declare const List: ({ className, detailed, divided, inline, isDark, items, middot, stretch, split, stepped, ticked, ...props }: Props) => JSX.Element;
-export default List;

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

@@ -1,15 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import List from "./List";
-declare const meta: Meta<typeof List>;
-export default meta;
-type Story = StoryObj<typeof List>;
-export declare const Default: Story;
-export declare const Ticked: Story;
-export declare const HorizontalDivider: Story;
-export declare const TickedWithHorizontalDivider: Story;
-export declare const Inline: Story;
-export declare const Middot: Story;
-export declare const Stretch: Story;
-export declare const VerticalStepped: Story;
-export declare const HorizontalStepped: Story;
-export declare const Split: Story;

package/dist/components/List/List.stories.js

@@ -1,122 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.VerticalStepped = exports.TickedWithHorizontalDivider = exports.Ticked = exports.Stretch = exports.Split = exports.Middot = exports.Inline = exports.HorizontalStepped = exports.HorizontalDivider = exports.Default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _List = _interopRequireDefault(require("./List"));
-var _StatusLabel = _interopRequireDefault(require("../StatusLabel"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const meta = {
-  component: _List.default,
-  tags: ["autodocs"],
-  argTypes: {
-    items: {
-      control: {
-        disable: true
-      }
-    },
-    stepped: {
-      control: {
-        disable: true
-      }
-    }
-  }
-};
-var _default = exports.default = meta;
-const Default = exports.Default = {
-  name: "Default",
-  args: {
-    items: ["Digital signage", "Robotics", "Gateways"]
-  }
-};
-const Ticked = exports.Ticked = {
-  render: () => /*#__PURE__*/_react.default.createElement(_List.default, {
-    items: ["Hardware guidance and sizing", "Fixed-price deployment", "Reference architecture"],
-    ticked: true
-  }),
-  name: "Ticked"
-};
-const HorizontalDivider = exports.HorizontalDivider = {
-  render: () => /*#__PURE__*/_react.default.createElement(_List.default, {
-    items: ["Single-command install and upgrade", "Postgres database for reliable state", "High availability for all services"],
-    divided: true
-  }),
-  name: "Horizontal divider"
-};
-const TickedWithHorizontalDivider = exports.TickedWithHorizontalDivider = {
-  render: () => /*#__PURE__*/_react.default.createElement(_List.default, {
-    items: ["Balance compute load in the cloud", "Optimise for specific workloads", "Assess overcommit ratios"],
-    divided: true,
-    ticked: true
-  }),
-  name: "Ticked with horizontal divider"
-};
-const Inline = exports.Inline = {
-  render: () => /*#__PURE__*/_react.default.createElement(_List.default, {
-    items: ["Community", "Careers", "Press centre"],
-    inline: true
-  }),
-  name: "Inline"
-};
-const Middot = exports.Middot = {
-  render: () => /*#__PURE__*/_react.default.createElement(_List.default, {
-    items: ["Legal information", "Data privacy", "Report a bug on this site"],
-    middot: true
-  }),
-  name: "Middot"
-};
-const Stretch = exports.Stretch = {
-  render: () => /*#__PURE__*/_react.default.createElement(_List.default, {
-    items: [{
-      content: /*#__PURE__*/_react.default.createElement("h3", null, "Documentation")
-    }, {
-      content: /*#__PURE__*/_react.default.createElement(_StatusLabel.default, {
-        appearance: "positive"
-      }, "New"),
-      className: "u-vertically-center u-align--right"
-    }],
-    stretch: true
-  }),
-  name: "Stretch"
-};
-const VerticalStepped = exports.VerticalStepped = {
-  render: () => /*#__PURE__*/_react.default.createElement(_List.default, {
-    items: [{
-      title: "Log in to JAAS",
-      content: "Ensure you have an Ubuntu SSO account before contacting JAAS. Log in to JAAS now."
-    }, {
-      title: "Configure a model",
-      content: 'Applications are contained within models and are installed via charms. Configure your model by pressing the "Start a new model" button.'
-    }, {
-      title: "Credentials and SSH keys",
-      content: "After having selected a cloud, a form will appear for submitting your credentials to JAAS. The below resources are available if you need help with gathering credentials."
-    }],
-    stepped: true
-  }),
-  name: "Vertical stepped"
-};
-const HorizontalStepped = exports.HorizontalStepped = {
-  render: () => /*#__PURE__*/_react.default.createElement(_List.default, {
-    items: [{
-      title: "Log in to JAAS",
-      content: "Ensure you have an Ubuntu SSO account before contacting JAAS. Log in to JAAS now."
-    }, {
-      title: "Configure a model",
-      content: 'Applications are contained within models and are installed via charms. Configure your model by pressing the "Start a new model" button.'
-    }],
-    stepped: true,
-    detailed: true
-  }),
-  name: "Horizontal stepped"
-};
-const Split = exports.Split = {
-  render: () => /*#__PURE__*/_react.default.createElement(_List.default, {
-    items: ["Jointly shape the OpenStack architecture", "We help you plan your cloud hardware requirements", "We build OpenStack in your data center", "We operate the cloud to an SLA", "Transparent audit, logging, monitoring and management", "When your team is ready, we hand over the keys"],
-    divided: true,
-    split: true,
-    ticked: true
-  }),
-  name: "Split"
-};

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

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

package/dist/components/Loader/Loader.d.ts

@@ -1,6 +0,0 @@
-import type { SpinnerProps } from "../Spinner";
-/**
- * @deprecated Loader component is deprecated. Use Spinner component instead.
- */
-declare const Loader: (props: SpinnerProps) => JSX.Element;
-export default Loader;

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

@@ -1 +0,0 @@
-export { default } from "./Loader";

package/dist/components/LoginPageLayout/LoginPageLayout.d.ts

@@ -1,17 +0,0 @@
-import { FC, ReactNode } from "react";
-import "./LoginPageLayout.scss";
-export type Props = {
-    title: string;
-    children?: ReactNode;
-    logo?: {
-        src: string;
-        title: string;
-        url: string;
-    };
-};
-/**
- * This is a layout component that is used to display a page with a title and children.
- * The LoginPageLayout recommended usages are in the login flow like registration, sign up and error pages.
- */
-declare const LoginPageLayout: FC<Props>;
-export default LoginPageLayout;

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

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

package/dist/components/LoginPageLayout/LoginPageLayout.stories.js

@@ -1,58 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.RegistrationPage = exports.LoginPage = exports.ErrorPage = exports.Default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _CodeSnippet = _interopRequireDefault(require("../CodeSnippet/CodeSnippet"));
-var _Spinner = _interopRequireDefault(require("../Spinner/Spinner"));
-var _LoginPageLayout = _interopRequireDefault(require("./LoginPageLayout"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const meta = {
-  component: _LoginPageLayout.default,
-  tags: ["autodocs"]
-};
-var _default = exports.default = meta;
-const Default = exports.Default = {
-  args: {
-    title: "This is the title"
-  }
-};
-const LoginPage = exports.LoginPage = {
-  args: {
-    title: "Sign in",
-    children: /*#__PURE__*/_react.default.createElement(_Spinner.default, null)
-  }
-};
-const ErrorPage = exports.ErrorPage = {
-  args: {
-    title: "Sign in failed",
-    children: /*#__PURE__*/_react.default.createElement(_CodeSnippet.default, {
-      blocks: [{
-        wrapLines: true,
-        code: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "An error occurred. Try signing in again.")
-      }]
-    })
-  }
-};
-const RegistrationPage = exports.RegistrationPage = {
-  args: {
-    title: "Sign up",
-    children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", null, "Fill in the form below to create an account"), /*#__PURE__*/_react.default.createElement("form", null, /*#__PURE__*/_react.default.createElement("input", {
-      type: "text",
-      placeholder: "Username"
-    }), /*#__PURE__*/_react.default.createElement("input", {
-      type: "email",
-      placeholder: "Email"
-    }), /*#__PURE__*/_react.default.createElement("input", {
-      type: "password",
-      placeholder: "Password"
-    }), /*#__PURE__*/_react.default.createElement("button", null, "Sign up"))),
-    logo: {
-      src: "https://anbox-cloud.io/static/logo.svg",
-      title: "Anbox Cloud",
-      url: "/"
-    }
-  }
-};

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

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

package/dist/components/MainTable/MainTable.d.ts

@@ -1,102 +0,0 @@
-import type { HTMLProps, ReactNode } from "react";
-import type { ClassName, PropsWithSpread, SortDirection } from "../../types";
-import type { TableProps } from "../Table";
-import type { TableCellProps } from "../TableCell";
-export type MainTableHeader = PropsWithSpread<{
-    /**
-     * The content of the table header.
-     */
-    content?: ReactNode;
-    /**
-     * Optional classes to apply to the table header.
-     */
-    className?: ClassName;
-    /**
-     * A key to sort the rows by. It should match a key given to the row `sortData`.
-     */
-    sortKey?: string | null;
-    /**
-     * Replacement value for data-heading if content is not a string.
-     */
-    heading?: string;
-}, HTMLProps<HTMLTableHeaderCellElement>>;
-export type MainTableCell = PropsWithSpread<{
-    /**
-     * The content of the table cell.
-     */
-    content?: ReactNode;
-}, Omit<TableCellProps, "children">>;
-export type MainTableRow = PropsWithSpread<{
-    /**
-     * Optional class(es) to apply to the row.
-     */
-    className?: ClassName;
-    /**
-     * The columns in this row.
-     */
-    columns?: MainTableCell[];
-    /**
-     * Whether this row should display as expanded.
-     */
-    expanded?: boolean;
-    /**
-     * The content to display when this column is expanded.
-     */
-    expandedContent?: ReactNode;
-    /**
-     * An optional key to identify this table row.
-     */
-    key?: number | string | null;
-    /**
-     * An object of data for use when sorting the rows. The keys of this object
-     * should match the header sort keys.
-     */
-    sortData?: Record<string, unknown>;
-}, HTMLProps<HTMLTableRowElement>>;
-export type Props = PropsWithSpread<{
-    /**
-     * The default key to sort the rows by.
-     */
-    defaultSort?: MainTableHeader["sortKey"];
-    /**
-     * The default direction the row data should be sorted by.
-     */
-    defaultSortDirection?: SortDirection;
-    /**
-     * A message to display when there are no table rows.
-     */
-    emptyStateMsg?: ReactNode;
-    /**
-     * The header columns for this table.
-     */
-    headers?: MainTableHeader[];
-    /**
-     * A function that is called when the sort key is changed.
-     */
-    onUpdateSort?: (sortKey: MainTableHeader["sortKey"]) => void;
-    /**
-     * A number of rows to paginate by.
-     */
-    paginate?: number | null;
-    /**
-     * The rows to display in the table.
-     */
-    rows?: MainTableRow[];
-    /**
-     * Whether this table should be sortable.
-     */
-    sortable?: boolean;
-    /**
-     * A function to be used when sorting.
-     */
-    sortFunction?: (a: MainTableRow, b: MainTableRow, currentSortDirection: SortDirection, currentSortKey: MainTableHeader["sortKey"]) => -1 | 0 | 1;
-    /**
-     * A hidden caption to display on the table for screen readers
-     */
-    hiddenCaption?: string | null;
-}, TableProps>;
-/**
- * This is a [React](https://reactjs.org/) component to support many table use cases.
- */
-declare const MainTable: ({ defaultSort, defaultSortDirection, emptyStateMsg, expanding, headers, onUpdateSort, paginate, rows, responsive, sortable, sortFunction, hiddenCaption, ...props }: Props) => JSX.Element;
-export default MainTable;