Merge pull request #492 from ably/more-pricing-stuff

[WEB-3841] Pricing-oriented improvements
ably · Sep 24, 2024 · 6fc8583 · 6fc8583
2 parents 7b21df9 + dfe0345
commit 6fc8583
Show file tree

Hide file tree

Showing 21 changed files with 3,472 additions and 4,340 deletions.
diff --git a/.storybook/test-runner.ts b/.storybook/test-runner.ts
@@ -1,6 +1,6 @@
 import type { TestRunnerConfig } from "@storybook/test-runner";
 
-const flakyStories = ["components-status", "components-meganav--signed-in"];
+const flakyStories = ["components-status", "components-meganav"];
 
 const config: TestRunnerConfig = {
   async postVisit(page, context) {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "14.6.1",
+  "version": "14.6.2",
   "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
   "repository": {
     "type": "git",
@@ -31,6 +31,7 @@
     "@types/dompurify": "^3.0.5",
     "@types/js-cookie": "^3.0.6",
     "@types/lodash.throttle": "^4.1.9",
+    "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^7.0.0",
     "@typescript-eslint/parser": "^6.21.0",
     "@vitejs/plugin-react": "^4.2.1",
@@ -78,7 +79,7 @@
     "js-cookie": "^3.0.5",
     "lodash.throttle": "^4.1.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react-dom": "^18.3.1",
     "redux": "^4.0.5",
     "scroll-lock": "^2.1.4"
   },

diff --git a/src/core/Accordion.tsx b/src/core/Accordion.tsx
@@ -1,6 +1,5 @@
 import React, { useState, ReactNode, useRef, useEffect } from "react";
 import Icon from "./Icon";
-import throttle from "lodash.throttle";
 import type { IconName } from "./Icon/types";
 import type { ColorClass } from "./styles/colors/types";
 import type {
@@ -49,15 +48,23 @@ const themeClasses: Record<AccordionTheme, AccordionThemeColors> = {
     selectableText: "text-white",
   },
   transparent: {
-    bg: "bg-white",
-    hoverBg: "hover:bg-white",
+    bg: "bg-transparent",
+    hoverBg: "hover:bg-transparent",
     text: "text-neutral-1000",
     toggleIconColor: "text-dark-grey",
+    border: "border-neutral-500 border-b last:border-none",
+  },
+  darkTransparent: {
+    bg: "bg-transparent",
+    hoverBg: "hover:bg-transparent",
+    text: "text-neutral-000",
+    toggleIconColor: "text-orange-600",
+    border: "border-neutral-900 border-b last:border-none",
   },
 };
 
 const isNonTransparentTheme = (theme: AccordionTheme) =>
-  theme !== "transparent";
+  !["transparent", "darkTransparent"].includes(theme);
 
 const AccordionRow = ({
   name,
@@ -74,32 +81,42 @@ const AccordionRow = ({
   const [contentHeight, setContentHeight] = useState<number>(0);
 
   useEffect(() => {
-    const handleHeight = throttle(() => {
+    const resizeObserver = new ResizeObserver(() => {
       if (rowRef.current) {
         setContentHeight(rowRef.current.scrollHeight + 16);
       }
-    }, 250);
+    });
 
-    handleHeight();
+    if (rowRef.current) {
+      resizeObserver.observe(rowRef.current);
+    }
 
-    window.addEventListener("resize", handleHeight);
-    return () => window.removeEventListener("resize", handleHeight);
+    return () => {
+      if (rowRef.current) {
+        resizeObserver.unobserve(rowRef.current);
+      }
+    };
   }, []);
 
   const { selectable, sticky } = options || {};
 
-  const { text, bg, hoverBg, toggleIconColor, selectableBg, selectableText } =
-    themeClasses[theme];
+  const {
+    text,
+    bg,
+    hoverBg,
+    toggleIconColor,
+    selectableBg,
+    selectableText,
+    border,
+  } = themeClasses[theme];
 
   const bgClasses: string =
     (selectable && open && selectableBg) || `${bg} ${hoverBg}`;
 
   const textClass: ColorClass = (selectable && open && selectableText) || text;
 
   return (
-    <div
-      className={`border-mid-grey border-b last:border-none ${isNonTransparentTheme(theme) ? "border-none" : ""}`}
-    >
+    <div className={`${border ?? ""}`}>
       <button
         type="button"
         onClick={onClick}
@@ -118,7 +135,7 @@ const AccordionRow = ({
         ) : null}
       </button>
       <div
-        className={`ui-text-p2 transition-[max-height] duration-500 overflow-hidden ${isNonTransparentTheme(theme) ? "pt-16 px-16" : "px-0"}`}
+        className={`ui-text-p2 transition-[max-height] duration-500 overflow-y-hidden ${isNonTransparentTheme(theme) ? "pt-16" : ""}`}
         style={{ maxHeight: open ? contentHeight : 0 }}
         ref={rowRef}
       >

diff --git a/src/core/Accordion/Accordion.stories.tsx b/src/core/Accordion/Accordion.stories.tsx
@@ -3,20 +3,16 @@ import Accordion, { AccordionProps } from "../Accordion";
 import { IconName } from "../Icon/types";
 import { accordionThemes } from "./types";
 
-const lorem = (
-  <p className="mb-16">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin scelerisque
-    congue risus id lobortis. Vivamus blandit dolor at ultricies cursus.
-    Phasellus pharetra nunc erat, quis porttitor mauris faucibus in. Donec
-    feugiat dapibus orci et blandit. Duis eleifend accumsan est nec euismod.
-    Proin imperdiet malesuada lacus, a aliquam eros aliquet nec. Sed eu dolor
-    finibus, sodales nisl a, egestas mi. In semper interdum lacinia. Duis
-    malesuada diam quis purus blandit, sit amet imperdiet neque accumsan. Morbi
-    viverra vitae risus ut pellentesque. Praesent ac blandit augue. Aliquam
-    purus lectus, lacinia in semper vitae, dictum eu felis. Donec vel pulvinar
-    eros, id facilisis neque. Aenean odio arcu, accumsan vel est in, lobortis
-    rhoncus ligula. Pellentesque sit amet odio velit.
-  </p>
+const loremText =
+  "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin scelerisque congue risus id lobortis. Vivamus blandit dolor at ultricies cursus. Phasellus pharetra nunc erat, quis porttitor mauris faucibus in. Donec feugiat dapibus orci et blandit. Duis eleifend accumsan est nec euismod. Proin imperdiet malesuada lacus, a aliquam eros aliquet nec. Sed eu dolor finibus, sodales nisl a, egestas mi. In semper interdum lacinia. Duis malesuada diam quis purus blandit, sit amet imperdiet neque accumsan. Morbi viverra vitae risus ut pellentesque. Praesent ac blandit augue. Aliquam purus lectus, lacinia in semper vitae, dictum eu felis. Donec vel pulvinar eros, id facilisis neque. Aenean odio arcu, accumsan vel est in, lobortis rhoncus ligula. Pellentesque sit amet odio velit.";
+
+const lorem = <p className="mb-16">{loremText}</p>;
+
+const textarea = (
+  <textarea
+    className="w-full h-256 bg-neutral-700 p-16 rounded-xl leading-relaxed"
+    defaultValue={loremText}
+  />
 );
 
 const data = [...Array(5)].map((_, i) => ({
@@ -29,6 +25,11 @@ const dataWithIcons = data.map((datum) => ({
   icon: "icon-gui-document-generic" as IconName,
 }));
 
+const dataWithTextarea = data.map((datum) => ({
+  ...datum,
+  content: textarea,
+}));
+
 const longData = data.map((datum) => ({
   ...datum,
   content: (
@@ -43,9 +44,12 @@ const longData = data.map((datum) => ({
 }));
 
 const AccordionPresentation = ({ data, options }: AccordionProps) => (
-  <div className="grid sm:grid-cols-3 gap-16 w-full">
+  <div className="grid sm:grid-cols-2 gap-16 w-full">
     {accordionThemes.map((theme) => (
-      <div key={theme}>
+      <div
+        key={theme}
+        className={`p-16 rounded-lg ${theme.includes("dark") ? "bg-neutral-1300" : ""}`}
+      >
         <p className="ui-text-p3 mb-16 text-center font-mono">{theme}</p>
         <Accordion
           data={data}
@@ -152,3 +156,18 @@ export const LongContent = {
     data: longData,
   },
 };
+
+export const WithResizableInnerContent = {
+  render: () =>
+    AccordionPresentation({
+      data: dataWithTextarea,
+    }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Try resizing content within the Accordion entries - the container should respond to the new height accordingly",
+      },
+    },
+  },
+};