From 3f64b93a7390ea3227f6e088c2243e7dbfb33752 Mon Sep 17 00:00:00 2001 From: Jamie Henson Date: Fri, 19 Apr 2024 14:38:24 +0100 Subject: [PATCH] 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 f77d20928..e40cdb5a5 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 228919f4b..ec5cf84b1 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.", + }, + }, + }, +};