Merge pull request #23797 from storybookjs/chore_docs_adds_videos

Docs: Video coverage extended
storybookjs · Aug 10, 2023 · af906e2 · af906e2
2 parents 0eaaa8c + 601e902
commit af906e2
Show file tree

Hide file tree

Showing 14 changed files with 31 additions and 1 deletion.
diff --git a/docs/api/doc-block-argtypes.md b/docs/api/doc-block-argtypes.md
@@ -2,6 +2,8 @@
 title: 'ArgTypes'
 ---
 
+<YouTubeCallout id="uAA1JvLcl-w" title="Avoid Documentation Nightmares with Storybook's ArgTypes Doc Block" params='start=232' />
+
 The `ArgTypes` block can be used to show a static table of [arg types](./argtypes.md) for a given component, as a way to document its interface.
 
 <div class="aside">

diff --git a/docs/api/doc-block-canvas.md b/docs/api/doc-block-canvas.md
@@ -2,6 +2,8 @@
 title: 'Canvas'
 ---
 
+<YouTubeCallout id="uAA1JvLcl-w" title="Avoid Documentation Nightmares with Storybook's Canvas Doc Block" params='start=148' />
+
 The `Canvas` block is a wrapper around a [`Story`](./doc-block-story.md), featuring a toolbar that allows you to interact with its content while automatically providing the required [`Source`](./doc-block-source.md) snippets.
 
 ![Screenshot of Canvas block](./doc-block-canvas.png)

diff --git a/docs/api/doc-block-controls.md b/docs/api/doc-block-controls.md
@@ -2,6 +2,8 @@
 title: 'Controls'
 ---
 
+<YouTubeCallout id="uAA1JvLcl-w" title="Avoid Documentation Nightmares with Storybook's Controls Doc Block" params='start=240' />
+
 The `Controls` block can be used to show a dynamic table of args for a given story, as a way to document its interface, and to allow you to change the args for a (separately) rendered story (via the [`Story`](./doc-block-story.md) or [`Canvas`](./doc-block-canvas.md) blocks).
 
 <div class="aside">

diff --git a/docs/api/doc-block-description.md b/docs/api/doc-block-description.md
@@ -2,6 +2,8 @@
 title: 'Description'
 ---
 
+<YouTubeCallout id="uAA1JvLcl-w" title="Avoid Documentation Nightmares with Storybook's Description Doc Block" params='start=84' />
+
 The `Description` block displays the description for a component, story, or meta, obtained from their respective JSDoc comments.
 
 ![Screenshot of Description block](./doc-block-title-subtitle-description.png)

diff --git a/docs/api/doc-block-primary.md b/docs/api/doc-block-primary.md
@@ -2,6 +2,8 @@
 title: 'Primary'
 ---
 
+<YouTubeCallout id="uAA1JvLcl-w" title="Avoid Documentation Nightmares with Storybook's Primary Doc Block" params='start=209' />
+
 The `Primary` block displays the primary (first defined in the stories file) story, in a [`Story`](./doc-block-story.md) block. It is typically rendered immediately under the title in a docs entry.
 
 ![Screenshot of Primary block](./doc-block-primary.png)

diff --git a/docs/api/doc-block-source.md b/docs/api/doc-block-source.md
@@ -2,6 +2,8 @@
 title: 'Source'
 ---
 
+<YouTubeCallout id="uAA1JvLcl-w" title="Avoid Documentation Nightmares with Storybook's Source Doc Block" params='start=136' />
+
 The `Source` block is used to render a snippet of source code directly.
 
 ![Screenshot of Source block](./doc-block-source.png)

diff --git a/docs/api/doc-block-stories.md b/docs/api/doc-block-stories.md
@@ -2,6 +2,8 @@
 title: 'Stories'
 ---
 
+<YouTubeCallout id="uAA1JvLcl-w" title="Avoid Documentation Nightmares with Storybook's Stories Doc Block" params='start=185' />
+
 The `Stories` block renders the full collection of stories in a stories file.
 
 ![Screenshot of Stories block](./doc-block-stories.png)

diff --git a/docs/api/doc-block-story.md b/docs/api/doc-block-story.md
@@ -2,6 +2,8 @@
 title: 'Story'
 ---
 
+<YouTubeCallout id="uAA1JvLcl-w" title="Avoid Documentation Nightmares with Storybook's Story Doc Block" params='start=124' />
+
 Stories (component tests) are Storybook's fundamental building blocks.
 
 In Storybook Docs, you can render any of your stories from your CSF files in the context of an MDX file with all annotations (parameters, args, loaders, decorators, play function) applied using the `Story` block.
@@ -124,6 +126,8 @@ Type: Story export
 
 Specifies which story is rendered by the `Story` block. If no `of` is defined and the MDX file is [attached](./doc-block-meta.md#attached-vs-unattached), the primary (first) story will be rendered.
 
+<YouTubeCallout id="uAA1JvLcl-w" title="Avoid Documentation Nightmares with Storybook's Story Doc Block configuration" params='start=160' />
+
 ### `args`
 
 (⛔️ **Deprecated**)

diff --git a/docs/api/doc-block-subtitle.md b/docs/api/doc-block-subtitle.md
@@ -2,6 +2,8 @@
 title: 'Subtitle'
 ---
 
+<YouTubeCallout id="uAA1JvLcl-w" title="Avoid Documentation Nightmares with Storybook's Subtitle Doc Block" params='start=98' />
+
 The `Subtitle` block can serve as a secondary heading for your docs entry.
 
 ![Screenshot of Subtitle block](./doc-block-title-subtitle-description.png)

diff --git a/docs/api/doc-block-title.md b/docs/api/doc-block-title.md
@@ -2,6 +2,8 @@
 title: 'Title'
 ---
 
+<YouTubeCallout id="uAA1JvLcl-w" title="Avoid Documentation Nightmares with Storybook's Title Doc Block" params='start=57' />
+
 The `Title` block serves as the primary heading for your docs entry. It is typically used to provide the component or page name.
 
 ![Screenshot of Title block](./doc-block-title-subtitle-description.png)

diff --git a/docs/sharing/embed.md b/docs/sharing/embed.md
@@ -2,6 +2,8 @@
 title: 'Embed stories'
 ---
 
+<YouTubeCallout id="2tqRpBcV8ug" title="Your Storybook EVERYWHERE | Embeds with Chromatic" />
+
 Embed stories to showcase your work to teammates and the developer community at large. In order to use embeds, your Storybook must be published and publicly accessible.
 
 Storybook supports `<iframe>` embeds out of the box. If you use Chromatic to [publish Storybook](./publish-storybook.md#publish-storybook-with-chromatic), you can also embed stories in Notion, Medium, and countless other platforms that support the oEmbed standard.

diff --git a/docs/sharing/publish-storybook.md b/docs/sharing/publish-storybook.md
@@ -2,6 +2,8 @@
 title: 'Publish Storybook'
 ---
 
+<YouTubeCallout id="zhrboql8UuU" title="How to Test UI AUTOMATICALLY — Storybook and Chromatic" />
+
 Teams publish Storybook online to review and collaborate on works in progress. That allows developers, designers, PMs, and other stakeholders to check if the UI looks right without touching code or requiring a local dev environment.
 
 <video autoPlay muted playsInline loop>

diff --git a/docs/writing-docs/autodocs.md b/docs/writing-docs/autodocs.md
@@ -53,7 +53,9 @@ By default, Storybook offers zero-config support for documentation and automatic
 
 ### Write a custom template
 
-To replace the default documentation template used by Storybook, you can extend your UI configuration file (i.e., `.storybook/preview.js`) and introduce a `docs` [parameter](./doc-blocks.md#customizing-the-automatic-docs-page). This parameter accepts a `page` function that returns a React component, which you can use to generate the required template. For example:
+<YouTubeCallout id="q8SY4yyNE6Q" title="Custom Autodocs with Storybook 7 Docs Page | Quick Tips" />
+
+To replace the default documentation template used by Storybook, you can extend your UI configuration file (i.e., `.storybook/preview.js|ts`) and introduce a `docs` [parameter](./doc-blocks.md#customizing-the-automatic-docs-page). This parameter accepts a `page` function that returns a React component, which you can use to generate the required template. For example:
 
 <!-- prettier-ignore-start -->
 

diff --git a/docs/writing-docs/doc-blocks.md b/docs/writing-docs/doc-blocks.md
@@ -2,6 +2,8 @@
 title: Doc blocks
 ---
 
+<YouTubeCallout id="uAA1JvLcl-w" title="Avoid Documentation Nightmares with Storybook Doc Blocks" />
+
 Storybook offers several doc blocks to help document your components and other aspects of your project.
 
 There are two common ways to use doc blocks in Storybook, within MDX and as part of the docs page template.