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

src/components/section/SectionHeader/SectionHeader.stories.mdx

@@ -1,13 +1,14 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
 import { SectionHeader } from './SectionHeader'
+import { Button } from "../../button";
 
 <Meta title="Components/Section/SectionHeader" component={SectionHeader} />
 
 # 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" />

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>
   )
 }