@canonical/react-components 1.5.0 → 1.7.0

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

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

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

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

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

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

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

@@ -0,0 +1,77 @@
+import type { ReactNode } from "react";
+import type { ClassName } from "../../types";
+/**
+ * The props for the Field component.
+ */
+export type Props = {
+    /**
+     * The content for caution validation.
+     */
+    caution?: ReactNode;
+    /**
+     * The content of the Field component.
+     */
+    children?: ReactNode;
+    /**
+     * Optional class(es) to pass to the Field wrapper div.
+     */
+    className?: ClassName;
+    /**
+     * The content for error validation.
+     */
+    error?: ReactNode;
+    /**
+     * The id of the input this Field component is controlling.
+     */
+    forId?: string;
+    /**
+     * Help text to show below the field.
+     */
+    help?: ReactNode;
+    /**
+     * Optional class(es) to pass to the help text element.
+     */
+    helpClassName?: string;
+    /**
+     * An id to give to the help element.
+     */
+    helpId?: string;
+    /**
+     * Whether the component is wrapping a select element.
+     */
+    isSelect?: boolean;
+    /**
+     * Whether the component is wrapping a checkbox or radio element.
+     */
+    isTickElement?: boolean;
+    /**
+     * The label for the field.
+     */
+    label?: ReactNode;
+    /**
+     * Optional class(es) to pass to the label component.
+     */
+    labelClassName?: string | null;
+    /**
+     * Whether the label should show before the input.
+     */
+    labelFirst?: boolean;
+    /**
+     * Whether the field is required.
+     */
+    required?: boolean;
+    /**
+     * Whether the form field should have a stacked appearance.
+     */
+    stacked?: boolean;
+    /**
+     * The content for success validation.
+     */
+    success?: ReactNode;
+    /**
+     * An id to give to the caution, error or success element.
+     */
+    validationId?: string;
+};
+declare const Field: ({ caution, children, className, error, forId, help, helpClassName, helpId, isSelect, isTickElement, label, labelClassName, labelFirst, required, stacked, success, validationId, ...props }: Props) => JSX.Element;
+export default Field;

package/dist/esm/components/Field/Field.js

@@ -0,0 +1,126 @@
+var _excluded = ["caution", "children", "className", "error", "forId", "help", "helpClassName", "helpId", "isSelect", "isTickElement", "label", "labelClassName", "labelFirst", "required", "stacked", "success", "validationId"];
+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";
+import Label from "../Label";
+import Col from "../Col";
+
+/**
+ * The props for the Field component.
+ */
+
+var generateHelpText = _ref => {
+  var {
+    help,
+    helpId,
+    helpClassName,
+    isTickElement
+  } = _ref;
+  return help ? /*#__PURE__*/React.createElement("p", {
+    className: classNames("p-form-help-text", helpClassName, {
+      "is-tick-element": isTickElement
+    }),
+    id: helpId
+  }, help) : null;
+};
+var generateError = (error, caution, success, validationId) => {
+  if (!error && !caution && !success) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("p", {
+    className: "p-form-validation__message",
+    id: validationId
+  }, error || caution || success);
+};
+var generateLabel = (forId, required, label, labelClassName, stacked) => {
+  if (!label) {
+    return null;
+  }
+  var labelNode = /*#__PURE__*/React.createElement(Label, {
+    className: labelClassName,
+    forId: forId,
+    required: required
+  }, label);
+  if (stacked) {
+    return /*#__PURE__*/React.createElement(Col, {
+      size: 4
+    }, labelNode);
+  }
+  return labelNode;
+};
+var generateContent = _ref2 => {
+  var {
+    isSelect,
+    children,
+    labelFirst,
+    labelNode,
+    help,
+    helpClassName,
+    error,
+    caution,
+    success,
+    validationId,
+    helpId,
+    isTickElement
+  } = _ref2;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "p-form__control u-clearfix"
+  }, isSelect ? /*#__PURE__*/React.createElement("div", {
+    className: "p-form-validation__select-wrapper"
+  }, children) : children, !labelFirst && labelNode, generateHelpText({
+    helpId,
+    help,
+    helpClassName,
+    isTickElement
+  }), generateError(error, caution, success, validationId));
+};
+var Field = _ref3 => {
+  var {
+      caution,
+      children,
+      className,
+      error,
+      forId,
+      help,
+      helpClassName,
+      helpId,
+      isSelect,
+      isTickElement,
+      label,
+      labelClassName,
+      labelFirst = true,
+      required,
+      stacked,
+      success,
+      validationId
+    } = _ref3,
+    props = _objectWithoutProperties(_ref3, _excluded);
+  var labelNode = generateLabel(forId, required, label, labelClassName, stacked);
+  var content = generateContent({
+    isSelect,
+    isTickElement,
+    children,
+    labelFirst,
+    labelNode,
+    help,
+    helpClassName,
+    error,
+    caution,
+    success,
+    validationId,
+    helpId
+  });
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: classNames("p-form__group", "p-form-validation", className, {
+      "is-error": error,
+      "is-caution": caution,
+      "is-success": success,
+      row: stacked
+    })
+  }, props), labelFirst && labelNode, stacked ? /*#__PURE__*/React.createElement(Col, {
+    size: 8
+  }, content) : content);
+};
+export default Field;

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

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

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

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

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

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

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

@@ -0,0 +1,21 @@
+import type { HTMLProps, ReactNode } from "react";
+import type { ClassName, PropsWithSpread } from "../../types";
+export type Props = PropsWithSpread<{
+    /**
+     * The content of the form.
+     */
+    children?: ReactNode;
+    /**
+     * Optional class(es) to pass to the form element.
+     */
+    className?: ClassName;
+    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/esm/components/Form/Form.js

@@ -0,0 +1,28 @@
+var _excluded = ["children", "className", "inline", "stacked"];
+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";
+/**
+ * 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.
+ */
+var Form = _ref => {
+  var {
+      children,
+      className,
+      inline,
+      stacked
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("form", _extends({
+    className: classNames(className, {
+      "p-form": inline || stacked,
+      "p-form--inline": inline,
+      "p-form--stacked": stacked
+    })
+  }, props), children);
+};
+export default Form;

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

@@ -0,0 +1,172 @@
+import React from "react";
+import Form from "./Form";
+import Input from "../Input";
+import Select from "../Select";
+var meta = {
+  component: Form,
+  tags: ["autodocs"],
+  argTypes: {
+    children: {
+      control: {
+        disable: true
+      }
+    }
+  }
+};
+export default meta;
+export var Default = {
+  name: "Default",
+  args: {
+    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Input, {
+      type: "text",
+      id: "exampleInputEmail12",
+      placeholder: "example@canonical.com",
+      label: "Email address"
+    }), /*#__PURE__*/React.createElement(Input, {
+      type: "password",
+      id: "exampleInputPassword12",
+      placeholder: "******",
+      label: "Password"
+    }), /*#__PURE__*/React.createElement(Input, {
+      type: "file",
+      id: "exampleInputFile2",
+      label: "File input"
+    }), /*#__PURE__*/React.createElement(Input, {
+      type: "checkbox",
+      id: "CheckMe2",
+      label: "I agree to receive information about Canonical’s products and services."
+    }))
+  }
+};
+export var Fieldset = {
+  render: () => /*#__PURE__*/React.createElement(Form, null, /*#__PURE__*/React.createElement("fieldset", null, /*#__PURE__*/React.createElement(Input, {
+    placeholder: "Joe",
+    id: "list-input-12",
+    type: "text",
+    label: "First name"
+  }), /*#__PURE__*/React.createElement(Input, {
+    placeholder: "Bloggs",
+    id: "list-input-22",
+    type: "text",
+    label: "Last name"
+  }), /*#__PURE__*/React.createElement(Input, {
+    placeholder: "example@canonical.com",
+    id: "list-input-32",
+    type: "text",
+    label: "Email address"
+  }))),
+  name: "Fieldset"
+};
+export var Inline = {
+  render: () => /*#__PURE__*/React.createElement(Form, {
+    inline: true
+  }, /*#__PURE__*/React.createElement(Input, {
+    type: "text",
+    id: "username-inline2",
+    className: "p-form__control",
+    label: "Username",
+    help: "30 characters or fewer."
+  }), /*#__PURE__*/React.createElement(Input, {
+    type: "text",
+    id: "address-inline22",
+    "aria-invalid": "true",
+    label: "Email address",
+    error: "Please enter a valid email address."
+  })),
+  name: "Inline"
+};
+export var Stacked = {
+  render: () => /*#__PURE__*/React.createElement(Form, {
+    stacked: true
+  }, /*#__PURE__*/React.createElement(Input, {
+    type: "text",
+    id: "full-name-stacked2",
+    label: "Full name",
+    stacked: true
+  }), /*#__PURE__*/React.createElement(Input, {
+    type: "text",
+    id: "username-stacked2",
+    label: "Username",
+    stacked: true,
+    help: "30 characters or fewer."
+  }), /*#__PURE__*/React.createElement(Input, {
+    type: "text",
+    id: "username-stacked-error2",
+    label: "Email address",
+    stacked: true,
+    error: "This field is required"
+  }), /*#__PURE__*/React.createElement(Input, {
+    type: "text",
+    id: "address-optional-stacked2",
+    label: "Address line 1",
+    stacked: true
+  }), /*#__PURE__*/React.createElement(Input, {
+    type: "text",
+    id: "address-optional-stacked3",
+    label: "Address line 2",
+    stacked: true
+  })),
+  name: "Stacked"
+};
+export var Disabled = {
+  render: () => /*#__PURE__*/React.createElement(Form, null, /*#__PURE__*/React.createElement(Input, {
+    label: "Email address",
+    type: "text",
+    id: "disabled-input2",
+    placeholder: "example@canonical.com",
+    disabled: true
+  })),
+  name: "Disabled"
+};
+export var Validation = {
+  render: () => /*#__PURE__*/React.createElement(Form, null, /*#__PURE__*/React.createElement(Input, {
+    type: "text",
+    id: "exampleTextInputError2",
+    placeholder: "example@canonical.com",
+    label: "Email address",
+    error: "This field is required."
+  }), /*#__PURE__*/React.createElement(Input, {
+    type: "text",
+    id: "exampleTextInputCaution2",
+    placeholder: "14",
+    label: "Mail configuration ID",
+    caution: "No validation is performed in preview mode."
+  }), /*#__PURE__*/React.createElement(Input, {
+    type: "text",
+    id: "exampleTextInputSuccess2",
+    placeholder: "**** **** **** ****",
+    label: "Card number",
+    success: "Verified."
+  }), /*#__PURE__*/React.createElement(Select, {
+    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"
+};
+export var Required = {
+  render: () => /*#__PURE__*/React.createElement(Form, null, /*#__PURE__*/React.createElement(Input, {
+    type: "text",
+    id: "exampleTextInputError3",
+    placeholder: "e.g joe@bloggs.com",
+    error: "This field is required.",
+    label: "Email address",
+    required: true
+  })),
+  name: "Required"
+};

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

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

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

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

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

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

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

@@ -0,0 +1,25 @@
+import { type ComponentProps, type ComponentType, type ElementType, type HTMLProps } from "react";
+import Input from "../Input";
+export type Props<C extends ElementType | ComponentType = typeof Input> = {
+    /**
+     * The component to display.
+     * @default Input
+     */
+    component?: C;
+    /**
+     * This can be used to hide errors returned by Formik.
+     */
+    displayError?: boolean;
+    /**
+     * The name of the field as given to Formik.
+     */
+    name: string;
+    value?: HTMLProps<HTMLElement>["value"];
+} & ComponentProps<C>;
+/**
+ * This component makes it easier to use Vanilla form inputs with Formik. It
+ * makes use of Formik's context to automatically map errors, values, states
+ * etc. onto the provided field.
+ */
+declare const FormikField: <C extends ElementType | ComponentType = ({ caution, className, error, help, helpClassName, id, label, labelClassName, required, stacked, success, takeFocus, takeFocusDelay, type, wrapperClassName, ...inputProps }: import("../Input").InputProps) => JSX.Element>({ component: Component, displayError, name, value, label, ...props }: Props<C>) => JSX.Element;
+export default FormikField;

package/dist/esm/components/FormikField/FormikField.js

@@ -0,0 +1,33 @@
+var _excluded = ["component", "displayError", "name", "value", "label"];
+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 React from "react";
+import { useField } from "formik";
+import Input from "../Input";
+/**
+ * This component makes it easier to use Vanilla form inputs with Formik. It
+ * makes use of Formik's context to automatically map errors, values, states
+ * etc. onto the provided field.
+ */
+var FormikField = _ref => {
+  var {
+      component: Component = Input,
+      displayError = true,
+      name,
+      value,
+      label
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var [field, meta] = useField({
+    name,
+    type: props.type,
+    value
+  });
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    "aria-label": label,
+    error: meta.touched && displayError ? meta.error : null,
+    label: label
+  }, field, props));
+};
+export default FormikField;

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

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

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

@@ -0,0 +1,78 @@
+import React from "react";
+import FormikField from "./FormikField";
+import Select from "../Select";
+import { Formik } from "formik";
+var meta = {
+  component: FormikField,
+  tags: ["autodocs"]
+};
+export default meta;
+export var Default = {
+  args: {
+    name: "username",
+    label: "Username",
+    type: "text"
+  },
+  render: args => /*#__PURE__*/React.createElement(Formik, {
+    initialValues: {
+      username: ""
+    },
+    onSubmit: () => {}
+  }, /*#__PURE__*/React.createElement(FormikField, args))
+};
+export var Fields = {
+  args: {
+    component: Select,
+    name: "release",
+    label: "Release",
+    options: [{
+      value: "",
+      disabled: true,
+      label: "Select an option"
+    }, {
+      value: "1",
+      label: "Cosmic Cuttlefish"
+    }, {
+      value: "2",
+      label: "Bionic Beaver"
+    }, {
+      value: "3",
+      label: "Xenial Xerus"
+    }]
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "\nAny React Components input can be provided to FormikField (e.g. Input, Textarea or Select) or you may provide a custom component.\n\nAny additional props that need to be passed can be given to FormikField.\n        "
+      }
+    }
+  },
+  render: args => /*#__PURE__*/React.createElement(Formik, {
+    initialValues: {
+      release: ""
+    },
+    onSubmit: () => {}
+  }, /*#__PURE__*/React.createElement(FormikField, args))
+};
+export var Errors = {
+  args: Default.args,
+  parameters: {
+    docs: {
+      description: {
+        story: "\nFormik parameters are passed to the field using Formik's `useField`. This means that validation and errors, state handlers etc. should all just work.\n        "
+      }
+    }
+  },
+  render: args => /*#__PURE__*/React.createElement(Formik, {
+    initialErrors: {
+      username: "This username has already been taken."
+    },
+    initialTouched: {
+      username: true
+    },
+    initialValues: {
+      username: ""
+    },
+    onSubmit: () => {}
+  }, /*#__PURE__*/React.createElement(FormikField, args))
+};

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

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

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

@@ -0,0 +1 @@
+export { default, type Props as FormikFieldProps } from "./FormikField";

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

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