Skip to content

Commit

Permalink
fix: allow style overriding for Expander
Browse files Browse the repository at this point in the history
  • Loading branch information
@jamiehenson
jamiehenson committed Apr 19, 2024
1 parent 2d0b122 commit 3f64b93
Show file tree
Hide file tree
Showing 2 changed files with 82 additions and 60 deletions.
12 changes: 10 additions & 2 deletions src/core/Expander.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<ExpanderProps>) => {
const innerRef = useRef<HTMLDivElement>(null);
Expand All @@ -22,10 +26,14 @@ const Expander = ({
<>
<div
style={{ height: expanded ? contentHeight : height }}
className="overflow-hidden transition-all relative"
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"></div>
<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>
Expand Down
130 changes: 72 additions & 58 deletions src/core/Expander/Expander.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,65 +17,60 @@ export default {
},
};

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>
<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>
</Expander>
),
render: () => <Expander>{longContentInner}</Expander>,
parameters: {
docs: {
description: {
Expand Down Expand Up @@ -116,3 +111,22 @@ export const ShortContent = {
},
},
};

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

0 comments on commit 3f64b93

Please sign in to comment.