From 895c40c2a79433feb6123d13afec4397992b9bbe Mon Sep 17 00:00:00 2001
From: Rajat Talesra <rajat@forem.com>
Date: Tue, 11 Oct 2022 12:54:50 +0530
Subject: [PATCH] Updated storybook (#18559)

---
 app/javascript/.storybook/preview.js          |  2 +-
 .../__stories__/Components.stories.mdx        |  4 +--
 .../__stories__/Utility-first-css.stories.mdx | 14 ++++-----
 .../__stories__/Writing-css.stories.mdx       | 29 +++++++++----------
 .../__stories__/introduction.stories.mdx      |  4 +--
 .../__stories__/MediaQuery.stories.mdx        |  2 +-
 6 files changed, 27 insertions(+), 28 deletions(-)

diff --git a/app/javascript/.storybook/preview.js b/app/javascript/.storybook/preview.js
index c1875c3b39b0e..d24b5ae8cff45 100644
--- a/app/javascript/.storybook/preview.js
+++ b/app/javascript/.storybook/preview.js
@@ -1,6 +1,6 @@
 import { h } from 'preact';
 import { addDecorator, addParameters } from '@storybook/preact';
-import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';
+import { DocsPage, DocsContainer } from '@storybook/addon-docs';
 import { jsxDecorator } from 'storybook-addon-jsx';
 import cssVariablesTheme from '@etchteam/storybook-addon-css-variables-theme';
 import 'focus-visible';
diff --git a/app/javascript/crayons/guidelines/__stories__/Components.stories.mdx b/app/javascript/crayons/guidelines/__stories__/Components.stories.mdx
index 25bd9e889b7b0..6395eab897ed2 100644
--- a/app/javascript/crayons/guidelines/__stories__/Components.stories.mdx
+++ b/app/javascript/crayons/guidelines/__stories__/Components.stories.mdx
@@ -1,6 +1,6 @@
 import { h } from 'preact';
 import '../../storybook-utilities/designSystem.scss';
-import { Meta } from '@storybook/addon-docs/blocks';
+import { Meta } from '@storybook/addon-docs';
 
 <Meta title="Component Library" />
 
@@ -53,7 +53,7 @@ The same button above that was created with pure HTML using modifying classes is
 also a Preact component.
 
 ```
-import { Button } from '@crayons'; 
+import { Button } from '@crayons';
 ...
 <Button variant="primary" destructive>Hello<Button>
 ```
diff --git a/app/javascript/crayons/guidelines/__stories__/Utility-first-css.stories.mdx b/app/javascript/crayons/guidelines/__stories__/Utility-first-css.stories.mdx
index a2a092ec4004b..ed5387ee0e2ab 100644
--- a/app/javascript/crayons/guidelines/__stories__/Utility-first-css.stories.mdx
+++ b/app/javascript/crayons/guidelines/__stories__/Utility-first-css.stories.mdx
@@ -1,6 +1,6 @@
 import { h } from 'preact';
 import '../../storybook-utilities/designSystem.scss';
-import { Meta } from '@storybook/addon-docs/blocks';
+import { Meta } from '@storybook/addon-docs';
 
 <Meta title="Utility-First CSS" />
 
@@ -22,12 +22,12 @@ like this:
 This element has several classes applied. Each responsible for different part of
 styling:
 
-|**Utility Class**|True CSS|
-|---|---|
-|**`radius-default`**|`border-radius: 5px;`|
-|**`bg-accent-brand`**|`background-color: #3b49df;`|
-|**`p-6`**|`padding: 24px;`|
-|**`mb-4`**|`margin-bottom: 16px;`|
+| **Utility Class**     | True CSS                     |
+| --------------------- | ---------------------------- |
+| **`radius-default`**  | `border-radius: 5px;`        |
+| **`bg-accent-brand`** | `background-color: #3b49df;` |
+| **`p-6`**             | `padding: 24px;`             |
+| **`mb-4`**            | `margin-bottom: 16px;`       |
 
 Wait, how does `p-6` equate to `24px`? Under the hood, we use lots of
 variables like this:
diff --git a/app/javascript/crayons/guidelines/__stories__/Writing-css.stories.mdx b/app/javascript/crayons/guidelines/__stories__/Writing-css.stories.mdx
index 06820f009af38..01d8527be81b0 100644
--- a/app/javascript/crayons/guidelines/__stories__/Writing-css.stories.mdx
+++ b/app/javascript/crayons/guidelines/__stories__/Writing-css.stories.mdx
@@ -1,6 +1,6 @@
 import { h } from 'preact';
 import '../../storybook-utilities/designSystem.scss';
-import { Meta } from '@storybook/addon-docs/blocks';
+import { Meta } from '@storybook/addon-docs';
 
 <Meta title="Writing CSS" />
 
@@ -47,23 +47,22 @@ helpers as well as breakpoint variables I mentioned earlier.
 
 You can access all of the SCSS files in `app/assets/stylesheets` folder.
 
-|Folder/File|Description|
-|---|---|
-|`/base`| Contains some fundamental styling for layouts, resets and icons.|
-|`/components`| Contains separate SCSS file for each component.
-|—|—|
-|`/config`| Contains many configuration files.
-|`/config/_colors.scss`| Contains all color variables.
-|`/config/_generator.scss`| Contains SCSS mixins generating *all* of our utility classes.
-|`/config/_import.scss`| Contains helpers for SCSS as well as media breakpoints variables.
-|`/config/_variables.scss`| Contains all CSS native variables.
-
+| Folder/File               | Description                                                       |
+| ------------------------- | ----------------------------------------------------------------- |
+| `/base`                   | Contains some fundamental styling for layouts, resets and icons.  |
+| `/components`             | Contains separate SCSS file for each component.                   |
+| —                         | —                                                                 |
+| `/config`                 | Contains many configuration files.                                |
+| `/config/_colors.scss`    | Contains all color variables.                                     |
+| `/config/_generator.scss` | Contains SCSS mixins generating _all_ of our utility classes.     |
+| `/config/_import.scss`    | Contains helpers for SCSS as well as media breakpoints variables. |
+| `/config/_variables.scss` | Contains all CSS native variables.                                |
 
 There are other folders and top level files that we use, but they might be deprecated in the future. They are:
 
 - `crayons.scss` - this is one importing everything Crayons-related like
-    variables, components styling, utility classes etc.
+  variables, components styling, utility classes etc.
 - `views.scss` - this one contains views-specific styling. It is separated
-    from Crayons to make Crayons library DEV agnostic.
+  from Crayons to make Crayons library DEV agnostic.
 - `minimal.scss` - this one is actually one of the main stylesheets from
-    pre-Crayons era. It imports everything basically :).
+  pre-Crayons era. It imports everything basically :).
diff --git a/app/javascript/crayons/guidelines/__stories__/introduction.stories.mdx b/app/javascript/crayons/guidelines/__stories__/introduction.stories.mdx
index 3a87af051afdf..8e47a48c72394 100644
--- a/app/javascript/crayons/guidelines/__stories__/introduction.stories.mdx
+++ b/app/javascript/crayons/guidelines/__stories__/introduction.stories.mdx
@@ -1,6 +1,6 @@
 import { h } from 'preact';
 import '../../storybook-utilities/designSystem.scss';
-import { Meta } from '@storybook/addon-docs/blocks';
+import { Meta } from '@storybook/addon-docs';
 
 <Meta title="Introduction" />
 
@@ -67,4 +67,4 @@ As mentioned earlier, `utility-first CSS classes` let you create even the most
 complex components without writing a single line of CSS. **We recommend choosing
 to write code using utility-first CSS over creating a new SCSS each time.**
 Every additional line of CSS you write translates to more CSS that we have to
-maintain, more CSS for our users to download, and more bytes for us to host.
\ No newline at end of file
+maintain, more CSS for our users to download, and more bytes for us to host.
diff --git a/app/javascript/readingList/components/__stories__/MediaQuery.stories.mdx b/app/javascript/readingList/components/__stories__/MediaQuery.stories.mdx
index 0aec971c2639e..2acd94483593f 100644
--- a/app/javascript/readingList/components/__stories__/MediaQuery.stories.mdx
+++ b/app/javascript/readingList/components/__stories__/MediaQuery.stories.mdx
@@ -1,6 +1,6 @@
 import { h } from 'preact';
 
-import { Meta } from '@storybook/addon-docs/blocks';
+import { Meta } from '@storybook/addon-docs';
 
 <Meta title="Fundamentals/Media Queries" />