@ably/ui 14.0.4 → 14.0.6

package/src/core/MeganavControlMobilePanelClose.tsx

@@ -1,34 +0,0 @@
-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

@@ -1,59 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

@@ -1,68 +0,0 @@
-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

@@ -1,197 +0,0 @@
-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

@@ -1,130 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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;