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

package/src/core/Icon.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+
+type IconProps = {
+  name: string;
+  size?: string;
+  color?: string;
+  additionalCSS?: string;
+};
+
+const Icon = ({
+  name,
+  size = "0.75rem",
+  color = "",
+  additionalCSS = "",
+  ...additionalAttributes
+}: IconProps) => (
+  <svg
+    className={`${color} ${additionalCSS}`}
+    style={{ width: size, height: size }}
+    {...additionalAttributes}
+  >
+    <use xlinkHref={`#sprite-${name}`} />
+  </svg>
+);
+
+export default Icon;

package/src/core/Loader/Loader.stories.tsx

@@ -0,0 +1,21 @@
+import Loader from "../Loader";
+
+export default {
+  title: "JS Components/Loader",
+  component: Loader,
+  tags: ["autodocs"],
+};
+
+export const Default = {};
+
+export const ChangedRingColor = {
+  args: {
+    ringColor: "text-light-grey",
+  },
+};
+
+export const HalfSize = {
+  args: {
+    size: "0.75em",
+  },
+};

package/src/core/Loader.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+
+type LoaderProps = {
+  size?: string;
+  ringColor?: string;
+  additionalCSS?: string;
+};
+
+const Loader = ({
+  ringColor = "text-dark-grey",
+  size = "1.5rem",
+  additionalCSS = "",
+}: LoaderProps) => (
+  <svg
+    className={`${ringColor} ${additionalCSS}`}
+    style={{ width: size, height: size }}
+    height="24"
+    viewBox="0 0 24 24"
+    width="24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <style
+      dangerouslySetInnerHTML={{
+        __html: `
+      @keyframes chunk-animation {
+        to {
+          transform: rotate(360deg);
+        }
+      }
+
+      .chunk {
+        transform: rotate(0deg);
+        transform-origin: center;
+        animation: chunk-animation 0.6s cubic-bezier(.44,.15,.66,.98) forwards infinite;
+      }
+    `,
+      }}
+    ></style>
+    <path
+      fill="currentColor"
+      d="m12 1.99976c-1.9778 0-3.91121.58649-5.5557 1.6853s-2.92621 2.6606-3.68309 4.48786c-.75688 1.82728-.95491 3.83788-.56906 5.77778.38585 1.9398 1.33826 3.7216 2.73679 5.1201 1.39852 1.3985 3.18035 2.351 5.12016 2.7368 1.9398.3859 3.9505.1878 5.7777-.569 1.8273-.7569 3.3891-2.0387 4.4879-3.6831 1.0988-1.6445 1.6853-3.5779 1.6853-5.5557 0-1.3133-.2587-2.61362-.7612-3.82688-.5025-1.21325-1.2391-2.31565-2.1677-3.24423-.9286-.92859-2.031-1.66518-3.2443-2.16773-1.2132-.50255-2.5136-.7612-3.8268-.7612zm0 18.00004c-1.5822 0-3.12896-.4692-4.44456-1.3483-1.31559-.879-2.34097-2.1285-2.94647-3.5903s-.76393-3.0703-.45525-4.6222c.30868-1.55181 1.07061-2.97728 2.18943-4.0961s2.54428-1.88074 4.09615-2.18943c1.5518-.30868 3.1604-.15025 4.6222.45525s2.7112 1.63088 3.5903 2.94647c.879 1.3156 1.3482 2.86231 1.3482 4.44461 0 2.1217-.8428 4.1565-2.3431 5.6568s-3.5352 2.3432-5.6569 2.3432z"
+      opacity=".5"
+    />
+    <path
+      className="chunk"
+      d="m20 11.9998h2c0-1.3133-.2587-2.61362-.7612-3.82688-.5026-1.21325-1.2391-2.31565-2.1677-3.24423-.9286-.92859-2.031-1.66518-3.2443-2.16773-1.2132-.50255-2.5136-.7612-3.8268-.7612v2c2.1217 0 4.1566.84285 5.6569 2.34314 1.5002 1.50029 2.3431 3.53512 2.3431 5.6569z"
+      fill="#ff5416"
+    />
+  </svg>
+);
+
+export default Loader;

package/src/core/Logo/Logo.stories.tsx

@@ -0,0 +1,12 @@
+import Logo from "../Logo";
+import logoUrl from "../images/ably-logo.png";
+
+export default {
+  title: "JS Components/Logo",
+  component: Logo,
+  args: {
+    logoUrl,
+  },
+};
+
+export const Default = {};

package/src/core/Logo.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+
+type LogoProps = {
+  dataId: string;
+  logoUrl: string;
+  href?: string;
+  additionalImgAttrs?: object;
+  additionalLinkAttrs?: object;
+};
+
+const Logo = ({
+  dataId,
+  logoUrl,
+  href = "/",
+  additionalImgAttrs,
+  additionalLinkAttrs,
+}: LogoProps) => (
+  <a
+    href={href}
+    data-id={dataId}
+    className="block"
+    style={{ height: "2.125rem" }}
+    {...additionalLinkAttrs}
+  >
+    <img src={logoUrl} width="108px" alt="Ably logo" {...additionalImgAttrs} />
+  </a>
+);
+
+export default React.memo(Logo);

package/src/core/Meganav/Meganav.stories.tsx

@@ -0,0 +1,86 @@
+import React, { useEffect } from "react";
+import { http, HttpResponse } from "msw";
+
+import Meganav from "../Meganav";
+import loadIcons from "../icons.js";
+import logo from "../images/ably-logo.png";
+import ablyStack from "../images/ably-stack.svg";
+import awsLogo from "../images/icon-tech-aws.svg";
+
+import {
+  attachStoreToWindow,
+  createRemoteDataStore,
+  getRemoteDataStore,
+} from "../remote-data-store.js";
+import { reducerBlogPosts, fetchBlogPosts } from "../remote-blogs-posts.js";
+import {
+  reducerSessionData,
+  fetchSessionData,
+} from "../remote-session-data.js";
+
+export default {
+  title: "JS Components/Meganav",
+  component: Meganav,
+  parameters: {
+    layout: "fullscreen",
+    msw: {
+      handlers: [
+        http.get("/api/me", () => {
+          return HttpResponse.json({});
+        }),
+        http.get("/api/blog", () => {
+          return HttpResponse.json([
+            {
+              title: "Achieving exactly-once delivery with Ably",
+              link: "https://ably.com/blog/achieving-exactly-once-message-processing-with-ably",
+              pubDate: "Nov 17, 2020",
+            },
+            {
+              title:
+                "Why Ably integrates with functions instead of delivering them",
+              link: "https://ably.com/blog/why-we-dont-offer-functions",
+              pubDate: "Jul 28, 2020",
+            },
+            {
+              title: "Adventures in BEAM optimization with our MQTT adapter",
+              link: "https://ably.com/blog/beam-optimization-mqtt",
+              pubDate: "Jul 17, 2020",
+            },
+          ]);
+        }),
+      ],
+    },
+  },
+};
+
+attachStoreToWindow(
+  createRemoteDataStore({
+    ...reducerBlogPosts,
+    ...reducerSessionData,
+  }),
+);
+
+const Page = () => {
+  useEffect(() => {
+    loadIcons();
+
+    const store = getRemoteDataStore();
+
+    fetchSessionData(store, "/api/me");
+    fetchBlogPosts(store, "/api/blog");
+  }, []);
+
+  return (
+    <Meganav
+      paths={{
+        logo,
+        ablyStack,
+        awsLogo,
+      }}
+    />
+  );
+};
+
+export const Default = {
+  render: () => <Page />,
+};

package/src/core/Meganav/component.css

@@ -0,0 +1,114 @@
+@layer components {
+  .ui-meganav-wrapper {
+    /* Define values for new stacking context defined by position: fixed */
+    --stacking-context-meganav-dropdown: 10;
+    --stacking-context-meganav-mobile-panel: 20;
+
+    z-index: var(--stacking-context-page-meganav);
+
+    @apply fixed top-0 w-full;
+    @apply antialiased font-sans transition-colors;
+  }
+
+  .ui-meganav {
+    height: var(--ui-meganav-height);
+
+    @apply flex justify-between items-center max-w-screen-xl mx-auto;
+  }
+
+  .ui-meganav-panel,
+  .ui-meganav-mobile-dropdown,
+  .ui-meganav-panel-account {
+    z-index: var(--stacking-context-meganav-dropdown);
+
+    @apply absolute left-0 right-0;
+    @apply border-mid-grey border-t shadow-container;
+  }
+
+  .ui-meganav-panel {
+    @apply bg-white;
+  }
+
+  .ui-meganav-panel-mobile {
+    z-index: var(--stacking-context-meganav-mobile-panel);
+
+    /* Prevents momentum-based scrolling https://devdocs.io/css/-webkit-overflow-scrolling */
+    -webkit-overflow-scrolling: auto;
+
+    @apply bg-white pt-16 border-0;
+    @apply border-mid-grey border-t shadow-container;
+    @apply fixed top-64 left-0 right-0 overflow-y-auto;
+  }
+
+  .ui-meganav-panel-account {
+    left: auto;
+    min-width: 20rem;
+    @apply bg-white rounded-t-none;
+  }
+
+  .ui-meganav-panel-split-bg {
+    background: linear-gradient(to right, #fafafb 33%, white 33%, white 100%);
+  }
+
+  .ui-meganav-link {
+    @apply text-menu2 font-bold font-sans;
+    @apply mr-12 lg:mr-24 px-0 py-20;
+    @apply hover:text-gui-hover focus:text-gui-focus focus:outline-none;
+    @apply transition-colors;
+  }
+
+  .ui-meganav-item {
+    flex: 1 0 auto;
+  }
+
+  .ui-meganav-mobile-link {
+    @apply p-menu-row relative -left-8 w-extend-8;
+    @apply text-menu2 font-mono font-medium block text-cool-black text-left;
+    @apply flex items-center;
+    @apply focus:text-gui-focus focus:outline-none;
+  }
+
+  .ui-meganav-account-link {
+    @apply block px-8 py-8 hover:bg-light-grey hover:text-gui-hover rounded relative -left-8 text-menu3 w-extend-8 font-bold font-mono;
+  }
+
+  .ui-meganav-content {
+    @apply max-w-screen-xl py-24 lg:py-32 mx-auto;
+    @apply grid grid-cols-1;
+    @apply px-24 md:px-32 lg:px-32 xl:px-64;
+  }
+
+  /* This is implemented not as padding so we can change the color of just this space, while keeping the grid
+     as close to the designs as possible */
+  .ui-meganav-content-spacer {
+    @apply hidden md:block md:w-32 lg:w-32 xl:w-64 self-stretch flex-shrink-0 flex-grow-0;
+  }
+
+  .ui-meganav-media {
+    @apply block px-8 py-8 hover:bg-light-grey rounded relative -left-8 w-extend-8;
+  }
+
+  .ui-meganav-media-with-image {
+    grid-template-columns: max-content 1fr;
+    grid-template-rows: min-content 1fr;
+
+    @apply block px-8 py-8 hover:bg-light-grey rounded relative -left-8 w-extend-8;
+    @apply grid gap-x-16;
+  }
+
+  .ui-meganav-media-heading {
+    @apply text-menu3 text-cool-black font-bold font-sans group-hover:text-gui-hover group-focus:text-gui-focus leading-normal;
+  }
+
+  .ui-meganav-media-copy {
+    @apply text-p3 font-sans font-medium text-dark-grey leading-normal;
+  }
+
+  .ui-meganav-overline {
+    @apply text-overline2 text-cool-black uppercase font-medium font-mono tracking-widen-0.16 p-overline;
+  }
+
+  .ui-meganav-hr {
+    @apply my-0 text-mid-grey;
+  }
+}

package/src/core/Meganav/component.js

@@ -0,0 +1,150 @@
+import throttle from "lodash.throttle";
+
+// Glossary:
+// item - is the element which contains both the control and the panel - these are adjacent
+// control - interactive element that controls showing and hiding of dropdown or panel
+// panel - container for meganav content
+// dropdown - container for top level items on mobile
+// clear - return to initial state
+// teardown - remove all event listeners (for example when removing nodes)
+
+import { queryId, queryIdAll } from "../dom-query";
+
+import MeganavControl from "../MeganavControl/component.js";
+import MeganavControlMobileDropdown from "../MeganavControlMobileDropdown/component.js";
+import MobilePanelOpenClick from "../MeganavControlMobilePanelOpen/component.js";
+import MobilePanelCloseClick from "../MeganavControlMobilePanelClose/component.js";
+import MeganavSearchAutocomplete from "../MeganavSearchAutocomplete/component.js";
+import MeganavSearchSuggestions from "../MeganavSearchSuggestions/component.js";
+
+// Close menu when user clicks outside of viewport
+const windowOnBlur = (closeAll) => {
+  window.onblur = () => closeAll();
+  return { teardown: () => (window.onblur = null) };
+};
+
+// Close menu when click/tap outside of nav
+const documentClick = (closeAll) => {
+  const meganav = queryId("meganav");
+
+  const clickHandler = (e) => {
+    if (meganav.contains(e.target)) return;
+    closeAll();
+  };
+
+  document.addEventListener("click", clickHandler);
+
+  return {
+    teardown: () => document.removeEventListener("click", clickHandler),
+  };
+};
+
+// Invert from transparent to white
+const documentScroll = (themeName) => {
+  if (themeName !== "transparentToWhite") return { teardown: () => {} };
+
+  const meganav = queryId("meganav");
+  const navItems = queryIdAll("meganav-link");
+  const controlMobileDropdownMenu = queryId(
+    "meganav-control-mobile-dropdown-menu",
+  );
+  const controlMobileDropdownClose = queryId(
+    "meganav-control-mobile-dropdown-close",
+  );
+  const controls = queryIdAll("meganav-control");
+  const signUpBtn = queryId("meganav-sign-up-btn");
+
+  const invertTextCollection = [
+    ...Array.from(controls),
+    ...Array.from(navItems),
+    queryId("meganav-logo"),
+  ];
+
+  const invertMobleDropdownColor = (invert) => {
+    const whiteToBlack = ["ui-icon-white", "ui-icon-cool-black"];
+    const blackToWhite = [...whiteToBlack].reverse();
+
+    if (invert) {
+      controlMobileDropdownMenu?.classList.replace(...whiteToBlack);
+      controlMobileDropdownClose?.classList.replace(...whiteToBlack);
+    } else {
+      controlMobileDropdownMenu?.classList.replace(...blackToWhite);
+      controlMobileDropdownClose?.classList.replace(...blackToWhite);
+    }
+  };
+
+  const inverSignupBtnColors = (invert) => {
+    if (invert) {
+      signUpBtn?.classList.replace("bg-white", "bg-cool-black");
+      signUpBtn?.classList.replace("text-cool-black", "text-white");
+    } else {
+      signUpBtn?.classList.replace("bg-cool-black", "bg-white");
+      signUpBtn?.classList.replace("text-white", "text-cool-black");
+    }
+  };
+
+  const scrollHandler = throttle(() => {
+    if (window.scrollY > 5) {
+      meganav.classList.replace("bg-transparent", "bg-white");
+      inverSignupBtnColors(true);
+      invertMobleDropdownColor(true);
+
+      invertTextCollection.forEach((n) =>
+        n.classList.replace("text-white", "text-cool-black"),
+      );
+    } else {
+      meganav.classList.replace("bg-white", "bg-transparent");
+      inverSignupBtnColors(false);
+      invertMobleDropdownColor(false);
+
+      invertTextCollection.forEach((n) =>
+        n.classList.replace("text-cool-black", "text-white"),
+      );
+    }
+  }, 150);
+
+  document.addEventListener("scroll", scrollHandler);
+
+  return {
+    teardown: () => document.removeEventListener("scroll", scrollHandler),
+  };
+};
+
+export default function Meganav(
+  { themeName, addSearchApiKey } = { themeName: null },
+) {
+  const controls = MeganavControl();
+  const panelOpenControls = MobilePanelOpenClick();
+  const panelCloseControls = MobilePanelCloseClick();
+  const search = MeganavSearchAutocomplete(addSearchApiKey);
+  const searchSuggestions = MeganavSearchSuggestions();
+
+  const mobileDropdownControl = MeganavControlMobileDropdown({
+    clearPanels: () =>
+      [...panelOpenControls, ...panelCloseControls].forEach((i) => i.clear()),
+  });
+
+  const closeAll = () =>
+    [
+      mobileDropdownControl,
+      searchSuggestions,
+      ...panelOpenControls,
+      ...panelCloseControls,
+      ...controls,
+      ...search,
+    ].forEach((i) => i.clear());
+
+  const teardowns = [
+    documentScroll(themeName),
+    documentClick(closeAll),
+    windowOnBlur(closeAll),
+    mobileDropdownControl,
+    searchSuggestions,
+    ...controls,
+    ...panelOpenControls,
+    ...panelCloseControls,
+    ...search,
+  ].map((i) => i.teardown);
+
+  return () => teardowns.forEach((teardown) => teardown());
+}

package/src/core/Meganav/component.json

@@ -0,0 +1,37 @@
+{
+  "themes": {
+    "white": {
+      "backgroundColor": "bg-white",
+      "textColor": "text-cool-black",
+      "buttonBackgroundColor": "",
+      "buttonTextColor": "",
+      "mobileMenuColor": "text-cool-black",
+      "logoTextColor": "text-cool-black",
+      "barShadow": "shadow-subtle"
+    },
+    "black": {
+      "backgroundColor": "bg-cool-black",
+      "textColor": "text-white",
+      "buttonBackgroundColor": "bg-white",
+      "buttonTextColor": "text-cool-black",
+      "mobileMenuColor": "text-white",
+      "logoTextColor": "text-white",
+      "barShadow": ""
+    },
+    "transparentToWhite": {
+      "backgroundColor": "bg-transparent",
+      "textColor": "text-white",
+      "buttonBackgroundColor": "bg-white",
+      "buttonTextColor": "text-cool-black",
+      "mobileMenuColor": "text-white",
+      "logoTextColor": "text-white",
+      "barShadow": ""
+    }
+  },
+  "panels": [
+    { "label": "Products", "shortLabel": "Products", "id": "products-panel", "component": "MeganavContentProducts" },
+    { "label": "Solutions", "shortLabel": "Solutions", "id": "use-cases-panel", "component": "MeganavContentUseCases" },
+    { "label": "Company", "shortLabel": "Company", "id": "company-panel", "component": "MeganavContentCompany" },
+    { "label": "Developers", "shortLabel": "Developers", "id": "developers-panel", "component": "MeganavContentDevelopers" }
+  ]
+}