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

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,54 @@
+import React, { PropsWithChildren, useEffect, useRef, useState } from "react";
+
+type ExpanderProps = {
+  height?: number;
+  className?: string;
+  fadeClassName?: string;
+};
+
+const Expander = ({
+  height = 200,
+  className,
+  fadeClassName,
+  children,
+}: PropsWithChildren<ExpanderProps>) => {
+  const innerRef = useRef<HTMLDivElement>(null);
+  const [contentHeight, setContentHeight] = useState(height);
+  const [expanded, setExpanded] = useState(false);
+
+  useEffect(() => {
+    setContentHeight(innerRef.current?.clientHeight ?? height);
+  }, [height, expanded]);
+
+  const showControls = contentHeight > height;
+
+  return (
+    <>
+      <div
+        style={{ height: expanded ? contentHeight : 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 active:text-gui-blue-active-light focus:text-gui-blue-focus"
+        >
+          {expanded ? "View less -" : "View all +"}
+        </div>
+      )}
+    </>
+  );
+};
+
+export default Expander;

package/src/core/FeaturedLink/FeaturedLink.stories.tsx

@@ -0,0 +1,43 @@
+import FeaturedLink from "../FeaturedLink";
+
+export default {
+  title: "Components/Featured Link",
+  component: FeaturedLink,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  args: {
+    url: "#",
+    children: "Featured link",
+  },
+};
+
+export const Default = {
+  args: {},
+};
+
+export const Reverse = {
+  args: {
+    reverse: true,
+  },
+};
+
+export const Large = {
+  args: {
+    textSize: "text-p1",
+  },
+};
+
+export const Small = {
+  args: {
+    textSize: "text-p3",
+  },
+};
+
+export const Pink = {
+  args: {
+    iconColor: "text-pink-500",
+    additionalCSS: "text-pink-800",
+  },
+};

package/src/core/{FeaturedLink/component.jsx → FeaturedLink.tsx}

@@ -1,13 +1,26 @@
-import React from "react";
-import T from "prop-types";
+import React, { CSSProperties, ReactNode } from "react";
 
-import Icon from "../Icon/component.jsx";
+import Icon from "./Icon";
+
+type FeaturedLinkProps = {
+  url: string;
+  children: ReactNode;
+  textSize?: string;
+  iconColor?: string;
+  flush?: boolean;
+  reverse?: boolean;
+  additionalCSS?: string;
+  newWindow?: boolean;
+  onClick?: () => void;
+};
+
+type TargetProps = { target?: string; rel?: string };
 
 // When generating links with target=_blank, we only add `noreferrer` to
 // links that don't start with `/`, so we can continue tracking referrers
 // across our own domains
 const buildTargetAndRel = (url, newWindow) => {
-  const props = {};
+  const props: TargetProps = {};
 
   if (newWindow) {
     props.target = "_blank";
@@ -32,7 +45,7 @@ const FeaturedLink = ({
   newWindow = false,
   onClick = undefined,
   children,
-}) => {
+}: FeaturedLinkProps) => {
   const targetAndRel = buildTargetAndRel(url, newWindow);
 
   return (
@@ -41,7 +54,14 @@ const FeaturedLink = ({
       className={`font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ui-${textSize} ${
         flush ? "" : "py-8"
       } ${additionalCSS}`}
-      style={{ "--featured-link-icon-size": `var(${textSize.replace("text", "--fs")})` }}
+      style={
+        {
+          "--featured-link-icon-size": `var(${textSize.replace(
+            "text",
+            "--fs"
+          )})`,
+        } as CSSProperties
+      }
       {...targetAndRel}
       onClick={onClick}
     >
@@ -70,16 +90,4 @@ const FeaturedLink = ({
   );
 };
 
-FeaturedLink.propTypes = {
-  url: T.string,
-  children: T.node,
-  textSize: T.string,
-  iconColor: T.string,
-  flush: T.bool,
-  reverse: T.bool,
-  additionalCSS: T.string,
-  newWindow: T.bool,
-  onClick: T.func,
-};
-
 export default FeaturedLink;

package/src/core/Flash/Flash.stories.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import Flash, { reducerFlashes } from "../Flash";
+
+import {
+  attachStoreToWindow,
+  createRemoteDataStore,
+} from "../remote-data-store.js";
+import { reducerBlogPosts } from "../remote-blogs-posts.js";
+import { reducerSessionData } from "../remote-session-data.js";
+
+export default {
+  title: "Components/Flash",
+  component: Flash,
+  args: {
+    flashes: [
+      ["success", "Congratulations! You've won the Oscar"],
+      ["notice", "This is a notice"],
+      ["error", "This is an error, very bad"],
+      ["alert", "This is an alert"],
+      ["info", "Some useful information, you are welcome"],
+    ],
+  },
+};
+
+export const Default = {
+  render: (args) => {
+    const store = createRemoteDataStore({
+      ...reducerBlogPosts,
+      ...reducerSessionData,
+      ...reducerFlashes,
+    });
+
+    attachStoreToWindow(store);
+
+    return <Flash {...args} />;
+  },
+};

package/src/core/Flash/component.css

@@ -1,25 +1,23 @@
-@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 {
+  @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/component.jsx → Flash.tsx}

@@ -1,11 +1,27 @@
 import React, { useEffect, useState, useRef } from "react";
 import DOMPurify from "dompurify";
-import T from "prop-types";
 import { nanoid } from "nanoid/non-secure";
 
-import { getRemoteDataStore } from "../remote-data-store";
-import ConnectStateWrapper from "../ConnectStateWrapper/component.jsx";
-import Icon from "../Icon/component.jsx";
+import { getRemoteDataStore } from "./remote-data-store.js";
+import ConnectStateWrapper from "./ConnectStateWrapper";
+import Icon from "./Icon";
+import "./Flash/component.css";
+
+type FlashProps = {
+  id: string;
+  removed: boolean;
+  type: "error" | "success" | "notice" | "info" | "alert";
+  content: string;
+  removeFlash: (id: string) => void;
+};
+
+type FlashesProps = {
+  flashes: { items: FlashProps[] };
+};
+
+type BackendFlashesProps = {
+  flashes: string[][];
+};
 
 const REDUCER_KEY = "flashes";
 const FLASH_DATA_ID = "ui-flashes";
@@ -16,7 +32,9 @@ const reducerFlashes = {
   [REDUCER_KEY]: (state = initialState, action) => {
     switch (action.type) {
       case "flash/push": {
-        const flashes = Array.isArray(action.payload) ? action.payload : [action.payload];
+        const flashes = Array.isArray(action.payload)
+          ? action.payload
+          : [action.payload];
         return { items: [...state.items, ...flashes] };
       }
       default:
@@ -27,11 +45,6 @@ const reducerFlashes = {
 
 const selectFlashes = (store) => store.getState()[REDUCER_KEY];
 
-const FlashT = {
-  type: T.oneOf(["error", "success", "notice", "info", "alert"]),
-  content: T.string,
-};
-
 const FLASH_BG_COLOR = {
   error: "bg-gui-error",
   success: "bg-zingy-green",
@@ -52,7 +65,7 @@ const AUTO_HIDE = ["success", "info", "notice"];
 const AUTO_HIDE_TIME = 8000;
 
 const useAutoHide = (type, closeFlash) => {
-  const timeoutId = useRef(null);
+  const timeoutId = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   useEffect(() => {
     if (AUTO_HIDE.includes(type)) {
@@ -69,8 +82,8 @@ const useAutoHide = (type, closeFlash) => {
   }, []);
 };
 
-const Flash = ({ id, type, content, removeFlash }) => {
-  const ref = useRef(null);
+const Flash = ({ id, type, content, removeFlash }: FlashProps) => {
+  const ref = useRef<HTMLDivElement>(null);
   const [closed, setClosed] = useState(false);
   const [flashHeight, setFlashHeight] = useState(0);
   const [triggerEntryAnimation, setTriggerEntryAnimation] = useState(false);
@@ -83,7 +96,7 @@ const Flash = ({ id, type, content, removeFlash }) => {
     setClosed(true);
 
     setTimeout(() => {
-      removeFlash(id);
+      id && removeFlash(id);
     }, 100);
   };
 
@@ -122,30 +135,62 @@ const Flash = ({ id, type, content, removeFlash }) => {
   };
 
   return (
-    <div className={`ui-flash-message ui-grid-px ${animateEntry ? "ui-flash-message-enter" : ""}`} style={style} ref={ref} data-id="ui-flash">
-      <div className={`${FLASH_BG_COLOR[type]} p-32 flex align-center rounded shadow-container-subtle`}>
-        {withIcons[type] && <Icon name={withIcons[type]} color={iconColor[type]} size="1.5rem" additionalCSS="mr-16 self-baseline" />}
-        <p className={`ui-text-p1 mr-16 ${FLASH_TEXT_COLOR[type]}`} dangerouslySetInnerHTML={{ __html: safeContent }} />
-        <button type="button" className="p-0 ml-auto self-start focus:outline-none" onClick={closeFlash}>
-          <Icon name="icon-gui-close" color={iconColor[type]} size="1.5rem" additionalCSS="transition-colors" />
+    <div
+      className={`ui-flash-message ui-grid-px ${
+        animateEntry ? "ui-flash-message-enter" : ""
+      }`}
+      style={style}
+      ref={ref}
+      data-id="ui-flash"
+    >
+      <div
+        className={`${FLASH_BG_COLOR[type]} p-32 flex align-center rounded shadow-container-subtle`}
+      >
+        {withIcons[type] && (
+          <Icon
+            name={withIcons[type]}
+            color={iconColor[type]}
+            size="1.5rem"
+            additionalCSS="mr-16 self-baseline"
+          />
+        )}
+        <p
+          className={`ui-text-p1 mr-16 ${FLASH_TEXT_COLOR[type]}`}
+          dangerouslySetInnerHTML={{ __html: safeContent }}
+        />
+        <button
+          type="button"
+          className="p-0 ml-auto self-start focus:outline-none"
+          onClick={closeFlash}
+        >
+          <Icon
+            name="icon-gui-close"
+            color={iconColor[type]}
+            size="1.5rem"
+            additionalCSS="transition-colors"
+          />
         </button>
       </div>
     </div>
   );
 };
 
-Flash.propTypes = {
-  ...FlashT,
-};
-
-const Flashes = ({ flashes }) => {
-  const [flashesWithIds, setFlashesWithIds] = useState([]);
+const Flashes = ({ flashes }: FlashesProps) => {
+  const [flashesWithIds, setFlashesWithIds] = useState<FlashProps[]>([]);
 
-  const removeFlash = (flashId) => setFlashesWithIds((items) => items.filter((item) => item.id !== flashId));
+  const removeFlash = (flashId) =>
+    setFlashesWithIds((items) => items.filter((item) => item.id !== flashId));
 
   useEffect(() => {
     setFlashesWithIds((state) => {
-      return [...state, ...(flashes?.items || []).map((flash) => ({ ...flash, id: nanoid(), removed: false }))];
+      return [
+        ...state,
+        ...(flashes?.items).map((flash) => ({
+          ...flash,
+          id: nanoid(),
+          removed: false,
+        })),
+      ];
     });
   }, [flashes]);
 
@@ -154,17 +199,13 @@ const Flashes = ({ flashes }) => {
       {flashesWithIds
         .filter((item) => !item.removed)
         .map((flash) => (
-          <Flash removeFlash={removeFlash} key={flash.id} {...flash} />
+          <Flash key={flash.id} {...flash} removeFlash={removeFlash} />
         ))}
     </div>
   );
 };
 
-Flashes.propTypes = {
-  flashes: T.shape({ items: T.arrayOf(T.shape(FlashT)) }),
-};
-
-const BackendFlashes = ({ flashes }) => {
+const BackendFlashes = ({ flashes }: BackendFlashesProps) => {
   useEffect(() => {
     const transformedFlashes =
       flashes.map((flash) => {
@@ -182,14 +223,12 @@ const BackendFlashes = ({ flashes }) => {
     }
   }, []);
 
-  const WrappedFlashes = ConnectStateWrapper(Flashes, { flashes: selectFlashes });
+  const WrappedFlashes = ConnectStateWrapper(Flashes, {
+    flashes: selectFlashes,
+  });
 
   return <WrappedFlashes />;
 };
 
-BackendFlashes.propTypes = {
-  flashes: T.arrayOf(T.arrayOf(T.string)),
-};
-
 export { reducerFlashes, FLASH_DATA_ID, Flashes };
 export default BackendFlashes;

package/src/core/Footer/Footer.stories.tsx

@@ -0,0 +1,26 @@
+import Footer from "../Footer";
+
+import ablyStack from "../images/ably-stack.svg";
+import highestPerformer from "../images/high-performer-2023.svg";
+import bestSupport from "../images/best-support-2023.svg";
+import fastestImplementation from "../images/fastest-implementation-2023.svg";
+import highestUserAdoption from "../images/highest-user-adoption-2023.svg";
+
+export default {
+  title: "Components/Footer",
+  component: Footer,
+  parameters: {
+    layout: "fullscreen",
+  },
+  args: {
+    paths: {
+      ablyStack,
+      highestPerformer,
+      bestSupport,
+      fastestImplementation,
+      highestUserAdoption,
+    },
+  },
+};
+
+export const Default = {};

package/src/core/Footer/component.css

@@ -1,33 +1,31 @@
-@layer components {
-  .ui-footer-col-title {
-    @apply font-mono text-overline2 p-menu-row-title font-medium uppercase tracking-widen-0.16;
-  }
+.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;
   }
 }