@ably/ui 13.3.0 → 14.0.0-dev.0ed6be7

package/src/core/{MeganavItemsSignedIn/component.jsx → MeganavItemsSignedIn.tsx}

@@ -1,27 +1,56 @@
 import React from "react";
-import T from "prop-types";
 
-import MeganavControl from "../MeganavControl/component.jsx";
-import SignOutLink from "../SignOutLink/component.jsx";
-import MeganavSearch from "../MeganavSearch/component.jsx";
+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";
+
+type MeganavItemsSignedIn = {
+  sessionState: MeganavSessionState;
+  theme: MeganavTheme;
+  absUrl: AbsUrl;
+};
 
 const truncate = (string, length) => {
-  return string?.length && string.length > length ? `${string.slice(0, length - 1)}…` : string;
+  return string?.length && string.length > length
+    ? `${string.slice(0, length - 1)}…`
+    : string;
 };
 
-const MeganavItemsSignedIn = ({ sessionState, theme, absUrl }) => {
-  const links = sessionState.account ? Object.keys(sessionState.account.links).map((key) => sessionState.account.links[key]) : [];
+const MeganavItemsSignedIn = ({
+  sessionState,
+  theme,
+  absUrl,
+}: MeganavItemsSignedIn) => {
+  const links = sessionState.account
+    ? Object.keys(sessionState.account.links).map(
+        (key) => sessionState.account.links[key]
+      )
+    : [];
   const accountName = truncate(sessionState.accountName, 20);
   const preferredEmail = truncate(sessionState.preferredEmail, 20);
 
   return (
     <ul className="hidden md:flex items-center">
       <li className="ui-meganav-item relative">
-        <MeganavControl ariaControls="account-panel" ariaLabel="Account" theme={theme} additionalCSS="mr-0">
+        <MeganavControl
+          ariaControls="account-panel"
+          ariaLabel="Account"
+          theme={theme}
+          additionalCSS="mr-0"
+        >
           {accountName}
         </MeganavControl>
 
-        <div className="ui-meganav-panel-account invisible" id="account-panel" data-id="meganav-panel">
+        <div
+          className="ui-meganav-panel-account invisible"
+          id="account-panel"
+          data-id="meganav-panel"
+        >
           {/* Users exist without accounts in which case there is no links here */}
           {sessionState.account && (
             <>
@@ -29,7 +58,10 @@ const MeganavItemsSignedIn = ({ sessionState, theme, absUrl }) => {
               <ul className="mb-16 mx-16">
                 {links.map((item) => (
                   <li key={item.href}>
-                    <a className="ui-meganav-account-link" href={absUrl(item.href)}>
+                    <a
+                      className="ui-meganav-account-link"
+                      href={absUrl(item.href)}
+                    >
                       {item.text}
                     </a>
                   </li>
@@ -41,13 +73,19 @@ const MeganavItemsSignedIn = ({ sessionState, theme, absUrl }) => {
           <p className="ui-meganav-overline mx-16">{preferredEmail}</p>
           <ul className="mb-8 mx-16">
             <li>
-              <a href={absUrl(sessionState.mySettings.href)} className="ui-meganav-account-link">
+              <a
+                href={absUrl(sessionState.mySettings.href)}
+                className="ui-meganav-account-link"
+              >
                 {sessionState.mySettings.text}
               </a>
             </li>
             {sessionState.myAccessTokens && (
               <li>
-                <a href={absUrl(sessionState.myAccessTokens.href)} className="ui-meganav-account-link">
+                <a
+                  href={absUrl(sessionState.myAccessTokens.href)}
+                  className="ui-meganav-account-link"
+                >
                   {sessionState.myAccessTokens.text}
                   <span className="ui-version-tag">preview</span>
                 </a>
@@ -61,7 +99,11 @@ const MeganavItemsSignedIn = ({ sessionState, theme, absUrl }) => {
             <div className="mb-16 px-16">
               <SignOutLink absUrl={absUrl} {...sessionState.logOut}>
                 {({ text, href, onClick }) => (
-                  <a onClick={onClick} href={absUrl(href)} className="ui-meganav-account-link">
+                  <a
+                    onClick={onClick}
+                    href={absUrl(href)}
+                    className="ui-meganav-account-link"
+                  >
                     {text}
                   </a>
                 )}
@@ -77,7 +119,10 @@ const MeganavItemsSignedIn = ({ sessionState, theme, absUrl }) => {
 
       {sessionState.account && (
         <li>
-          <a href={absUrl(sessionState.account.links.dashboard.href)} className="ui-btn-secondary p-btn-small">
+          <a
+            href={absUrl(sessionState.account.links.dashboard.href)}
+            className="ui-btn-secondary p-btn-small"
+          >
             Dashboard
           </a>
         </li>
@@ -86,13 +131,4 @@ const MeganavItemsSignedIn = ({ sessionState, theme, absUrl }) => {
   );
 };
 
-MeganavItemsSignedIn.propTypes = {
-  sessionState: T.object,
-  paths: T.shape({
-    iconSprites: T.string,
-  }),
-  theme: T.object,
-  absUrl: T.func,
-};
-
 export default MeganavItemsSignedIn;

package/src/core/MeganavSearch.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+
+import Icon from "../Icon/component.tsx";
+import MeganavSearchPanel from "../MeganavSearchPanel/component.tsx";
+import { AbsUrl } from "../Meganav/component.tsx";
+
+const MeganavSearch = ({ absUrl }: { absUrl: AbsUrl }) => (
+  <>
+    <button
+      type="button"
+      data-id="meganav-control"
+      data-control="search"
+      className="h-64 w-24 px-24 pr-48 py-20 group focus:outline-none"
+      aria-expanded="false"
+      aria-controls="panel-search"
+      aria-label={`Show Search Panel`}
+    >
+      <Icon
+        name="icon-gui-search"
+        color="text-cool-black"
+        size="1.5rem"
+        additionalCSS="group-hover:text-gui-hover group-focus:text-gui-focus"
+      />
+    </button>
+
+    <div
+      className="ui-meganav-panel invisible"
+      id="panel-search"
+      data-id="meganav-panel"
+    >
+      <MeganavSearchPanel absUrl={absUrl} />
+    </div>
+  </>
+);
+
+export default MeganavSearch;

package/src/core/MeganavSearchAutocomplete.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+
+const MeganavSearchAutocomplete = () => (
+  <div
+    className="absolute w-full mt-8 z-10 hidden shadow-container rounded-lg bg-white border border-mid-grey"
+    data-id="meganav-search-autocomplete-container"
+  >
+    <ol className="m-16" data-id="meganav-search-autocomplete-list"></ol>
+  </div>
+);
+
+export default MeganavSearchAutocomplete;

package/src/core/MeganavSearchPanel.tsx

@@ -0,0 +1,52 @@
+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";
+
+const MeganavSearchPanel = ({ absUrl }: { absUrl: AbsUrl }) => (
+  <section className="ui-meganav-content grid-cols-12">
+    <div className="col-span-8">
+      <div className="mb-32">
+        <form
+          className="flex items-start"
+          action={absUrl("/search")}
+          method="get"
+        >
+          <div className="relative w-full">
+            <Icon
+              name="icon-gui-search"
+              color="text-cool-black"
+              size="1.5rem"
+              additionalCSS="absolute top-12 left-16"
+            />
+            <input
+              type="search"
+              name="q"
+              className="ui-input pl-48 h-48"
+              placeholder="Search"
+              autoComplete="off"
+              data-id="meganav-search-input"
+            />
+
+            <MeganavSearchAutocomplete />
+          </div>
+
+          <button
+            type="submit"
+            className="ui-btn-secondary flex-shrink-0 ml-8 sm:ml-16 md:ml-24 xl:ml-32"
+          >
+            Search
+          </button>
+        </form>
+      </div>
+    </div>
+
+    <div className="col-span-12">
+      <MeganavSearchSuggestions displaySupportLink={true} absUrl={absUrl} />
+    </div>
+  </section>
+);
+
+export default MeganavSearchPanel;

package/src/core/MeganavSearchSuggestions.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+
+import FeaturedLink from "../FeaturedLink/component.tsx";
+import { AbsUrl } from "../Meganav/component.tsx";
+
+type MeganavSearchSuggestionsProps = {
+  absUrl: AbsUrl;
+  displaySupportLink: boolean;
+};
+
+const MeganavSearchSuggestions = ({
+  absUrl,
+  displaySupportLink,
+}: MeganavSearchSuggestionsProps) => (
+  <>
+    <p className="ui-text-overline2 text-cool-black py-12">Popular pages</p>
+
+    <div className="flex justify-between items-center overflow-hidden">
+      <ul className="flex transition-transform">
+        <li className="py-12 pr-8 flex-shrink-0">
+          <a
+            href={absUrl("/docs/how-ably-works")}
+            className="ui-text-p2 hover:text-gui-hover active:text-gui-active focus:text-gui-focus"
+          >
+            How does Ably work?
+          </a>
+        </li>
+        <li className="py-12 px-8 flex-shrink-0">
+          <a
+            href={absUrl("/docs/quick-start-guide")}
+            className="ui-text-p2 hover:text-gui-hover active:text-gui-active focus:text-gui-focus"
+          >
+            Quickstart guide
+          </a>
+        </li>
+        <li className="py-12 px-8 flex-shrink-0">
+          <a
+            href={absUrl("/docs/core-features/pubsub")}
+            className="ui-text-p2 hover:text-gui-hover active:text-gui-active focus:text-gui-focus"
+          >
+            Publish/Subscribe Messaging
+          </a>
+        </li>
+        <li className="py-12 pl-8 flex-shrink-0">
+          <a
+            href={absUrl("/platform")}
+            className="ui-text-p2 hover:text-gui-hover active:text-gui-active focus:text-gui-focus"
+          >
+            Platform
+          </a>
+        </li>
+      </ul>
+      {displaySupportLink ? (
+        <FeaturedLink url={absUrl("/support")} textSize="text-p2">
+          Support
+        </FeaturedLink>
+      ) : null}
+    </div>
+  </>
+);
+
+export default MeganavSearchSuggestions;

package/src/core/Notice/component.css

@@ -1,7 +1,5 @@
-@layer components {
-  .ui-announcement {
-    @apply font-sans;
-    max-height: 37.5rem;
-    transition: max-height 300ms;
-  }
+.ui-announcement {
+  @apply font-sans;
+  max-height: 37.5rem;
+  transition: max-height 300ms;
 }

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.jsx";
+import { FLASH_DATA_ID } from "../Flash/component.tsx";
 
 const COOKIE_EXPIRY = 90;
 const COLLAPSE_TRIGGER_DISTANCE = 5;

package/src/core/Notice.tsx

@@ -0,0 +1,104 @@
+import React, { ReactNode, useEffect } from "react";
+
+import NoticeScripts from "./component.js";
+import "./component.css";
+import Icon from "../Icon/component.tsx";
+
+type ContentWrapperProps = {
+  buttonLink: string;
+  children: ReactNode;
+};
+
+// TODO(jamiehenson):
+// This type is a bit messed up currently due to the NoticeScripts import being interpreted as NoticeProps.
+// Plan is to TS-ify the JS assets too, so this can be rectified then. The NoticeScripts-oriented props are
+// the ones after the line break.
+type NoticeProps = {
+  buttonLink?: string;
+  buttonLabel?: string;
+  bodyText?: string;
+  title?: string;
+  closeBtn?: boolean;
+  config?: {
+    collapse: boolean;
+    noticeId: string;
+    cookieId: string;
+  };
+  bgColor?: string;
+  textColor?: string;
+
+  bannerContainer?: Element | null;
+  cookieId?: string;
+  noticeId?: string;
+  options?: { collapse: boolean };
+};
+
+const contentWrapperClasses = "w-full pr-8 ui-text-p3 self-center";
+
+const ContentWrapper = ({ buttonLink, children }: ContentWrapperProps) =>
+  buttonLink ? (
+    <a href={buttonLink} className={contentWrapperClasses}>
+      {children}
+    </a>
+  ) : (
+    <div className={contentWrapperClasses}>{children}</div>
+  );
+
+const Notice = ({
+  buttonLink,
+  buttonLabel,
+  bodyText,
+  title,
+  config,
+  closeBtn,
+  bgColor = "bg-gradient-active-orange",
+  textColor = "text-white",
+}: NoticeProps) => {
+  useEffect(() => {
+    NoticeScripts({
+      bannerContainer: document.querySelector('[data-id="ui-notice"]'),
+      cookieId: config?.cookieId,
+      noticeId: config?.noticeId,
+      options: {
+        collapse: config?.collapse || false,
+      },
+    });
+  }, []);
+
+  const wrapperClasses = ["ui-announcement", bgColor, textColor].join(" ");
+
+  return (
+    <div
+      className={wrapperClasses}
+      data-id="ui-notice"
+      style={{ maxHeight: 0, overflow: "hidden" }}
+    >
+      <div className="ui-grid-px py-16 max-w-screen-xl mx-auto flex items-start">
+        <ContentWrapper buttonLink={buttonLink ?? "#"}>
+          <strong className="font-bold whitespace-nowrap pr-4">{title}</strong>
+          <span className="pr-4">{bodyText}</span>
+          {buttonLabel && (
+            <span className="underline cursor-pointer whitespace-nowrap">
+              {buttonLabel}
+            </span>
+          )}
+        </ContentWrapper>
+
+        {closeBtn && (
+          <button
+            type="button"
+            className="ml-auto h-20 w-20 border-none bg-none self-baseline"
+          >
+            <Icon
+              name="icon-gui-close"
+              size="1.25rem"
+              color="text-cool-black"
+            />
+          </button>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Notice;

package/src/core/SignOutLink.tsx

@@ -0,0 +1,51 @@
+import React, { MouseEventHandler, ReactNode, useRef } from "react";
+import { AbsUrl } from "../Meganav/component.tsx";
+
+type SignOutLinkProps = {
+  token: string;
+  href: string;
+  text: string;
+  children: ({
+    href,
+    text,
+    onClick,
+  }: {
+    href: string;
+    text: string;
+    onClick: MouseEventHandler<HTMLAnchorElement>;
+  }) => ReactNode;
+  absUrl: AbsUrl;
+};
+
+const SignOutLink = ({
+  token,
+  href,
+  text,
+  children,
+  absUrl,
+}: SignOutLinkProps) => {
+  const formRef = useRef<HTMLFormElement>(null);
+
+  const onClick = (e) => {
+    formRef.current?.submit();
+    e.preventDefault();
+  };
+
+  return (
+    <>
+      <form
+        ref={formRef}
+        method="post"
+        action={absUrl(href)}
+        className="hidden"
+      >
+        <input name="_method" value="delete" type="hidden" />
+        <input name="authenticity_token" value={token} type="hidden" />
+      </form>
+
+      {children({ href, text, onClick })}
+    </>
+  );
+};
+
+export default SignOutLink;

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

@@ -0,0 +1,45 @@
+import React, { ReactNode } from "react";
+import Slider from "./component.tsx";
+
+export default {
+  title: "Components/Slider",
+  component: Slider,
+  parameters: {
+    layout: "fullscreen",
+  },
+  tags: ["autodocs"],
+};
+
+const Slide = ({ children }: { children: ReactNode }) => (
+  <div className="h-full p-24 bg-white rounded">
+    <p className="ui-text-p2 text-center">{children}</p>
+  </div>
+);
+
+const slides = [
+  <Slide key="1">
+    Powers live chat, updates, analytics, and composition for millions of users.
+  </Slide>,
+  <Slide key="2">
+    Powers virtual venues for millions of event attendees around the world.
+  </Slide>,
+  <Slide key="3">
+    Provides 5 million daily users with live financial commentary and stock
+    tickers.
+  </Slide>,
+  <Slide key="4">Monitors live car performance data across the USA.</Slide>,
+];
+
+export const SliderOnAllBreakpoints = {
+  args: {
+    slides,
+  },
+};
+
+export const SliderOnSmallBreakpointOnly = {
+  args: {
+    slides,
+    classes: `sm:grid-cols-${slides.length / 2} md:grid-cols-${slides.length}`,
+    mqEnableThreshold: () => !window.matchMedia("(min-width: 48rem)").matches,
+  },
+};

package/src/core/Slider/component.css

@@ -1,8 +1,6 @@
-@layer components {
-  .ui-slider-marker {
-    font-size: 0.5rem;
-    top: -1px;
+.ui-slider-marker {
+  font-size: 0.5rem;
+  top: -1px;
 
-    @apply leading-none px-4 relative;
-  }
+  @apply leading-none px-4 relative;
 }

package/src/core/Slider.tsx

@@ -0,0 +1,112 @@
+import React, { CSSProperties, ReactNode, useEffect, useRef } from "react";
+
+import Icon from "../Icon/component.tsx";
+import SliderScripts from "./component.js";
+import "./component.css";
+
+type SliderProps = {
+  slides?: ReactNode[];
+  classes?: string;
+  slideClasses?: string;
+  slideMinWidth?: string;
+  slideMaxWidth?: string;
+  mqEnableThreshold?: () => boolean;
+
+  container?: HTMLDivElement | null;
+};
+
+const Slider = ({
+  slides = [],
+  classes = "",
+  slideClasses = "",
+  slideMinWidth = "16.875rem",
+  slideMaxWidth = "1fr",
+  mqEnableThreshold = () => true,
+  ...props
+}: SliderProps) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    SliderScripts({
+      container: containerRef.current,
+      mqEnableThreshold,
+    });
+  }, []);
+
+  if (slides.length === 0) return;
+
+  return (
+    <div
+      className="w-full overflow-x-hidden"
+      data-id="slider"
+      style={
+        {
+          "--dynamic-grid-columns-count": slides.length,
+          "--dynamic-grid-column-min-width": slideMinWidth,
+          "--dynamic-grid-column-max-width": slideMaxWidth,
+        } as CSSProperties
+      }
+      ref={containerRef}
+    >
+      <ol
+        className={`grid ui-grid-gap grid-cols-dynamic transform transition-transform ${classes}`}
+        data-id="slider-strip"
+        {...props}
+      >
+        {slides.map((slide, i) => (
+          <li key={i} className={slideClasses} data-id="slider-slide">
+            {slide}
+          </li>
+        ))}
+      </ol>
+
+      <div
+        className="justify-center items-center my-24 hidden"
+        data-id="slider-controls"
+      >
+        <button
+          type="button"
+          className="p-0 w-24 h-24 flex items-center focus:outline-gui-focus"
+          data-id="slider-previous"
+        >
+          <Icon
+            name="icon-gui-disclosure-arrow"
+            size="1.5rem"
+            color="text-cool-black"
+            additionalCSS="transform rotate-180"
+            data-id="meganav-control-mobile-dropdown-menu"
+          />
+        </button>
+
+        <ul className="flex justify-center items-center mx-32 relative h-24">
+          {slides.map((_, i) => (
+            <li key={i}>
+              <span
+                className="ui-slider-marker text-cool-black"
+                data-id="slider-marker"
+              >
+                &#x2b24;
+              </span>{" "}
+              {/* ⬤ */}
+            </li>
+          ))}
+        </ul>
+
+        <button
+          type="button"
+          className="p-0 w-24 h-24 flex items-center focus:outline-gui-focus"
+          data-id="slider-next"
+        >
+          <Icon
+            name="icon-gui-disclosure-arrow"
+            size="1.5rem"
+            color="text-cool-black"
+            data-id="meganav-control-mobile-dropdown-menu"
+          />
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default Slider;

package/src/core/Table/Table.stories.tsx

@@ -0,0 +1,12 @@
+import { PricingPageTable } from "./data";
+
+export default {
+  title: "Components/Table",
+  component: PricingPageTable,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+export const PricingPage = {};