added assets and cleanup

docs/writing-docs/doc-blocks.md

@@ -10,9 +10,12 @@ Also, custom [addons](../configure/user-interface#storybook-addons) can provide
 
 Storybook Docs automatically generates component props tables for components in supported frameworks. These tables list the [args](../writing-stories/args) of the component, and even integrate with [controls](../essentials/controls) to allow you to change the args of the currently rendered story.
 
-<div style="background-color:#F8FAFC">
-TODO:add image per screenshot requirements (Use the same gif present in the SB 6.0 doc)
-</div>
+<video autoPlay muted playsInline loop>
+  <source
+    src="addon-controls-docs-optimized.mp4"
+    type="video/mp4"
+  />
+</video>
 
 #### DocsPage
 
@@ -140,18 +143,12 @@ The controls inside a props table are configured in exactly the same way as the
 
 Storybook Docs displays a story’s source code using the `Source` block. The snippet has built-in syntax highlighting and can be copied with the click of a button.
 
-<div style="background-color:#F8FAFC">
-TODO:add image per screenshot requirements (mention of a image in the SB 6.0 doc (needs to be vetted))
-</div>
+![Docs blocks with source](./docblock-source.png)
 
 #### DocsPage
 
 In DocsPage, the `Source` block appears automatically within each story’s [Preview] block.
 
-<div style="background-color:#F8FAFC">
-TODO:add image per screenshot requirements (mention of a image in the SB 6.0 doc (needs to be vetted))
-</div>
-
 To customize the source snippet that’s displayed for a story, set the `docs.source.code` parameter:
 
 ```js
@@ -173,7 +170,7 @@ You can also use the `Source` block in MDX. It accepts either a story ID or `cod
 
 ```js
 import { Source } from '@storybook/addon-docs/blocks';
-Import dedent from 'ts-dedent';
+import dedent from 'ts-dedent';
 
 <Source
   language='css'
@@ -189,22 +186,16 @@ Import dedent from 'ts-dedent';
 
 Storybook Docs shows a component’s description extracted from the source code or based on a user-provided string.
 
-<div style="background-color:#F8FAFC">
-TODO:add image per screenshot requirements (mention of a image in the SB 6.0 doc (needs to be vetted))
-</div>
+![Docs blocks with description](./docblock-description.png)
 
 #### DocsPage
 
 <div style="background-color:#F8FAFC">
-TODO: left it for now ask feedback tom/shillman on this based on [pr](https://github.com/storybookjs/storybook/issues/11441)
+TODO: waiting to be vetted
 </div>
 
 In DocsPage, a component’s description is shown at the top of the page. For [supported frameworks], the component description is automatically extracted from a docgen component above the component in its source code. It can also be set by the `docs.description` parameter.
 
-<div style="background-color:#F8FAFC">
-TODO:add image per screenshot requirements (mention of a image in the SB 6.0 doc (needs to be vetted))
-</div>
-
 ```js
 
 export default {
@@ -250,6 +241,8 @@ import { Button } from './Button';
 
 Stories (component examples) are the basic building blocks in Storybook. In Storybook Docs, stories are rendered in the `Story` block.
 
+![Docs blocks with stories](./docblock-story.png)
+
 #### DocsPage
 
 In DocsPage a `Story` block is generated for each story in your [CSF] file, wrapped with a `Preview` wrapper that gives it a toolbar on top (in the case of the first “primary” story) and a source code preview underneath.
@@ -280,7 +273,7 @@ import { Story } from '@storybook/addon-docs/blocks';
 
 #### Inline rendering
 
-<div>
+<div style="background-color:#F8FAFC">
 TODO: ask tom/michael about the preview iframe. as we've been calling it canvas so far and now move to preview.
 And also inline rendering support location
 </div>
@@ -292,17 +285,13 @@ In Storybook’s Canvas, all stories are rendered in the [Preview iframe] for is
 
 Storybook Docs’ `Preview` block is a wrapper that provides a toolbar for interacting with its contents, and also also provides [Source](#Source) snippets automatically.
 
-<divs tyle="background-color:#F8FAFC">
-TODO:add image per screenshot requirements (mention of a image in the SB 6.0 doc (needs to be vetted))
-</div>
+![Docs block with a story preview](./docblock-preview.png)
 
 #### DocsPage
 
 In DocsPage, every story is wrapped in a `Preview` block. The first story on the page is called the _primary_, and it has a toolbar. The other stories are also wrapped with `Previews`, but there is no toolbar by default.
 
-<div style="background-color:#F8FAFC">
-TODO:add image per screenshot requirements (mention of a image in the SB 6.0 doc (needs to be vetted))
-</div>
+![Docs blocks preview toolbar](./docblock-preview-toolbar.png)
 
 #### MDX
 
@@ -328,10 +317,6 @@ export const Template = (args) => <Badge {...args } />
 </Preview>
 ```
 
-<div style="background-color:#F8FAFC">
-TODO:add image per screenshot requirements (mention of a image in the SB 6.0 doc (needs to be vetted))
-</div>
-
 You can also place non-story content inside a `Preview` block:
 
 ```js
@@ -342,12 +327,5 @@ import { MyComponent } from './MyComponent';
   <MyComponent />
 </Preview>
 ```
-<div>
-TODO: ask tom about Source link for clarity, as me i know that the source shows ad hoc the story file content. But another reader might not know.
-</div>
 
 This renders the JSX content exactly as it would if you’d placed it directly in the MDX, but it also inserts the source snippet in a [Source](#source) block beneath the block.
-
-<div style="background-color:#F8FAFC">
-TODO:add image per screenshot requirements (mention of a image in the SB 6.0 doc (needs to be vetted))
-</div>

docs/writing-docs/docs-page.md

@@ -38,9 +38,7 @@ export default {
 };
 ```
 
-<div style="background-color:#F8FAFC">
-TODO: add image per screenshot requirements (Image of subcomponents)
-</div>
+![Subcomponents in Docs Page](./docspage-subcomponents.png)
 
 Subcomponent prop tables will show up in a tabbed interface along with the primary component. The tab titles will correspond to the keys of the subcomponents object.
 

docs/writing-docs/introduction.md

@@ -6,9 +6,12 @@ When you write component stories during development, you also create basic docum
 
 Storybook gives you tools to expand this basic documentation with prose and layout that feature your components and stories prominently. That allows you to create UI library usage guidelines, design system sites, and more.
 
-<div style="background-color:#F8FAFC">
-TODO: add image per screenshot requirements (Image of various SB docs sites)
-</div>
+<video autoPlay muted playsInline loop>
+  <source
+    src="addon-docs-optimized.mp4"
+    type="video/mp4"
+  />
+</video>
 
 Out of the box, Storybook ships with [DocsPage](./docs-page), a documentation template that lists all the stories for a component and associated metadata. It infers metadata values based on source code, types and JSDoc comments. [Customize](./docs-page#replacing-docspage) this page to create a new template if you have specific requirements.
 
@@ -16,9 +19,5 @@ You can also create free-form pages for each component using [MDX](./mdx), a for
 
 In both cases, you’ll use [Doc Blocks](./docs-blocks) as the building blocks to create full featured documentation.
 
-<div style="background-color:#F8FAFC">
-TODO: ask tom if this is the proper place for the advanced
-</div>
-
 Docs is autoconfigured to work out of the box in most use cases. In some cases you may need or want to tweak the configuration. Read more about it in the [ADVANCED README](../../addons/docs/ADVANCED-README.md).
 

docs/writing-docs/mdx.md

@@ -1,11 +1,14 @@
 ---
-title:'MDX'
+title: 'MDX'
 ---
 
 MDX is a standard file format that combines Markdown with JSX. This means you can use Markdown’s terse syntax (such as # heading) for your documentation, write stories that compile to our component story format, and freely embed JSX component blocks at any point in the file. All at once.
 
 In addition, you can write pure documentation pages in MDX and add them to Storybook alongside your stories.
 
+![MDX simple example result](./mdx-hero.png)
+
+
 ### Basic example
 
 Let's get started with an example that combines Markdown with a single story:
@@ -45,10 +48,9 @@ export const Template = (args) => <Checkbox {...args} />
    </Story>
 </Preview>
 ```
+And here's how that's rendered in Storybook:
 
-<div style="background-color:#F8FAFC">
-TODO: add image per screenshot requirements (image of basic example of checkbox with mdx)
-</div>
+![MDX simple example result](./mdx-simple.png)
 
 As you can see there's a lot going on here. We're writing Markdown, we're writing JSX, and we're also defining Storybook stories that are drop-in compatible with the entire Storybook ecosystem.
 
@@ -151,9 +153,7 @@ with unique URLs which is great for review and testing.
 
 And here's how that gets rendered in Storybook:
 
-<div style="background-color:#F8FAFC">
-TODO: add image per screenshot requirements (image to match the code showed (usage of the badge component))
-</div>
+![MDX page](./mdx-page.png)
 
 
 ### Embedding stories
@@ -199,17 +199,11 @@ Typically, when you use Storybook MDX, you define stories in the MDX and documen
 
 If you don't define stories in your MDX, you can write MDX documentation and associate it with an existing story, or embed that MDX as its own documentation node in your Storybook's navigation.
 
-<div style="background-color:#F8FAFC">
-TODO: ask tom about the "CSF Stories with MDX Docs" link if that's where it should be pointing
-</div>
-
 If you don't define a Meta, you can write Markdown and associate with an existing story. See ["CSF Stories with MDX Docs"](https://github.com/storybookjs/storybook/blob/master/addons/docs/docs/recipes.md#csf-stories-with-mdx-docs).
 
 To get a "documentation-only story", in your UI, define a `<Meta>` as you normally would, but don't define any stories. It will show up in your UI as a documentation node:
 
-<div style="background-color:#F8FAFC">
-TODO:add image per screenshot requirements (Screenshot to match documentation (check if the mdx shown is the default one for Storybook 6))
-</div>
+![MDX docs only story](./mdx-documentation-only.png)
 
 ### MDX file names