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

package/src/core/MeganavContentUseCases.tsx

@@ -0,0 +1,244 @@
+import React from "react";
+
+import Icon from "../Icon/component.tsx";
+import { AbsUrl } from "../Meganav/component.tsx";
+
+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.jsx → MeganavControl.tsx}

@@ -1,9 +1,23 @@
-import React from "react";
-import T from "prop-types";
+import React, { ReactNode } from "react";
 
-import Icon from "../Icon/component.jsx";
+import Icon from "../Icon/component.tsx";
+import { MeganavTheme } from "../Meganav/component.tsx";
 
-const MeganavControl = ({ ariaControls, ariaLabel, children, theme, additionalCSS }) => (
+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"
@@ -22,12 +36,4 @@ const MeganavControl = ({ ariaControls, ariaLabel, children, theme, additionalCS
   </button>
 );
 
-MeganavControl.propTypes = {
-  ariaControls: T.string,
-  ariaLabel: T.string,
-  children: T.node,
-  theme: T.object,
-  additionalCSS: T.string,
-};
-
 export default MeganavControl;

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

@@ -1,9 +1,9 @@
 import React from "react";
-import T from "prop-types";
 
-import Icon from "../Icon/component.jsx";
+import Icon from "../Icon/component.tsx";
+import { MeganavTheme } from "../Meganav/component.tsx";
 
-const MeganavControlMobileDropdown = ({ theme }) => (
+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"
@@ -28,8 +28,4 @@ const MeganavControlMobileDropdown = ({ theme }) => (
   </button>
 );
 
-MeganavControlMobileDropdown.propTypes = {
-  theme: T.object,
-};
-
 export default MeganavControlMobileDropdown;

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

@@ -1,9 +1,16 @@
 import React from "react";
-import T from "prop-types";
 
-import Icon from "../Icon/component.jsx";
+import Icon from "../Icon/component.tsx";
 
-const MeganavControlMobilePanelClose = ({ ariaControls, displayHr = true }) => (
+type MeganavControlMobilePanelCloseProps = {
+  ariaControls: string;
+  displayHr?: boolean;
+};
+
+const MeganavControlMobilePanelClose = ({
+  ariaControls,
+  displayHr = true,
+}: MeganavControlMobilePanelCloseProps) => (
   <div className="mx-24 md:mx-32">
     <button
       type="button"
@@ -13,16 +20,16 @@ const MeganavControlMobilePanelClose = ({ ariaControls, displayHr = true }) => (
       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" />
+      <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>
 );
 
-MeganavControlMobilePanelClose.propTypes = {
-  ariaControls: T.string,
-  displayHr: T.bool,
-};
-
 export default MeganavControlMobilePanelClose;

package/src/core/MeganavControlMobilePanelOpen.tsx

@@ -0,0 +1,32 @@
+import React, { ReactNode } from "react";
+
+import Icon from "../Icon/component.tsx";
+
+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/component.tsx";
+import { AbsUrl, MeganavPanels, MeganavTheme } from "../Meganav/component.tsx";
+
+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/component.tsx";
+import MeganavSearchSuggestions from "../MeganavSearchSuggestions/component.tsx";
+import Icon from "../Icon/component.tsx";
+import MeganavData from "../Meganav/component.json";
+import MeganavControlMobileDropdown from "../MeganavControlMobileDropdown/component.tsx";
+import MeganavControlMobilePanelClose from "../MeganavControlMobilePanelClose/component.tsx";
+import MeganavControlMobilePanelOpen from "../MeganavControlMobilePanelOpen/component.tsx";
+import MeganavSearchAutocomplete from "../MeganavSearchAutocomplete/component.tsx";
+import {
+  AbsUrl,
+  MeganavPanels,
+  MeganavSessionState,
+  MeganavTheme,
+} from "../Meganav/component.tsx";
+
+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" 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
+  );
+});