Merge pull request #22820 from storybookjs/chore_docs_removes_title

Chore: (Docs) Snippets updates
storybookjs · May 26, 2023 · 0e12f70 · 0e12f70
2 parents 5bb9a26 + 2acec25
commit 0e12f70
Show file tree

Hide file tree

Showing 879 changed files with 225 additions and 4,347 deletions.
diff --git a/docs/api/csf.md b/docs/api/csf.md
@@ -8,13 +8,13 @@ Component Story Format (CSF) is the recommended way to [write stories](../writin
 
 <div class="aside">
 
-💡 If you are writing stories in the older `storiesOf()` syntax, you can find documentation in an [advanced README](../../lib/preview-api/docs/storiesOf.md).
+💡 If you are writing stories in the older `storiesOf()` syntax, you can find documentation in an [advanced README](https://github.com/storybookjs/storybook/blob/next/code/lib/preview-api/docs/storiesOf.md).
 
 </div>
 
 In CSF, stories and component metadata are defined as ES Modules. Every component story file consists of a required [default export](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export#Using_the_default_export) and one or more [named exports](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export).
 
-CSF is supported in all frameworks except React Native, where you should use the [storiesOf API](../../lib/preview-api/docs/storiesOf.md) instead.
+CSF is supported in all frameworks except React Native, where you should use the [storiesOf API](https://github.com/storybookjs/storybook/blob/next/code/lib/preview-api/docs/storiesOf.md) instead.
 
 ## Default export
 

diff --git a/docs/configure/images-and-assets.md b/docs/configure/images-and-assets.md
@@ -6,7 +6,7 @@ Components often rely on images, videos, fonts, and other assets to render as th
 
 ### Import assets into stories
 
-You can import any media assets by importing (or requiring) them. It works out of the box with our default config. But, if you are using a custom webpack config, you’ll need to add the [file loader](https://v4.webpack.js.org/loaders/) to handle the required files.
+You can import any media assets by importing (or requiring) them. It works out of the box with our default config. But, if you are using a custom webpack config, you’ll need to add the [file loader](https://webpack.js.org/loaders/) to handle the required files.
 
 Afterward, you can use any asset in your stories:
 
@@ -149,4 +149,4 @@ Inside the `.storybook/` configuration folder, create `preview-head.html`, then
 <CodeSnippets
   paths={['common/storybook-preview-head-example.html.mdx']} />
 
-<!-- prettier-ignore-end -->
+<!-- prettier-ignore-end -->
diff --git a/docs/essentials/auto-generated-controls/angular.mdx b/docs/essentials/auto-generated-controls/angular.mdx
@@ -4,7 +4,6 @@ To use auto-detected controls with Angular, you must fill in the `component` fie
 import { Button } from './button.component';
 
 export default {
-  title: 'Button',
   component: Button,
 };
 ```

diff --git a/docs/essentials/auto-generated-controls/ember.mdx b/docs/essentials/auto-generated-controls/ember.mdx
@@ -24,7 +24,6 @@ Finally, to use auto-detected controls with Ember, you must fill in the `compone
 
 ```ts
 export default {
-  title: 'Button',
   component: 'button', // name of your button component from docgen-json file (index.js)
 };
 ```
diff --git a/docs/essentials/auto-generated-controls/react.mdx b/docs/essentials/auto-generated-controls/react.mdx
@@ -1,12 +1,11 @@
 To use auto-detected controls with React, you must fill in the `component` field in your story metadata:
 
-```ts
+```js
 // Button.stories.js|jsx|ts|tsx
 
 import { Button } from './Button';
 
 export default {
-  title: 'Button',
   component: Button,
 };
 ```

diff --git a/docs/essentials/auto-generated-controls/vue.mdx b/docs/essentials/auto-generated-controls/vue.mdx
@@ -1,10 +1,9 @@
 To use auto-detected controls with Vue, you must fill in the `component` field in your story metadata:
 
-```ts
+```js
 import { Button } from './Button.vue';
 
 export default {
-  title: 'Button',
   component: Button,
 };
 ```

diff --git a/docs/essentials/auto-generated-controls/web-components.mdx b/docs/essentials/auto-generated-controls/web-components.mdx
@@ -1,9 +1,8 @@
 To use auto-detected controls with Web components, you must fill in the `component` field in your story metadata:
 
-```ts
+```js
 export default {
-  title: 'Button',
-  component: 'button', // name of your button component
+  component: 'button', 
 };
 ```
 

diff --git a/docs/snippets/angular/app-story-with-mock.ts.mdx b/docs/snippets/angular/app-story-with-mock.ts.mdx
@@ -6,7 +6,6 @@ import type { Meta, StoryObj } from '@storybook/angular';
 import { App } from './app.component';
 
 const meta: Meta<App> = {
-  title: 'App',
   component: App,
 };
 

diff --git a/docs/snippets/angular/button-group-story.ts.mdx b/docs/snippets/angular/button-group-story.ts.mdx
@@ -14,11 +14,6 @@ import { Button } from './button.component';
 import * as ButtonStories from './Button.stories';
 
 const meta: Meta<ButtonGroup> = {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'ButtonGroup',
   component: ButtonGroup,
   decorators: [
     moduleMetadata({
@@ -31,11 +26,6 @@ const meta: Meta<ButtonGroup> = {
 export default meta;
 type Story = StoryObj<ButtonGroup>;
 
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/angular/api/csf
- * to learn how to use render functions.
- */
 export const Pair: Story = {
   args: {
     buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }],

diff --git a/docs/snippets/angular/button-story-action-event-handle.ts.mdx b/docs/snippets/angular/button-story-action-event-handle.ts.mdx
@@ -8,11 +8,6 @@ import { withActions } from '@storybook/addon-actions/decorator';
 import { Button } from './button.component';
 
 const meta: Meta<Button> = {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'Button',
   component: Button,
   parameters: {
     actions: {

diff --git a/docs/snippets/angular/button-story-argtypes-with-categories.ts.mdx b/docs/snippets/angular/button-story-argtypes-with-categories.ts.mdx
@@ -6,11 +6,6 @@ import type { Meta } from '@storybook/angular';
 import { Button } from './button.component';
 
 const meta: Meta<Button> = {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'Button',
   component: Button,
   argTypes: {
     // Assigns the argTypes to the Colors category

diff --git a/docs/snippets/angular/button-story-argtypes-with-subcategories.ts.mdx b/docs/snippets/angular/button-story-argtypes-with-subcategories.ts.mdx
@@ -6,11 +6,6 @@ import type { Meta } from '@storybook/angular';
 import { Button } from './button.component';
 
 const meta: Meta<Button> = {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'Button',
   component: Button,
   argTypes: {
     // Assigns the argTypes to the Colors category

diff --git a/docs/snippets/angular/button-story-auto-docs.ts.mdx b/docs/snippets/angular/button-story-auto-docs.ts.mdx
@@ -6,7 +6,6 @@ import type { Meta, StoryObj } from '@storybook/angular';
 import { Button } from './button.component';
 
 const meta: Meta<Button> = {
-  title: 'Button',
   component: Button,
   //👇 Enables auto-generated documentation for the component story
   tags: ['autodocs'],

diff --git a/docs/snippets/angular/button-story-baseline.ts.mdx b/docs/snippets/angular/button-story-baseline.ts.mdx
@@ -6,11 +6,6 @@ import type { Meta, StoryObj } from '@storybook/angular';
 import { Button } from './button.component';
 
 const meta: Meta<Button> = {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'Button',
   component: Button,
 };
 

diff --git a/docs/snippets/angular/button-story-click-handler-args.ts.mdx b/docs/snippets/angular/button-story-click-handler-args.ts.mdx
@@ -8,11 +8,6 @@ import { action } from '@storybook/addon-actions';
 import { Button } from './button.component';
 
 const meta: Meta<Button> = {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'Button',
   component: Button,
 };
 

diff --git a/docs/snippets/angular/button-story-click-handler-simplificated.ts.mdx b/docs/snippets/angular/button-story-click-handler-simplificated.ts.mdx
@@ -6,11 +6,6 @@ import type { Meta, StoryObj } from '@storybook/angular';
 import { Button } from './button.component';
 
 const meta: Meta<Button> = {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'Button',
   component: Button,
 };
 

diff --git a/docs/snippets/angular/button-story-click-handler.ts.mdx b/docs/snippets/angular/button-story-click-handler.ts.mdx
@@ -8,11 +8,6 @@ import { Button } from './button.component';
 import { action } from '@storybook/addon-actions';
 
 const meta: Meta<Button> = {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'Button',
   component: Button,
 };
 

diff --git a/docs/snippets/angular/button-story-component-args-primary.ts.mdx b/docs/snippets/angular/button-story-component-args-primary.ts.mdx
@@ -6,11 +6,6 @@ import type { Meta } from '@storybook/angular';
 import { Button } from './button.component';
 
 const meta: Meta<Button> = {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'Button',
   component: Button,
   //👇 Creates specific argTypes
   argTypes: {

diff --git a/docs/snippets/angular/button-story-component-decorator.ts.mdx b/docs/snippets/angular/button-story-component-decorator.ts.mdx
@@ -10,11 +10,6 @@ import { Button } from './button.component';
 import { Parent } from './parent.component'; // Parent contains ng-content
 
 const meta: Meta<Button> = {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'Button',
   component: Button,
   decorators: [
     moduleMetadata({

diff --git a/docs/snippets/angular/button-story-controls-primary-variant.ts.mdx b/docs/snippets/angular/button-story-controls-primary-variant.ts.mdx
@@ -6,11 +6,6 @@ import type { Meta, StoryObj } from '@storybook/angular';
 import { Button } from './button.component';
 
 const meta: Meta<Button> = {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'Button',
   component: Button,
 };
 

diff --git a/docs/snippets/angular/button-story-controls-radio-group.ts.mdx b/docs/snippets/angular/button-story-controls-radio-group.ts.mdx
@@ -6,11 +6,6 @@ import type { Meta } from '@storybook/angular';
 import { Button } from './button.component';
 
 const meta: Meta<Button> = {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'Button',
   component: Button,
   argTypes: {
     variant: {

diff --git a/docs/snippets/angular/button-story-decorator.ts.mdx b/docs/snippets/angular/button-story-decorator.ts.mdx
@@ -10,11 +10,6 @@ import { Button } from './button.component';
 import { Parent } from './parent.component'; // Parent contains ng-content
 
 const meta: Meta<Button> = {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'Button',
   component: Button,
 };
 

diff --git a/docs/snippets/angular/button-story-default-export-with-component.ts.mdx b/docs/snippets/angular/button-story-default-export-with-component.ts.mdx
@@ -6,11 +6,6 @@ import type { Meta } from '@storybook/angular';
 import { Button } from './button.component';
 
 const meta: Meta<Button> = {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'Button',
   component: Button,
 };
 

diff --git a/docs/snippets/angular/button-story-disable-addon.ts.mdx b/docs/snippets/angular/button-story-disable-addon.ts.mdx
@@ -6,11 +6,6 @@ import type { Meta } from '@storybook/angular';
 import { Button } from './button.component';
 
 const meta: Meta<Button> = {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'Button',
   component: Button,
   parameters: {
     myAddon: { disable: true }, // Disables the addon

diff --git a/docs/snippets/angular/button-story-hide-nocontrols-warning.ts.mdx b/docs/snippets/angular/button-story-hide-nocontrols-warning.ts.mdx
@@ -6,11 +6,6 @@ import type { Meta, StoryObj } from '@storybook/angular';
 import { Button } from './button.component';
 
 const meta: Meta<Button> = {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'Button',
   component: Button,
 };
 

diff --git a/docs/snippets/angular/button-story-matching-argtypes.ts.mdx b/docs/snippets/angular/button-story-matching-argtypes.ts.mdx
@@ -6,11 +6,6 @@ import type { Meta } from '@storybook/angular';
 import { Button } from './button.component';
 
 const meta: Meta<Button> = {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'Button',
   component: Button,
   parameters: { actions: { argTypesRegex: '^on.*' } },
 };

diff --git a/docs/snippets/angular/button-story-onclick-action-argtype.ts.mdx b/docs/snippets/angular/button-story-onclick-action-argtype.ts.mdx
@@ -6,11 +6,6 @@ import type { Meta, StoryObj } from '@storybook/angular';
 import { Button } from './button.component';
 
 const meta: Meta<Button> = {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'Button',
   component: Button,
   argTypes: { onClick: { action: 'clicked' } },
 };

diff --git a/docs/snippets/angular/button-story-primary-composition.ts.mdx b/docs/snippets/angular/button-story-primary-composition.ts.mdx
@@ -6,11 +6,6 @@ import type { Meta, StoryObj } from '@storybook/angular';
 import { Button } from './button.component';
 
 const meta: Meta<Button> = {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'Button',
   component: Button,
 };
 

diff --git a/docs/snippets/angular/button-story-primary-long-name.ts.mdx b/docs/snippets/angular/button-story-primary-long-name.ts.mdx
@@ -6,11 +6,6 @@ import type { Meta, StoryObj } from '@storybook/angular';
 import { Button } from './button.component';
 
 const meta: Meta<Button> = {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'Button',
   component: Button,
 };
 

diff --git a/docs/snippets/angular/button-story-rename-story.ts.mdx b/docs/snippets/angular/button-story-rename-story.ts.mdx
@@ -6,11 +6,6 @@ import type { Meta, StoryObj } from '@storybook/angular';
 import { Button } from './button.component';
 
 const meta: Meta<Button> = {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'Button',
   component: Button,
 };
 

diff --git a/docs/snippets/angular/button-story-using-args.ts.mdx b/docs/snippets/angular/button-story-using-args.ts.mdx
@@ -6,22 +6,12 @@ import type { Meta, StoryObj } from '@storybook/angular';
 import { Button } from './button.component';
 
 const meta: Meta<Button> = {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'Button',
   component: Button,
 };
 
 export default meta;
 type Story = StoryObj<Button>;
 
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/angular/api/csf
- * to learn how to use render functions.
- */
 export const Primary: Story = {
   args: {
     label: 'Button',