@canonical/react-components 1.6.0 → 1.7.0

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

@@ -0,0 +1,9 @@
+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/esm/components/Link/Link.stories.js

@@ -0,0 +1,41 @@
+import React from "react";
+import Link from "./Link";
+import Strip from "../Strip";
+var meta = {
+  component: Link,
+  tags: ["autodocs"],
+  argTypes: {
+    children: {
+      control: {
+        type: "text"
+      }
+    }
+  }
+};
+export default meta;
+export var Default = {
+  name: "Default",
+  args: {
+    children: "Fast, secure and simple, Ubuntu powers millions of PCs worldwide"
+  }
+};
+export var Soft = {
+  render: () => /*#__PURE__*/React.createElement(Link, {
+    soft: true
+  }, "Learn about MAAS"),
+  name: "Soft"
+};
+export var Inverted = {
+  render: () => /*#__PURE__*/React.createElement(Strip, {
+    type: "dark"
+  }, /*#__PURE__*/React.createElement(Link, {
+    inverted: true
+  }, "Package & publish your app")),
+  name: "Inverted"
+};
+export var BackToTop = {
+  render: () => /*#__PURE__*/React.createElement(Link, {
+    top: true
+  }, "Back to top"),
+  name: "Back to top"
+};

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

@@ -0,0 +1 @@
+export {};

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

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

package/dist/esm/components/Link/index.js

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

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

@@ -0,0 +1,36 @@
+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/esm/components/List/List.js

@@ -0,0 +1,110 @@
+var _excluded = ["title", "className", "content", "titleElement"],
+  _excluded2 = ["title", "className", "content"],
+  _excluded3 = ["className", "detailed", "divided", "inline", "isDark", "items", "middot", "stretch", "split", "stepped", "ticked"];
+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); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import classNames from "classnames";
+import React from "react";
+var generateItems = _ref => {
+  var {
+    items,
+    ticked,
+    inline,
+    middot,
+    stepped
+  } = _ref;
+  return items.map((item, i) => {
+    var body;
+    var title;
+    var className;
+    var content;
+    var TitleComponent = "h3";
+    var liProps;
+    if ( /*#__PURE__*/React.isValidElement(item) || typeof item === "string" || typeof item === "number") {
+      content = item;
+    } else if (item && typeof item === "object" && "content" in item) {
+      if ("titleElement" in item) {
+        var _item = item;
+        ({
+          title,
+          className,
+          content,
+          titleElement: TitleComponent = "h3"
+        } = _item);
+        liProps = _objectWithoutProperties(_item, _excluded);
+        _item;
+      } else {
+        var _item2 = item;
+        ({
+          title,
+          className,
+          content
+        } = _item2);
+        liProps = _objectWithoutProperties(_item2, _excluded2);
+        _item2;
+      }
+    }
+    if (stepped) {
+      body = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TitleComponent, {
+        className: "p-stepped-list__title"
+      }, title), /*#__PURE__*/React.createElement("div", {
+        className: "p-stepped-list__content"
+      }, content));
+    } else {
+      body = content;
+    }
+    return /*#__PURE__*/React.createElement("li", _extends({
+      className: classNames(className, {
+        "p-list__item": !inline && !stepped,
+        "p-inline-list__item": inline,
+        "p-stepped-list__item": stepped,
+        "is-ticked": ticked
+      }),
+      key: i
+    }, liProps), body, middot ? " " : null);
+  });
+};
+
+/**
+ * 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.
+ */
+var List = _ref2 => {
+  var {
+      className,
+      detailed,
+      divided,
+      inline,
+      isDark,
+      items,
+      middot,
+      stretch,
+      split,
+      stepped,
+      ticked
+    } = _ref2,
+    props = _objectWithoutProperties(_ref2, _excluded3);
+  var Component = stepped ? "ol" : "ul";
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    className: classNames(className, {
+      "p-list": !divided && !inline && !middot && !stretch && !stepped,
+      "p-list--divided": divided,
+      "p-inline-list": inline,
+      "p-inline-list--middot": middot,
+      "p-inline-list--stretch": stretch,
+      "p-stepped-list": stepped && !detailed,
+      "p-stepped-list--detailed": stepped && detailed,
+      "is-dark": isDark,
+      "is-split": split
+    })
+  }, props), generateItems({
+    items,
+    ticked,
+    inline: inline || middot || stretch,
+    middot,
+    stepped
+  }));
+};
+export default List;

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

@@ -0,0 +1,15 @@
+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/esm/components/List/List.stories.js

@@ -0,0 +1,115 @@
+import React from "react";
+import List from "./List";
+import StatusLabel from "../StatusLabel";
+var meta = {
+  component: List,
+  tags: ["autodocs"],
+  argTypes: {
+    items: {
+      control: {
+        disable: true
+      }
+    },
+    stepped: {
+      control: {
+        disable: true
+      }
+    }
+  }
+};
+export default meta;
+export var Default = {
+  name: "Default",
+  args: {
+    items: ["Digital signage", "Robotics", "Gateways"]
+  }
+};
+export var Ticked = {
+  render: () => /*#__PURE__*/React.createElement(List, {
+    items: ["Hardware guidance and sizing", "Fixed-price deployment", "Reference architecture"],
+    ticked: true
+  }),
+  name: "Ticked"
+};
+export var HorizontalDivider = {
+  render: () => /*#__PURE__*/React.createElement(List, {
+    items: ["Single-command install and upgrade", "Postgres database for reliable state", "High availability for all services"],
+    divided: true
+  }),
+  name: "Horizontal divider"
+};
+export var TickedWithHorizontalDivider = {
+  render: () => /*#__PURE__*/React.createElement(List, {
+    items: ["Balance compute load in the cloud", "Optimise for specific workloads", "Assess overcommit ratios"],
+    divided: true,
+    ticked: true
+  }),
+  name: "Ticked with horizontal divider"
+};
+export var Inline = {
+  render: () => /*#__PURE__*/React.createElement(List, {
+    items: ["Community", "Careers", "Press centre"],
+    inline: true
+  }),
+  name: "Inline"
+};
+export var Middot = {
+  render: () => /*#__PURE__*/React.createElement(List, {
+    items: ["Legal information", "Data privacy", "Report a bug on this site"],
+    middot: true
+  }),
+  name: "Middot"
+};
+export var Stretch = {
+  render: () => /*#__PURE__*/React.createElement(List, {
+    items: [{
+      content: /*#__PURE__*/React.createElement("h3", null, "Documentation")
+    }, {
+      content: /*#__PURE__*/React.createElement(StatusLabel, {
+        appearance: "positive"
+      }, "New"),
+      className: "u-vertically-center u-align--right"
+    }],
+    stretch: true
+  }),
+  name: "Stretch"
+};
+export var VerticalStepped = {
+  render: () => /*#__PURE__*/React.createElement(List, {
+    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"
+};
+export var HorizontalStepped = {
+  render: () => /*#__PURE__*/React.createElement(List, {
+    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"
+};
+export var Split = {
+  render: () => /*#__PURE__*/React.createElement(List, {
+    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/esm/components/List/List.test.d.ts

@@ -0,0 +1 @@
+export {};

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

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

package/dist/esm/components/List/index.js

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

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

@@ -0,0 +1,6 @@
+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/esm/components/Loader/Loader.js

@@ -0,0 +1,14 @@
+import React from "react";
+import Spinner from "../Spinner";
+import { IS_DEV } from "../../utils";
+
+/**
+ * @deprecated Loader component is deprecated. Use Spinner component instead.
+ */
+var Loader = props => {
+  if (IS_DEV) {
+    console.warn("The Loader component has been renamed to Spinner and will be removed in a future release. https://canonical.github.io/react-components/?path=/story/spinner--default-story");
+  }
+  return /*#__PURE__*/React.createElement(Spinner, props);
+};
+export default Loader;

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

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

package/dist/esm/components/Loader/index.js

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

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

@@ -0,0 +1,17 @@
+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/esm/components/LoginPageLayout/LoginPageLayout.js

@@ -0,0 +1,63 @@
+import _pt from "prop-types";
+import React, { useLayoutEffect } from "react";
+import Card from "../Card";
+import Col from "../Col";
+import Navigation from "../Navigation";
+import Row from "../Row";
+import { Theme } from "../../enums";
+import "./LoginPageLayout.scss";
+var defaultLogo = {
+  src: "https://assets.ubuntu.com/v1/82818827-CoF_white.svg",
+  title: "Canonical",
+  url: "/"
+};
+/**
+ * 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.
+ */
+var LoginPageLayout = _ref => {
+  var {
+    children,
+    title,
+    logo = defaultLogo
+  } = _ref;
+  useLayoutEffect(() => {
+    var _document$querySelect;
+    var bodyInitiallyContainsIsPaper = (_document$querySelect = document.querySelector("body")) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.classList.contains("is-paper");
+    if (!bodyInitiallyContainsIsPaper) {
+      var _document$querySelect2;
+      (_document$querySelect2 = document.querySelector("body")) === null || _document$querySelect2 === void 0 || _document$querySelect2.classList.add("is-paper");
+    }
+    return () => {
+      if (!bodyInitiallyContainsIsPaper) {
+        var _document$querySelect3;
+        (_document$querySelect3 = document.querySelector("body")) === null || _document$querySelect3 === void 0 || _document$querySelect3.classList.remove("is-paper");
+      }
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement(Row, {
+    className: "p-strip page-row"
+  }, /*#__PURE__*/React.createElement(Col, {
+    emptyLarge: 4,
+    size: 6
+  }, /*#__PURE__*/React.createElement(Card, {
+    className: "u-no-padding page-card"
+  }, /*#__PURE__*/React.createElement(Navigation, {
+    logo: logo,
+    theme: Theme.DARK
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "p-card__inner page-inner"
+  }, /*#__PURE__*/React.createElement("h1", {
+    className: "p-heading--4"
+  }, title), /*#__PURE__*/React.createElement("div", null, children)))));
+};
+LoginPageLayout.propTypes = {
+  title: _pt.string.isRequired,
+  children: _pt.node,
+  logo: _pt.shape({
+    src: _pt.string.isRequired,
+    title: _pt.string.isRequired,
+    url: _pt.string.isRequired
+  })
+};
+export default LoginPageLayout;

package/dist/esm/components/LoginPageLayout/LoginPageLayout.scss

@@ -0,0 +1,19 @@
+@import "vanilla-framework";
+
+@media screen and (max-width: $breakpoint-small) {
+  .page-row {
+    padding: 0;
+  }
+
+  .page-card {
+    border: 0;
+  }
+
+  .is-paper {
+    background-color: #fff;
+  }
+}
+
+.page-inner {
+  padding: 1rem 2rem 2rem;
+}

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

@@ -0,0 +1,9 @@
+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/esm/components/LoginPageLayout/LoginPageLayout.stories.js

@@ -0,0 +1,51 @@
+import React from "react";
+import CodeSnippet from "../CodeSnippet/CodeSnippet";
+import Spinner from "../Spinner/Spinner";
+import LoginPageLayout from "./LoginPageLayout";
+var meta = {
+  component: LoginPageLayout,
+  tags: ["autodocs"]
+};
+export default meta;
+export var Default = {
+  args: {
+    title: "This is the title"
+  }
+};
+export var LoginPage = {
+  args: {
+    title: "Sign in",
+    children: /*#__PURE__*/React.createElement(Spinner, null)
+  }
+};
+export var ErrorPage = {
+  args: {
+    title: "Sign in failed",
+    children: /*#__PURE__*/React.createElement(CodeSnippet, {
+      blocks: [{
+        wrapLines: true,
+        code: /*#__PURE__*/React.createElement(React.Fragment, null, "An error occurred. Try signing in again.")
+      }]
+    })
+  }
+};
+export var RegistrationPage = {
+  args: {
+    title: "Sign up",
+    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", null, "Fill in the form below to create an account"), /*#__PURE__*/React.createElement("form", null, /*#__PURE__*/React.createElement("input", {
+      type: "text",
+      placeholder: "Username"
+    }), /*#__PURE__*/React.createElement("input", {
+      type: "email",
+      placeholder: "Email"
+    }), /*#__PURE__*/React.createElement("input", {
+      type: "password",
+      placeholder: "Password"
+    }), /*#__PURE__*/React.createElement("button", null, "Sign up"))),
+    logo: {
+      src: "https://anbox-cloud.io/static/logo.svg",
+      title: "Anbox Cloud",
+      url: "/"
+    }
+  }
+};

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

@@ -0,0 +1 @@
+export {};

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

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

package/dist/esm/components/LoginPageLayout/index.js

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

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

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