docs(storybook): use semantic headings for better seo (#8027)

packages/playground/.storybook/addons/TitleEnhancer.ts

@@ -0,0 +1,33 @@
+import { addons } from '@storybook/manager-api';
+import { CURRENT_STORY_WAS_SET } from '@storybook/core-events';
+
+const ADDON_ID = 'title-enhancer';
+
+addons.register(ADDON_ID, (api) => {
+    const setTitle = () => {
+        const storyData = api.getCurrentStoryData();
+        const getComponentTag = (title: string) => {
+            const componentName = title.split('/').pop();
+            return `ui5-${componentName?.split(' ').join('-').toLowerCase()}`;
+        }
+
+        let keywords = "";
+
+        if (storyData?.tags?.includes('autodocs')) {
+            // autodocs generated per component
+            keywords = `${storyData.title} - ${getComponentTag(storyData.title)}`;
+        } else if (storyData?.tags?.includes('story')) {
+            // stories generated per component
+            keywords = `${storyData.title} - ${getComponentTag(storyData.title)} - ${storyData.name}`;
+        } else if (storyData?.tags?.includes('docs')) {
+            // docs generated out of the md files
+            keywords = `${storyData.title}`;
+        }
+
+        document.title = `${keywords} | UI5 Web Components | Documentation`
+    };
+
+    api.on(CURRENT_STORY_WAS_SET, () => {
+        setTitle();
+    })
+});

packages/playground/.storybook/docs.tsx

@@ -32,7 +32,7 @@ export const DocsPage = (args: DocsPageArgs) => {
                 )}
             </header>
             <div className='sb-ui5-component-package'><b>{args.package}</b></div>
-            <div className='sb-ui5-control-tag'>&lt;{args.component}&gt;</div>
+            <h2 className='sb-ui5-control-tag'>&lt;{args.component}&gt;</h2>
             <Subtitle />
             <Description />
             <br />

packages/playground/.storybook/manager.tsx

@@ -1,6 +1,7 @@
 import { addons } from '@storybook/manager-api';
 import wcTheme from "./sbTheme";
 import './addons/github/Github';
+import './addons/TitleEnhancer';
 
 addons.setConfig({
   theme: wcTheme,

packages/playground/assets/css/api.css

@@ -456,7 +456,7 @@ body {
     padding-bottom: 1rem;
 }
 
-.sb-ui5-control-tag {
+h2.sb-ui5-control-tag {
     margin-bottom: 2rem;
     font-size: 1.1rem;
     font-weight: 300;