minor snippets improvements

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

@@ -1,5 +1,5 @@
 ```js
-// Badge.stories.js
+// Badge.stories.js | Badge.stories.ts
 
 export default {
   component: Badge,

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

@@ -1,6 +1,8 @@
 ```ts
 // ButtonGroup.stories.ts
+
 import { Meta } from '@storybook/react/types-6-0';
+
 import { Button, ButtonGroup } from '../ButtonGroup';
 
 export default {

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

@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js
+// Button.stories.js | Button.stories.ts
 
 export default {
   title: 'Button',

docs/snippets/common/button-story-argtypes-with-categories.js.mdx

@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js
+// Button.stories.js | Button.stories.ts
 
 export default {
   title: 'Button',

docs/snippets/common/button-story-argtypes-with-subcategories.js.mdx

@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js
+// Button.stories.js | Button.stories.ts
 
 export default {
   title: 'Button',

docs/snippets/common/button-story-default-export.js.mdx

@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js
+// Button.stories.js | Button.stories.ts
 
 export default {
   title: 'Button'

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

@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js
+// Button.stories.js | Button.stories.ts
 
 import { Button } from './Button';
 

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

@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js
+// Button.stories.js | Button.stories.ts
 
 export const Primary = Template.bind({});
 Primary.parameters = { docs: { page: null } }

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

@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js
+// Button.stories.js | Button.stories.ts
 
 export default {
   title: 'Button',

docs/snippets/common/button-story-grouped.js.mdx

@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js
+// Button.stories.js | Button.stories.ts
 
 export default {
   title: 'Design System/Atoms/Button'

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

@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js
+// Button.stories.js | Button.stories.ts
 
 export const Large = Template.bind({});
 

docs/snippets/common/button-story-hoisted.js.mdx

@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js
+// Button.stories.js | Button.stories.ts
 
 export default {
   title: 'Design System/Atoms/Button',

docs/snippets/common/button-story-matching-argtypes.js.mdx

@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js
+// Button.stories.js | Button.stories.ts
 
 export default {
   title: 'Button',

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

@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js
+// Button.stories.js | Button.stories.ts
 
 export default {
   title: 'Button',

docs/snippets/common/button-story-primary-composition.js.mdx

@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js
+// Button.stories.js | Button.stories.ts
 
 const Primary = ButtonStory.bind({});
 Primary.args = {

docs/snippets/common/button-story-primary-long-name.js.mdx

@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js
+// Button.stories.js | Button.stories.ts
 
 export const PrimaryLongName = Template.bind({});
 

docs/snippets/common/checkbox-story-grouped.js.mdx

@@ -1,5 +1,5 @@
 ```js
-// Checkbox.stories.js
+// Checkbox.stories.js | Checkbox.stories.ts
 
 export default {
   title: 'Design System/Atoms/Checkbox'

docs/snippets/common/component-story-csf-argstable-customization.js.mdx

@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js
+// Button.stories.js | Button.stories.ts
 
 export default {
   title: 'Button',

docs/snippets/common/component-story-csf-description.js.mdx

@@ -1,23 +1,23 @@
 ```js
-// Button.stories.js
+// Button.stories.js | Button.stories.ts
 
 export default {
-  title: 'CustomDescription'
+  title: 'CustomDescription',
   parameters: {
-    docs: { 
-        description: { 
-            component: 'some component _markdown_' 
-        } 
+    docs: {
+      description: {
+        component: 'some component _markdown_',
+      },
     },
-  }
+  },
 };
 
 export const WithStoryDescription = Template.bind({});
 WithStoryDescription.parameters = {
-  docs: { 
-      description: { 
-          story: 'some story **markdown**' 
-        } 
+  docs: {
+    description: {
+      story: 'some story **markdown**',
     },
+  },
 };
-```
+```

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

@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js
+// Button.stories.js | Button.stories.ts
 
 export const CustomSource = () => Template.bind({});
 

docs/snippets/common/component-story-disable-controls-alt.js.mdx

@@ -1,5 +1,5 @@
 ```js
-// YourComponent.stories.js
+// YourComponent.stories.js | YourComponent.stories.ts
 
 import { YourComponent } from './your-component'
 

docs/snippets/common/component-story-disable-controls.js.mdx

@@ -1,5 +1,5 @@
 ```js
-// YourComponent.stories.js
+// YourComponent.stories.js | YourComponent.stories.ts
 
 import { YourComponent } from './your-component'
 

docs/snippets/common/component-story-dynamic-title.js.mdx

@@ -1,5 +1,5 @@
 ```js
-// MyComponent.stories.js
+// MyComponent.stories.js | MyComponent.stories.ts
 
 import base from 'paths.macro';
 export default {

docs/snippets/common/foo-bar-baz-story.js.mdx

@@ -1,5 +1,5 @@
 ```js
-// FooBar.stories.js
+// FooBar.stories.js | FooBar.stories.ts
 
 export default {
   title: 'Foo/Bar',

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

@@ -1,5 +1,5 @@
 ```js
-// Gizmo.stories.js
+// Gizmo.stories.js | Gizmo.stories.ts
 
 export default {
   title: 'Gizmo',

docs/snippets/common/my-component-story-import-json.js.mdx

@@ -1,5 +1,5 @@
 ```js
-// MyComponent.stories.js
+// MyComponent.stories.js | MyComponent.stories.ts
 
 // This will automatically be parsed to the contents of `data.json`
 import data from './data.json';

docs/snippets/common/my-component-story-import-static-asset.js.mdx

@@ -1,5 +1,5 @@
 ```js
-// MyComponent.stories.js
+// MyComponent.stories.js | MyComponent.stories.ts
 
 // This will include './static/image.png' in the bundle. 
 // And return a path to be included in a src attribute

docs/snippets/common/my-component-story.js.mdx

@@ -1,5 +1,5 @@
 ```js
-// MyComponent.stories.js
+// MyComponent.stories.js | MyComponent.stories.ts
 
 import { MyComponent } from './MyComponent';
 

docs/snippets/common/other-foo-bar-story.js.mdx

@@ -1,5 +1,5 @@
 ```js
-// FooBar.stories.js
+// FooBar.stories.js | FooBar.stories.ts
 
 export default {
   title: 'OtherFoo/Bar',

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

@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js
+// Button.stories.js | Button.stories.ts
 
 // To apply a set of backgrounds to all stories of Button:
 export default {

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

@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js
+// Button.stories.js | Button.stories.ts
 
 // To apply a grid to all stories of Button:
 export default {

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

@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js
+// Button.stories.js | Button.stories.ts
 
 export const Large = Template.bind({});
 Large.parameters = {

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

@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js
+// Button.stories.js | Button.stories.ts
 
 export const Large = Template.bind({});
 Large.parameters = {

docs/snippets/common/storybook-addon-backgrounds-override-background-color.js.mdx

@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js
+// Button.stories.js | Button.stories.ts
 
 export const Large = Template.bind({});
 Large.parameters = {

docs/snippets/common/widget-story-controls-enum.js.mdx

@@ -1,5 +1,5 @@
 ```js
-// Widget.stories.js
+// Widget.stories.js | Widget.stories.ts
 
 export default {
   title: 'Widget',

docs/snippets/react/button-group-story.js.mdx

@@ -8,12 +8,12 @@ import * as ButtonStories from './Button.stories';
 export default {
   title: 'ButtonGroup',
   component: ButtonGroup,
-}
-const Template = (args) => <ButtonGroup {...args} />
+};
+const Template = (args) => <ButtonGroup {...args} />;
 
 export const Pair = Template.bind({});
 Pair.args = {
-  buttons: [ ...ButtonStories.Primary.args, ...ButtonStories.Secondary.args ],
+  buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }],
   orientation: 'horizontal',
 };
-```
+```

docs/snippets/react/button-group-story.ts.mdx

@@ -3,7 +3,7 @@
 
 import React from 'react';
 import { Story, Meta } from '@storybook/react';
-import { ButtonGroup,ButtonGroupProps } from '../ButtonGroup';
+import { ButtonGroup, ButtonGroupProps } from '../ButtonGroup';
 import * as ButtonStories from './Button.stories';
 
 export default {
@@ -15,7 +15,7 @@ const Template: Story<ButtonGroupProps> = (args) => <ButtonGroup {...args} />;
 
 export const Pair = Template.bind({});
 Pair.args = {
-  buttons: [ ...ButtonStories.Primary.args, ...ButtonStories.Secondary.args ],
+  buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }],
   orientation: 'horizontal',
 };
-```
+```

docs/snippets/react/my-component-story-configure-viewports.js.mdx

@@ -1,5 +1,5 @@
 ```js
-// MyComponent.stories.js
+// MyComponent.stories.js | MyComponent.stories.ts
 
 import React from 'react';
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';

docs/snippets/react/page-story-with-args-composition.js.mdx

@@ -2,7 +2,7 @@
 // YourPage.stories.js
 
 import React from 'react';
-import DocumentScreen from './DocumentScreen';
+import DocumentScreen from './YourPage';
 
 import PageLayout from './PageLayout.stories';
 import DocumentHeader from './DocumentHeader.stories';

docs/snippets/react/page-story-with-args-composition.ts.mdx

@@ -3,7 +3,7 @@
 
 import React from 'react';
 import { Story, Meta } from '@storybook/react';
-import {DocumentScreen, DocumentScreenProps} from './DocumentScreen';
+import { DocumentScreen, DocumentScreenProps } from './YourPage';
 
 import PageLayout from './PageLayout.stories';
 import DocumentHeader from './DocumentHeader.stories';

docs/snippets/vue/page-story-with-args-composition.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // YourPage.stories.js
 
-import DocumentScreen from './DocumentScreen.vue';
+import DocumentScreen from './YourPage.vue';
 
 import * as PageLayoutStories from './PageLayout.stories';
 import * as DocumentHeaderStories from './DocumentHeader.stories';

docs/writing-stories/parameters.md

@@ -11,7 +11,7 @@ For example, let’s customize the backgrounds addon via a parameter. We’ll us
 We can set a parameter for a single story with the `parameters` key on a CSF export:
 
 ```js
-// Button.story.js
+// Button.stories.js | Button.stories.ts
 
 export const Primary = Template.bind({});
 Primary.args = {
@@ -33,9 +33,9 @@ Primary.parameters = {
 We can set the parameters for all stories of a component using the `parameters` key on the default CSF export:
 
 ```js
-// Button.story.js
+// Button.stories.js | Button.stories.ts
 
-import Button from './';
+import Button from './Button';
 
 export default {
   title: 'Button',