add ShellBarBranding example

Author: Lukas742

packages/main/src/webComponents/ShellBar/ShellBar.mdx

@@ -5,6 +5,7 @@ import { ArgTypes, Canvas, Description, Markdown, Meta } from '@storybook/blocks
 import { ShellBarItem } from '../ShellBarItem/index';
 import { ShellBarSpacer } from '../ShellBarSpacer/index';
 import { ShellBarSearch } from '../ShellBarSearch/index';
+import { ShellBarBranding } from '../ShellBarBranding/index';
 import * as ComponentStories from './ShellBar.stories';
 import { excludePropsForAbstract } from '@sb/utils';
 
@@ -87,6 +88,10 @@ const ShellBarComponent = () => {
 };
 ```
 
+### ShellBar with ShellBarBranding slot
+
+<Canvas of={ComponentStories.ShellBarBrandingStory} />
+
 <Markdown>{SubcomponentsSection}</Markdown>
 
 ## ShellBarItem
@@ -104,4 +109,9 @@ const ShellBarComponent = () => {
 <Description of={ShellBarSearch} />
 <ArgTypes hideHTMLPropsNote of={ShellBarSearch} />
 
+## ShellBarBranding (experimental)
+
+<Description of={ShellBarBranding} />
+<ArgTypes hideHTMLPropsNote of={ShellBarBranding} />
+
 <Footer />

packages/main/src/webComponents/ShellBar/ShellBar.stories.tsx

@@ -7,6 +7,7 @@ import { FlexBox } from '../../components/FlexBox/index.js';
 import { Button } from '../Button/index.js';
 import { Avatar, ShellBarItem, ShellBarSpacer } from '../index.js';
 import { Label } from '../Label/index.js';
+import { ShellBarBranding } from '../ShellBarBranding/index.js';
 import { ShellBarSearch } from '../ShellBarSearch/index.js';
 import { Switch } from '../Switch/index.js';
 import { Tag } from '../Tag/index.js';
@@ -146,3 +147,24 @@ export const NonProductiveInstances: Story = {
     );
   },
 };
+
+export const ShellBarBrandingStory: Story = {
+  name: 'with ShellBarBranding',
+  args: {
+    branding: (
+      <ShellBarBranding
+        logo={<img src="https://sap.github.io/ui5-webcomponents/images/sap-logo-svg.svg" alt="SAP Logo" />}
+        href="https://sap.github.io/ui5-webcomponents-react/v2/?path=/docs/layouts-floorplans-shellbar--docs"
+        target="_blank"
+        onClick={(e) => {
+          console.log('ShellBarBranding clicked', e);
+        }}
+      >
+        ShellBar Branding
+      </ShellBarBranding>
+    ),
+  },
+  render(args) {
+    return <ShellBar {...args} />;
+  },
+};