@canonical/react-components 0.59.0 → 0.60.0

package/dist/components/SearchBox/SearchBox.stories.js

@@ -0,0 +1,106 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Navigation = exports.ExternalState = exports.Disabled = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _SearchBox = _interopRequireDefault(require("./SearchBox"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const meta = {
+  component: _SearchBox.default,
+  tags: ["autodocs"]
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  name: "Default"
+};
+const Disabled = exports.Disabled = {
+  render: () => /*#__PURE__*/_react.default.createElement(_SearchBox.default, {
+    disabled: true
+  }),
+  name: "Disabled"
+};
+
+/**
+ * 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.
+ */
+const ExternalState = exports.ExternalState = {
+  render: () => /*#__PURE__*/_react.default.createElement(_SearchBox.default, {
+    externallyControlled: true,
+    shouldRefocusAfterReset: true,
+    onChange: () => {},
+    value: "..."
+  }),
+  name: "External state"
+};
+const Navigation = exports.Navigation = {
+  render: () => /*#__PURE__*/_react.default.createElement("header", {
+    id: "navigation",
+    className: "p-navigation"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "p-navigation__row--full-width"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "p-navigation__banner"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "p-navigation__logo"
+  }, /*#__PURE__*/_react.default.createElement("a", {
+    className: "p-navigation__item",
+    href: "#test"
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    className: "p-navigation__image",
+    src: "https://assets.ubuntu.com/v1/5d6da5c4-logo-canonical-aubergine.svg",
+    alt: "",
+    width: "95"
+  }))), /*#__PURE__*/_react.default.createElement("a", {
+    href: "#navigation",
+    className: "p-navigation__toggle--open",
+    title: "menu"
+  }, "Menu"), /*#__PURE__*/_react.default.createElement("a", {
+    href: "#navigation-closed",
+    className: "p-navigation__toggle--close",
+    title: "close menu"
+  }, "Close menu")), /*#__PURE__*/_react.default.createElement("nav", {
+    className: "p-navigation__nav"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "u-off-screen"
+  }, /*#__PURE__*/_react.default.createElement("a", {
+    href: "#main-content"
+  }, "Jump to main content")), /*#__PURE__*/_react.default.createElement("ul", {
+    className: "p-navigation__items",
+    role: "menu"
+  }, /*#__PURE__*/_react.default.createElement("li", {
+    className: "p-navigation__item",
+    role: "menuitem"
+  }, /*#__PURE__*/_react.default.createElement("a", {
+    href: "#test",
+    className: "p-navigation__link"
+  }, "Products")), /*#__PURE__*/_react.default.createElement("li", {
+    className: "p-navigation__item",
+    role: "menuitem"
+  }, /*#__PURE__*/_react.default.createElement("a", {
+    href: "#test",
+    className: "p-navigation__link"
+  }, "Services")), /*#__PURE__*/_react.default.createElement("li", {
+    className: "p-navigation__item",
+    role: "menuitem"
+  }, /*#__PURE__*/_react.default.createElement("a", {
+    href: "#test",
+    className: "p-navigation__link"
+  }, "Partners")), /*#__PURE__*/_react.default.createElement("li", {
+    className: "p-navigation__item",
+    role: "menuitem"
+  }, /*#__PURE__*/_react.default.createElement("a", {
+    href: "#test",
+    className: "p-navigation__link"
+  }, "About")), /*#__PURE__*/_react.default.createElement("li", {
+    className: "p-navigation__item",
+    role: "menuitem"
+  }, /*#__PURE__*/_react.default.createElement("a", {
+    href: "#test",
+    className: "p-navigation__link"
+  }, "Partners"))), /*#__PURE__*/_react.default.createElement(_SearchBox.default, null)))),
+  name: "Navigation"
+};

package/dist/components/Select/Select.d.ts

@@ -62,5 +62,10 @@ export type Props = PropsWithSpread<{
      */
     wrapperClassName?: ClassName;
 }, SelectHTMLAttributes<HTMLSelectElement>>;
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Select](https://docs.vanillaframework.io/base/forms/#select).
+ *
+ * Use the Select component to create a drop-down list.
+ */
 declare const Select: ({ caution, className, error, help, id, label, labelClassName, onChange, options, required, stacked, success, takeFocus, wrapperClassName, ...selectProps }: Props) => JSX.Element;
 export default Select;

package/dist/components/Select/Select.js

@@ -26,6 +26,12 @@ const generateOptions = options => options === null || options === void 0 ? void
     key: "".concat(value) || label
   }, props), label);
 });
+
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Select](https://docs.vanillaframework.io/base/forms/#select).
+ *
+ * Use the Select component to create a drop-down list.
+ */
 const Select = _ref2 => {
   let {
     caution,

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

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

package/dist/components/Select/Select.stories.js

@@ -0,0 +1,97 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SelectMultiple = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Select = _interopRequireDefault(require("./Select"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const meta = {
+  component: _Select.default,
+  tags: ["autodocs"],
+  argTypes: {
+    caution: {
+      control: {
+        type: "text"
+      }
+    },
+    error: {
+      control: {
+        type: "text"
+      }
+    },
+    help: {
+      control: {
+        type: "text"
+      }
+    },
+    label: {
+      control: {
+        type: "text"
+      }
+    },
+    success: {
+      control: {
+        type: "text"
+      }
+    },
+    id: {
+      control: {
+        disable: true
+      }
+    },
+    options: {
+      control: {
+        disable: true
+      }
+    }
+  }
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  name: "Select",
+  args: {
+    name: "exampleSelect",
+    id: "exampleSelect2",
+    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"
+  }
+};
+const SelectMultiple = exports.SelectMultiple = {
+  render: () => /*#__PURE__*/_react.default.createElement(_Select.default, {
+    name: "exampleSelectMulti",
+    id: "exampleSelectMulti2",
+    options: [{
+      value: "",
+      disabled: true,
+      label: "Select..."
+    }, {
+      value: "1",
+      label: "Cosmic Cuttlefish"
+    }, {
+      value: "2",
+      label: "Bionic Beaver"
+    }, {
+      value: "3",
+      label: "Xenial Xerus"
+    }],
+    label: "Ubuntu releases",
+    multiple: true
+  }),
+  name: "Select multiple"
+};

package/dist/components/Slider/Slider.d.ts

@@ -52,5 +52,11 @@ export type Props = PropsWithSpread<{
      */
     showInput?: boolean;
 }, HTMLProps<HTMLInputElement>>;
+/**
+ * This is the [React](https://reactjs.org/) component for the Vanilla [Slider](https://vanillaframework.io/docs/patterns/slider).
+ *
+ * Sliders should be used to let a user specify a numeric value between a defined
+minimum and maximum value, however the precise value is not especially important.
+ */
 export declare const Slider: ({ caution, disabled, error, help, id, inputDisabled, label, max, min, onChange, required, showInput, ...inputProps }: Props) => JSX.Element;
 export default Slider;

package/dist/components/Slider/Slider.js

@@ -12,6 +12,12 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 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); }
 const FILLED_COLOR = exports.FILLED_COLOR = "#0066CC";
 const EMPTY_COLOR = exports.EMPTY_COLOR = "#D9D9D9";
+/**
+ * This is the [React](https://reactjs.org/) component for the Vanilla [Slider](https://vanillaframework.io/docs/patterns/slider).
+ *
+ * Sliders should be used to let a user specify a numeric value between a defined
+minimum and maximum value, however the precise value is not especially important.
+ */
 const Slider = _ref => {
   var _navigator;
   let {

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

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from "@storybook/react";
+import Slider from "./Slider";
+declare const meta: Meta<typeof Slider>;
+export default meta;
+type Story = StoryObj<typeof Slider>;
+export declare const Default: Story;
+/**
+ * You can also optionally provide a numeric representation of the slider value.
+ */
+export declare const WithInput: Story;

package/dist/components/Slider/Slider.stories.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithInput = exports.Default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Slider = _interopRequireDefault(require("./Slider"));
+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; }
+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); }
+const Template = args => {
+  const [selectedValue, setSelectedValue] = (0, _react.useState)(50);
+  return /*#__PURE__*/_react.default.createElement(_Slider.default, _extends({}, args, {
+    onChange: e => setSelectedValue(Number(e.target.value)),
+    value: selectedValue
+  }));
+};
+const meta = {
+  component: _Slider.default,
+  render: Template,
+  tags: ["autodocs"],
+  argTypes: {
+    caution: {
+      control: {
+        type: "text"
+      }
+    },
+    error: {
+      control: {
+        type: "text"
+      }
+    },
+    help: {
+      control: {
+        type: "text"
+      }
+    },
+    label: {
+      control: {
+        type: "text"
+      }
+    }
+  }
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  render: Template.bind({}),
+  name: "Default",
+  args: {
+    disabled: false,
+    label: "Volume",
+    max: 100,
+    min: 0,
+    showInput: false
+  }
+};
+
+/**
+ * You can also optionally provide a numeric representation of the slider value.
+ */
+const WithInput = exports.WithInput = {
+  render: Template.bind({}),
+  name: "With input",
+  args: {
+    disabled: false,
+    inputDisabled: false,
+    label: "Volume",
+    max: 100,
+    min: 0,
+    showInput: true
+  }
+};

package/dist/components/Spinner/Spinner.d.ts

@@ -22,5 +22,8 @@ export type Props = {
      */
     ariaLive?: "assertive" | "off" | "polite";
 } & HTMLProps<HTMLSpanElement>;
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Spin](https://docs.vanillaframework.io/settings/animation-settings/#spin) animation.
+ */
 declare const Spinner: ({ className, text, isLight, ariaLive, role, ...props }: Props) => JSX.Element;
 export default Spinner;

package/dist/components/Spinner/Spinner.js

@@ -9,6 +9,9 @@ var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 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 [Spin](https://docs.vanillaframework.io/settings/animation-settings/#spin) animation.
+ */
 const Spinner = _ref => {
   let {
     className,

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

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

package/dist/components/Spinner/Spinner.stories.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Text = exports.Default = exports.Assertive = void 0;
+var _Spinner = _interopRequireDefault(require("./Spinner"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const meta = {
+  component: _Spinner.default,
+  tags: ["autodocs"]
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  name: "Default"
+};
+const Text = exports.Text = {
+  name: "Text",
+  args: {
+    text: "Loading..."
+  }
+};
+const Assertive = exports.Assertive = {
+  name: "Assertive",
+  args: {
+    ariaLive: "assertive"
+  }
+};

package/dist/components/StatusLabel/StatusLabel.d.ts

@@ -25,7 +25,9 @@ export type Props = PropsWithSpread<{
     className?: ClassName;
 }, HTMLProps<HTMLDivElement>>;
 /**
- * A component for the Vanilla Label.
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Label](https://vanillaframework.io/docs/patterns/labels).
+ *
+ * Labels are static elements which you can apply to signify status, tags or any other information you find useful.
  */
 declare const StatusLabel: ({ appearance, children, className, ...labelProps }: Props) => JSX.Element;
 export default StatusLabel;

package/dist/components/StatusLabel/StatusLabel.js

@@ -21,7 +21,9 @@ const StatusLabelAppearance = exports.StatusLabelAppearance = {
  */
 
 /**
- * A component for the Vanilla Label.
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Label](https://vanillaframework.io/docs/patterns/labels).
+ *
+ * Labels are static elements which you can apply to signify status, tags or any other information you find useful.
  */
 const StatusLabel = _ref => {
   let {

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

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from "@storybook/react";
+import StatusLabel from "./StatusLabel";
+declare const meta: Meta<typeof StatusLabel>;
+export default meta;
+type Story = StoryObj<typeof StatusLabel>;
+export declare const Default: Story;
+export declare const Positive: Story;
+export declare const Caution: Story;
+export declare const Negative: Story;
+export declare const Information: Story;

package/dist/components/StatusLabel/StatusLabel.stories.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Positive = exports.Negative = exports.Information = exports.Default = exports.Caution = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _StatusLabel = _interopRequireWildcard(require("./StatusLabel"));
+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 meta = {
+  component: _StatusLabel.default,
+  tags: ["autodocs"],
+  argTypes: {
+    children: {
+      control: {
+        type: "text"
+      }
+    },
+    appearance: {
+      control: {
+        options: _StatusLabel.StatusLabelAppearance,
+        type: "select"
+      }
+    }
+  },
+  args: {
+    children: "Label",
+    appearance: _StatusLabel.StatusLabelAppearance.POSITIVE
+  }
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  render: () => /*#__PURE__*/_react.default.createElement(_StatusLabel.default, null, "Default"),
+  name: "Default"
+};
+const Positive = exports.Positive = {
+  render: () => /*#__PURE__*/_react.default.createElement(_StatusLabel.default, {
+    appearance: "positive"
+  }, "Positive"),
+  name: "Positive"
+};
+const Caution = exports.Caution = {
+  render: () => /*#__PURE__*/_react.default.createElement(_StatusLabel.default, {
+    appearance: "caution"
+  }, "Caution"),
+  name: "Caution"
+};
+const Negative = exports.Negative = {
+  render: () => /*#__PURE__*/_react.default.createElement(_StatusLabel.default, {
+    appearance: "negative"
+  }, "Negative"),
+  name: "Negative"
+};
+const Information = exports.Information = {
+  render: () => /*#__PURE__*/_react.default.createElement(_StatusLabel.default, {
+    appearance: "information"
+  }, "Information"),
+  name: "Information"
+};

package/dist/components/Strip/Strip.d.ts

@@ -55,5 +55,10 @@ export type Props = PropsWithSpread<{
      */
     type?: string;
 }, HTMLProps<HTMLElement>>;
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Strip](https://docs.vanillaframework.io/patterns/strip/).
+ *
+ * The strip pattern provides a full width strip container in which to wrap a row.
+ */
 declare const Strip: ({ background, bordered, children, className, colSize, dark, deep, includeCol, element: Component, light, rowClassName, shallow, type, ...props }: Props) => JSX.Element;
 export default Strip;

package/dist/components/Strip/Strip.js

@@ -10,6 +10,11 @@ var _Col = _interopRequireDefault(require("../Col"));
 var _Row = _interopRequireDefault(require("../Row"));
 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 [Strip](https://docs.vanillaframework.io/patterns/strip/).
+ *
+ * The strip pattern provides a full width strip container in which to wrap a row.
+ */
 const Strip = _ref => {
   let {
     background,

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

@@ -0,0 +1,12 @@
+import { Meta, StoryObj } from "@storybook/react";
+import Strip from "./Strip";
+declare const meta: Meta<typeof Strip>;
+export default meta;
+type Story = StoryObj<typeof Strip>;
+export declare const LightStrip: Story;
+export declare const DarkStrip: Story;
+export declare const AccentStrip: Story;
+export declare const ImageStrip: Story;
+export declare const BorderedStrip: Story;
+export declare const DeepStrip: Story;
+export declare const ShallowStrip: Story;