images added and addressed other feedback

docs/get-started/browse-stories.md

@@ -8,9 +8,12 @@ Last chapter we learned that stories correspond with discrete component states.
 
 A `*.stories.js` file defines all the stories for a component. Each story has a corresponding sidebar item. When you click on a story it renders in the Canvas, an isolated preview iframe.
 
-<div style="background-color:#F8FAFC">
- TODO: add required gif per 6.0 doc and assets spreadsheet (Storybook button stories changing)
-</div>
+<video autoPlay muted playsInline loop>
+  <source
+    src="example-browse-all-stories-optimized.mp4"
+    type="video/mp4"
+  />
+</video>
 
 Navigate between stories by clicking on them in the sidebar or use keyboard shortcuts (for instance for macOS use opt + ◀️ ▶️). Try the sidebar search to find a story by name.
 
@@ -18,19 +21,27 @@ Navigate between stories by clicking on them in the sidebar or use keyboard shor
 
 Storybook ships with time-saving tools built in. The **toolbar** contains tools that allow you to adjust how the story renders in the Canvas:
 
+![Storybook toolbar](./toolbar.png)
+
 - 🔍Zooming visually scales the component so you can check the details.
 - 🖼 Background changes the rendered background behind your component so you can verify how your component renders in different visual contexts.
 - 📱 Viewport renders the component in a variety of dimensions and orientations. It’s ideal for checking the responsiveness of components.
 
-<div style="background-color:#F8FAFC">
- TODO: add required video per 6.0 doc and assets spreadsheet (Storybook button primary zoom, change background,viewport orientation)
-</div>
+<video autoPlay muted playsInline loop>
+  <source
+    src="toolbar-walkthrough-optimized.mp4"
+    type="video/mp4"
+  />
+</video>
 
 The [“Docs”](../writing-docs/introduction) tab shows auto-generated documentation about components (inferred from the source code). Usage docs are helpful when sharing reusable components with your team. For example, in a design system or component library.
 
-<div style="background-color:#F8FAFC">
- TODO: add required gif per 6.0 doc and assets spreadsheet (Screenshot of the Docs tab)
-</div>
+<video autoPlay muted playsInline loop>
+  <source
+    src="toolbar-docs-tab-optimized.mp4"
+    type="video/mp4"
+  />
+</video>
 
 The toolbar is customizable. You can use [globals](../essentials/toolbars-and-globals) to quickly toggle themes and languages. Or install Storybook toolbar [addons](../configure/user-interface#addons-description) from the community to enable advanced workflows.
 
@@ -38,17 +49,18 @@ The toolbar is customizable. You can use [globals](../essentials/toolbars-and-gl
 
 Addons are plugins that extend Storybook's core functionality. You can find them in the addons panel, a reserved place in the Storybook UI below the Canvas. Each tab shows the generated metadata, logs, or static analysis for the selected story by the addon.
 
-<div style="background-color:#F8FAFC">
-TODO: add required gif per 6.0 doc and assets spreadsheet (Image of the addon tabs (probably with Controls))
-</div>
+![Storybook addon examples](./addons.png)
 
 - **Source** displays the source code of the currently rendered story. (to be determined)
 - **Controls** allows you to dynamically interact with a component’s args (inputs). Experiment with alternate configurations of the component to discover edge cases.
 - **Actions** help you verify interactions produce the correct outputs via callbacks. For instance if you view the “Logged In” story of the Header component, we can verify that clicking the “Log out” button triggers the `onLogout` callback, which would be provided by the component that made use of the Header.
 
-<div style="background-color:#F8FAFC">
- TODO: add required video per 6.0 doc and assets spreadsheet (video with Button/Header Stories with Controls (addon))
-</div>
+<video autoPlay muted playsInline loop>
+  <source
+    src="addons-walkthrough-optimized.mp4"
+    type="video/mp4"
+  />
+</video>
 
 Storybook is extensible. Our rich ecosystem of addons helps you test, document, and optimize your stories. You can also create an addon to satisfy your workflow requirements. Read more in the [addons section](../api/addons).
 

docs/get-started/install.md

@@ -7,13 +7,30 @@ Use the Storybook CLI to install it in a single command. Run this inside your ex
 ```sh
 npx sb init
 ```
-
 <div style="background-color:#F8FAFC">
-TODO: ask tom/dom how to proceed on this item
+TODO: vet this per feedback (https://github.com/storybookjs/storybook/pull/11632#discussion_r458498081)
 
-> If you haven’t started your project yet, we advise… ? TK (needs to be vetted)
 </div>
 
+Storybook needs to be installed into a project that is already configured. For instance with:
+
+- 📦 [Create React App](https://reactjs.org/docs/create-a-new-react-app.html)
+- 📦 [Vue Cli](https://cli.vuejs.org/)
+
+
+Or any other tooling available. 
+
+During its install process, Storybook will look into your project's dependencies and provide you with the best configuration available.
+
+If you want, you can also do this manually through the Storybook CLI. You can use the `--type` flag to tell Storybook to configure itself based value provided.
+
+For instance you can use:
+
+- `--type react` to setup Storybook with the React configuration options.
+- `--type vue` to setup Storybook with the Vue configuration options.
+- `--type angular` to setup Storybook with the Angular configuration options.
+
+
 The command above will make the following changes to your local environment:
 
 - 📦 Install the required dependencies.
@@ -32,19 +49,13 @@ It will start Storybook locally and output the address. Depending on your system
 - A collection of useful links for more in depth configuration and customization options you have at your disposal.
 - A second set of links for you to expand your Storybook knowledge and get involved with the ever growing Storybook community.
 - A few example stories to get you started.
-
-<div style="background-color:#F8FAFC">
- TODO: add required image per 6.0 doc and assets spreadsheet (Storybook Welcome screen)
-</div>
+ 
+![Storybook welcome screen](./example-welcome.png)
 
 #### Troubleshooting
 
 If there's an installation problem, check the README for your framework (e.g [Storybook for React](https://github.com/storybookjs/storybook/app/react/README.md) for the detailed instructions)
 
-<div style="background-color:#F8FAFC">
-TODO: ask dom/tom if the link is correct (basics/community/), or will be a Gatsby page.
-</div>
-
-If all else fails, try [asking for help](../basics/community).
+If all else fails, try asking for [help](https://storybook.js.org/support/)
 
 > > [Now that you installed Storybook successfully, let’s take a look at a story that was written for us](./whats-a-story.md)

docs/get-started/introduction.md

@@ -5,14 +5,19 @@ title: 'Introduction'
 Storybook is a tool for UI development. It makes development faster and easier by isolating components. This allows you to work on one component at a time. You can develop entire UIs without needing to start up a complex dev stack, force certain data into your database or navigate around your application.
 
 <div style="background-color:#F8FAFC">
- TODO: add required image per 6.0 doc and spreadsheet 
+ TODO: check if it runs properly
 </div>
 
+<video autoPlay muted playsInline loop>
+  <source
+    src="storybook-hero-video-optimized.mp4"
+    type="video/mp4"
+  />
+</video>
+
 Use Storybook to build small atomic components and complex pages in your web application. If it is a UI, you can build it with Storybook.
 
-<div style="background-color:#F8FAFC">
- TODO: add required image per 6.0 doc and assets spreadsheet
-</div>
+![Storybook relationship](./storybook-relationship.png)
 
 Storybook helps you **document** components for reuse and automatically **visually test** your components to prevent bugs. Extend Storybook with an ecosystem of **addons** that help you do things like fine tune responsive layouts or verify accessibility.
 

docs/get-started/setup.md

@@ -35,25 +35,24 @@ Storybook comes with a permissive [default configuration](../configure/overview)
 
 Your project may have additional requirements before components can be rendered in isolation. This warrants customizing configuration further. There are three broad categories of configuration you might need. 
 
+<details>
+<summary> Build configuration like webpack and Babel</summary>
+  
+  If you see errors on the CLI when you run the `yarn storybook` command. It’s likely you need to make changes to Storybook’s build configuration. Here are some things to try:
 
-#### Build configuration like webpack and Babel
+  - [Presets](../api/addons#addon-presets) bundle common configurations for various technologies into Storybook. In particular presets exist for Create React App, SCSS and Ant Design.
+  - Specify a custom [Babel configuration](../configure/integration#custom-babel-config) for Storybook. Storybook automatically tries to use your project’s config if it can.
+  - Adjust the [webpack configuration](../configure/integration#Webpack) that Storybook uses. Try patching in your own configuration if needed.
+</details>
 
-<div style="background-color:#F8FAFC">
-TODO: ask dom/tom presets item points to the preset gallery???
-</div>
+<details>
+<summary>Runtime configuration</summary>
+  
+  If Storybook builds but you see an error immediately when connecting to it in the browser, then chances are one of your input files is not compiling/transpiling correctly to be interpreted by the browser. Storybook supports modern browsers and IE11, but you may need to check the Babel and webpack settings (see above) to ensure your component code works correctly.
+</details>
 
-If you see errors on the CLI when you run the `yarn storybook` command. It’s likely you need to make changes to Storybook’s build configuration. Here are some things to try:
-
-- [Presets](../presets/preset-gallery/) bundle common configurations for various technologies into Storybook. In particular presets exist for Create React App, SCSS and Ant Design.
-- Specify a custom [Babel configuration](../configure/integration#custom-babel-config) for Storybook. Storybook automatically tries to use your project’s config if it can.
-- Adjust the [webpack configuration](../configure/integration#Webpack) that Storybook uses. Try patching in your own configuration if needed.
-
-#### Runtime configuration
-
-If Storybook builds but you see an error immediately when connecting to it in the browser, then chances are one of your input files is not compiling/transpiling correctly to be interpreted by the browser. Storybook supports modern browsers and IE11, but you may need to check the Babel and webpack settings (see above) to ensure your component code works correctly.
-
-
-### Story context
+<details id="story-context" name="story-context">
+<summary>Story context</summary>
 
 If a particular story has a problem rendering, often it means your component expects a certain environment is available to the component. 
 
@@ -70,6 +69,8 @@ export const decorators = [
 ];
 
 ```
+</details>
+
 
 ### Render component styles
 
@@ -77,30 +78,31 @@ Storybook isn’t opinionated about how you generate or load CSS. It renders wha
 
 You may have to configure your CSS tooling for Storybook’s rendering environment. Here are some tips on what could help:
 
-
-#### CSS-in-JS like styled components and emotion
+<details>
+<summary>CSS-in-JS like styled components and emotion</summary>
 
 If you are using CSS-in-JS, chances are your styles are working because they’re generated in JavaScript and served alongside each component. 
 
 Theme users may need to add a decorator to `.storybook/preview.js`, [see above](#story-context).
+</details>
 
-
-#### @import CSS into components
-
-<div style="background-color:#F8FAFC">
-TODO:ask tom/dom for angular special import
-</div>
+<details>
+<summary>@import CSS into components</summary>
 
 Storybook supports import CSS files in your components directly. But in some cases you may need to [tweak the webpack config](../configure/integration#Webpack). Angular components require [a special import](../configure/integration#importing-css-files).
+</details>
 
-
-#### Global imported styles
+<details>
+<summary>Global imported styles</summary>
 
 If you have global imported styles, create a file called `.storybook/preview.js` and import the styles there. The styles will be added by Storybook automatically for all stories.
+</details>
 
-#### Add external CSS or fonts in the <head>
+<details>
+<summary>Add external CSS or fonts in the head html element</summary>
 
 Alternatively if you want to inject a CSS link tag to the `<head>` directly (or some other resource like a font link), you can use [`.storybook/preview-head.html`](/configure/story-rendering#adding-to-head) to add arbitrary HTML.
+</details>
 
 
 ### Load assets and resources

docs/get-started/whats-a-story.md

@@ -19,9 +19,7 @@ import { Button } from './Button';
 export const Primary = () => <Button primary>Button</Button>;
 ```
 
-<div style="background-color:#F8FAFC">
- TODO: add required image per 6.0 doc and spreadsheet (Storybook Primary button story)
-</div>
+![Initial button story](./example-button-noargs.png)
 
 View the rendered `Button` by clicking on it in the Storybook sidebar.
 
@@ -41,9 +39,7 @@ Primary.args = {
 };
 ```
 
-<div style="background-color:#F8FAFC">
- TODO: add required image per 6.0 doc and assets spreadsheet (Storybook Primary button story with controls)
-</div>
+![Button story with args](./example-button-args.png)
 
 Both story examples render the same thing because Storybook feeds the given `args` property into the story during render. But you get timesaving conveniences with args:
 
@@ -59,16 +55,22 @@ Storybook makes it easy to work on one component in one state (aka a story) at a
 
 Update the `label` of the `Primary` story then see your change in Storybook.
 
-<div style="background-color:#F8FAFC">
- TODO: add required gif per 6.0 doc and spreadsheet (Storybook edit Primary button story use hello world text)
-</div>
+
+<video autoPlay muted playsInline loop>
+  <source
+    src="example-button-hot-module-reload-optimized.mp4"
+    type="video/mp4"
+  />
+</video>
 
 Stories are also useful for checking that UI continues to look correct as you make changes. The `Button` component has four stories that show it in different use cases. View those stories now to confirm that your change to `Primary` didn’t introduce unintentional bugs in the other stories.
 
-
-<div style="background-color:#F8FAFC">
- TODO: add required gif per 6.0 doc and assets spreadsheet (Storybook navigation other button stories, to prevent regressions)
-</div>
+<video autoPlay muted playsInline loop>
+  <source
+    src="example-button-browse-stories-optimized.mp4"
+    type="video/mp4"
+  />
+</video>
 
 Checking a component’s stories as you develop helps prevent accidental regressions. Tools that integrate with Storybook can also [automate](..workflows/testing-with-storybook) this for you.