@canonical/react-components 1.6.0 → 1.7.0

package/dist/components/Strip/Strip.stories.js

@@ -0,0 +1,130 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ShallowStrip = exports.LightStrip = exports.ImageStrip = exports.DeepStrip = exports.DarkStrip = exports.BorderedStrip = exports.AccentStrip = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Col = _interopRequireDefault(require("../Col"));
+var _Row = _interopRequireDefault(require("../Row"));
+var _Strip = _interopRequireDefault(require("./Strip"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const meta = {
+  component: _Strip.default,
+  tags: ["autodocs"],
+  argTypes: {
+    children: {
+      control: {
+        disable: true
+      }
+    }
+  }
+};
+var _default = exports.default = meta;
+const LightStrip = exports.LightStrip = {
+  name: "Light strip",
+  args: {
+    type: "light",
+    children: /*#__PURE__*/_react.default.createElement("p", null, "This is a light row")
+  }
+};
+const DarkStrip = exports.DarkStrip = {
+  render: () => /*#__PURE__*/_react.default.createElement(_Strip.default, {
+    type: "dark"
+  }, /*#__PURE__*/_react.default.createElement("p", null, "This is a dark row")),
+  name: "Dark strip"
+};
+const AccentStrip = exports.AccentStrip = {
+  render: () => /*#__PURE__*/_react.default.createElement(_Strip.default, {
+    type: "accent",
+    element: "section",
+    includeCol: false
+  }, /*#__PURE__*/_react.default.createElement(_Col.default, {
+    size: 8
+  }, /*#__PURE__*/_react.default.createElement("h1", null, "Still running Ubuntu 14.04 LTS?"), /*#__PURE__*/_react.default.createElement("p", null, "Learn how to maintain ongoing security compliance for your Ubuntu 14.04 LTS systems.")), /*#__PURE__*/_react.default.createElement(_Col.default, {
+    size: 4
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: "https://assets.ubuntu.com/v1/2217d1c8-Security.svg",
+    alt: "Placeholder"
+  }))),
+  name: "Accent strip"
+};
+const ImageStrip = exports.ImageStrip = {
+  render: () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Strip.default, {
+    background: "https://assets.ubuntu.com/sites/ubuntu/latest/u/img/backgrounds/image-background-paper.png",
+    includeCol: false,
+    element: "section",
+    light: true,
+    rowClassName: "u-vertically-center",
+    type: "image"
+  }, /*#__PURE__*/_react.default.createElement(_Col.default, {
+    size: 8
+  }, /*#__PURE__*/_react.default.createElement("h1", null, "Get started with big software, fast"), /*#__PURE__*/_react.default.createElement("p", null, "conjure-up lets you summon up a big-software stack as a \u201Cspell\u201D \u2014 a model of the stack, combined with extra know-how to get you from an installed stack to a fully usable one. Start using your big software instead of learning how to deploy it.")), /*#__PURE__*/_react.default.createElement(_Col.default, {
+    size: 4,
+    className: "u-hide--small u-align--center"
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: "https://assets.ubuntu.com/v1/1abb8716-conjure-up-illustration.svg",
+    alt: "Placeholder"
+  }))), /*#__PURE__*/_react.default.createElement(_Strip.default, {
+    background: "https://assets.ubuntu.com/v1/9b68976e-Aubergine_suru_background_2.png",
+    dark: true,
+    includeCol: false,
+    element: "section",
+    type: "image"
+  }, /*#__PURE__*/_react.default.createElement(_Row.default, {
+    className: "u-vertically-center"
+  }, /*#__PURE__*/_react.default.createElement(_Col.default, {
+    size: 8
+  }, /*#__PURE__*/_react.default.createElement("h1", null, "We are Canonical"), /*#__PURE__*/_react.default.createElement("p", null, "It is our mission to make open source software available to people everywhere. We believe the best way to fuel innovation is to give the innovators the technology they need.")), /*#__PURE__*/_react.default.createElement(_Col.default, {
+    size: 4,
+    className: "u-hide--small u-align--center"
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: "https://assets.ubuntu.com/v1/9c74eb2d-logo-canonical-white.svg",
+    alt: "Placeholder"
+  }))))),
+  name: "Image strip"
+};
+const BorderedStrip = exports.BorderedStrip = {
+  render: () => /*#__PURE__*/_react.default.createElement(_Strip.default, {
+    bordered: true,
+    colSize: 8,
+    element: "section"
+  }, /*#__PURE__*/_react.default.createElement("h2", null, "The node lifecycle"), /*#__PURE__*/_react.default.createElement("p", null, "Each machine (\u201Cnode\u201D) managed by MAAS goes through a lifecycle \u2014 from its enlistment or onboarding to MAAS, through commissioning when we inventory and can setup firmware or other hardware-specific elements, then allocation to a user and deployment, and finally they are released back to the pool or retired altogether.")),
+  name: "Bordered strip"
+};
+const DeepStrip = exports.DeepStrip = {
+  render: () => /*#__PURE__*/_react.default.createElement(_Strip.default, {
+    deep: true,
+    includeCol: false,
+    element: "section",
+    type: "light",
+    rowClassName: "u-vertically-center"
+  }, /*#__PURE__*/_react.default.createElement(_Col.default, {
+    size: 8
+  }, /*#__PURE__*/_react.default.createElement("h2", null, "The fastest way to go from development to production in IoT"), /*#__PURE__*/_react.default.createElement("p", null, "Learn about how Ubuntu Core and snaps can help you build your connected devices.")), /*#__PURE__*/_react.default.createElement(_Col.default, {
+    size: 4,
+    className: "u-hide--small u-align--center"
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: "https://assets.ubuntu.com/v1/808a4e5b-iot.png?h=300",
+    alt: "Placeholder"
+  }))),
+  name: "Deep strip"
+};
+const ShallowStrip = exports.ShallowStrip = {
+  render: () => /*#__PURE__*/_react.default.createElement(_Strip.default, {
+    shallow: true,
+    includeCol: false,
+    element: "section",
+    type: "light",
+    rowClassName: "u-vertically-center"
+  }, /*#__PURE__*/_react.default.createElement(_Col.default, {
+    size: 8
+  }, /*#__PURE__*/_react.default.createElement("h2", null, "The fastest way to go from development to production in IoT"), /*#__PURE__*/_react.default.createElement("p", null, "Learn about how Ubuntu Core and snaps can help you build your connected devices.")), /*#__PURE__*/_react.default.createElement(_Col.default, {
+    size: 4,
+    className: "u-hide--small u-align--center"
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: "https://assets.ubuntu.com/v1/808a4e5b-iot.png?h=300",
+    alt: "Placeholder"
+  }))),
+  name: "Shallow strip"
+};

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

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

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

@@ -0,0 +1,18 @@
+import { Meta, StoryObj } from "@storybook/react";
+import SummaryButton from "./SummaryButton";
+declare const meta: Meta<typeof SummaryButton>;
+export default meta;
+type Story = StoryObj<typeof SummaryButton>;
+export declare const Default: Story;
+/**
+ * Summary text is optional.
+ */
+export declare const ActionOnly: Story;
+/**
+ * Action is optional as well. When `onClick` prop is not provided component will render just the summary text.
+ */
+export declare const SummaryOnly: Story;
+/**
+ * When data is loaded asynchronusly `isLoading` prop should be set to `true` to shows a spinner animation in place of the action button.
+ */
+export declare const Loading: Story;

package/dist/components/SummaryButton/SummaryButton.stories.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SummaryOnly = exports.Loading = exports.Default = exports.ActionOnly = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _SummaryButton = _interopRequireDefault(require("./SummaryButton"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const doNothing = () => {};
+const meta = {
+  component: _SummaryButton.default,
+  tags: ["autodocs"]
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  render: () => /*#__PURE__*/_react.default.createElement(_SummaryButton.default, {
+    summary: "Showing 15 out of 100 items.",
+    label: "Show more",
+    onClick: doNothing
+  }),
+  name: "Default"
+};
+
+/**
+ * Summary text is optional.
+ */
+const ActionOnly = exports.ActionOnly = {
+  render: () => /*#__PURE__*/_react.default.createElement(_SummaryButton.default, {
+    label: "Show more items",
+    onClick: doNothing
+  }),
+  name: "Action only"
+};
+
+/**
+ * Action is optional as well. When `onClick` prop is not provided component will render just the summary text.
+ */
+const SummaryOnly = exports.SummaryOnly = {
+  render: () => /*#__PURE__*/_react.default.createElement(_SummaryButton.default, {
+    summary: "Showing 100 out of 100 items.",
+    label: "Show more items",
+    onClick: doNothing
+  }),
+  name: "Summary only"
+};
+
+/**
+ * When data is loaded asynchronusly `isLoading` prop should be set to `true` to shows a spinner animation in place of the action button.
+ */
+const Loading = exports.Loading = {
+  render: () => /*#__PURE__*/_react.default.createElement(_SummaryButton.default, {
+    summary: "Showing 15 out of 100 items.",
+    label: "Show more",
+    isLoading: true,
+    onClick: doNothing
+  }),
+  name: "Loading"
+};

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

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

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

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

package/dist/components/Switch/Switch.stories.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Disabled = exports.Default = void 0;
+var _Switch = _interopRequireDefault(require("./Switch"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const meta = {
+  component: _Switch.default,
+  tags: ["autodocs"]
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  name: "Default",
+  args: {
+    label: "Switch"
+  }
+};
+const Disabled = exports.Disabled = {
+  name: "Disabled",
+  args: {
+    disabled: true,
+    label: "Disabled switch"
+  }
+};

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,14 @@
+import { Meta, StoryObj } from "@storybook/react";
+import TablePagination from "./TablePagination";
+declare const meta: Meta<typeof TablePagination>;
+export default meta;
+type Story = StoryObj<typeof TablePagination>;
+export declare const Default: Story;
+export declare const CustomPageLimit: Story;
+export declare const CustomDisplayTitle: Story;
+export declare const RenderAbove: Story;
+export declare const RenderBelow: Story;
+/** The table pagination controls can be used without wrapping MainTable by
+ * using the `TablePaginationControls` component.
+ */
+export declare const ControlsOnly: Story;

package/dist/components/TablePagination/TablePagination.stories.js

@@ -0,0 +1,330 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.RenderBelow = exports.RenderAbove = exports.Default = exports.CustomPageLimit = exports.CustomDisplayTitle = exports.ControlsOnly = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _TablePagination = _interopRequireDefault(require("./TablePagination"));
+var _MainTable = _interopRequireDefault(require("../MainTable"));
+var _TablePaginationControls = _interopRequireDefault(require("./TablePaginationControls"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const meta = {
+  component: _TablePagination.default,
+  tags: ["autodocs"],
+  argTypes: {
+    totalItems: {
+      if: {
+        arg: "externallyControlled",
+        truthy: true
+      }
+    },
+    currentPage: {
+      if: {
+        arg: "externallyControlled",
+        truthy: true
+      }
+    },
+    pageSize: {
+      if: {
+        arg: "externallyControlled",
+        truthy: true
+      }
+    },
+    onPageChange: {
+      if: {
+        arg: "externallyControlled",
+        truthy: true
+      }
+    },
+    onPageSizeChange: {
+      if: {
+        arg: "externallyControlled",
+        truthy: true
+      }
+    }
+  }
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  name: "Default",
+  args: {
+    data: [{
+      id: "row-1"
+    }, {
+      id: "row-2"
+    }, {
+      id: "row-3"
+    }, {
+      id: "row-4"
+    }, {
+      id: "row-5"
+    }]
+  }
+};
+const CustomPageLimit = exports.CustomPageLimit = {
+  name: "CustomPageLimit",
+  args: {
+    data: [{
+      id: "row-1"
+    }, {
+      id: "row-2"
+    }, {
+      id: "row-3"
+    }, {
+      id: "row-4"
+    }, {
+      id: "row-5"
+    }],
+    pageLimits: [1, 2, 3]
+  }
+};
+const CustomDisplayTitle = exports.CustomDisplayTitle = {
+  name: "CustomDisplayTitle",
+  args: {
+    data: [{
+      id: "row-1"
+    }, {
+      id: "row-2"
+    }, {
+      id: "row-3"
+    }, {
+      id: "row-4"
+    }, {
+      id: "row-5"
+    }],
+    description: /*#__PURE__*/_react.default.createElement("b", null, "Hello there")
+  }
+};
+const RenderAbove = exports.RenderAbove = {
+  render: () => {
+    const data = [{
+      columns: [{
+        content: "Ready",
+        role: "rowheader"
+      }, {
+        content: 1,
+        className: "u-align--right"
+      }, {
+        content: "1 GiB",
+        className: "u-align--right"
+      }, {
+        content: 2,
+        className: "u-align--right"
+      }, {
+        content: 42,
+        className: "u-align--right"
+      }],
+      sortData: {
+        status: "ready",
+        cores: 2,
+        ram: 1,
+        disks: 2
+      }
+    }, {
+      columns: [{
+        content: "Idle",
+        role: "rowheader"
+      }, {
+        content: 1,
+        className: "u-align--right"
+      }, {
+        content: "1 GiB",
+        className: "u-align--right"
+      }, {
+        content: 2,
+        className: "u-align--right"
+      }, {
+        content: 23,
+        className: "u-align--right"
+      }],
+      sortData: {
+        status: "idle",
+        cores: 1,
+        ram: 1,
+        disks: 2
+      }
+    }, {
+      columns: [{
+        content: "Waiting",
+        role: "rowheader"
+      }, {
+        content: 8,
+        className: "u-align--right"
+      }, {
+        content: "3.9 GiB",
+        className: "u-align--right"
+      }, {
+        content: 3,
+        className: "u-align--right"
+      }, {
+        content: 0,
+        className: "u-align--right"
+      }],
+      sortData: {
+        status: "waiting",
+        cores: 8,
+        ram: 3.9,
+        disks: 3
+      }
+    }];
+    const headers = [{
+      content: "Status",
+      sortKey: "status"
+    }, {
+      content: "Cores",
+      sortKey: "cores",
+      className: "u-align--right"
+    }, {
+      content: "RAM",
+      sortKey: "ram",
+      className: "u-align--right"
+    }, {
+      content: "Disks",
+      sortKey: "disks",
+      className: "u-align--right"
+    }, {
+      content: "Networks",
+      className: "u-align--right"
+    }];
+    return /*#__PURE__*/_react.default.createElement(_TablePagination.default, {
+      data: data,
+      pageLimits: [1, 2, 3]
+    }, /*#__PURE__*/_react.default.createElement(_MainTable.default, {
+      headers: headers,
+      rows: data,
+      sortable: true
+    }));
+  },
+  name: "RenderAbove"
+};
+const RenderBelow = exports.RenderBelow = {
+  render: () => {
+    const data = [{
+      columns: [{
+        content: "Ready",
+        role: "rowheader"
+      }, {
+        content: 1,
+        className: "u-align--right"
+      }, {
+        content: "1 GiB",
+        className: "u-align--right"
+      }, {
+        content: 2,
+        className: "u-align--right"
+      }, {
+        content: 42,
+        className: "u-align--right"
+      }],
+      sortData: {
+        status: "ready",
+        cores: 2,
+        ram: 1,
+        disks: 2
+      }
+    }, {
+      columns: [{
+        content: "Idle",
+        role: "rowheader"
+      }, {
+        content: 1,
+        className: "u-align--right"
+      }, {
+        content: "1 GiB",
+        className: "u-align--right"
+      }, {
+        content: 2,
+        className: "u-align--right"
+      }, {
+        content: 23,
+        className: "u-align--right"
+      }],
+      sortData: {
+        status: "idle",
+        cores: 1,
+        ram: 1,
+        disks: 2
+      }
+    }, {
+      columns: [{
+        content: "Waiting",
+        role: "rowheader"
+      }, {
+        content: 8,
+        className: "u-align--right"
+      }, {
+        content: "3.9 GiB",
+        className: "u-align--right"
+      }, {
+        content: 3,
+        className: "u-align--right"
+      }, {
+        content: 0,
+        className: "u-align--right"
+      }],
+      sortData: {
+        status: "waiting",
+        cores: 8,
+        ram: 3.9,
+        disks: 3
+      }
+    }];
+    const headers = [{
+      content: "Status",
+      sortKey: "status"
+    }, {
+      content: "Cores",
+      sortKey: "cores",
+      className: "u-align--right"
+    }, {
+      content: "RAM",
+      sortKey: "ram",
+      className: "u-align--right"
+    }, {
+      content: "Disks",
+      sortKey: "disks",
+      className: "u-align--right"
+    }, {
+      content: "Networks",
+      className: "u-align--right"
+    }];
+    return /*#__PURE__*/_react.default.createElement(_TablePagination.default, {
+      data: data,
+      pageLimits: [1, 2, 3],
+      position: "below"
+    }, /*#__PURE__*/_react.default.createElement(_MainTable.default, {
+      headers: headers,
+      rows: data,
+      sortable: true
+    }));
+  },
+  name: "RenderBelow"
+};
+
+/** The table pagination controls can be used without wrapping MainTable by
+ * using the `TablePaginationControls` component.
+ */
+const ControlsOnly = exports.ControlsOnly = {
+  render: () => {
+    return /*#__PURE__*/_react.default.createElement(_TablePaginationControls.default, {
+      currentPage: 1,
+      itemName: "row",
+      nextButtonProps: {
+        disabled: false
+      },
+      onInputPageChange: console.log,
+      onNextPage: console.log,
+      onPageSizeChange: console.log,
+      onPreviousPage: console.log,
+      pageLimits: [10, 25, 50],
+      pageSize: 20,
+      previousButtonProps: {
+        disabled: false
+      },
+      showPageInput: true,
+      totalItems: 100,
+      visibleCount: 10
+    });
+  }
+};

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

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

package/dist/components/TablePagination/TablePaginationControls/TablePaginationControls.test.d.ts

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

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

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

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

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from "@storybook/react";
+import Tabs from "./Tabs";
+declare const meta: Meta<typeof Tabs>;
+export default meta;
+type Story = StoryObj<typeof Tabs>;
+export declare const Default: Story;
+/**
+ * To horizontally align the Tabs with other content, they can be contained within a Row component to
+provide correct gutters.
+ */
+export declare const HorizontallyAligned: Story;

package/dist/components/Tabs/Tabs.stories.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.HorizontallyAligned = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Row = _interopRequireDefault(require("../Row"));
+var _Tabs = _interopRequireDefault(require("./Tabs"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const meta = {
+  component: _Tabs.default,
+  tags: ["autodocs"]
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  name: "Default",
+  args: {
+    links: [{
+      active: true,
+      label: "Summary"
+    }, {
+      active: false,
+      label: "Network"
+    }, {
+      active: false,
+      label: "Storage"
+    }, {
+      active: false,
+      label: "Settings"
+    }]
+  }
+};
+
+/**
+ * To horizontally align the Tabs with other content, they can be contained within a Row component to
+provide correct gutters.
+ */
+const HorizontallyAligned = exports.HorizontallyAligned = {
+  render: () => /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Tabs.default, {
+    links: [{
+      active: true,
+      label: "Summary"
+    }, {
+      active: false,
+      label: "Network"
+    }, {
+      active: false,
+      label: "Storage"
+    }, {
+      active: false,
+      label: "Settings"
+    }]
+  }), /*#__PURE__*/_react.default.createElement("p", null, "There should be gutters and the text should be horizontally aligned")),
+  name: "Horizontally aligned"
+};

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

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