@ably/ui 14.1.0-dev.30520a8 → 14.1.0-dev.708de27

package/src/core/MeganavControlMobilePanelClose.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+
+import Icon from "./Icon";
+type MeganavControlMobilePanelCloseProps = {
+  ariaControls: string;
+  displayHr?: boolean;
+};
+
+const MeganavControlMobilePanelClose = ({
+  ariaControls,
+  displayHr = true,
+}: MeganavControlMobilePanelCloseProps) => (
+  <div className="mx-24 md:mx-32">
+    <button
+      type="button"
+      className="ui-meganav-mobile-link text-gui-default mb-16"
+      data-id="meganav-control-mobile-panel-close"
+      aria-expanded="false"
+      aria-controls={ariaControls}
+      aria-label="Hide panel"
+    >
+      <Icon
+        name="icon-gui-disclosure-arrow"
+        color="text-cool-black"
+        size="1.5rem"
+        additionalCSS="relative -top-1 transform rotate-180"
+      />
+      Back
+    </button>
+    {displayHr ? <hr className="ui-meganav-hr" /> : null}
+  </div>
+);
+
+export default MeganavControlMobilePanelClose;

package/src/core/MeganavControlMobilePanelOpen/component.js

@@ -0,0 +1,59 @@
+import { queryId, queryIdAll } from "../dom-query";
+import { remsToPixelValue } from "../css";
+
+export default () => {
+  const closeControls = Array.from(
+    queryIdAll("meganav-control-mobile-panel-close"),
+  );
+  const openControls = Array.from(
+    queryIdAll("meganav-control-mobile-panel-open"),
+  );
+  const dropdown = queryId("meganav-mobile-dropdown");
+
+  // Height is defined in rem's so to get the pixel value we need to find the fontSize on root
+  const meganavHeight = remsToPixelValue(
+    getComputedStyle(document.documentElement).getPropertyValue(
+      "--ui-meganav-height",
+    ),
+  );
+
+  const clickHandler = (btn, closeBtn, panel) => () => {
+    btn.setAttribute("aria-expanded", true);
+    closeBtn.setAttribute("aria-expanded", true);
+    panel.classList.replace("hidden", "block");
+
+    // On devices where we don't have enough space for the panel, set it's height to
+    // the height of the viewport (minus the meganav height) - this will trigger a scroll.
+    // Otherwise just set it to the panel height. This handles the case where the ratio of vertical
+    // space to horizontal is especially high (think tablets, but not only).
+    panel.style.height = `${
+      window.innerHeight - meganavHeight > panel.offsetHeight
+        ? panel.offsetHeight
+        : window.innerHeight - meganavHeight
+    }px`;
+  };
+
+  return openControls.map((btn) => {
+    const closeBtn = closeControls.find(
+      (node) =>
+        node.getAttribute("aria-controls") ===
+        btn.getAttribute("aria-controls"),
+    );
+    const panel = document.querySelector(
+      `#${btn.getAttribute("aria-controls")}`,
+    );
+    const handler = clickHandler(btn, closeBtn, panel);
+
+    btn.addEventListener("click", handler);
+
+    return {
+      teardown: () => btn.removeEventListener("click", handler),
+      clear: () => {
+        panel.classList.replace("block", "hidden");
+        dropdown.classList.remove("ui-meganav-mobile-dropdown-expand");
+        btn.setAttribute("aria-expanded", false);
+        panel.style.height = null;
+      },
+    };
+  });
+};

package/src/core/MeganavControlMobilePanelOpen.tsx

@@ -0,0 +1,31 @@
+import React, { ReactNode } from "react";
+
+import Icon from "./Icon";
+type MeganavControlMobilePanelOpenProps = {
+  ariaControls: string;
+  children: ReactNode;
+};
+
+const MeganavControlMobilePanelOpen = ({
+  ariaControls,
+  children,
+}: MeganavControlMobilePanelOpenProps) => (
+  <button
+    type="button"
+    className="ui-meganav-mobile-link"
+    data-id="meganav-control-mobile-panel-open"
+    aria-expanded="false"
+    aria-controls={ariaControls}
+    aria-label={`Show ${children}`}
+  >
+    {children}
+    <Icon
+      name="icon-gui-disclosure-arrow"
+      color="text-cool-black"
+      size="1.5rem"
+      additionalCSS="relative -top-1 ml-auto float-right"
+    />
+  </button>
+);
+
+export default MeganavControlMobilePanelOpen;

package/src/core/MeganavItemsDesktop.tsx

@@ -0,0 +1,68 @@
+import React from "react";
+
+import MeganavData from "./Meganav/component.json";
+import MeganavControl from "./MeganavControl";
+import { AbsUrl, MeganavPanels, MeganavTheme } from "./Meganav";
+
+type MeganavDesktopItems = {
+  panels: MeganavPanels;
+  paths?: {
+    logo: string;
+    iconSprites: string;
+    ablyStack: string;
+    blogThumb1: string;
+    blogThumb2: string;
+    blogThumb3: string;
+  };
+  theme: MeganavTheme;
+  absUrl: AbsUrl;
+};
+
+const MeganavDesktopItems = ({
+  panels,
+  paths,
+  theme,
+  absUrl,
+}: MeganavDesktopItems) => (
+  <ul className="hidden md:flex" data-id="meganav-items-desktop">
+    {MeganavData.panels.map((panel) => {
+      const PanelComponent = panels[panel.component];
+      const bgCSS = ["products-panel", "use-cases-panel"].includes(panel.id)
+        ? "ui-meganav-panel-split-bg"
+        : "";
+
+      return (
+        <li className="ui-meganav-item" key={panel.id}>
+          <MeganavControl
+            theme={theme}
+            ariaControls={panel.id}
+            ariaLabel={panel.label}
+          >
+            <span className="hidden lg:inline">{panel.label}</span>
+            <span className="lg:hidden">{panel.shortLabel}</span>
+          </MeganavControl>
+
+          <div
+            className={`ui-meganav-panel invisible ${bgCSS}`}
+            id={panel.id}
+            data-id="meganav-panel"
+          >
+            <PanelComponent paths={paths} absUrl={absUrl} />
+          </div>
+        </li>
+      );
+    })}
+
+    <li className="ui-meganav-item">
+      <a
+        href={absUrl("/pricing")}
+        data-id="meganav-link"
+        className={`ui-meganav-link h-64 items-center flex ${theme.textColor}`}
+      >
+        Pricing
+      </a>
+    </li>
+  </ul>
+);
+
+export default React.memo(MeganavDesktopItems);

package/src/core/MeganavItemsMobile.tsx

@@ -0,0 +1,197 @@
+import React from "react";
+
+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";
+
+type MeganavItemsMobileProps = {
+  panels: MeganavPanels;
+  paths?: {
+    iconSprites: string;
+  };
+  sessionState?: MeganavSessionState;
+  theme: MeganavTheme;
+  loginLink: string;
+  absUrl: AbsUrl;
+};
+
+const MeganavItemsMobile = ({
+  panels,
+  paths,
+  sessionState,
+  theme,
+  loginLink,
+  absUrl,
+}: MeganavItemsMobileProps) => {
+  const classNames = `ui-meganav-link ${theme.textColor}`;
+
+  return (
+    <ul className="flex md:hidden items-center" data-id="meganav-items-mobile">
+      <li>
+        {sessionState?.signedIn && sessionState?.logOut ? (
+          <SignOutLink absUrl={absUrl} {...sessionState.logOut}>
+            {({ text, href, onClick }) => (
+              <a
+                onClick={onClick}
+                href={absUrl(href)}
+                className={classNames}
+                data-id="meganav-link"
+              >
+                {text}
+              </a>
+            )}
+          </SignOutLink>
+        ) : (
+          <a
+            href={absUrl(loginLink)}
+            className={classNames}
+            data-id="meganav-link"
+          >
+            Login
+          </a>
+        )}
+      </li>
+
+      <li className="ui-meganav-item">
+        <MeganavControlMobileDropdown theme={theme} />
+
+        <div
+          className="ui-meganav-mobile-dropdown invisible"
+          id="meganav-mobile-dropdown"
+          data-id="meganav-mobile-dropdown"
+        >
+          <div className="pt-24 pb-16 ui-grid-px bg-white">
+            <form className="mb-16" 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 hover:text-gui-hover"
+                />
+                <button
+                  type="button"
+                  className="absolute top-12 right-16 p-0 focus:outline-gui-focus m-0 md:hidden invisible"
+                  data-id="meganav-search-input-clear"
+                >
+                  <Icon
+                    name="icon-gui-cross-circled-fill"
+                    color="text-dark-grey"
+                    size="1.5rem"
+                    additionalCSS=""
+                  />
+                </button>
+                <input
+                  type="search"
+                  name="q"
+                  className="ui-input px-48 h-48"
+                  style={{ maxWidth: "none" }}
+                  placeholder="Search"
+                  autoComplete="off"
+                  data-id="meganav-mobile-search-input"
+                />
+
+                <MeganavSearchAutocomplete />
+              </div>
+            </form>
+
+            <div
+              className="max-h-0 overflow-hidden transition-all"
+              data-id="meganav-mobile-search-suggestions"
+            >
+              <MeganavSearchSuggestions
+                absUrl={absUrl}
+                displaySupportLink={false}
+              />
+            </div>
+
+            <ul className="mb-16" data-id="meganav-mobile-panel-controls">
+              {MeganavData.panels.map((panel) => {
+                const PanelComponent = panels[panel.component];
+                const displayHr = [
+                  "company-panel",
+                  "developers-panel",
+                ].includes(panel.id);
+
+                return (
+                  <li
+                    className="ui-meganav-mobile-item"
+                    key={`${panel.id}-mobile`}
+                  >
+                    <MeganavControlMobilePanelOpen
+                      ariaControls={`${panel.id}-mobile`}
+                    >
+                      {panel.label}
+                    </MeganavControlMobilePanelOpen>
+
+                    <div
+                      className="ui-meganav-panel-mobile hidden"
+                      id={`${panel.id}-mobile`}
+                      data-scroll-lock-scrollable
+                    >
+                      <MeganavControlMobilePanelClose
+                        ariaControls={`${panel.id}-mobile`}
+                        displayHr={displayHr}
+                      />
+                      <PanelComponent paths={paths} absUrl={absUrl} />
+                    </div>
+                  </li>
+                );
+              })}
+              <li>
+                <a href={absUrl("/pricing")} className="ui-meganav-mobile-link">
+                  Pricing
+                </a>
+              </li>
+            </ul>
+
+            <hr className="ui-meganav-hr mb-20" />
+
+            <div className="flex justify-between items-center mb-16">
+              <a
+                href={absUrl("/contact")}
+                className="text-menu2 font-medium block ml-0 mr-8 lg:mx-12 p-0 hover:text-gui-hover focus:text-gui-focus focus:outline-none"
+              >
+                Contact us
+              </a>
+              {sessionState?.signedIn && sessionState?.account ? (
+                <a
+                  href={absUrl(sessionState.account.links.dashboard.href)}
+                  className="ui-btn-secondary"
+                >
+                  Dashboard
+                </a>
+              ) : (
+                <a href={absUrl("/sign-up")} className="ui-btn">
+                  Sign up free
+                </a>
+              )}
+            </div>
+          </div>
+        </div>
+      </li>
+    </ul>
+  );
+};
+
+export default React.memo(MeganavItemsMobile, (oldState, newState) => {
+  const { paths: pathsOld, theme: themeOld } = oldState;
+  const { paths: pathsNew, theme: themeNew } = newState;
+
+  return (
+    pathsOld === pathsNew &&
+    themeOld === themeNew &&
+    Object.keys(newState.sessionState || {}).length === 0
+  );
+});

package/src/core/MeganavItemsSignedIn.tsx

@@ -0,0 +1,130 @@
+import React from "react";
+
+import MeganavControl from "./MeganavControl";
+import SignOutLink from "./SignOutLink";
+import MeganavSearch from "./MeganavSearch";
+import { AbsUrl, MeganavSessionState, MeganavTheme } from "./Meganav";
+
+type MeganavItemsSignedIn = {
+  sessionState: MeganavSessionState;
+  theme: MeganavTheme;
+  absUrl: AbsUrl;
+};
+
+const truncate = (string, length) => {
+  return string?.length && string.length > length
+    ? `${string.slice(0, length - 1)}…`
+    : string;
+};
+
+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"
+        >
+          {accountName}
+        </MeganavControl>
+
+        <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 && (
+            <>
+              <p className="ui-meganav-overline mt-16 mx-16">Your account</p>
+              <ul className="mb-16 mx-16">
+                {links.map((item) => (
+                  <li key={item.href}>
+                    <a
+                      className="ui-meganav-account-link"
+                      href={absUrl(item.href)}
+                    >
+                      {item.text}
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            </>
+          )}
+
+          <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"
+              >
+                {sessionState.mySettings.text}
+              </a>
+            </li>
+            {sessionState.myAccessTokens && (
+              <li>
+                <a
+                  href={absUrl(sessionState.myAccessTokens.href)}
+                  className="ui-meganav-account-link"
+                >
+                  {sessionState.myAccessTokens.text}
+                  <span className="ui-version-tag">preview</span>
+                </a>
+              </li>
+            )}
+          </ul>
+
+          <hr className="ui-meganav-hr mb-16" />
+
+          {sessionState.logOut && (
+            <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"
+                  >
+                    {text}
+                  </a>
+                )}
+              </SignOutLink>
+            </div>
+          )}
+        </div>
+      </li>
+
+      <li>
+        <MeganavSearch absUrl={absUrl} />
+      </li>
+
+      {sessionState.account && (
+        <li>
+          <a
+            href={absUrl(sessionState.account.links.dashboard.href)}
+            className="ui-btn-secondary p-btn-small"
+          >
+            Dashboard
+          </a>
+        </li>
+      )}
+    </ul>
+  );
+};
+
+export default MeganavItemsSignedIn;

package/src/core/MeganavSearch.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+
+import Icon from "./Icon";
+import MeganavSearchPanel from "./MeganavSearchPanel";
+import { AbsUrl } from "./Meganav";
+
+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;