From 76956d1c65b127929fc9b372907f03f496cba1c8 Mon Sep 17 00:00:00 2001
From: Jamie Henson <jamie.henson@ably.com>
Date: Mon, 8 Apr 2024 14:13:27 +0100
Subject: [PATCH 1/5] fix: add spread props to Table and Tooltip component
 elements

---
 src/core/Table/Table.tsx     | 47 +++++++++++++++++++++++++++++-------
 src/core/Table/TableCell.tsx | 16 +++++++++---
 src/core/Tooltip.tsx         | 39 ++++++++++++++++++++++++++----
 3 files changed, 84 insertions(+), 18 deletions(-)

diff --git a/src/core/Table/Table.tsx b/src/core/Table/Table.tsx
index 42bbe647d..1d5726d72 100644
--- a/src/core/Table/Table.tsx
+++ b/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 })}
diff --git a/src/core/Table/TableCell.tsx b/src/core/Table/TableCell.tsx
index fba944a66..b0c325b88 100644
--- a/src/core/Table/TableCell.tsx
+++ b/src/core/Table/TableCell.tsx
@@ -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>
 );
diff --git a/src/core/Tooltip.tsx b/src/core/Tooltip.tsx
index ae92ec8b0..736f2ea43 100644
--- a/src/core/Tooltip.tsx
+++ b/src/core/Tooltip.tsx
@@ -1,6 +1,24 @@
-import React, { PropsWithChildren, useEffect, useRef, useState } from "react";
+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;
@@ -26,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={{
@@ -48,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>

From 07e1d4cc3c75102945e926b43439d7c2fcba10e1 Mon Sep 17 00:00:00 2001
From: Jamie Henson <jamie.henson@ably.com>
Date: Mon, 8 Apr 2024 14:19:19 +0100
Subject: [PATCH 2/5] Publish v14.0.0-dev.f024736

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index f19a2ad9e..91b30f944 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "14.0.0-dev.6d5cd62",
+  "version": "14.0.0-dev.f024736",
   "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
   "repository": {
     "type": "git",

From d9d9861f6690cb218b55c51536423d2cad01ba12 Mon Sep 17 00:00:00 2001
From: Jamie Henson <jamie.henson@ably.com>
Date: Mon, 8 Apr 2024 15:13:02 +0100
Subject: [PATCH 3/5] feat: add partial icon

---
 src/core/Icon/Icon.stories.tsx |  1 +
 src/core/Table.tsx             |  2 ++
 src/core/Table/TableCell.tsx   | 19 ++++++++++++++++++-
 3 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/core/Icon/Icon.stories.tsx b/src/core/Icon/Icon.stories.tsx
index a4f28592e..f62e8d568 100644
--- a/src/core/Icon/Icon.stories.tsx
+++ b/src/core/Icon/Icon.stories.tsx
@@ -38,6 +38,7 @@ const coreIcons = [
   "icon-gui-link-arrow",
   "icon-gui-live-chat",
   "icon-gui-minus",
+  "icon-gui-partial",
   "icon-gui-plus",
   "icon-gui-quote-marks-solid",
   "icon-gui-refresh",
diff --git a/src/core/Table.tsx b/src/core/Table.tsx
index 4e59e2ba3..9d035b501 100644
--- a/src/core/Table.tsx
+++ b/src/core/Table.tsx
@@ -7,6 +7,7 @@ import {
   CtaCell,
   Supported,
   Unsupported,
+  Partial,
 } from "./Table/TableCell";
 
 export default {
@@ -21,4 +22,5 @@ export default {
   Header: TableHeader,
   Supported,
   Unsupported,
+  Partial,
 };
diff --git a/src/core/Table/TableCell.tsx b/src/core/Table/TableCell.tsx
index b0c325b88..93570bf06 100644
--- a/src/core/Table/TableCell.tsx
+++ b/src/core/Table/TableCell.tsx
@@ -25,6 +25,15 @@ const Unsupported = () => (
   />
 );
 
+const Partial = () => (
+  <Icon
+    name="icon-gui-partial"
+    size="1.5rem"
+    additionalCSS="flex-grow-0 flex-shrink-0"
+    data-testid="partial-icon"
+  />
+);
+
 const LabelCell = ({
   children,
   ...rest
@@ -89,4 +98,12 @@ const CtaCell = ({
   </td>
 );
 
-export { TableCell, LabelCell, HeaderCell, CtaCell, Supported, Unsupported };
+export {
+  TableCell,
+  LabelCell,
+  HeaderCell,
+  CtaCell,
+  Supported,
+  Unsupported,
+  Partial,
+};

From a36c2a81b79112c7ff306ac457bb456a2441e044 Mon Sep 17 00:00:00 2001
From: Jamie Henson <jamie.henson@ably.com>
Date: Mon, 8 Apr 2024 15:13:59 +0100
Subject: [PATCH 4/5] Publish v14.0.0-dev.99c9769

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 91b30f944..636409909 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "14.0.0-dev.f024736",
+  "version": "14.0.0-dev.99c9769",
   "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
   "repository": {
     "type": "git",

From 210566f80a2150975c56b9a9d2d4a20def13b4cd Mon Sep 17 00:00:00 2001
From: Jamie Henson <jamie.henson@ably.com>
Date: Mon, 8 Apr 2024 15:15:29 +0100
Subject: [PATCH 5/5] fix: add partial icon SVG

---
 src/core/icons/icon-gui-partial.svg | 4 ++++
 1 file changed, 4 insertions(+)
 create mode 100644 src/core/icons/icon-gui-partial.svg

diff --git a/src/core/icons/icon-gui-partial.svg b/src/core/icons/icon-gui-partial.svg
new file mode 100644
index 000000000..9cda5ac63
--- /dev/null
+++ b/src/core/icons/icon-gui-partial.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 12C1.5 17.799 6.20101 22.5 12 22.5C17.799 22.5 22.5 17.799 22.5 12C22.5 6.20101 17.799 1.5 12 1.5C6.20101 1.5 1.5 6.20101 1.5 12ZM1.2779e-06 12C9.30272e-07 18.6274 5.37258 24 12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 -1.95703e-07 12 -4.37114e-07C5.37259 -6.78525e-07 1.62554e-06 5.37258 1.2779e-06 12Z" fill="#03020D"/>
+<path d="M11.5833 23.576C5.37903 23.3566 0.416667 18.2578 0.416667 12C0.416668 5.74218 5.37903 0.643381 11.5833 0.424021L11.5833 23.576Z" fill="#03020D" stroke="#03020D" stroke-width="0.833333"/>
+</svg>