@canonical/react-components 0.59.0 → 0.60.0

package/dist/components/Form/Form.stories.js

@@ -0,0 +1,179 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Validation = exports.Stacked = exports.Required = exports.Inline = exports.Fieldset = exports.Disabled = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Form = _interopRequireDefault(require("./Form"));
+var _Input = _interopRequireDefault(require("../Input"));
+var _Select = _interopRequireDefault(require("../Select"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const meta = {
+  component: _Form.default,
+  tags: ["autodocs"],
+  argTypes: {
+    children: {
+      control: {
+        disable: true
+      }
+    }
+  }
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  name: "Default",
+  args: {
+    children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Input.default, {
+      type: "text",
+      id: "exampleInputEmail12",
+      placeholder: "example@canonical.com",
+      label: "Email address"
+    }), /*#__PURE__*/_react.default.createElement(_Input.default, {
+      type: "password",
+      id: "exampleInputPassword12",
+      placeholder: "******",
+      label: "Password"
+    }), /*#__PURE__*/_react.default.createElement(_Input.default, {
+      type: "file",
+      id: "exampleInputFile2",
+      label: "File input"
+    }), /*#__PURE__*/_react.default.createElement(_Input.default, {
+      type: "checkbox",
+      id: "CheckMe2",
+      label: "I agree to receive information about Canonical’s products and services."
+    }))
+  }
+};
+const Fieldset = exports.Fieldset = {
+  render: () => /*#__PURE__*/_react.default.createElement(_Form.default, null, /*#__PURE__*/_react.default.createElement("fieldset", null, /*#__PURE__*/_react.default.createElement(_Input.default, {
+    placeholder: "Joe",
+    id: "list-input-12",
+    type: "text",
+    label: "First name"
+  }), /*#__PURE__*/_react.default.createElement(_Input.default, {
+    placeholder: "Bloggs",
+    id: "list-input-22",
+    type: "text",
+    label: "Last name"
+  }), /*#__PURE__*/_react.default.createElement(_Input.default, {
+    placeholder: "example@canonical.com",
+    id: "list-input-32",
+    type: "text",
+    label: "Email address"
+  }))),
+  name: "Fieldset"
+};
+const Inline = exports.Inline = {
+  render: () => /*#__PURE__*/_react.default.createElement(_Form.default, {
+    inline: true
+  }, /*#__PURE__*/_react.default.createElement(_Input.default, {
+    type: "text",
+    id: "username-inline2",
+    className: "p-form__control",
+    label: "Username",
+    help: "30 characters or fewer."
+  }), /*#__PURE__*/_react.default.createElement(_Input.default, {
+    type: "text",
+    id: "address-inline22",
+    "aria-invalid": "true",
+    label: "Email address",
+    error: "Please enter a valid email address."
+  })),
+  name: "Inline"
+};
+const Stacked = exports.Stacked = {
+  render: () => /*#__PURE__*/_react.default.createElement(_Form.default, {
+    stacked: true
+  }, /*#__PURE__*/_react.default.createElement(_Input.default, {
+    type: "text",
+    id: "full-name-stacked2",
+    label: "Full name",
+    stacked: true
+  }), /*#__PURE__*/_react.default.createElement(_Input.default, {
+    type: "text",
+    id: "username-stacked2",
+    label: "Username",
+    stacked: true,
+    help: "30 characters or fewer."
+  }), /*#__PURE__*/_react.default.createElement(_Input.default, {
+    type: "text",
+    id: "username-stacked-error2",
+    label: "Email address",
+    stacked: true,
+    error: "This field is required"
+  }), /*#__PURE__*/_react.default.createElement(_Input.default, {
+    type: "text",
+    id: "address-optional-stacked2",
+    label: "Address line 1",
+    stacked: true
+  }), /*#__PURE__*/_react.default.createElement(_Input.default, {
+    type: "text",
+    id: "address-optional-stacked3",
+    label: "Address line 2",
+    stacked: true
+  })),
+  name: "Stacked"
+};
+const Disabled = exports.Disabled = {
+  render: () => /*#__PURE__*/_react.default.createElement(_Form.default, null, /*#__PURE__*/_react.default.createElement(_Input.default, {
+    label: "Email address",
+    type: "text",
+    id: "disabled-input2",
+    placeholder: "example@canonical.com",
+    disabled: true
+  })),
+  name: "Disabled"
+};
+const Validation = exports.Validation = {
+  render: () => /*#__PURE__*/_react.default.createElement(_Form.default, null, /*#__PURE__*/_react.default.createElement(_Input.default, {
+    type: "text",
+    id: "exampleTextInputError2",
+    placeholder: "example@canonical.com",
+    label: "Email address",
+    error: "This field is required."
+  }), /*#__PURE__*/_react.default.createElement(_Input.default, {
+    type: "text",
+    id: "exampleTextInputCaution2",
+    placeholder: "14",
+    label: "Mail configuration ID",
+    caution: "No validation is performed in preview mode."
+  }), /*#__PURE__*/_react.default.createElement(_Input.default, {
+    type: "text",
+    id: "exampleTextInputSuccess2",
+    placeholder: "**** **** **** ****",
+    label: "Card number",
+    success: "Verified."
+  }), /*#__PURE__*/_react.default.createElement(_Select.default, {
+    id: "exampleSelectInputError3",
+    defaultValue: "",
+    options: [{
+      value: "",
+      disabled: true,
+      label: "--Select an option--"
+    }, {
+      value: "1",
+      label: "Cosmic Cuttlefish"
+    }, {
+      value: "2",
+      label: "Bionic Beaver"
+    }, {
+      value: "3",
+      label: "Xenial Xerus"
+    }],
+    label: "Ubuntu releases",
+    error: "You need to select an OS to complete your install."
+  })),
+  name: "Validation"
+};
+const Required = exports.Required = {
+  render: () => /*#__PURE__*/_react.default.createElement(_Form.default, null, /*#__PURE__*/_react.default.createElement(_Input.default, {
+    type: "text",
+    id: "exampleTextInputError3",
+    placeholder: "e.g joe@bloggs.com",
+    error: "This field is required.",
+    label: "Email address",
+    required: true
+  })),
+  name: "Required"
+};

package/dist/components/FormikField/FormikField.stories.js

@@ -10,7 +10,6 @@ var _Select = _interopRequireDefault(require("../Select"));
 var _formik = require("formik");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const meta = {
-  title: "FormikField",
   component: _FormikField.default,
   tags: ["autodocs"]
 };

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

@@ -48,7 +48,9 @@ export type Props = PropsWithSpread<{
     name: ValueOf<typeof ICONS> | string;
 }, HTMLProps<HTMLElement>>;
 /**
- * Icon
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Icon](https://docs.vanillaframework.io/patterns/icons/).
+ *
+ * Icons provide visual context and enhance usability.
  *
  * @param name One of built-in Vanilla icons or a name of a custom icon that follows `p-icon--{name}` convention.
  * @returns Icon

package/dist/components/Icon/Icon.js

@@ -42,7 +42,9 @@ const ICONS = exports.ICONS = {
   email: "email"
 };
 /**
- * Icon
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Icon](https://docs.vanillaframework.io/patterns/icons/).
+ *
+ * Icons provide visual context and enhance usability.
  *
  * @param name One of built-in Vanilla icons or a name of a custom icon that follows `p-icon--{name}` convention.
  * @returns Icon

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;