From b5c6c887761caf1306045704993fe2d932001bef Mon Sep 17 00:00:00 2001
From: Andreas Hufler <andreas.hufler@aboutbits.it>
Date: Wed, 23 Oct 2024 08:43:49 +0200
Subject: [PATCH] apply review feedback

---
 .../section/SectionHeader/SectionHeader.stories.mdx    | 10 ++++++++--
 src/components/section/SectionHeader/SectionHeader.tsx | 10 +++++++---
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/components/section/SectionHeader/SectionHeader.stories.mdx b/src/components/section/SectionHeader/SectionHeader.stories.mdx
index 630a41f3..b64eb569 100644
--- a/src/components/section/SectionHeader/SectionHeader.stories.mdx
+++ b/src/components/section/SectionHeader/SectionHeader.stories.mdx
@@ -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>
diff --git a/src/components/section/SectionHeader/SectionHeader.tsx b/src/components/section/SectionHeader/SectionHeader.tsx
index f9359d80..11aef68c 100644
--- a/src/components/section/SectionHeader/SectionHeader.tsx
+++ b/src/components/section/SectionHeader/SectionHeader.tsx
@@ -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>
   )