Merge pull request #14836 from storybookjs/minor-fixes

Chore: (Docs snippets) Minor fixes and tweaks to the snippets

docs/snippets/common/addon-consume-and-update-globaltype.js.mdx

@@ -38,4 +38,4 @@ const ExampleToolbar = () => {
     </IconButton>
   );
 };
-```
+```

docs/snippets/common/addon-consume-globaltype.js.mdx

@@ -22,4 +22,4 @@ const ThemePanel = props => {
     </AddonPanel>
   );
 };
-```
+```

docs/snippets/common/args-usage-with-addons.js.mdx

@@ -13,4 +13,4 @@ resetArgs((argNames: ['key']));
 
 // To reset all args
 resetArgs();
-```
+```

docs/snippets/common/badge-story-custom-argtypes.js.mdx

@@ -43,5 +43,4 @@ export default {
     }
   }
 };
-
 ```

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 -->
-```
+```

docs/snippets/common/badge-story-starter-example.mdx.mdx

@@ -46,4 +46,4 @@ with unique URLs and isolated snapshot tests.
     </Badge>
   </Story>
 </Canvas>
-```
+```

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
+gets rendered as a group but defines individual stories
-with unique URLs which is great for review and testing.
+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>
-```
+```

docs/snippets/common/button-group-story-subcomponents.js.mdx

@@ -8,4 +8,4 @@ export default {
   component: ButtonGroup,
   subcomponents: { Button },
 };
-```
+```

docs/snippets/common/button-group-story-subcomponents.ts.mdx

@@ -10,4 +10,4 @@ export default {
   component: ButtonGroup,
   subcomponents: { Button },
 } as Meta;
-```
+```

docs/snippets/common/button-story-action-event-handle.js.mdx

@@ -9,4 +9,4 @@ export default {
     },
   },
 };
-```
+```

docs/snippets/common/button-story-action-event-handle.mdx.mdx

@@ -6,4 +6,4 @@
     handles: ['mouseover', 'click .btn'],
   },
 }} />
-```
+```

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 {
     }
   }
 };
-```
+```

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 {
     }
   }
 };
-```
+```

docs/snippets/common/button-story-controls-primary-variant.mdx.mdx

@@ -4,4 +4,4 @@
 <Story name="Primary" args={{ variant: 'primary' }}>
   {Template.bind({})}
 </Story>
-```
+```

docs/snippets/common/button-story-controls-radio-group.mdx.mdx

@@ -13,4 +13,4 @@
     }
   }}
 />
-```
+```

docs/snippets/common/button-story-disable-docspage-component.js.mdx

@@ -15,4 +15,4 @@ export default {
     } 
   },
 };
-```
+```

docs/snippets/common/button-story-docs-code-type.js.mdx

@@ -16,6 +16,5 @@ export default {
   }
 };
 
-// remainder story implementation
+// Remainder story implementation
-
 ```

docs/snippets/common/button-story-hide-nocontrols-warning.js.mdx

@@ -6,4 +6,4 @@ export const Large = Template.bind({});
 Large.parameters = {
   controls: { hideNoControlsWarning: true },
 };
-```
+```

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} />;
-```
+```

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.\*' } }} />
-```
+```

docs/snippets/common/button-story-onclick-action-argtype.mdx.mdx

@@ -2,4 +2,4 @@
 <!-- Button.stories.mdx -->
 
 <Meta title='Button' argTypes={{ onClick: { action: 'clicked' } }} />
-```
+```

docs/snippets/common/button-story-remix-docspage.js.mdx

@@ -33,4 +33,4 @@ export default {
     },
   },
 };
-```
+```

docs/snippets/common/button-story-remix-docspage.ts.mdx

@@ -35,4 +35,4 @@ export default {
     },
   },
 } as Meta;
-```
+```

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
 };
 

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">

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>
-
 ```

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', 
+          summary: 'Something short', 
-          detail: 'something really really long' 
+          detail: 'Something really really long' 
         },
       },
       control: {

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**',
     },
   },
 };
-```
+```

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
+      options: Object.keys(arrows), // An array of serializable values
-      mapping: arrows, // maps serializable option values to complex arg 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 {
     },
   },
 };
-```
+```

docs/snippets/common/component-story-custom-source.js.mdx

@@ -10,4 +10,4 @@ CustomSource.parameters = {
     },
   },
 };
-```
+```

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*/ } };
-```
+```

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>

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`
 }

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!

docs/snippets/common/component-story-mdx-argtypes.mdx.mdx

@@ -20,5 +20,4 @@
 }}>
   <!--- story contents --->
 </Story>
-
+```
-```

docs/snippets/common/component-story-mdx-decorators-params.mdx.mdx

@@ -10,5 +10,4 @@
 <Story name="story" decorators={[ ... ]} parameters={{ ... }} >
 ...
 </Story>
-
 ```

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';
      }
   `}
 />
-
 ```

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} />

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" />
-
 ```

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>
-
+```
-```

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 

docs/snippets/common/gizmo-story-controls-customization.js.mdx

@@ -10,4 +10,4 @@ export default {
     },
   },
 };
-```
+```

docs/snippets/common/gizmo-story-controls-customization.mdx.mdx

@@ -10,4 +10,4 @@
     },
   }}
 />
-```
+```

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) {

docs/snippets/common/mdx-canvas-multiple-stories.mdx.mdx

@@ -18,4 +18,4 @@ export const Template = (args) => <Badge {...args } />;
     {Template.bind({})}
   </Story>
 </Canvas>
-```
+```

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';

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 }

docs/snippets/common/my-addon-storybook-registration.js.mdx

@@ -10,4 +10,4 @@ module.exports = {
     "../src/preset.js" //👈 Our addon registered here
   ]
 }
-```
+```

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={[ ... ]}

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}</>;
 };
-```
+```

docs/snippets/common/my-component-story-use-globaltype.mdx.mdx

@@ -18,4 +18,4 @@ export const getCaptionForLocale = (locale) => {
     return <>{caption}</>;
   }}
 </Story>
-```
+```

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>
-```
+```

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({});

docs/snippets/common/storybook-addon-backgrounds-configure-grid.js.mdx

@@ -16,4 +16,4 @@ export default {
     },
   },
 };
-```
+```

docs/snippets/common/storybook-addon-backgrounds-disable-grid.js.mdx

@@ -9,4 +9,4 @@ Large.parameters = {
     }
   }
 };
-```
+```

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', () => {
     ),
   });
 });
-```
+```

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';

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', () => {
     ),
   });
 });
-```
+```

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", () => {
     ),
   });
 });
-```
+```

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 = () => {

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

docs/snippets/common/storybook-config-layout.js.mdx

@@ -18,4 +18,4 @@ addons.setConfig({
     collapsedRoots: ['other'],
   },
 });
-```
+```

docs/snippets/common/storybook-generated-argtypes.js.mdx

@@ -14,4 +14,4 @@ const argTypes = {
     }
   }
 }
-```
+```

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
   ],
 };
 ```

docs/snippets/common/storybook-main-default-setup.js.mdx

@@ -5,4 +5,4 @@ module.exports = {
   stories: ['../src/**/*.stories.@(js|mdx)'],
   addons: ['@storybook/addon-essentials']
 }
-```
+```

docs/snippets/common/storybook-main-js-md-files.js.mdx

@@ -4,5 +4,4 @@
 module.exports = {
   stories: ['../my-project/src/components/*.@(js|md)'],
 };
-
 ```

docs/snippets/common/storybook-main-preview-head.js.mdx

@@ -11,4 +11,4 @@ module.exports = {
     </style>
   `);
 };
-```
+```

docs/snippets/common/storybook-main-ref-per-environment.js.mdx

@@ -29,4 +29,4 @@ module.exports = {
     };
   },
 };
-```
+```

docs/snippets/common/storybook-main-ref-remote.js.mdx

@@ -10,4 +10,4 @@ module.exports={
    }
   }
 }
-```
+```

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-storysource/register', // A managerEntry registered here, in this case from the storysource addon.
-    '@storybook/addon-docs/preset', // a preset
+    '@storybook/addon-docs/preset', // A preset registered here, in this case from the addon-docs addon.
   ],
 };
 ```

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. 
+  // Modify or replace config. 
-  //Mutating the original reference object can cause unexpected bugs,
+  // Mutating the original reference object can cause unexpected bugs,
-  //so in this example we replace.
+  // so in this example we replace.
   const { module = {} } = baseConfig;
 
   return {

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');

docs/snippets/common/storybook-manager-custom-theme.js.mdx

@@ -7,4 +7,4 @@ import yourTheme from './YourTheme';
 addons.setConfig({
   theme: yourTheme,
 });
-```
+```

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,
   },
 });
-```
+```

docs/snippets/common/storybook-merged-argtypes.js.mdx

@@ -17,4 +17,4 @@ const argTypes = {
     }
   }
 }
-```
+```

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) => {

docs/snippets/common/storybook-preview-change-viewports.js.mdx

@@ -7,4 +7,4 @@ export const parameters = {
     defaultViewport: 'someDefault',
   },
 }
-```
+```

docs/snippets/common/storybook-preview-configure-background-colors.js.mdx

@@ -16,4 +16,4 @@ export const parameters = {
     ],
   },
 };
-```
+```

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,
     },
   },
 };
-```
+```

docs/snippets/common/storybook-preview-disable-docspage.js.mdx

@@ -2,4 +2,4 @@
 // .storybook/preview.js
 
 export const parameters = { docs: { page: null } };
-```
+```

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>
-
+```
-```

docs/snippets/common/storybook-preview-use-global-type.js.mdx

@@ -19,4 +19,4 @@ const withThemeProvider=(Story,context)=>{
   )
 }
 export const decorators = [withThemeProvider];
-```
+```

docs/snippets/common/storybook-preview-viewport-use-new-devices.js.mdx

@@ -4,5 +4,4 @@
 export const parameters = {
   viewport: { viewports: customViewports },
 };
-
 ```

docs/snippets/common/storybook-preview-with-ordered-pages-and-wildcard.js.mdx

@@ -8,4 +8,4 @@ export const parameters = {
     },
   },
 };
-```
+```

docs/snippets/common/storybook-preview-with-ordered-pages.js.mdx

@@ -8,4 +8,4 @@ export const parameters = {
     },
   },
 };
-```
+```

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);

docs/snippets/common/storybook-storyshots-config.js.mdx

@@ -3,4 +3,4 @@
 
 import initStoryshots from '@storybook/addon-storyshots';
 initStoryshots();
-```
+```

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');

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',
 });
-```
+```

docs/snippets/common/your-theme.js.mdx

@@ -38,4 +38,4 @@ export default create({
   brandUrl: 'https://example.com',
   brandImage: 'https://place-hold.it/350x150',
 });
-```
+```

docs/snippets/react/app-story-with-mock.js.mdx

@@ -29,4 +29,4 @@ Success.parameters = {
     }
   }
 };
-```
+```

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} />;
 };
-```
+```

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>
-```
+```

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} />;
 };
-```
+```

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" />
 );
-```
+```

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 />;

docs/snippets/react/my-component-with-env-variables.mdx.mdx

@@ -18,4 +18,4 @@ export const Template = (args) => <MyOtherComponent {...args} />
       {Template.bind({})}
     </Story>
 </Canvas>
-```
+```

docs/snippets/react/page-story-slots.js.mdx

@@ -19,4 +19,4 @@ export const CustomFooter = Template.bind({});
 CustomFooter.args = {
   footer: 'Built with Storybook',
 };
-```
+```

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,
+  user: PageLayout.Simple.args.user,
-  document: DocumentHeader.Simple.document,
+  document: DocumentHeader.Simple.args.document,
-  subdocuments: DocumentList.Simple.documents,
+  subdocuments: DocumentList.Simple.args.documents,
 };
 ```

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,
+  user: PageLayout.Simple.args.user,
-  document: DocumentHeader.Simple.document,
+  document: DocumentHeader.Simple.args.document,
-  subdocuments: DocumentList.Simple.documents,
+  subdocuments: DocumentList.Simple.args.documents,
 };
 ```