@canonical/react-components 1.5.0 → 1.7.0

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(e) { return e && e.__esModule ? e : { default: e }; }
+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/Row/Row.test.d.ts

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

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

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

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(e) { return e && e.__esModule ? e : { default: e }; }
+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/SearchAndFilter/SearchAndFilter.test.d.ts

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

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;

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(e) { return e && e.__esModule ? e : { default: e }; }
+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/SearchBox/SearchBox.test.d.ts

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

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(e) { return e && e.__esModule ? e : { default: e }; }
+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/Select/Select.test.d.ts

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

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

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import SideNavigation from "./SideNavigation";
+declare const meta: Meta<typeof SideNavigation>;
+export default meta;
+type Story = StoryObj<typeof SideNavigation>;
+/**
+ * Menu items can be provided as links, text or custom components. To provide attributes to individual menus then each menu can be provided as a object containing an items array: `{ className: "menu-one", items: [...] }`.
+ */
+export declare const Default: Story;
+/**
+ * `children` can be provided instead of `items` in cases where custom content
+ * is required.
+ */
+export declare const CustomContent: Story;

package/dist/components/SideNavigation/SideNavigation.stories.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Default = exports.CustomContent = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Badge = _interopRequireDefault(require("../Badge"));
+var _SideNavigation = _interopRequireDefault(require("./SideNavigation"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const meta = {
+  component: _SideNavigation.default,
+  tags: ["autodocs"]
+};
+var _default = exports.default = meta;
+/**
+ * Menu items can be provided as links, text or custom components. To provide attributes to individual menus then each menu can be provided as a object containing an items array: `{ className: "menu-one", items: [...] }`.
+ */
+const Default = exports.Default = {
+  args: {
+    items: [{
+      className: "menu-one",
+      items: [{
+        icon: "drag",
+        label: "Models",
+        href: "/models",
+        status: /*#__PURE__*/_react.default.createElement(_Badge.default, {
+          value: 9,
+          isNegative: true
+        })
+      }, {
+        icon: "menu",
+        label: "Controllers",
+        nonInteractive: true
+      }, {
+        icon: "user",
+        label: "Permissions",
+        href: "/users"
+      }]
+    }, {
+      className: "menu-two",
+      items: [{
+        icon: "information",
+        label: "Docs",
+        href: "/docs"
+      }, {
+        label: "Logout",
+        href: "/logout"
+      }]
+    }]
+  }
+};
+
+/**
+ * `children` can be provided instead of `items` in cases where custom content
+ * is required.
+ */
+const CustomContent = exports.CustomContent = {
+  args: {
+    children: /*#__PURE__*/_react.default.createElement("div", null, "Custom menu content.")
+  }
+};

package/dist/components/SideNavigation/SideNavigation.test.d.ts

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

package/dist/components/SideNavigation/SideNavigationBase/SideNavigationBase.test.d.ts

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

package/dist/components/SideNavigation/SideNavigationItem/SideNavigationItem.stories.d.ts

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import SideNavigationItem from "./SideNavigationItem";
+declare const meta: Meta<typeof SideNavigationItem>;
+export default meta;
+type Story = StoryObj<typeof SideNavigationItem>;
+export declare const Default: Story;
+/**
+ * The navigation item can appear as a link and accept the props from [`SideNavigationLink`](/docs/components-sidenavigation-sidenavigationlink--docs).
+ */
+export declare const Links: Story;
+/**
+ * By providing the `nonInteractive` prop the navigation item will appear as a
+ * text entry and accept the props from
+ * [`SideNavigationText`](/docs/components-sidenavigation-sidenavigationtext--docs).
+ */
+export declare const Text: Story;
+/**
+ * The navigation item can display custom content by providing the `children` prop.
+ * In this case, any other attributes provided to the object will be given to
+ * the list item.
+ */
+export declare const CustomContent: Story;

package/dist/components/SideNavigation/SideNavigationItem/SideNavigationItem.stories.js

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Text = exports.Links = exports.Default = exports.CustomContent = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _SideNavigation = _interopRequireDefault(require("../SideNavigation"));
+var _SideNavigationItem = _interopRequireDefault(require("./SideNavigationItem"));
+var _SideNavigationText = _interopRequireDefault(require("../SideNavigationText"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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); }
+const meta = {
+  component: _SideNavigationItem.default,
+  render: args => /*#__PURE__*/_react.default.createElement(_SideNavigation.default, {
+    dark: false,
+    items: [{
+      items: [/*#__PURE__*/_react.default.createElement(_SideNavigationItem.default, _extends({
+        key: "item"
+      }, args, {
+        dark: false
+      }))]
+    }]
+  }),
+  tags: ["autodocs"]
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  args: {
+    icon: "drag",
+    label: "Models",
+    href: "/models"
+  }
+};
+
+/**
+ * The navigation item can appear as a link and accept the props from [`SideNavigationLink`](/docs/components-sidenavigation-sidenavigationlink--docs).
+ */
+const Links = exports.Links = {
+  args: {
+    icon: "drag",
+    label: "Models",
+    href: "/models"
+  }
+};
+
+/**
+ * By providing the `nonInteractive` prop the navigation item will appear as a
+ * text entry and accept the props from
+ * [`SideNavigationText`](/docs/components-sidenavigation-sidenavigationtext--docs).
+ */
+const Text = exports.Text = {
+  args: {
+    icon: "drag",
+    label: "Models",
+    nonInteractive: true
+  }
+};
+
+/**
+ * The navigation item can display custom content by providing the `children` prop.
+ * In this case, any other attributes provided to the object will be given to
+ * the list item.
+ */
+const CustomContent = exports.CustomContent = {
+  args: {
+    className: "custom-class",
+    children: /*#__PURE__*/_react.default.createElement(_SideNavigationText.default, null, "This item has been given a custom class")
+  }
+};

package/dist/components/SideNavigation/SideNavigationItem/SideNavigationItem.test.d.ts

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

package/dist/components/SideNavigation/SideNavigationLink/SideNavigationLink.stories.d.ts

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