@canonical/react-components 1.6.0 → 1.7.0

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

@@ -0,0 +1,545 @@
+import { useState } from "react";
+import React from "react";
+import MainTable from "./MainTable";
+import Row from "../Row";
+import Col from "../Col";
+import ContextualMenu from "../ContextualMenu";
+var meta = {
+  component: MainTable,
+  tags: ["autodocs"],
+  argTypes: {
+    headers: {
+      control: {
+        disable: true
+      }
+    },
+    rows: {
+      control: {
+        disable: true
+      }
+    }
+  }
+};
+export default meta;
+export var 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"
+      }]
+    }]
+  }
+};
+export var Sortable = {
+  render: () => /*#__PURE__*/React.createElement(MainTable, {
+    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"
+};
+export var Expanding = {
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    var [expandedRow, setExpandedRow] = useState(1);
+    return /*#__PURE__*/React.createElement(MainTable, {
+      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.createElement("button", {
+            className: "u-toggle",
+            onClick: () => setExpandedRow(1)
+          }, "Show"),
+          className: "u-align--right"
+        }],
+        expanded: expandedRow === 1,
+        expandedContent: /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, {
+          size: 8
+        }, /*#__PURE__*/React.createElement("h4", null, "Expanding table cell"), /*#__PURE__*/React.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.createElement("button", {
+            className: "u-toggle",
+            onClick: () => setExpandedRow(2)
+          }, "Show"),
+          className: "u-align--right"
+        }],
+        expanded: expandedRow === 2,
+        expandedContent: /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, {
+          size: 8
+        }, /*#__PURE__*/React.createElement("h4", null, "Expanding table cell"), /*#__PURE__*/React.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.createElement("button", {
+            className: "u-toggle",
+            onClick: () => setExpandedRow(3)
+          }, "Show"),
+          className: "u-align--right"
+        }],
+        expanded: expandedRow === 3,
+        expandedContent: /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, {
+          size: 8
+        }, /*#__PURE__*/React.createElement("h4", null, "Expanding table cell"), /*#__PURE__*/React.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.
+ */
+export var Overflow = {
+  render: () => {
+    return /*#__PURE__*/React.createElement(MainTable, {
+      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.createElement(ContextualMenu, {
+            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.createElement(ContextualMenu, {
+            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.createElement(ContextualMenu, {
+            links: [{
+              children: "Link 1",
+              onClick: () => {}
+            }, {
+              children: "Link 2",
+              onClick: () => {}
+            }],
+            hasToggleIcon: true,
+            position: "right"
+          }),
+          className: "u-align--right",
+          hasOverflow: true
+        }]
+      }]
+    });
+  },
+  name: "Overflow"
+};
+export var Responsive = {
+  render: () => /*#__PURE__*/React.createElement(MainTable, {
+    headers: [{
+      content: /*#__PURE__*/React.createElement("span", null, "Name", /*#__PURE__*/React.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"
+};
+export var Paginated = {
+  render: () => /*#__PURE__*/React.createElement(MainTable, {
+    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"
+};
+export var Empty = {
+  render: () => /*#__PURE__*/React.createElement(MainTable, {
+    headers: [{
+      content: "Plan"
+    }, {
+      content: "Foundation Cloud"
+    }, {
+      content: "Foundation Cloud Plus"
+    }],
+    rows: [],
+    emptyStateMsg: "No data to display"
+  }),
+  name: "Empty"
+};

package/dist/esm/components/MainTable/MainTable.test.d.ts

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

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

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

package/dist/esm/components/MainTable/index.js

@@ -0,0 +1 @@
+export { default } from "./MainTable";

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

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