@canonical/react-components 1.2.5 → 1.3.1

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

@@ -1,218 +0,0 @@
-"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/SearchBox/SearchBox.stories.d.ts

@@ -1,14 +0,0 @@
-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

@@ -1,106 +0,0 @@
-"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/Select/Select.stories.d.ts

@@ -1,7 +0,0 @@
-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

@@ -1,97 +0,0 @@
-"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/SideNavigation/SideNavigation.stories.d.ts

@@ -1,14 +0,0 @@
-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

@@ -1,62 +0,0 @@
-"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/SideNavigationItem/SideNavigationItem.stories.d.ts

@@ -1,22 +0,0 @@
-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

@@ -1,70 +0,0 @@
-"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/SideNavigationLink/SideNavigationLink.stories.d.ts

@@ -1,7 +0,0 @@
-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;

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

@@ -1,32 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Default = exports.CustomComponent = void 0;
-var _Badge = _interopRequireDefault(require("../../Badge"));
-var _SideNavigationLink = _interopRequireDefault(require("./SideNavigationLink"));
-var _react = _interopRequireDefault(require("react"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const meta = {
-  component: _SideNavigationLink.default,
-  tags: ["autodocs"]
-};
-var _default = exports.default = meta;
-const Default = exports.Default = {
-  args: {
-    icon: "drag",
-    label: "Models",
-    status: /*#__PURE__*/_react.default.createElement(_Badge.default, {
-      value: 9,
-      isNegative: true
-    })
-  }
-};
-const CustomComponent = exports.CustomComponent = {
-  args: {
-    component: props => /*#__PURE__*/_react.default.createElement("button", props),
-    icon: "drag",
-    label: "Models"
-  }
-};

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

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

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

@@ -1,25 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Badge = _interopRequireDefault(require("../../Badge"));
-var _SideNavigationText = _interopRequireDefault(require("./SideNavigationText"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const meta = {
-  component: _SideNavigationText.default,
-  tags: ["autodocs"]
-};
-var _default = exports.default = meta;
-const Default = exports.Default = {
-  args: {
-    icon: "drag",
-    children: "Models",
-    status: /*#__PURE__*/_react.default.createElement(_Badge.default, {
-      value: 9,
-      isNegative: true
-    })
-  }
-};