@ably/ui 14.0.0-dev.0ed6be7 → 14.0.0-dev.3f64b93

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;
@@ -7,14 +7,14 @@ type AccordionData = {
 };
 
 type AccordionRowProps = {
-  bottomBorder: boolean;
-  topBorder: boolean;
+  bottomBorder?: boolean;
+  topBorder?: boolean;
   active: boolean;
   last: boolean;
   name: string;
   index;
   children: ReactNode;
-  arrowIcon: boolean;
+  arrowIcon?: boolean;
   setActiveIndex: (index: number) => void;
 };
 
@@ -80,7 +80,7 @@ const AccordionRow = ({
         onClick={handleSetIndex}
         className={`flex w-full px-0 focus:outline-none py-20`}
       >
-        <span className="ui-text-p1 font-bold text-left mr-8">{name}</span>
+        <span className="ui-text-p1 !font-bold text-left mr-8">{name}</span>
         <span className="ml-auto">{active ? iconActive : iconInactive}</span>
       </button>
 
@@ -105,7 +105,7 @@ const Accordion = ({
   arrowIcon,
   autoClose,
 }: AccordionProps) => {
-  const [activeIndexes, setActiveIndexes] = useState([]);
+  const [activeIndexes, setActiveIndexes] = useState<number[]>([]);
 
   const handleSetIndex = (index: number) => {
     const currentIndexIsActive = activeIndexes.includes(index);

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/Expander/Expander.stories.tsx

@@ -0,0 +1,132 @@
+import React from "react";
+import Expander from "../Expander";
+
+export default {
+  title: "Components/Expander",
+  component: Expander,
+  tags: ["autodocs"],
+  args: {
+    height: 200,
+  },
+  argTypes: {
+    height: {
+      control: {
+        type: "number",
+      },
+    },
+  },
+};
+
+const longContentInner = (
+  <div>
+    <p>Ipsum</p>
+    <ul className="mb-16 list-inside list-disc">
+      <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
+      <li>Sed convallis ex pharetra, tristique tellus vel, rhoncus velit.</li>
+      <li>Mauris molestie felis et scelerisque ullamcorper.</li>
+      <li>Maecenas congue ligula ut commodo tristique.</li>
+      <li>
+        Pellentesque venenatis elit vitae urna condimentum, in mollis arcu
+        venenatis.
+      </li>
+      <li>Donec nec turpis vel urna egestas fringilla.</li>
+    </ul>
+    <p>Ipsum</p>
+    <ul className="mb-16 list-inside list-disc">
+      <li>Mauris ut nibh vel metus cursus semper.</li>
+      <li>Ut mattis tortor eu urna accumsan gravida.</li>
+      <li>Nunc pellentesque neque at elit pretium tempor.</li>
+      <li>Curabitur finibus magna vitae nunc varius fermentum.</li>
+    </ul>
+    <ul className="mb-16 list-inside list-disc">
+      <li>Curabitur vehicula mi iaculis, luctus augue eu, venenatis quam.</li>
+      <li>Praesent in eros efficitur, consequat ante eu, faucibus arcu.</li>
+      <li>Nulla laoreet nibh a odio interdum, non molestie diam auctor.</li>
+    </ul>
+    <p>Ipsum</p>
+    <ul className="mb-16 list-inside list-disc">
+      <li>
+        Praesent aliquam diam tincidunt, sollicitudin tortor eget, vulputate
+        lacus.
+      </li>
+      <li>Quisque in mi sed ex vulputate varius in a leo.</li>
+      <li>Etiam posuere dolor at tortor aliquam imperdiet.</li>
+      <li>
+        Maecenas quis neque consequat, ultricies est sit amet, congue est.
+      </li>
+      <li>Aenean a elit sed nibh pretium lacinia sed convallis sapien.</li>
+    </ul>
+    <p>Ipsum</p>
+    <ul className="mb-16 list-inside list-disc">
+      <li>
+        Nulla malesuada libero id dolor aliquam, non sagittis mi scelerisque.
+      </li>
+      <li>
+        Etiam tincidunt lacus eu diam laoreet consectetur sit amet non est.
+      </li>
+      <li>In porta arcu nec purus tincidunt vulputate.</li>
+    </ul>
+  </div>
+);
+
+export const LongContent = {
+  render: () => <Expander>{longContentInner}</Expander>,
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "A larger amount of content that exceeds the height cut-off, controls shown.",
+      },
+    },
+  },
+};
+
+export const ShortContent = {
+  render: () => (
+    <Expander>
+      <div>
+        <p>Ipsum</p>
+        <ul className="mb-16 list-inside list-disc">
+          <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
+          <li>
+            Sed convallis ex pharetra, tristique tellus vel, rhoncus velit.
+          </li>
+          <li>Mauris molestie felis et scelerisque ullamcorper.</li>
+          <li>Maecenas congue ligula ut commodo tristique.</li>
+          <li>
+            Pellentesque venenatis elit vitae urna condimentum, in mollis arcu
+            venenatis.
+          </li>
+          <li>Donec nec turpis vel urna egestas fringilla.</li>
+        </ul>
+      </div>
+    </Expander>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "A smaller amount of content that doesn't exceed the height cut-off, therefore no controls shown.",
+      },
+    },
+  },
+};
+
+export const OverriddenStyles = {
+  render: () => (
+    <Expander
+      className="bg-neutral-400 p-16 rounded-lg"
+      fadeClassName="from-neutral-800"
+    >
+      {longContentInner}
+    </Expander>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "A larger amount of content, with overridden styles for the content wrapper and fader.",
+      },
+    },
+  },
+};

package/src/core/Expander.tsx

@@ -0,0 +1,54 @@
+import React, { PropsWithChildren, useEffect, useRef, useState } from "react";
+
+type ExpanderProps = {
+  height?: number;
+  className?: string;
+  fadeClassName?: string;
+};
+
+const Expander = ({
+  height = 200,
+  className,
+  fadeClassName,
+  children,
+}: PropsWithChildren<ExpanderProps>) => {
+  const innerRef = useRef<HTMLDivElement>(null);
+  const [contentHeight, setContentHeight] = useState(height);
+  const [expanded, setExpanded] = useState(false);
+
+  useEffect(() => {
+    setContentHeight(innerRef.current?.clientHeight ?? height);
+  }, [height, expanded]);
+
+  const showControls = contentHeight > height;
+
+  return (
+    <>
+      <div
+        style={{ height: expanded ? contentHeight : height }}
+        className={`overflow-hidden transition-all relative ${className ?? ""}`}
+      >
+        {showControls && !expanded && (
+          <div
+            className={`h-64 w-full bg-gradient-to-t from-white to-transparent absolute bottom-0 left-0 right-0 ${
+              fadeClassName ?? ""
+            }`}
+          ></div>
+        )}
+        <div ref={innerRef}>{children}</div>
+      </div>
+      {showControls && (
+        <div
+          onClick={() => setExpanded(!expanded)}
+          onKeyDown={(e) => e.key === "Enter" && setExpanded(!expanded)}
+          tabIndex={0}
+          className="mt-16 cursor-pointer font-bold text-gui-blue-default-light hover:text-gui-blue-hover-light active:text-gui-blue-active-light focus:text-gui-blue-focus"
+        >
+          {expanded ? "View less -" : "View all +"}
+        </div>
+      )}
+    </>
+  );
+};
+
+export default Expander;

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;