@canonical/react-components 0.50.6 → 0.51.0

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

@@ -24,5 +24,10 @@ export declare const Highlighted: {
     };
 };
 export declare const Overlay: {
-    render: () => React.JSX.Element;
+    args: {
+        title: string;
+        overlay: boolean;
+        children: string;
+    };
+    render: (args: any) => React.JSX.Element;
 };

package/dist/components/Card/Card.stories.js

@@ -35,7 +35,12 @@ const Highlighted = exports.Highlighted = {
   }
 };
 const Overlay = exports.Overlay = {
-  render: () => /*#__PURE__*/_react.default.createElement("section", {
+  args: {
+    title: "Web browsing",
+    overlay: true,
+    children: "Renowned for speed and security, Ubuntu and Firefox make browsing\nthe web a pleasure again. Ubuntu also includes Chrome, Opera and\nother browsers that can be installed from the Ubuntu Software\nCentre."
+  },
+  render: args => /*#__PURE__*/_react.default.createElement("section", {
     className: "p-strip--image is-light",
     style: {
       backgroundImage: "url('https://assets.ubuntu.com/v1/0a98afcd-screenshot_desktop.jpg')"
@@ -43,8 +48,5 @@ const Overlay = exports.Overlay = {
   }, /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, {
     size: 6,
     emptyLarge: 7
-  }, /*#__PURE__*/_react.default.createElement(_.default, {
-    title: "Web browsing",
-    overlay: true
-  }, "Renowned for speed and security, Ubuntu and Firefox make browsing the web a pleasure again. Ubuntu also includes Chrome, Opera and other browsers that can be installed from the Ubuntu Software Centre."))))
+  }, /*#__PURE__*/_react.default.createElement(_.default, args))))
 };

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

@@ -0,0 +1,26 @@
+import React from "react";
+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 React.ElementType | React.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/components/FormikField/FormikField.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _formik = require("formik");
+var _Input = _interopRequireDefault(require("../Input"));
+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 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.
+ */
+const FormikField = _ref => {
+  let {
+    component: Component = _Input.default,
+    displayError = true,
+    name,
+    value,
+    label,
+    ...props
+  } = _ref;
+  const [field, meta] = (0, _formik.useField)({
+    name,
+    type: props.type,
+    value
+  });
+  return /*#__PURE__*/_react.default.createElement(Component, _extends({
+    "aria-label": label,
+    error: meta.touched && displayError ? meta.error : null,
+    label: label
+  }, field, props));
+};
+var _default = exports.default = FormikField;

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

@@ -0,0 +1,86 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Fields = exports.Errors = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _FormikField = _interopRequireDefault(require("./FormikField"));
+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"]
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  args: {
+    name: "username",
+    label: "Username",
+    type: "text"
+  },
+  render: args => /*#__PURE__*/_react.default.createElement(_formik.Formik, {
+    initialValues: {
+      username: ""
+    },
+    onSubmit: () => {}
+  }, /*#__PURE__*/_react.default.createElement(_FormikField.default, args))
+};
+const Fields = exports.Fields = {
+  args: {
+    component: _Select.default,
+    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.default.createElement(_formik.Formik, {
+    initialValues: {
+      release: ""
+    },
+    onSubmit: () => {}
+  }, /*#__PURE__*/_react.default.createElement(_FormikField.default, args))
+};
+const Errors = exports.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.default.createElement(_formik.Formik, {
+    initialErrors: {
+      username: "This username has already been taken."
+    },
+    initialTouched: {
+      username: true
+    },
+    initialValues: {
+      username: ""
+    },
+    onSubmit: () => {}
+  }, /*#__PURE__*/_react.default.createElement(_FormikField.default, args))
+};

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

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

package/dist/components/FormikField/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _FormikField.default;
+  }
+});
+var _FormikField = _interopRequireDefault(require("./FormikField"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/components/Input/Input.js

@@ -49,7 +49,6 @@ const Input = _ref => {
     "aria-errormessage": hasError ? validationId : null,
     "aria-invalid": hasError,
     id: inputId,
-    label: label,
     required: required,
     ...inputProps
   };

package/dist/components/Pagination/Pagination.js

@@ -85,9 +85,11 @@ const PaginationItemSeparator = () => /*#__PURE__*/_react.default.createElement(
 // current page and paginate function is defined. Pagination
 // is handled by paginate function and optional onForward and
 // onBack functions.
+
 // Used when number of items per page, number of total items,
 // current page and paginate function are undefined.
 // Pagination is handled by onForward and onBack function.
+
 const Pagination = _ref => {
   let {
     itemsPerPage,

package/dist/index.d.ts

@@ -15,6 +15,7 @@ export { default as ContextualMenu } from "./components/ContextualMenu";
 export { default as EmptyState } from "./components/EmptyState";
 export { default as Field } from "./components/Field";
 export { default as Form } from "./components/Form";
+export { default as FormikField } from "./components/FormikField";
 export { default as Icon, ICONS } from "./components/Icon";
 export { default as Input } from "./components/Input";
 export { default as Label } from "./components/Label";
@@ -66,6 +67,7 @@ export type { ContextualMenuProps, ContextualMenuDropdownProps, MenuLink, Positi
 export type { EmptyStateProps } from "./components/EmptyState";
 export type { FieldProps } from "./components/Field";
 export type { FormProps } from "./components/Form";
+export type { FormikFieldProps } from "./components/FormikField";
 export type { IconProps } from "./components/Icon";
 export type { InputProps } from "./components/Input";
 export type { LabelProps } from "./components/Label";

package/dist/index.js

@@ -23,6 +23,7 @@ var _exportNames = {
   EmptyState: true,
   Field: true,
   Form: true,
+  FormikField: true,
   Icon: true,
   ICONS: true,
   Input: true,
@@ -192,6 +193,12 @@ Object.defineProperty(exports, "Form", {
     return _Form.default;
   }
 });
+Object.defineProperty(exports, "FormikField", {
+  enumerable: true,
+  get: function () {
+    return _FormikField.default;
+  }
+});
 Object.defineProperty(exports, "ICONS", {
   enumerable: true,
   get: function () {
@@ -533,6 +540,7 @@ var _ContextualMenu = _interopRequireDefault(require("./components/ContextualMen
 var _EmptyState = _interopRequireDefault(require("./components/EmptyState"));
 var _Field = _interopRequireDefault(require("./components/Field"));
 var _Form = _interopRequireDefault(require("./components/Form"));
+var _FormikField = _interopRequireDefault(require("./components/FormikField"));
 var _Icon = _interopRequireWildcard(require("./components/Icon"));
 var _Input = _interopRequireDefault(require("./components/Input"));
 var _Label = _interopRequireDefault(require("./components/Label"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "0.50.6",
+  "version": "0.51.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": "Huw Wilkins <huw.wilkins@canonical.com>",
@@ -66,6 +66,7 @@
     "eslint-plugin-react-hooks": "4.6.0",
     "eslint-plugin-storybook": "0.6.15",
     "eslint-plugin-testing-library": "6.2.0",
+    "formik": "2.4.5",
     "jest": "29.7.0",
     "npm-package-json-lint": "7.1.0",
     "prettier": "3.2.4",
@@ -111,6 +112,7 @@
   "peerDependencies": {
     "@types/react": "^17.0.2 || ^18.0.0",
     "@types/react-dom": "^17.0.2 || ^18.0.0",
+    "formik": "^2.4.5",
     "react": "^17.0.2 || ^18.0.0",
     "react-dom": "^17.0.2 || ^18.0.0",
     "vanilla-framework": "^3.15.1 || ^4.0.0"