@ably/ui 14.0.0-dev.968e4a2 → 14.0.0-dev.99c9769

package/src/core/Accordion/Accordion.stories.tsx

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

package/src/core/Accordion.tsx

@@ -1,5 +1,5 @@
 import React, { useState, ReactNode, JSX } from "react";
-import Icon from "../Icon/component.tsx";
+import Icon from "./Icon";
 
 type AccordionData = {
   name: string;

package/src/core/Code/Code.stories.tsx

@@ -1,4 +1,4 @@
-import Code from "./component.tsx";
+import Code from "../Code";
 
 export default {
   title: "Components/Code",

package/src/core/Code.tsx

@@ -1,11 +1,11 @@
 import React from "react";
 
-import "../utils/syntax-highlighter.css";
+import "./utils/syntax-highlighter.css";
 import {
   highlightSnippet,
   registerDefaultLanguages,
-} from "../utils/syntax-highlighter";
-import languagesRegistry from "../utils/syntax-highlighter-registry";
+} from "./utils/syntax-highlighter";
+import languagesRegistry from "./utils/syntax-highlighter-registry";
 
 registerDefaultLanguages(languagesRegistry);
 

package/src/core/ConnectStateWrapper.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 
-import { connectState, getRemoteDataStore } from "../remote-data-store";
+import { connectState, getRemoteDataStore } from "./remote-data-store";
 
 /*
   Connect a react component to a global store.

package/src/core/ContactFooter/ContactFooter.stories.tsx

@@ -1,4 +1,4 @@
-import ContactFooter from "./component.tsx";
+import ContactFooter from "../ContactFooter";
 
 export default {
   title: "Components/Contact Footer",

package/src/core/ContactFooter.tsx

@@ -1,9 +1,9 @@
 import React, { useEffect } from "react";
 
-import Icon from "../Icon/component.tsx";
-import _absUrl from "../url-base.js";
-import toggleChatWidget from "../hubspot-chat-toggle";
-import "./component.css";
+import Icon from "./Icon";
+import _absUrl from "./url-base.js";
+import toggleChatWidget from "./hubspot-chat-toggle";
+import "./ContactFooter/component.css";
 
 type ContactFooterProps = {
   urlBase: string;

package/src/core/CookieMessage/CookieMessage.stories.tsx

@@ -1,4 +1,4 @@
-import CookieMessage from "./component.tsx";
+import CookieMessage from "../CookieMessage";
 
 export default {
   title: "Components/Cookie Message",

package/src/core/CookieMessage.tsx

@@ -1,8 +1,8 @@
 import React, { useRef, useEffect, useState } from "react";
 import Cookie from "js-cookie";
-import "./component.css";
 
-import _absUrl from "../url-base";
+import "./CookieMessage/component.css";
+import _absUrl from "./url-base";
 
 const COOKIE_EXPIRY = 365;
 

package/src/core/CustomerLogos/CustomerLogos.stories.tsx

@@ -1,4 +1,4 @@
-import CustomerLogos from "./component.tsx";
+import CustomerLogos from "../CustomerLogos";
 
 import hubspot from "../images/cust-logo-hubspot-mono-pos.svg";
 import webflow from "../images/cust-logo-webflow-col-pos.svg";

package/src/core/DropdownMenu/DropdownMenu.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import Icon from "../Icon/component.tsx";
-import DropdownMenu from "./component.tsx";
+import Icon from "../Icon";
+import DropdownMenu from "../DropdownMenu";
 
 export default {
   title: "Components/Dropdown Menu",

package/src/core/DropdownMenu.tsx

@@ -7,7 +7,7 @@ import React, {
   ReactNode,
   Dispatch,
 } from "react";
-import Icon from "../Icon/component.tsx";
+import Icon from "./Icon";
 
 const DropdownMenuContext = createContext<{
   isOpen: boolean;

package/src/core/FeaturedLink/FeaturedLink.stories.tsx

@@ -1,4 +1,4 @@
-import FeaturedLink from "./component.tsx";
+import FeaturedLink from "../FeaturedLink";
 
 export default {
   title: "Components/Featured Link",

package/src/core/FeaturedLink.tsx

@@ -1,6 +1,6 @@
 import React, { CSSProperties, ReactNode } from "react";
 
-import Icon from "../Icon/component.tsx";
+import Icon from "./Icon";
 
 type FeaturedLinkProps = {
   url: string;

package/src/core/Flash/Flash.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import Flash, { reducerFlashes } from "./component.tsx";
+import Flash, { reducerFlashes } from "../Flash";
 
 import {
   attachStoreToWindow,

package/src/core/Flash.tsx

@@ -2,10 +2,10 @@ import React, { useEffect, useState, useRef } from "react";
 import DOMPurify from "dompurify";
 import { nanoid } from "nanoid/non-secure";
 
-import { getRemoteDataStore } from "../remote-data-store.js";
-import ConnectStateWrapper from "../ConnectStateWrapper/component.tsx";
-import Icon from "../Icon/component.tsx";
-import "./component.css";
+import { getRemoteDataStore } from "./remote-data-store.js";
+import ConnectStateWrapper from "./ConnectStateWrapper";
+import Icon from "./Icon";
+import "./Flash/component.css";
 
 type FlashProps = {
   id: string;

package/src/core/Footer/Footer.stories.tsx

@@ -1,4 +1,4 @@
-import Footer from "./component.tsx";
+import Footer from "../Footer";
 
 import ablyStack from "../images/ably-stack.svg";
 import highestPerformer from "../images/high-performer-2023.svg";

package/src/core/Footer.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 
-import Icon from "../Icon/component.tsx";
-import _absUrl from "../url-base.js";
-import "./component.css";
+import Icon from "./Icon";
+import _absUrl from "./url-base.js";
+import "./Footer/component.css";
 
 type FooterProps = {
   paths: {

package/src/core/Icon/Icon.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import Icon from "./component.tsx";
+import Icon from "../Icon";
 
 export default {
   title: "Components/Icon",
@@ -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",

package/src/core/Loader/Loader.stories.tsx

@@ -1,4 +1,4 @@
-import Loader from "./component.tsx";
+import Loader from "../Loader";
 
 export default {
   title: "Components/Loader",

package/src/core/Logo/Logo.stories.tsx

@@ -1,4 +1,4 @@
-import Logo from "./component.tsx";
+import Logo from "../Logo";
 import logoUrl from "../images/ably-logo.png";
 
 export default {

package/src/core/Meganav/Meganav.stories.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from "react";
 import { rest } from "msw";
 
-import Meganav from "./component.tsx";
+import Meganav from "../Meganav";
 import loadIcons from "../icons.js";
 import logo from "../images/ably-logo.png";
 import ablyStack from "../images/ably-stack.svg";

package/src/core/Meganav.tsx

@@ -1,24 +1,22 @@
 import React, { ReactNode, useEffect, useState } from "react";
 
-import { connectState } from "../remote-data-store.js";
-import { selectSessionData } from "../remote-session-data.js";
-
-import Logo from "../Logo/component.tsx";
-import "./component.css";
-
-import MeganavScripts from "./component.js";
-import MeganavItemsDesktop from "../MeganavItemsDesktop/component.tsx";
-import MeganavItemsSignedIn from "../MeganavItemsSignedIn/component.tsx";
-import MeganavItemsMobile from "../MeganavItemsMobile/component.tsx";
-import Notice from "../Notice/component.tsx";
-import MeganavData from "./component.json";
-import _absUrl from "../url-base.js";
-
-import MeganavContentProducts from "../MeganavContentProducts/component.tsx";
-import MeganavContentUseCases from "../MeganavContentUseCases/component.tsx";
-import MeganavContentCompany from "../MeganavContentCompany/component.tsx";
-import MeganavContentDevelopers from "../MeganavContentDevelopers/component.tsx";
-import MeganavSearch from "../MeganavSearch/component.tsx";
+import { connectState } from "./remote-data-store.js";
+import { selectSessionData } from "./remote-session-data.js";
+
+import Logo from "./Logo";
+import "./Meganav/component.css";
+import MeganavData from "./Meganav/component.json";
+import MeganavScripts from "./Meganav/component.js";
+import MeganavItemsDesktop from "./MeganavItemsDesktop";
+import MeganavItemsSignedIn from "./MeganavItemsSignedIn";
+import MeganavItemsMobile from "./MeganavItemsMobile";
+import Notice from "./Notice";
+import _absUrl from "./url-base.js";
+import MeganavContentProducts from "./MeganavContentProducts";
+import MeganavContentUseCases from "./MeganavContentUseCases";
+import MeganavContentCompany from "./MeganavContentCompany";
+import MeganavContentDevelopers from "./MeganavContentDevelopers";
+import MeganavSearch from "./MeganavSearch";
 
 export type MeganavTheme = {
   backgroundColor?: string;

package/src/core/MeganavBlogPostsList.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
-import FeaturedLink from "../FeaturedLink/component.tsx";
-import { AbsUrl } from "../Meganav/component.tsx";
+import FeaturedLink from "./FeaturedLink";
+import { AbsUrl } from "./Meganav";
 
 type MeganavBlogPostsListProps = {
   recentBlogPosts: {

package/src/core/MeganavContentCompany.tsx

@@ -1,10 +1,10 @@
 import React from "react";
 
-import MeganavBlogPostsList from "../MeganavBlogPostsList/component.tsx";
-import ConnectStateWrapper from "../ConnectStateWrapper/component.tsx";
-import { selectRecentBlogPosts } from "../remote-blogs-posts.js";
-import Icon from "../Icon/component.tsx";
-import { AbsUrl } from "../Meganav/component.tsx";
+import MeganavBlogPostsList from "./MeganavBlogPostsList";
+import ConnectStateWrapper from "./ConnectStateWrapper";
+import { selectRecentBlogPosts } from "./remote-blogs-posts.js";
+import Icon from "./Icon";
+import { AbsUrl } from "./Meganav";
 
 type MeganavContentCompanyProps = {
   absUrl: AbsUrl;

package/src/core/MeganavContentDevelopers.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
-import Icon from "../Icon/component.tsx";
-import { AbsUrl } from "../Meganav/component.tsx";
+import Icon from "./Icon";
+import { AbsUrl } from "./Meganav";
 
 const MeganavContentDevelopers = ({ absUrl }: { absUrl: AbsUrl }) => (
   <div className="flex max-w-screen-xl mx-auto">

package/src/core/MeganavContentProducts.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
-import FeaturedLink from "../FeaturedLink/component.tsx";
-import { AbsUrl } from "../Meganav/component.tsx";
+import FeaturedLink from "./FeaturedLink";
+import { AbsUrl } from "./Meganav";
 
 type MeganavContentProductsProps = {
   paths: {

package/src/core/MeganavContentUseCases.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
-import Icon from "../Icon/component.tsx";
-import { AbsUrl } from "../Meganav/component.tsx";
+import Icon from "./Icon";
+import { AbsUrl } from "./Meganav";
 
 const MeganavContentUseCases = ({ absUrl }: { absUrl: AbsUrl }) => (
   <div className="flex max-w-screen-xl mx-auto">

package/src/core/MeganavControl.tsx

@@ -1,7 +1,7 @@
 import React, { ReactNode } from "react";
 
-import Icon from "../Icon/component.tsx";
-import { MeganavTheme } from "../Meganav/component.tsx";
+import Icon from "./Icon";
+import { MeganavTheme } from "./Meganav";
 
 type MeganavControlProps = {
   ariaControls: string;

package/src/core/MeganavControlMobileDropdown.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
-import Icon from "../Icon/component.tsx";
-import { MeganavTheme } from "../Meganav/component.tsx";
+import Icon from "./Icon";
+import { MeganavTheme } from "./Meganav";
 
 const MeganavControlMobileDropdown = ({ theme }: { theme: MeganavTheme }) => (
   <button

package/src/core/MeganavControlMobilePanelClose.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 
-import Icon from "../Icon/component.tsx";
-
+import Icon from "./Icon";
 type MeganavControlMobilePanelCloseProps = {
   ariaControls: string;
   displayHr?: boolean;

package/src/core/MeganavControlMobilePanelOpen.tsx

@@ -1,7 +1,6 @@
 import React, { ReactNode } from "react";
 
-import Icon from "../Icon/component.tsx";
-
+import Icon from "./Icon";
 type MeganavControlMobilePanelOpenProps = {
   ariaControls: string;
   children: ReactNode;

package/src/core/MeganavItemsDesktop.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 
-import MeganavData from "../Meganav/component.json";
-import MeganavControl from "../MeganavControl/component.tsx";
-import { AbsUrl, MeganavPanels, MeganavTheme } from "../Meganav/component.tsx";
+import MeganavData from "./Meganav/component.json";
+import MeganavControl from "./MeganavControl";
+import { AbsUrl, MeganavPanels, MeganavTheme } from "./Meganav";
 
 type MeganavDesktopItems = {
   panels: MeganavPanels;

package/src/core/MeganavItemsMobile.tsx

@@ -1,19 +1,19 @@
 import React from "react";
 
-import SignOutLink from "../SignOutLink/component.tsx";
-import MeganavSearchSuggestions from "../MeganavSearchSuggestions/component.tsx";
-import Icon from "../Icon/component.tsx";
-import MeganavData from "../Meganav/component.json";
-import MeganavControlMobileDropdown from "../MeganavControlMobileDropdown/component.tsx";
-import MeganavControlMobilePanelClose from "../MeganavControlMobilePanelClose/component.tsx";
-import MeganavControlMobilePanelOpen from "../MeganavControlMobilePanelOpen/component.tsx";
-import MeganavSearchAutocomplete from "../MeganavSearchAutocomplete/component.tsx";
+import SignOutLink from "./SignOutLink";
+import MeganavSearchSuggestions from "./MeganavSearchSuggestions";
+import Icon from "./Icon";
+import MeganavData from "./Meganav/component.json";
+import MeganavControlMobileDropdown from "./MeganavControlMobileDropdown";
+import MeganavControlMobilePanelClose from "./MeganavControlMobilePanelClose";
+import MeganavControlMobilePanelOpen from "./MeganavControlMobilePanelOpen";
+import MeganavSearchAutocomplete from "./MeganavSearchAutocomplete";
 import {
   AbsUrl,
   MeganavPanels,
   MeganavSessionState,
   MeganavTheme,
-} from "../Meganav/component.tsx";
+} from "./Meganav";
 
 type MeganavItemsMobileProps = {
   panels: MeganavPanels;

package/src/core/MeganavItemsSignedIn.tsx

@@ -1,13 +1,9 @@
 import React from "react";
 
-import MeganavControl from "../MeganavControl/component.tsx";
-import SignOutLink from "../SignOutLink/component.tsx";
-import MeganavSearch from "../MeganavSearch/component.tsx";
-import {
-  AbsUrl,
-  MeganavSessionState,
-  MeganavTheme,
-} from "../Meganav/component.tsx";
+import MeganavControl from "./MeganavControl";
+import SignOutLink from "./SignOutLink";
+import MeganavSearch from "./MeganavSearch";
+import { AbsUrl, MeganavSessionState, MeganavTheme } from "./Meganav";
 
 type MeganavItemsSignedIn = {
   sessionState: MeganavSessionState;

package/src/core/MeganavSearch.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 
-import Icon from "../Icon/component.tsx";
-import MeganavSearchPanel from "../MeganavSearchPanel/component.tsx";
-import { AbsUrl } from "../Meganav/component.tsx";
+import Icon from "./Icon";
+import MeganavSearchPanel from "./MeganavSearchPanel";
+import { AbsUrl } from "./Meganav";
 
 const MeganavSearch = ({ absUrl }: { absUrl: AbsUrl }) => (
   <>

package/src/core/MeganavSearchPanel.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 
-import Icon from "../Icon/component.tsx";
-import MeganavSearchSuggestions from "../MeganavSearchSuggestions/component.tsx";
-import MeganavSearchAutocomplete from "../MeganavSearchAutocomplete/component.tsx";
-import { AbsUrl } from "../Meganav/component.tsx";
+import Icon from "./Icon";
+import MeganavSearchSuggestions from "./MeganavSearchSuggestions";
+import MeganavSearchAutocomplete from "./MeganavSearchAutocomplete";
+import { AbsUrl } from "./Meganav";
 
 const MeganavSearchPanel = ({ absUrl }: { absUrl: AbsUrl }) => (
   <section className="ui-meganav-content grid-cols-12">

package/src/core/MeganavSearchSuggestions.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
-import FeaturedLink from "../FeaturedLink/component.tsx";
-import { AbsUrl } from "../Meganav/component.tsx";
+import FeaturedLink from "./FeaturedLink";
+import { AbsUrl } from "./Meganav";
 
 type MeganavSearchSuggestionsProps = {
   absUrl: AbsUrl;

package/src/core/Notice/component.js

@@ -3,7 +3,7 @@ import Cookie from "js-cookie";
 import throttle from "lodash.throttle";
 
 import { queryId } from "../dom-query";
-import { FLASH_DATA_ID } from "../Flash/component.tsx";
+import { FLASH_DATA_ID } from "../Flash";
 
 const COOKIE_EXPIRY = 90;
 const COLLAPSE_TRIGGER_DISTANCE = 5;

package/src/core/Notice.tsx

@@ -1,9 +1,8 @@
 import React, { ReactNode, useEffect } from "react";
 
-import NoticeScripts from "./component.js";
-import "./component.css";
-import Icon from "../Icon/component.tsx";
-
+import NoticeScripts from "./Notice/component.js";
+import "./Notice/component.css";
+import Icon from "./Icon";
 type ContentWrapperProps = {
   buttonLink: string;
   children: ReactNode;

package/src/core/SignOutLink.tsx

@@ -1,5 +1,5 @@
 import React, { MouseEventHandler, ReactNode, useRef } from "react";
-import { AbsUrl } from "../Meganav/component.tsx";
+import { AbsUrl } from "./Meganav";
 
 type SignOutLinkProps = {
   token: string;

package/src/core/Slider/Slider.stories.tsx

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

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 })}