From 0b9ed01fb124c850ca20131788ce7551ea19fb3e Mon Sep 17 00:00:00 2001
From: SirCotare <sircotare@3025-game.de>
Date: Tue, 29 Oct 2024 12:31:36 +0100
Subject: [PATCH] Ab 219 support right components in sectionheader (#322)

* allow for a right element in section header

* add story for right header

* fix import order

* apply review feedback
---
 .../SectionHeader/SectionHeader.stories.mdx   | 23 +++++++++++++++++--
 .../section/SectionHeader/SectionHeader.tsx   | 13 +++++++++--
 2 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/src/components/section/SectionHeader/SectionHeader.stories.mdx b/src/components/section/SectionHeader/SectionHeader.stories.mdx
index cdfcc316..b64eb569 100644
--- a/src/components/section/SectionHeader/SectionHeader.stories.mdx
+++ b/src/components/section/SectionHeader/SectionHeader.stories.mdx
@@ -1,5 +1,6 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
 import { SectionHeader } from './SectionHeader'
+import { Button } from "../../button";
 
 <Meta title="Components/Section/SectionHeader" component={SectionHeader} />
 
@@ -7,7 +8,7 @@ import { SectionHeader } from './SectionHeader'
 
 This component can be used to create a section header swiftly.
 
-It leverages the components [SectionHeaderArea](/docs/components-section-sectionheaderara--docs) and [SectionHeaderTitle](/docs/components-section-sectionheadertitle--docs).
+It leverages the components [SectionHeaderArea](/docs/components-section-sectionheaderara--docs), [SectionHeaderRow](/docs/components-section-sectionheaderrow--docs) and [SectionHeaderTitle](/docs/components-section-sectionheadertitle--docs).
 
 export const Template = ({ ...args }) => <SectionHeader {...args} />
 
@@ -17,6 +18,24 @@ export const Template = ({ ...args }) => <SectionHeader {...args} />
   </Story>
 </Canvas>
 
+<Canvas>
+  <Story name="With right element" args={{ title: 'Header Title', rightArea: <Button>Right</Button> }}>
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<Canvas>
+  <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>
+
 ### Props
 
-<ArgsTable story="Default" />
+<ArgsTable story="With right element" />
diff --git a/src/components/section/SectionHeader/SectionHeader.tsx b/src/components/section/SectionHeader/SectionHeader.tsx
index 08d363dc..11aef68c 100644
--- a/src/components/section/SectionHeader/SectionHeader.tsx
+++ b/src/components/section/SectionHeader/SectionHeader.tsx
@@ -1,16 +1,25 @@
 import { ReactNode } from 'react'
 import { SectionHeaderArea } from './SectionHeaderArea'
+import { SectionHeaderRow, SectionHeaderRowLayout } from './SectionHeaderRow'
 import { SectionHeaderTitle } from './SectionHeaderTitle'
 
 export type SectionHeaderProps = {
   title: ReactNode
   className?: string
+  rightArea?: ReactNode
 }
 
-export function SectionHeader({ className, title }: SectionHeaderProps) {
+export function SectionHeader({
+  className,
+  title,
+  rightArea,
+}: SectionHeaderProps) {
   return (
     <SectionHeaderArea className={className}>
-      <SectionHeaderTitle>{title}</SectionHeaderTitle>
+      <SectionHeaderRow layout={SectionHeaderRowLayout.SpaceBetween}>
+        <SectionHeaderTitle>{title}</SectionHeaderTitle>
+        <div>{rightArea}</div>
+      </SectionHeaderRow>
     </SectionHeaderArea>
   )
 }