@canonical/react-components 0.59.0 → 0.60.0

package/dist/components/ModularTable/ModularTable.js

@@ -44,6 +44,59 @@ const generateRows = (rows, prepareRow, getRowProps, getCellProps) => {
   });
   return tableRows;
 };
+
+/**
+This is a [React](https://reactjs.org/) component to support many table use cases.
+ 
+ModularTable components accepts `columns` and `data` arguments in the same format as [`useTable`](https://react-table.tanstack.com/docs/api/useTable) hook of the ReactTable library.
+
+`columns` - The core columns configuration object for the entire table. https://react-table.tanstack.com/docs/api/useTable#column-options
+`data` - The data array that you want to display on the table.
+### Important note!
+Values passed to both of these params have to me memoized (for example via{" "}
+  <code>React.useMemo</code>). Memoization ensures that our data isn't recreated
+  on every render. If we didn't use <code>React.useMemo</code>, the table would
+  think it was receiving new data on every render and attempt to recalulate a
+  lot of logic every single time.
+
+#### Custom column options
+
+In addition to standard column propeties from [`useTable`](https://react-table.tanstack.com/docs/api/useTable) `ModularTable` accepts some custom properties.
+
+##### Class names
+
+Custom `className` can be used to provide a specific CSS class name that will be added to all cells in given column.
+You can also provide `getHeaderProps`, `getRowProps` and `getCellProps` to resolve additional custom props for a specific element. More on this in [`useTable - cell properties`](https://react-table.tanstack.com/docs/api/useTable#cell-properties).
+
+```js
+getCellProps={({ value, column }) => ({
+  className: `table__cell--${column.id} ${value ===  "1 minute" ? "p-heading--5" : ""}`,
+})}
+columns = {
+  Header: "Hidden on mobile",
+  accessor: "example",
+  className: "u-hide--small"
+}
+```
+
+##### Icons
+
+To show an icon in the cells of a column `getCellIcon` function should be defined. The function takes a cell data as an argument and should return one of built in icons (from the `ICONS` const), a string with a custom icon name, or `false` if no icon should be shown.
+
+The `ICONS` const contains all [the Vanilla built in icons](https://vanillaframework.io/docs/patterns/icons) such as "plus", "minus", "success", "error", etc.
+
+Product specific icons can be used as well, assuming that the product provides the necessary CSS styling and the icon follows the Vanilla naming convention `p-icon--{name}`.
+
+```js
+columns = {
+  Header: "With icons",
+  accessor: "status",
+  getCellIcon: ({ value }) => {
+    return value === "released" ? ICONS.success : false;
+  },
+};
+```
+ */
 function ModularTable(_ref) {
   let {
     data,

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

@@ -0,0 +1,27 @@
+import { Meta, StoryObj } from "@storybook/react";
+import ModularTable from "./ModularTable";
+declare const meta: Meta<typeof ModularTable>;
+export default meta;
+type Story = StoryObj<typeof ModularTable>;
+export declare const Default: Story;
+export declare const Empty: Story;
+export declare const Sortable: Story;
+/**
+ * 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.
+ */
+export declare const Subrows: Story;
+/**
+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 },
+];
+```
+ */
+export declare const LoadMore: Story;

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

@@ -0,0 +1,343 @@
+"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(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; }
+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,67 +1,8 @@
-import { Meta } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import { MultiSelect } from "./MultiSelect";
 declare const meta: Meta<typeof MultiSelect>;
 export default meta;
-export declare const CondensedExample: {
-    args: {
-        items: ({
-            label: string;
-            value: string;
-        } | {
-            label: string;
-            value: number;
-        })[];
-        selectedItems: ({
-            label: string;
-            value: string;
-        } | {
-            label: string;
-            value: number;
-        })[];
-        variant: string;
-    };
-};
-export declare const SearchExample: {
-    args: {
-        variant: string;
-        items: ({
-            group: string;
-            label: string;
-            value: string;
-        } | {
-            group: string;
-            label: string;
-            value: number;
-        })[];
-        selectedItems: ({
-            label: string;
-            value: string;
-        } | {
-            label: string;
-            value: number;
-        })[];
-    };
-};
-export declare const WithDisabledItems: {
-    args: {
-        disabledItems: {
-            label: string;
-            value: number;
-        }[];
-        items: ({
-            label: string;
-            value: string;
-        } | {
-            label: string;
-            value: number;
-        })[];
-        selectedItems: ({
-            label: string;
-            value: string;
-        } | {
-            label: string;
-            value: number;
-        })[];
-        variant: string;
-    };
-};
+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

@@ -17,7 +17,6 @@ const Template = props => {
   }));
 };
 const meta = {
-  title: "MultiSelect",
   component: _MultiSelect.MultiSelect,
   render: Template,
   tags: ["autodocs"],

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

@@ -54,5 +54,13 @@ export type Props = PropsWithSpread<{
      */
     theme?: Theme | null;
 }, HTMLProps<HTMLElement>>;
+/**
+This is the [React](https://reactjs.org/) component for the Vanilla
+[Navigation](https://vanillaframework.io/docs/patterns/navigation) pattern. It
+is a simple navigation bar that you can add to the top of your site or app.
+
+The navigation items are collapsed behind a "Menu" link in small screens and
+displayed horizontally on larger screens.
+ */
 declare const Navigation: ({ fullWidth, generateLink, items, itemsRight, leftNavProps, logo, navProps, rightNavProps, searchProps, theme, ...headerProps }: Props) => JSX.Element;
 export default Navigation;

package/dist/components/Navigation/Navigation.js

@@ -95,6 +95,15 @@ const generateItems = (items, closeMobileMenu, generateLink) => items.map((item,
     }
   }
 })));
+
+/**
+This is the [React](https://reactjs.org/) component for the Vanilla
+[Navigation](https://vanillaframework.io/docs/patterns/navigation) pattern. It
+is a simple navigation bar that you can add to the top of your site or app.
+
+The navigation items are collapsed behind a "Menu" link in small screens and
+displayed horizontally on larger screens.
+ */
 const Navigation = _ref => {
   let {
     fullWidth,

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

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