♻️(react) migrate to Storybook 7

This new release comes with breaking changes for stories and mdx docs.

packages/react/src/docs/colors.stories.mdx

@@ -26,13 +26,13 @@ You can use custom utility classes to set the background color of an element. Th
 
 You can find all existing classes below.
 
-<Canvas isColumn={true} withSource="none">
+<Canvas sourceState="none">
   {colors.map(color => (
     <div key={color} style={{display: 'flex', gap: '5px'}}>
       {tints.map(tint => (
         <div key={color + tint} style={{display: 'flex', flexDirection: 'column', flexShrink: 0,flexBasis: '120px', alignItems: 'center', flexGrow: 1}}>
           <div style={{width: '72px', height: '48px'}} className={"bg-" + color + "-" + tint}></div>
-          <code className="fs-s mt-st">bg-{color}-{tint}</code>
+          <pre className="fs-s mt-st">bg-{color}-{tint}</pre>
         </div>
       ))}
     </div>
@@ -54,7 +54,7 @@ You can use custom utility classes to set the color attribute of an element. The
 
 You can find all existing classes below.
 
-<Canvas isColumn={true} withSource="none">
+<Canvas sourceState="none">
   {colors.map(color => (
     <div key={color} style={{display: 'flex', gap: '10px'}}>
       {['text', ...tints].map(tint => {
@@ -70,7 +70,7 @@ You can find all existing classes below.
           alignItems: 'center',
           flexGrow: 1
         }}>
-          <code className={classes.join(' ')}>clr-{color}-{tint}</code>
+          <pre className={classes.join(' ')}>clr-{color}-{tint}</pre>
         </div>
       })}
     </div>
@@ -80,16 +80,10 @@ You can find all existing classes below.
 Pay attention the special `{color}-text` variation. Each color must have a text color variation, which is supposed to
 render readable text on top of a -500 background of its own color variation. Please check out the following examples:
 
-<Canvas withSource="open">
-<span className="bg-primary-500 clr-primary-text fw-medium p-t">
-  I'm a text on top of a primary-500 background 👋
-</span>
-<span className="bg-secondary-500 clr-secondary-text fw-medium p-t">
-  I'm a text on top of a secondary-500 background 👋
-</span>
-<span className="bg-danger-500 clr-danger-text fw-medium p-t">
-  I'm a text on top of a danger-500 background 👋
-</span>
+<Canvas sourceState="none">
+<div className="bg-primary-500 clr-primary-text fw-medium p-t">I'm a text on top of a primary-500 background 👋</div>
+<div className="bg-secondary-500 clr-secondary-text fw-medium p-t">I'm a text on top of a secondary-500 background 👋</div>
+<div className="bg-danger-500 clr-danger-text fw-medium p-t">I'm a text on top of a danger-500 background 👋</div>
 </Canvas>
 
 ## Customize

packages/react/src/docs/spacings.stories.mdx

@@ -9,7 +9,7 @@ Cunningham comes with an existing toolkit to deal with spacings. 📏
 
 Here are the existing spacings:
 
-<Canvas isColumn={true} withSource="none">
+<Canvas sourceState="none">
   <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
     {Object.keys(tokens.theme.spacings).map(key => (
       <div key={key} style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
@@ -29,11 +29,11 @@ You can use the following classes to add margins to your elements:
 
 | Class        | Equivalent                 |
 |--------------|----------------------------|
-| m-{spacing}  | `margin: {spacing}`        |
-| mt-{spacing} | `margin-top: {spacing}`    |
-| mr-{spacing} | `margin-right: {spacing}`  |
-| mb-{spacing} | `margin-bottom: {spacing}` |
-| ml-{spacing} | `margin-left: {spacing}`   |
+| m-[spacing]  | `margin: [spacing]`        |
+| mt-[spacing] | `margin-top: [spacing]`    |
+| mr-[spacing] | `margin-right: [spacing]`  |
+| mb-[spacing] | `margin-bottom: [spacing]` |
+| ml-[spacing] | `margin-left: [spacing]`   |
 
 ## Paddings
 
@@ -41,22 +41,18 @@ You can use the following classes to add paddings to your elements:
 
 | Class        | Equivalent                 |
 |--------------|----------------------------|
-| p-{spacing}  | `padding: {spacing}`        |
-| pt-{spacing} | `padding-top: {spacing}`    |
-| pr-{spacing} | `padding-right: {spacing}`  |
-| pb-{spacing} | `padding-bottom: {spacing}` |
-| pl-{spacing} | `padding-left: {spacing}`   |
+| p-[spacing]  | `padding: [spacing]`        |
+| pt-[spacing] | `padding-top: [spacing]`    |
+| pr-[spacing] | `padding-right: [spacing]`  |
+| pb-[spacing] | `padding-bottom: [spacing]` |
+| pl-[spacing] | `padding-left: [spacing]`   |
 
 
 ## Example
 
-<Canvas isColumn={true} withSource="open">
+<Canvas sourceState="shown">
   <div className="bg-danger-100">
-    <div className="bg-primary-500 clr-primary-text fw-medium p-t mb-l">
-      Tiny padding + Large margin bottom
-    </div>
-    <div className="bg-secondary-500 clr-secondary-text fw-medium p-l ml-b">
-      Large padding + Base margin left
-    </div>
-</div>
+    <div className="bg-primary-500 clr-primary-text fw-medium p-t mb-l">Tiny padding + Large margin bottom</div>
+    <div className="bg-secondary-500 clr-secondary-text fw-medium p-l ml-b">Large padding + Base margin left</div>
+  </div>
 </Canvas>

packages/react/src/docs/typo.stories.mdx

@@ -20,10 +20,12 @@ You can use custom utility classes to set the font size of an element. These cla
   `}
 />
 
-<Canvas isColumn={true} withSource="none">
-  {Object.keys(tokens.theme.font.sizes).map(key => (
-    <div key={key} className={"fs-" + key}>Using the <code>fs-{key}</code> class</div>
-  ))}
+<Canvas sourceState="none">
+  <div style={{display: "flex", flexDirection: "column", gap: "20px"}}>
+    {Object.keys(tokens.theme.font.sizes).map(key => (
+      <div key={key} className={"fs-" + key}>Using the <code>fs-{key}</code> class</div>
+    ))}
+  </div>
 </Canvas>
 
 You can customize the values of the font size design tokens with the configuration file this way:
@@ -61,10 +63,12 @@ You can use custom utility classes to set the font weight of an element. These c
   `}
 />
 
-<Canvas isColumn={true} withSource="none">
-  {Object.keys(tokens.theme.font.weights).map(key => (
-    <div key={key} className={"fs-l fw-" + key}>Using the <code>fw-{key}</code> class</div>
-  ))}
+<Canvas sourceState="none">
+  <div style={{display: "flex", flexDirection: "column", gap: "20px"}}>
+    {Object.keys(tokens.theme.font.weights).map(key => (
+      <div key={key} className={"fs-l fw-" + key}>Using the <code>fw-{key}</code> class</div>
+    ))}
+  </div>
 </Canvas>
 
 You can customize the values of the font weight design tokens with the configuration file this way:
@@ -106,10 +110,12 @@ class on every dom element.
   `}
 />
 
-<Canvas isColumn={true} withSource="none">
-  {Object.keys(tokens.theme.font.families).map(key => (
-  <div key={key} className={"f-" + key}>Using the <code>f-{key}</code> class</div>
-  ))}
+<Canvas sourceState="none">
+  <div style={{display: "flex", flexDirection: "column", gap: "20px"}}>
+    {Object.keys(tokens.theme.font.families).map(key => (
+    <div key={key} className={"f-" + key}>Using the <code>f-{key}</code> class</div>
+    ))}
+  </div>
 </Canvas>
 
 You can customize the values of the font family design tokens with the configuration file this way: