@ably/ui 14.1.0-dev.708de27 → 14.1.0-dev.f3a3c90

package/src/core/MeganavContentProducts.tsx

@@ -1,163 +0,0 @@
-import React from "react";
-
-import FeaturedLink from "./FeaturedLink";
-import { AbsUrl } from "./Meganav";
-
-type MeganavContentProductsProps = {
-  paths: {
-    ablyStack: string;
-    iconSprites: string;
-  };
-  absUrl: AbsUrl;
-};
-
-const MeganavContentProducts = ({
-  paths,
-  absUrl,
-}: MeganavContentProductsProps) => (
-  <div className="flex max-w-screen-xl mx-auto">
-    <div className="ui-meganav-content-spacer bg-extra-light-grey"></div>
-    <section className="grid grid-cols-12 ui-grid-gap-x w-full">
-      <div className="col-span-full md:col-span-4 py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24 bg-extra-light-grey">
-        <div className="flex mb-20">
-          <img src={paths.ablyStack} alt="Ably homepage" />
-          <h3 className="ui-meganav-overline ml-24">The Ably Platform</h3>
-        </div>
-        <p className="ui-text-p2 font-bold mb-24" style={{ maxWidth: "330px" }}>
-          Easily power any realtime experience in your application. No complex
-          infrastructure to manage or provision. Just a simple API that handles
-          everything realtime, and lets you focus on your code.
-        </p>
-
-        <FeaturedLink url={absUrl("/platform")} textSize="text-p2">
-          Explore how it works
-        </FeaturedLink>
-      </div>
-
-      <div className="col-span-full md:col-span-4 pt-24 pb-8 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white">
-        <h3
-          className="ui-meganav-overline"
-          id="meganav-products-panel-list-examples"
-        >
-          Products
-        </h3>
-        <ul
-          className="mb-16"
-          aria-labelledby="meganav-products-panel-list-examples"
-        >
-          <li>
-            <a
-              href={absUrl("/solutions/channels")}
-              className="group ui-meganav-media"
-            >
-              <p className="ui-meganav-media-heading">Pub/Sub Channels</p>
-              <p className="ui-meganav-media-copy">
-                Build infinitely scalable realtime applications.
-              </p>
-            </a>
-          </li>
-          <li>
-            <a href={absUrl("/spaces")} className="group ui-meganav-media">
-              <p className="ui-meganav-media-heading">Spaces (Beta)</p>
-              <p className="ui-meganav-media-copy">
-                Create multi-user collaborative environments.
-              </p>
-            </a>
-          </li>
-          <li>
-            <a href={absUrl("/livesync")} className="group ui-meganav-media">
-              <p className="ui-meganav-media-heading">LiveSync (Alpha)</p>
-              <p className="ui-meganav-media-copy">
-                Seamlessly sync database changes with frontend clients at scale.
-              </p>
-            </a>
-          </li>
-        </ul>
-      </div>
-
-      <div className="col-span-full md:col-span-4 pt-8 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white">
-        <h3
-          className="ui-meganav-overline"
-          id="meganav-products-panel-list-our-technology"
-        >
-          Technology
-        </h3>
-        <ul
-          className="mb-16"
-          aria-labelledby="meganav-products-panel-list-our-technology"
-        >
-          <li>
-            <a
-              href={absUrl("/four-pillars-of-dependability#performance")}
-              className="ui-meganav-media group"
-            >
-              <p className="ui-meganav-media-heading">
-                Predictable performance
-              </p>
-              <p className="ui-meganav-media-copy">
-                A low-latency and high-throughput global network.
-              </p>
-            </a>
-          </li>
-          <li>
-            <a
-              href={absUrl("/four-pillars-of-dependability#integrity")}
-              className="ui-meganav-media group"
-            >
-              <p className="ui-meganav-media-heading">
-                Guaranteed ordering & delivery
-              </p>
-              <p className="ui-meganav-media-copy">
-                Data is delivered - in order - even after disconnections.
-              </p>
-            </a>
-          </li>
-          <li>
-            <a
-              href={absUrl("/four-pillars-of-dependability#reliability")}
-              className="ui-meganav-media group"
-            >
-              <p className="ui-meganav-media-heading">
-                Fault tolerant infrastructure
-              </p>
-              <p className="ui-meganav-media-copy">
-                Redundancy is built in at global and regional levels.
-              </p>
-            </a>
-          </li>
-          <li>
-            <a
-              href={absUrl("/four-pillars-of-dependability#availability")}
-              className="ui-meganav-media group"
-            >
-              <p className="ui-meganav-media-heading">
-                High scalability & availability
-              </p>
-              <p className="ui-meganav-media-copy">
-                Built for scale with legitimate 99.999% uptime SLAs.
-              </p>
-            </a>
-          </li>
-          <li>
-            <a href={absUrl("/network")} className="ui-meganav-media group">
-              <p className="ui-meganav-media-heading">Global edge network</p>
-              <p className="ui-meganav-media-copy">
-                An edge network of 15 core routing datacenters and 205+ PoPs.
-              </p>
-            </a>
-          </li>
-        </ul>
-
-        <FeaturedLink
-          url={absUrl("/four-pillars-of-dependability")}
-          textSize="text-p3"
-        >
-          Explore Four Pillars of Dependability
-        </FeaturedLink>
-      </div>
-    </section>
-    <div className="ui-meganav-content-spacer"></div>
-  </div>
-);
-
-export default MeganavContentProducts;

package/src/core/MeganavContentUseCases.tsx

@@ -1,244 +0,0 @@
-import React from "react";
-
-import Icon from "./Icon";
-import { AbsUrl } from "./Meganav";
-
-const MeganavContentUseCases = ({ absUrl }: { absUrl: AbsUrl }) => (
-  <div className="flex max-w-screen-xl mx-auto">
-    <div className="ui-meganav-content-spacer bg-extra-light-grey"></div>
-    <section className="grid grid-cols-12 ui-grid-gap-x w-full">
-      <div className="col-span-full md:col-span-4 py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24 bg-extra-light-grey">
-        <h3
-          className="ui-meganav-overline"
-          id="meganav-use-cases-panel-use-cases"
-        >
-          Solutions
-        </h3>
-        <ul aria-labelledby="meganav-use-cases-panel-industry-use-cases">
-          <li>
-            <a
-              href={absUrl("/solutions/chat")}
-              className="ui-meganav-media-with-image group"
-            >
-              <Icon name="icon-display-chat-stack-col" size="2.5rem" />
-              <div className="flex flex-col justify-center">
-                <p className="ui-meganav-media-heading">Live Chat</p>
-                <p className="ui-meganav-media-copy">
-                  Deliver highly reliable chat experiences at scale.
-                </p>
-              </div>
-            </a>
-          </li>
-          <li>
-            <a
-              href={absUrl("/solutions/multiplayer-collaboration")}
-              className="ui-meganav-media-with-image group"
-            >
-              <Icon name="icon-multi-user-spaces-col" size="2.5rem" />
-              <div className="flex flex-col justify-center">
-                <p className="ui-meganav-media-heading">
-                  Multiplayer Collaboration
-                </p>
-                <p className="ui-meganav-media-copy">
-                  Bring collaborative multiplayer experiences to your users.
-                </p>
-              </div>
-            </a>
-          </li>
-          <li>
-            <a
-              href={absUrl("/solutions/data-broadcast")}
-              className="ui-meganav-media-with-image group"
-            >
-              <Icon name="icon-display-data-broadcast-col" size="2.5rem" />
-              <div className="flex flex-col justify-center">
-                <p className="ui-meganav-media-heading">Data Broadcast</p>
-                <p className="ui-meganav-media-copy">
-                  Broadcast realtime event data to millions of devices around
-                  the globe.
-                </p>
-              </div>
-            </a>
-          </li>
-          <li>
-            <a
-              href={absUrl("/solutions/data-synchronization")}
-              className="ui-meganav-media-with-image group"
-            >
-              <Icon
-                name="icon-display-data-synchronization-col"
-                size="2.5rem"
-              />
-              <div className="flex flex-col justify-center">
-                <p className="ui-meganav-media-heading">Data Synchronization</p>
-                <p className="ui-meganav-media-copy">
-                  Keep your frontend and backend in realtime sync, at global
-                  scale.
-                </p>
-              </div>
-            </a>
-          </li>
-          <li>
-            <a
-              href={absUrl("/push-notifications")}
-              className="ui-meganav-media-with-image group"
-            >
-              <Icon name="icon-display-push-notifications-col" size="2.5rem" />
-              <div className="flex flex-col justify-center">
-                <p className="ui-meganav-media-heading">Notifications</p>
-                <p className="ui-meganav-media-copy">
-                  Deliver cross-platform push notifications with a simple
-                  unified API.
-                </p>
-              </div>
-            </a>
-          </li>
-          <li>
-            <a
-              href={absUrl("/solutions/asset-tracking")}
-              className="ui-meganav-media-with-image group"
-            >
-              <Icon name="icon-display-asset-tracking-col" size="2.5rem" />
-              <div className="flex flex-col justify-center">
-                <p className="ui-meganav-media-heading">
-                  Asset Tracking (Beta)
-                </p>
-                <p className="ui-meganav-media-copy">
-                  Track assets in realtime with a solution optimised for last
-                  mile logistics.
-                </p>
-              </div>
-            </a>
-          </li>
-        </ul>
-      </div>
-
-      <div className="col-span-full md:col-span-4 pt-24 pb-0 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white">
-        <h3
-          className="ui-meganav-overline"
-          id="meganav-use-cases-panel-industry"
-        >
-          Industry
-        </h3>
-        <ul aria-labelledby="meganav-use-cases-panel-industry">
-          <li>
-            <a
-              href={absUrl("/solutions/edtech")}
-              className="ui-meganav-media group"
-            >
-              <p className="ui-meganav-media-heading">EdTech</p>
-              <p className="ui-meganav-media-copy">
-                Deliver interactive learning experiences.
-              </p>
-            </a>
-          </li>
-          <li>
-            <a
-              href={absUrl("/solutions/fintech")}
-              className="ui-meganav-media group"
-            >
-              <p className="ui-meganav-media-heading">FinTech</p>
-              <p className="ui-meganav-media-copy">
-                Deliver personalised financial data in realtime.
-              </p>
-            </a>
-          </li>
-          <li>
-            <a
-              href={absUrl("/solutions/automotive-logistics-and-mobility")}
-              className="ui-meganav-media group"
-            >
-              <p className="ui-meganav-media-heading">
-                Automotive, Logistics, & Mobility
-              </p>
-              <p className="ui-meganav-media-copy">
-                Power diagnostics, order tracking and more.
-              </p>
-            </a>
-          </li>
-          <li>
-            <a
-              href={absUrl("/solutions/b2b-platforms")}
-              className="ui-meganav-media group"
-            >
-              <p className="ui-meganav-media-heading">B2B Platforms</p>
-              <p className="ui-meganav-media-copy">
-                Empower your customers with realtime solutions.
-              </p>
-            </a>
-          </li>
-          <li>
-            <a
-              href={absUrl("/solutions/healthcare")}
-              className="ui-meganav-media group"
-            >
-              <p className="ui-meganav-media-heading">Healthcare (HIPAA)</p>
-              <p className="ui-meganav-media-copy">
-                Provide trustworthy, HIPAA-compliant realtime apps.
-              </p>
-            </a>
-          </li>
-        </ul>
-      </div>
-
-      <div className="col-span-full md:col-span-4 pt-0 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white">
-        <ul
-          aria-labelledby="meganav-use-cases-panel-solutions"
-          className="mt-0 md:mt-40"
-        >
-          <li>
-            <a
-              href={absUrl("/solutions/ecommerce-and-retail")}
-              className="ui-meganav-media group"
-            >
-              <p className="ui-meganav-media-heading">eCommerce & Retail</p>
-              <p className="ui-meganav-media-copy">
-                Enrich customer experiences with realtime updates.
-              </p>
-            </a>
-          </li>
-          <li>
-            <a
-              href={absUrl("/solutions/sports-and-media")}
-              className="ui-meganav-media group"
-            >
-              <p className="ui-meganav-media-heading">
-                Sports, Media & Audience Engagement
-              </p>
-              <p className="ui-meganav-media-copy">
-                Deliver engaging global realtime experiences.
-              </p>
-            </a>
-          </li>
-          <li>
-            <a
-              href={absUrl("/solutions/gaming")}
-              className="ui-meganav-media group"
-            >
-              <p className="ui-meganav-media-heading">Gaming</p>
-              <p className="ui-meganav-media-copy">
-                Power ultra fast and reliable gaming experiences.
-              </p>
-            </a>
-          </li>
-          <li>
-            <a
-              href={absUrl("/solutions/iot-and-connected-devices")}
-              className="ui-meganav-media group"
-            >
-              <p className="ui-meganav-media-heading">
-                IoT & Connected Devices
-              </p>
-              <p className="ui-meganav-media-copy">
-                Monitor and control global IoT deployments in realtime.
-              </p>
-            </a>
-          </li>
-        </ul>
-      </div>
-    </section>
-    <div className="ui-meganav-content-spacer"></div>
-  </div>
-);
-
-export default MeganavContentUseCases;

package/src/core/MeganavControl/component.js

@@ -1,117 +0,0 @@
-import { queryId, queryIdAll } from "../dom-query";
-
-const MeganavControl = () => {
-  const controls = Array.from(queryIdAll("meganav-control"));
-  const panels = Array.from(queryIdAll("meganav-panel"));
-  const mdBreakpoint = getComputedStyle(
-    document.documentElement,
-  ).getPropertyValue("--bp-md");
-
-  const hoverEnabled = () =>
-    window.matchMedia(
-      `(hover: hover) and (pointer: fine) and (min-width: ${mdBreakpoint})`,
-    ).matches;
-
-  const isSearchControl = (node) => node.dataset.control === "search";
-
-  const isSearchPanelOpen = () => {
-    const searchPanel = document.querySelector(
-      '[data-id="meganav-panel"]#panel-search',
-    );
-    if (!searchPanel) return;
-    return !searchPanel.classList.contains("invisible");
-  };
-
-  const controlsHaveFocus = () =>
-    controls.some((control) => control === document.activeElement);
-
-  const hover = (control, panel, open) => {
-    if (hoverEnabled() && !controlsHaveFocus() && !isSearchPanelOpen()) {
-      const classes = ["invisible", "visible"];
-      panel.classList.replace(...(open ? classes : classes.reverse()));
-      control.setAttribute("aria-expanded", open);
-      control.dataset.hover = open;
-    }
-  };
-
-  const mouseenterHandler = (control, panel) => () =>
-    hover(control, panel, true);
-
-  const mouseleaveHandler = (control, panel) => () =>
-    hover(control, panel, false);
-
-  const clickHandler = (control, panel) => () => {
-    controls.forEach(
-      (node) => node !== control && node.setAttribute("aria-expanded", false),
-    );
-
-    panels.forEach(
-      (node) =>
-        node !== panel && node.classList.replace("visible", "invisible"),
-    );
-
-    const ariaExpanded = control.getAttribute("aria-expanded");
-
-    // Prevent closing of the panel if it was already opened by hovering
-    const openedByHover = control.dataset.hover === "true";
-
-    if (ariaExpanded === "true" && !openedByHover) {
-      control.setAttribute("aria-expanded", false);
-      panel.classList.replace("visible", "invisible");
-    } else {
-      control.setAttribute("aria-expanded", true);
-      panel.classList.replace("invisible", "visible");
-    }
-
-    if (openedByHover) {
-      control.dataset.hover = false;
-    }
-
-    if (isSearchControl(control)) {
-      const searchInput = queryId("meganav-search-input", panel);
-      if (!searchInput) return;
-      searchInput.focus();
-    } else {
-      control.focus();
-    }
-  };
-
-  return controls
-    .map((control) => {
-      const item = control.parentNode;
-      const panel = document.querySelector(
-        `#${control.getAttribute("aria-controls")}`,
-      );
-      const click = clickHandler(control, panel);
-      control.addEventListener("click", click);
-      let mouseenter, mouseleave;
-
-      if (!isSearchControl(control)) {
-        mouseenter = mouseenterHandler(control, panel);
-        mouseleave = mouseleaveHandler(control, panel);
-
-        item.addEventListener("mouseenter", mouseenter);
-        item.addEventListener("mouseleave", mouseleave);
-      }
-
-      return [
-        {
-          teardown: () => {
-            if (mouseenter && mouseleave) {
-              item.removeEventListener("mouseenter", mouseenter);
-              item.removeEventListener("mouseleave", mouseleave);
-            }
-
-            control.removeEventListener("click", click);
-          },
-          clear: () => {
-            control.setAttribute("aria-expanded", false);
-            panel.classList.replace("visible", "invisible");
-          },
-        },
-      ];
-    })
-    .flat();
-};
-
-export default MeganavControl;

package/src/core/MeganavControl.tsx

@@ -1,39 +0,0 @@
-import React, { ReactNode } from "react";
-
-import Icon from "./Icon";
-import { MeganavTheme } from "./Meganav";
-
-type MeganavControlProps = {
-  ariaControls: string;
-  ariaLabel: string;
-  children: ReactNode;
-  theme: MeganavTheme;
-  additionalCSS?: string;
-};
-
-const MeganavControl = ({
-  ariaControls,
-  ariaLabel,
-  children,
-  theme,
-  additionalCSS,
-}: MeganavControlProps) => (
-  <button
-    type="button"
-    data-id="meganav-control"
-    className={`ui-meganav-link h-64 flex items-center group ${additionalCSS} ${theme.textColor}`}
-    aria-expanded="false"
-    aria-controls={ariaControls}
-    aria-label={`Show ${ariaLabel} panel`}
-  >
-    {children}
-    <Icon
-      name="icon-gui-disclosure-arrow"
-      color="text-cool-black"
-      size="1.5rem"
-      additionalCSS="transform rotate-90 group-hover:text-gui-hover group-focus:text-gui-focus"
-    />
-  </button>
-);
-
-export default MeganavControl;

package/src/core/MeganavControlMobileDropdown/component.js

@@ -1,46 +0,0 @@
-import scrollLock from "scroll-lock";
-
-import { queryId } from "../dom-query";
-
-const MeganavControlMobileDropdown = ({ clearPanels }) => {
-  const control = queryId("meganav-control-mobile-dropdown");
-  const dropdown = queryId("meganav-mobile-dropdown");
-  const menuIcon = queryId("meganav-control-mobile-dropdown-menu");
-  const closeIcon = queryId("meganav-control-mobile-dropdown-close");
-
-  const clickHandler = () => {
-    const ariaExpanded = control.getAttribute("aria-expanded");
-
-    if (ariaExpanded === "false") {
-      dropdown.classList.replace("invisible", "visible");
-      control.setAttribute("aria-expanded", true);
-      scrollLock.disablePageScroll();
-    } else {
-      dropdown.classList.replace("visible", "invisible");
-      control.setAttribute("aria-expanded", false);
-      scrollLock.enablePageScroll();
-      clearPanels();
-    }
-
-    menuIcon.classList.toggle("hidden");
-    closeIcon.classList.toggle("hidden");
-  };
-
-  control.addEventListener("click", clickHandler);
-
-  return {
-    teardown: () => {
-      control.removeEventListener("click", clickHandler);
-      scrollLock.enablePageScroll();
-    },
-    clear: () => {
-      dropdown.classList.replace("visible", "invisible");
-      control.setAttribute("aria-expanded", false);
-      menuIcon.classList.remove("hidden");
-      closeIcon.classList.add("hidden");
-      scrollLock.enablePageScroll();
-    },
-  };
-};
-
-export default MeganavControlMobileDropdown;

package/src/core/MeganavControlMobileDropdown.tsx

@@ -1,31 +0,0 @@
-import React from "react";
-
-import Icon from "./Icon";
-import { MeganavTheme } from "./Meganav";
-
-const MeganavControlMobileDropdown = ({ theme }: { theme: MeganavTheme }) => (
-  <button
-    type="button"
-    className="block ml-24 mr-0 px-0 py-16 hover:text-gui-hover focus:text-gui-focus focus:outline-none"
-    data-id="meganav-control-mobile-dropdown"
-    aria-expanded="false"
-    aria-controls="meganav-mobile-dropdown"
-  >
-    <Icon
-      name="icon-gui-burger-menu"
-      size="1.5rem"
-      color={theme.mobileMenuColor}
-      additionalCSS="transition-colors"
-      data-id="meganav-control-mobile-dropdown-menu"
-    />
-    <Icon
-      name="icon-gui-close"
-      size="1.5rem"
-      color={theme.mobileMenuColor}
-      additionalCSS="transition-colors hidden"
-      data-id="meganav-control-mobile-dropdown-close"
-    />
-  </button>
-);
-
-export default MeganavControlMobileDropdown;

package/src/core/MeganavControlMobilePanelClose/component.js

@@ -1,36 +0,0 @@
-import { queryIdAll } from "../dom-query";
-
-export default () => {
-  const closeControls = Array.from(
-    queryIdAll("meganav-control-mobile-panel-close"),
-  );
-  const openControls = Array.from(
-    queryIdAll("meganav-control-mobile-panel-open"),
-  );
-
-  const clickHandler = (btn, openBtn, panel) => () => {
-    btn.setAttribute("aria-expanded", false);
-    openBtn.setAttribute("aria-expanded", false);
-    panel.classList.replace("block", "hidden");
-    panel.style.height = null;
-  };
-
-  return closeControls.map((btn) => {
-    const openBtn = openControls.find(
-      (open) =>
-        open.getAttribute("aria-controls") ===
-        btn.getAttribute("aria-controls"),
-    );
-    const panel = document.querySelector(
-      `#${btn.getAttribute("aria-controls")}`,
-    );
-    const handler = clickHandler(btn, openBtn, panel);
-
-    btn.addEventListener("click", handler);
-
-    return {
-      teardown: () => btn.removeEventListener("click", handler),
-      clear: () => btn.setAttribute("aria-expanded", false),
-    };
-  });
-};