@canonical/react-components 1.2.4 → 1.3.0

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

@@ -1,15 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import MainTable from "./MainTable";
-declare const meta: Meta<typeof MainTable>;
-export default meta;
-type Story = StoryObj<typeof MainTable>;
-export declare const Default: Story;
-export declare const Sortable: Story;
-export declare const Expanding: Story;
-/**
- * If the table cell may have overflowing content (such as contextual menu) use `hasOverflow` prop to avoid cropping it.
- */
-export declare const Overflow: Story;
-export declare const Responsive: Story;
-export declare const Paginated: Story;
-export declare const Empty: Story;

package/dist/components/MainTable/MainTable.stories.js

@@ -1,553 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Sortable = exports.Responsive = exports.Paginated = exports.Overflow = exports.Expanding = exports.Empty = exports.Default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _MainTable = _interopRequireDefault(require("./MainTable"));
-var _Row = _interopRequireDefault(require("../Row"));
-var _Col = _interopRequireDefault(require("../Col"));
-var _ContextualMenu = _interopRequireDefault(require("../ContextualMenu"));
-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 meta = {
-  component: _MainTable.default,
-  tags: ["autodocs"],
-  argTypes: {
-    headers: {
-      control: {
-        disable: true
-      }
-    },
-    rows: {
-      control: {
-        disable: true
-      }
-    }
-  }
-};
-var _default = exports.default = meta;
-const Default = exports.Default = {
-  name: "Default",
-  args: {
-    headers: [{
-      content: null
-    }, {
-      content: "Foundation Cloud"
-    }, {
-      content: "Foundation Cloud Plus"
-    }],
-    rows: [{
-      columns: [{
-        content: "Expert delivery of an Ubuntu OpenStack cloud",
-        role: "rowheader"
-      }, {
-        content: "Reference architecture"
-      }, {
-        content: "Custom architecture"
-      }]
-    }, {
-      columns: [{
-        content: "Workshop and training",
-        role: "rowheader"
-      }, {
-        content: "2-days"
-      }, {
-        content: "4-days"
-      }]
-    }, {
-      columns: [{
-        content: "One-time price",
-        role: "rowheader"
-      }, {
-        content: "$75,000"
-      }, {
-        content: "$150,000"
-      }]
-    }]
-  }
-};
-const Sortable = exports.Sortable = {
-  render: () => /*#__PURE__*/_react.default.createElement(_MainTable.default, {
-    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"
-    }],
-    rows: [{
-      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
-      }
-    }],
-    sortable: true
-  }),
-  name: "Sortable"
-};
-const Expanding = exports.Expanding = {
-  render: () => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const [expandedRow, setExpandedRow] = (0, _react.useState)(1);
-    return /*#__PURE__*/_react.default.createElement(_MainTable.default, {
-      expanding: true,
-      headers: [{
-        content: "Name"
-      }, {
-        content: "Mac address"
-      }, {
-        content: "IP"
-      }, {
-        content: "Rack"
-      }, {
-        content: "Last seen"
-      }, {
-        content: "Actions",
-        className: "u-align--right"
-      }],
-      rows: [{
-        columns: [{
-          content: "Unknown",
-          role: "rowheader"
-        }, {
-          content: "2c:44:fd:80:3f:25"
-        }, {
-          content: "10.249.0.1"
-        }, {
-          content: "karura"
-        }, {
-          content: "Thu, 25 Oct. 2018 13:55:21"
-        }, {
-          content: /*#__PURE__*/_react.default.createElement("button", {
-            className: "u-toggle",
-            onClick: () => setExpandedRow(1)
-          }, "Show"),
-          className: "u-align--right"
-        }],
-        expanded: expandedRow === 1,
-        expandedContent: /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, {
-          size: 8
-        }, /*#__PURE__*/_react.default.createElement("h4", null, "Expanding table cell"), /*#__PURE__*/_react.default.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur cum dicta beatae nostrum eligendi similique earum, dolorem fuga quis, sequi voluptates architecto ipsa dolorum eaque rem expedita inventore voluptas odit aspernatur alias molestias facere.")))
-      }, {
-        columns: [{
-          content: "Unknown",
-          role: "rowheader"
-        }, {
-          content: "52:54:00:3a:fe:e9"
-        }, {
-          content: "172.16.99.191"
-        }, {
-          content: "karura"
-        }, {
-          content: "Wed, 3 Oct. 2018 23:08:06"
-        }, {
-          content: /*#__PURE__*/_react.default.createElement("button", {
-            className: "u-toggle",
-            onClick: () => setExpandedRow(2)
-          }, "Show"),
-          className: "u-align--right"
-        }],
-        expanded: expandedRow === 2,
-        expandedContent: /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, {
-          size: 8
-        }, /*#__PURE__*/_react.default.createElement("h4", null, "Expanding table cell"), /*#__PURE__*/_react.default.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur cum dicta beatae nostrum eligendi similique earum, dolorem fuga quis, sequi voluptates architecto ipsa dolorum eaque rem expedita inventore voluptas odit aspernatur alias molestias facere.")))
-      }, {
-        columns: [{
-          content: "Unknown",
-          role: "rowheader"
-        }, {
-          content: "52:54:00:74:c2:10"
-        }, {
-          content: "172.16.99.192"
-        }, {
-          content: "karura"
-        }, {
-          content: "Wed, 17 Oct. 2018 12:18:18"
-        }, {
-          content: /*#__PURE__*/_react.default.createElement("button", {
-            className: "u-toggle",
-            onClick: () => setExpandedRow(3)
-          }, "Show"),
-          className: "u-align--right"
-        }],
-        expanded: expandedRow === 3,
-        expandedContent: /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, {
-          size: 8
-        }, /*#__PURE__*/_react.default.createElement("h4", null, "Expanding table cell"), /*#__PURE__*/_react.default.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur cum dicta beatae nostrum eligendi similique earum, dolorem fuga quis, sequi voluptates architecto ipsa dolorum eaque rem expedita inventore voluptas odit aspernatur alias molestias facere.")))
-      }]
-    });
-  },
-  name: "Expanding"
-};
-
-/**
- * If the table cell may have overflowing content (such as contextual menu) use `hasOverflow` prop to avoid cropping it.
- */
-const Overflow = exports.Overflow = {
-  render: () => {
-    return /*#__PURE__*/_react.default.createElement(_MainTable.default, {
-      headers: [{
-        content: "Name"
-      }, {
-        content: "Mac address"
-      }, {
-        content: "IP"
-      }, {
-        content: "Rack"
-      }, {
-        content: "Last seen"
-      }, {
-        content: "Actions",
-        className: "u-align--right"
-      }],
-      rows: [{
-        columns: [{
-          content: "Unknown",
-          role: "rowheader"
-        }, {
-          content: "2c:44:fd:80:3f:25"
-        }, {
-          content: "10.249.0.1"
-        }, {
-          content: "karura"
-        }, {
-          content: "Thu, 25 Oct. 2018 13:55:21"
-        }, {
-          content: /*#__PURE__*/_react.default.createElement(_ContextualMenu.default, {
-            links: [{
-              children: "Link 1",
-              onClick: () => {}
-            }, {
-              children: "Link 2",
-              onClick: () => {}
-            }],
-            hasToggleIcon: true,
-            position: "right"
-          }),
-          className: "u-align--right",
-          hasOverflow: true
-        }]
-      }, {
-        columns: [{
-          content: "Unknown",
-          role: "rowheader"
-        }, {
-          content: "52:54:00:3a:fe:e9"
-        }, {
-          content: "172.16.99.191"
-        }, {
-          content: "karura"
-        }, {
-          content: "Wed, 3 Oct. 2018 23:08:06"
-        }, {
-          content: /*#__PURE__*/_react.default.createElement(_ContextualMenu.default, {
-            links: [{
-              children: "Link 1",
-              onClick: () => {}
-            }, {
-              children: "Link 2",
-              onClick: () => {}
-            }],
-            hasToggleIcon: true,
-            position: "right"
-          }),
-          className: "u-align--right",
-          hasOverflow: true
-        }]
-      }, {
-        columns: [{
-          content: "Unknown",
-          role: "rowheader"
-        }, {
-          content: "52:54:00:74:c2:10"
-        }, {
-          content: "172.16.99.192"
-        }, {
-          content: "karura"
-        }, {
-          content: "Wed, 17 Oct. 2018 12:18:18"
-        }, {
-          content: /*#__PURE__*/_react.default.createElement(_ContextualMenu.default, {
-            links: [{
-              children: "Link 1",
-              onClick: () => {}
-            }, {
-              children: "Link 2",
-              onClick: () => {}
-            }],
-            hasToggleIcon: true,
-            position: "right"
-          }),
-          className: "u-align--right",
-          hasOverflow: true
-        }]
-      }]
-    });
-  },
-  name: "Overflow"
-};
-const Responsive = exports.Responsive = {
-  render: () => /*#__PURE__*/_react.default.createElement(_MainTable.default, {
-    headers: [{
-      content: /*#__PURE__*/_react.default.createElement("span", null, "Name", /*#__PURE__*/_react.default.createElement("i", {
-        className: "p-icon--information"
-      })),
-      heading: "Name"
-    }, {
-      content: "Users",
-      className: "u-align--right"
-    }, {
-      content: "Units",
-      className: "u-align--right"
-    }],
-    rows: [{
-      columns: [{
-        content: "Ready",
-        role: "rowheader"
-      }, {
-        content: 1,
-        className: "u-align--right"
-      }, {
-        content: "1 GiB",
-        className: "u-align--right"
-      }]
-    }, {
-      columns: [{
-        content: "Ready",
-        role: "rowheader"
-      }, {
-        content: 1,
-        className: "u-align--right"
-      }, {
-        content: "1 GiB",
-        className: "u-align--right"
-      }]
-    }, {
-      columns: [{
-        content: "Ready",
-        role: "rowheader"
-      }, {
-        content: 1,
-        className: "u-align--right"
-      }, {
-        content: "1 GiB",
-        className: "u-align--right"
-      }]
-    }],
-    responsive: true
-  }),
-  name: "Responsive"
-};
-const Paginated = exports.Paginated = {
-  render: () => /*#__PURE__*/_react.default.createElement(_MainTable.default, {
-    headers: [{
-      content: "Status"
-    }, {
-      content: "Cores"
-    }],
-    paginate: 5,
-    rows: [{
-      columns: [{
-        content: "Ready"
-      }, {
-        content: 1
-      }]
-    }, {
-      columns: [{
-        content: "Idle"
-      }, {
-        content: 4
-      }]
-    }, {
-      columns: [{
-        content: "Waiting"
-      }, {
-        content: 2
-      }]
-    }, {
-      columns: [{
-        content: "Ready"
-      }, {
-        content: 1
-      }]
-    }, {
-      columns: [{
-        content: "Idle"
-      }, {
-        content: 4
-      }]
-    }, {
-      columns: [{
-        content: "Waiting"
-      }, {
-        content: 2
-      }]
-    }, {
-      columns: [{
-        content: "Ready"
-      }, {
-        content: 1
-      }]
-    }, {
-      columns: [{
-        content: "Idle"
-      }, {
-        content: 4
-      }]
-    }, {
-      columns: [{
-        content: "Waiting"
-      }, {
-        content: 2
-      }]
-    }, {
-      columns: [{
-        content: "Ready"
-      }, {
-        content: 1
-      }]
-    }, {
-      columns: [{
-        content: "Idle"
-      }, {
-        content: 4
-      }]
-    }, {
-      columns: [{
-        content: "Waiting"
-      }, {
-        content: 2
-      }]
-    }, {
-      columns: [{
-        content: "Ready"
-      }, {
-        content: 1
-      }]
-    }, {
-      columns: [{
-        content: "Idle"
-      }, {
-        content: 4
-      }]
-    }, {
-      columns: [{
-        content: "Waiting"
-      }, {
-        content: 2
-      }]
-    }, {
-      columns: [{
-        content: "Ready"
-      }, {
-        content: 1
-      }]
-    }, {
-      columns: [{
-        content: "Idle"
-      }, {
-        content: 4
-      }]
-    }, {
-      columns: [{
-        content: "Waiting"
-      }, {
-        content: 2
-      }]
-    }]
-  }),
-  name: "Paginated"
-};
-const Empty = exports.Empty = {
-  render: () => /*#__PURE__*/_react.default.createElement(_MainTable.default, {
-    headers: [{
-      content: "Plan"
-    }, {
-      content: "Foundation Cloud"
-    }, {
-      content: "Foundation Cloud Plus"
-    }],
-    rows: [],
-    emptyStateMsg: "No data to display"
-  }),
-  name: "Empty"
-};

package/dist/components/MainTable/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from "./MainTable";
-export type { Props as MainTableProps } from "./MainTable";

package/dist/components/Modal/Modal.d.ts

@@ -1,36 +0,0 @@
-import { ReactElement } from "react";
-import type { HTMLProps, ReactNode } from "react";
-import { ClassName, PropsWithSpread } from "../../types";
-export type Props = PropsWithSpread<{
-    /**
-     * Buttons to display underneath the main modal content.
-     */
-    buttonRow?: ReactNode | null;
-    /**
-     * Optional class(es) to apply to the wrapping element.
-     */
-    className?: ClassName;
-    /**
-     * The content of the modal.
-     */
-    children: ReactNode;
-    /**
-     * Function to handle closing the modal.
-     */
-    close?: () => void | null;
-    /**
-     * The title of the modal.
-     */
-    title?: ReactNode | null;
-    /**
-     * Whether the button click event should propagate.
-     */
-    shouldPropagateClickEvent?: boolean;
-}, HTMLProps<HTMLDivElement>>;
-/**
- * This is a [React](https://reactjs.org/) component for the Vanilla [Modal](https://docs.vanillaframework.io/patterns/modal/).
- *
- * The modal component can be used to overlay an area of the screen which can contain a prompt, dialog or interaction.
- */
-export declare const Modal: ({ buttonRow, children, className, close, title, shouldPropagateClickEvent, ...wrapperProps }: Props) => ReactElement;
-export default Modal;

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

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

package/dist/components/Modal/Modal.stories.js

@@ -1,57 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _Modal = _interopRequireDefault(require("./Modal"));
-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 Template = args => {
-  return /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      height: "100vh",
-      position: "relative"
-    }
-  }, /*#__PURE__*/_react.default.createElement(_Modal.default, args));
-};
-const meta = {
-  component: _Modal.default,
-  render: Template,
-  tags: ["autodocs"],
-  argTypes: {
-    buttonRow: {
-      control: {
-        disable: true
-      }
-    },
-    children: {
-      control: {
-        disable: true
-      }
-    }
-  }
-};
-var _default = exports.default = meta;
-const Default = exports.Default = {
-  render: () => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const [modalOpen, setModalOpen] = (0, _react.useState)(true);
-    const closeHandler = () => setModalOpen(false);
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
-      onClick: () => setModalOpen(true)
-    }, "Open modal"), modalOpen ? /*#__PURE__*/_react.default.createElement(_Modal.default, {
-      close: closeHandler,
-      title: "Confirm delete",
-      buttonRow: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
-        className: "u-no-margin--bottom",
-        onClick: closeHandler
-      }, "Cancel"), /*#__PURE__*/_react.default.createElement("button", {
-        className: "p-button--negative u-no-margin--bottom"
-      }, "Delete"))
-    }, /*#__PURE__*/_react.default.createElement("p", null, "This will permanently delete the user \"Simon\".", /*#__PURE__*/_react.default.createElement("br", null), "You cannot undo this action.")) : null);
-  },
-  name: "Default"
-};

package/dist/components/Modal/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from "./Modal";
-export type { Props as ModalProps } from "./Modal";