@ably/ui 13.3.0 → 14.0.0-dev.3f64b93

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: "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/component.jsx → Loader.tsx}

@@ -1,7 +1,16 @@
 import React from "react";
-import T from "prop-types";
 
-const Loader = ({ ringColor = "text-dark-grey", size = "1.5rem", additionalCSS = "" }) => (
+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 }}
@@ -40,10 +49,4 @@ const Loader = ({ ringColor = "text-dark-grey", size = "1.5rem", additionalCSS =
   </svg>
 );
 
-Loader.propTypes = {
-  size: T.string,
-  ringColor: T.string,
-  additionalCSS: T.string,
-};
-
 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: "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 { rest } 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: "Components/Meganav",
+  component: Meganav,
+  parameters: {
+    layout: "fullscreen",
+    msw: [
+      rest.get("/api/me", (_req, res, ctx) => {
+        return res(ctx.json({}));
+      }),
+      rest.get("/api/blog", (_req, res, ctx) => {
+        return res(
+          ctx.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

@@ -1,114 +1,112 @@
-@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 block 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-bold 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
+.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-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 {
+  @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;
+.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;
-  }
+  @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-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-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-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;
-  }
+.ui-meganav-hr {
+  @apply my-0 text-mid-grey;
 }

package/src/core/Meganav/component.js

@@ -12,13 +12,12 @@ import "./component.css";
 
 import { queryId, queryIdAll } from "../dom-query";
 
-import MeganavControl from "../MeganavControl/component";
-
-import MeganavControlMobileDropdown from "../MeganavControlMobileDropdown/component";
-import MobilePanelOpenClick from "../MeganavControlMobilePanelOpen/component";
-import MobilePanelCloseClick from "../MeganavControlMobilePanelClose/component";
-import MeganavSearchAutocomplete from "../MeganavSearchAutocomplete/component";
-import MeganavSearchSuggestions from "../MeganavSearchSuggestions/component";
+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) => {

package/src/core/Meganav.tsx

@@ -0,0 +1,226 @@
+import React, { ReactNode, useEffect, useState } from "react";
+
+import { connectState } from "./remote-data-store.js";
+import { selectSessionData } from "./remote-session-data.js";
+
+import Logo from "./Logo";
+import "./Meganav/component.css";
+import MeganavData from "./Meganav/component.json";
+import MeganavScripts from "./Meganav/component.js";
+import MeganavItemsDesktop from "./MeganavItemsDesktop";
+import MeganavItemsSignedIn from "./MeganavItemsSignedIn";
+import MeganavItemsMobile from "./MeganavItemsMobile";
+import Notice from "./Notice";
+import _absUrl from "./url-base.js";
+import MeganavContentProducts from "./MeganavContentProducts";
+import MeganavContentUseCases from "./MeganavContentUseCases";
+import MeganavContentCompany from "./MeganavContentCompany";
+import MeganavContentDevelopers from "./MeganavContentDevelopers";
+import MeganavSearch from "./MeganavSearch";
+
+export type MeganavTheme = {
+  backgroundColor?: string;
+  textColor?: string;
+  buttonBackgroundColor?: string;
+  buttonTextColor?: string;
+  mobileMenuColor?: string;
+  logoTextColor?: string;
+  barShadow?: string;
+};
+
+export type AbsUrl = (path: string) => string;
+
+export type MeganavPanels = {
+  [index: string]: ({ paths, absUrl }) => ReactNode;
+};
+
+export type MeganavSessionState = {
+  signedIn: boolean;
+  logOut: {
+    token: string;
+    href: string;
+    text: string;
+  };
+  accountName: string;
+  preferredEmail: string;
+  account: {
+    links: {
+      dashboard: {
+        href: string;
+      };
+    };
+  };
+  mySettings: {
+    text: string;
+    href: string;
+  };
+  myAccessTokens: {
+    text: string;
+    href: string;
+  };
+};
+
+type SignInProps = {
+  sessionState: MeganavSessionState;
+  theme: MeganavTheme;
+  loginLink: string;
+  absUrl: AbsUrl;
+};
+
+type MeganavProps = {
+  paths?: {
+    logo: string;
+    iconSprites: string;
+    ablyStack: string;
+    blogThumb1: string;
+    blogThumb2: string;
+    blogThumb3: string;
+  };
+
+  themeName: "white" | "black" | "transparentToWhite";
+  notice?: {
+    props: {
+      title: string;
+      bodyText: string;
+      buttonLink: string;
+      buttonLabel: string;
+      closeBtn: boolean;
+    };
+    config: {
+      cookieId: string;
+      noticeId: string;
+      collapse: boolean;
+    };
+  };
+  loginLink?: string;
+  urlBase?: string;
+  addSearchApiKey: string;
+};
+
+const SignIn = ({ sessionState, theme, loginLink, absUrl }: SignInProps) => {
+  return sessionState.signedIn ? (
+    <MeganavItemsSignedIn
+      absUrl={absUrl}
+      sessionState={sessionState}
+      theme={theme}
+    />
+  ) : (
+    <ul className="hidden md:flex items-center">
+      <li className="ui-meganav-item">
+        <a
+          href={absUrl("/contact")}
+          className={`ui-meganav-link ${theme.textColor}`}
+          data-id="meganav-link"
+        >
+          Contact us
+        </a>
+      </li>
+      <li className="ui-meganav-item">
+        <a
+          href={absUrl(loginLink)}
+          className={`ui-meganav-link mr-0 ${theme.textColor}`}
+          data-id="meganav-link"
+        >
+          Login
+        </a>
+      </li>
+      <li className="ui-meganav-item">
+        <MeganavSearch absUrl={absUrl} />
+      </li>
+      <li className="ui-meganav-item">
+        <a
+          href={absUrl("/sign-up")}
+          data-id="meganav-sign-up-btn"
+          className={`ui-btn p-btn-small ${theme.buttonBackgroundColor} ${theme.buttonTextColor}`}
+        >
+          Sign up free
+        </a>
+      </li>
+    </ul>
+  );
+};
+
+const SignInPlaceholder = () => <div />;
+
+const panels = {
+  MeganavContentProducts,
+  MeganavContentUseCases,
+  MeganavContentCompany,
+  MeganavContentDevelopers,
+};
+
+const Meganav = ({
+  paths,
+  themeName = "white",
+  notice,
+  loginLink = "/login",
+  urlBase,
+  addSearchApiKey,
+}: MeganavProps) => {
+  const [sessionState, setSessionState] = useState<MeganavSessionState>();
+
+  useEffect(() => {
+    // Note if state is never updated, sessionState stays null and never removes the placeholder.
+    // This makes SSR consistent (ie. we always show the placeholder)
+    connectState(selectSessionData, setSessionState);
+  }, []);
+
+  useEffect(() => {
+    const teardown = MeganavScripts({ themeName, addSearchApiKey });
+    // TODO(jamiehenson): update this when JS assets are converted to TS
+    // @ts-expect-error: teardown parsed as Element from JS file, cannot be coerced into Function form
+    return () => teardown();
+  }, [sessionState]);
+
+  const theme = MeganavData.themes[themeName];
+  const absUrl = (path) => _absUrl(path, urlBase);
+
+  return (
+    <nav
+      className={`ui-meganav-wrapper ${theme.backgroundColor} ${theme.barShadow}`}
+      data-id="meganav"
+      aria-label="Main"
+    >
+      {notice && <Notice {...notice.props} config={notice.config} />}
+      <div className="ui-meganav ui-grid-px">
+        <div className="mr-24">
+          <Logo
+            dataId="meganav-logo"
+            href={urlBase}
+            logoUrl={paths?.logo ?? ""}
+          />
+        </div>
+
+        <MeganavItemsDesktop
+          panels={panels}
+          paths={paths}
+          theme={theme}
+          absUrl={absUrl}
+        />
+
+        {/* Because we load the session state through fetch, we display a placeholder until fetch returns */}
+        {sessionState ? (
+          <SignIn
+            sessionState={sessionState}
+            theme={theme}
+            loginLink={loginLink}
+            absUrl={absUrl}
+          />
+        ) : (
+          <SignInPlaceholder />
+        )}
+
+        <MeganavItemsMobile
+          panels={panels}
+          sessionState={sessionState}
+          paths={paths}
+          theme={theme}
+          loginLink={loginLink}
+          absUrl={absUrl}
+        />
+      </div>
+    </nav>
+  );
+};
+
+export default Meganav;