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

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,24 +17,24 @@ 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'
       }
     }
   }
 };
-```
+```

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,19 +26,19 @@ 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'
       }
     }
   }
 };
-```
+```

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

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