@ably/ui 14.1.0-dev.76621d8 → 14.1.0-dev.f3a3c90

package/src/core/CustomerLogos.tsx

@@ -1,35 +0,0 @@
-import React from "react";
-
-type CompanyEntity = {
-  label: string;
-  logo: string;
-};
-
-type CustomerLogosProps = {
-  companies: CompanyEntity[];
-  additionalCss?: string;
-};
-
-const CustomerLogos = ({
-  companies,
-  additionalCss = "",
-}: CustomerLogosProps) => {
-  return (
-    <section className="w-full bg-white">
-      <ul
-        className={`py-64 flex flex-row flex-wrap md:flex-nowrap content-between m-auto items-center ${additionalCss}`}
-      >
-        {companies.map((company) => (
-          <li
-            key={company.label}
-            className="flex-auto text-center sm:w-1/3 w-1/2"
-          >
-            <img alt={company.label} src={company.logo} className="mx-auto" />
-          </li>
-        ))}
-      </ul>
-    </section>
-  );
-};
-
-export default CustomerLogos;

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

@@ -1,48 +0,0 @@
-import React from "react";
-import Icon from "../Icon";
-import DropdownMenu from "../DropdownMenu";
-
-export default {
-  title: "JS Components/Dropdown Menu",
-  component: DropdownMenu,
-};
-
-export const Default = {
-  render: () => (
-    <DropdownMenu>
-      <DropdownMenu.Trigger additionalTriggerCSS="ui-text-h3">
-        Dropdown Menu Trigger
-      </DropdownMenu.Trigger>
-      <DropdownMenu.Content anchorPosition="left">
-        <DropdownMenu.Link
-          url="https://ably.com/"
-          title="Using DropdownMenuLink Component"
-          subtitle="This is using the inbuilt component which takes props for title, subtitle, icon name & children."
-          iconName="icon-gui-link-arrow"
-        >
-          <p className="ui-text-p3">I am a child! 🐣</p>
-        </DropdownMenu.Link>
-        <DropdownMenu.Link
-          url="https://ably.com/"
-          title="Using DropdownMenuLink Component - no icon, subtitle or children"
-        />
-        <a
-          href="https://ably.com/docs"
-          target="_blank"
-          rel="noreferrer"
-          className="group block p-8 hover:bg-light-grey hover:text-cool-black rounded"
-        >
-          <p className="ui-featured-link group-hover:text-gui-hover font-light text-cool-black">
-            Using plain HTML
-            <Icon
-              name="icon-gui-link-arrow"
-              size="1rem"
-              color="text-cool-black"
-              additionalCSS="ui-featured-link-icon group-hover:text-gui-hover group-active:text-gui-active group-focus:text-gui-focus"
-            />
-          </p>
-        </a>
-      </DropdownMenu.Content>
-    </DropdownMenu>
-  ),
-};

package/src/core/DropdownMenu.tsx

@@ -1,140 +0,0 @@
-import React, {
-  createContext,
-  useContext,
-  useState,
-  useEffect,
-  useRef,
-  ReactNode,
-  Dispatch,
-} from "react";
-import Icon from "./Icon";
-
-const DropdownMenuContext = createContext<{
-  isOpen: boolean;
-  setOpen: Dispatch<React.SetStateAction<boolean>>;
-}>({
-  isOpen: false,
-  setOpen: () => {},
-});
-
-type DropdownMenuProps = {
-  children: ReactNode;
-};
-
-type TriggerProps = {
-  children: ReactNode;
-  additionalTriggerCSS?: string;
-};
-
-type ContentProps = {
-  children: ReactNode;
-  anchorPosition?: string;
-  additionalContentCSS?: string;
-};
-
-type LinkProps = {
-  url: string;
-  title: string;
-  subtitle: string;
-  iconName: string;
-  children: ReactNode;
-};
-
-const DropdownMenu = ({ children }: DropdownMenuProps) => {
-  const [isOpen, setOpen] = useState(false);
-  const ref = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const clickHandler = (e) => {
-      if (ref.current?.contains(e.target)) return;
-      setOpen(false);
-    };
-
-    document.addEventListener("click", clickHandler);
-
-    return () => {
-      document.removeEventListener("click", clickHandler);
-    };
-  }, []);
-
-  return (
-    <DropdownMenuContext.Provider value={{ isOpen, setOpen }}>
-      <div id="dropdown-menu" className="relative" ref={ref}>
-        {children}
-      </div>
-    </DropdownMenuContext.Provider>
-  );
-};
-
-const Trigger = ({ children, additionalTriggerCSS = "" }: TriggerProps) => {
-  const { isOpen, setOpen } = useContext(DropdownMenuContext);
-
-  return (
-    <button
-      id="menu-trigger"
-      onClick={() => setOpen(!isOpen)}
-      className={`${additionalTriggerCSS} flex items-center p-8 ml-8 group hover:text-gui-hover hover:bg-light-grey active:text-gui-active focus:text-gui-focus focus:outline-none rounded-lg`}
-    >
-      <span className="leading-normal">{children}</span>
-      <Icon
-        name="icon-gui-disclosure-arrow"
-        color="text-cool-black"
-        size="1.25rem"
-        additionalCSS="transform rotate-90 group-hover:text-gui-hover group-active:text-gui-active group-focus:text-gui-focus"
-      />
-    </button>
-  );
-};
-
-const Content = ({
-  children,
-  anchorPosition = "right",
-  additionalContentCSS,
-}: ContentProps) => {
-  const { isOpen } = useContext(DropdownMenuContext);
-
-  if (!isOpen) {
-    return null;
-  }
-
-  const anchorPositionClasses =
-    anchorPosition === "right" ? "right-0" : "left-0";
-
-  return (
-    <div
-      id="menu-content"
-      className={`${additionalContentCSS} absolute p-8 z-10 border border-mid-grey bg-white rounded shadow-container ${anchorPositionClasses}`}
-      style={{ minWidth: 275, top: 44 }}
-    >
-      {children}
-    </div>
-  );
-};
-
-const Link = ({ url, title, subtitle, iconName, children }: LinkProps) => {
-  return (
-    <a
-      href={url}
-      className="menu-link group block p-8 hover:bg-light-grey hover:text-cool-black rounded"
-    >
-      <p className="mb-4">
-        {title}
-        {iconName ? (
-          <Icon
-            name={iconName}
-            size="1rem"
-            color="text-cool-black"
-            additionalCSS="align-middle ml-8 relative -top-1 -left-4"
-          />
-        ) : null}
-      </p>
-      {subtitle ? <p className="ui-text-p3 mb-16">{subtitle}</p> : null}
-      {children}
-    </a>
-  );
-};
-
-DropdownMenu.Trigger = Trigger;
-DropdownMenu.Content = Content;
-DropdownMenu.Link = Link;
-export default DropdownMenu;

package/src/core/Expander/Expander.stories.tsx

@@ -1,132 +0,0 @@
-import React from "react";
-import Expander from "../Expander";
-
-export default {
-  title: "JS 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

@@ -1,63 +0,0 @@
-import React, { PropsWithChildren, useEffect, useRef, useState } from "react";
-
-type ExpanderProps = {
-  heightThreshold?: number;
-  className?: string;
-  fadeClassName?: string;
-};
-
-const Expander = ({
-  heightThreshold = 200,
-  className,
-  fadeClassName,
-  children,
-}: PropsWithChildren<ExpanderProps>) => {
-  const innerRef = useRef<HTMLDivElement>(null);
-  const [showControls, setShowControls] = useState(false);
-  const [height, setHeight] = useState<number | "auto">(heightThreshold);
-  const [expanded, setExpanded] = useState(false);
-
-  useEffect(() => {
-    const contentHeight = innerRef.current?.clientHeight ?? heightThreshold;
-
-    if (contentHeight < heightThreshold) {
-      setHeight("auto");
-    } else if (expanded) {
-      setHeight(contentHeight);
-    } else {
-      setHeight(heightThreshold);
-    }
-
-    setShowControls(contentHeight >= heightThreshold);
-  }, [heightThreshold, expanded]);
-
-  return (
-    <>
-      <div
-        style={{ 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"
-        >
-          {expanded ? "View less -" : "View all +"}
-        </div>
-      )}
-    </>
-  );
-};
-
-export default Expander;

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

@@ -1,43 +0,0 @@
-import FeaturedLink from "../FeaturedLink";
-
-export default {
-  title: "JS Components/Featured Link",
-  component: FeaturedLink,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-  args: {
-    url: "#",
-    children: "Featured link",
-  },
-};
-
-export const Default = {
-  args: {},
-};
-
-export const Reverse = {
-  args: {
-    reverse: true,
-  },
-};
-
-export const Large = {
-  args: {
-    textSize: "text-p1",
-  },
-};
-
-export const Small = {
-  args: {
-    textSize: "text-p3",
-  },
-};
-
-export const Pink = {
-  args: {
-    iconColor: "text-pink-500",
-    additionalCSS: "text-pink-800",
-  },
-};

package/src/core/FeaturedLink.tsx

@@ -1,93 +0,0 @@
-import React, { CSSProperties, ReactNode } from "react";
-
-import Icon from "./Icon";
-
-type FeaturedLinkProps = {
-  url: string;
-  children: ReactNode;
-  textSize?: string;
-  iconColor?: string;
-  flush?: boolean;
-  reverse?: boolean;
-  additionalCSS?: string;
-  newWindow?: boolean;
-  onClick?: () => void;
-};
-
-type TargetProps = { target?: string; rel?: string };
-
-// When generating links with target=_blank, we only add `noreferrer` to
-// links that don't start with `/`, so we can continue tracking referrers
-// across our own domains
-const buildTargetAndRel = (url, newWindow) => {
-  const props: TargetProps = {};
-
-  if (newWindow) {
-    props.target = "_blank";
-
-    if (url.startsWith("/") && !url.startsWith("//")) {
-      props.rel = "noopener";
-    } else {
-      props.rel = "noopenner noreferrer";
-    }
-  }
-
-  return props;
-};
-
-const FeaturedLink = ({
-  url,
-  textSize = "text-p2",
-  iconColor = "text-cool-black",
-  flush = false,
-  reverse = false,
-  additionalCSS = "",
-  newWindow = false,
-  onClick = undefined,
-  children,
-}: FeaturedLinkProps) => {
-  const targetAndRel = buildTargetAndRel(url, newWindow);
-
-  return (
-    <a
-      href={url}
-      className={`font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ui-${textSize} ${
-        flush ? "" : "py-8"
-      } ${additionalCSS}`}
-      style={
-        {
-          "--featured-link-icon-size": `var(${textSize.replace(
-            "text",
-            "--fs",
-          )})`,
-        } as CSSProperties
-      }
-      {...targetAndRel}
-      onClick={onClick}
-    >
-      {reverse ? (
-        <>
-          <Icon
-            name="icon-gui-link-arrow"
-            size={`calc(var(--featured-link-icon-size) * 1.25)`}
-            color={iconColor}
-            additionalCSS="align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
-          />
-          {children}
-        </>
-      ) : (
-        <>
-          {children}
-          <Icon
-            name="icon-gui-link-arrow"
-            size={`calc(var(--featured-link-icon-size) * 1.25)`}
-            color={iconColor}
-            additionalCSS="align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
-          />
-        </>
-      )}
-    </a>
-  );
-};
-
-export default FeaturedLink;

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

@@ -1,37 +0,0 @@
-import React from "react";
-import Flash, { reducerFlashes } from "../Flash";
-
-import {
-  attachStoreToWindow,
-  createRemoteDataStore,
-} from "../remote-data-store.js";
-import { reducerBlogPosts } from "../remote-blogs-posts.js";
-import { reducerSessionData } from "../remote-session-data.js";
-
-export default {
-  title: "JS Components/Flash",
-  component: Flash,
-  args: {
-    flashes: [
-      ["success", "Congratulations! You've won the Oscar"],
-      ["notice", "This is a notice"],
-      ["error", "This is an error, very bad"],
-      ["alert", "This is an alert"],
-      ["info", "Some useful information, you are welcome"],
-    ],
-  },
-};
-
-export const Default = {
-  render: (args) => {
-    const store = createRemoteDataStore({
-      ...reducerBlogPosts,
-      ...reducerSessionData,
-      ...reducerFlashes,
-    });
-
-    attachStoreToWindow(store);
-
-    return <Flash {...args} />;
-  },
-};

package/src/core/Flash/component.css

@@ -1,28 +0,0 @@
-@layer components {
-  .ui-flash {
-    @apply w-full fixed;
-    top: 5.5rem;
-    z-index: calc(var(--stacking-context-page-meganav) - 10);
-    transition: margin-top 200ms;
-  }
-
-  .ui-flash-message {
-    @apply font-sans font-light antialiased max-w-screen-xl mx-auto mt-8 opacity-0 relative;
-    transition:
-      opacity 200ms,
-      transform 200ms,
-      height 200ms 200ms,
-      margin-top 200ms 200ms;
-    transform: translateY(-200%) rotateX(-90deg);
-  }
-
-  /* dynamic content inside flash, can't add classes */
-  .ui-flash-text a {
-    @apply underline;
-  }
-
-  .ui-flash-message-enter {
-    @apply opacity-100;
-    transform: translateY(0) rotateX(0);
-  }
-}