Skip to content

Commit

Permalink
apply review feedback
Browse files Browse the repository at this point in the history
  • Loading branch information
SirCotare committed Oct 23, 2024
1 parent 8cdc4a4 commit b5c6c88
Show file tree
Hide file tree
Showing 2 changed files with 15 additions and 5 deletions.
10 changes: 8 additions & 2 deletions src/components/section/SectionHeader/SectionHeader.stories.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -19,13 +19,19 @@ export const Template = ({ ...args }) => <SectionHeader {...args} />
</Canvas>

<Canvas>
<Story name="With right element" args={{ title: 'Header Title', right: <Button>Right</Button> }}>
<Story name="With right element" args={{ title: 'Header Title', rightArea: <Button>Right</Button> }}>
{Template.bind({})}
</Story>
</Canvas>

<Canvas>
<Story name="Long title with right element" args={{ title: 'Very Long Title: lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet', right: <Button>Right</Button> }}>
<Story name="With multiple right elements" args={{ title: 'Header Title', rightArea: <><Button>Right 1</Button><Button>Right 2</Button></> }}>
{Template.bind({})}
</Story>
</Canvas>

<Canvas>
<Story name="Long title with right element" args={{ title: 'Very Long Title: lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet', rightArea: <Button>Right</Button> }}>
{Template.bind({})}
</Story>
</Canvas>
Expand Down
10 changes: 7 additions & 3 deletions src/components/section/SectionHeader/SectionHeader.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,19 @@ import { SectionHeaderTitle } from './SectionHeaderTitle'
export type SectionHeaderProps = {
title: ReactNode
className?: string
right?: ReactNode
rightArea?: ReactNode
}

export function SectionHeader({ className, title, right }: SectionHeaderProps) {
export function SectionHeader({
className,
title,
rightArea,
}: SectionHeaderProps) {
return (
<SectionHeaderArea className={className}>
<SectionHeaderRow layout={SectionHeaderRowLayout.SpaceBetween}>
<SectionHeaderTitle>{title}</SectionHeaderTitle>
{right}
<div>{rightArea}</div>
</SectionHeaderRow>
</SectionHeaderArea>
)
Expand Down

0 comments on commit b5c6c88

Please sign in to comment.