Merge pull request #335 from ably/compare-page-iterations

[WEB-3571] Miscellaneous compare page iterations I

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "14.0.0-dev.99c9769",
+  "version": "14.0.0-dev.5379086",
   "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",

src/core/Accordion.tsx

@@ -7,14 +7,14 @@ type AccordionData = {
 };
 
 type AccordionRowProps = {
-  bottomBorder: boolean;
-  topBorder: boolean;
+  bottomBorder?: boolean;
+  topBorder?: boolean;
   active: boolean;
   last: boolean;
   name: string;
   index;
   children: ReactNode;
-  arrowIcon: boolean;
+  arrowIcon?: boolean;
   setActiveIndex: (index: number) => void;
 };
 
@@ -80,7 +80,7 @@ const AccordionRow = ({
         onClick={handleSetIndex}
         className={`flex w-full px-0 focus:outline-none py-20`}
       >
-        <span className="ui-text-p1 font-bold text-left mr-8">{name}</span>
+        <span className="ui-text-p1 !font-bold text-left mr-8">{name}</span>
         <span className="ml-auto">{active ? iconActive : iconInactive}</span>
       </button>
 
@@ -105,7 +105,7 @@ const Accordion = ({
   arrowIcon,
   autoClose,
 }: AccordionProps) => {
-  const [activeIndexes, setActiveIndexes] = useState([]);
+  const [activeIndexes, setActiveIndexes] = useState<number[]>([]);
 
   const handleSetIndex = (index: number) => {
     const currentIndexIsActive = activeIndexes.includes(index);

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;

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.",
+      },
+    },
+  },
+};

src/core/Slider.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef, ReactNode } from "react";
-import Icon from "../core/Icon.tsx";
+import Icon from "./Icon";
 import "./Slider/component.css";
 
 interface SliderProps {
@@ -39,12 +39,12 @@ const SlideIndicator = ({
             className="relative w-40 h-4 mx-1 rounded-full bg-neutral-500"
           >
             {i === activeIndex && (
-              <li
+              <span
                 className="absolute inset-0 rounded-full bg-active-orange"
                 style={{
                   animation: `fillAnimation ${interval}ms linear`,
                 }}
-              ></li>
+              ></span>
             )}
           </li>
         ) : (
@@ -120,7 +120,7 @@ const Slider = ({ children, options }: SliderProps) => {
       onTouchMove={handleTouchMove}
       onTouchEnd={handleTouchEnd}
     >
-      <div className="overflow-hidden w-full py-40">
+      <div className="overflow-y-visible overflow-x-clip w-full py-40">
         <div
           className="flex items-center transition-transform ease-in-out duration-500"
           style={{ transform: `translateX(-${activeIndex * 100}%)` }}

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 ">