docs: add table of content to stories (#944)

Author: Lukas742

.storybook/preview-head.html

@@ -1,24 +1,30 @@
 <style>
-    body {
-        font-family: var(--sapFontFamily);
-        background-color: var(--sapBackgroundColor);
-    }
+  body {
+    font-family: var(--sapFontFamily);
+    background-color: var(--sapBackgroundColor);
+  }
 
-    .pageWithPadding > section {
-        padding: 1rem;
-    }
+  .pageWithPadding > section {
+    padding: 1rem;
+  }
 
-    .sbdocs-title {
-        font-family: var(--sapFontFamily) !important;
+  @media (min-width: 1330px) and (max-width: 1520px) {
+    .sbdocs-wrapper {
+      justify-content: flex-start !important;
     }
+  }
 
-    .sbdocs-content {
-        max-width: 1400px !important;
-    }
+  .sbdocs-title {
+    font-family: var(--sapFontFamily) !important;
+  }
+
+  .sbdocs-content {
+    max-width: 1100px !important;
+  }
 </style>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.11.1/tocbot.css" />
 <script data-ui5-config type="application/json">
-    {
-        "theme": "sap_fiori_3"
-    }
+  {
+    "theme": "sap_fiori_3"
+  }
 </script>
-

package.json

@@ -35,7 +35,8 @@
     "@ui5/webcomponents-icons": "1.0.0-rc.9",
     "react": "17.0.1",
     "react-dom": "17.0.1",
-    "react-syntax-highlighter": "^15.2.1"
+    "react-syntax-highlighter": "^15.2.1",
+    "tocbot": "^4.12.0"
   },
   "devDependencies": {
     "@babel/core": "^7.12.3",

packages/charts/src/components/MicroBarChart/MicroBarChart.stories.mdx

@@ -34,6 +34,10 @@ import { DocsHeader } from '@shared/stories/DocsHeader';
 
 <DocsHeader />
 
+<br />
+
+## Example
+
 <Canvas>
   <Story name="Default">
     {(args) => (
@@ -52,6 +56,8 @@ import { DocsHeader } from '@shared/stories/DocsHeader';
   </Story>
 </Canvas>
 
+## Properties
+
 <ArgsTable story="." />
 
 <Canvas>

packages/main/scripts/create-web-components-wrapper.mjs

@@ -589,6 +589,10 @@ const createWebComponentDemo = (componentSpec, componentProps, description) => {
     />
 
     <DocsHeader />
+    
+    <br />
+    
+    ## Example
 
     <Canvas>
       <Story name="Default">
@@ -599,7 +603,9 @@ const createWebComponentDemo = (componentSpec, componentProps, description) => {
         }}
       </Story>
     </Canvas>
-
+    
+    ## Properties
+    
     <ArgsTable story="." />
     
     `,

packages/main/src/components/ActionSheet/ActionSheet.stories.mdx

@@ -7,6 +7,7 @@ import { PopoverHorizontalAlign } from '@ui5/webcomponents-react/lib/PopoverHori
 import { PopoverVerticalAlign } from '@ui5/webcomponents-react/lib/PopoverVerticalAlign';
 import { useCallback, useRef } from 'react';
 import { DocsHeader } from '@shared/stories/DocsHeader';
+import { DocsCommonProps } from '@shared/stories/DocsCommonProps';
 
 <Meta
   title="Components / ActionSheet"
@@ -26,9 +27,7 @@ import { DocsHeader } from '@shared/stories/DocsHeader';
     header: {
       type: null
     },
-    ref: {
-      type: null
-    }
+    ...DocsCommonProps
   }}
   args={{
     horizontalAlign: PopoverHorizontalAlign.Center,
@@ -64,6 +63,10 @@ const ActionSheetComponent = () => {
 };
 ```
 
+<br />
+
+## Example
+
 <Canvas>
   <Story name="Default">
     {(args) => {
@@ -88,9 +91,11 @@ const ActionSheetComponent = () => {
   </Story>
 </Canvas>
 
+## Properties
+
 <ArgsTable story="." />
 
-### Using ActionSheets inside other components
+## Using ActionSheets inside other components
 
 `ActionSheets` are often used within other components, when opened this could sometimes have unwanted side effects.
 In this case, we recommend using [createPortal](https://reactjs.org/docs/portals.html) to mount the `ActionSheet` outside of the DOM hierarchy of the parent component.

packages/main/src/components/AnalyticalCard/AnalyticalCard.stories.mdx

@@ -30,6 +30,10 @@ import { DocsCommonProps } from '@shared/stories/DocsCommonProps';
 
 **Note:** The `AnalyticalCard` was mainly made to display KPIs and complex data. If you want to implement a simple card, the `Card` component probably is more suitable.
 
+<br />
+
+## Example
+
 <Canvas>
   <Story name="Default">
     {(args) => {
@@ -88,6 +92,8 @@ import { DocsCommonProps } from '@shared/stories/DocsCommonProps';
   </Story>
 </Canvas>
 
+## Properties
+
 <ArgsTable story="Default" />
 
 <br />

packages/main/src/components/AnalyticalTable/AnalyticalTable.stories.mdx

@@ -125,10 +125,16 @@ import { useEffect, useRef, useState } from 'react';
 
 <DocsHeader />
 
+<br />
+
+## Example
+
 <Canvas>
   <Story name="Default">{(args) => <AnalyticalTable {...args} />}</Story>
 </Canvas>
 
+## Properties
+
 <ArgsTable story="." />
 
 ## Column Properties

packages/main/src/components/Bar/Bar.stories.mdx

@@ -31,6 +31,10 @@ import { GitHubLogo } from '../../../../../shared/stories/GitHub-Mark';
 
 <DocsHeader />
 
+<br />
+
+## Example
+
 <Canvas>
   <Story name="Default">
     {(args) => {
@@ -39,6 +43,8 @@ import { GitHubLogo } from '../../../../../shared/stories/GitHub-Mark';
   </Story>
 </Canvas>
 
+## Properties
+
 <ArgsTable story="." />
 
 <br />

packages/main/src/components/Breadcrumbs/Breadcrumbs.stories.mdx

@@ -27,6 +27,10 @@ import { DocsCommonProps } from '@shared/stories/DocsCommonProps';
 
 <DocsHeader />
 
+<br />
+
+## Example
+
 <Canvas>
   <Story name="Default">
     {(args) => {
@@ -42,4 +46,6 @@ import { DocsCommonProps } from '@shared/stories/DocsCommonProps';
   </Story>
 </Canvas>
 
+## Properties
+
 <ArgsTable story="." />

packages/main/src/components/DynamicPage/DynamicPage.stories.mdx

@@ -48,6 +48,10 @@ import { useState } from 'react';
 
 <DocsHeader />
 
+<br />
+
+## Example
+
 <Canvas>
   <Story name="Default">
     {(args) => (
@@ -108,11 +112,13 @@ import { useState } from 'react';
   </Story>
 </Canvas>
 
+## Properties
+
 <ArgsTable story="." />
 
-## Stories
+# Stories
 
-### Always show Header Content
+## Always show Header Content
 
 <Canvas>
   <Story name="Always show header content">
@@ -177,7 +183,7 @@ import { useState } from 'react';
   </Story>
 </Canvas>
 
-### Variant Management as Title
+## Variant Management as Title
 
 <Canvas>
   <Story name="With Variants">