feat(storybook): upgrade to storybook v8

Signed-off-by: aurore.stagnol <[email protected]>

packages/ods/scripts/generate-typedoc-md.js

@@ -60,16 +60,7 @@ function convertJsonToMarkdown(jsonItems) {
   const hasEvents = classes.events.length;
   const hasEnums = enums.length;
 
-  const tableOfContents = [
-    '## Table of Contents',
-    hasProps ? '[• Properties](#properties)\n' : '',
-    hasMethods ? '[• Methods](#methods)\n' : '',
-    hasEvents ? '[• Events](#events)\n' : '',
-    hasEnums ? '[• Enums](#enums)\n' : '',
-  ];
-
   return [
-    ...tableOfContents,
     hasProps ? '## Properties' : '', ...classes.props,
     hasMethods ? '## Methods' : '', ...classes.methods,
     hasEvents ? '## Events' : '', ...classes.events,
@@ -143,7 +134,7 @@ function getEnums(jsonItems) {
     .filter(({ kind }) => kind === ReflectionKind.Enum)
     .flatMap((enumDefinition) => {
       const children = enumDefinition.children.map(({ name, type }) => `• **${name}** = \`"${type?.value}"\`\n`);
-      return `## Enumeration: ${enumDefinition.name}\n\n${children.join('\n')}\n`
+      return `### Enumeration: ${enumDefinition.name}\n\n${children.join('\n')}\n`
     });
 }
 

packages/ods/src/components/icon/documentation/overview-icon.mdx

@@ -0,0 +1,16 @@
+import { Canvas } from '@storybook/blocks';
+
+Icon is a visual context used to represent a command, navigation, status or common action:
+
+<Canvas>
+  <div style={{ height: '300px', display: 'inline-flex'}}>
+    <ods-icon></ods-icon>
+  </div>
+</Canvas>
+
+<div>
+  <a href="#"
+     target="_blank">
+    ZEROHEIGHT - ICON DESIGN GUIDELINES &nbsp;
+  </a>
+</div>

packages/ods/src/components/icon/documentation/specifications/spec.md

@@ -1,10 +1,3 @@
-## Table of Contents
-[• Properties](#properties)
-
-
-
-[• Enums](#enums)
-
 ## Properties
 ### alt
 
@@ -19,13 +12,9 @@
 
 
 ## Enums
-## Enumeration: ODS_ICON_NAME
-
-### arrowLeft
+### Enumeration: ODS_ICON_NAME
 
 • **arrowLeft** = `"arrow-left"`
 
-### warning
-
 • **warning** = `"warning"`
 

packages/ods/src/components/skeleton/documentation/overview-skeleton.mdx

@@ -0,0 +1,16 @@
+import { Canvas } from '@storybook/blocks'
+
+Skeleton component indicates that data is loading. It improves the perceived loading time for the user.
+
+<Canvas>
+  <div style={{ height: '300px', display: 'inline-flex'}}>
+    <ods-skeleton></ods-skeleton>
+  </div>
+</Canvas>
+
+<div>
+  <a href="#"
+     target="_blank">
+    ZEROHEIGHT - SKELETON DESIGN GUIDELINES &nbsp;
+  </a>
+</div>

packages/ods/src/components/skeleton/documentation/specifications/spec.md

@@ -1,8 +1,3 @@
-## Table of Contents
-
-
-
-
 
 
 

packages/ods/src/components/skeleton/documentation/style-customization-skeleton.mdx

@@ -0,0 +1,12 @@
+You can add your own style on the text element using the part `skeleton`.
+
+```html
+<ods-skeleton class="my-skeleton">
+</ods-skeleton>
+<style>
+  .my-skeleton::part(skeleton) {
+    height: 2rem;
+    width: 10rem;
+  }
+</style>
+```

packages/ods/src/components/skeleton/documentation/usage-guidelines/usage.mdx

@@ -1,8 +1,6 @@
-import { Canvas } from '@storybook/addon-docs';
+import { Canvas } from '@storybook/blocks';
 
-## Usage
-
-### Default
+## Default
 
 <Canvas sourceState="none">
   <ods-skeleton></ods-skeleton>
@@ -11,18 +9,3 @@ import { Canvas } from '@storybook/addon-docs';
 ```html
 <ods-skeleton></ods-skeleton>
 ```
-
-### Custom CSS
-
-You can add your own style on the text element using the part `skeleton`.
-
-```html
-<ods-skeleton class="my-skeleton">
-</ods-skeleton>
-<style>
-  .my-skeleton::part(skeleton) {
-    height: 2em;
-    width: 10em;
-  }
-</style>
-```

packages/ods/src/components/spinner/documentation/overview-spinner.mdx

@@ -0,0 +1,17 @@
+import { Canvas } from '@storybook/blocks';
+
+A visual indicator that a process is happening in the background but the interface is not yet ready for interaction:
+
+<Canvas>
+  <div style={{ height: '300px', display: 'inline-flex'}}>
+    <ods-spinner></ods-spinner>
+  </div>
+</Canvas>
+
+<div>
+  <osds-button color="primary" variant="ghost" href="https://zeroheight.com/6fc8a63f7/p/9017bb-spinner/b/40a887" target="_blank">
+    ZEROHEIGHT - SPINNER DESIGN GUIDELINES  
+
+    <osds-icon name="external-link" color="primary" size="xs" />
+  </osds-button>
+</div>

packages/ods/src/components/spinner/documentation/specifications/spec.md

@@ -1,10 +1,3 @@
-## Table of Contents
-[• Properties](#properties)
-
-
-
-[• Enums](#enums)
-
 ## Properties
 ### color
 
@@ -19,32 +12,20 @@
 
 
 ## Enums
-## Enumeration: ODS_SPINNER_COLOR
-
-### neutral
+### Enumeration: ODS_SPINNER_COLOR
 
 • **neutral** = `"neutral"`
 
-### primary
-
 • **primary** = `"primary"`
 
-### white
-
 • **white** = `"white"`
 
 
-## Enumeration: ODS_SPINNER_SIZE
-
-### lg
+### Enumeration: ODS_SPINNER_SIZE
 
 • **lg** = `"lg"`
 
-### md
-
 • **md** = `"md"`
 
-### sm
-
 • **sm** = `"sm"`
 

packages/ods/src/components/spinner/documentation/specifications/specifications-spinner.mdx → packages/ods/src/components/spinner/documentation/style-customization-spinner.mdx

@@ -1,19 +1,11 @@
-import { Markdown } from '@storybook/addon-docs';
-import Specs from './spec.md';
-
-<Markdown>{ Specs }</Markdown>
-
-## Style customization
-
 You can add your own style on the spinner element using the part `spinner`.
 
 Example:
 ```html
+<ods-spinner class="my-spinner"></ods-spinner>
 <style>
   .my-spinner::part(spinner) {
     height: 100px;
   }
 </style>
-
-<ods-spinner class="my-spinner"></ods-spinner>
 ```

packages/ods/src/components/spinner/documentation/usage-guidelines/properties/usage.color.mdx

@@ -1,4 +1,4 @@
-import { Canvas } from '@storybook/addon-docs';
+import { Canvas } from '@storybook/blocks';
 
 <Canvas sourceState="none">
   <ods-spinner color="primary"></ods-spinner>

packages/ods/src/components/spinner/documentation/usage-guidelines/properties/usage.size.mdx

@@ -1,4 +1,4 @@
-import { Canvas } from '@storybook/addon-docs';
+import { Canvas } from '@storybook/blocks';
 
 <Canvas sourceState="none">
   <ods-spinner size='sm'></ods-spinner>

packages/ods/src/components/spinner/documentation/usage-guidelines/usage.mdx

@@ -1,9 +1,7 @@
-import { Canvas } from '@storybook/addon-docs';
+import { Canvas } from '@storybook/blocks';
 import ColorProperty from './properties/usage.color.mdx';
 import SizeProperty from './properties/usage.size.mdx';
 
-## Usage
-
 ### Default
 
 <Canvas sourceState="none">

packages/ods/src/components/text/documentation/migration.from.17.x.mdx

@@ -1,9 +1,13 @@
 ## Attributes changes
 
 `size` <img src="https://img.shields.io/badge/removed-FF0000" />
+
 `color` <img src="https://img.shields.io/badge/removed-FF0000" />
+
 `level` <img src="https://img.shields.io/badge/removed-FF0000" />
+
 `contrasted` <img src="https://img.shields.io/badge/removed-FF0000" />
+
 `breakSpaces` <img src="https://img.shields.io/badge/removed-FF0000" />
 
 Have been removed

packages/ods/src/components/text/documentation/overview-text.mdx

@@ -0,0 +1,16 @@
+import { Canvas } from '@storybook/blocks'
+
+The text component is used to display text with a specific font & style.
+
+<Canvas>
+  <div style={{ height: '300px', display: 'inline-flex'}}>
+    <ods-text>lorem ipsum</ods-text>
+  </div>
+</Canvas>
+
+<div>
+<osds-button color="primary" variant="ghost" href="https://zeroheight.com/6fc8a63f7/p/5546ea-text/b/40a887" target="_blank">
+    ZEROHEIGHT - TEXT DESIGN GUIDELINES &nbsp;
+    <osds-text name="external-link" color="primary" size="xs"></osds-text>
+  </osds-button>
+</div>

packages/ods/src/components/text/documentation/specifications/spec.md

@@ -1,10 +1,3 @@
-## Table of Contents
-[• Properties](#properties)
-
-
-
-[• Enums](#enums)
-
 ## Properties
 ### preset
 
@@ -14,7 +7,7 @@
 
 
 ## Enums
-## Enumeration: ODS_TEXT_PRESET
+### Enumeration: ODS_TEXT_PRESET
 
 • **caption** = `"caption"`
 

packages/ods/src/components/text/documentation/style-customization-text.mdx

@@ -0,0 +1,13 @@
+You can add your own style on the text element using the part `text`.
+
+```html
+<ods-text class="my-text">
+  test
+</ods-text>
+
+<style>
+  .my-text::part(text) {
+    color: #008000;
+  }
+</style>
+```

packages/ods/src/components/text/documentation/usage-guidelines/usage.mdx

@@ -1,33 +1,15 @@
 import { Canvas } from '@storybook/addon-docs';
 import PresetProperty from './properties/usage.preset.mdx';
 
-## Usage
-
-### Default
+## Default
 
 <Canvas sourceState="none">
   <ods-text>lorem ipsum</ods-text>
 </Canvas>
 
 ```html
-<ods-text></ods-text>
+<ods-text>lorem ipsum</ods-text>
 ```
 
-### Preset
+## Preset
 <PresetProperty />
-
-### CSS Customisation
-
-You can add your own style on the text element using the part `text`.
-
-```html
-<ods-text class="my-text">
-  test
-</ods-text>
-
-<style>
-  .my-text::part(text) {
-    color: green;
-  }
-</style>
-```