From f6c8d86853caac347a0ba7ead808a2fb6ec70c90 Mon Sep 17 00:00:00 2001 From: Jamie Henson Date: Thu, 18 Apr 2024 16:39:55 +0100 Subject: [PATCH 01/13] fix: assert bold font on Accordion section handle --- src/core/Accordion.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/core/Accordion.tsx b/src/core/Accordion.tsx index 034fd6f0..d1130df8 100644 --- a/src/core/Accordion.tsx +++ b/src/core/Accordion.tsx @@ -80,7 +80,7 @@ const AccordionRow = ({ onClick={handleSetIndex} className={`flex w-full px-0 focus:outline-none py-20`} > - {name} + {name} {active ? iconActive : iconInactive} From 2bd322249d9eeaf1a0883a532b4fbc22b71fd2af Mon Sep 17 00:00:00 2001 From: Jamie Henson Date: Thu, 18 Apr 2024 16:41:03 +0100 Subject: [PATCH 02/13] Publish v14.0.0-dev.f6c8d86 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 63640990..eb4cba68 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@ably/ui", - "version": "14.0.0-dev.99c9769", + "version": "14.0.0-dev.f6c8d86", "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", From d147e409899038ff21c610400d6df99d4a940cfc Mon Sep 17 00:00:00 2001 From: Jamie Henson Date: Thu, 18 Apr 2024 16:57:21 +0100 Subject: [PATCH 03/13] fix: line up Accordion TS types within components --- src/core/Accordion.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/core/Accordion.tsx b/src/core/Accordion.tsx index d1130df8..54ae5ebd 100644 --- a/src/core/Accordion.tsx +++ b/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; }; @@ -105,7 +105,7 @@ const Accordion = ({ arrowIcon, autoClose, }: AccordionProps) => { - const [activeIndexes, setActiveIndexes] = useState([]); + const [activeIndexes, setActiveIndexes] = useState([]); const handleSetIndex = (index: number) => { const currentIndexIsActive = activeIndexes.includes(index); From bc1b6fefbf79e84a6e451b45636d22023f025e72 Mon Sep 17 00:00:00 2001 From: Jamie Henson Date: Thu, 18 Apr 2024 17:00:34 +0100 Subject: [PATCH 04/13] fix: remove explicit .tsx imports that break package --- src/core/Slider.tsx | 2 +- src/core/Slider/Slider.stories.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/core/Slider.tsx b/src/core/Slider.tsx index 2a3d391f..8be11676 100644 --- a/src/core/Slider.tsx +++ b/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 { diff --git a/src/core/Slider/Slider.stories.tsx b/src/core/Slider/Slider.stories.tsx index d883c442..79f16b2f 100644 --- a/src/core/Slider/Slider.stories.tsx +++ b/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 }) => (
From 85fe8ccb4431da83a4722f19c93d9a4d350cac6d Mon Sep 17 00:00:00 2001 From: Jamie Henson Date: Thu, 18 Apr 2024 17:00:52 +0100 Subject: [PATCH 05/13] Publish v14.0.0-dev.bc1b6fe --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index eb4cba68..be893dae 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@ably/ui", - "version": "14.0.0-dev.f6c8d86", + "version": "14.0.0-dev.bc1b6fe", "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", From b9c148448ef56986592b5e7a7ac53298a8a2e63c Mon Sep 17 00:00:00 2001 From: Jamie Henson Date: Thu, 18 Apr 2024 20:18:12 +0100 Subject: [PATCH 06/13] fix: don't nest li elements in SlideIndicator --- src/core/Slider.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/core/Slider.tsx b/src/core/Slider.tsx index 8be11676..b5e38f6a 100644 --- a/src/core/Slider.tsx +++ b/src/core/Slider.tsx @@ -39,12 +39,12 @@ const SlideIndicator = ({ className="relative w-40 h-4 mx-1 rounded-full bg-neutral-500" > {i === activeIndex && ( -
  • + > )} ) : ( From 9273a096ea10a4add53d81ba6571d486769234eb Mon Sep 17 00:00:00 2001 From: Jamie Henson Date: Thu, 18 Apr 2024 20:18:34 +0100 Subject: [PATCH 07/13] Publish v14.0.0-dev.b9c1484 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index be893dae..f3bedf07 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@ably/ui", - "version": "14.0.0-dev.bc1b6fe", + "version": "14.0.0-dev.b9c1484", "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", From 64a40857bbac47b8d93653170b85a5c34bcbd68a Mon Sep 17 00:00:00 2001 From: Jamie Henson Date: Fri, 19 Apr 2024 14:11:31 +0100 Subject: [PATCH 08/13] feat: add Expander component --- src/core/Expander.tsx | 46 ++++++++++ src/core/Expander/Expander.stories.tsx | 118 +++++++++++++++++++++++++ 2 files changed, 164 insertions(+) create mode 100644 src/core/Expander.tsx create mode 100644 src/core/Expander/Expander.stories.tsx diff --git a/src/core/Expander.tsx b/src/core/Expander.tsx new file mode 100644 index 00000000..f77d2092 --- /dev/null +++ b/src/core/Expander.tsx @@ -0,0 +1,46 @@ +import React, { PropsWithChildren, useEffect, useRef, useState } from "react"; + +type ExpanderProps = { + height?: number; +}; + +const Expander = ({ + height = 200, + children, +}: PropsWithChildren) => { + const innerRef = useRef(null); + const [contentHeight, setContentHeight] = useState(height); + const [expanded, setExpanded] = useState(false); + + useEffect(() => { + setContentHeight(innerRef.current?.clientHeight ?? height); + }, [height, expanded]); + + const showControls = contentHeight > height; + + return ( + <> +
    + {showControls && !expanded && ( +
    + )} +
    {children}
    +
    + {showControls && ( +
    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 +"} +
    + )} + + ); +}; + +export default Expander; diff --git a/src/core/Expander/Expander.stories.tsx b/src/core/Expander/Expander.stories.tsx new file mode 100644 index 00000000..228919f4 --- /dev/null +++ b/src/core/Expander/Expander.stories.tsx @@ -0,0 +1,118 @@ +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", + }, + }, + }, +}; + +export const LongContent = { + render: () => ( + +
    +

    Ipsum

    +
      +
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      • +
    • + Sed convallis ex pharetra, tristique tellus vel, rhoncus velit. +
      • +
    • Mauris molestie felis et scelerisque ullamcorper.
      • +
    • Maecenas congue ligula ut commodo tristique.
      • +
    • + Pellentesque venenatis elit vitae urna condimentum, in mollis arcu + venenatis. +
      • +
    • Donec nec turpis vel urna egestas fringilla.
      • +
    +

    Ipsum

    +
      +
    • Mauris ut nibh vel metus cursus semper.
      • +
    • Ut mattis tortor eu urna accumsan gravida.
      • +
    • Nunc pellentesque neque at elit pretium tempor.
      • +
    • Curabitur finibus magna vitae nunc varius fermentum.
      • +
    +
      +
    • + Curabitur vehicula mi iaculis, luctus augue eu, venenatis quam. +
      • +
    • Praesent in eros efficitur, consequat ante eu, faucibus arcu.
      • +
    • Nulla laoreet nibh a odio interdum, non molestie diam auctor.
      • +
    +

    Ipsum

    +
      +
    • + Praesent aliquam diam tincidunt, sollicitudin tortor eget, vulputate + lacus. +
      • +
    • Quisque in mi sed ex vulputate varius in a leo.
      • +
    • Etiam posuere dolor at tortor aliquam imperdiet.
      • +
    • + Maecenas quis neque consequat, ultricies est sit amet, congue est. +
      • +
    • Aenean a elit sed nibh pretium lacinia sed convallis sapien.
      • +
    +

    Ipsum

    +
      +
    • + Nulla malesuada libero id dolor aliquam, non sagittis mi + scelerisque. +
      • +
    • + Etiam tincidunt lacus eu diam laoreet consectetur sit amet non est. +
      • +
    • In porta arcu nec purus tincidunt vulputate.
      • +
    +
    +     + ), + parameters: { + docs: { + description: { + story: + "A larger amount of content that exceeds the height cut-off, controls shown.", + }, + }, + }, +}; + +export const ShortContent = { + render: () => ( + +
    +

    Ipsum

    +
      +
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      • +
    • + Sed convallis ex pharetra, tristique tellus vel, rhoncus velit. +
      • +
    • Mauris molestie felis et scelerisque ullamcorper.
      • +
    • Maecenas congue ligula ut commodo tristique.
      • +
    • + Pellentesque venenatis elit vitae urna condimentum, in mollis arcu + venenatis. +
      • +
    • Donec nec turpis vel urna egestas fringilla.
      • +
    +
    +     + ), + parameters: { + docs: { + description: { + story: + "A smaller amount of content that doesn't exceed the height cut-off, therefore no controls shown.", + }, + }, + }, +}; From 2d0b122ddb1a6cb29421e8c9114e184d256fc41f Mon Sep 17 00:00:00 2001 From: Jamie Henson Date: Fri, 19 Apr 2024 14:13:23 +0100 Subject: [PATCH 09/13] Publish v14.0.0-dev.64a4085 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index f3bedf07..48ad77ec 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@ably/ui", - "version": "14.0.0-dev.b9c1484", + "version": "14.0.0-dev.64a4085", "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", From 3f64b93a7390ea3227f6e088c2243e7dbfb33752 Mon Sep 17 00:00:00 2001 From: Jamie Henson Date: Fri, 19 Apr 2024 14:38:24 +0100 Subject: [PATCH 10/13] fix: allow style overriding for Expander --- src/core/Expander.tsx | 12 ++- src/core/Expander/Expander.stories.tsx | 130 ++++++++++++++----------- 2 files changed, 82 insertions(+), 60 deletions(-) diff --git a/src/core/Expander.tsx b/src/core/Expander.tsx index f77d2092..e40cdb5a 100644 --- a/src/core/Expander.tsx +++ b/src/core/Expander.tsx @@ -2,10 +2,14 @@ import React, { PropsWithChildren, useEffect, useRef, useState } from "react"; type ExpanderProps = { height?: number; + className?: string; + fadeClassName?: string; }; const Expander = ({ height = 200, + className, + fadeClassName, children, }: PropsWithChildren) => { const innerRef = useRef(null); @@ -22,10 +26,14 @@ const Expander = ({ <>
    {showControls && !expanded && ( -
    +
    )}
    {children}
    diff --git a/src/core/Expander/Expander.stories.tsx b/src/core/Expander/Expander.stories.tsx index 228919f4..ec5cf84b 100644 --- a/src/core/Expander/Expander.stories.tsx +++ b/src/core/Expander/Expander.stories.tsx @@ -17,65 +17,60 @@ export default { }, }; +const longContentInner = ( +
    +

    Ipsum

    +
      +
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      • +
    • Sed convallis ex pharetra, tristique tellus vel, rhoncus velit.
      • +
    • Mauris molestie felis et scelerisque ullamcorper.
      • +
    • Maecenas congue ligula ut commodo tristique.
      • +
    • + Pellentesque venenatis elit vitae urna condimentum, in mollis arcu + venenatis. +
      • +
    • Donec nec turpis vel urna egestas fringilla.
      • +
    +

    Ipsum

    +
      +
    • Mauris ut nibh vel metus cursus semper.
      • +
    • Ut mattis tortor eu urna accumsan gravida.
      • +
    • Nunc pellentesque neque at elit pretium tempor.
      • +
    • Curabitur finibus magna vitae nunc varius fermentum.
      • +
    +
      +
    • Curabitur vehicula mi iaculis, luctus augue eu, venenatis quam.
      • +
    • Praesent in eros efficitur, consequat ante eu, faucibus arcu.
      • +
    • Nulla laoreet nibh a odio interdum, non molestie diam auctor.
      • +
    +

    Ipsum

    +
      +
    • + Praesent aliquam diam tincidunt, sollicitudin tortor eget, vulputate + lacus. +
      • +
    • Quisque in mi sed ex vulputate varius in a leo.
      • +
    • Etiam posuere dolor at tortor aliquam imperdiet.
      • +
    • + Maecenas quis neque consequat, ultricies est sit amet, congue est. +
      • +
    • Aenean a elit sed nibh pretium lacinia sed convallis sapien.
      • +
    +

    Ipsum

    +
      +
    • + Nulla malesuada libero id dolor aliquam, non sagittis mi scelerisque. +
      • +
    • + Etiam tincidunt lacus eu diam laoreet consectetur sit amet non est. +
      • +
    • In porta arcu nec purus tincidunt vulputate.
      • +
    +
    +); + export const LongContent = { - render: () => ( - -
    -

    Ipsum

    -
      -
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      • -
    • - Sed convallis ex pharetra, tristique tellus vel, rhoncus velit. -
      • -
    • Mauris molestie felis et scelerisque ullamcorper.
      • -
    • Maecenas congue ligula ut commodo tristique.
      • -
    • - Pellentesque venenatis elit vitae urna condimentum, in mollis arcu - venenatis. -
      • -
    • Donec nec turpis vel urna egestas fringilla.
      • -
    -

    Ipsum

    -
      -
    • Mauris ut nibh vel metus cursus semper.
      • -
    • Ut mattis tortor eu urna accumsan gravida.
      • -
    • Nunc pellentesque neque at elit pretium tempor.
      • -
    • Curabitur finibus magna vitae nunc varius fermentum.
      • -
    -
      -
    • - Curabitur vehicula mi iaculis, luctus augue eu, venenatis quam. -
      • -
    • Praesent in eros efficitur, consequat ante eu, faucibus arcu.
      • -
    • Nulla laoreet nibh a odio interdum, non molestie diam auctor.
      • -
    -

    Ipsum

    -
      -
    • - Praesent aliquam diam tincidunt, sollicitudin tortor eget, vulputate - lacus. -
      • -
    • Quisque in mi sed ex vulputate varius in a leo.
      • -
    • Etiam posuere dolor at tortor aliquam imperdiet.
      • -
    • - Maecenas quis neque consequat, ultricies est sit amet, congue est. -
      • -
    • Aenean a elit sed nibh pretium lacinia sed convallis sapien.
      • -
    -

    Ipsum

    -
      -
    • - Nulla malesuada libero id dolor aliquam, non sagittis mi - scelerisque. -
      • -
    • - Etiam tincidunt lacus eu diam laoreet consectetur sit amet non est. -
      • -
    • In porta arcu nec purus tincidunt vulputate.
      • -
    -
    -     - ), + render: () => {longContentInner}, parameters: { docs: { description: { @@ -116,3 +111,22 @@ export const ShortContent = { }, }, }; + +export const OverriddenStyles = { + render: () => ( + + {longContentInner} + + ), + parameters: { + docs: { + description: { + story: + "A larger amount of content, with overridden styles for the content wrapper and fader.", + }, + }, + }, +}; From 4ffb7024038c14903db9ade4a4cd5317555f88bc Mon Sep 17 00:00:00 2001 From: Jamie Henson Date: Fri, 19 Apr 2024 14:38:46 +0100 Subject: [PATCH 11/13] Publish v14.0.0-dev.3f64b93 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 48ad77ec..e238988b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@ably/ui", - "version": "14.0.0-dev.64a4085", + "version": "14.0.0-dev.3f64b93", "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", From 537908681b3e493964980df42509ccb4f67ca6ee Mon Sep 17 00:00:00 2001 From: Jamie Henson Date: Fri, 19 Apr 2024 15:55:17 +0100 Subject: [PATCH 12/13] fix: allow Y overflow for Slider to prevent background clipping --- src/core/Slider.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/core/Slider.tsx b/src/core/Slider.tsx index b5e38f6a..fd1700e7 100644 --- a/src/core/Slider.tsx +++ b/src/core/Slider.tsx @@ -120,7 +120,7 @@ const Slider = ({ children, options }: SliderProps) => { onTouchMove={handleTouchMove} onTouchEnd={handleTouchEnd} > -
    +
    Date: Fri, 19 Apr 2024 15:55:43 +0100 Subject: [PATCH 13/13] Publish v14.0.0-dev.5379086 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index e238988b..a6e009da 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@ably/ui", - "version": "14.0.0-dev.3f64b93", + "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",