@ably/ui 14.0.4 → 14.0.6

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

@@ -1,12 +0,0 @@
-import CookieMessage from "../CookieMessage";
-
-export default {
-  title: "Components/Cookie Message",
-  component: CookieMessage,
-  args: {
-    cookieId: "cookie-namespace",
-    noticeId: "cookie-message",
-  },
-};
-
-export const Default = {};

package/src/core/CookieMessage/component.css

@@ -1,15 +0,0 @@
-@layer components {
-  .ui-cookie-message {
-    @apply rounded-lg bg-white font-sans;
-    @apply justify-between items-center;
-    @apply opacity-100 z-50 bottom-0 fixed sm:flex;
-    @apply p-16 mb-16 ml-16;
-    max-width: 70vw;
-    box-shadow: 0px 24px 32px 0px #0000000d;
-    border: 1px solid var(--color-mid-grey);
-    border-left: 0.5rem solid var(--color-electric-cyan);
-    transition:
-      bottom 250ms ease-out,
-      opacity 150ms ease-out;
-  }
-}

package/src/core/CookieMessage.tsx

@@ -1,52 +0,0 @@
-import React, { useRef, useEffect, useState } from "react";
-import Cookie from "js-cookie";
-
-import _absUrl from "./url-base";
-
-const COOKIE_EXPIRY = 365;
-
-type CookieMessageProps = {
-  cookieId: string;
-  urlBase: string;
-};
-
-const CookieMessage = ({ cookieId, urlBase }: CookieMessageProps) => {
-  const ref = useRef<HTMLDivElement>(null);
-  const [hideCookieMessage, setHideCookieMessage] = useState(true);
-
-  useEffect(() => {
-    const isCookieSet = Cookie.get(cookieId) ? true : false;
-    setHideCookieMessage(isCookieSet);
-  }, []);
-
-  const handleClose = () => {
-    Cookie.set(cookieId, "1", { expires: COOKIE_EXPIRY });
-
-    ref.current?.classList.add("bottom-1", "opacity-0");
-    setTimeout(() => setHideCookieMessage(true), 500);
-  };
-
-  const absUrl = (path) => _absUrl(path, urlBase);
-
-  // Presume the message is hidden by default
-  if (hideCookieMessage) return null;
-
-  return (
-    <div className="ui-cookie-message" ref={ref}>
-      <p className="ui-text-p2 pr-32">
-        <a href={absUrl("/privacy")} className="underline">
-          How we use cookies
-        </a>{" "}
-        to improve your experience.
-      </p>
-      <button
-        className="ui-btn-secondary mt-12 sm:mt-0 whitespace-nowrap"
-        onClick={handleClose}
-      >
-        Accept and close
-      </button>
-    </div>
-  );
-};
-
-export default CookieMessage;

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

@@ -1,43 +0,0 @@
-import CustomerLogos from "../CustomerLogos";
-
-import hubspot from "../images/cust-logo-hubspot-mono-pos.svg";
-import webflow from "../images/cust-logo-webflow-col-pos.svg";
-import mentimeter from "../images/cust-logo-mentimeter-mono-pos.svg";
-import toyota from "../images/cust-logo-toyota-mono-pos.svg";
-import split from "../images/cust-logo-split-mono-pos.svg";
-import australian from "../images/cust-logo-ausopen-mono-pos.svg";
-
-export default {
-  title: "Components/Customer Logos",
-  component: CustomerLogos,
-  args: {
-    companies: [
-      {
-        label: "Hubspot",
-        logo: hubspot,
-      },
-      {
-        label: "Webflow",
-        logo: webflow,
-      },
-      {
-        label: "Mentimeter",
-        logo: mentimeter,
-      },
-      {
-        label: "Toyota",
-        logo: toyota,
-      },
-      {
-        label: "Split",
-        logo: split,
-      },
-      {
-        label: "Australian Open",
-        logo: australian,
-      },
-    ],
-  },
-};
-
-export const Default = {};

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: "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: "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: "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;