@canonical/react-components 0.59.0 → 0.60.0

package/dist/components/PasswordToggle/PasswordToggle.d.ts

@@ -54,6 +54,11 @@ export type Props = PropsWithSpread<{
      */
     wrapperClassName?: string;
 }, InputHTMLAttributes<HTMLInputElement>>;
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Password Toggle](https://docs.vanillaframework.io/base/forms/#password-toggle).
+ *
+ * It can be used when an input needs to obscure its value, whilst giving the user a way to reveal it if needed.
+ */
 declare const PasswordToggle: React.ForwardRefExoticComponent<{
     /**
      * The content for caution validation.

package/dist/components/PasswordToggle/PasswordToggle.js

@@ -21,6 +21,11 @@ let Label = exports.Label = /*#__PURE__*/function (Label) {
 /**
  * The props for the Password Toggle component.
  */
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Password Toggle](https://docs.vanillaframework.io/base/forms/#password-toggle).
+ *
+ * It can be used when an input needs to obscure its value, whilst giving the user a way to reveal it if needed.
+ */
 const PasswordToggle = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     caution,

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

@@ -0,0 +1,12 @@
+import { Meta, StoryObj } from "@storybook/react";
+import PasswordToggle from "./PasswordToggle";
+declare const meta: Meta<typeof PasswordToggle>;
+export default meta;
+type Story = StoryObj<typeof PasswordToggle>;
+export declare const Default: Story;
+export declare const ReadOnly: Story;
+export declare const Error: Story;
+export declare const Success: Story;
+export declare const Caution: Story;
+export declare const Help: Story;
+export declare const Disabled: Story;

package/dist/components/PasswordToggle/PasswordToggle.stories.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Success = exports.ReadOnly = exports.Help = exports.Error = exports.Disabled = exports.Default = exports.Caution = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _PasswordToggle = _interopRequireDefault(require("./PasswordToggle"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const meta = {
+  component: _PasswordToggle.default,
+  tags: ["autodocs"]
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  render: () => /*#__PURE__*/_react.default.createElement(_PasswordToggle.default, {
+    id: "examplePassword1",
+    label: "Password"
+  }),
+  name: "Default"
+};
+const ReadOnly = exports.ReadOnly = {
+  render: () => /*#__PURE__*/_react.default.createElement(_PasswordToggle.default, {
+    id: "examplePassword2",
+    label: "Password",
+    readOnly: true,
+    defaultValue: "password"
+  }),
+  name: "Read only"
+};
+const Error = exports.Error = {
+  render: () => /*#__PURE__*/_react.default.createElement(_PasswordToggle.default, {
+    error: "This field is required.",
+    id: "examplePassword3",
+    label: "Password",
+    defaultValue: "password"
+  }),
+  name: "Error"
+};
+const Success = exports.Success = {
+  render: () => /*#__PURE__*/_react.default.createElement(_PasswordToggle.default, {
+    success: "Strong password",
+    id: "examplePassword4",
+    label: "Password",
+    defaultValue: "password"
+  }),
+  name: "Success"
+};
+const Caution = exports.Caution = {
+  render: () => /*#__PURE__*/_react.default.createElement(_PasswordToggle.default, {
+    caution: "Weak password",
+    id: "examplePassword5",
+    label: "Password",
+    defaultValue: "password"
+  }),
+  name: "Caution"
+};
+const Help = exports.Help = {
+  render: () => /*#__PURE__*/_react.default.createElement(_PasswordToggle.default, {
+    help: "Enter a secure password",
+    id: "examplePassword6",
+    label: "Password"
+  }),
+  name: "Help"
+};
+const Disabled = exports.Disabled = {
+  render: () => /*#__PURE__*/_react.default.createElement(_PasswordToggle.default, {
+    disabled: true,
+    id: "examplePassword7",
+    label: "Password",
+    defaultValue: "password"
+  }),
+  name: "Disabled"
+};

package/dist/components/RadioInput/RadioInput.d.ts

@@ -1,4 +1,9 @@
 import type { CheckableInputProps } from "../CheckboxInput/CheckableInput";
 export type Props = Omit<CheckableInputProps, "inputType">;
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Radio input](https://docs.vanillaframework.io/base/forms#radio-button).
+ *
+ * Use radio buttons to select one of the given set of options.
+ */
 declare const RadioInput: ({ label, ...radioProps }: Props) => JSX.Element;
 export default RadioInput;

package/dist/components/RadioInput/RadioInput.js

@@ -8,6 +8,11 @@ var _react = _interopRequireDefault(require("react"));
 var _CheckableInput = _interopRequireDefault(require("../CheckboxInput/CheckableInput"));
 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 [Radio input](https://docs.vanillaframework.io/base/forms#radio-button).
+ *
+ * Use radio buttons to select one of the given set of options.
+ */
 const RadioInput = _ref => {
   let {
     label,

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

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

package/dist/components/RadioInput/RadioInput.stories.js

@@ -0,0 +1,83 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Required = exports.Inline = exports.Disabled = exports.Default = exports.Children = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _RadioInput = _interopRequireDefault(require("./RadioInput"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const meta = {
+  component: _RadioInput.default,
+  tags: ["autodocs"],
+  argTypes: {
+    label: {
+      control: {
+        type: "text"
+      }
+    },
+    disabled: {
+      control: {
+        type: "boolean"
+      }
+    },
+    required: {
+      control: {
+        type: "boolean"
+      }
+    },
+    inline: {
+      control: {
+        type: "boolean"
+      }
+    },
+    indeterminate: {
+      control: {
+        type: "boolean"
+      }
+    }
+  },
+  args: {
+    label: "RadioInput"
+  }
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  render: () => /*#__PURE__*/_react.default.createElement(_RadioInput.default, {
+    label: "RadioInput"
+  }),
+  name: "Default"
+};
+const Children = exports.Children = {
+  render: () => /*#__PURE__*/_react.default.createElement(_RadioInput.default, {
+    label: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "I agree to", /*#__PURE__*/_react.default.createElement("a", {
+      href: "http://ubuntu.com/legal"
+    }, "Terms and Conditions")),
+    name: "RadioInput"
+  }),
+  name: "Children"
+};
+const Disabled = exports.Disabled = {
+  render: () => /*#__PURE__*/_react.default.createElement(_RadioInput.default, {
+    label: "Disabled",
+    name: "RadioInput",
+    disabled: true
+  }),
+  name: "Disabled"
+};
+const Required = exports.Required = {
+  render: () => /*#__PURE__*/_react.default.createElement(_RadioInput.default, {
+    label: "Required",
+    name: "RadioInput",
+    required: true
+  }),
+  name: "Required"
+};
+const Inline = exports.Inline = {
+  render: () => /*#__PURE__*/_react.default.createElement(_RadioInput.default, {
+    label: "Inline",
+    name: "RadioInput",
+    inline: true
+  }),
+  name: "Inline"
+};

package/dist/components/Row/Row.d.ts

@@ -10,5 +10,10 @@ export type Props = PropsWithSpread<{
      */
     className?: ClassName;
 }, HTMLProps<HTMLDivElement>>;
+/**
+ * This is a [React](https://reactjs.org/) component for use within the Vanilla [Grid](https://docs.vanillaframework.io/patterns/grid/).
+ *
+ * Vanilla has a responsive grid using a combination of rows and columns.
+ */
 declare const Row: ({ children, className, ...props }: Props) => JSX.Element;
 export default Row;

package/dist/components/Row/Row.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 use within the Vanilla [Grid](https://docs.vanillaframework.io/patterns/grid/).
+ *
+ * Vanilla has a responsive grid using a combination of rows and columns.
+ */
 const Row = _ref => {
   let {
     children,

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

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from "@storybook/react";
+import Row from "./Row";
+declare const meta: Meta<typeof Row>;
+export default meta;
+type Story = StoryObj<typeof Row>;
+/**
+ * See [Col](?path=/docs/components-col--docs) for grid details.
+ */
+export declare const Default: Story;

package/dist/components/Row/Row.stories.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Default = void 0;
+var _Row = _interopRequireDefault(require("./Row"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const meta = {
+  component: _Row.default,
+  tags: ["autodocs"],
+  argTypes: {
+    children: {
+      control: {
+        type: "text"
+      }
+    }
+  }
+};
+var _default = exports.default = meta;
+/**
+ * See [Col](?path=/docs/components-col--docs) for grid details.
+ */
+const Default = exports.Default = {
+  name: "Default",
+  args: {
+    children: "children..."
+  }
+};

package/dist/components/SearchAndFilter/SearchAndFilter.d.ts

@@ -26,5 +26,8 @@ export type Props = {
      */
     onExpandChange?: () => void;
 };
+/**
+ * This component allows searching and filtering of large datasets.
+ */
 declare const SearchAndFilter: ({ existingSearchData, filterPanelData, returnSearchData, onPanelToggle, onExpandChange, ...props }: Props) => JSX.Element;
 export default SearchAndFilter;

package/dist/components/SearchAndFilter/SearchAndFilter.js

@@ -20,6 +20,9 @@ let Label = exports.Label = /*#__PURE__*/function (Label) {
   Label["SearchAndFilter"] = "Search and filter";
   return Label;
 }({});
+/**
+ * This component allows searching and filtering of large datasets.
+ */
 const SearchAndFilter = _ref => {
   let {
     existingSearchData = [],

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

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

package/dist/components/SearchAndFilter/SearchAndFilter.stories.js

@@ -0,0 +1,218 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithExistingSearchData = exports.WithDataSet = exports.Default = void 0;
+var _SearchAndFilter = _interopRequireDefault(require("./SearchAndFilter"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const meta = {
+  component: _SearchAndFilter.default,
+  tags: ["autodocs"]
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  name: "Default",
+  args: {
+    returnSearchData: () => {},
+    filterPanelData: [{
+      id: 0,
+      heading: "Cloud",
+      chips: [{
+        lead: "Cloud",
+        value: "Google"
+      }, {
+        lead: "Cloud",
+        value: "AWS"
+      }, {
+        lead: "Cloud",
+        value: "Azure"
+      }]
+    }, {
+      id: 1,
+      heading: "Region",
+      chips: [{
+        lead: "Region",
+        value: "us-east1"
+      }, {
+        lead: "Region",
+        value: "us-north2"
+      }, {
+        lead: "Region",
+        value: "us-south3"
+      }, {
+        lead: "Region",
+        value: "us-north4"
+      }, {
+        lead: "Region",
+        value: "us-east5"
+      }, {
+        lead: "Region",
+        value: "us-south6"
+      }, {
+        lead: "Region",
+        value: "us-east7"
+      }, {
+        lead: "Region",
+        value: "us-east8"
+      }, {
+        lead: "Region",
+        value: "us-east9"
+      }, {
+        lead: "Region",
+        value: "us-east10"
+      }]
+    }, {
+      id: 2,
+      heading: "Owner",
+      chips: [{
+        lead: "Owner",
+        value: "foo"
+      }, {
+        lead: "Owner",
+        value: "bar"
+      }, {
+        lead: "Owner",
+        value: "baz"
+      }]
+    }]
+  }
+};
+const WithDataSet = exports.WithDataSet = {
+  name: "With data set",
+  args: {
+    filterPanelData: [{
+      id: 0,
+      heading: "Cloud",
+      chips: [{
+        lead: "Cloud",
+        value: "Google"
+      }, {
+        lead: "Cloud",
+        value: "AWS"
+      }, {
+        lead: "Cloud",
+        value: "Azure"
+      }]
+    }, {
+      id: 1,
+      heading: "Region",
+      chips: [{
+        lead: "Region",
+        value: "us-east1"
+      }, {
+        lead: "Region",
+        value: "us-north2"
+      }, {
+        lead: "Region",
+        value: "us-south3"
+      }, {
+        lead: "Region",
+        value: "us-north4"
+      }, {
+        lead: "Region",
+        value: "us-east5"
+      }, {
+        lead: "Region",
+        value: "us-south6"
+      }, {
+        lead: "Region",
+        value: "us-east7"
+      }, {
+        lead: "Region",
+        value: "us-east8"
+      }, {
+        lead: "Region",
+        value: "us-east9"
+      }, {
+        lead: "Region",
+        value: "us-east10"
+      }]
+    }, {
+      id: 2,
+      heading: "Owner",
+      chips: [{
+        lead: "Owner",
+        value: "foo"
+      }, {
+        lead: "Owner",
+        value: "bar"
+      }, {
+        lead: "Owner",
+        value: "baz"
+      }]
+    }],
+    returnSearchData: () => {}
+  }
+};
+const WithExistingSearchData = exports.WithExistingSearchData = {
+  name: "With existing search data",
+  args: {
+    existingSearchData: [{
+      lead: "Cloud",
+      value: "Google"
+    }],
+    filterPanelData: [{
+      id: 0,
+      heading: "Cloud",
+      chips: [{
+        lead: "Cloud",
+        value: "Google"
+      }, {
+        lead: "Cloud",
+        value: "AWS"
+      }, {
+        lead: "Cloud",
+        value: "Azure"
+      }]
+    }, {
+      id: 1,
+      heading: "Region",
+      chips: [{
+        lead: "Region",
+        value: "us-east1"
+      }, {
+        lead: "Region",
+        value: "us-north2"
+      }, {
+        lead: "Region",
+        value: "us-south3"
+      }, {
+        lead: "Region",
+        value: "us-north4"
+      }, {
+        lead: "Region",
+        value: "us-east5"
+      }, {
+        lead: "Region",
+        value: "us-south6"
+      }, {
+        lead: "Region",
+        value: "us-east7"
+      }, {
+        lead: "Region",
+        value: "us-east8"
+      }, {
+        lead: "Region",
+        value: "us-east9"
+      }, {
+        lead: "Region",
+        value: "us-east10"
+      }]
+    }, {
+      id: 2,
+      heading: "Owner",
+      chips: [{
+        lead: "Owner",
+        value: "foo"
+      }, {
+        lead: "Owner",
+        value: "bar"
+      }, {
+        lead: "Owner",
+        value: "baz"
+      }]
+    }],
+    returnSearchData: () => {}
+  }
+};

package/dist/components/SearchBox/SearchBox.d.ts

@@ -50,5 +50,10 @@ export type Props = PropsWithSpread<{
      */
     value?: string;
 }, HTMLProps<HTMLInputElement>>;
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [SearchBox](https://docs.vanillaframework.io/patterns/search-box/).
+ *
+ * Search boxes enable search functionality on a page and are typically used in a navigation bar. SearchBox elements should be wrapped within a form element that handles its own submit action.
+ */
 declare const SearchBox: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export default SearchBox;

package/dist/components/SearchBox/SearchBox.js

@@ -16,6 +16,11 @@ let Label = exports.Label = /*#__PURE__*/function (Label) {
   Label["Search"] = "Search";
   return Label;
 }({});
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [SearchBox](https://docs.vanillaframework.io/patterns/search-box/).
+ *
+ * Search boxes enable search functionality on a page and are typically used in a navigation bar. SearchBox elements should be wrapped within a form element that handles its own submit action.
+ */
 const SearchBox = /*#__PURE__*/_react.default.forwardRef((_ref, forwardedRef) => {
   let {
     autocomplete = "on",

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

@@ -0,0 +1,14 @@
+import { Meta, StoryObj } from "@storybook/react";
+import SearchBox from "./SearchBox";
+declare const meta: Meta<typeof SearchBox>;
+export default meta;
+type Story = StoryObj<typeof SearchBox>;
+export declare const Default: Story;
+export declare const Disabled: Story;
+/**
+ * If you wish to control the value of the input via external state you can set
+the `externallyControlled` prop and provide an `onChange` method to update the
+state and the `value` from state.
+ */
+export declare const ExternalState: Story;
+export declare const Navigation: Story;