@canonical/react-components 0.58.0 → 0.59.1

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

@@ -0,0 +1,16 @@
+import { Meta, StoryObj } from "@storybook/react";
+import Icon from "./Icon";
+import "./Icon.stories.scss";
+declare const meta: Meta<typeof Icon>;
+export default meta;
+type Story = StoryObj<typeof Icon>;
+export declare const Base: Story;
+export declare const Default: Story;
+/**
+ * To use custom icons that are not included in Vanilla you need to provide your own icon styling following the `.p-icon--{name}` convention.
+ */
+export declare const Custom: Story;
+/**
+ * To use custom icons that provide the name of the social media icon following the `.p-icon--{name}` convention.
+ */
+export declare const Social: Story;

package/dist/components/Icon/Icon.stories.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Social = exports.Default = exports.Custom = exports.Base = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Icon = _interopRequireWildcard(require("./Icon"));
+require("./Icon.stories.scss");
+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 && Object.prototype.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(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const meta = {
+  component: _Icon.default,
+  tags: ["autodocs"]
+};
+var _default = exports.default = meta;
+const Base = exports.Base = {
+  name: "Base",
+  args: {
+    name: "facebook"
+  }
+};
+const Default = exports.Default = {
+  render: () => /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    name: _Icon.ICONS.plus
+  }),
+  name: "Default"
+};
+
+/**
+ * To use custom icons that are not included in Vanilla you need to provide your own icon styling following the `.p-icon--{name}` convention.
+ */
+const Custom = exports.Custom = {
+  render: () => /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    name: "custom"
+  }),
+  name: "Custom"
+};
+
+/**
+ * To use custom icons that provide the name of the social media icon following the `.p-icon--{name}` convention.
+ */
+const Social = exports.Social = {
+  render: () => /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    name: _Icon.ICONS.facebook
+  }),
+  name: "Social"
+};

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

@@ -61,5 +61,10 @@ export type Props = PropsWithSpread<{
      */
     wrapperClassName?: string;
 }, InputHTMLAttributes<HTMLInputElement>>;
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Input](https://docs.vanillaframework.io/base/forms/#input).
+ *
+ * An input field where the user can enter data, which can vary in many ways, depending on the type attribute.
+ */
 declare const Input: ({ caution, className, error, help, helpClassName, id, label, labelClassName, required, stacked, success, takeFocus, takeFocusDelay, type, wrapperClassName, ...inputProps }: Props) => JSX.Element;
 export default Input;

package/dist/components/Input/Input.js

@@ -17,6 +17,11 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
  * The props for the Input component.
  */
 
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Input](https://docs.vanillaframework.io/base/forms/#input).
+ *
+ * An input field where the user can enter data, which can vary in many ways, depending on the type attribute.
+ */
 const Input = _ref => {
   let {
     caution,

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

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

@@ -0,0 +1,148 @@
+"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(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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/Link/Link.d.ts

@@ -22,5 +22,10 @@ export type Props = PropsWithSpread<{
      */
     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.js

@@ -8,6 +8,11 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireDefault(require("react"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+/**
+ * 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.
+ */
 const Link = _ref => {
   let {
     children,

package/dist/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/components/Link/Link.stories.js

@@ -0,0 +1,48 @@
+"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(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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/List/List.d.ts

@@ -27,5 +27,10 @@ export type Props = {
     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.js

@@ -63,6 +63,12 @@ const generateItems = _ref => {
     }, 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.
+ */
 const List = _ref2 => {
   let {
     className,

package/dist/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/components/List/List.stories.js

@@ -0,0 +1,122 @@
+"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(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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/LoginPageLayout/LoginPageLayout.d.ts

@@ -9,5 +9,9 @@ export type Props = {
         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.js

@@ -20,6 +20,10 @@ const defaultLogo = {
   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.
+ */
 const LoginPageLayout = _ref => {
   let {
     children,

package/dist/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/components/LoginPageLayout/LoginPageLayout.stories.js

@@ -0,0 +1,58 @@
+"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(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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/MainTable/MainTable.d.ts

@@ -95,5 +95,8 @@ export type Props = PropsWithSpread<{
      */
     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;

package/dist/components/MainTable/MainTable.js

@@ -130,6 +130,10 @@ const sortRows = _ref5 => {
   }
   return sortedRows;
 };
+
+/**
+ * This is a [React](https://reactjs.org/) component to support many table use cases.
+ */
 const MainTable = _ref6 => {
   let {
     defaultSort,

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

@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from "@storybook/react";
+import MainTable from "./MainTable";
+declare const meta: Meta<typeof MainTable>;
+export default meta;
+type Story = StoryObj<typeof MainTable>;
+export declare const Default: Story;
+export declare const Sortable: Story;
+export declare const Expanding: Story;
+/**
+ * If the table cell may have overflowing content (such as contextual menu) use `hasOverflow` prop to avoid cropping it.
+ */
+export declare const Overflow: Story;
+export declare const Responsive: Story;
+export declare const Paginated: Story;
+export declare const Empty: Story;