@ably/ui 14.0.0-dev.fbce38f → 14.0.0

package/src/core/Meganav/component.css

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

@@ -1,7 +1,5 @@
 import throttle from "lodash.throttle";
 
-import "./component.css";
-
 // 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

package/src/core/{Meganav/component.tsx → Meganav.tsx}

@@ -1,24 +1,21 @@
 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/component.tsx";
-import "./component.css";
-
-import MeganavScripts from "./component.js";
-import MeganavItemsDesktop from "../MeganavItemsDesktop/component.tsx";
-import MeganavItemsSignedIn from "../MeganavItemsSignedIn/component.tsx";
-import MeganavItemsMobile from "../MeganavItemsMobile/component.tsx";
-import Notice from "../Notice/component.tsx";
-import MeganavData from "./component.json";
-import _absUrl from "../url-base.js";
-
-import MeganavContentProducts from "../MeganavContentProducts/component.tsx";
-import MeganavContentUseCases from "../MeganavContentUseCases/component.tsx";
-import MeganavContentCompany from "../MeganavContentCompany/component.tsx";
-import MeganavContentDevelopers from "../MeganavContentDevelopers/component.tsx";
-import MeganavSearch from "../MeganavSearch/component.tsx";
+import { connectState } from "./remote-data-store.js";
+import { selectSessionData } from "./remote-session-data.js";
+
+import Logo from "./Logo";
+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;

package/src/core/{MeganavBlogPostsList/component.tsx → MeganavBlogPostsList.tsx}

@@ -1,7 +1,7 @@
 import React from "react";
 
-import FeaturedLink from "../FeaturedLink/component.tsx";
-import { AbsUrl } from "../Meganav/component.tsx";
+import FeaturedLink from "./FeaturedLink";
+import { AbsUrl } from "./Meganav";
 
 type MeganavBlogPostsListProps = {
   recentBlogPosts: {

package/src/core/{MeganavContentCompany/component.tsx → MeganavContentCompany.tsx}

@@ -1,10 +1,10 @@
 import React from "react";
 
-import MeganavBlogPostsList from "../MeganavBlogPostsList/component.tsx";
-import ConnectStateWrapper from "../ConnectStateWrapper/component.tsx";
-import { selectRecentBlogPosts } from "../remote-blogs-posts.js";
-import Icon from "../Icon/component.tsx";
-import { AbsUrl } from "../Meganav/component.tsx";
+import MeganavBlogPostsList from "./MeganavBlogPostsList";
+import ConnectStateWrapper from "./ConnectStateWrapper";
+import { selectRecentBlogPosts } from "./remote-blogs-posts.js";
+import Icon from "./Icon";
+import { AbsUrl } from "./Meganav";
 
 type MeganavContentCompanyProps = {
   absUrl: AbsUrl;

package/src/core/{MeganavContentDevelopers/component.tsx → MeganavContentDevelopers.tsx}

@@ -1,7 +1,7 @@
 import React from "react";
 
-import Icon from "../Icon/component.tsx";
-import { AbsUrl } from "../Meganav/component.tsx";
+import Icon from "./Icon";
+import { AbsUrl } from "./Meganav";
 
 const MeganavContentDevelopers = ({ absUrl }: { absUrl: AbsUrl }) => (
   <div className="flex max-w-screen-xl mx-auto">

package/src/core/{MeganavContentProducts/component.tsx → MeganavContentProducts.tsx}

@@ -1,7 +1,7 @@
 import React from "react";
 
-import FeaturedLink from "../FeaturedLink/component.tsx";
-import { AbsUrl } from "../Meganav/component.tsx";
+import FeaturedLink from "./FeaturedLink";
+import { AbsUrl } from "./Meganav";
 
 type MeganavContentProductsProps = {
   paths: {

package/src/core/{MeganavContentUseCases/component.tsx → MeganavContentUseCases.tsx}

@@ -1,7 +1,7 @@
 import React from "react";
 
-import Icon from "../Icon/component.tsx";
-import { AbsUrl } from "../Meganav/component.tsx";
+import Icon from "./Icon";
+import { AbsUrl } from "./Meganav";
 
 const MeganavContentUseCases = ({ absUrl }: { absUrl: AbsUrl }) => (
   <div className="flex max-w-screen-xl mx-auto">

package/src/core/{MeganavControl/component.tsx → MeganavControl.tsx}

@@ -1,7 +1,7 @@
 import React, { ReactNode } from "react";
 
-import Icon from "../Icon/component.tsx";
-import { MeganavTheme } from "../Meganav/component.tsx";
+import Icon from "./Icon";
+import { MeganavTheme } from "./Meganav";
 
 type MeganavControlProps = {
   ariaControls: string;

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

@@ -1,7 +1,7 @@
 import React from "react";
 
-import Icon from "../Icon/component.tsx";
-import { MeganavTheme } from "../Meganav/component.tsx";
+import Icon from "./Icon";
+import { MeganavTheme } from "./Meganav";
 
 const MeganavControlMobileDropdown = ({ theme }: { theme: MeganavTheme }) => (
   <button

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

@@ -1,7 +1,6 @@
 import React from "react";
 
-import Icon from "../Icon/component.tsx";
-
+import Icon from "./Icon";
 type MeganavControlMobilePanelCloseProps = {
   ariaControls: string;
   displayHr?: boolean;

package/src/core/{MeganavControlMobilePanelOpen/component.tsx → MeganavControlMobilePanelOpen.tsx}

@@ -1,7 +1,6 @@
 import React, { ReactNode } from "react";
 
-import Icon from "../Icon/component.tsx";
-
+import Icon from "./Icon";
 type MeganavControlMobilePanelOpenProps = {
   ariaControls: string;
   children: ReactNode;

package/src/core/{MeganavItemsDesktop/component.tsx → MeganavItemsDesktop.tsx}

@@ -1,8 +1,8 @@
 import React from "react";
 
-import MeganavData from "../Meganav/component.json";
-import MeganavControl from "../MeganavControl/component.tsx";
-import { AbsUrl, MeganavPanels, MeganavTheme } from "../Meganav/component.tsx";
+import MeganavData from "./Meganav/component.json";
+import MeganavControl from "./MeganavControl";
+import { AbsUrl, MeganavPanels, MeganavTheme } from "./Meganav";
 
 type MeganavDesktopItems = {
   panels: MeganavPanels;

package/src/core/{MeganavItemsMobile/component.tsx → MeganavItemsMobile.tsx}

@@ -1,19 +1,19 @@
 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 SignOutLink from "./SignOutLink";
+import MeganavSearchSuggestions from "./MeganavSearchSuggestions";
+import Icon from "./Icon";
+import MeganavData from "./Meganav/component.json";
+import MeganavControlMobileDropdown from "./MeganavControlMobileDropdown";
+import MeganavControlMobilePanelClose from "./MeganavControlMobilePanelClose";
+import MeganavControlMobilePanelOpen from "./MeganavControlMobilePanelOpen";
+import MeganavSearchAutocomplete from "./MeganavSearchAutocomplete";
 import {
   AbsUrl,
   MeganavPanels,
   MeganavSessionState,
   MeganavTheme,
-} from "../Meganav/component.tsx";
+} from "./Meganav";
 
 type MeganavItemsMobileProps = {
   panels: MeganavPanels;

package/src/core/{MeganavItemsSignedIn/component.tsx → MeganavItemsSignedIn.tsx}

@@ -1,13 +1,9 @@
 import React from "react";
 
-import MeganavControl from "../MeganavControl/component.tsx";
-import SignOutLink from "../SignOutLink/component.tsx";
-import MeganavSearch from "../MeganavSearch/component.tsx";
-import {
-  AbsUrl,
-  MeganavSessionState,
-  MeganavTheme,
-} from "../Meganav/component.tsx";
+import MeganavControl from "./MeganavControl";
+import SignOutLink from "./SignOutLink";
+import MeganavSearch from "./MeganavSearch";
+import { AbsUrl, MeganavSessionState, MeganavTheme } from "./Meganav";
 
 type MeganavItemsSignedIn = {
   sessionState: MeganavSessionState;

package/src/core/{MeganavSearch/component.tsx → MeganavSearch.tsx}

@@ -1,8 +1,8 @@
 import React from "react";
 
-import Icon from "../Icon/component.tsx";
-import MeganavSearchPanel from "../MeganavSearchPanel/component.tsx";
-import { AbsUrl } from "../Meganav/component.tsx";
+import Icon from "./Icon";
+import MeganavSearchPanel from "./MeganavSearchPanel";
+import { AbsUrl } from "./Meganav";
 
 const MeganavSearch = ({ absUrl }: { absUrl: AbsUrl }) => (
   <>

package/src/core/{MeganavSearchPanel/component.tsx → MeganavSearchPanel.tsx}

@@ -1,9 +1,9 @@
 import React from "react";
 
-import Icon from "../Icon/component.tsx";
-import MeganavSearchSuggestions from "../MeganavSearchSuggestions/component.tsx";
-import MeganavSearchAutocomplete from "../MeganavSearchAutocomplete/component.tsx";
-import { AbsUrl } from "../Meganav/component.tsx";
+import Icon from "./Icon";
+import MeganavSearchSuggestions from "./MeganavSearchSuggestions";
+import MeganavSearchAutocomplete from "./MeganavSearchAutocomplete";
+import { AbsUrl } from "./Meganav";
 
 const MeganavSearchPanel = ({ absUrl }: { absUrl: AbsUrl }) => (
   <section className="ui-meganav-content grid-cols-12">

package/src/core/{MeganavSearchSuggestions/component.tsx → MeganavSearchSuggestions.tsx}

@@ -1,7 +1,7 @@
 import React from "react";
 
-import FeaturedLink from "../FeaturedLink/component.tsx";
-import { AbsUrl } from "../Meganav/component.tsx";
+import FeaturedLink from "./FeaturedLink";
+import { AbsUrl } from "./Meganav";
 
 type MeganavSearchSuggestionsProps = {
   absUrl: AbsUrl;

package/src/core/Notice/component.css

@@ -1,5 +1,7 @@
-.ui-announcement {
-  @apply font-sans;
-  max-height: 37.5rem;
-  transition: max-height 300ms;
+@layer components {
+  .ui-announcement {
+    @apply font-sans;
+    max-height: 37.5rem;
+    transition: max-height 300ms;
+  }
 }

package/src/core/Notice/component.js

@@ -1,9 +1,8 @@
-import "./component.css";
 import Cookie from "js-cookie";
 import throttle from "lodash.throttle";
 
 import { queryId } from "../dom-query";
-import { FLASH_DATA_ID } from "../Flash/component.tsx";
+import { FLASH_DATA_ID } from "../Flash";
 
 const COOKIE_EXPIRY = 90;
 const COLLAPSE_TRIGGER_DISTANCE = 5;

package/src/core/{Notice/component.tsx → Notice.tsx}

@@ -1,9 +1,7 @@
 import React, { ReactNode, useEffect } from "react";
 
-import NoticeScripts from "./component.js";
-import "./component.css";
-import Icon from "../Icon/component.tsx";
-
+import NoticeScripts from "./Notice/component.js";
+import Icon from "./Icon";
 type ContentWrapperProps = {
   buttonLink: string;
   children: ReactNode;

package/src/core/{SignOutLink/component.tsx → SignOutLink.tsx}

@@ -1,5 +1,5 @@
 import React, { MouseEventHandler, ReactNode, useRef } from "react";
-import { AbsUrl } from "../Meganav/component.tsx";
+import { AbsUrl } from "./Meganav";
 
 type SignOutLinkProps = {
   token: string;