@canonical/react-components 0.59.0 → 0.59.1

package/dist/components/ConfirmationModal/ConfirmationModal.stories.js

@@ -0,0 +1,135 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Positive = exports.NoTitle = exports.Extra = exports.Default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _ConfirmationModal = _interopRequireDefault(require("./ConfirmationModal"));
+var _Input = _interopRequireDefault(require("../Input"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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; }
+const doNothing = () => {};
+const meta = {
+  component: _ConfirmationModal.default,
+  tags: ["autodocs"]
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [modalOpen, setModalOpen] = (0, _react.useState)(false);
+    const closeHandler = () => setModalOpen(false);
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
+      onClick: () => setModalOpen(true)
+    }, "Open confirmation modal"), modalOpen ? /*#__PURE__*/_react.default.createElement(_ConfirmationModal.default, {
+      title: "Confirm delete",
+      confirmButtonLabel: "Delete",
+      onConfirm: doNothing,
+      close: closeHandler
+    }, /*#__PURE__*/_react.default.createElement("p", null, "This will permanently delete the user \"Simon\".", /*#__PURE__*/_react.default.createElement("br", null), "You cannot undo this action.")) : null);
+  },
+  name: "Default"
+};
+
+/**
+ * The title is optional, and the content is fully customisable.
+ */
+const NoTitle = exports.NoTitle = {
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [modalOpen, setModalOpen] = (0, _react.useState)(false);
+    const closeHandler = () => setModalOpen(false);
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
+      onClick: () => setModalOpen(true)
+    }, "Run"), modalOpen ? /*#__PURE__*/_react.default.createElement(_ConfirmationModal.default, {
+      close: closeHandler,
+      confirmButtonAppearance: "positive",
+      confirmButtonLabel: "Confirm",
+      onConfirm: doNothing
+    }, /*#__PURE__*/_react.default.createElement("h4", {
+      style: {
+        margin: "1rem 0"
+      }
+    }, "Run list-backups?"), /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        width: "480px",
+        marginBottom: "1rem"
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "u-text--muted"
+    }, "UNIT COUNT"), /*#__PURE__*/_react.default.createElement("div", null, "1")), /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        marginBottom: "1.5rem"
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "u-text--muted"
+    }, "UNIT NAME"), /*#__PURE__*/_react.default.createElement("div", null, "mysql/0"))) : null);
+  },
+  name: "No title"
+};
+
+/**
+ * The appearance of the confirm button can be any of the `Button`'s appearance values.
+ */
+const Positive = exports.Positive = {
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [modalOpen, setModalOpen] = (0, _react.useState)(false);
+    const closeHandler = () => setModalOpen(false);
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
+      onClick: () => setModalOpen(true)
+    }, "Apply changes"), modalOpen ? /*#__PURE__*/_react.default.createElement(_ConfirmationModal.default, {
+      close: closeHandler,
+      confirmButtonAppearance: "positive",
+      confirmButtonLabel: "Yes, apply changes",
+      onConfirm: doNothing
+    }, /*#__PURE__*/_react.default.createElement("h4", {
+      style: {
+        margin: "1rem 0"
+      }
+    }, "Are you sure you wish to apply these changes?"), /*#__PURE__*/_react.default.createElement("p", null, "You have edited the following values to the mysql configuration:"), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h5", {
+      className: "u-no-margin--bottom"
+    }, "cluster-name"), /*#__PURE__*/_react.default.createElement("pre", {
+      className: "u-no-padding",
+      style: {
+        backgroundColor: "transparent"
+      }
+    }, "test")), /*#__PURE__*/_react.default.createElement("div", {
+      className: "p-text--small",
+      style: {
+        width: "480px"
+      }
+    }, "You can revert back to the applications default settings by clicking the \u201CReset all values\u201D button; or reset each edited field by clicking \u201CUse default\u201D.")) : null);
+  },
+  name: "Positive"
+};
+
+/**
+ * Extra elements can be added to the button row.
+ */
+const Extra = exports.Extra = {
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [modalOpen, setModalOpen] = (0, _react.useState)(false);
+    const closeHandler = () => setModalOpen(false);
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
+      onClick: () => setModalOpen(true)
+    }, "Stop"), modalOpen ? /*#__PURE__*/_react.default.createElement(_ConfirmationModal.default, {
+      confirmExtra: /*#__PURE__*/_react.default.createElement("span", {
+        className: "u-float-left"
+      }, /*#__PURE__*/_react.default.createElement(_Input.default, {
+        type: "checkbox",
+        id: "extraCheckbox",
+        label: "Force stop",
+        tabIndex: -1
+      })),
+      title: "Confirm stop",
+      confirmButtonLabel: "Stop",
+      onConfirm: doNothing,
+      close: closeHandler
+    }, /*#__PURE__*/_react.default.createElement("p", null, "This will stop instance", /*#__PURE__*/_react.default.createElement("b", null, "whimsical-mouflon"), ".")) : null);
+  },
+  name: "Extra"
+};

package/dist/components/ContextualMenu/ContextualMenu.d.ts

@@ -98,26 +98,9 @@ export type Props<L> = PropsWithSpread<{
     visible?: boolean;
 }, HTMLProps<HTMLSpanElement>>;
 /**
- * A component for the Vanilla contextual menu.
- * @template L - The type of the link props.
- * @param [autoAdjust=true] - Whether the menu should adjust to fit in the screen.
- * @param children - The menu content (if the links prop is not supplied).
- * @param className - An optional class to apply to the wrapping element.
- * @param [closeOnEsc=true] - Whether the menu should close when the escape key is pressed.
- * @param [closeOnOutsideClick=true] - Whether the menu should close when clicking outside the menu.
- * @param constrainPanelWidth - Whether the menu's width should match the toggle's width.
- * @param dropdownClassName - An optional class to apply to the dropdown.
- * @param hasToggleIcon - Whether the toggle should display a chevron icon.
- * @param links - A list of links to display in the menu (if the children prop is not supplied.)
- * @param onToggleMenu - A function to call when the menu is toggled.
- * @param [position="right"] - The position of the menu.
- * @param positionNode - An element to make the menu relative to.
- * @param toggleAppearance - The appearance of the toggle button.
- * @param toggleClassName - An class to apply to the toggle button.
- * @param toggleDisabled - Whether the toggle button should be disabled.
- * @param toggleLabel - The toggle button's label.
- * @param [toggleLabelFirst=true] - Whether the toggle lable or icon should appear first.
- * @param [visible=false] - Whether the menu should be visible.
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Contextual menu](https://docs.vanillaframework.io/patterns//contextual-menu/).
+ *
+ * A contextual menu can be used in conjunction with any page element to provide a contextual menu.
  */
 declare const ContextualMenu: <L>({ autoAdjust, children, className, closeOnEsc, closeOnOutsideClick, constrainPanelWidth, dropdownClassName, dropdownProps, hasToggleIcon, links, onToggleMenu, position, positionNode, scrollOverflow, toggleAppearance, toggleClassName, toggleDisabled, toggleLabel, toggleLabelFirst, toggleProps, visible, ...wrapperProps }: Props<L>) => JSX.Element;
 export default ContextualMenu;

package/dist/components/ContextualMenu/ContextualMenu.js

@@ -49,26 +49,9 @@ const getPositionNodeVisible = positionNode => {
 };
 
 /**
- * A component for the Vanilla contextual menu.
- * @template L - The type of the link props.
- * @param [autoAdjust=true] - Whether the menu should adjust to fit in the screen.
- * @param children - The menu content (if the links prop is not supplied).
- * @param className - An optional class to apply to the wrapping element.
- * @param [closeOnEsc=true] - Whether the menu should close when the escape key is pressed.
- * @param [closeOnOutsideClick=true] - Whether the menu should close when clicking outside the menu.
- * @param constrainPanelWidth - Whether the menu's width should match the toggle's width.
- * @param dropdownClassName - An optional class to apply to the dropdown.
- * @param hasToggleIcon - Whether the toggle should display a chevron icon.
- * @param links - A list of links to display in the menu (if the children prop is not supplied.)
- * @param onToggleMenu - A function to call when the menu is toggled.
- * @param [position="right"] - The position of the menu.
- * @param positionNode - An element to make the menu relative to.
- * @param toggleAppearance - The appearance of the toggle button.
- * @param toggleClassName - An class to apply to the toggle button.
- * @param toggleDisabled - Whether the toggle button should be disabled.
- * @param toggleLabel - The toggle button's label.
- * @param [toggleLabelFirst=true] - Whether the toggle lable or icon should appear first.
- * @param [visible=false] - Whether the menu should be visible.
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Contextual menu](https://docs.vanillaframework.io/patterns//contextual-menu/).
+ *
+ * A contextual menu can be used in conjunction with any page element to provide a contextual menu.
  */
 const ContextualMenu = _ref => {
   let {

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

@@ -0,0 +1,13 @@
+import { Meta, StoryObj } from "@storybook/react";
+import ContextualMenu from "./ContextualMenu";
+declare const meta: Meta<typeof ContextualMenu>;
+export default meta;
+type Story = StoryObj<typeof ContextualMenu>;
+/**
+ * The contextual menu will provide a visual wrapper to any provided children. Visibility can be toggled via the `visible` prop.
+ */
+export declare const Default: Story;
+export declare const Toggle: Story;
+export declare const OverflowingContainer: Story;
+export declare const ChildFunction: Story;
+export declare const ChildElement: Story;

package/dist/components/ContextualMenu/ContextualMenu.stories.js

@@ -0,0 +1,107 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Toggle = exports.OverflowingContainer = exports.Default = exports.ChildFunction = exports.ChildElement = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Button = _interopRequireDefault(require("../Button"));
+var _ContextualMenu = _interopRequireDefault(require("./ContextualMenu"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const ScrollTemplate = args => /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    maxWidth: "30rem",
+    maxHeight: "10rem",
+    overflow: "auto",
+    padding: "1rem"
+  }
+}, /*#__PURE__*/_react.default.createElement(_ContextualMenu.default, args), Array(3).fill( /*#__PURE__*/_react.default.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur cum dicta beatae nostrum eligendi similique earum, dolorem fuga quis, sequi voluptates architecto ipsa dolorum eaque rem expedita inventore voluptas odit aspernatur alias molestias facere.")), /*#__PURE__*/_react.default.createElement(_ContextualMenu.default, args));
+const Template = args => /*#__PURE__*/_react.default.createElement("div", {
+  className: "u-align--center"
+}, /*#__PURE__*/_react.default.createElement(_ContextualMenu.default, args));
+const meta = {
+  component: _ContextualMenu.default,
+  render: Template,
+  tags: ["autodocs"],
+  argTypes: {
+    children: {
+      control: {
+        disable: true
+      }
+    },
+    links: {
+      control: {
+        disable: true
+      }
+    }
+  }
+};
+var _default = exports.default = meta;
+/**
+ * The contextual menu will provide a visual wrapper to any provided children. Visibility can be toggled via the `visible` prop.
+ */
+const Default = exports.Default = {
+  name: "Default",
+  args: {
+    children: /*#__PURE__*/_react.default.createElement("span", {
+      style: {
+        padding: "1rem"
+      }
+    }, "This is a menu."),
+    closeOnOutsideClick: false,
+    constrainPanelWidth: false,
+    position: "left",
+    visible: true
+  }
+};
+const Toggle = exports.Toggle = {
+  name: "Toggle",
+  args: {
+    links: [{
+      children: "Link 1",
+      onClick: () => {}
+    }, {
+      children: "Link 2",
+      onClick: () => {}
+    }],
+    hasToggleIcon: true,
+    position: "right",
+    toggleLabel: "Click me!"
+  }
+};
+const OverflowingContainer = exports.OverflowingContainer = {
+  render: ScrollTemplate.bind({}),
+  name: "Overflowing container",
+  args: {
+    links: [{
+      children: "Link 1",
+      onClick: () => {}
+    }, {
+      children: "Long Link 2",
+      onClick: () => {}
+    }],
+    hasToggleIcon: true,
+    position: "right",
+    toggleLabel: "Click me!"
+  }
+};
+const ChildFunction = exports.ChildFunction = {
+  name: "Child function",
+  args: {
+    children: close => /*#__PURE__*/_react.default.createElement(_Button.default, {
+      onClick: close
+    }, "child function"),
+    hasToggleIcon: true,
+    position: "right",
+    toggleLabel: "Click me!"
+  }
+};
+const ChildElement = exports.ChildElement = {
+  name: "Child element",
+  args: {
+    children: /*#__PURE__*/_react.default.createElement(_Button.default, null, "child element"),
+    hasToggleIcon: true,
+    position: "right",
+    toggleLabel: "Click me!"
+  }
+};

package/dist/components/EmptyState/EmptyState.d.ts

@@ -18,5 +18,8 @@ export type Props = PropsWithSpread<{
      */
     title: string;
 }, HTMLProps<HTMLDivElement>>;
+/**
+ * This is a [React](https://reactjs.org/) component to represent an empty state.
+ */
 export declare const EmptyState: ({ children, className, image, title, ...props }: Props) => ReactElement;
 export default EmptyState;

package/dist/components/EmptyState/EmptyState.js

@@ -8,6 +8,9 @@ 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 to represent an empty state.
+ */
 const EmptyState = _ref => {
   let {
     children,

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

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

package/dist/components/EmptyState/EmptyState.stories.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithContent = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _EmptyState = _interopRequireDefault(require("./EmptyState"));
+var _Icon = _interopRequireWildcard(require("../Icon"));
+var _Button = _interopRequireDefault(require("../Button"));
+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 boxImage = /*#__PURE__*/_react.default.createElement("img", {
+  src: "https://assets.ubuntu.com/v1/c17e0d92-container.svg",
+  style: {
+    maxWidth: "10rem",
+    maxHeight: "10rem"
+  },
+  alt: "empty state"
+});
+const doNothing = () => {};
+const meta = {
+  component: _EmptyState.default,
+  tags: ["autodocs"]
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  render: () => /*#__PURE__*/_react.default.createElement(_EmptyState.default, {
+    image: boxImage,
+    title: "This application doesn't have any configuration parameters"
+  }),
+  name: "Default"
+};
+const WithContent = exports.WithContent = {
+  render: () => /*#__PURE__*/_react.default.createElement(_EmptyState.default, {
+    image: boxImage,
+    title: "No instances found"
+  }, /*#__PURE__*/_react.default.createElement("p", null, "There are no instances in this project. Spin up your first instance!"), /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement("a", {
+    href: "#todo",
+    target: "_blank"
+  }, "How to create instances", /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    name: _Icon.ICONS.externalLink
+  }))), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    appearance: "positive",
+    onClick: doNothing
+  }, "Create instance")),
+  name: "With content"
+};

package/dist/components/Form/Form.d.ts

@@ -12,5 +12,10 @@ export type Props = PropsWithSpread<{
     inline?: boolean;
     stacked?: boolean;
 }, HTMLProps<HTMLFormElement>>;
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Form](https://docs.vanillaframework.io/base/forms).
+ *
+ * Form controls have global styling defined at the HTML element level. Labels and most input types are 100% width of the `<form>` parent element.
+ */
 declare const Form: ({ children, className, inline, stacked, ...props }: Props) => JSX.Element;
 export default Form;

package/dist/components/Form/Form.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 [Form](https://docs.vanillaframework.io/base/forms).
+ *
+ * Form controls have global styling defined at the HTML element level. Labels and most input types are 100% width of the `<form>` parent element.
+ */
 const Form = _ref => {
   let {
     children,

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

@@ -0,0 +1,12 @@
+import { Meta, StoryObj } from "@storybook/react";
+import Form from "./Form";
+declare const meta: Meta<typeof Form>;
+export default meta;
+type Story = StoryObj<typeof Form>;
+export declare const Default: Story;
+export declare const Fieldset: Story;
+export declare const Inline: Story;
+export declare const Stacked: Story;
+export declare const Disabled: Story;
+export declare const Validation: Story;
+export declare const Required: Story;

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