@canonical/react-components 1.2.5 → 1.3.1

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

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

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

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

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

package/dist/components/Textarea/Textarea.stories.js

@@ -1,62 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.DynamicHeight = exports.Default = void 0;
-var _Textarea = _interopRequireDefault(require("./Textarea"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const meta = {
-  component: _Textarea.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
-      }
-    }
-  }
-};
-var _default = exports.default = meta;
-const Default = exports.Default = {
-  name: "Default",
-  args: {
-    label: "Tell us about your project or interest",
-    id: "textarea2",
-    rows: 3,
-    defaultValue: "Ubuntu"
-  }
-};
-const DynamicHeight = exports.DynamicHeight = {
-  name: "Dynamic Height",
-  args: {
-    label: "Text area that will dynamically adjust its height based on content",
-    defaultValue: "Ubuntu",
-    grow: true
-  }
-};

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

@@ -1,12 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import Tooltip from "./Tooltip";
-declare const meta: Meta<typeof Tooltip>;
-export default meta;
-type Story = StoryObj<typeof Tooltip>;
-export declare const Default: Story;
-export declare const FollowMouse: Story;
-/**
- * The tooltip elements are displayed inside a [Portal](https://reactjs.org/docs/portals.html) so that the tooltip is not constrained by its current position in the DOM.
- * Sometimes however, you need to target the tooltip elements. This can be achieved by passing class names to the tooltip elements. You can also pass classes to the elements that trigger and position the tooltip.
- */
-export declare const TargetingElements: Story;

package/dist/components/Tooltip/Tooltip.stories.js

@@ -1,71 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.TargetingElements = exports.FollowMouse = exports.Default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Button = _interopRequireDefault(require("../Button"));
-var _Tooltip = _interopRequireWildcard(require("./Tooltip"));
-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 _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const Template = args => {
-  return /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      display: "flex",
-      justifyContent: "center",
-      padding: "3rem"
-    }
-  }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, args, /*#__PURE__*/_react.default.createElement(_Button.default, {
-    className: "u-no-margin--bottom"
-  }, "Hover over me!")));
-};
-const meta = {
-  component: _Tooltip.default,
-  render: Template,
-  tags: ["autodocs"],
-  argTypes: {
-    position: {
-      control: {
-        type: "radio"
-      },
-      options: Object.values(_Tooltip.position)
-    }
-  }
-};
-var _default = exports.default = meta;
-const Default = exports.Default = {
-  render: Template.bind({}),
-  name: "Default",
-  args: {
-    message: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Tooltip", " ", /*#__PURE__*/_react.default.createElement("a", {
-      href: "#todo",
-      target: "_blank"
-    }, "Link1"))
-  }
-};
-const FollowMouse = exports.FollowMouse = {
-  render: Template.bind({}),
-  name: "Follow mouse",
-  args: {
-    followMouse: true,
-    message: "Tooltip message to display.",
-    position: "top-center"
-  }
-};
-
-/**
- * The tooltip elements are displayed inside a [Portal](https://reactjs.org/docs/portals.html) so that the tooltip is not constrained by its current position in the DOM.
- * Sometimes however, you need to target the tooltip elements. This can be achieved by passing class names to the tooltip elements. You can also pass classes to the elements that trigger and position the tooltip.
- */
-const TargetingElements = exports.TargetingElements = {
-  render: Template.bind({}),
-  name: "Targeting elements",
-  args: {
-    className: "custom-wrapping-class",
-    positionElementClassName: "custom-position-class",
-    tooltipClassName: "custom-tooltip-class",
-    message: "Tooltip message to display."
-  }
-};