Merge pull request #12878 from storybookjs/fix-cli-template-for-react17

CLI: Fix intro MDX for React17
storybookjs · Oct 23, 2020 · 7e5d400 · 7e5d400
2 parents 491047b + cddd8d5
commit 7e5d400
Showing 1 changed file with 27 additions and 14 deletions.
diff --git a/lib/cli/src/frameworks/common/Introduction.stories.mdx b/lib/cli/src/frameworks/common/Introduction.stories.mdx
@@ -123,31 +123,43 @@ Browse example stories now by navigating to them in the sidebar.
 View their code in the `src/storybook-examples` directory to learn how they work.
 We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages.
 
-<div class="subheading">Configure</div>
+<div className="subheading">Configure</div>
 
-<div class="link-list">
-  <a class="link-item" href="https://storybook.js.org/docs/react/api/presets" target="_blank">
+<div className="link-list">
+  <a className="link-item" href="https://storybook.js.org/docs/react/api/presets" target="_blank">
     <img src={Plugin} alt="plugin" />
     <span>
       <strong>Presets for popular tools</strong>
       Easy setup for TypeScript, SCSS and more.
     </span>
   </a>
-  <a class="link-item" href="https://storybook.js.org/docs/react/configure/webpack" target="_blank">
+  <a
+    className="link-item"
+    href="https://storybook.js.org/docs/react/configure/webpack"
+    target="_blank"
+  >
     <img src={StackAlt} alt="Build" />
     <span>
       <strong>Build configuration</strong>
       How to customize webpack and Babel
     </span>
   </a>
-  <a class="link-item" href="https://storybook.js.org/docs/react/configure/styling-and-css" target="_blank">
+  <a
+    className="link-item"
+    href="https://storybook.js.org/docs/react/configure/styling-and-css"
+    target="_blank"
+  >
     <img src={Colors} alt="colors" />
     <span>
       <strong>Styling</strong>
       How to load and configure CSS libraries
     </span>
   </a>
-  <a class="link-item" href="https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack" target="_blank">
+  <a
+    className="link-item"
+    href="https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack"
+    target="_blank"
+  >
     <img src={Flow} alt="flow" />
     <span>
       <strong>Data</strong>
@@ -156,31 +168,31 @@ We recommend building UIs with a [**component-driven**](https://componentdriven.
   </a>
 </div>
 
-<div class="subheading">Learn</div>
+<div className="subheading">Learn</div>
 
-<div class="link-list">
-  <a class="link-item" href="https://storybook.js.org/docs" target="_blank">
+<div className="link-list">
+  <a className="link-item" href="https://storybook.js.org/docs" target="_blank">
     <img src={Repo} alt="repo" />
     <span>
       <strong>Storybook documentation</strong>
       Configure, customize, and extend
     </span>
   </a>
-  <a class="link-item" href="https://www.learnstorybook.com" target="_blank">
+  <a className="link-item" href="https://www.learnstorybook.com" target="_blank">
     <img src={Direction} alt="direction" />
     <span>
       <strong>In-depth guides</strong>
       Best practices from leading teams
     </span>
   </a>
-  <a class="link-item" href="https://github.com/storybookjs/storybook" target="_blank">
+  <a className="link-item" href="https://github.com/storybookjs/storybook" target="_blank">
     <img src={Code} alt="code" />
     <span>
       <strong>GitHub project</strong>
       View the source and add issues
     </span>
   </a>
-  <a class="link-item" href="https://discord.gg/UUt2PJb" target="_blank">
+  <a className="link-item" href="https://discord.gg/UUt2PJb" target="_blank">
     <img src={Comments} alt="comments" />
     <span>
       <strong>Discord chat</strong>
@@ -189,6 +201,7 @@ We recommend building UIs with a [**component-driven**](https://componentdriven.
   </a>
 </div>
 
-<div class="tip-wrapper">
-  <span class="tip">Tip</span>Edit the Markdown in <code>src/storybook-examples/welcome.mdx</code>
+<div className="tip-wrapper">
+  <span className="tip">Tip</span>Edit the Markdown in{' '}
+  <code>src/storybook-examples/welcome.mdx</code>
 </div>