feat(doc): add Canvas tag to all components & disable shortcuts

Signed-off-by: aurore.stagnol <[email protected]>
ovh · Feb 1, 2024 · 22e47ab · 22e47ab
1 parent c0c7bef
commit 22e47ab
Show file tree

Hide file tree

Showing 249 changed files with 2,097 additions and 1,249 deletions.
diff --git a/...mponents/src/accordion/documentation/usage-guidelines/accordion-group/usage.mdx b/...mponents/src/accordion/documentation/usage-guidelines/accordion-group/usage.mdx
@@ -1,13 +1,13 @@
 import GenericStyle from '@ovhcloud/ods-common-core/docs/generic-style.mdx';
-import { Preview } from '@storybook/addon-docs/blocks';
+import { Canvas } from '@storybook/addon-docs';
 
 <GenericStyle />
 
 ## Usage
 
 ### Default
 
-<Preview withSource="none">
+<Canvas withSource="none">
   <osds-accordion-group>
     <osds-accordion>
       <span slot="summary">
@@ -26,7 +26,7 @@ import { Preview } from '@storybook/addon-docs/blocks';
       Nulla mollis tortor sed pretium mollis.
     </osds-accordion>
   </osds-accordion-group>
-</Preview>
+</Canvas >
 
 ```html
 <osds-accordion-group>

diff --git a/...ordion/documentation/usage-guidelines/accordion/properties/usage.contrasted.mdx b/...ordion/documentation/usage-guidelines/accordion/properties/usage.contrasted.mdx
@@ -1,6 +1,6 @@
-import { Preview } from '@storybook/addon-docs/blocks';
+import { Canvas } from '@storybook/addon-docs';
 
-<Preview withSource="none">
+<Canvas withSource="none">
   <osds-accordion contrasted>
     <span slot="summary">
       Lorem ipsum
@@ -9,7 +9,7 @@ import { Preview } from '@storybook/addon-docs/blocks';
     Fusce et nisi quis tellus porttitor pharetra facilisis id arcu.
     Nulla mollis tortor sed pretium mollis.
   </osds-accordion>
-</Preview>
+</Canvas >
 
 ```html
 <osds-accordion contrasted>

diff --git a/...ccordion/documentation/usage-guidelines/accordion/properties/usage.disabled.mdx b/...ccordion/documentation/usage-guidelines/accordion/properties/usage.disabled.mdx
@@ -1,6 +1,6 @@
-import { Preview } from '@storybook/addon-docs/blocks';
+import { Canvas } from '@storybook/addon-docs';
 
-<Preview withSource="none">
+<Canvas withSource="none">
   <osds-accordion disabled>
     <span slot="summary">
       Lorem ipsum
@@ -10,7 +10,7 @@ import { Preview } from '@storybook/addon-docs/blocks';
     quis, mattis quis metus. Vestibulum at elit porta, tincidunt diam in, mattis mauris. Duis tincidunt ut mauris a
     faucibus. Nulla sodales lacus et nibh euismod, vel pellentesque justo condimentum.
   </osds-accordion>
-</Preview>
+</Canvas >
 
 ```html
 

diff --git a/.../accordion/documentation/usage-guidelines/accordion/properties/usage.opened.mdx b/.../accordion/documentation/usage-guidelines/accordion/properties/usage.opened.mdx
@@ -1,6 +1,6 @@
-import { Preview } from '@storybook/addon-docs/blocks';
+import { Canvas } from '@storybook/addon-docs';
 
-<Preview withSource="none">
+<Canvas withSource="none">
   <osds-accordion opened>
     <span slot='summary'>
       Lorem ipsum
@@ -10,7 +10,7 @@ import { Preview } from '@storybook/addon-docs/blocks';
     quis, mattis quis metus. Vestibulum at elit porta, tincidunt diam in, mattis mauris. Duis tincidunt ut mauris a
     faucibus. Nulla sodales lacus et nibh euismod, vel pellentesque justo condimentum.
   </osds-accordion>
-</Preview>
+</Canvas >
 
 ```html
 

diff --git a/...nts/src/accordion/documentation/usage-guidelines/accordion/slots/usage.slot.mdx b/...nts/src/accordion/documentation/usage-guidelines/accordion/slots/usage.slot.mdx
@@ -1,11 +1,11 @@
-import { Preview } from '@storybook/addon-docs/blocks';
+import { Canvas } from '@storybook/addon-docs';
 
 #### Summary
-<Preview withSource="none">
+<Canvas withSource="none">
   <osds-accordion>
     <span slot='summary'>Summary</span>
   </osds-accordion>
-</Preview>
+</Canvas >
 
 ```html
 <osds-accordion>

diff --git a/...ges/components/src/accordion/documentation/usage-guidelines/accordion/usage.mdx b/...ges/components/src/accordion/documentation/usage-guidelines/accordion/usage.mdx
@@ -3,15 +3,15 @@ import DisabledProperty from './properties/usage.disabled.mdx';
 import OpenedProperty from './properties/usage.opened.mdx';
 import Slot from './slots/usage.slot.mdx';
 import GenericStyle from '@ovhcloud/ods-common-core/docs/generic-style.mdx';
-import { Preview } from '@storybook/addon-docs/blocks';
+import { Canvas } from '@storybook/addon-docs';
 
 <GenericStyle />
 
 ## Usage
 
 ### Default
 
-<Preview withSource="none">
+<Canvas withSource="none">
   <osds-accordion>
     <span slot='summary'>
       Lorem ipsum
@@ -20,7 +20,7 @@ import { Preview } from '@storybook/addon-docs/blocks';
     Fusce et nisi quis tellus porttitor pharetra facilisis id arcu.
     Nulla mollis tortor sed pretium mollis.
   </osds-accordion>
-</Preview>
+</Canvas >
 
 ```html
 <osds-accordion>

diff --git a/...mb/documentation/usage-guidelines/properties/breadcrumb-item/usage.disabled.mdx b/...mb/documentation/usage-guidelines/properties/breadcrumb-item/usage.disabled.mdx
@@ -1,3 +1,5 @@
+import { Canvas } from '@storybook/addon-docs';
+
 You can `disabled` some items, but you cannot disable the entire `breadcrumb`.
 
 export const displayBreadcrumbItem = () => {
@@ -12,7 +14,10 @@ export const displayBreadcrumbItem = () => {
     }, 0);
 };
 
-<osds-breadcrumb id="disabled-breadcrumb-item"></osds-breadcrumb>
+<Canvas withSource="none">
+  <osds-breadcrumb id="disabled-breadcrumb-item"></osds-breadcrumb>
+</Canvas >
+
 <>{ displayBreadcrumbItem() }</>
 
 ```html

diff --git a/...crumb/documentation/usage-guidelines/properties/breadcrumb/usage.contrasted.mdx b/...crumb/documentation/usage-guidelines/properties/breadcrumb/usage.contrasted.mdx
@@ -1,3 +1,5 @@
+import { Canvas } from '@storybook/addon-docs';
+
 export const displayContrastedBreadcrumb = () => {
     setTimeout(() => {
         const contrastedBreadcrumbUsage = document.querySelector('#contrasted-breadcrumb');
@@ -10,9 +12,10 @@ export const displayContrastedBreadcrumb = () => {
     }, 0);
 };
 
-<div class='contrasted'>
-  <osds-breadcrumb id="contrasted-breadcrumb" contrasted></osds-breadcrumb>
-</div>
+<Canvas withSource="none" className='contrasted'>
+    <osds-breadcrumb id="contrasted-breadcrumb" contrasted></osds-breadcrumb>
+</Canvas >
+
 <>{ displayContrastedBreadcrumb() }</>
 
 ```html

diff --git a/packages/components/src/breadcrumb/documentation/usage-guidelines/usage.mdx b/packages/components/src/breadcrumb/documentation/usage-guidelines/usage.mdx
@@ -1,14 +1,14 @@
 import ContrastedProperty from './properties/breadcrumb/usage.contrasted.mdx';
 import DisabledProperty from './properties/breadcrumb-item/usage.disabled.mdx';
 import GenericStyle from '@ovhcloud/ods-common-core/docs/generic-style.mdx';
+import { Canvas } from '@storybook/addon-docs';
 
 <GenericStyle />
 
 ## Usage
 
 ## Breadcrumb
 ### Default
-
 export const displayBreadcrumb = () => {
     setTimeout(() => {
         const defaultBreadcrumbUsage = document.querySelector('#default-breadcrumb');
@@ -21,7 +21,10 @@ export const displayBreadcrumb = () => {
     }, 0);
 };
 
-<osds-breadcrumb id="default-breadcrumb"></osds-breadcrumb>
+<Canvas withSource="none">
+  <osds-breadcrumb id="default-breadcrumb"></osds-breadcrumb>
+</Canvas >
+
 <>{ displayBreadcrumb() }</>
 
 ```html
@@ -54,7 +57,10 @@ export const displayCollapseBreadcrumb = () => {
     }, 0);
 };
 
-<osds-breadcrumb id="collapse-breadcrumb"></osds-breadcrumb>
+<Canvas withSource="none">
+  <osds-breadcrumb id="collapse-breadcrumb"></osds-breadcrumb>
+</Canvas >
+
 <>{ displayCollapseBreadcrumb() }</>
 
 ```html
@@ -88,7 +94,10 @@ export const displayIconBreadcrumbItem = () => {
     }, 0);
 };
 
-<osds-breadcrumb id="icon-breadcrumb-item"></osds-breadcrumb>
+<Canvas withSource="none">
+  <osds-breadcrumb id="icon-breadcrumb-item"></osds-breadcrumb>
+</Canvas >
+
 <>{ displayIconBreadcrumbItem() }</>
 
 ```html

diff --git a/...omponents/src/button/documentation/usage-guidelines/properties/usage.circle.mdx b/...omponents/src/button/documentation/usage-guidelines/properties/usage.circle.mdx
@@ -1,9 +1,11 @@
-<div class='container'>
+import { Canvas } from '@storybook/addon-docs';
+
+<Canvas withSource="none">
   <osds-button size='sm' circle>Small</osds-button>
   <osds-button circle>Default</osds-button>
   <osds-button circle><osds-icon name='ellipsis-vertical' contrasted></osds-icon></osds-button>
   <osds-button circle><osds-icon name='ellipsis-vertical' contrasted size='xs'></osds-icon></osds-button>
-</div>
+</Canvas >
 
 ```html
 <osds-button size='sm' circle>Small</osds-button>

diff --git a/...components/src/button/documentation/usage-guidelines/properties/usage.color.mdx b/...components/src/button/documentation/usage-guidelines/properties/usage.color.mdx
@@ -1,12 +1,14 @@
-<div class="container">
-  <osds-button>Default</osds-button>
-  <osds-button color='primary'>Primary</osds-button>
-  <osds-button color='error'>Error</osds-button>
-</div>
+import { Canvas } from '@storybook/addon-docs';
+
+<Canvas withSource="none">
+  <osds-button inline>Default</osds-button>
+  <osds-button inline color='primary'>Primary</osds-button>
+  <osds-button inline color='error'>Error</osds-button>
+</Canvas >
 
 ```html
-<osds-button>Default</osds-button>
-<osds-button color='primary'>Primary</osds-button>
-<osds-button color='error'>Error</osds-button>
+<osds-button inline>Default</osds-button>
+<osds-button inline color='primary'>Primary</osds-button>
+<osds-button inline color='error'>Error</osds-button>
 ```
 
diff --git a/...nents/src/button/documentation/usage-guidelines/properties/usage.contrasted.mdx b/...nents/src/button/documentation/usage-guidelines/properties/usage.contrasted.mdx
@@ -1,6 +1,8 @@
-<div class='contrasted'>
+import { Canvas } from '@storybook/addon-docs';
+
+<Canvas withSource="none" className="contrasted">
   <osds-button inline contrasted>Contrasted</osds-button>
-</div>
+</Canvas >
 
 ```html
 <osds-button inline contrasted>Contrasted</osds-button>

diff --git a/...ponents/src/button/documentation/usage-guidelines/properties/usage.disabled.mdx b/...ponents/src/button/documentation/usage-guidelines/properties/usage.disabled.mdx
@@ -1,10 +1,12 @@
-<div class="container">
+import { Canvas } from '@storybook/addon-docs';
+
+<Canvas withSource="none">
   <osds-button size='sm' disabled>Small</osds-button>
   <osds-button disabled>Default</osds-button>
   <osds-button variant='ghost' disabled>Ghost</osds-button>
   <osds-button variant='flat' disabled>Flat</osds-button>
   <osds-button variant='stroked' disabled>Stroked</osds-button>
-</div>
+</Canvas >
 
 ```html
 <osds-button size='sm' disabled>Small</osds-button>

diff --git a/...omponents/src/button/documentation/usage-guidelines/properties/usage.inline.mdx b/...omponents/src/button/documentation/usage-guidelines/properties/usage.inline.mdx
@@ -1,4 +1,8 @@
-<osds-button inline>Inline</osds-button>
+import { Canvas } from '@storybook/addon-docs';
+
+<Canvas withSource="none">
+  <osds-button inline>Inline</osds-button>
+</Canvas >
 
 ```html
 <osds-button inline>Inline</osds-button>

diff --git a/.../components/src/button/documentation/usage-guidelines/properties/usage.size.mdx b/.../components/src/button/documentation/usage-guidelines/properties/usage.size.mdx
@@ -1,8 +1,10 @@
-<div class="container">
+import { Canvas } from '@storybook/addon-docs';
+
+<Canvas withSource="none">
   <osds-button>Default</osds-button>
   <osds-button size='sm'>Small</osds-button>
   <osds-button size='md'>Medium</osds-button>
-</div>
+</Canvas >
 
 ```html
 <osds-button>Default</osds-button>

diff --git a/...nents/src/button/documentation/usage-guidelines/properties/usage.text-align.mdx b/...nents/src/button/documentation/usage-guidelines/properties/usage.text-align.mdx
@@ -1,6 +1,10 @@
-<osds-button text-align='center'>Center</osds-button>
-<osds-button text-align='start'>Start</osds-button>
-<osds-button text-align='end'>End</osds-button>
+import { Canvas } from '@storybook/addon-docs';
+
+<Canvas withSource="none">
+  <osds-button text-align='center'>Center</osds-button>
+  <osds-button text-align='start'>Start</osds-button>
+  <osds-button text-align='end'>End</osds-button>
+</Canvas >
 
 ```html
 <osds-button text-align='center'>Center</osds-button>

diff --git a/...mponents/src/button/documentation/usage-guidelines/properties/usage.variant.mdx b/...mponents/src/button/documentation/usage-guidelines/properties/usage.variant.mdx
@@ -1,11 +1,13 @@
-<div class="container">
-  <osds-button variant='flat'>Flat</osds-button>
-  <osds-button variant='stroked'>Stroked</osds-button>
-  <osds-button variant='ghost'>Ghost</osds-button>
-</div>
+import { Canvas } from '@storybook/addon-docs';
+
+<Canvas withSource="none">
+  <osds-button inline variant='flat'>Flat</osds-button>
+  <osds-button inline variant='stroked'>Stroked</osds-button>
+  <osds-button inline variant='ghost'>Ghost</osds-button>
+</Canvas >
 
 ```html
-<osds-button variant='flat'>Flat</osds-button>
-<osds-button variant='stroked'>Stroked</osds-button>
-<osds-button variant='ghost'>Ghost</osds-button>
+<osds-button inline variant='flat'>Flat</osds-button>
+<osds-button inline variant='stroked'>Stroked</osds-button>
+<osds-button inline variant='ghost'>Ghost</osds-button>
 ```
diff --git a/packages/components/src/button/documentation/usage-guidelines/slots/usage.slot.mdx b/packages/components/src/button/documentation/usage-guidelines/slots/usage.slot.mdx
@@ -1,14 +1,12 @@
-import { Preview } from '@storybook/addon-docs/blocks';
+import { Canvas } from '@storybook/addon-docs';
 
 #### Start
-<Preview withSource="none">
-  <div class="container">
-    <osds-button>
-      <span slot='start'>Start</span>
-      MainContent
-    </osds-button>
-  </div>
-</Preview>
+<Canvas withSource="none">
+  <osds-button>
+    <span slot='start'>Start</span>
+    MainContent
+  </osds-button>
+</Canvas >
 
 ```html
 <osds-button>
@@ -18,14 +16,12 @@ import { Preview } from '@storybook/addon-docs/blocks';
 ```
 
 #### End
-<Preview withSource="none">
-  <div class="container">
-    <osds-button>
-      MainContent
-      <span slot='end'>End</span>
-    </osds-button>
-  </div>
-</Preview>
+<Canvas withSource="none">
+  <osds-button>
+    MainContent
+    <span slot='end'>End</span>
+  </osds-button>
+</Canvas >
 
 ```html
 <osds-button>
@@ -35,15 +31,13 @@ import { Preview } from '@storybook/addon-docs/blocks';
 ```
 
 #### Start and end
-<Preview withSource="none">
-  <div class="container">
-    <osds-button>
-      <span slot='start'>Start</span>
-      MainContent
-      <span slot='end'>End</span>
-    </osds-button>
-  </div>
-</Preview>
+<Canvas withSource="none">
+  <osds-button>
+    <span slot='start'>Start</span>
+    MainContent
+    <span slot='end'>End</span>
+  </osds-button>
+</Canvas >
 
 ```html
 <osds-button>