From 8d620614c7aeb790ec7f4aad21844b0f0abbfd91 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Fri, 23 Aug 2019 21:27:05 +0800 Subject: [PATCH 01/59] Addon-docs: Add docs to standalone example --- examples/standalone-preview/package.json | 1 + examples/standalone-preview/storybook.html | 1 + examples/standalone-preview/storybook.tsx | 8 +++++++- 3 files changed, 9 insertions(+), 1 deletion(-) diff --git a/examples/standalone-preview/package.json b/examples/standalone-preview/package.json index 9545a51ee50d..d755d489a9de 100644 --- a/examples/standalone-preview/package.json +++ b/examples/standalone-preview/package.json @@ -7,6 +7,7 @@ }, "devDependencies": { "@storybook/react": "5.2.0-beta.39", + "@storybook/addon-docs": "5.2.0-beta.39", "parcel": "^1.12.3", "react": "^16.8.4", "react-dom": "^16.8.4" diff --git a/examples/standalone-preview/storybook.html b/examples/standalone-preview/storybook.html index ee1a10affe69..ed566e7e2af9 100644 --- a/examples/standalone-preview/storybook.html +++ b/examples/standalone-preview/storybook.html @@ -8,6 +8,7 @@
+
diff --git a/examples/standalone-preview/storybook.tsx b/examples/standalone-preview/storybook.tsx index 8c0e649e1685..4d02fd13e1dc 100644 --- a/examples/standalone-preview/storybook.tsx +++ b/examples/standalone-preview/storybook.tsx @@ -1,5 +1,11 @@ import * as React from 'react'; -import { configure, storiesOf } from '@storybook/react'; +import { configure, storiesOf, addParameters } from '@storybook/react'; +import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks'; + +addParameters({ + docsContainer: DocsContainer, + docs: DocsPage, +}); configure(() => { storiesOf('Component 1', module).add('Story 1', () =>
Component 1 - Story 1
); From 9e044fc30f99e38a5a9dcfc068a22d54cf8990f2 Mon Sep 17 00:00:00 2001 From: Valentin Semirulnik Date: Fri, 25 Jun 2021 22:43:57 +0300 Subject: [PATCH 02/59] fix: remove aggregateTimeout --- lib/builder-webpack4/src/preview/iframe-webpack.config.ts | 1 - lib/builder-webpack5/src/preview/iframe-webpack.config.ts | 1 - lib/manager-webpack4/src/manager-webpack.config.ts | 1 - lib/manager-webpack5/src/manager-webpack.config.ts | 1 - 4 files changed, 4 deletions(-) diff --git a/lib/builder-webpack4/src/preview/iframe-webpack.config.ts b/lib/builder-webpack4/src/preview/iframe-webpack.config.ts index 3bec5bc44b3e..aa51a380f311 100644 --- a/lib/builder-webpack4/src/preview/iframe-webpack.config.ts +++ b/lib/builder-webpack4/src/preview/iframe-webpack.config.ts @@ -130,7 +130,6 @@ export default async ({ publicPath: '', }, watchOptions: { - aggregateTimeout: 10, ignored: /node_modules/, }, plugins: [ diff --git a/lib/builder-webpack5/src/preview/iframe-webpack.config.ts b/lib/builder-webpack5/src/preview/iframe-webpack.config.ts index 0e8ae5112100..9f2e0aad233a 100644 --- a/lib/builder-webpack5/src/preview/iframe-webpack.config.ts +++ b/lib/builder-webpack5/src/preview/iframe-webpack.config.ts @@ -128,7 +128,6 @@ export default async ({ logging: 'error', }, watchOptions: { - aggregateTimeout: 10, ignored: /node_modules/, }, ignoreWarnings: [ diff --git a/lib/manager-webpack4/src/manager-webpack.config.ts b/lib/manager-webpack4/src/manager-webpack.config.ts index 3daa89cb9df0..7bdd2b4d0958 100644 --- a/lib/manager-webpack4/src/manager-webpack.config.ts +++ b/lib/manager-webpack4/src/manager-webpack.config.ts @@ -68,7 +68,6 @@ export default async ({ publicPath: '', }, watchOptions: { - aggregateTimeout: 2000, ignored: /node_modules/, }, plugins: [ diff --git a/lib/manager-webpack5/src/manager-webpack.config.ts b/lib/manager-webpack5/src/manager-webpack.config.ts index 376e42930c68..da4368fa1293 100644 --- a/lib/manager-webpack5/src/manager-webpack.config.ts +++ b/lib/manager-webpack5/src/manager-webpack.config.ts @@ -68,7 +68,6 @@ export default async ({ publicPath: '', }, watchOptions: { - aggregateTimeout: 2000, ignored: /node_modules/, }, plugins: [ From b7f47e93601977c3b41e311c06e3241b7af30b15 Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Mon, 28 Jun 2021 23:00:33 +0100 Subject: [PATCH 03/59] updates for jsx and tsx support --- docs/essentials/auto-generated-controls/react.mdx | 2 ++ docs/essentials/introduction.md | 2 ++ docs/snippets/common/badge-story-custom-argtypes.js.mdx | 2 +- .../snippets/common/button-group-story-subcomponents.js.mdx | 2 +- .../snippets/common/button-group-story-subcomponents.ts.mdx | 2 +- .../snippets/common/button-story-action-event-handle.js.mdx | 2 +- .../common/button-story-argtypes-with-categories.js.mdx | 2 +- .../common/button-story-argtypes-with-subcategories.js.mdx | 2 +- .../common/button-story-controls-primary-variant.js.mdx | 2 +- .../common/button-story-controls-radio-group.js.mdx | 2 +- docs/snippets/common/button-story-default-export.js.mdx | 6 +++--- docs/snippets/common/button-story-disable-addon.js.mdx | 2 +- .../common/button-story-disable-docspage-component.js.mdx | 2 +- docs/snippets/common/button-story-docs-code-type.js.mdx | 4 ++-- .../button-story-docspage-with-custom-component.js.mdx | 2 +- docs/snippets/common/button-story-docspage-with-mdx.js.mdx | 3 +-- docs/snippets/common/button-story-grouped.js.mdx | 6 +++--- .../common/button-story-hide-nocontrols-warning.js.mdx | 2 +- docs/snippets/common/button-story-hoisted.js.mdx | 2 +- docs/snippets/common/button-story-matching-argtypes.js.mdx | 2 +- .../common/button-story-onclick-action-argtype.js.mdx | 2 +- .../snippets/common/button-story-primary-composition.js.mdx | 2 +- docs/snippets/common/button-story-primary-long-name.js.mdx | 2 +- docs/snippets/common/button-story-remix-docspage.js.mdx | 2 +- docs/snippets/common/button-story-remix-docspage.ts.mdx | 2 +- docs/snippets/common/button-story-with-parameters.js.mdx | 2 +- docs/snippets/common/checkbox-story-csf.js.mdx | 6 +++--- docs/snippets/common/checkbox-story-grouped.js.mdx | 6 +++--- .../component-story-csf-argstable-customization.js.mdx | 2 +- docs/snippets/common/component-story-csf-description.js.mdx | 2 +- .../common/component-story-custom-args-mapping.js.mdx | 2 +- docs/snippets/common/component-story-custom-source.js.mdx | 2 +- .../common/component-story-disable-controls-alt.js.mdx | 2 +- .../common/component-story-disable-controls-regex.js.mdx | 2 +- .../snippets/common/component-story-disable-controls.js.mdx | 2 +- docs/snippets/common/component-story-dynamic-title.js.mdx | 2 +- docs/snippets/common/component-story-sort-controls.js.mdx | 2 +- docs/snippets/common/custom-docs-page.ts-component.ts.mdx | 2 +- docs/snippets/common/foo-bar-baz-story.js.mdx | 2 +- .../common/gizmo-story-controls-customization.js.mdx | 2 +- docs/snippets/common/my-component-story-import-json.js.mdx | 2 +- .../common/my-component-story-import-static-asset.js.mdx | 2 +- .../common/my-component-story-mandatory-export.js.mdx | 2 +- ...y-component-story-use-globaltype-backwards-compat.js.mdx | 2 +- .../common/my-component-story-use-globaltype.js.mdx | 2 +- .../common/my-component-story-with-storyname.js.mdx | 2 +- docs/snippets/common/my-component-story.js.mdx | 2 +- docs/snippets/common/other-foo-bar-story.js.mdx | 2 +- ...storybook-addon-backgrounds-configure-backgrounds.js.mdx | 2 +- .../storybook-addon-backgrounds-configure-grid.js.mdx | 2 +- .../storybook-addon-backgrounds-disable-backgrounds.js.mdx | 2 +- .../common/storybook-addon-backgrounds-disable-grid.js.mdx | 4 ++-- ...ybook-addon-backgrounds-override-background-color.js.mdx | 2 +- .../snippets/common/storybook-component-layout-param.js.mdx | 2 +- docs/snippets/common/storybook-customize-argtypes.js.mdx | 2 +- docs/snippets/common/storybook-story-layout-param.js.mdx | 2 +- docs/snippets/react/app-story-with-mock.js.mdx | 2 +- docs/snippets/react/button-component-with-proptypes.js.mdx | 2 +- docs/snippets/react/button-component-with-proptypes.ts.mdx | 2 +- docs/snippets/react/button-group-story.js.mdx | 2 +- docs/snippets/react/button-group-story.ts.mdx | 2 +- docs/snippets/react/button-implementation.js.mdx | 2 +- docs/snippets/react/button-implementation.ts.mdx | 2 +- docs/snippets/react/button-story-click-handler-args.js.mdx | 2 +- .../react/button-story-click-handler-simple-docs.js.mdx | 2 +- .../react/button-story-click-handler-simplificated.js.mdx | 2 +- docs/snippets/react/button-story-click-handler.js.mdx | 2 +- .../react/button-story-component-args-primary.js.mdx | 2 +- .../react/button-story-component-args-primary.ts.mdx | 2 +- docs/snippets/react/button-story-default-docs-code.js.mdx | 2 +- docs/snippets/react/button-story-default-docs-code.ts.mdx | 2 +- .../react/button-story-default-export-with-component.js.mdx | 2 +- .../react/button-story-default-export-with-component.ts.mdx | 2 +- docs/snippets/react/button-story-rename-story.js.mdx | 2 +- docs/snippets/react/button-story-rename-story.ts.mdx | 2 +- docs/snippets/react/button-story-using-args.js.mdx | 2 +- docs/snippets/react/button-story-using-args.ts.mdx | 2 +- docs/snippets/react/button-story-with-addon-example.js.mdx | 2 +- docs/snippets/react/button-story-with-blue-args.js.mdx | 2 +- docs/snippets/react/button-story-with-blue-args.ts.mdx | 2 +- docs/snippets/react/button-story-with-emojis.js.mdx | 2 +- docs/snippets/react/button-story-with-emojis.ts.mdx | 2 +- docs/snippets/react/button-story-with-parameters.js.mdx | 2 +- docs/snippets/react/button-story-with-parameters.ts.mdx | 2 +- docs/snippets/react/button-story-with-sample.js.mdx | 2 +- docs/snippets/react/button-story.with-hooks.js.mdx | 2 +- docs/snippets/react/checkbox-story-csf.js.mdx | 2 +- .../react/component-story-custom-args-complex.js.mdx | 2 +- .../react/component-story-custom-args-complex.ts.mdx | 2 +- docs/snippets/react/component-story-static-asset-cdn.js.mdx | 2 +- .../react/component-story-static-asset-with-import.js.mdx | 2 +- .../component-story-static-asset-without-import.js.mdx | 2 +- docs/snippets/react/component-story-with-query.js.mdx | 2 +- .../react/component-styled-variables-object-notation.js.mdx | 2 +- .../component-styled-variables-template-literals.js.mdx | 2 +- docs/snippets/react/list-story-expanded.js.mdx | 2 +- docs/snippets/react/list-story-expanded.ts.mdx | 2 +- docs/snippets/react/list-story-reuse-data.js.mdx | 2 +- docs/snippets/react/list-story-reuse-data.ts.mdx | 2 +- docs/snippets/react/list-story-starter.js.mdx | 2 +- docs/snippets/react/list-story-starter.ts.mdx | 2 +- docs/snippets/react/list-story-template.js.mdx | 2 +- docs/snippets/react/list-story-template.ts.mdx | 2 +- docs/snippets/react/list-story-unchecked.js.mdx | 2 +- docs/snippets/react/list-story-unchecked.ts.mdx | 3 ++- docs/snippets/react/list-story-with-subcomponents.js.mdx | 2 +- docs/snippets/react/list-story-with-subcomponents.ts.mdx | 2 +- .../react/list-story-with-unchecked-children.js.mdx | 2 +- .../react/list-story-with-unchecked-children.ts.mdx | 4 +++- docs/snippets/react/loader-story.js.mdx | 2 +- docs/snippets/react/mock-context-container-provider.js.mdx | 2 +- docs/snippets/react/mock-context-container.js.mdx | 2 +- docs/snippets/react/mock-context-create.js.mdx | 2 +- docs/snippets/react/mock-context-in-use.js.mdx | 2 +- .../react/my-component-story-basic-and-props.js.mdx | 2 +- .../react/my-component-story-configure-viewports.js.mdx | 2 +- docs/snippets/react/my-component-story-with-nonstory.js.mdx | 2 +- docs/snippets/react/my-component-with-env-variables.js.mdx | 2 +- docs/snippets/react/my-component-with-env-variables.ts.mdx | 2 +- docs/snippets/react/page-story-slots.js.mdx | 2 +- docs/snippets/react/page-story-slots.ts.mdx | 4 ++-- docs/snippets/react/page-story-with-args-composition.js.mdx | 2 +- docs/snippets/react/page-story-with-args-composition.ts.mdx | 4 ++-- docs/snippets/react/page-story.js.mdx | 2 +- docs/snippets/react/page-story.ts.mdx | 2 +- docs/snippets/react/simple-page-implementation.js.mdx | 2 +- docs/snippets/react/simple-page-implementation.ts.mdx | 2 +- .../react/table-story-fully-customize-controls.js.mdx | 2 +- docs/snippets/react/your-component.js.mdx | 2 +- docs/snippets/react/your-component.ts.mdx | 6 +++--- docs/writing-stories/introduction.md | 4 ++-- docs/writing-stories/parameters.md | 4 ++-- 132 files changed, 153 insertions(+), 147 deletions(-) diff --git a/docs/essentials/auto-generated-controls/react.mdx b/docs/essentials/auto-generated-controls/react.mdx index bf2f23322192..ab1b01981cfd 100644 --- a/docs/essentials/auto-generated-controls/react.mdx +++ b/docs/essentials/auto-generated-controls/react.mdx @@ -1,6 +1,8 @@ To use auto-detected controls with React, you must fill in the `component` field in your story metadata: ```ts +// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx + import { Button } from './Button'; export default { diff --git a/docs/essentials/introduction.md b/docs/essentials/introduction.md index 8a466018730a..96356b3b135d 100644 --- a/docs/essentials/introduction.md +++ b/docs/essentials/introduction.md @@ -29,6 +29,8 @@ npm install --save-dev @storybook/addon-essentials Update your Storybook configuration (in `.storybook/main.js`) to include the essentials addon. ```js +// .storybook/main.js + module.exports = { addons: ['@storybook/addon-essentials'], }; diff --git a/docs/snippets/common/badge-story-custom-argtypes.js.mdx b/docs/snippets/common/badge-story-custom-argtypes.js.mdx index 4dd612f905e0..7ffb54787e47 100644 --- a/docs/snippets/common/badge-story-custom-argtypes.js.mdx +++ b/docs/snippets/common/badge-story-custom-argtypes.js.mdx @@ -1,5 +1,5 @@ ```js -// Badge.stories.js | Badge.stories.ts +// Badge.stories.js | Badge.stories.jsx | Badge.stories.ts | Badge.stories.tsx export default { component: Badge, diff --git a/docs/snippets/common/button-group-story-subcomponents.js.mdx b/docs/snippets/common/button-group-story-subcomponents.js.mdx index 1522fe77d830..27c2aa1d48f6 100644 --- a/docs/snippets/common/button-group-story-subcomponents.js.mdx +++ b/docs/snippets/common/button-group-story-subcomponents.js.mdx @@ -1,5 +1,5 @@ ```js -// ButtonGroup.stories.js +// ButtonGroup.stories.js | ButtonGroup.stories.jsx import { Button, ButtonGroup } from '../ButtonGroup'; diff --git a/docs/snippets/common/button-group-story-subcomponents.ts.mdx b/docs/snippets/common/button-group-story-subcomponents.ts.mdx index 53da77dce0a9..d5657305d92a 100644 --- a/docs/snippets/common/button-group-story-subcomponents.ts.mdx +++ b/docs/snippets/common/button-group-story-subcomponents.ts.mdx @@ -1,5 +1,5 @@ ```ts -// ButtonGroup.stories.ts +// ButtonGroup.stories.ts | ButtonGroup.stories.tsx import { Meta } from '@storybook/react/types-6-0'; 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 f40b1655e1cb..653e01aef496 100644 --- a/docs/snippets/common/button-story-action-event-handle.js.mdx +++ b/docs/snippets/common/button-story-action-event-handle.js.mdx @@ -1,5 +1,5 @@ ```js -// Button.stories.js | Button.stories.ts +// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx export default { title: 'Button', 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 716aec51d730..cf247036634e 100644 --- a/docs/snippets/common/button-story-argtypes-with-categories.js.mdx +++ b/docs/snippets/common/button-story-argtypes-with-categories.js.mdx @@ -1,5 +1,5 @@ ```js -// Button.stories.js | Button.stories.ts +// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx export default { title: 'Button', 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 9bba6a872970..62e7cf67ebb9 100644 --- a/docs/snippets/common/button-story-argtypes-with-subcategories.js.mdx +++ b/docs/snippets/common/button-story-argtypes-with-subcategories.js.mdx @@ -1,5 +1,5 @@ ```js -// Button.stories.js | Button.stories.ts +// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx export default { title: 'Button', diff --git a/docs/snippets/common/button-story-controls-primary-variant.js.mdx b/docs/snippets/common/button-story-controls-primary-variant.js.mdx index 8a5d6615f6f3..f36addd2d26d 100644 --- a/docs/snippets/common/button-story-controls-primary-variant.js.mdx +++ b/docs/snippets/common/button-story-controls-primary-variant.js.mdx @@ -1,5 +1,5 @@ ```js -// Button.stories.js +// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx const Primary = Template.bind({}); Primary.args = { diff --git a/docs/snippets/common/button-story-controls-radio-group.js.mdx b/docs/snippets/common/button-story-controls-radio-group.js.mdx index fa59e415b90a..1806575b7996 100644 --- a/docs/snippets/common/button-story-controls-radio-group.js.mdx +++ b/docs/snippets/common/button-story-controls-radio-group.js.mdx @@ -1,5 +1,5 @@ ```js -// Button.stories.js +// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx export default { title: 'Button', diff --git a/docs/snippets/common/button-story-default-export.js.mdx b/docs/snippets/common/button-story-default-export.js.mdx index deb7867e2ef1..ec2b02425fd7 100644 --- a/docs/snippets/common/button-story-default-export.js.mdx +++ b/docs/snippets/common/button-story-default-export.js.mdx @@ -1,7 +1,7 @@ ```js -// Button.stories.js | Button.stories.ts +// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx export default { - title: 'Button' -} + title: 'Button', +}; ``` \ No newline at end of file diff --git a/docs/snippets/common/button-story-disable-addon.js.mdx b/docs/snippets/common/button-story-disable-addon.js.mdx index e413e812141c..84656a63b51e 100644 --- a/docs/snippets/common/button-story-disable-addon.js.mdx +++ b/docs/snippets/common/button-story-disable-addon.js.mdx @@ -1,5 +1,5 @@ ```js -// Button.stories.js | Button.stories.ts +// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx export default { title: 'Button', 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 08d0f98ad4f0..9acd2461f7ba 100644 --- a/docs/snippets/common/button-story-disable-docspage-component.js.mdx +++ b/docs/snippets/common/button-story-disable-docspage-component.js.mdx @@ -1,5 +1,5 @@ ```js -// Button.stories.js | Button.stories.ts +// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx import { Button } from './Button'; 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 10357521bce4..c4130f7d16f2 100644 --- a/docs/snippets/common/button-story-docs-code-type.js.mdx +++ b/docs/snippets/common/button-story-docs-code-type.js.mdx @@ -1,5 +1,5 @@ ```js -// Button.stories.js | Button.stories.ts +// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx export default { title: 'Button', @@ -10,7 +10,7 @@ export default { parameters: { docs: { source: { - type: 'code' + type: 'code', } } } diff --git a/docs/snippets/common/button-story-docspage-with-custom-component.js.mdx b/docs/snippets/common/button-story-docspage-with-custom-component.js.mdx index cc24230dd019..1cfd5c698d85 100644 --- a/docs/snippets/common/button-story-docspage-with-custom-component.js.mdx +++ b/docs/snippets/common/button-story-docspage-with-custom-component.js.mdx @@ -1,5 +1,5 @@ ```js -// Button.stories.js | Button.stories.ts +// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx import { Button } from './Button'; diff --git a/docs/snippets/common/button-story-docspage-with-mdx.js.mdx b/docs/snippets/common/button-story-docspage-with-mdx.js.mdx index a75971cf2d92..e81d979d98cf 100644 --- a/docs/snippets/common/button-story-docspage-with-mdx.js.mdx +++ b/docs/snippets/common/button-story-docspage-with-mdx.js.mdx @@ -1,6 +1,5 @@ ```js - -// Button.stories.js | Button.stories.ts +// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx import { Button } from './Button'; diff --git a/docs/snippets/common/button-story-grouped.js.mdx b/docs/snippets/common/button-story-grouped.js.mdx index e08768ce609c..94c157e22f0d 100644 --- a/docs/snippets/common/button-story-grouped.js.mdx +++ b/docs/snippets/common/button-story-grouped.js.mdx @@ -1,7 +1,7 @@ ```js -// Button.stories.js | Button.stories.ts +// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx export default { - title: 'Design System/Atoms/Button' -} + title: 'Design System/Atoms/Button', +}; ``` \ 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 dbabf7734b1e..bee9dd999ac9 100644 --- a/docs/snippets/common/button-story-hide-nocontrols-warning.js.mdx +++ b/docs/snippets/common/button-story-hide-nocontrols-warning.js.mdx @@ -1,5 +1,5 @@ ```js -// Button.stories.js | Button.stories.ts +// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx export const Large = Template.bind({}); diff --git a/docs/snippets/common/button-story-hoisted.js.mdx b/docs/snippets/common/button-story-hoisted.js.mdx index 1facba381002..f47bd55e388b 100644 --- a/docs/snippets/common/button-story-hoisted.js.mdx +++ b/docs/snippets/common/button-story-hoisted.js.mdx @@ -1,5 +1,5 @@ ```js -// Button.stories.js | Button.stories.ts +// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx import { Button as ButtonComponent } from './Button'; diff --git a/docs/snippets/common/button-story-matching-argtypes.js.mdx b/docs/snippets/common/button-story-matching-argtypes.js.mdx index c3e034294ec3..d2b13c760c9a 100644 --- a/docs/snippets/common/button-story-matching-argtypes.js.mdx +++ b/docs/snippets/common/button-story-matching-argtypes.js.mdx @@ -1,5 +1,5 @@ ```js -// Button.stories.js | Button.stories.ts +// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx export default { title: 'Button', diff --git a/docs/snippets/common/button-story-onclick-action-argtype.js.mdx b/docs/snippets/common/button-story-onclick-action-argtype.js.mdx index b43af8fd9dca..4b6fd2c0735e 100644 --- a/docs/snippets/common/button-story-onclick-action-argtype.js.mdx +++ b/docs/snippets/common/button-story-onclick-action-argtype.js.mdx @@ -1,5 +1,5 @@ ```js -// Button.stories.js | Button.stories.ts +// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx export default { title: 'Button', diff --git a/docs/snippets/common/button-story-primary-composition.js.mdx b/docs/snippets/common/button-story-primary-composition.js.mdx index 63332e4c58ea..17aaf25b50f3 100644 --- a/docs/snippets/common/button-story-primary-composition.js.mdx +++ b/docs/snippets/common/button-story-primary-composition.js.mdx @@ -1,5 +1,5 @@ ```js -// Button.stories.js | Button.stories.ts +// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx const Primary = ButtonStory.bind({}); Primary.args = { diff --git a/docs/snippets/common/button-story-primary-long-name.js.mdx b/docs/snippets/common/button-story-primary-long-name.js.mdx index 8c6473ff8512..265e78970bf2 100644 --- a/docs/snippets/common/button-story-primary-long-name.js.mdx +++ b/docs/snippets/common/button-story-primary-long-name.js.mdx @@ -1,5 +1,5 @@ ```js -// Button.stories.js | Button.stories.ts +// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx export const PrimaryLongName = Template.bind({}); diff --git a/docs/snippets/common/button-story-remix-docspage.js.mdx b/docs/snippets/common/button-story-remix-docspage.js.mdx index f081164723dd..3543dff88f8e 100644 --- a/docs/snippets/common/button-story-remix-docspage.js.mdx +++ b/docs/snippets/common/button-story-remix-docspage.js.mdx @@ -1,5 +1,5 @@ ```js -// Button.stories.js +// Button.stories.js | Button.stories.jsx import React from 'react'; diff --git a/docs/snippets/common/button-story-remix-docspage.ts.mdx b/docs/snippets/common/button-story-remix-docspage.ts.mdx index ed56362b453e..0fc74186b286 100644 --- a/docs/snippets/common/button-story-remix-docspage.ts.mdx +++ b/docs/snippets/common/button-story-remix-docspage.ts.mdx @@ -1,5 +1,5 @@ ```ts -// Button.stories.tsx +// Button.stories.ts | Button.stories.tsx import React from 'react'; diff --git a/docs/snippets/common/button-story-with-parameters.js.mdx b/docs/snippets/common/button-story-with-parameters.js.mdx index 6d825b6920da..0664a5d6e430 100644 --- a/docs/snippets/common/button-story-with-parameters.js.mdx +++ b/docs/snippets/common/button-story-with-parameters.js.mdx @@ -1,5 +1,5 @@ ```js -// Button.stories.js +// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx export const Primary = Template.bind({}); Primary.args ={ diff --git a/docs/snippets/common/checkbox-story-csf.js.mdx b/docs/snippets/common/checkbox-story-csf.js.mdx index bd693ded4c3f..4a114f056add 100644 --- a/docs/snippets/common/checkbox-story-csf.js.mdx +++ b/docs/snippets/common/checkbox-story-csf.js.mdx @@ -1,11 +1,11 @@ ```js -// Checkbox.stories.js +// Checkbox.stories.js | Checkbox.stories.jsx import { Checkbox } from './Checkbox'; export default { - title: 'MDX/Checkbox', - component: Checkbox + title: 'MDX/Checkbox', + component: Checkbox, }; const Template = (args) => diff --git a/docs/snippets/common/checkbox-story-grouped.js.mdx b/docs/snippets/common/checkbox-story-grouped.js.mdx index 9d9a5febc842..86c94be35218 100644 --- a/docs/snippets/common/checkbox-story-grouped.js.mdx +++ b/docs/snippets/common/checkbox-story-grouped.js.mdx @@ -1,7 +1,7 @@ ```js -// Checkbox.stories.js | Checkbox.stories.ts +// Checkbox.stories.js | Checkbox.stories.jsx | Checkbox.stories.ts | Checkbox.stories.tsx export default { - title: 'Design System/Atoms/Checkbox' -} + title: 'Design System/Atoms/Checkbox', +}; ``` \ 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 5ec147578992..cb343482cbec 100644 --- a/docs/snippets/common/component-story-csf-argstable-customization.js.mdx +++ b/docs/snippets/common/component-story-csf-argstable-customization.js.mdx @@ -1,5 +1,5 @@ ```js -// Button.stories.js | Button.stories.ts +// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx export default { title: 'Button', diff --git a/docs/snippets/common/component-story-csf-description.js.mdx b/docs/snippets/common/component-story-csf-description.js.mdx index a4072d78927c..846e38ef6da0 100644 --- a/docs/snippets/common/component-story-csf-description.js.mdx +++ b/docs/snippets/common/component-story-csf-description.js.mdx @@ -1,5 +1,5 @@ ```js -// Button.stories.js | Button.stories.ts +// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx export default { title: 'CustomDescription', 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 e10a61d9eb7c..c80bbf2f0862 100644 --- a/docs/snippets/common/component-story-custom-args-mapping.js.mdx +++ b/docs/snippets/common/component-story-custom-args-mapping.js.mdx @@ -1,5 +1,5 @@ ```js -// Button.stories.js +// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx import { Button } from './button'; import { ArrowUp, ArrowDown, ArrowLeft, ArrowRight } from './icons'; diff --git a/docs/snippets/common/component-story-custom-source.js.mdx b/docs/snippets/common/component-story-custom-source.js.mdx index 353c4e972595..44ea73c129a2 100644 --- a/docs/snippets/common/component-story-custom-source.js.mdx +++ b/docs/snippets/common/component-story-custom-source.js.mdx @@ -1,5 +1,5 @@ ```js -// Button.stories.js | Button.stories.ts +// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx export const CustomSource = () => Template.bind({}); diff --git a/docs/snippets/common/component-story-disable-controls-alt.js.mdx b/docs/snippets/common/component-story-disable-controls-alt.js.mdx index 7778a6fab407..9d208e4b5447 100644 --- a/docs/snippets/common/component-story-disable-controls-alt.js.mdx +++ b/docs/snippets/common/component-story-disable-controls-alt.js.mdx @@ -1,5 +1,5 @@ ```js -// YourComponent.stories.js | YourComponent.stories.ts +// YourComponent.stories.js | YourComponent.stories.jsx | YourComponent.stories.ts | YourComponent.stories.tsx import { YourComponent } from './your-component' 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 a9f303658197..f2c55298d61e 100644 --- a/docs/snippets/common/component-story-disable-controls-regex.js.mdx +++ b/docs/snippets/common/component-story-disable-controls-regex.js.mdx @@ -1,5 +1,5 @@ ```js -// YourComponent.stories.js | YourComponent.stories.ts +// YourComponent.stories.js | YourComponent.stories.jsx | YourComponent.stories.ts | YourComponent.stories.tsx ArrayInclude = Template.bind({}) ArrayInclude.parameters = { controls: { include: ['foo', 'bar'] } }; diff --git a/docs/snippets/common/component-story-disable-controls.js.mdx b/docs/snippets/common/component-story-disable-controls.js.mdx index 818ea786e7bf..02494573a959 100644 --- a/docs/snippets/common/component-story-disable-controls.js.mdx +++ b/docs/snippets/common/component-story-disable-controls.js.mdx @@ -1,5 +1,5 @@ ```js -// YourComponent.stories.js | YourComponent.stories.ts +// YourComponent.stories.js | YourComponent.stories.jsx | YourComponent.stories.ts | YourComponent.stories.tsx import { YourComponent } from './your-component' diff --git a/docs/snippets/common/component-story-dynamic-title.js.mdx b/docs/snippets/common/component-story-dynamic-title.js.mdx index 47d464d21335..7a0d96736792 100644 --- a/docs/snippets/common/component-story-dynamic-title.js.mdx +++ b/docs/snippets/common/component-story-dynamic-title.js.mdx @@ -1,5 +1,5 @@ ```js -// MyComponent.stories.js | MyComponent.stories.ts +// MyComponent.stories.js | MyComponent.stories.jsx | MyComponent.stories.ts | MyComponent.stories.tsx import base from 'paths.macro'; diff --git a/docs/snippets/common/component-story-sort-controls.js.mdx b/docs/snippets/common/component-story-sort-controls.js.mdx index 6a816951b85a..65f4ee7f9ae6 100644 --- a/docs/snippets/common/component-story-sort-controls.js.mdx +++ b/docs/snippets/common/component-story-sort-controls.js.mdx @@ -1,5 +1,5 @@ ```js -// YourComponent.stories.js | YourComponent.stories.ts +// YourComponent.stories.js | YourComponent.stories.jsx | YourComponent.stories.ts | YourComponent.stories.tsx import { YourComponent } from './your-component' diff --git a/docs/snippets/common/custom-docs-page.ts-component.ts.mdx b/docs/snippets/common/custom-docs-page.ts-component.ts.mdx index af66d57a8e2b..402274308b79 100644 --- a/docs/snippets/common/custom-docs-page.ts-component.ts.mdx +++ b/docs/snippets/common/custom-docs-page.ts-component.ts.mdx @@ -3,7 +3,7 @@ import React from 'react'; -export const CustomDocumentationComponent: React.FC<{}> = () => { +export const CustomDocumentationComponent: React.VFC<{}> = () => { return (

Replacing DocsPage with a custom component

diff --git a/docs/snippets/common/foo-bar-baz-story.js.mdx b/docs/snippets/common/foo-bar-baz-story.js.mdx index 3e87aad910f8..5815debcec68 100644 --- a/docs/snippets/common/foo-bar-baz-story.js.mdx +++ b/docs/snippets/common/foo-bar-baz-story.js.mdx @@ -1,5 +1,5 @@ ```js -// FooBar.stories.js | FooBar.stories.ts +// FooBar.stories.js | FooBar.stories.jsx | FooBar.stories.ts | FooBar.stories.tsx export default { title: 'Foo/Bar', diff --git a/docs/snippets/common/gizmo-story-controls-customization.js.mdx b/docs/snippets/common/gizmo-story-controls-customization.js.mdx index 1b090b4d1403..36501155756d 100644 --- a/docs/snippets/common/gizmo-story-controls-customization.js.mdx +++ b/docs/snippets/common/gizmo-story-controls-customization.js.mdx @@ -1,5 +1,5 @@ ```js -// Gizmo.stories.js | Gizmo.stories.ts +// Gizmo.stories.js | Gizmo.stories.jsx | Gizmo.stories.ts | Gizmo.stories.tsx export default { title: 'Gizmo', diff --git a/docs/snippets/common/my-component-story-import-json.js.mdx b/docs/snippets/common/my-component-story-import-json.js.mdx index 9265c9d195ce..56b0e6431166 100644 --- a/docs/snippets/common/my-component-story-import-json.js.mdx +++ b/docs/snippets/common/my-component-story-import-json.js.mdx @@ -1,5 +1,5 @@ ```js -// MyComponent.stories.js | MyComponent.stories.ts +// MyComponent.stories.js | MyComponent.stories.jsx | MyComponent.stories.ts | MyComponent.stories.tsx // This will automatically be parsed to the contents of `data.json` import data from './data.json'; diff --git a/docs/snippets/common/my-component-story-import-static-asset.js.mdx b/docs/snippets/common/my-component-story-import-static-asset.js.mdx index 816ad32dc8b1..8aa950ac4c07 100644 --- a/docs/snippets/common/my-component-story-import-static-asset.js.mdx +++ b/docs/snippets/common/my-component-story-import-static-asset.js.mdx @@ -1,5 +1,5 @@ ```js -// MyComponent.stories.js | MyComponent.stories.ts +// MyComponent.stories.js | MyComponent.stories.jsx | MyComponent.stories.ts | MyComponent.stories.tsx // This will include './static/image.png' in the bundle. // And return a path to be included in a src attribute diff --git a/docs/snippets/common/my-component-story-mandatory-export.js.mdx b/docs/snippets/common/my-component-story-mandatory-export.js.mdx index 4ec694947a11..3aa3727adb73 100644 --- a/docs/snippets/common/my-component-story-mandatory-export.js.mdx +++ b/docs/snippets/common/my-component-story-mandatory-export.js.mdx @@ -1,5 +1,5 @@ ```js -// MyComponent.story.js +// MyComponent.story.js | MyComponent.story.jsx | MyComponent.story.ts | MyComponent.story.tsx import MyComponent from './MyComponent'; diff --git a/docs/snippets/common/my-component-story-use-globaltype-backwards-compat.js.mdx b/docs/snippets/common/my-component-story-use-globaltype-backwards-compat.js.mdx index 0ad97aa8bad1..4e588b246c7b 100644 --- a/docs/snippets/common/my-component-story-use-globaltype-backwards-compat.js.mdx +++ b/docs/snippets/common/my-component-story-use-globaltype-backwards-compat.js.mdx @@ -1,5 +1,5 @@ ```js -// MyComponent.stories.js +// MyComponent.stories.js | MyComponent.stories.jsx | MyComponent.stories.ts | MyComponent.stories.tsx export const StoryWithLocale = ({ globals: { locale } }) => { const caption = getCaptionForLocale(locale); 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 dbf97c01c7ed..d6aaff1e96dc 100644 --- a/docs/snippets/common/my-component-story-use-globaltype.js.mdx +++ b/docs/snippets/common/my-component-story-use-globaltype.js.mdx @@ -1,5 +1,5 @@ ```js -// MyComponent.stories.js +// MyComponent.stories.js | MyComponent.stories.jsx | MyComponent.stories.ts | MyComponent.stories.tsx const getCaptionForLocale = (locale) => { switch(locale) { diff --git a/docs/snippets/common/my-component-story-with-storyname.js.mdx b/docs/snippets/common/my-component-story-with-storyname.js.mdx index 1b02fba82219..612c7e0478a2 100644 --- a/docs/snippets/common/my-component-story-with-storyname.js.mdx +++ b/docs/snippets/common/my-component-story-with-storyname.js.mdx @@ -1,5 +1,5 @@ ```js -// MyComponent.stories.js +// MyComponent.story.js | MyComponent.story.jsx | MyComponent.story.ts | MyComponent.story.tsx export const Simple = () => ; diff --git a/docs/snippets/common/my-component-story.js.mdx b/docs/snippets/common/my-component-story.js.mdx index 7bef33659bc4..0adef68983c9 100644 --- a/docs/snippets/common/my-component-story.js.mdx +++ b/docs/snippets/common/my-component-story.js.mdx @@ -1,5 +1,5 @@ ```js -// MyComponent.stories.js | MyComponent.stories.ts +// MyComponent.stories.js | MyComponent.stories.jsx | MyComponent.stories.ts | MyComponent.stories.tsx import { MyComponent } from './MyComponent'; diff --git a/docs/snippets/common/other-foo-bar-story.js.mdx b/docs/snippets/common/other-foo-bar-story.js.mdx index 65ba2e3bac9c..482d8a60e39b 100644 --- a/docs/snippets/common/other-foo-bar-story.js.mdx +++ b/docs/snippets/common/other-foo-bar-story.js.mdx @@ -1,5 +1,5 @@ ```js -// FooBar.stories.js | FooBar.stories.ts +// FooBar.stories.js | FooBar.stories.jsx | FooBar.stories.ts | FooBar.stories.tsx export default { title: 'OtherFoo/Bar', diff --git a/docs/snippets/common/storybook-addon-backgrounds-configure-backgrounds.js.mdx b/docs/snippets/common/storybook-addon-backgrounds-configure-backgrounds.js.mdx index 7db76a4ecf58..77d4cd2084a8 100644 --- a/docs/snippets/common/storybook-addon-backgrounds-configure-backgrounds.js.mdx +++ b/docs/snippets/common/storybook-addon-backgrounds-configure-backgrounds.js.mdx @@ -1,5 +1,5 @@ ```js -// Button.stories.js | Button.stories.ts +// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx // To apply a set of backgrounds to all stories of Button: export default { 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 12af04ed3de0..6f321c920850 100644 --- a/docs/snippets/common/storybook-addon-backgrounds-configure-grid.js.mdx +++ b/docs/snippets/common/storybook-addon-backgrounds-configure-grid.js.mdx @@ -1,5 +1,5 @@ ```js -// Button.stories.js | Button.stories.ts +// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx // To apply a grid to all stories of Button: export default { diff --git a/docs/snippets/common/storybook-addon-backgrounds-disable-backgrounds.js.mdx b/docs/snippets/common/storybook-addon-backgrounds-disable-backgrounds.js.mdx index 114e733b8d5a..6ff2e2b676a1 100644 --- a/docs/snippets/common/storybook-addon-backgrounds-disable-backgrounds.js.mdx +++ b/docs/snippets/common/storybook-addon-backgrounds-disable-backgrounds.js.mdx @@ -1,5 +1,5 @@ ```js -// Button.stories.js | Button.stories.ts +// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx export const Large = Template.bind({}); Large.parameters = { 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 32191fc1cd16..2946c92062b9 100644 --- a/docs/snippets/common/storybook-addon-backgrounds-disable-grid.js.mdx +++ b/docs/snippets/common/storybook-addon-backgrounds-disable-grid.js.mdx @@ -1,11 +1,11 @@ ```js -// Button.stories.js | Button.stories.ts +// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx export const Large = Template.bind({}); Large.parameters = { backgrounds: { grid: { - disable: true + disable: true, } } }; diff --git a/docs/snippets/common/storybook-addon-backgrounds-override-background-color.js.mdx b/docs/snippets/common/storybook-addon-backgrounds-override-background-color.js.mdx index 7b3832caa637..c11b02c7a26e 100644 --- a/docs/snippets/common/storybook-addon-backgrounds-override-background-color.js.mdx +++ b/docs/snippets/common/storybook-addon-backgrounds-override-background-color.js.mdx @@ -1,5 +1,5 @@ ```js -// Button.stories.js | Button.stories.ts +// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx export const Large = Template.bind({}); Large.parameters = { diff --git a/docs/snippets/common/storybook-component-layout-param.js.mdx b/docs/snippets/common/storybook-component-layout-param.js.mdx index d1f4ba54cede..36098b96b765 100644 --- a/docs/snippets/common/storybook-component-layout-param.js.mdx +++ b/docs/snippets/common/storybook-component-layout-param.js.mdx @@ -1,5 +1,5 @@ ```js -// Button.stories.js | Button.stories.ts +// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx import Button from './Button'; diff --git a/docs/snippets/common/storybook-customize-argtypes.js.mdx b/docs/snippets/common/storybook-customize-argtypes.js.mdx index 38972b03a1b6..7a45d3876c17 100644 --- a/docs/snippets/common/storybook-customize-argtypes.js.mdx +++ b/docs/snippets/common/storybook-customize-argtypes.js.mdx @@ -1,5 +1,5 @@ ```js -// Button.stories.js +// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx export default { title: 'Button', diff --git a/docs/snippets/common/storybook-story-layout-param.js.mdx b/docs/snippets/common/storybook-story-layout-param.js.mdx index d39352bab539..66669c9585ec 100644 --- a/docs/snippets/common/storybook-story-layout-param.js.mdx +++ b/docs/snippets/common/storybook-story-layout-param.js.mdx @@ -1,5 +1,5 @@ ```js -// Button.stories.js | Button.stories.ts +// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx export const WithLayout = Template.bind({}); WithLayout.parameters = { diff --git a/docs/snippets/react/app-story-with-mock.js.mdx b/docs/snippets/react/app-story-with-mock.js.mdx index d39a3953d2c6..db4426bd71b5 100644 --- a/docs/snippets/react/app-story-with-mock.js.mdx +++ b/docs/snippets/react/app-story-with-mock.js.mdx @@ -1,5 +1,5 @@ ```js -// App.stories.js +// App.stories.js | App.stories.jsx | App.stories.ts | App.stories.tsx import React from 'react'; diff --git a/docs/snippets/react/button-component-with-proptypes.js.mdx b/docs/snippets/react/button-component-with-proptypes.js.mdx index a89b0a8fe460..c0ed93eee7ac 100644 --- a/docs/snippets/react/button-component-with-proptypes.js.mdx +++ b/docs/snippets/react/button-component-with-proptypes.js.mdx @@ -1,5 +1,5 @@ ```js -// Button.js +// Button.js | Button.jsx import React from 'react'; diff --git a/docs/snippets/react/button-component-with-proptypes.ts.mdx b/docs/snippets/react/button-component-with-proptypes.ts.mdx index 8d36c40cb46f..9086f82d0201 100644 --- a/docs/snippets/react/button-component-with-proptypes.ts.mdx +++ b/docs/snippets/react/button-component-with-proptypes.ts.mdx @@ -1,5 +1,5 @@ ```ts -// Button.tsx +// Button.ts | Button.tsx import React from 'react'; diff --git a/docs/snippets/react/button-group-story.js.mdx b/docs/snippets/react/button-group-story.js.mdx index 68509b2b1728..7b033e48af4c 100644 --- a/docs/snippets/react/button-group-story.js.mdx +++ b/docs/snippets/react/button-group-story.js.mdx @@ -1,5 +1,5 @@ ```js -// ButtonGroup.stories.js +// ButtonGroup.stories.js | ButtonGroup.stories.jsx import React from 'react'; diff --git a/docs/snippets/react/button-group-story.ts.mdx b/docs/snippets/react/button-group-story.ts.mdx index cfb2f5281292..b6bcf985a34f 100644 --- a/docs/snippets/react/button-group-story.ts.mdx +++ b/docs/snippets/react/button-group-story.ts.mdx @@ -1,5 +1,5 @@ ```ts -// ButtonGroup.stories.tsx +// ButtonGroup.stories.ts | ButtonGroup.stories.tsx import React from 'react'; diff --git a/docs/snippets/react/button-implementation.js.mdx b/docs/snippets/react/button-implementation.js.mdx index 45135e517751..b45bca83ecde 100644 --- a/docs/snippets/react/button-implementation.js.mdx +++ b/docs/snippets/react/button-implementation.js.mdx @@ -1,5 +1,5 @@ ```js -// Button.js +// Button.js | Button.jsx import React from 'react'; diff --git a/docs/snippets/react/button-implementation.ts.mdx b/docs/snippets/react/button-implementation.ts.mdx index 34ff8b42a2b0..8d406fcfb038 100644 --- a/docs/snippets/react/button-implementation.ts.mdx +++ b/docs/snippets/react/button-implementation.ts.mdx @@ -1,5 +1,5 @@ ```ts -// Button.ts +// Button.ts | Button.tsx import React from 'react'; diff --git a/docs/snippets/react/button-story-click-handler-args.js.mdx b/docs/snippets/react/button-story-click-handler-args.js.mdx index e9ceab29ccca..e35cfba2a78e 100644 --- a/docs/snippets/react/button-story-click-handler-args.js.mdx +++ b/docs/snippets/react/button-story-click-handler-args.js.mdx @@ -1,5 +1,5 @@ ```js -// Button.stories.js +// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx export const Text = ({ label, onClick }) =>