From 341d31a37ea19e60dce8012f79a406fc886e49b6 Mon Sep 17 00:00:00 2001
From: jonniebigodes <joaocontadesenvolvimento@gmail.com>
Date: Thu, 6 May 2021 21:05:56 +0100
Subject: [PATCH] Minor fixes to the common and react snippets

---
 .../common/addon-consume-and-update-globaltype.js.mdx  |  2 +-
 docs/snippets/common/addon-consume-globaltype.js.mdx   |  2 +-
 docs/snippets/common/args-usage-with-addons.js.mdx     |  2 +-
 .../snippets/common/badge-story-custom-argtypes.js.mdx |  1 -
 .../common/badge-story-custom-argtypes.mdx.mdx         |  2 +-
 .../common/badge-story-starter-example.mdx.mdx         |  2 +-
 docs/snippets/common/badge-story.mdx.mdx               |  6 +++---
 .../common/button-group-story-subcomponents.js.mdx     |  2 +-
 .../common/button-group-story-subcomponents.ts.mdx     |  2 +-
 .../common/button-story-action-event-handle.js.mdx     |  2 +-
 .../common/button-story-action-event-handle.mdx.mdx    |  2 +-
 .../button-story-argtypes-with-categories.js.mdx       | 10 +++++-----
 .../button-story-argtypes-with-subcategories.js.mdx    | 10 +++++-----
 .../button-story-controls-primary-variant.mdx.mdx      |  2 +-
 .../common/button-story-controls-radio-group.mdx.mdx   |  2 +-
 .../button-story-disable-docspage-component.js.mdx     |  2 +-
 .../snippets/common/button-story-docs-code-type.js.mdx |  3 +--
 .../common/button-story-hide-nocontrols-warning.js.mdx |  2 +-
 docs/snippets/common/button-story-hoisted.js.mdx       |  2 +-
 .../common/button-story-matching-argtypes.mdx.mdx      |  2 +-
 .../common/button-story-onclick-action-argtype.mdx.mdx |  2 +-
 .../snippets/common/button-story-remix-docspage.js.mdx |  2 +-
 .../snippets/common/button-story-remix-docspage.ts.mdx |  2 +-
 docs/snippets/common/checkbox-story-csf.js.mdx         |  2 +-
 .../common/checkbox-story-starter-example.mdx.mdx      |  2 +-
 docs/snippets/common/checkbox-story.mdx.mdx            |  3 +--
 .../component-story-csf-argstable-customization.js.mdx |  6 +++---
 .../common/component-story-csf-description.js.mdx      |  6 +++---
 .../common/component-story-custom-args-mapping.js.mdx  |  8 ++++----
 .../common/component-story-custom-source.js.mdx        |  2 +-
 .../component-story-disable-controls-regex.js.mdx      |  2 +-
 .../component-story-disable-controls-regex.mdx.mdx     |  1 +
 .../common/component-story-dynamic-title.js.mdx        |  1 +
 .../common/component-story-mdx-argstable-block.mdx.mdx |  1 +
 .../common/component-story-mdx-argtypes.mdx.mdx        |  3 +--
 .../component-story-mdx-decorators-params.mdx.mdx      |  1 -
 .../snippets/common/component-story-mdx-dedent.mdx.mdx |  2 +-
 .../common/component-story-mdx-description.mdx.mdx     |  2 ++
 docs/snippets/common/component-story-mdx-embed.mdx.mdx |  1 -
 .../common/component-story-mdx-story-by-name.mdx.mdx   |  4 ++--
 .../common/component-story-sort-controls.mdx.mdx       |  1 +
 .../common/gizmo-story-controls-customization.js.mdx   |  2 +-
 .../common/gizmo-story-controls-customization.mdx.mdx  |  2 +-
 docs/snippets/common/isomorphic-fetch-mock.js.mdx      |  2 +-
 .../common/mdx-canvas-multiple-stories.mdx.mdx         |  2 +-
 .../common/my-addon-initial-panel-state.js.mdx         |  2 ++
 .../common/my-addon-preset-implementation.js.mdx       |  2 +-
 .../common/my-addon-storybook-registration.js.mdx      |  2 +-
 ...-component-story-mdx-with-decorators-params.mdx.mdx |  1 +
 .../common/my-component-story-use-globaltype.js.mdx    |  2 +-
 .../common/my-component-story-use-globaltype.mdx.mdx   |  2 +-
 .../common/my-component-with-story-content.mdx.mdx     |  3 ++-
 docs/snippets/common/other-foo-bar-story.js.mdx        |  2 +-
 .../storybook-addon-backgrounds-configure-grid.js.mdx  |  2 +-
 .../storybook-addon-backgrounds-disable-grid.js.mdx    |  2 +-
 .../common/storybook-addon-panel-example.js.mdx        |  5 ++++-
 .../common/storybook-addon-panel-initial.js.mdx        |  2 ++
 .../snippets/common/storybook-addon-tab-example.js.mdx |  3 ++-
 .../common/storybook-addon-toolbar-example.js.mdx      |  4 +++-
 .../common/storybook-addons-api-usechannel.js.mdx      |  1 +
 docs/snippets/common/storybook-client-preview.ts.mdx   |  3 +++
 docs/snippets/common/storybook-config-layout.js.mdx    |  2 +-
 .../common/storybook-generated-argtypes.js.mdx         |  2 +-
 .../common/storybook-main-addon-registration.js.mdx    |  2 +-
 .../common/storybook-main-default-setup.js.mdx         |  2 +-
 docs/snippets/common/storybook-main-js-md-files.js.mdx |  1 -
 .../snippets/common/storybook-main-preview-head.js.mdx |  2 +-
 .../common/storybook-main-ref-per-environment.js.mdx   |  2 +-
 docs/snippets/common/storybook-main-ref-remote.js.mdx  |  2 +-
 ...storybook-main-register-presets-managerentry.js.mdx |  4 ++--
 .../common/storybook-main-webpack-preset-config.js.mdx |  6 +++---
 .../common/storybook-main-with-mock-decorator.js.mdx   |  2 +-
 .../common/storybook-manager-custom-theme.js.mdx       |  2 +-
 .../common/storybook-manager-disable-roots.js.mdx      |  3 ++-
 docs/snippets/common/storybook-merged-argtypes.js.mdx  |  2 +-
 .../common/storybook-preset-full-config-object.js.mdx  |  4 ++--
 .../common/storybook-preview-change-viewports.js.mdx   |  2 +-
 ...torybook-preview-configure-background-colors.js.mdx |  2 +-
 .../storybook-preview-configure-globaltypes.js.mdx     |  6 +++---
 .../common/storybook-preview-disable-docspage.js.mdx   |  2 +-
 .../common/storybook-preview-head-example.html.mdx     |  6 ++++--
 .../common/storybook-preview-use-global-type.js.mdx    |  2 +-
 .../storybook-preview-viewport-use-new-devices.js.mdx  |  1 -
 ...book-preview-with-ordered-pages-and-wildcard.js.mdx |  2 +-
 .../common/storybook-preview-with-ordered-pages.js.mdx |  2 +-
 docs/snippets/common/storybook-start-dev-server.ts.mdx |  1 +
 .../snippets/common/storybook-storyshots-config.js.mdx |  2 +-
 .../storybook-storyshots-custom-directory.js.mdx       |  4 ++--
 .../common/storybook-theme-example-variables.ts.mdx    |  2 +-
 docs/snippets/common/your-theme.js.mdx                 |  2 +-
 docs/snippets/react/app-story-with-mock.js.mdx         |  2 +-
 .../react/component-story-custom-args-complex.js.mdx   |  4 ++--
 .../react/component-story-custom-args-complex.mdx.mdx  |  4 ++--
 .../react/component-story-custom-args-complex.ts.mdx   |  4 ++--
 .../react/component-story-static-asset-cdn.js.mdx      |  2 +-
 .../my-component-story-configure-viewports.js.mdx      |  2 +-
 .../react/my-component-with-env-variables.mdx.mdx      |  2 +-
 docs/snippets/react/page-story-slots.js.mdx            |  2 +-
 .../react/page-story-with-args-composition.js.mdx      |  6 +++---
 .../react/page-story-with-args-composition.ts.mdx      |  6 +++---
 100 files changed, 143 insertions(+), 125 deletions(-)

diff --git a/docs/snippets/common/addon-consume-and-update-globaltype.js.mdx b/docs/snippets/common/addon-consume-and-update-globaltype.js.mdx
index aace7784617..96a8a5a57b1 100644
--- a/docs/snippets/common/addon-consume-and-update-globaltype.js.mdx
+++ b/docs/snippets/common/addon-consume-and-update-globaltype.js.mdx
@@ -38,4 +38,4 @@ const ExampleToolbar = () => {
     </IconButton>
   );
 };
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/common/addon-consume-globaltype.js.mdx b/docs/snippets/common/addon-consume-globaltype.js.mdx
index 4fffdb1f77e..196a5fdb1b9 100644
--- a/docs/snippets/common/addon-consume-globaltype.js.mdx
+++ b/docs/snippets/common/addon-consume-globaltype.js.mdx
@@ -22,4 +22,4 @@ const ThemePanel = props => {
     </AddonPanel>
   );
 };
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/common/args-usage-with-addons.js.mdx b/docs/snippets/common/args-usage-with-addons.js.mdx
index 7c7aec6b917..7c1ccf730ef 100644
--- a/docs/snippets/common/args-usage-with-addons.js.mdx
+++ b/docs/snippets/common/args-usage-with-addons.js.mdx
@@ -13,4 +13,4 @@ resetArgs((argNames: ['key']));
 
 // To reset all args
 resetArgs();
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/common/badge-story-custom-argtypes.js.mdx b/docs/snippets/common/badge-story-custom-argtypes.js.mdx
index 35f33f921f9..614f4ca42be 100644
--- a/docs/snippets/common/badge-story-custom-argtypes.js.mdx
+++ b/docs/snippets/common/badge-story-custom-argtypes.js.mdx
@@ -43,5 +43,4 @@ export default {
     }
   }
 };
-
 ```
\ No newline at end of file
diff --git a/docs/snippets/common/badge-story-custom-argtypes.mdx.mdx b/docs/snippets/common/badge-story-custom-argtypes.mdx.mdx
index 313380098e9..c8d55b0e4e4 100644
--- a/docs/snippets/common/badge-story-custom-argtypes.mdx.mdx
+++ b/docs/snippets/common/badge-story-custom-argtypes.mdx.mdx
@@ -54,4 +54,4 @@ Let's define a story for our `Badge` component
 <ArgsTable of={Badge} />
 
 <!-- remainder story implementation -->
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/common/badge-story-starter-example.mdx.mdx b/docs/snippets/common/badge-story-starter-example.mdx.mdx
index b84e3ddb8d8..d6dd56d6fd5 100644
--- a/docs/snippets/common/badge-story-starter-example.mdx.mdx
+++ b/docs/snippets/common/badge-story-starter-example.mdx.mdx
@@ -46,4 +46,4 @@ with unique URLs and isolated snapshot tests.
     </Badge>
   </Story>
 </Canvas>
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/common/badge-story.mdx.mdx b/docs/snippets/common/badge-story.mdx.mdx
index 5e94b02f7d4..6eae02c5232 100644
--- a/docs/snippets/common/badge-story.mdx.mdx
+++ b/docs/snippets/common/badge-story.mdx.mdx
@@ -35,8 +35,8 @@ We can drop it in a `Canvas` to get a code snippet:
 </Canvas>
 
 We can even preview multiple Stories in a block. This
-gets rendered as a group, but defines individual stories
-with unique URLs which is great for review and testing.
+gets rendered as a group but defines individual stories
+with unique URLs, which is great for review and testing.
 
 <Canvas>
   <Story name="warning" args={{
@@ -64,4 +64,4 @@ with unique URLs which is great for review and testing.
     {Template.bind({})}
   </Story>
 </Canvas>
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/common/button-group-story-subcomponents.js.mdx b/docs/snippets/common/button-group-story-subcomponents.js.mdx
index f96e2b5032b..1522fe77d83 100644
--- a/docs/snippets/common/button-group-story-subcomponents.js.mdx
+++ b/docs/snippets/common/button-group-story-subcomponents.js.mdx
@@ -8,4 +8,4 @@ export default {
   component: ButtonGroup,
   subcomponents: { Button },
 };
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/common/button-group-story-subcomponents.ts.mdx b/docs/snippets/common/button-group-story-subcomponents.ts.mdx
index bb6d0e82ae5..53da77dce0a 100644
--- a/docs/snippets/common/button-group-story-subcomponents.ts.mdx
+++ b/docs/snippets/common/button-group-story-subcomponents.ts.mdx
@@ -10,4 +10,4 @@ export default {
   component: ButtonGroup,
   subcomponents: { Button },
 } as Meta;
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/common/button-story-action-event-handle.js.mdx b/docs/snippets/common/button-story-action-event-handle.js.mdx
index 8df243ad1b2..f40b1655e1c 100644
--- a/docs/snippets/common/button-story-action-event-handle.js.mdx
+++ b/docs/snippets/common/button-story-action-event-handle.js.mdx
@@ -9,4 +9,4 @@ export default {
     },
   },
 };
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/common/button-story-action-event-handle.mdx.mdx b/docs/snippets/common/button-story-action-event-handle.mdx.mdx
index b89e79cbbbc..9f32a7ae8ae 100644
--- a/docs/snippets/common/button-story-action-event-handle.mdx.mdx
+++ b/docs/snippets/common/button-story-action-event-handle.mdx.mdx
@@ -6,4 +6,4 @@
     handles: ['mouseover', 'click .btn'],
   },
 }} />
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/common/button-story-argtypes-with-categories.js.mdx b/docs/snippets/common/button-story-argtypes-with-categories.js.mdx
index 9ae85666eff..716aec51d73 100644
--- a/docs/snippets/common/button-story-argtypes-with-categories.js.mdx
+++ b/docs/snippets/common/button-story-argtypes-with-categories.js.mdx
@@ -5,7 +5,7 @@ export default {
   title: 'Button',
   component: Button,
   argTypes: {
-    // assigns the argTypes to the Colors category
+    // Assigns the argTypes to the Colors category
     backgroundColor: {
       control: 'color',
       table: {
@@ -17,19 +17,19 @@ export default {
         category: 'Colors'
       }
     },
-    // assigns the argType to the Text category
+    // Assigns the argType to the Text category
     label: {
       table: {
         category: 'Text'
       }
     },
-    // assigns the argType to the Events category
+    // Assigns the argType to the Events category
     onClick: {
       table: {
         category: 'Events'
       }
     },
-    // assigns the argType to the Sizes category
+    // Assigns the argType to the Sizes category
     size: {
       table: {
         category: 'Sizes'
@@ -37,4 +37,4 @@ export default {
     }
   }
 };
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/common/button-story-argtypes-with-subcategories.js.mdx b/docs/snippets/common/button-story-argtypes-with-subcategories.js.mdx
index 34a9956f9a7..9bba6a87297 100644
--- a/docs/snippets/common/button-story-argtypes-with-subcategories.js.mdx
+++ b/docs/snippets/common/button-story-argtypes-with-subcategories.js.mdx
@@ -5,12 +5,12 @@ export default {
   title: 'Button',
   component: Button,
   argTypes: {
-    // assigns the argTypes to the Colors category
+    // Assigns the argTypes to the Colors category
     backgroundColor: {
       control: 'color',
       table: {
         category: 'Colors',
-        // assigns the argTypes to a specific subcategory
+        // Assigns the argTypes to a specific subcategory
         subcategory: 'Button colors'
       }
     },
@@ -26,14 +26,14 @@ export default {
         subcategory: 'Button contents'
       }
     },
-    // assigns the argType to the Events category
+    // Assigns the argType to the Events category
     onClick: {
       table: {
         category: 'Events',
         subcategory: 'Button Events'
       }
     },
-    // assigns the argType to the Sizes category
+    // Assigns the argType to the Sizes category
     size: {
       table: {
         category: 'Sizes'
@@ -41,4 +41,4 @@ export default {
     }
   }
 };
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/common/button-story-controls-primary-variant.mdx.mdx b/docs/snippets/common/button-story-controls-primary-variant.mdx.mdx
index 5af19f3de39..f3816fa04ff 100644
--- a/docs/snippets/common/button-story-controls-primary-variant.mdx.mdx
+++ b/docs/snippets/common/button-story-controls-primary-variant.mdx.mdx
@@ -4,4 +4,4 @@
 <Story name="Primary" args={{ variant: 'primary' }}>
   {Template.bind({})}
 </Story>
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/common/button-story-controls-radio-group.mdx.mdx b/docs/snippets/common/button-story-controls-radio-group.mdx.mdx
index 1347eea0c14..7eec0c86082 100644
--- a/docs/snippets/common/button-story-controls-radio-group.mdx.mdx
+++ b/docs/snippets/common/button-story-controls-radio-group.mdx.mdx
@@ -13,4 +13,4 @@
     }
   }}
 />
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/common/button-story-disable-docspage-component.js.mdx b/docs/snippets/common/button-story-disable-docspage-component.js.mdx
index 680796d77ec..08d0f98ad4f 100644
--- a/docs/snippets/common/button-story-disable-docspage-component.js.mdx
+++ b/docs/snippets/common/button-story-disable-docspage-component.js.mdx
@@ -15,4 +15,4 @@ export default {
     } 
   },
 };
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/common/button-story-docs-code-type.js.mdx b/docs/snippets/common/button-story-docs-code-type.js.mdx
index d9031f67826..10357521bce 100644
--- a/docs/snippets/common/button-story-docs-code-type.js.mdx
+++ b/docs/snippets/common/button-story-docs-code-type.js.mdx
@@ -16,6 +16,5 @@ export default {
   }
 };
 
-// remainder story implementation
-
+// Remainder story implementation
 ```
\ No newline at end of file
diff --git a/docs/snippets/common/button-story-hide-nocontrols-warning.js.mdx b/docs/snippets/common/button-story-hide-nocontrols-warning.js.mdx
index 403ea4a31f8..dbabf7734b1 100644
--- a/docs/snippets/common/button-story-hide-nocontrols-warning.js.mdx
+++ b/docs/snippets/common/button-story-hide-nocontrols-warning.js.mdx
@@ -6,4 +6,4 @@ export const Large = Template.bind({});
 Large.parameters = {
   controls: { hideNoControlsWarning: true },
 };
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/common/button-story-hoisted.js.mdx b/docs/snippets/common/button-story-hoisted.js.mdx
index 864889b6c73..1facba38100 100644
--- a/docs/snippets/common/button-story-hoisted.js.mdx
+++ b/docs/snippets/common/button-story-hoisted.js.mdx
@@ -10,4 +10,4 @@ export default {
 
 // This is the only named export in the file, and it matches the component name
 export const Button = (args) => <ButtonComponent {...args} />;
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/common/button-story-matching-argtypes.mdx.mdx b/docs/snippets/common/button-story-matching-argtypes.mdx.mdx
index 3856cd3dfbe..df7b42e7c73 100644
--- a/docs/snippets/common/button-story-matching-argtypes.mdx.mdx
+++ b/docs/snippets/common/button-story-matching-argtypes.mdx.mdx
@@ -2,4 +2,4 @@
 <!-- Button.stories.mdx -->
 
 <Meta title='Button' component={Button} parameters={{ actions: { argTypesRegex: '^on.\*' } }} />
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/common/button-story-onclick-action-argtype.mdx.mdx b/docs/snippets/common/button-story-onclick-action-argtype.mdx.mdx
index 330d54d8c54..1eef142e940 100644
--- a/docs/snippets/common/button-story-onclick-action-argtype.mdx.mdx
+++ b/docs/snippets/common/button-story-onclick-action-argtype.mdx.mdx
@@ -2,4 +2,4 @@
 <!-- Button.stories.mdx -->
 
 <Meta title='Button' argTypes={{ onClick: { action: 'clicked' } }} />
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/common/button-story-remix-docspage.js.mdx b/docs/snippets/common/button-story-remix-docspage.js.mdx
index a15d16e7250..ca5e7b6bfa7 100644
--- a/docs/snippets/common/button-story-remix-docspage.js.mdx
+++ b/docs/snippets/common/button-story-remix-docspage.js.mdx
@@ -33,4 +33,4 @@ export default {
     },
   },
 };
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/common/button-story-remix-docspage.ts.mdx b/docs/snippets/common/button-story-remix-docspage.ts.mdx
index 9d2bf5faf47..a761f3d3e81 100644
--- a/docs/snippets/common/button-story-remix-docspage.ts.mdx
+++ b/docs/snippets/common/button-story-remix-docspage.ts.mdx
@@ -35,4 +35,4 @@ export default {
     },
   },
 } as Meta;
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/common/checkbox-story-csf.js.mdx b/docs/snippets/common/checkbox-story-csf.js.mdx
index bef6247d7fc..bd693ded4c3 100644
--- a/docs/snippets/common/checkbox-story-csf.js.mdx
+++ b/docs/snippets/common/checkbox-story-csf.js.mdx
@@ -4,7 +4,7 @@
 import { Checkbox } from './Checkbox';
 
 export default { 
-    title: "MDX/Checkbox", 
+    title: 'MDX/Checkbox', 
     component: Checkbox
 };
 
diff --git a/docs/snippets/common/checkbox-story-starter-example.mdx.mdx b/docs/snippets/common/checkbox-story-starter-example.mdx.mdx
index 290b3d4553c..892e937cc22 100644
--- a/docs/snippets/common/checkbox-story-starter-example.mdx.mdx
+++ b/docs/snippets/common/checkbox-story-starter-example.mdx.mdx
@@ -10,7 +10,7 @@ import { Checkbox } from './Checkbox';
 
 # Checkbox
 
-With `MDX` we can define a story for `Checkbox` right in the middle of our Markdown documentation.
+With `MDX`, we can define a story for `Checkbox` right in the middle of our Markdown documentation.
 
 <Canvas>
   <Story name="all checkboxes">
diff --git a/docs/snippets/common/checkbox-story.mdx.mdx b/docs/snippets/common/checkbox-story.mdx.mdx
index d3c78d6066e..4f511c7b362 100644
--- a/docs/snippets/common/checkbox-story.mdx.mdx
+++ b/docs/snippets/common/checkbox-story.mdx.mdx
@@ -8,7 +8,7 @@ import { Checkbox } from './Checkbox';
 
 # Checkbox
 
-With `MDX` we can define a story for `Checkbox` right in the middle of our
+With `MDX`, we can define a story for `Checkbox` right in the middle of our
 Markdown documentation.
 
 <!--- This is your Story template function, shown here in React -->
@@ -35,5 +35,4 @@ export const Template = (args) => <Checkbox {...args} />
     {Template.bind({})}
    </Story>
 </Canvas>
-
 ```
\ No newline at end of file
diff --git a/docs/snippets/common/component-story-csf-argstable-customization.js.mdx b/docs/snippets/common/component-story-csf-argstable-customization.js.mdx
index 70eaf210b8a..5ec14757899 100644
--- a/docs/snippets/common/component-story-csf-argstable-customization.js.mdx
+++ b/docs/snippets/common/component-story-csf-argstable-customization.js.mdx
@@ -6,11 +6,11 @@ export default {
   component: Button,
   argTypes: {
     label: {
-      description: 'overwritten description',
+      description: 'Overwritten description',
       table: {
         type: { 
-          summary: 'something short', 
-          detail: 'something really really long' 
+          summary: 'Something short', 
+          detail: 'Something really really long' 
         },
       },
       control: {
diff --git a/docs/snippets/common/component-story-csf-description.js.mdx b/docs/snippets/common/component-story-csf-description.js.mdx
index 0f69d318029..a4072d78927 100644
--- a/docs/snippets/common/component-story-csf-description.js.mdx
+++ b/docs/snippets/common/component-story-csf-description.js.mdx
@@ -6,7 +6,7 @@ export default {
   parameters: {
     docs: {
       description: {
-        component: 'some component _markdown_',
+        component: 'Some component _markdown_',
       },
     },
   },
@@ -16,8 +16,8 @@ export const WithStoryDescription = Template.bind({});
 WithStoryDescription.parameters = {
   docs: {
     description: {
-      story: 'some story **markdown**',
+      story: 'Some story **markdown**',
     },
   },
 };
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/common/component-story-custom-args-mapping.js.mdx b/docs/snippets/common/component-story-custom-args-mapping.js.mdx
index 4ccc12affa6..e10a61d9eb7 100644
--- a/docs/snippets/common/component-story-custom-args-mapping.js.mdx
+++ b/docs/snippets/common/component-story-custom-args-mapping.js.mdx
@@ -11,10 +11,10 @@ export default {
   title: 'Button',
   argTypes: {
     arrow: {
-      options: Object.keys(arrows), // an array of serializable values
-      mapping: arrows, // maps serializable option values to complex arg values
+      options: Object.keys(arrows), // An array of serializable values
+      mapping: arrows, // Maps serializable option values to complex arg values
       control: {
-        type: 'select', // type 'select' is automatically inferred when 'options' is defined
+        type: 'select', // Type 'select' is automatically inferred when 'options' is defined
         labels: {
           // 'labels' maps option values to string labels
           ArrowUp: 'Up',
@@ -26,4 +26,4 @@ export default {
     },
   },
 };
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/common/component-story-custom-source.js.mdx b/docs/snippets/common/component-story-custom-source.js.mdx
index 75202d7c0e2..353c4e97259 100644
--- a/docs/snippets/common/component-story-custom-source.js.mdx
+++ b/docs/snippets/common/component-story-custom-source.js.mdx
@@ -10,4 +10,4 @@ CustomSource.parameters = {
     },
   },
 };
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/common/component-story-disable-controls-regex.js.mdx b/docs/snippets/common/component-story-disable-controls-regex.js.mdx
index 49aba1ca89e..a9f30365819 100644
--- a/docs/snippets/common/component-story-disable-controls-regex.js.mdx
+++ b/docs/snippets/common/component-story-disable-controls-regex.js.mdx
@@ -12,4 +12,4 @@ ArrayExclude.parameters = { controls: { exclude: ['foo', 'bar'] } };
 
 RegexExclude = Template.bind({})
 RegexExclude.parameters = { controls: { exclude: /^hello*/ } };
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/common/component-story-disable-controls-regex.mdx.mdx b/docs/snippets/common/component-story-disable-controls-regex.mdx.mdx
index 7cbe493c805..2cb284d2340 100644
--- a/docs/snippets/common/component-story-disable-controls-regex.mdx.mdx
+++ b/docs/snippets/common/component-story-disable-controls-regex.mdx.mdx
@@ -1,5 +1,6 @@
 ```md
 <!--- YourComponent.stories.mdx -->
+
 <Story name="Array Include" parameters={{ controls: { include: ['foo', 'bar'] } }}>
   {Template.bind({})}
 </Story>
diff --git a/docs/snippets/common/component-story-dynamic-title.js.mdx b/docs/snippets/common/component-story-dynamic-title.js.mdx
index 94fc49897a4..47d464d2133 100644
--- a/docs/snippets/common/component-story-dynamic-title.js.mdx
+++ b/docs/snippets/common/component-story-dynamic-title.js.mdx
@@ -2,6 +2,7 @@
 // MyComponent.stories.js | MyComponent.stories.ts
 
 import base from 'paths.macro';
+
 export default {
   title: `${base}/Component`
 }
diff --git a/docs/snippets/common/component-story-mdx-argstable-block.mdx.mdx b/docs/snippets/common/component-story-mdx-argstable-block.mdx.mdx
index 55c85a40150..bafbec889a9 100644
--- a/docs/snippets/common/component-story-mdx-argstable-block.mdx.mdx
+++ b/docs/snippets/common/component-story-mdx-argstable-block.mdx.mdx
@@ -2,6 +2,7 @@
 <!--- MyComponent.stories.mdx -->
 
 import { ArgsTable } from '@storybook/addon-docs/blocks';
+
 import { MyComponent } from './MyComponent';
 
 # My Component!
diff --git a/docs/snippets/common/component-story-mdx-argtypes.mdx.mdx b/docs/snippets/common/component-story-mdx-argtypes.mdx.mdx
index 488de810c91..f5e4d9621c8 100644
--- a/docs/snippets/common/component-story-mdx-argtypes.mdx.mdx
+++ b/docs/snippets/common/component-story-mdx-argtypes.mdx.mdx
@@ -20,5 +20,4 @@
 }}>
   <!--- story contents --->
 </Story>
-
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/common/component-story-mdx-decorators-params.mdx.mdx b/docs/snippets/common/component-story-mdx-decorators-params.mdx.mdx
index d35800b5804..75f7d223647 100644
--- a/docs/snippets/common/component-story-mdx-decorators-params.mdx.mdx
+++ b/docs/snippets/common/component-story-mdx-decorators-params.mdx.mdx
@@ -10,5 +10,4 @@
 <Story name="story" decorators={[ ... ]} parameters={{ ... }} >
 ...
 </Story>
-
 ```
\ No newline at end of file
diff --git a/docs/snippets/common/component-story-mdx-dedent.mdx.mdx b/docs/snippets/common/component-story-mdx-dedent.mdx.mdx
index b684dc7cd3d..0a380969f21 100644
--- a/docs/snippets/common/component-story-mdx-dedent.mdx.mdx
+++ b/docs/snippets/common/component-story-mdx-dedent.mdx.mdx
@@ -2,6 +2,7 @@
 <!--- MyComponent.stories.mdx -->
 
 import { Source } from '@storybook/addon-docs/blocks';
+
 import dedent from 'ts-dedent';
 
 <Source
@@ -12,5 +13,4 @@ import dedent from 'ts-dedent';
      }
   `}
 />
-
 ```
\ No newline at end of file
diff --git a/docs/snippets/common/component-story-mdx-description.mdx.mdx b/docs/snippets/common/component-story-mdx-description.mdx.mdx
index 46bcf97f9c4..69322380760 100644
--- a/docs/snippets/common/component-story-mdx-description.mdx.mdx
+++ b/docs/snippets/common/component-story-mdx-description.mdx.mdx
@@ -2,7 +2,9 @@
 <!--- Button.stories.mdx -->
 
 import { Description } from '@storybook/addon-docs/blocks';
+
 import dedent from 'ts-dedent';
+
 import { Button } from './Button';
 
 <Description of={Button} />
diff --git a/docs/snippets/common/component-story-mdx-embed.mdx.mdx b/docs/snippets/common/component-story-mdx-embed.mdx.mdx
index c42e1a9c26d..ae3f1b9b3c6 100644
--- a/docs/snippets/common/component-story-mdx-embed.mdx.mdx
+++ b/docs/snippets/common/component-story-mdx-embed.mdx.mdx
@@ -8,5 +8,4 @@ import { Story } from "@storybook/addon-docs/blocks";
 And Markdown here
 
 <Story id="some--id" />
-
 ```
\ No newline at end of file
diff --git a/docs/snippets/common/component-story-mdx-story-by-name.mdx.mdx b/docs/snippets/common/component-story-mdx-story-by-name.mdx.mdx
index f6f50012043..fc744fea664 100644
--- a/docs/snippets/common/component-story-mdx-story-by-name.mdx.mdx
+++ b/docs/snippets/common/component-story-mdx-story-by-name.mdx.mdx
@@ -2,6 +2,7 @@
 <!-- Button.stories.mdx --->
 
 import { Story } from '@storybook/addon-docs/blocks';
+
 import { Button } from './Button';
 
 <!--- This is your Story template function, shown here in React -->
@@ -11,5 +12,4 @@ export const Template = (args) => <Button {...args} />;
 <Story name="Basic" args={{ label: ‘hello’ }}>
   {Template.bind({})}
 </Story>
-
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/common/component-story-sort-controls.mdx.mdx b/docs/snippets/common/component-story-sort-controls.mdx.mdx
index a5aca9d8750..baa527946dd 100644
--- a/docs/snippets/common/component-story-sort-controls.mdx.mdx
+++ b/docs/snippets/common/component-story-sort-controls.mdx.mdx
@@ -2,6 +2,7 @@
 <!--- YourComponent.stories.mdx -->
 
 import { Meta } from '@storybook/addon-docs/blocks';
+
 import { YourComponent } from './your-component'
 
 <Meta 
diff --git a/docs/snippets/common/gizmo-story-controls-customization.js.mdx b/docs/snippets/common/gizmo-story-controls-customization.js.mdx
index 4f2f9d15778..1b090b4d140 100644
--- a/docs/snippets/common/gizmo-story-controls-customization.js.mdx
+++ b/docs/snippets/common/gizmo-story-controls-customization.js.mdx
@@ -10,4 +10,4 @@ export default {
     },
   },
 };
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/common/gizmo-story-controls-customization.mdx.mdx b/docs/snippets/common/gizmo-story-controls-customization.mdx.mdx
index be4f59d16b1..bc14a3c276b 100644
--- a/docs/snippets/common/gizmo-story-controls-customization.mdx.mdx
+++ b/docs/snippets/common/gizmo-story-controls-customization.mdx.mdx
@@ -10,4 +10,4 @@
     },
   }}
 />
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/common/isomorphic-fetch-mock.js.mdx b/docs/snippets/common/isomorphic-fetch-mock.js.mdx
index 615b8bb8206..e41d189341a 100644
--- a/docs/snippets/common/isomorphic-fetch-mock.js.mdx
+++ b/docs/snippets/common/isomorphic-fetch-mock.js.mdx
@@ -14,7 +14,7 @@ export default async function fetch() {
   nextJson = null;
 }
 
-// the decorator to be used in ./storybook/preview to apply the mock to all stories
+// The decorator to be used in ./storybook/preview to apply the mock to all stories
 
 export function decorator(story, { parameters }) {
   if (parameters && parameters.fetch) {
diff --git a/docs/snippets/common/mdx-canvas-multiple-stories.mdx.mdx b/docs/snippets/common/mdx-canvas-multiple-stories.mdx.mdx
index ed754c143c5..224339acc93 100644
--- a/docs/snippets/common/mdx-canvas-multiple-stories.mdx.mdx
+++ b/docs/snippets/common/mdx-canvas-multiple-stories.mdx.mdx
@@ -18,4 +18,4 @@ export const Template = (args) => <Badge {...args } />;
     {Template.bind({})}
   </Story>
 </Canvas>
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/common/my-addon-initial-panel-state.js.mdx b/docs/snippets/common/my-addon-initial-panel-state.js.mdx
index 7d740faa2b3..72c6f1e7cb0 100644
--- a/docs/snippets/common/my-addon-initial-panel-state.js.mdx
+++ b/docs/snippets/common/my-addon-initial-panel-state.js.mdx
@@ -2,7 +2,9 @@
 // /my-addon/src/register.js
 
 import React from 'react';
+
 import { addons, types } from '@storybook/addons';
+
 import { AddonPanel } from '@storybook/components';
 
 const ADDON_ID = 'myaddon';
diff --git a/docs/snippets/common/my-addon-preset-implementation.js.mdx b/docs/snippets/common/my-addon-preset-implementation.js.mdx
index 0a614f4e59f..2f31ec25ac3 100644
--- a/docs/snippets/common/my-addon-preset-implementation.js.mdx
+++ b/docs/snippets/common/my-addon-preset-implementation.js.mdx
@@ -2,7 +2,7 @@
 // /my-addon/src/preset.js
 
 function managerEntries(entry = []) {
-  return [...entry, require.resolve("./register")]; //👈 addon implementation
+  return [...entry, require.resolve("./register")]; //👈 Addon implementation
 }
 
 module.exports = { managerEntries }
diff --git a/docs/snippets/common/my-addon-storybook-registration.js.mdx b/docs/snippets/common/my-addon-storybook-registration.js.mdx
index 7e45f59e7f7..f5c80c57412 100644
--- a/docs/snippets/common/my-addon-storybook-registration.js.mdx
+++ b/docs/snippets/common/my-addon-storybook-registration.js.mdx
@@ -10,4 +10,4 @@ module.exports = {
     "../src/preset.js" //👈 Our addon registered here
   ]
 }
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/common/my-component-story-mdx-with-decorators-params.mdx.mdx b/docs/snippets/common/my-component-story-mdx-with-decorators-params.mdx.mdx
index 117d810a733..ced5e1f0936 100644
--- a/docs/snippets/common/my-component-story-mdx-with-decorators-params.mdx.mdx
+++ b/docs/snippets/common/my-component-story-mdx-with-decorators-params.mdx.mdx
@@ -2,6 +2,7 @@
 <!--- MyComponent.stories.mdx --->
 
 <!--- This is your Story template function, shown here in React -->
+
 <Meta
   title='MyComponent'
   decorators={[ ... ]}
diff --git a/docs/snippets/common/my-component-story-use-globaltype.js.mdx b/docs/snippets/common/my-component-story-use-globaltype.js.mdx
index 34ad2771da7..dbf97c01c7e 100644
--- a/docs/snippets/common/my-component-story-use-globaltype.js.mdx
+++ b/docs/snippets/common/my-component-story-use-globaltype.js.mdx
@@ -16,4 +16,4 @@ export const StoryWithLocale = (args, { globals: { locale } }) => {
   const caption = getCaptionForLocale(locale);
   return <>{caption}</>;
 };
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/common/my-component-story-use-globaltype.mdx.mdx b/docs/snippets/common/my-component-story-use-globaltype.mdx.mdx
index bbfce8d33a4..e175189af54 100644
--- a/docs/snippets/common/my-component-story-use-globaltype.mdx.mdx
+++ b/docs/snippets/common/my-component-story-use-globaltype.mdx.mdx
@@ -18,4 +18,4 @@ export const getCaptionForLocale = (locale) => {
     return <>{caption}</>;
   }}
 </Story>
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/common/my-component-with-story-content.mdx.mdx b/docs/snippets/common/my-component-with-story-content.mdx.mdx
index f6baa4152a8..69172cba3a8 100644
--- a/docs/snippets/common/my-component-with-story-content.mdx.mdx
+++ b/docs/snippets/common/my-component-with-story-content.mdx.mdx
@@ -2,10 +2,11 @@
 <!-- MyComponent.stories.mdx --->
 
 import { Canvas } from '@storybook/addon-docs/blocks';
+
 import { MyComponent } from './MyComponent';
 
 <Canvas>
   <h2>Some here</h2>
   <MyComponent />
 </Canvas>
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/common/other-foo-bar-story.js.mdx b/docs/snippets/common/other-foo-bar-story.js.mdx
index bae8c10c0ad..65ba2e3bac9 100644
--- a/docs/snippets/common/other-foo-bar-story.js.mdx
+++ b/docs/snippets/common/other-foo-bar-story.js.mdx
@@ -3,7 +3,7 @@
 
 export default {
   title: 'OtherFoo/Bar',
-  id: 'Foo/Bar', // or 'foo-bar' if you prefer
+  id: 'Foo/Bar', // Or 'foo-bar' if you prefer
 };
 
 export const Baz = () => BarStory.bind({});
diff --git a/docs/snippets/common/storybook-addon-backgrounds-configure-grid.js.mdx b/docs/snippets/common/storybook-addon-backgrounds-configure-grid.js.mdx
index 118e93c26dd..12af04ed3de 100644
--- a/docs/snippets/common/storybook-addon-backgrounds-configure-grid.js.mdx
+++ b/docs/snippets/common/storybook-addon-backgrounds-configure-grid.js.mdx
@@ -16,4 +16,4 @@ export default {
     },
   },
 };
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-addon-backgrounds-disable-grid.js.mdx b/docs/snippets/common/storybook-addon-backgrounds-disable-grid.js.mdx
index c9404fb34b1..32191fc1cd1 100644
--- a/docs/snippets/common/storybook-addon-backgrounds-disable-grid.js.mdx
+++ b/docs/snippets/common/storybook-addon-backgrounds-disable-grid.js.mdx
@@ -9,4 +9,4 @@ Large.parameters = {
     }
   }
 };
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-addon-panel-example.js.mdx b/docs/snippets/common/storybook-addon-panel-example.js.mdx
index 23179193706..5f3898b61c6 100644
--- a/docs/snippets/common/storybook-addon-panel-example.js.mdx
+++ b/docs/snippets/common/storybook-addon-panel-example.js.mdx
@@ -2,8 +2,11 @@
 // addon-panel/register.js
 
 import React from 'react';
+
 import { AddonPanel } from '@storybook/components';
+
 import { addons, types } from '@storybook/addons';
+
 import { useGlobals } from '@storybook/api';
 
 addons.register('my/panel', () => {
@@ -18,4 +21,4 @@ addons.register('my/panel', () => {
     ),
   });
 });
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-addon-panel-initial.js.mdx b/docs/snippets/common/storybook-addon-panel-initial.js.mdx
index 0c0efbaf86a..fb4b80e7cff 100644
--- a/docs/snippets/common/storybook-addon-panel-initial.js.mdx
+++ b/docs/snippets/common/storybook-addon-panel-initial.js.mdx
@@ -2,7 +2,9 @@
 // .storybook/my-addon/register.js
 
 import React from 'react';
+
 import { addons, types } from '@storybook/addons';
+
 import { AddonPanel } from '@storybook/components';
 
 const ADDON_ID = 'myaddon';
diff --git a/docs/snippets/common/storybook-addon-tab-example.js.mdx b/docs/snippets/common/storybook-addon-tab-example.js.mdx
index f8eb7865be1..695d3dfd157 100644
--- a/docs/snippets/common/storybook-addon-tab-example.js.mdx
+++ b/docs/snippets/common/storybook-addon-tab-example.js.mdx
@@ -2,6 +2,7 @@
 // addon-tab/register.js
 
 import React from 'react';
+
 import addons, { types } from '@storybook/addons';
 
 addons.register('my/tab', () => {
@@ -19,4 +20,4 @@ addons.register('my/tab', () => {
     ),
   });
 });
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-addon-toolbar-example.js.mdx b/docs/snippets/common/storybook-addon-toolbar-example.js.mdx
index 520a330722f..2aed6137f6f 100644
--- a/docs/snippets/common/storybook-addon-toolbar-example.js.mdx
+++ b/docs/snippets/common/storybook-addon-toolbar-example.js.mdx
@@ -2,7 +2,9 @@
 // addon-toolbar/register.js
 
 import React from "react";
+
 import addons, { types } from "@storybook/addons";
+
 import { Icons, IconButton } from '@storybook/components';
 
 addons.register("my/toolbar", () => {
@@ -22,4 +24,4 @@ addons.register("my/toolbar", () => {
     ),
   });
 });
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-addons-api-usechannel.js.mdx b/docs/snippets/common/storybook-addons-api-usechannel.js.mdx
index 0a74e671fb4..7184c752dc0 100644
--- a/docs/snippets/common/storybook-addons-api-usechannel.js.mdx
+++ b/docs/snippets/common/storybook-addons-api-usechannel.js.mdx
@@ -2,6 +2,7 @@
 // /my-addon/register.js
 
 import React from 'react';
+
 import { STORY_CHANGED } from '@storybook/core-events';
 
 export const Panel = () => {
diff --git a/docs/snippets/common/storybook-client-preview.ts.mdx b/docs/snippets/common/storybook-client-preview.ts.mdx
index 43b96cd58b5..436d862dc8a 100644
--- a/docs/snippets/common/storybook-client-preview.ts.mdx
+++ b/docs/snippets/common/storybook-client-preview.ts.mdx
@@ -2,8 +2,11 @@
 // your-framework/src/client/preview/index.ts
 
 import { start } from '@storybook/core/client';
+
 import './globals';
+
 import render from './render';
+
 const api = start(render);
 
 // the boilerplate code
diff --git a/docs/snippets/common/storybook-config-layout.js.mdx b/docs/snippets/common/storybook-config-layout.js.mdx
index a73cbd0ef46..30d412a0314 100644
--- a/docs/snippets/common/storybook-config-layout.js.mdx
+++ b/docs/snippets/common/storybook-config-layout.js.mdx
@@ -18,4 +18,4 @@ addons.setConfig({
     collapsedRoots: ['other'],
   },
 });
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-generated-argtypes.js.mdx b/docs/snippets/common/storybook-generated-argtypes.js.mdx
index cd8f236ad88..413c88c245b 100644
--- a/docs/snippets/common/storybook-generated-argtypes.js.mdx
+++ b/docs/snippets/common/storybook-generated-argtypes.js.mdx
@@ -14,4 +14,4 @@ const argTypes = {
     }
   }
 }
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-main-addon-registration.js.mdx b/docs/snippets/common/storybook-main-addon-registration.js.mdx
index 38649aa799c..1bdf6f44951 100644
--- a/docs/snippets/common/storybook-main-addon-registration.js.mdx
+++ b/docs/snippets/common/storybook-main-addon-registration.js.mdx
@@ -5,7 +5,7 @@ module.exports = {
   stories: [],
   addons: [
     // Other Storybook addons
-    '@storybook/addon-a11y', //👈 the addon registered here
+    '@storybook/addon-a11y', //👈 The addon registered here
   ],
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-main-default-setup.js.mdx b/docs/snippets/common/storybook-main-default-setup.js.mdx
index 6761401f7c5..9b5d877884a 100644
--- a/docs/snippets/common/storybook-main-default-setup.js.mdx
+++ b/docs/snippets/common/storybook-main-default-setup.js.mdx
@@ -5,4 +5,4 @@ module.exports = {
   stories: ['../src/**/*.stories.@(js|mdx)'],
   addons: ['@storybook/addon-essentials']
 }
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-main-js-md-files.js.mdx b/docs/snippets/common/storybook-main-js-md-files.js.mdx
index cdcc84827f1..ec32e62eaab 100644
--- a/docs/snippets/common/storybook-main-js-md-files.js.mdx
+++ b/docs/snippets/common/storybook-main-js-md-files.js.mdx
@@ -4,5 +4,4 @@
 module.exports = {
   stories: ['../my-project/src/components/*.@(js|md)'],
 };
-
 ```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-main-preview-head.js.mdx b/docs/snippets/common/storybook-main-preview-head.js.mdx
index 18f7edd2c6f..13390e966aa 100644
--- a/docs/snippets/common/storybook-main-preview-head.js.mdx
+++ b/docs/snippets/common/storybook-main-preview-head.js.mdx
@@ -11,4 +11,4 @@ module.exports = {
     </style>
   `);
 };
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-main-ref-per-environment.js.mdx b/docs/snippets/common/storybook-main-ref-per-environment.js.mdx
index bf7a251c1a8..2263a87ab5f 100644
--- a/docs/snippets/common/storybook-main-ref-per-environment.js.mdx
+++ b/docs/snippets/common/storybook-main-ref-per-environment.js.mdx
@@ -29,4 +29,4 @@ module.exports = {
     };
   },
 };
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-main-ref-remote.js.mdx b/docs/snippets/common/storybook-main-ref-remote.js.mdx
index 296a156c7a1..ce4a1588a47 100644
--- a/docs/snippets/common/storybook-main-ref-remote.js.mdx
+++ b/docs/snippets/common/storybook-main-ref-remote.js.mdx
@@ -10,4 +10,4 @@ module.exports={
    }
   }
 }
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-main-register-presets-managerentry.js.mdx b/docs/snippets/common/storybook-main-register-presets-managerentry.js.mdx
index c1123b72b80..4a913b4f8aa 100644
--- a/docs/snippets/common/storybook-main-register-presets-managerentry.js.mdx
+++ b/docs/snippets/common/storybook-main-register-presets-managerentry.js.mdx
@@ -3,8 +3,8 @@
 
 module.exports = {
   addons: [
-    '@storybook/addon-storysource/register', // a managerEntry
-    '@storybook/addon-docs/preset', // a preset
+    '@storybook/addon-storysource/register', // A managerEntry registered here, in this case from the storysource addon.
+    '@storybook/addon-docs/preset', // A preset registered here, in this case from the addon-docs addon.
   ],
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-main-webpack-preset-config.js.mdx b/docs/snippets/common/storybook-main-webpack-preset-config.js.mdx
index 71c25a3acaa..e0c89c947bf 100644
--- a/docs/snippets/common/storybook-main-webpack-preset-config.js.mdx
+++ b/docs/snippets/common/storybook-main-webpack-preset-config.js.mdx
@@ -2,9 +2,9 @@
 // .storybook/main.js
 
 export async function webpack(baseConfig, options) {
-  //Modify or replace config. 
-  //Mutating the original reference object can cause unexpected bugs,
-  //so in this example we replace.
+  // Modify or replace config. 
+  // Mutating the original reference object can cause unexpected bugs,
+  // so in this example we replace.
   const { module = {} } = baseConfig;
 
   return {
diff --git a/docs/snippets/common/storybook-main-with-mock-decorator.js.mdx b/docs/snippets/common/storybook-main-with-mock-decorator.js.mdx
index 05a807f3d29..1c9d5a32817 100644
--- a/docs/snippets/common/storybook-main-with-mock-decorator.js.mdx
+++ b/docs/snippets/common/storybook-main-with-mock-decorator.js.mdx
@@ -2,7 +2,7 @@
 // .storybook/main.js
 
 module.exports = {
-  // your Storybook configuration
+  // Your Storybook configuration
 
   webpackFinal: (config) => {
     config.resolve.alias['isomorphic-fetch'] = require.resolve('../__mocks__/isomorphic-fetch.js');
diff --git a/docs/snippets/common/storybook-manager-custom-theme.js.mdx b/docs/snippets/common/storybook-manager-custom-theme.js.mdx
index 5affde34171..be5df4a7d45 100644
--- a/docs/snippets/common/storybook-manager-custom-theme.js.mdx
+++ b/docs/snippets/common/storybook-manager-custom-theme.js.mdx
@@ -7,4 +7,4 @@ import yourTheme from './YourTheme';
 addons.setConfig({
   theme: yourTheme,
 });
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-manager-disable-roots.js.mdx b/docs/snippets/common/storybook-manager-disable-roots.js.mdx
index 3cf13c00b4a..952d363c23d 100644
--- a/docs/snippets/common/storybook-manager-disable-roots.js.mdx
+++ b/docs/snippets/common/storybook-manager-disable-roots.js.mdx
@@ -2,9 +2,10 @@
 // ./storybook/manager.js
 
 import { addons } from '@storybook/addons';
+
 addons.setConfig({
   sidebar: {
     showRoots: false,
   },
 });
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-merged-argtypes.js.mdx b/docs/snippets/common/storybook-merged-argtypes.js.mdx
index d83851489f9..adf4beb46e1 100644
--- a/docs/snippets/common/storybook-merged-argtypes.js.mdx
+++ b/docs/snippets/common/storybook-merged-argtypes.js.mdx
@@ -17,4 +17,4 @@ const argTypes = {
     }
   }
 }
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-preset-full-config-object.js.mdx b/docs/snippets/common/storybook-preset-full-config-object.js.mdx
index 743778aa711..46d663d33f4 100644
--- a/docs/snippets/common/storybook-preset-full-config-object.js.mdx
+++ b/docs/snippets/common/storybook-preset-full-config-object.js.mdx
@@ -3,11 +3,11 @@
 
 module.exports = {
   managerWebpack: async (config, options) => {
-    // update config here
+    // Update config here
     return config;
   },
   managerBabel: async (config, options) => {
-    // update config here
+    // Update config here
     return config;
   },
   webpackFinal: async (config, options) => {
diff --git a/docs/snippets/common/storybook-preview-change-viewports.js.mdx b/docs/snippets/common/storybook-preview-change-viewports.js.mdx
index ff4ebac4d8b..2b99ca92da3 100644
--- a/docs/snippets/common/storybook-preview-change-viewports.js.mdx
+++ b/docs/snippets/common/storybook-preview-change-viewports.js.mdx
@@ -7,4 +7,4 @@ export const parameters = {
     defaultViewport: 'someDefault',
   },
 }
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-preview-configure-background-colors.js.mdx b/docs/snippets/common/storybook-preview-configure-background-colors.js.mdx
index e18e3488172..4c880b6d146 100644
--- a/docs/snippets/common/storybook-preview-configure-background-colors.js.mdx
+++ b/docs/snippets/common/storybook-preview-configure-background-colors.js.mdx
@@ -16,4 +16,4 @@ export const parameters = {
     ],
   },
 };
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-preview-configure-globaltypes.js.mdx b/docs/snippets/common/storybook-preview-configure-globaltypes.js.mdx
index 7a409b8b6c9..42e775d4df3 100644
--- a/docs/snippets/common/storybook-preview-configure-globaltypes.js.mdx
+++ b/docs/snippets/common/storybook-preview-configure-globaltypes.js.mdx
@@ -8,11 +8,11 @@ export const globalTypes = {
     defaultValue: 'light',
     toolbar: {
       icon: 'circlehollow',
-      // array of plain string values or MenuItem shape (see below)
+      // Array of plain string values or MenuItem shape (see below)
       items: ['light', 'dark'],
-      // property that specifies if the name of the item will be displayed
+      // Property that specifies if the name of the item will be displayed
       showName: True,
     },
   },
 };
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-preview-disable-docspage.js.mdx b/docs/snippets/common/storybook-preview-disable-docspage.js.mdx
index 69ac35e54f8..4f2e8352649 100644
--- a/docs/snippets/common/storybook-preview-disable-docspage.js.mdx
+++ b/docs/snippets/common/storybook-preview-disable-docspage.js.mdx
@@ -2,4 +2,4 @@
 // .storybook/preview.js
 
 export const parameters = { docs: { page: null } };
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-preview-head-example.html.mdx b/docs/snippets/common/storybook-preview-head-example.html.mdx
index e446e0a592a..a4a4bb3b244 100644
--- a/docs/snippets/common/storybook-preview-head-example.html.mdx
+++ b/docs/snippets/common/storybook-preview-head-example.html.mdx
@@ -2,9 +2,11 @@
 <!-- .storybook/preview-head.html -->
 
 <!-- Pull in static files served from your Static directory or the internet -->
+
 <link rel=”preload” href=”your/font” />
+
 <!-- Or you can load custom head-tag JavaScript: -->
+
 <script src="https://use.typekit.net/xxxyyy.js"></script>
 <script>try{ Typekit.load(); } catch(e){ }</script>
-
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-preview-use-global-type.js.mdx b/docs/snippets/common/storybook-preview-use-global-type.js.mdx
index 3de4d1fc2b2..26f415ca142 100644
--- a/docs/snippets/common/storybook-preview-use-global-type.js.mdx
+++ b/docs/snippets/common/storybook-preview-use-global-type.js.mdx
@@ -19,4 +19,4 @@ const withThemeProvider=(Story,context)=>{
   )
 }
 export const decorators = [withThemeProvider];
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-preview-viewport-use-new-devices.js.mdx b/docs/snippets/common/storybook-preview-viewport-use-new-devices.js.mdx
index 23bb43d15c3..1f802e18da3 100644
--- a/docs/snippets/common/storybook-preview-viewport-use-new-devices.js.mdx
+++ b/docs/snippets/common/storybook-preview-viewport-use-new-devices.js.mdx
@@ -4,5 +4,4 @@
 export const parameters = {
   viewport: { viewports: customViewports },
 };
-
 ```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-preview-with-ordered-pages-and-wildcard.js.mdx b/docs/snippets/common/storybook-preview-with-ordered-pages-and-wildcard.js.mdx
index 47723a4d0c0..8f87fffadc9 100644
--- a/docs/snippets/common/storybook-preview-with-ordered-pages-and-wildcard.js.mdx
+++ b/docs/snippets/common/storybook-preview-with-ordered-pages-and-wildcard.js.mdx
@@ -8,4 +8,4 @@ export const parameters = {
     },
   },
 };
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-preview-with-ordered-pages.js.mdx b/docs/snippets/common/storybook-preview-with-ordered-pages.js.mdx
index 427ca2ee260..f0baf9128b7 100644
--- a/docs/snippets/common/storybook-preview-with-ordered-pages.js.mdx
+++ b/docs/snippets/common/storybook-preview-with-ordered-pages.js.mdx
@@ -8,4 +8,4 @@ export const parameters = {
     },
   },
 };
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-start-dev-server.ts.mdx b/docs/snippets/common/storybook-start-dev-server.ts.mdx
index c5d23259897..9e15280376d 100644
--- a/docs/snippets/common/storybook-start-dev-server.ts.mdx
+++ b/docs/snippets/common/storybook-start-dev-server.ts.mdx
@@ -2,6 +2,7 @@
 // your-framework/src/server/index.ts
 
 import { buildDev } from '@storybook/core/server';
+
 import options from './options';
 
 buildDev(options);
diff --git a/docs/snippets/common/storybook-storyshots-config.js.mdx b/docs/snippets/common/storybook-storyshots-config.js.mdx
index ccca348aac5..fc1c55ee2b1 100644
--- a/docs/snippets/common/storybook-storyshots-config.js.mdx
+++ b/docs/snippets/common/storybook-storyshots-config.js.mdx
@@ -3,4 +3,4 @@
 
 import initStoryshots from '@storybook/addon-storyshots';
 initStoryshots();
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-storyshots-custom-directory.js.mdx b/docs/snippets/common/storybook-storyshots-custom-directory.js.mdx
index 522fe1d0a66..d74e4ee77a2 100644
--- a/docs/snippets/common/storybook-storyshots-custom-directory.js.mdx
+++ b/docs/snippets/common/storybook-storyshots-custom-directory.js.mdx
@@ -5,10 +5,10 @@ import path from 'path';
 
 import initStoryshots from '@storybook/addon-storyshots';
 
-// the required import from the @storybook/addon-storyshots-puppeteer addon
+// The required import from the @storybook/addon-storyshots-puppeteer addon
 import { imageSnapshot } from '@storybook/addon-storyshots-puppeteer';
 
-// function to customize the snapshot location
+// Function to customize the snapshot location
 const getMatchOptions = ({ context: { fileName } }) => {
   // Generates a custom path based on the file name and the custom directory.
   const snapshotPath = path.join(path.dirname(fileName), 'your-custom-directory');
diff --git a/docs/snippets/common/storybook-theme-example-variables.ts.mdx b/docs/snippets/common/storybook-theme-example-variables.ts.mdx
index 4cb3bb546ef..5fcafab8725 100644
--- a/docs/snippets/common/storybook-theme-example-variables.ts.mdx
+++ b/docs/snippets/common/storybook-theme-example-variables.ts.mdx
@@ -9,4 +9,4 @@ export default create({
   brandUrl: 'https://example.com',
   brandImage: 'https://place-hold.it/350x150',
 });
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/common/your-theme.js.mdx b/docs/snippets/common/your-theme.js.mdx
index 97e348ddb36..24f9771bad3 100644
--- a/docs/snippets/common/your-theme.js.mdx
+++ b/docs/snippets/common/your-theme.js.mdx
@@ -38,4 +38,4 @@ export default create({
   brandUrl: 'https://example.com',
   brandImage: 'https://place-hold.it/350x150',
 });
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/react/app-story-with-mock.js.mdx b/docs/snippets/react/app-story-with-mock.js.mdx
index e3435cbfa8f..d39a3953d2c 100644
--- a/docs/snippets/react/app-story-with-mock.js.mdx
+++ b/docs/snippets/react/app-story-with-mock.js.mdx
@@ -29,4 +29,4 @@ Success.parameters = {
     }
   }
 };
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/react/component-story-custom-args-complex.js.mdx b/docs/snippets/react/component-story-custom-args-complex.js.mdx
index 2c7049fbce5..1dc4b8d9670 100644
--- a/docs/snippets/react/component-story-custom-args-complex.js.mdx
+++ b/docs/snippets/react/component-story-custom-args-complex.js.mdx
@@ -17,7 +17,7 @@ export default {
   argTypes: {
     propertyA: {
       options: ['Item One', 'Item Two', 'Item Three'],
-      control: { type: 'select' } // automatically inferred when 'options' is defined
+      control: { type: 'select' } // Automatically inferred when 'options' is defined
     },
     propertyB: {
       options: ['Another Item One', 'Another Item Two', 'Another Item Three'],
@@ -31,4 +31,4 @@ const Template = ({ propertyA, propertyB, ...rest }) => {
 
   return <YourComponent someProperty={someFunctionResult} {...rest} />;
 };
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/react/component-story-custom-args-complex.mdx.mdx b/docs/snippets/react/component-story-custom-args-complex.mdx.mdx
index 2dfe9aea3f3..1c7b775c2bf 100644
--- a/docs/snippets/react/component-story-custom-args-complex.mdx.mdx
+++ b/docs/snippets/react/component-story-custom-args-complex.mdx.mdx
@@ -9,7 +9,7 @@ import { YourComponent } from './your-component';
 
 <!---👇 A function to apply some computations -->
 export const someFunction = (valuePropertyA, valuePropertyB) => {
-  <!--- makes some computations and returns something -->
+  <!--- Makes some computations and returns something -->
 };
 
 export const Template = ({propertyA,propertyB,...rest})=>{
@@ -44,4 +44,4 @@ export const Template = ({propertyA,propertyB,...rest})=>{
     {Template.bind({})}
   </Story>
 </Canvas>
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/react/component-story-custom-args-complex.ts.mdx b/docs/snippets/react/component-story-custom-args-complex.ts.mdx
index 7fb8525a334..c9592fbd88f 100644
--- a/docs/snippets/react/component-story-custom-args-complex.ts.mdx
+++ b/docs/snippets/react/component-story-custom-args-complex.ts.mdx
@@ -19,7 +19,7 @@ export default {
   argTypes: {
     propertyA: {
       options: ['Item One', 'Item Two', 'Item Three'],
-      control: { type: 'select' } // automatically inferred when 'options' is defined
+      control: { type: 'select' } // Automatically inferred when 'options' is defined
     },
     propertyB: {
       options: ['Another Item One', 'Another Item Two', 'Another Item Three'],
@@ -33,4 +33,4 @@ const Template: Story<YourComponentProps> = ({ propertyA, propertyB, ...rest })
 
   return <YourComponent someProperty={someFunctionResult} {...rest} />;
 };
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/react/component-story-static-asset-cdn.js.mdx b/docs/snippets/react/component-story-static-asset-cdn.js.mdx
index 9642753cdbf..47793caa048 100644
--- a/docs/snippets/react/component-story-static-asset-cdn.js.mdx
+++ b/docs/snippets/react/component-story-static-asset-cdn.js.mdx
@@ -10,4 +10,4 @@ export default {
 export const withAnImage = () => (
   <img src="https://place-hold.it/350x150" alt="My CDN placeholder" />
 );
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/react/my-component-story-configure-viewports.js.mdx b/docs/snippets/react/my-component-story-configure-viewports.js.mdx
index eac3b2e335a..0ef2da44148 100644
--- a/docs/snippets/react/my-component-story-configure-viewports.js.mdx
+++ b/docs/snippets/react/my-component-story-configure-viewports.js.mdx
@@ -15,7 +15,7 @@ export default {
       //👇 Your own default viewport
       defaultViewport: 'iphone6'
     },
-  };
+  },
 };
 
 export const MyStory = () => <div />;
diff --git a/docs/snippets/react/my-component-with-env-variables.mdx.mdx b/docs/snippets/react/my-component-with-env-variables.mdx.mdx
index a3ce0b14507..668f7cdef31 100644
--- a/docs/snippets/react/my-component-with-env-variables.mdx.mdx
+++ b/docs/snippets/react/my-component-with-env-variables.mdx.mdx
@@ -18,4 +18,4 @@ export const Template = (args) => <MyOtherComponent {...args} />
       {Template.bind({})}
     </Story>
 </Canvas>
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/react/page-story-slots.js.mdx b/docs/snippets/react/page-story-slots.js.mdx
index 555c8f1a7fb..b78cfde5309 100644
--- a/docs/snippets/react/page-story-slots.js.mdx
+++ b/docs/snippets/react/page-story-slots.js.mdx
@@ -19,4 +19,4 @@ export const CustomFooter = Template.bind({});
 CustomFooter.args = {
   footer: 'Built with Storybook',
 };
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/react/page-story-with-args-composition.js.mdx b/docs/snippets/react/page-story-with-args-composition.js.mdx
index aeae9da430d..0da2bd65cb8 100644
--- a/docs/snippets/react/page-story-with-args-composition.js.mdx
+++ b/docs/snippets/react/page-story-with-args-composition.js.mdx
@@ -19,8 +19,8 @@ const Template = (args) => <DocumentScreen {...args} />;
 
 export const Simple = Template.bind({});
 Simple.args = {
-  user: PageLayout.Simple.user,
-  document: DocumentHeader.Simple.document,
-  subdocuments: DocumentList.Simple.documents,
+  user: PageLayout.Simple.args.user,
+  document: DocumentHeader.Simple.args.document,
+  subdocuments: DocumentList.Simple.args.documents,
 };
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/page-story-with-args-composition.ts.mdx b/docs/snippets/react/page-story-with-args-composition.ts.mdx
index d1e5819e01f..6f99607f3bc 100644
--- a/docs/snippets/react/page-story-with-args-composition.ts.mdx
+++ b/docs/snippets/react/page-story-with-args-composition.ts.mdx
@@ -19,8 +19,8 @@ const Template: Story<DocumentScreenProps> = (args) => <DocumentScreen {...args}
 
 export const Simple = Template.bind({});
 Simple.args = {
-  user: PageLayout.Simple.user,
-  document: DocumentHeader.Simple.document,
-  subdocuments: DocumentList.Simple.documents,
+  user: PageLayout.Simple.args.user,
+  document: DocumentHeader.Simple.args.document,
+  subdocuments: DocumentList.Simple.args.documents,
 };
 ```
\ No newline at end of file