@ably/ui 14.0.0-dev.f6c8d86 → 14.0.0

package/src/core/CookieMessage/component.css

@@ -1,11 +1,13 @@
-.ui-cookie-message {
-  @apply rounded-lg bg-white font-sans;
-  @apply justify-between items-center;
-  @apply opacity-100 z-50 bottom-0 fixed sm:flex;
-  @apply p-16 mb-16 ml-16;
-  max-width: 70vw;
-  box-shadow: 0px 24px 32px 0px #0000000d;
-  border: 1px solid var(--color-mid-grey);
-  border-left: 0.5rem solid var(--color-electric-cyan);
-  transition: bottom 250ms ease-out, opacity 150ms ease-out;
+@layer components {
+  .ui-cookie-message {
+    @apply rounded-lg bg-white font-sans;
+    @apply justify-between items-center;
+    @apply opacity-100 z-50 bottom-0 fixed sm:flex;
+    @apply p-16 mb-16 ml-16;
+    max-width: 70vw;
+    box-shadow: 0px 24px 32px 0px #0000000d;
+    border: 1px solid var(--color-mid-grey);
+    border-left: 0.5rem solid var(--color-electric-cyan);
+    transition: bottom 250ms ease-out, opacity 150ms ease-out;
+  }
 }

package/src/core/CookieMessage.tsx

@@ -1,7 +1,6 @@
 import React, { useRef, useEffect, useState } from "react";
 import Cookie from "js-cookie";
 
-import "./CookieMessage/component.css";
 import _absUrl from "./url-base";
 
 const COOKIE_EXPIRY = 365;

package/src/core/Expander/Expander.stories.tsx

@@ -0,0 +1,132 @@
+import React from "react";
+import Expander from "../Expander";
+
+export default {
+  title: "Components/Expander",
+  component: Expander,
+  tags: ["autodocs"],
+  args: {
+    height: 200,
+  },
+  argTypes: {
+    height: {
+      control: {
+        type: "number",
+      },
+    },
+  },
+};
+
+const longContentInner = (
+  <div>
+    <p>Ipsum</p>
+    <ul className="mb-16 list-inside list-disc">
+      <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
+      <li>Sed convallis ex pharetra, tristique tellus vel, rhoncus velit.</li>
+      <li>Mauris molestie felis et scelerisque ullamcorper.</li>
+      <li>Maecenas congue ligula ut commodo tristique.</li>
+      <li>
+        Pellentesque venenatis elit vitae urna condimentum, in mollis arcu
+        venenatis.
+      </li>
+      <li>Donec nec turpis vel urna egestas fringilla.</li>
+    </ul>
+    <p>Ipsum</p>
+    <ul className="mb-16 list-inside list-disc">
+      <li>Mauris ut nibh vel metus cursus semper.</li>
+      <li>Ut mattis tortor eu urna accumsan gravida.</li>
+      <li>Nunc pellentesque neque at elit pretium tempor.</li>
+      <li>Curabitur finibus magna vitae nunc varius fermentum.</li>
+    </ul>
+    <ul className="mb-16 list-inside list-disc">
+      <li>Curabitur vehicula mi iaculis, luctus augue eu, venenatis quam.</li>
+      <li>Praesent in eros efficitur, consequat ante eu, faucibus arcu.</li>
+      <li>Nulla laoreet nibh a odio interdum, non molestie diam auctor.</li>
+    </ul>
+    <p>Ipsum</p>
+    <ul className="mb-16 list-inside list-disc">
+      <li>
+        Praesent aliquam diam tincidunt, sollicitudin tortor eget, vulputate
+        lacus.
+      </li>
+      <li>Quisque in mi sed ex vulputate varius in a leo.</li>
+      <li>Etiam posuere dolor at tortor aliquam imperdiet.</li>
+      <li>
+        Maecenas quis neque consequat, ultricies est sit amet, congue est.
+      </li>
+      <li>Aenean a elit sed nibh pretium lacinia sed convallis sapien.</li>
+    </ul>
+    <p>Ipsum</p>
+    <ul className="mb-16 list-inside list-disc">
+      <li>
+        Nulla malesuada libero id dolor aliquam, non sagittis mi scelerisque.
+      </li>
+      <li>
+        Etiam tincidunt lacus eu diam laoreet consectetur sit amet non est.
+      </li>
+      <li>In porta arcu nec purus tincidunt vulputate.</li>
+    </ul>
+  </div>
+);
+
+export const LongContent = {
+  render: () => <Expander>{longContentInner}</Expander>,
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "A larger amount of content that exceeds the height cut-off, controls shown.",
+      },
+    },
+  },
+};
+
+export const ShortContent = {
+  render: () => (
+    <Expander>
+      <div>
+        <p>Ipsum</p>
+        <ul className="mb-16 list-inside list-disc">
+          <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
+          <li>
+            Sed convallis ex pharetra, tristique tellus vel, rhoncus velit.
+          </li>
+          <li>Mauris molestie felis et scelerisque ullamcorper.</li>
+          <li>Maecenas congue ligula ut commodo tristique.</li>
+          <li>
+            Pellentesque venenatis elit vitae urna condimentum, in mollis arcu
+            venenatis.
+          </li>
+          <li>Donec nec turpis vel urna egestas fringilla.</li>
+        </ul>
+      </div>
+    </Expander>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "A smaller amount of content that doesn't exceed the height cut-off, therefore no controls shown.",
+      },
+    },
+  },
+};
+
+export const OverriddenStyles = {
+  render: () => (
+    <Expander
+      className="bg-neutral-400 p-16 rounded-lg"
+      fadeClassName="from-neutral-800"
+    >
+      {longContentInner}
+    </Expander>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "A larger amount of content, with overridden styles for the content wrapper and fader.",
+      },
+    },
+  },
+};

package/src/core/Expander.tsx

@@ -0,0 +1,63 @@
+import React, { PropsWithChildren, useEffect, useRef, useState } from "react";
+
+type ExpanderProps = {
+  heightThreshold?: number;
+  className?: string;
+  fadeClassName?: string;
+};
+
+const Expander = ({
+  heightThreshold = 200,
+  className,
+  fadeClassName,
+  children,
+}: PropsWithChildren<ExpanderProps>) => {
+  const innerRef = useRef<HTMLDivElement>(null);
+  const [showControls, setShowControls] = useState(false);
+  const [height, setHeight] = useState<number | "auto">(heightThreshold);
+  const [expanded, setExpanded] = useState(false);
+
+  useEffect(() => {
+    const contentHeight = innerRef.current?.clientHeight ?? heightThreshold;
+
+    if (contentHeight < heightThreshold) {
+      setHeight("auto");
+    } else if (expanded) {
+      setHeight(contentHeight);
+    } else {
+      setHeight(heightThreshold);
+    }
+
+    setShowControls(contentHeight >= heightThreshold);
+  }, [heightThreshold, expanded]);
+
+  return (
+    <>
+      <div
+        style={{ height }}
+        className={`overflow-hidden transition-all relative ${className ?? ""}`}
+      >
+        {showControls && !expanded && (
+          <div
+            className={`h-64 w-full bg-gradient-to-t from-white to-transparent absolute bottom-0 left-0 right-0 ${
+              fadeClassName ?? ""
+            }`}
+          ></div>
+        )}
+        <div ref={innerRef}>{children}</div>
+      </div>
+      {showControls && (
+        <div
+          onClick={() => setExpanded(!expanded)}
+          onKeyDown={(e) => e.key === "Enter" && setExpanded(!expanded)}
+          tabIndex={0}
+          className="mt-16 cursor-pointer font-bold text-gui-blue-default-light hover:text-gui-blue-hover-light"
+        >
+          {expanded ? "View less -" : "View all +"}
+        </div>
+      )}
+    </>
+  );
+};
+
+export default Expander;

package/src/core/Flash/component.css

@@ -1,23 +1,25 @@
-.ui-flash {
-  @apply w-full fixed;
-  top: 5.5rem;
-  z-index: calc(var(--stacking-context-page-meganav) - 10);
-  transition: margin-top 200ms;
-}
+@layer components {
+  .ui-flash {
+    @apply w-full fixed;
+    top: 5.5rem;
+    z-index: calc(var(--stacking-context-page-meganav) - 10);
+    transition: margin-top 200ms;
+  }
 
-.ui-flash-message {
-  @apply font-sans font-light antialiased max-w-screen-xl mx-auto mt-8 opacity-0 relative;
-  transition: opacity 200ms, transform 200ms, height 200ms 200ms,
-    margin-top 200ms 200ms;
-  transform: translateY(-200%) rotateX(-90deg);
-}
+  .ui-flash-message {
+    @apply font-sans font-light antialiased max-w-screen-xl mx-auto mt-8 opacity-0 relative;
+    transition: opacity 200ms, transform 200ms, height 200ms 200ms,
+      margin-top 200ms 200ms;
+    transform: translateY(-200%) rotateX(-90deg);
+  }
 
-/* dynamic content inside flash, can't add classes */
-.ui-flash-text a {
-  @apply underline;
-}
+  /* dynamic content inside flash, can't add classes */
+  .ui-flash-text a {
+    @apply underline;
+  }
 
-.ui-flash-message-enter {
-  @apply opacity-100;
-  transform: translateY(0) rotateX(0);
+  .ui-flash-message-enter {
+    @apply opacity-100;
+    transform: translateY(0) rotateX(0);
+  }
 }

package/src/core/Flash.tsx

@@ -5,7 +5,6 @@ import { nanoid } from "nanoid/non-secure";
 import { getRemoteDataStore } from "./remote-data-store.js";
 import ConnectStateWrapper from "./ConnectStateWrapper";
 import Icon from "./Icon";
-import "./Flash/component.css";
 
 type FlashProps = {
   id: string;

package/src/core/Footer/component.css

@@ -1,31 +1,33 @@
-.ui-footer-col-title {
-  @apply font-mono text-overline2 p-menu-row-title font-medium uppercase tracking-widen-0.16;
-}
+@layer components {
+  .ui-footer-col-title {
+    @apply font-mono text-overline2 p-menu-row-title font-medium uppercase tracking-widen-0.16;
+  }
 
-.ui-footer-menu-row-link {
-  @apply text-menu3 text-cool-black font-sans font-medium hover:text-gui-hover block;
-}
+  .ui-footer-menu-row-link {
+    @apply text-menu3 text-cool-black font-sans font-medium hover:text-gui-hover block;
+  }
 
-.ui-footer-link {
-  @apply text-gui-default hover:text-gui-hover text-menu3 font-sans font-medium;
-}
+  .ui-footer-link {
+    @apply text-gui-default hover:text-gui-hover text-menu3 font-sans font-medium;
+  }
 
-.ui-footer-compliance-text {
-  font-size: 12px;
-}
+  .ui-footer-compliance-text {
+    font-size: 12px;
+  }
 
-.ui-footer-tick-icon {
-  min-width: 1.5rem;
-}
+  .ui-footer-tick-icon {
+    min-width: 1.5rem;
+  }
 
-@media (max-width: 1040px) {
-  .ui-footer-bottom-links {
-    @apply pb-40;
+  @media (max-width: 1040px) {
+    .ui-footer-bottom-links {
+      @apply pb-40;
+    }
   }
-}
 
-@media screen {
-  .ui-footer-glassdoor {
-    display: none;
+  @media screen {
+    .ui-footer-glassdoor {
+      display: none;
+    }
   }
 }

package/src/core/Footer.tsx

@@ -2,7 +2,6 @@ import React from "react";
 
 import Icon from "./Icon";
 import _absUrl from "./url-base.js";
-import "./Footer/component.css";
 
 type FooterProps = {
   paths: {

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.tsx

@@ -4,7 +4,6 @@ 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";

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,4 +1,3 @@
-import "./component.css";
 import Cookie from "js-cookie";
 import throttle from "lodash.throttle";
 

package/src/core/Notice.tsx

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

package/src/core/Slider/Slider.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import Slider from "../Slider.tsx";
-import Icon from "../Icon.tsx";
+import Slider from "../Slider";
+import Icon from "../Icon";
 
 const Slide = ({ name }: { name: string }) => (
   <div className="relative ">