@canonical/react-components 0.50.5 → 0.51.0

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

@@ -26,5 +26,10 @@ export type Props = PropsWithSpread<{
      */
     title?: ReactNode;
 }, HTMLProps<HTMLDivElement>>;
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Card](https://docs.vanillaframework.io/patterns/card/).
+ *
+ * There are four card styles available to use in Vanilla: default, header, highlighted and overlay. Our card component will expand to fill the full width of its parent container.
+ */
 declare const Card: ({ children, className, highlighted, overlay, thumbnail, title, ...props }: Props) => JSX.Element;
 export default Card;

package/dist/components/Card/Card.js

@@ -10,6 +10,12 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 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 }; }
 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 [Card](https://docs.vanillaframework.io/patterns/card/).
+ *
+ * There are four card styles available to use in Vanilla: default, header, highlighted and overlay. Our card component will expand to fill the full width of its parent container.
+ */
+
 const Card = _ref => {
   let {
     children,

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

@@ -0,0 +1,33 @@
+import React from "react";
+import type { Meta } from "@storybook/react";
+import Card from "./";
+declare const meta: Meta<typeof Card>;
+export default meta;
+export declare const Default: {
+    args: {
+        title: string;
+        children: string;
+    };
+};
+export declare const Header: {
+    args: {
+        title: string;
+        thumbnail: string;
+        children: string;
+    };
+};
+export declare const Highlighted: {
+    args: {
+        highlighted: boolean;
+        title: string;
+        children: string;
+    };
+};
+export declare const Overlay: {
+    args: {
+        title: string;
+        overlay: boolean;
+        children: string;
+    };
+    render: (args: any) => React.JSX.Element;
+};

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

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Overlay = exports.Highlighted = exports.Header = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ = _interopRequireDefault(require("./"));
+var _Col = _interopRequireDefault(require("../Col"));
+var _Row = _interopRequireDefault(require("../Row"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const meta = {
+  title: "Card",
+  component: _.default,
+  tags: ["autodocs"]
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  args: {
+    title: "We'd love to have you join us as a partner.",
+    children: "If you are an independent software vendor or bundle author, it's easy to apply. You can find out more below."
+  }
+};
+const Header = exports.Header = {
+  args: {
+    title: "Raspberry Pi2 and Pi3",
+    thumbnail: "https://assets.ubuntu.com/v1/dca2e4c4-raspberry-logo.png",
+    children: "For fun, for education and for profit, the RPi makes device development personal and entertaining. With support for both the Pi2 and the new Pi3, Ubuntu Core supports the world’s most beloved board."
+  }
+};
+const Highlighted = exports.Highlighted = {
+  args: {
+    ...Default.args,
+    highlighted: true
+  }
+};
+const Overlay = exports.Overlay = {
+  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')"
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, {
+    size: 6,
+    emptyLarge: 7
+  }, /*#__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/Icon/Icon.stories.scss

@@ -1,7 +1,4 @@
-@import "~vanilla-framework/scss/settings";
-@import "~vanilla-framework/scss/base_placeholders";
-@import "~vanilla-framework/scss/base_icon-definitions";
-@import "~vanilla-framework/scss/patterns_icons";
+@import "vanilla-framework";
 
 @include vf-b-placeholders;
 @include vf-p-icons-common;

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/MultiSelect/MultiSelect.scss

@@ -1,11 +1,15 @@
 @use "sass:map";
 @import "vanilla-framework";
-@include vf-base;
-@include vf-p-lists;
+@include vf-b-placeholders; // Vanilla base placeholders to extend from
 
 $dropdown-max-height: 20rem;
 
 .multi-select {
+  // Scope Vanilla form includes to multi select component only
+  // to avoid overriding any Vanilla base styles
+  // XXX: This is a workaround for https://github.com/canonical/vanilla-framework/issues/5030
+  @include vf-b-forms;
+
   position: relative;
 }
 
@@ -37,12 +41,12 @@ $dropdown-max-height: 20rem;
 }
 
 .multi-select__dropdown {
-  @extend %vf-bg--x-light;
-  @extend %vf-has-box-shadow;
+  background-color: $colors--theme--background-default;
+  box-shadow: $box-shadow;
+  color: $colors--theme--text-default;
   left: 0;
   max-height: $dropdown-max-height;
   overflow: auto;
-
   padding-top: $spv--small;
   position: absolute;
   right: 0;
@@ -59,14 +63,15 @@ $dropdown-max-height: 20rem;
 }
 
 .multi-select__dropdown-list {
-  @extend %vf-list;
-
+  list-style: none;
   margin-bottom: $sph--x-small;
+  margin-left: 0;
+  padding-left: 0;
 }
 
 .multi-select__footer {
-  background: white;
-  border-top: 1px solid $color-mid-light;
+  background: $colors--theme--background-default;
+  border-top: 1px solid $colors--theme--border-default;
   bottom: 0;
   display: flex;
   flex-wrap: wrap;
@@ -97,12 +102,6 @@ $dropdown-max-height: 20rem;
   }
 }
 
-.multi-select__dropdown-item-description {
-  @extend %small-text;
-
-  color: $color-mid-dark;
-}
-
 .multi-select__dropdown-button {
   border: 0;
   margin-bottom: 0;
@@ -113,7 +112,7 @@ $dropdown-max-height: 20rem;
 }
 
 .multi-select__selected-list {
-  background-color: $colors--light-theme--background-inputs;
+  background-color: $colors--theme--background-inputs;
   border-bottom: 0;
   margin: 0;
   overflow: hidden;
@@ -142,12 +141,12 @@ $dropdown-max-height: 20rem;
     transform: translateY(-50%) rotate(-180deg);
 
     @extend %icon;
-    @include vf-icon-chevron($color-mid-dark);
+    @include vf-icon-chevron-themed;
     @include vf-transition($property: transform, $duration: fast);
   }
 
   &[aria-expanded="true"] {
-    background-color: $colors--light-theme--background-hover;
+    background-color: $colors--theme--background-hover;
   }
 
   &[aria-expanded="false"] {

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.5",
+  "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",
@@ -85,7 +86,7 @@
     "ts-jest": "29.1.2",
     "tsc-alias": "1.8.8",
     "typescript": "5.3.3",
-    "vanilla-framework": "4.6.0",
+    "vanilla-framework": "4.9.0",
     "wait-on": "7.2.0",
     "webpack": "5.89.0"
   },
@@ -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"