@ably/ui 13.3.0 → 14.0.0-dev.58ef698

package/src/core/Table/TableCell.tsx

@@ -0,0 +1,84 @@
+import React, { PropsWithChildren } from "react";
+import Icon from "../Icon/component.tsx";
+
+type TableCellProps = {
+  isRowHeader?: boolean;
+} & React.TdHTMLAttributes<HTMLTableCellElement>;
+
+const Supported = () => (
+  <Icon
+    name="icon-gui-check-circled-fill"
+    size="1.5rem"
+    color="text-gui-success"
+    additionalCSS="flex-grow-0 flex-shrink-0"
+    data-testid="supported-icon"
+  />
+);
+
+const Unsupported = () => (
+  <Icon
+    name="icon-gui-cross-circled-fill"
+    size="1.5rem"
+    color="text-gui-error"
+    additionalCSS="flex-grow-0 flex-shrink-0"
+    data-testid="unsupported-icon"
+  />
+);
+
+const LabelCell = ({
+  children,
+  ...rest
+}: PropsWithChildren<React.TdHTMLAttributes<HTMLTableCellElement>>) => {
+  const classes = `
+    ui-text-p1 !font-bold pt-24 pb-8 border-light-grey sm:p-24 sm:relative sm:top-2 flex sm:table-cell ${
+      rest.className ?? ""
+    }
+  `;
+
+  return (
+    <td {...rest} className={classes}>
+      {children}
+    </td>
+  );
+};
+
+const TableCell = ({
+  children,
+  isRowHeader,
+  ...rest
+}: PropsWithChildren<TableCellProps>) => (
+  <td
+    {...rest}
+    className={`
+        border-light-grey sm:p-24 leading-none flex sm:table-cell
+        ${
+          isRowHeader
+            ? "rounded-l-none rounded-r sm:rounded-lg py-20 px-24"
+            : "py-6"
+        }
+        ${rest.className ?? ""}
+      `}
+  >
+    {children}
+  </td>
+);
+
+const HeaderCell = ({
+  children,
+  ...rest
+}: PropsWithChildren<React.TdHTMLAttributes<HTMLTableCellElement>>) => (
+  <td {...rest} className="ui-text-h3 px-24 py-24 hidden sm:table-cell">
+    {children}
+  </td>
+);
+
+const CtaCell = ({
+  children,
+  ...rest
+}: PropsWithChildren<React.TdHTMLAttributes<HTMLTableCellElement>>) => (
+  <td {...rest} className="pt-24 hidden sm:table-cell">
+    {children}
+  </td>
+);
+
+export { TableCell, LabelCell, HeaderCell, CtaCell, Supported, Unsupported };

package/src/core/Table/TableRow.tsx

@@ -0,0 +1,25 @@
+import React, { PropsWithChildren } from "react";
+
+const CtaRow = ({ children }: PropsWithChildren) => (
+  <tr>
+    <td className="hidden sm:block"></td>
+    {children}
+  </tr>
+);
+
+type RowProps = {
+  isHeader?: boolean;
+} & React.HTMLAttributes<HTMLTableRowElement>;
+
+const TableRow = ({
+  children,
+  isHeader,
+  ...rest
+}: PropsWithChildren<RowProps>) => (
+  <tr {...rest}>
+    {isHeader && <td className="bg-white" />}
+    {children}
+  </tr>
+);
+
+export { TableRow, CtaRow };

package/src/core/Table/index.ts

@@ -0,0 +1,24 @@
+import { Table, TableRowHeader, TableHeader, TableBody } from "./Table";
+import { TableRow } from "./TableRow";
+import {
+  TableCell,
+  LabelCell,
+  HeaderCell,
+  CtaCell,
+  Supported,
+  Unsupported,
+} from "./TableCell";
+
+export default {
+  Root: Table,
+  Row: TableRow,
+  Cell: TableCell,
+  LabelCell,
+  HeaderCell,
+  CtaCell,
+  RowHeader: TableRowHeader,
+  Body: TableBody,
+  Header: TableHeader,
+  Supported,
+  Unsupported,
+};

package/src/core/Table/stories/Table.stories.tsx

@@ -0,0 +1,12 @@
+import { PricingPageTable } from "./data";
+
+export default {
+  title: "Components/Table",
+  component: PricingPageTable,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+export const PricingPage = {};

package/src/core/Table/stories/data.tsx

@@ -0,0 +1,113 @@
+import React, { Fragment } from "react";
+
+import Tooltip from "../../Tooltip/component";
+import { Supported, Unsupported } from "../TableCell";
+import Table from "..";
+
+const testRow = (index) => ({
+  label: `Label ${index + 1}`,
+  cells: [
+    { label: "text", content: "Cell content", column: "Free" },
+    {
+      label: "yes",
+      content: (
+        <div className="flex items-center sm:flex-col sm:items-start">
+          <span className="sm:order-1 px-6 sm:py-6 sm:px-0">Supported</span>
+          <span className="sm:order-0">
+            <Supported />
+          </span>
+        </div>
+      ),
+      column: "PAYG",
+    },
+    {
+      label: "no",
+      content: (
+        <div className="flex items-center  sm:flex-col sm:items-start">
+          <span className="sm:order-1 px-6 sm:py-6 sm:px-0">Unsupported</span>
+          <span className="sm:order-0">
+            <Unsupported />
+          </span>
+        </div>
+      ),
+      column: "Custom",
+    },
+  ],
+});
+
+const sections = ["Features", "Support", "Technical Support"].map((label) => ({
+  label,
+  rows: [...Array(5)].map((_, i) => testRow(i)),
+}));
+
+export const PricingPageTable = () => {
+  return (
+    <div className="ui-standard-container">
+      <h2 className="ui-text-h2 text-center m-32">Pricing Page Table</h2>
+      <p className="text-center m-32">Example content</p>
+      <Table.Root>
+        <Table.Header>
+          <Table.Row>
+            <Table.Cell>
+              <span className="ui-text-h3 hidden sm:block">Free</span>
+            </Table.Cell>
+            <Table.Cell>
+              <span className="ui-text-h3 hidden sm:block">PAYG</span>
+            </Table.Cell>
+            <Table.Cell>
+              <span className="ui-text-h3 hidden sm:block">Custom</span>
+            </Table.Cell>
+          </Table.Row>
+        </Table.Header>
+        <Table.Body>
+          {sections.map((section) => (
+            <Fragment key={section.label}>
+              <Table.RowHeader>
+                <Table.Cell colSpan={4}>{section.label}</Table.Cell>
+              </Table.RowHeader>
+              {section.rows.map((row) => (
+                <Table.Row key={row.label}>
+                  <Table.LabelCell
+                    key={row.label}
+                    className="border-t border-light-grey"
+                  >
+                    <a className="ui-link" href="#">
+                      {row.label}
+                    </a>
+                    <Tooltip>Example tooltip</Tooltip>
+                  </Table.LabelCell>
+                  {row.cells.map((cell) => (
+                    <Table.Cell key={cell.label} className="last:mb-16 sm:mb-0">
+                      <div className="flex-1 sm:hidden !text-dark-grey ui-text-overline2">
+                        {cell.column}
+                      </div>
+                      {cell.content}
+                    </Table.Cell>
+                  ))}
+                </Table.Row>
+              ))}
+            </Fragment>
+          ))}
+          <Table.Row>
+            <Table.Cell></Table.Cell>
+            <Table.CtaCell>
+              <a href="#" className="ui-btn-secondary">
+                Get started
+              </a>
+            </Table.CtaCell>
+            <Table.CtaCell>
+              <a href="#" className="ui-btn-secondary">
+                Get started
+              </a>
+            </Table.CtaCell>
+            <Table.CtaCell>
+              <a href="#" className="ui-btn">
+                Contact sales
+              </a>
+            </Table.CtaCell>
+          </Table.Row>
+        </Table.Body>
+      </Table.Root>
+    </div>
+  );
+};

package/src/core/Tooltip/Tooltip.stories.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import Tooltip from "./component";
+
+export default {
+  title: "Components/Tooltip",
+  component: Tooltip,
+  tags: ["autodocs"],
+  args: {
+    children: "Example content",
+  },
+};
+
+export const Central = {
+  render: (args) => (
+    <div className="w-256 h-256 flex items-center justify-center m-24 border">
+      <Tooltip>{args.children}</Tooltip>
+    </div>
+  ),
+};
+
+export const LeftBound = {
+  render: (args) => (
+    <div className="w-256 h-256 flex items-center m-24 border">
+      <Tooltip>{args.children}</Tooltip>
+    </div>
+  ),
+};

package/src/core/Tooltip/component.tsx

@@ -0,0 +1,60 @@
+import React, { PropsWithChildren, useEffect, useRef, useState } from "react";
+import Icon from "../Icon/component.tsx";
+
+const Tooltip = ({ children }: PropsWithChildren) => {
+  const [open, setOpen] = useState(false);
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  const offset = 8;
+  const reference = useRef<HTMLButtonElement>(null);
+  const floating = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (open) {
+      const floatingRect = floating.current?.getBoundingClientRect();
+      const referenceRect = reference.current?.getBoundingClientRect();
+
+      if (floatingRect && referenceRect) {
+        setPosition({
+          x:
+            Math.min(floatingRect.width / 2, floatingRect.left) -
+            referenceRect.width / 2,
+          y: Math.min(floatingRect.height, floatingRect.top) + offset,
+        });
+      }
+    } else {
+      setPosition({ x: 0, y: 0 });
+    }
+  }, [open]);
+
+  return (
+    <div className="relative inline-block align-top h-16">
+      <button
+        onMouseEnter={() => setOpen(true)}
+        onMouseLeave={() => setOpen(false)}
+        className="ml-8 p-0 relative top-1 focus:outline-none"
+        type="button"
+        ref={reference}
+        aria-describedby="tooltip"
+      >
+        <Icon name="icon-gui-info" size="1rem" />
+      </button>
+
+      {open ? (
+        <div
+          className="bg-light-grey p-12 rounded pointer-events-none absolute z-20"
+          role="tooltip"
+          ref={floating}
+          style={{
+            top: -position.y,
+            left: -position.x,
+            boxShadow: "4px 4px 15px rgba(0, 0, 0, 0.2)",
+          }}
+        >
+          <div className="w-256">{children}</div>
+        </div>
+      ) : null}
+    </div>
+  );
+};
+
+export default Tooltip;

package/src/core/icons.js

@@ -0,0 +1,6 @@
+import { loadSprites } from "./scripts";
+import sprites from "../../core/sprites.svg";
+
+const loadIcons = () => loadSprites(sprites);
+
+export default loadIcons;

package/src/core/{react-renderer.js → react-renderer.tsx}

@@ -1,9 +1,10 @@
 import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 
-const renderComponent = (Component, props, node) =>
-  // eslint-disable-next-line react/no-render-return-value
-  ReactDOM.render(<Component {...props} />, node);
+const renderComponent = (Component, props, node) => {
+  const root = createRoot(node);
+  root.render(<Component {...props} />);
+};
 
 export { renderComponent };
 
@@ -11,15 +12,16 @@ export default function reactRenderer(components) {
   const reactComponents = document.querySelectorAll("[data-react]");
 
   Array.from(reactComponents).forEach((node) => {
-    const className = node.getAttribute("data-react");
+    const className = node.getAttribute("data-react") ?? "";
     const Constructor = components[className];
 
     if (!Constructor) return;
 
     const propsJson = node.getAttribute("data-react-props");
-    const props = propsJson && JSON.parse(propsJson || {});
+    const props = propsJson && JSON.parse(propsJson || "");
 
-    ReactDOM.render(<Constructor {...props} />, node);
+    const root = createRoot(node);
+    root.render(<Constructor {...props} />);
 
     node.removeAttribute("data-react");
     node.removeAttribute("data-react-props");

package/src/core/styles/buttons.css

@@ -1,124 +1,122 @@
-@layer components {
-  .ui-btn {
-    @apply text-white bg-cool-black text-btn2 font-sans font-bold inline-block rounded p-btn;
-    @apply hover:text-white hover:bg-active-orange;
-    @apply active:text-white active:bg-red-orange;
-    @apply focus:text-white focus:bg-cool-black focus:outline-gui-focus;
-    @apply disabled:text-mid-grey disabled:bg-gui-unavailable disabled:cursor-not-allowed;
-    @apply transition-colors;
-    @apply inline-flex items-center justify-center;
-  }
-
-  .ui-btn-alt {
-    transition: background-position 0.2s;
-    background: linear-gradient(
-      61.2deg,
-      var(--color-active-orange) 5%,
-      #fe5215 19%,
-      #fc4a13 27%,
-      #f73c10 33%,
-      #f1280a 39%,
-      #e90f04 44%,
-      var(--color-red-orange) 50%
-    );
-    background-size: 200% 100%;
-    background-position: 0% 0%;
-
-    @apply text-white text-btn2 font-sans font-bold inline-block rounded p-btn;
-    @apply focus:outline-gui-focus;
-    @apply inline-flex items-center justify-center;
-  }
-
-  .ui-btn-alt:hover,
-  .ui-btn-alt:focus {
-    background-position: 100% 0%;
-  }
-
-  .ui-btn-alt:disabled {
-    background: linear-gradient(var(--gradient-transparent));
-    @apply bg-gui-unavailable text-mid-grey cursor-not-allowed;
-  }
-
-  .ui-btn-invert {
-    @apply text-cool-black bg-white text-btn2 font-sans font-bold inline-block rounded p-btn;
-    @apply hover:text-white hover:bg-active-orange;
-    @apply active:text-white active:bg-red-orange;
-    @apply focus:text-white focus:bg-cool-black focus:outline-gui-focus;
-    @apply disabled:text-mid-grey disabled:bg-gui-unavailable disabled:cursor-not-allowed;
-    @apply transition-colors;
-    @apply inline-flex items-center justify-center;
-  }
-
-  .ui-btn-secondary {
-    @apply text-cool-black bg-white text-btn2 font-sans font-bold inline-block border-btn border-cool-black rounded p-btn;
-    @apply hover:text-cool-black hover:border-active-orange hover:bg-white;
-    @apply active:border-red-orange active:bg-white;
-    @apply focus:border-cool-black focus:bg-white focus:outline-gui-focus;
-    @apply disabled:text-gui-unavailable disabled:border-gui-unavailable disabled:bg-white disabled:cursor-not-allowed;
-    @apply transition-colors;
-    @apply inline-flex items-center justify-center;
-  }
-
-  .ui-btn-secondary-invert {
-    @apply text-white bg-cool-black text-btn2 font-sans font-bold inline-block border-btn border-mid-grey rounded p-btn;
-    @apply hover:text-white hover:border-active-orange;
-    @apply active:border-red-orange;
-    @apply focus:outline-gui-focus;
-    @apply disabled:text-gui-unavailable disabled:border-gui-unavailable disabled:cursor-not-allowed;
-    @apply transition-colors;
-    @apply inline-flex items-center justify-center;
-  }
-
-  .ui-btn-icon {
-    @apply w-24 h-24 mr-16;
-  }
-
-  .ui-btn-icon-small {
-    @apply w-20 h-20 mr-12;
-  }
-
-  .ui-btn-icon-xsmall {
-    @apply w-16 h-16 mr-8;
-  }
-
-  .ui-chip {
-    @apply text-btn3 p-chip rounded text-cool-black;
-    @apply hover:bg-mid-grey;
-    @apply active:bg-red-orange active:text-white;
-    @apply focus:bg-red-orange focus:text-white focus:outline-none;
-    @apply disabled:text-mid-grey disabled:bg-gui-unavailable disabled:cursor-not-allowed;
-    @apply transition-colors;
-  }
-
-  .ui-chip[data-selected] {
-    @apply bg-active-orange text-white;
-  }
-
-  .ui-chip[data-selected]:hover {
-    @apply bg-mid-grey text-cool-black;
-  }
-
-  .ui-chip[data-selected]:focus {
-    @apply bg-red-orange text-white;
-  }
-
-  .ui-chip-alt {
-    @apply text-btn3 p-chip rounded text-white;
-    @apply hover:bg-gui-hover;
-    @apply active:bg-gui-active active:text-white;
-    @apply focus:bg-gui-active focus:text-white focus:outline-none;
-    @apply disabled:text-mid-grey disabled:bg-gui-unavailable disabled:cursor-not-allowed;
-    @apply transition-colors;
-  }
-
-  .ui-chip-alt[data-selected] {
-    @apply bg-dark-grey text-white;
-  }
-  .ui-chip-alt[data-selected]:hover {
-    @apply bg-gui-hover text-white;
-  }
-
-  .ui-chip-alt[data-selected]:focus {
-    @apply bg-gui-active text-white;
-  }
+.ui-btn {
+  @apply text-white bg-cool-black text-btn2 font-sans font-bold inline-block rounded p-btn;
+  @apply hover:text-white hover:bg-active-orange;
+  @apply active:text-white active:bg-red-orange;
+  @apply focus:text-white focus:bg-cool-black focus:outline-gui-focus;
+  @apply disabled:text-mid-grey disabled:bg-gui-unavailable disabled:cursor-not-allowed;
+  @apply transition-colors;
+  @apply inline-flex items-center justify-center;
+}
+
+.ui-btn-alt {
+  transition: background-position 0.2s;
+  background: linear-gradient(
+    61.2deg,
+    var(--color-active-orange) 5%,
+    #fe5215 19%,
+    #fc4a13 27%,
+    #f73c10 33%,
+    #f1280a 39%,
+    #e90f04 44%,
+    var(--color-red-orange) 50%
+  );
+  background-size: 200% 100%;
+  background-position: 0% 0%;
+
+  @apply text-white text-btn2 font-sans font-bold inline-block rounded p-btn;
+  @apply focus:outline-gui-focus;
+  @apply inline-flex items-center justify-center;
+}
+
+.ui-btn-alt:hover,
+.ui-btn-alt:focus {
+  background-position: 100% 0%;
+}
+
+.ui-btn-alt:disabled {
+  background: linear-gradient(var(--gradient-transparent));
+  @apply bg-gui-unavailable text-mid-grey cursor-not-allowed;
+}
+
+.ui-btn-invert {
+  @apply text-cool-black bg-white text-btn2 font-sans font-bold inline-block rounded p-btn;
+  @apply hover:text-white hover:bg-active-orange;
+  @apply active:text-white active:bg-red-orange;
+  @apply focus:text-white focus:bg-cool-black focus:outline-gui-focus;
+  @apply disabled:text-mid-grey disabled:bg-gui-unavailable disabled:cursor-not-allowed;
+  @apply transition-colors;
+  @apply inline-flex items-center justify-center;
+}
+
+.ui-btn-secondary {
+  @apply text-cool-black bg-white text-btn2 font-sans font-bold inline-block border-btn border-cool-black rounded p-btn;
+  @apply hover:text-cool-black hover:border-active-orange hover:bg-white;
+  @apply active:border-red-orange active:bg-white;
+  @apply focus:border-cool-black focus:bg-white focus:outline-gui-focus;
+  @apply disabled:text-gui-unavailable disabled:border-gui-unavailable disabled:bg-white disabled:cursor-not-allowed;
+  @apply transition-colors;
+  @apply inline-flex items-center justify-center;
+}
+
+.ui-btn-secondary-invert {
+  @apply text-white bg-cool-black text-btn2 font-sans font-bold inline-block border-btn border-mid-grey rounded p-btn;
+  @apply hover:text-white hover:border-active-orange;
+  @apply active:border-red-orange;
+  @apply focus:outline-gui-focus;
+  @apply disabled:text-gui-unavailable disabled:border-gui-unavailable disabled:cursor-not-allowed;
+  @apply transition-colors;
+  @apply inline-flex items-center justify-center;
+}
+
+.ui-btn-icon {
+  @apply w-24 h-24 mr-16;
+}
+
+.ui-btn-icon-small {
+  @apply w-20 h-20 mr-12;
+}
+
+.ui-btn-icon-xsmall {
+  @apply w-16 h-16 mr-8;
+}
+
+.ui-chip {
+  @apply text-btn3 p-chip rounded text-cool-black;
+  @apply hover:bg-mid-grey;
+  @apply active:bg-red-orange active:text-white;
+  @apply focus:bg-red-orange focus:text-white focus:outline-none;
+  @apply disabled:text-mid-grey disabled:bg-gui-unavailable disabled:cursor-not-allowed;
+  @apply transition-colors;
+}
+
+.ui-chip[data-selected] {
+  @apply bg-active-orange text-white;
+}
+
+.ui-chip[data-selected]:hover {
+  @apply bg-mid-grey text-cool-black;
+}
+
+.ui-chip[data-selected]:focus {
+  @apply bg-red-orange text-white;
+}
+
+.ui-chip-alt {
+  @apply text-btn3 p-chip rounded text-white;
+  @apply hover:bg-gui-hover;
+  @apply active:bg-gui-active active:text-white;
+  @apply focus:bg-gui-active focus:text-white focus:outline-none;
+  @apply disabled:text-mid-grey disabled:bg-gui-unavailable disabled:cursor-not-allowed;
+  @apply transition-colors;
+}
+
+.ui-chip-alt[data-selected] {
+  @apply bg-dark-grey text-white;
+}
+.ui-chip-alt[data-selected]:hover {
+  @apply bg-gui-hover text-white;
+}
+
+.ui-chip-alt[data-selected]:focus {
+  @apply bg-gui-active text-white;
 }