@ably/ui 14.0.0-dev.968e4a2 → 14.0.0-dev.f024736

package/src/core/Slider.tsx

@@ -1,8 +1,8 @@
 import React, { CSSProperties, ReactNode, useEffect, useRef } from "react";
 
-import Icon from "../Icon/component.tsx";
-import SliderScripts from "./component.js";
-import "./component.css";
+import Icon from "./Icon";
+import SliderScripts from "./Slider/component.js";
+import "./Slider/component.css";
 
 type SliderProps = {
   slides?: ReactNode[];

package/src/core/Table/Table.tsx

@@ -1,28 +1,57 @@
-import React, { PropsWithChildren, ReactElement, cloneElement } from "react";
+import React, {
+  PropsWithChildren,
+  ReactElement,
+  TableHTMLAttributes,
+  cloneElement,
+} from "react";
 
 type TableProps = {
   id?: string;
 };
 
-export const Table = ({ id, children }: PropsWithChildren<TableProps>) => (
-  <table id={id} className="ui-standard-container mb-4 sm:table-fixed">
+export const Table = ({
+  id,
+  children,
+  ...rest
+}: PropsWithChildren<TableProps & TableHTMLAttributes<HTMLTableElement>>) => (
+  <table
+    id={id}
+    {...rest}
+    className={`ui-standard-container mb-4 sm:table-fixed ${
+      rest?.className ?? ""
+    }`}
+  >
     {children}
   </table>
 );
 
-export const TableBody = ({ children }: PropsWithChildren) => (
-  <tbody>{children}</tbody>
+export const TableBody = ({
+  children,
+  ...rest
+}: PropsWithChildren<TableHTMLAttributes<HTMLTableSectionElement>>) => (
+  <tbody {...rest}>{children}</tbody>
 );
 
-export const TableHeader = ({ children }: PropsWithChildren) => (
-  <thead className="sticky bg-white z-10 top-0" key="sticky-block">
+export const TableHeader = ({
+  children,
+  ...rest
+}: PropsWithChildren<TableHTMLAttributes<HTMLTableSectionElement>>) => (
+  <thead
+    {...rest}
+    className={`sticky bg-white z-10 top-0 ${rest?.className ?? ""}`}
+  >
     {cloneElement(children as ReactElement, { isHeader: true })}
   </thead>
 );
 
-export const TableRowHeader = ({ children }: PropsWithChildren) => (
+export const TableRowHeader = ({
+  children,
+  ...rest
+}: PropsWithChildren<TableHTMLAttributes<HTMLTableRowElement>>) => (
   <tr
-    className="-ml-24 mt-8 sm:ml-0 sm:mt-0 ui-text-overline1 !text-cool-black  bg-light-grey sm:sticky z-10"
+    className={`-ml-24 mt-8 sm:ml-0 sm:mt-0 bg-light-grey sm:sticky z-10 ${
+      rest?.className ?? ""
+    }`}
     style={{ top: "4rem" }}
   >
     {cloneElement(children as ReactElement, { isRowHeader: true })}

package/src/core/Table/TableCell.tsx

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren } from "react";
-import Icon from "../Icon/component.tsx";
+import Icon from "../Icon";
 
 type TableCellProps = {
   isRowHeader?: boolean;
@@ -31,7 +31,7 @@ const LabelCell = ({
 }: 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 ?? ""
+      rest?.className ?? ""
     }
   `;
 
@@ -56,7 +56,7 @@ const TableCell = ({
             ? "rounded-l-none rounded-r sm:rounded-lg py-20 px-24"
             : "py-6"
         }
-        ${rest.className ?? ""}
+        ${rest?.className ?? ""}
       `}
   >
     {children}
@@ -67,7 +67,12 @@ const HeaderCell = ({
   children,
   ...rest
 }: PropsWithChildren<React.TdHTMLAttributes<HTMLTableCellElement>>) => (
-  <td {...rest} className="ui-text-h3 px-24 py-24 hidden sm:table-cell">
+  <td
+    {...rest}
+    className={`ui-text-h3 px-24 py-24 hidden sm:table-cell ${
+      rest?.className ?? ""
+    }`}
+  >
     {children}
   </td>
 );
@@ -76,7 +81,10 @@ const CtaCell = ({
   children,
   ...rest
 }: PropsWithChildren<React.TdHTMLAttributes<HTMLTableCellElement>>) => (
-  <td {...rest} className="pt-24 hidden sm:table-cell">
+  <td
+    {...rest}
+    className={`pt-24 hidden sm:table-cell ${rest?.className ?? ""}`}
+  >
     {children}
   </td>
 );

package/src/core/Table/data.tsx

@@ -1,8 +1,8 @@
 import React, { Fragment } from "react";
 
-import Tooltip from "../../Tooltip/component";
-import { Supported, Unsupported } from "../TableCell";
-import Table from "..";
+import Tooltip from "../Tooltip";
+import { Supported, Unsupported } from "./TableCell";
+import Table from "../Table";
 
 const testRow = (index) => ({
   label: `Label ${index + 1}`,

package/src/core/Table.tsx

@@ -1,5 +1,5 @@
-import { Table, TableRowHeader, TableHeader, TableBody } from "./Table";
-import { TableRow } from "./TableRow";
+import { Table, TableRowHeader, TableHeader, TableBody } from "./Table/Table";
+import { TableRow } from "./Table/TableRow";
 import {
   TableCell,
   LabelCell,
@@ -7,7 +7,7 @@ import {
   CtaCell,
   Supported,
   Unsupported,
-} from "./TableCell";
+} from "./Table/TableCell";
 
 export default {
   Root: Table,

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

@@ -1,5 +1,5 @@
 import React from "react";
-import Tooltip from "./component";
+import Tooltip from "../Tooltip";
 
 export default {
   title: "Components/Tooltip",

package/src/core/Tooltip.tsx

@@ -1,7 +1,24 @@
-import React, { PropsWithChildren, useEffect, useRef, useState } from "react";
-import Icon from "../Icon/component.tsx";
+import React, {
+  ButtonHTMLAttributes,
+  HTMLAttributes,
+  PropsWithChildren,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import Icon from "./Icon";
 
-const Tooltip = ({ children }: PropsWithChildren) => {
+type TooltipProps = {
+  triggerProps?: ButtonHTMLAttributes<HTMLButtonElement>;
+  tooltipProps?: HTMLAttributes<HTMLDivElement>;
+} & HTMLAttributes<HTMLDivElement>;
+
+const Tooltip = ({
+  children,
+  triggerProps,
+  tooltipProps,
+  ...rest
+}: PropsWithChildren<TooltipProps>) => {
   const [open, setOpen] = useState(false);
   const [position, setPosition] = useState({ x: 0, y: 0 });
   const offset = 8;
@@ -27,21 +44,28 @@ const Tooltip = ({ children }: PropsWithChildren) => {
   }, [open]);
 
   return (
-    <div className="relative inline-block align-top h-16">
+    <div
+      {...rest}
+      className={`relative inline-block align-top h-16 ${
+        rest?.className ?? ""
+      }`}
+    >
       <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"
+        {...triggerProps}
+        className={`ml-8 p-0 relative top-1 focus:outline-none ${
+          triggerProps?.className ?? ""
+        }`}
       >
         <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={{
@@ -49,6 +73,10 @@ const Tooltip = ({ children }: PropsWithChildren) => {
             left: -position.x,
             boxShadow: "4px 4px 15px rgba(0, 0, 0, 0.2)",
           }}
+          {...tooltipProps}
+          className={`bg-light-grey p-12 rounded pointer-events-none absolute z-20 ${
+            tooltipProps?.className ?? ""
+          }`}
         >
           <div className="w-256">{children}</div>
         </div>

package/src/pages/Buttons.mdx

@@ -1,5 +1,5 @@
 import { Meta, Unstyled } from "@storybook/blocks";
-import Icon from "../core/Icon/component.tsx";
+import Icon from "../core/Icon";
 
 <Meta title="Brand/Buttons" />
 

package/src/pages/Chips.mdx

@@ -1,5 +1,5 @@
 import { Meta, Unstyled } from "@storybook/blocks";
-import Icon from "../core/Icon/component.tsx";
+import Icon from "../core/Icon";
 
 <Meta title="Brand/Chips" />
 

package/src/pages/Forms.mdx

@@ -1,7 +1,7 @@
 import { Meta, Unstyled } from "@storybook/blocks";
 import { formsHtml } from "./utils";
-import Code from "../core/Code/component.tsx";
-import Icon from "../core/Icon/component.tsx";
+import Code from "../core/Code";
+import Icon from "../core/Icon";
 
 <Meta title="Brand/Forms" />
 

package/core/CookieMessage/component.js

@@ -1 +0,0 @@
-import"./component.css";

package/core/Flash/component.js

@@ -1 +0,0 @@
-import"./component.css";

package/core/Footer/component.js

@@ -1 +0,0 @@
-import"./component.css";

package/src/core/CookieMessage/component.js

@@ -1 +0,0 @@
-import "./component.css";

package/src/core/Flash/component.js

@@ -1 +0,0 @@
-import "./component.css";

package/src/core/Footer/component.js

@@ -1 +0,0 @@
-import "./component.css";

package/src/core/MeganavContentUseCases/component.js

@@ -1 +0,0 @@
-// TODO: Webpack expects a .js file for any component