-
Notifications
You must be signed in to change notification settings - Fork 23
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: Create a reusable component for expandable section #2903
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,74 @@ | ||
import { render, screen } from '@testing-library/react' | ||
import userEvent from '@testing-library/user-event' | ||
import React, { ReactNode, useState } from 'react' | ||
|
||
import { ExpandableSection } from 'ui/ExpandableSection' | ||
|
||
interface TestExpandableSectionProps { | ||
title: string | ||
children: ReactNode | ||
} | ||
|
||
const TestExpandableSection: React.FC<TestExpandableSectionProps> = ({ | ||
title, | ||
children, | ||
}) => { | ||
const [isExpanded, setIsExpanded] = useState(false) | ||
|
||
return ( | ||
<ExpandableSection> | ||
<ExpandableSection.Trigger | ||
isExpanded={isExpanded} | ||
onClick={() => setIsExpanded(!isExpanded)} | ||
> | ||
{title} | ||
</ExpandableSection.Trigger> | ||
<ExpandableSection.Content>{children}</ExpandableSection.Content> | ||
</ExpandableSection> | ||
) | ||
} | ||
|
||
describe('ExpandableSection', () => { | ||
it('renders the title correctly', () => { | ||
const title = 'Test Title' | ||
render( | ||
<TestExpandableSection title={title}> | ||
<div>Content</div> | ||
</TestExpandableSection> | ||
) | ||
const titleElement = screen.getByText(title) | ||
expect(titleElement).toBeInTheDocument() | ||
}) | ||
|
||
it('renders the children correctly after expanding', async () => { | ||
render( | ||
<TestExpandableSection title="Test Title"> | ||
<div>Test Content</div> | ||
</TestExpandableSection> | ||
) | ||
|
||
const button = screen.getByRole('button') | ||
await userEvent.click(button) | ||
|
||
const contentElement = screen.getByText('Test Content') | ||
expect(contentElement).toBeInTheDocument() | ||
}) | ||
|
||
it('collapses the children after clicking the button twice', async () => { | ||
render( | ||
<TestExpandableSection title="Test Title"> | ||
Test Content | ||
</TestExpandableSection> | ||
) | ||
|
||
const button = screen.getByRole('button') | ||
|
||
await userEvent.click(button) | ||
const contentElement = screen.getByText('Test Content') | ||
expect(contentElement).toBeInTheDocument() | ||
|
||
await userEvent.click(button) | ||
const contentElementAfterCollapse = screen.queryByText('Test Content') | ||
expect(contentElementAfterCollapse).not.toBeInTheDocument() | ||
}) | ||
}) |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,60 @@ | ||
import { Meta, StoryObj } from '@storybook/react' | ||
import React, { useState } from 'react' | ||
|
||
import { ExpandableSection } from './ExpandableSection' | ||
|
||
const meta: Meta<typeof ExpandableSection> = { | ||
title: 'Components/ExpandableSection', | ||
component: ExpandableSection, | ||
} | ||
export default meta | ||
|
||
type Story = StoryObj<typeof ExpandableSection> | ||
|
||
const DefaultStory: React.FC = () => { | ||
const [isExpanded, setIsExpanded] = useState(false) | ||
return ( | ||
<ExpandableSection> | ||
<ExpandableSection.Trigger | ||
isExpanded={isExpanded} | ||
onClick={() => setIsExpanded(!isExpanded)} | ||
> | ||
Expandable Section | ||
</ExpandableSection.Trigger> | ||
<ExpandableSection.Content> | ||
This is the content of the expandable section. | ||
</ExpandableSection.Content> | ||
</ExpandableSection> | ||
) | ||
} | ||
|
||
const WithHtmlContentStory: React.FC = () => { | ||
const [isExpanded, setIsExpanded] = useState(false) | ||
return ( | ||
<ExpandableSection> | ||
<ExpandableSection.Trigger | ||
isExpanded={isExpanded} | ||
onClick={() => setIsExpanded(!isExpanded)} | ||
> | ||
Expandable Section with HTML | ||
</ExpandableSection.Trigger> | ||
<ExpandableSection.Content> | ||
<div> | ||
<p>This is the content of the expandable section.</p> | ||
<p> | ||
It can contain HTML elements like <strong>bold text</strong> and{' '} | ||
<em>italic text</em>. | ||
</p> | ||
</div> | ||
</ExpandableSection.Content> | ||
</ExpandableSection> | ||
) | ||
} | ||
|
||
export const Default: Story = { | ||
render: () => <DefaultStory />, | ||
} | ||
|
||
export const WithHtmlContent: Story = { | ||
render: () => <WithHtmlContentStory />, | ||
} |
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This seems very similar to the There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. There's also a couple of components that Spencer has also done up already in the newer style that you can also reference. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,67 @@ | ||
import * as Collapsible from '@radix-ui/react-collapsible' | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. You'll probably need to install this as a dependency as with Radix you install the different primitives individually, as they're packaged individually. |
||
import React, { forwardRef, ReactNode } from 'react' | ||
|
||
import { cn } from 'shared/utils/cn' | ||
import Icon from 'ui/Icon' | ||
|
||
const ExpandableSectionRoot = forwardRef< | ||
React.ElementRef<typeof Collapsible.Root>, | ||
React.ComponentPropsWithoutRef<typeof Collapsible.Root> | ||
>(({ children, className, ...props }, ref) => ( | ||
<Collapsible.Root | ||
className={cn('my-2 border border-gray-200', className)} | ||
{...props} | ||
ref={ref} | ||
> | ||
{children} | ||
</Collapsible.Root> | ||
)) | ||
|
||
ExpandableSectionRoot.displayName = 'ExpandableSectionRoot' | ||
|
||
interface ExpandableSectionTriggerProps | ||
extends React.ComponentPropsWithoutRef<typeof Collapsible.Trigger> { | ||
isExpanded: boolean | ||
children: ReactNode | ||
} | ||
|
||
const ExpandableSectionTrigger = forwardRef< | ||
React.ElementRef<typeof Collapsible.Trigger>, | ||
ExpandableSectionTriggerProps | ||
>(({ isExpanded, className, children, ...props }, ref) => ( | ||
<Collapsible.Trigger asChild> | ||
<button | ||
className={cn( | ||
'flex w-full items-center justify-between p-4 text-left font-semibold hover:bg-gray-100', | ||
className | ||
)} | ||
{...props} | ||
ref={ref} | ||
> | ||
<span>{children}</span> | ||
<Icon name={isExpanded ? 'chevronUp' : 'chevronDown'} size="sm" /> | ||
</button> | ||
</Collapsible.Trigger> | ||
)) | ||
|
||
ExpandableSectionTrigger.displayName = 'ExpandableSectionTrigger' | ||
|
||
const ExpandableSectionContent = forwardRef< | ||
React.ElementRef<typeof Collapsible.Content>, | ||
React.ComponentPropsWithoutRef<typeof Collapsible.Content> | ||
>(({ children, className, ...props }, ref) => ( | ||
<Collapsible.Content | ||
className={cn('border-t border-gray-200 p-4', className)} | ||
{...props} | ||
ref={ref} | ||
> | ||
{children} | ||
</Collapsible.Content> | ||
)) | ||
|
||
ExpandableSectionContent.displayName = 'ExpandableSectionContent' | ||
|
||
export const ExpandableSection = Object.assign(ExpandableSectionRoot, { | ||
Trigger: ExpandableSectionTrigger, | ||
Content: ExpandableSectionContent, | ||
}) |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export { ExpandableSection } from './ExpandableSection' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think
ExpandableSection.Content
should functionally be a div, so could probably remove thisdiv
here. Doesn't really matter though