@canonical/react-components 0.59.0 → 0.60.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(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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/SummaryButton/SummaryButton.d.ts

@@ -22,5 +22,8 @@ export type Props = {
      */
     summary?: string;
 };
+/**
+ * `SummaryButton` is a component to render a short summary with an action button. It's initial use case is a summary of table contents with action to load more items.
+ */
 declare const SummaryButton: ({ className, isLoading, summary, label, onClick, }: Props) => JSX.Element;
 export default SummaryButton;

package/dist/components/SummaryButton/SummaryButton.js

@@ -8,6 +8,9 @@ var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _ActionButton = _interopRequireDefault(require("../ActionButton"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * `SummaryButton` is a component to render a short summary with an action button. It's initial use case is a summary of table contents with action to load more items.
+ */
 const SummaryButton = _ref => {
   let {
     className,

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

@@ -10,5 +10,8 @@ export type Props = PropsWithSpread<{
      */
     disabled?: boolean;
 }, HTMLProps<HTMLInputElement>>;
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Switch](https://vanillaframework.io/docs/patterns/switch) component.
+ */
 export declare const Switch: ({ label, disabled, ...inputProps }: Props) => JSX.Element;
 export default Switch;

package/dist/components/Switch/Switch.js

@@ -7,6 +7,9 @@ exports.default = exports.Switch = void 0;
 var _react = _interopRequireDefault(require("react"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Switch](https://vanillaframework.io/docs/patterns/switch) component.
+ */
 const Switch = _ref => {
   let {
     label,

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

@@ -73,5 +73,26 @@ export type InternalControlProps = BasePaginationProps & {
     externallyControlled?: false;
 };
 export type Props = PropsWithChildren<ExternalControlProps | InternalControlProps> & HTMLAttributes<HTMLDivElement>;
+/**
+This is an HOC [React](https://reactjs.org/) component for applying pagination to direct children components. This component is un-opinionated about
+the structure of the input data and can be used with any child component that displays a list of data. However, the styling and behaviour of this component were designed
+to work nicely with the `MainTable` component. To use this component, simply wrap a child component with it and provide the data that you want
+to paginate to the `data` prop. This component will then pass the paged data to all <b>direct</b> child components via a child prop specified by `dataForwardProp`.
+The component may be externally controlled, see following sections for detailed explanation.
+
+#### Externally controlled pagination
+
+For externally controlled mode, you will be responsible for the pagination logic and therefore the component will be purely presentational.
+The pagination behaviour is controlled outside of this component. Note the data injection to child components is essentially a passthrough in this case.
+To enable externally controlled mode for this component, set the `externallyControlled` prop to `true`. From there, it is your responsibility
+to ensure that the following props `totalItems`, `currentPage`, `pageSize`, `onPageChange` and `onPageSizeChange` are set properly.
+You can refer to the props table below on how to set these props.
+
+#### Un-controlled pagination
+
+In this mode, the component assumes that the input data is not paginated. The component will implement the pagination logic and apply it to the input data
+then inject the paged data into direct child components. This is the default mode of operations for the component where `externallyControlled` prop is set
+to `false`.
+ */
 declare const TablePagination: (props: Props) => React.JSX.Element;
 export default TablePagination;

package/dist/components/TablePagination/TablePagination.js

@@ -13,6 +13,27 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+/**
+This is an HOC [React](https://reactjs.org/) component for applying pagination to direct children components. This component is un-opinionated about
+the structure of the input data and can be used with any child component that displays a list of data. However, the styling and behaviour of this component were designed
+to work nicely with the `MainTable` component. To use this component, simply wrap a child component with it and provide the data that you want
+to paginate to the `data` prop. This component will then pass the paged data to all <b>direct</b> child components via a child prop specified by `dataForwardProp`.
+The component may be externally controlled, see following sections for detailed explanation.
+
+#### Externally controlled pagination
+
+For externally controlled mode, you will be responsible for the pagination logic and therefore the component will be purely presentational.
+The pagination behaviour is controlled outside of this component. Note the data injection to child components is essentially a passthrough in this case.
+To enable externally controlled mode for this component, set the `externallyControlled` prop to `true`. From there, it is your responsibility
+to ensure that the following props `totalItems`, `currentPage`, `pageSize`, `onPageChange` and `onPageSizeChange` are set properly.
+You can refer to the props table below on how to set these props.
+
+#### Un-controlled pagination
+
+In this mode, the component assumes that the input data is not paginated. The component will implement the pagination logic and apply it to the input data
+then inject the paged data into direct child components. This is the default mode of operations for the component where `externallyControlled` prop is set
+to `false`.
+ */
 const TablePagination = props => {
   const {
     data,

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

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

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

@@ -0,0 +1,302 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.RenderBelow = exports.RenderAbove = exports.Default = exports.CustomPageLimit = exports.CustomDisplayTitle = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _TablePagination = _interopRequireDefault(require("./TablePagination"));
+var _MainTable = _interopRequireDefault(require("../MainTable"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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"
+};

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

@@ -36,5 +36,10 @@ export type Props<P = null> = {
      */
     listClassName?: string;
 };
+/**
+ * This is the [React](https://reactjs.org/) component for Vanilla [Tabs](https://vanillaframework.io/docs/patterns/tabs).
+Tabs organise and allow navigation between groups of content that are related and at the same level
+of hierarchy.
+ */
 declare const Tabs: <P>({ className, links, listClassName, }: Props<P>) => JSX.Element;
 export default Tabs;