@canonical/react-components 1.2.5 → 1.3.1

package/dist/components/ModularTable/ModularTable.stories.js

@@ -1,343 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Subrows = exports.Sortable = exports.LoadMore = exports.Empty = exports.Default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _SummaryButton = _interopRequireDefault(require("../SummaryButton"));
-var _ModularTable = _interopRequireDefault(require("./ModularTable"));
-var _Icon = require("../Icon");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-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 && {}.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; }
-const getSampleData = function () {
-  let i = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-  return [{
-    data: ++i * 100 + i
-  }, {
-    data: ++i * 100 + i
-  }, {
-    data: ++i * 100 + i
-  }, {
-    data: ++i * 100 + i
-  }, {
-    data: ++i * 100 + i
-  }];
-};
-const meta = {
-  component: _ModularTable.default,
-  tags: ["autodocs"]
-};
-var _default = exports.default = meta;
-const Default = exports.Default = {
-  render: () => /*#__PURE__*/_react.default.createElement(_ModularTable.default, {
-    getCellProps: _ref => {
-      let {
-        value
-      } = _ref;
-      return {
-        className: value === "1 minute" ? "p-heading--5" : ""
-      };
-    }
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    ,
-    columns: _react.default.useMemo(() => [{
-      Header: "ID",
-      accessor: "buildId",
-      Cell: _ref2 => {
-        let {
-          value
-        } = _ref2;
-        return /*#__PURE__*/_react.default.createElement("a", {
-          href: "#test"
-        }, "#", value);
-      }
-    }, {
-      Header: "Architecture",
-      accessor: "arch"
-    }, {
-      Header: "Build Duration",
-      accessor: "duration",
-      className: "u-hide--small"
-    }, {
-      Header: "Result",
-      accessor: "result",
-      Cell: _ref3 => {
-        let {
-          value
-        } = _ref3;
-        switch (value) {
-          case "released":
-            return "Released";
-          case "failed":
-            return "Failed";
-          default:
-            return "Unknown";
-        }
-      },
-      getCellIcon: _ref4 => {
-        let {
-          value
-        } = _ref4;
-        switch (value) {
-          case "released":
-            return _Icon.ICONS.success;
-          case "failed":
-            return _Icon.ICONS.error;
-          default:
-            return false;
-        }
-      }
-    }, {
-      Header: "Build Finished",
-      accessor: "finished",
-      className: "u-align-text--right"
-    }], [])
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    ,
-    data: _react.default.useMemo(() => [{
-      buildId: "5432",
-      arch: "arm64",
-      duration: "5 minutes",
-      result: "released",
-      finished: "10 minutes ago"
-    }, {
-      buildId: "1234",
-      arch: "armhf",
-      duration: "5 minutes",
-      result: "failed",
-      finished: "over 1 year ago"
-    }, {
-      buildId: "1111",
-      arch: "test64",
-      duration: "1 minute",
-      result: "other",
-      finished: "ages ago"
-    }], [])
-  }),
-  name: "Default"
-};
-const Empty = exports.Empty = {
-  render: () => /*#__PURE__*/_react.default.createElement(_ModularTable.default, {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    columns: _react.default.useMemo(() => [{
-      Header: "ID",
-      accessor: "buildId"
-    }, {
-      Header: "Architecture",
-      accessor: "arch"
-    }, {
-      Header: "Build Duration",
-      accessor: "duration",
-      className: "u-hide--small"
-    }, {
-      Header: "Result",
-      accessor: "result"
-    }, {
-      Header: "Build Finished",
-      accessor: "finished",
-      className: "u-align-text--right"
-    }], []),
-    data: [],
-    emptyMsg: "Waiting for data..."
-  }),
-  name: "Empty"
-};
-const Sortable = exports.Sortable = {
-  render: () => /*#__PURE__*/_react.default.createElement(_ModularTable.default, {
-    sortable: true,
-    initialSortColumn: "duration",
-    initialSortDirection: "ascending",
-    getCellProps: _ref5 => {
-      let {
-        value
-      } = _ref5;
-      return {
-        className: value === "1 minute" ? "p-heading--5" : ""
-      };
-    }
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    ,
-    columns: _react.default.useMemo(() => [{
-      Header: "ID",
-      accessor: "buildId",
-      sortType: "basic",
-      Cell: _ref6 => {
-        let {
-          value
-        } = _ref6;
-        return /*#__PURE__*/_react.default.createElement("a", {
-          href: "#test"
-        }, "#", value);
-      }
-    }, {
-      Header: "Architecture",
-      accessor: "arch",
-      sortType: "basic"
-    }, {
-      Header: "Build Duration",
-      accessor: "duration",
-      className: "u-hide--small",
-      sortType: "basic"
-    }, {
-      Header: "Result",
-      accessor: "result",
-      sortType: "basic",
-      Cell: _ref7 => {
-        let {
-          value
-        } = _ref7;
-        switch (value) {
-          case "released":
-            return "Released";
-          case "failed":
-            return "Failed";
-          default:
-            return "Unknown";
-        }
-      },
-      getCellIcon: _ref8 => {
-        let {
-          value
-        } = _ref8;
-        switch (value) {
-          case "released":
-            return _Icon.ICONS.success;
-          case "failed":
-            return _Icon.ICONS.error;
-          default:
-            return false;
-        }
-      }
-    }, {
-      Header: "Build Finished",
-      accessor: "finished",
-      className: "u-align-text--right",
-      sortType: "basic"
-    }], [])
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    ,
-    data: _react.default.useMemo(() => [{
-      buildId: "5432",
-      arch: "arm64",
-      duration: "5 minutes",
-      result: "released",
-      finished: "10 minutes ago"
-    }, {
-      buildId: "1234",
-      arch: "armhf",
-      duration: "5 minutes",
-      result: "failed",
-      finished: "over 1 year ago"
-    }, {
-      buildId: "1111",
-      arch: "test64",
-      duration: "1 minute",
-      result: "other",
-      finished: "ages ago"
-    }], [])
-  }),
-  name: "Sortable"
-};
-
-/**
- * Subrows can be used to group table rows under a heading that needs to appear
-at the start of the group. In the following example sorting the columns will
-sort the group rows, then sort the sub-rows, but the group header always comes first.
- */
-const Subrows = exports.Subrows = {
-  render: () => /*#__PURE__*/_react.default.createElement(_ModularTable.default, {
-    sortable: true
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    ,
-    columns: _react.default.useMemo(() => [{
-      Header: "Flavour",
-      accessor: "flavour",
-      sortType: "basic",
-      Cell: props => props.row.depth === 0 ? /*#__PURE__*/_react.default.createElement("strong", null, props.value) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("input", {
-        type: "checkbox"
-      }), " ", props.value)
-    }, {
-      Header: "Scoops",
-      accessor: "scoops",
-      sortType: "basic",
-      Cell: props => props.row.depth === 0 ? /*#__PURE__*/_react.default.createElement("span", {
-        className: "u-text--muted"
-      }, props.value) : props.value
-    }], [])
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    ,
-    data: _react.default.useMemo(() => [{
-      flavour: "Sorbet",
-      scoops: "1-2",
-      subRows: [{
-        flavour: "Lemon",
-        scoops: 2
-      }, {
-        flavour: "Mango",
-        scoops: 1
-      }, {
-        flavour: "Raspberry",
-        scoops: 2
-      }]
-    }, {
-      flavour: "Ice-cream",
-      scoops: "1-3",
-      subRows: [{
-        flavour: "Chocolate",
-        scoops: 1
-      }, {
-        flavour: "Vanilla",
-        scoops: 3
-      }, {
-        flavour: "Caramel",
-        scoops: 2
-      }]
-    }], [])
-  }),
-  name: "Subrows"
-};
-
-/**
-Example below shows a basic `ModularTable` with `SummaryButton` component in the footer.
-```
-export const getSampleData = (i = 0) => [
-  { data: ++i * 100 + i },
-  { data: ++i * 100 + i },
-  { data: ++i * 100 + i },
-  { data: ++i * 100 + i },
-  { data: ++i * 100 + i },
-];
-```
- */
-const LoadMore = exports.LoadMore = {
-  render: () => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const [data, setData] = (0, _react.useState)(getSampleData());
-    const hasMore = data.length < 20;
-    const loadMore = () => {
-      setData(data.concat(getSampleData(data.length)));
-    };
-    const columns = [{
-      Header: "Id",
-      accessor: (_d, i) => i
-    }, {
-      Header: "Data",
-      accessor: "data"
-    }];
-    const footer = hasMore ? /*#__PURE__*/_react.default.createElement("div", {
-      className: "u-align--right"
-    }, /*#__PURE__*/_react.default.createElement(_SummaryButton.default, {
-      summary: "Showing ".concat(data.length, " of 20 items."),
-      label: "Show 5 more",
-      onClick: loadMore
-    })) : null;
-    return /*#__PURE__*/_react.default.createElement(_ModularTable.default, {
-      data: data,
-      columns: columns,
-      footer: footer
-    });
-  },
-  name: "Load more"
-};

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

@@ -1,8 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { MultiSelect } from "./MultiSelect";
-declare const meta: Meta<typeof MultiSelect>;
-export default meta;
-type Story = StoryObj<typeof MultiSelect>;
-export declare const CondensedExample: Story;
-export declare const SearchExample: Story;
-export declare const WithDisabledItems: Story;

package/dist/components/MultiSelect/MultiSelect.stories.js

@@ -1,70 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.WithDisabledItems = exports.SearchExample = exports.CondensedExample = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _MultiSelect = require("./MultiSelect");
-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 && {}.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() { 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 Template = props => {
-  const [selectedItems, setSelectedItems] = (0, _react.useState)(props.selectedItems || []);
-  return /*#__PURE__*/_react.default.createElement(_MultiSelect.MultiSelect, _extends({}, props, {
-    selectedItems: selectedItems,
-    onItemsUpdate: setSelectedItems
-  }));
-};
-const meta = {
-  component: _MultiSelect.MultiSelect,
-  render: Template,
-  tags: ["autodocs"],
-  parameters: {}
-};
-var _default = exports.default = meta;
-const CondensedExample = exports.CondensedExample = {
-  args: {
-    items: [...Array.from({
-      length: 26
-    }, (_, i) => ({
-      label: "".concat(String.fromCharCode(i + 65)),
-      value: "".concat(String.fromCharCode(i + 65))
-    })), ...Array.from({
-      length: 26
-    }, (_, i) => ({
-      label: "Item ".concat(i + 1),
-      value: i + 1
-    }))],
-    selectedItems: [{
-      label: "A",
-      value: "A"
-    }, {
-      label: "Item 2",
-      value: 2
-    }],
-    variant: "condensed"
-  }
-};
-const SearchExample = exports.SearchExample = {
-  args: {
-    ...CondensedExample.args,
-    variant: "search",
-    items: [...CondensedExample.args.items.map((item, i) => ({
-      ...item,
-      group: i % 2 === 0 ? "Group 1" : "Group 2"
-    }))]
-  }
-};
-const WithDisabledItems = exports.WithDisabledItems = {
-  args: {
-    ...CondensedExample.args,
-    disabledItems: [{
-      label: "Item 1",
-      value: 1
-    }, {
-      label: "Item 2",
-      value: 2
-    }]
-  }
-};

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

@@ -1,43 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import Navigation from "./Navigation";
-declare const meta: Meta<typeof Navigation>;
-export default meta;
-type Story = StoryObj<typeof Navigation>;
-/**
- * The default navigation is constrained to the max width of the Vanilla grid and
-uses the light theme.
- */
-export declare const Default: Story;
-/**
- * You can switch to a dark themed Navigation by using the `dark` prop. This will
-automatically update the Navigation items to use lighter text and hover state
-colours.
- */
-export declare const Dark: Story;
-/**
- * Sub-navigation dropdown menus can be added to Navigation by adding an `items`
-array instead of a URL. By default, the dropdown items will align to the left of the
-parent item. This can be changed by adding `alignRight` to the subnav
-object.
- */
-export declare const Dropdown: Story;
-/**
- * Expanding search can be enabled by providing props to the underlying [`SearchBox`](/?path=/docs/searchbox--default-story)
-component. Elements to toggle the Searchbox will be included automatically if
-the SearchBox props are provided.
- */
-export declare const Search: Story;
-/**
- * Logos can be displayed using the new tag design. In cases where another logo
-style is required then an element can be provided to the `logo` prop.
- */
-export declare const OverridingTheLogo: Story;
-/**
- * In some cases such as when using [React Router](https://reactrouter.com/) it is
-necessary to use custom components for links. When this is required then a
-function can be passed to `generateLink` which should return your component.
-Bear in mind that some props like classes and on-click events might be passed to
-this function so take care in overriding any link props.
- */
-export declare const OverridingTheLinkComponent: Story;
-export declare const NoMenuItems: Story;

package/dist/components/Navigation/Navigation.stories.js

@@ -1,232 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Search = exports.OverridingTheLogo = exports.OverridingTheLinkComponent = exports.NoMenuItems = exports.Dropdown = exports.Default = exports.Dark = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Navigation = _interopRequireDefault(require("./Navigation"));
-var _enums = require("../../enums");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const meta = {
-  component: _Navigation.default,
-  tags: ["autodocs"]
-};
-var _default = exports.default = meta;
-/**
- * The default navigation is constrained to the max width of the Vanilla grid and
-uses the light theme.
- */
-const Default = exports.Default = {
-  name: "Default",
-  args: {
-    items: [{
-      label: "Products",
-      url: "#"
-    }, {
-      label: "Services",
-      url: "#"
-    }, {
-      label: "Partners",
-      url: "#"
-    }],
-    logo: {
-      src: "https://assets.ubuntu.com/v1/82818827-CoF_white.svg",
-      title: "Canonical",
-      url: "#"
-    }
-  }
-};
-
-/**
- * You can switch to a dark themed Navigation by using the `dark` prop. This will
-automatically update the Navigation items to use lighter text and hover state
-colours.
- */
-const Dark = exports.Dark = {
-  name: "Dark",
-  args: {
-    items: [{
-      label: "Products",
-      url: "#"
-    }, {
-      label: "Services",
-      url: "#"
-    }, {
-      label: "Partners",
-      url: "#"
-    }],
-    logo: {
-      src: "https://assets.ubuntu.com/v1/82818827-CoF_white.svg",
-      title: "Canonical",
-      url: "#"
-    },
-    theme: _enums.Theme.DARK
-  }
-};
-
-/**
- * Sub-navigation dropdown menus can be added to Navigation by adding an `items`
-array instead of a URL. By default, the dropdown items will align to the left of the
-parent item. This can be changed by adding `alignRight` to the subnav
-object.
- */
-const Dropdown = exports.Dropdown = {
-  name: "Dropdown",
-  args: {
-    items: [{
-      items: [{
-        label: "Introduction",
-        url: "#"
-      }, {
-        label: "News",
-        url: "#"
-      }, {
-        label: "Getting started - Command line",
-        url: "#"
-      }, {
-        label: "Getting started - OpenStack",
-        url: "#"
-      }, {
-        label: "Getting started - OpenNebula",
-        url: "#"
-      }],
-      label: "LXD"
-    }, {
-      items: [{
-        label: "Introduction",
-        url: "#"
-      }, {
-        label: "News",
-        url: "#"
-      }, {
-        label: "Getting started",
-        url: "#"
-      }],
-      label: "LXCFS"
-    }],
-    itemsRight: [{
-      alignRight: true,
-      items: [{
-        label: "Sign out",
-        url: "#"
-      }],
-      label: "My account"
-    }],
-    logo: {
-      src: "https://assets.ubuntu.com/v1/82818827-CoF_white.svg",
-      title: "LXD",
-      url: "#"
-    }
-  }
-};
-
-/**
- * Expanding search can be enabled by providing props to the underlying [`SearchBox`](/?path=/docs/searchbox--default-story)
-component. Elements to toggle the Searchbox will be included automatically if
-the SearchBox props are provided.
- */
-const Search = exports.Search = {
-  name: "Search",
-  args: {
-    items: [{
-      label: "Products",
-      url: "#"
-    }, {
-      label: "Services",
-      url: "#"
-    }, {
-      label: "Partners",
-      url: "#"
-    }],
-    logo: {
-      src: "https://assets.ubuntu.com/v1/82818827-CoF_white.svg",
-      title: "Canonical",
-      url: "#"
-    },
-    searchProps: {
-      onSearch: () => null
-    }
-  }
-};
-
-/**
- * Logos can be displayed using the new tag design. In cases where another logo
-style is required then an element can be provided to the `logo` prop.
- */
-const OverridingTheLogo = exports.OverridingTheLogo = {
-  name: "Overriding the logo",
-  args: {
-    items: [{
-      label: "Products",
-      url: "#"
-    }, {
-      label: "Services",
-      url: "#"
-    }, {
-      label: "Partners",
-      url: "#"
-    }],
-    logo: /*#__PURE__*/_react.default.createElement("img", {
-      alt: "",
-      src: "https://assets.ubuntu.com/v1/5d6da5c4-logo-canonical-aubergine.svg",
-      width: "100"
-    })
-  }
-};
-
-/**
- * In some cases such as when using [React Router](https://reactrouter.com/) it is
-necessary to use custom components for links. When this is required then a
-function can be passed to `generateLink` which should return your component.
-Bear in mind that some props like classes and on-click events might be passed to
-this function so take care in overriding any link props.
- */
-const OverridingTheLinkComponent = exports.OverridingTheLinkComponent = {
-  name: "Overriding the link component",
-  args: {
-    generateLink: _ref => {
-      let {
-        label,
-        className
-      } = _ref;
-      return /*#__PURE__*/_react.default.createElement("button", {
-        className: className
-      }, label);
-    },
-    items: [{
-      label: "Products",
-      url: "#"
-    }, {
-      label: "Services",
-      url: "#"
-    }, {
-      label: "Partners",
-      url: "#"
-    }],
-    logo: {
-      src: "https://assets.ubuntu.com/v1/82818827-CoF_white.svg",
-      title: "Canonical",
-      url: "#"
-    }
-  }
-};
-const NoMenuItems = exports.NoMenuItems = {
-  name: "No menu items",
-  args: {
-    generateLink: _ref2 => {
-      let {
-        label,
-        className
-      } = _ref2;
-      return /*#__PURE__*/_react.default.createElement("button", {
-        className: className
-      }, label);
-    },
-    logo: {
-      src: "https://assets.ubuntu.com/v1/82818827-CoF_white.svg",
-      title: "Canonical",
-      url: "#"
-    }
-  }
-};