@ably/ui 14.0.5 → 14.0.6

package/src/core/Icon.tsx

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

@@ -1,21 +0,0 @@
-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.tsx

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

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

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

@@ -1,86 +0,0 @@
-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: "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

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

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

@@ -1,37 +0,0 @@
-{
-  "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" }
-  ]
-}