assets added and section cleanup

docs/writing-stories/args.md

@@ -76,10 +76,6 @@ Secondary.args = {
 }
 ```
 
-<div style="background-color:#F8FAFC">
-needs to be vetted with frontpage and gatsby
-</div>
-
 > Note that if you are doing the above often, you may want to consider using [component-level args](#component-args).
 
 Args are useful when writing stories for composite components that are assembled from other components. Composite components often pass their arguments unchanged to their child components, and similarly their stories can be compositions of their child components stories. With args, you can directly compose the arguments:
@@ -101,35 +97,40 @@ LoggedIn.args = {
   ...Header.LoggedIn.args,
 };
 ```
+<details>
+<summary>Using args in addons</summary>
 
-### Using args in addons
+  If you are [writing an addon](../api/addons#getting-started) that wants to read or update args, use the `useArgs` hook exported by `@storybook/api`:
 
-If you are [writing an addon](../api/addons#getting-started) that wants to read or update args, use the `useArgs` hook exported by `@storybook/api`:
+  ```js
 
-```js
+  import { useArgs } from '@storybook/api';
 
-import { useArgs } from '@storybook/api';
+  const [args, updateArgs,resetArgs] = useArgs();
 
-const [args, updateArgs,resetArgs] = useArgs();
+  // To update one or more args:
+  updateArgs({ key: 'value' });
 
-// To update one or more args:
-updateArgs({ key: 'value' });
+  // To reset one (or more) args:
+  resetArgs(argNames:['key']);
 
-// To reset one (or more) args:
-resetArgs(argNames:['key']);
+  // To reset all args
+  resetArgs();
+  ```
 
-// To reset all args
-resetArgs();
-```
+</details>
 
-#### parameters.passArgsFirst
 
-In Storybook 6+, we pass the args as the first argument to the story function. The second argument is the “context” which contains things like the story parameters etc.
+ 
+<details>
+<summary>parameters.passArgsFirst</summary>
+  In Storybook 6+, we pass the args as the first argument to the story function. The second argument is the “context” which contains things like the story parameters etc.
 
-In Storybook 5 and before we passed the context as the first argument. If you’d like to revert to that functionality set the `parameters.passArgsFirst` parameter in [`.storybook/preview.js`](../configure/overview#configure-story-rendering):
+  In Storybook 5 and before we passed the context as the first argument. If you’d like to revert to that functionality set the `parameters.passArgsFirst` parameter in [`.storybook/preview.js`](../configure/overview#configure-story-rendering):
 
-```js
-export const parameter = { passArgsFirst : false }.
-```
+  ```js
+  export const parameter = { passArgsFirst : false }.
+  ```
 
-> Note that `args` is still available as a key on the context.
+  > Note that `args` is still available as a key on the context.
+</details>

docs/writing-stories/decorators.md

@@ -10,9 +10,7 @@ When writing stories, decorators are typically used to wrap stories with extra m
 
 Some components require a “harness” to render in a useful way. For instance if a component runs right up to its edges, you might want to space it inside Storybook. Use a decorator to add spacing for all stories of the component.
 
-<div style="background-color:#F8FAFC">
-TODO: per screenshot spreadsheet add Image of Component Story without margins
-</div>
+![Story without padding](./decorators-no-padding.png)
 
 ```js
 export default {
@@ -21,9 +19,8 @@ export default {
 }
 ```
 
-<div style="background-color:#F8FAFC">
-TODO: per screenshot spreadsheet add Image of Component Story with margins
-</div>
+![Story with padding](./decorators-padding.png)
+
 
 
 ### “Context” for mocking

docs/writing-stories/introduction.md

@@ -110,15 +110,21 @@ When Button’s signature changes, you only need to change Button’s stories to
 
 That’s not all! Each of the args from the story function are live editable using Storybook’s [controls](../essentials/controls) panel. This means your team can dynamically change components in Storybook to stress test and find edge cases.
 
-<div style="background-color:#F8FAFC">
-TODO: per screenshot spreadsheet add GIF of controls in action
-</div>
+<video autoPlay muted playsInline loop>
+  <source
+    src="addon-controls-demo-optimized.mp4"
+    type="video/mp4"
+  />
+</video>
 
 Addons can enhance args. For instance, [Actions](../essentials/actions) auto detects which args are callbacks and appends a logging function to them. That way interactions (like clicks) get logged in the actions panel.
 
-<div style="background-color:#F8FAFC">
-TODO: per screenshot spreadsheet add GIF of actions in action
-</div>
+<video autoPlay muted playsInline loop>
+  <source
+    src="addon-actions-demo-optimized.mp4"
+    type="video/mp4"
+  />
+</video>
 
 #### Using parameters
 
@@ -144,9 +150,8 @@ export default {
   }
 }
 ```
-<div style="background-color:#F8FAFC">
-TODO: per screenshot spreadsheet add Image of the story with the params
-</div>
+
+![Background colors parameter](./parameters-background-colors.png)
 
 This parameter would instruct the backgrounds addon to reconfigure itself whenever a Button story is selected. Most addons are configured via a parameter-based API and can be influenced at a [global](./parameters#global-parameters), [component](./parameters#component-parameters) and [story](./parameters#story-parameters) level.
 

docs/writing-stories/naming-components-and-hierarchy.md

@@ -8,15 +8,13 @@ The title of the component you export in the `default` export controls the name
 
 // Button.stories.js
 export default {
-  title: ‘Button’
+  title: 'Button'
 }
 ```
 
 Yields this:
 
-<div style="background-color:#F8FAFC">
-TODO: per screenshot spreadsheet add image Default ordering of Button with the placement
-</div>
+![Stories hierarchy without paths](./naming-hierarchy-no-path.png)
 
 
 ### Grouping
@@ -41,11 +39,7 @@ export default {
 
 Yields this:
 
-<div style="background-color:#F8FAFC">
-
-TODO: per screenshot spreadsheet add image Show Button ordering/grouping with Design System/Atoms/Button title
-
-</div>
+![Stories hierarchy with paths](./naming-hierarchy-with-path.png)
 
 ### Roots
 
@@ -90,7 +84,7 @@ export const parameters = {
 | ------------- |:-------------:|:------------------------------------------------------:|:--------:|:----------------------:|:-----------------------:|
 | **method**    | String        |Tells Storybook in which order the stories are displayed|No        |Storybook configuration |`'alphabetical'`         |
 | **order**     | Array         |The stories to be show, ordered by supplied name        |No        |Empty Array `[]`        |`['Intro', 'Components']`|
-| **locales**   | String?       |The locale required to be displayed                     |No        |System locale           |`en-US`                  |
+| **locales**   | String        |The locale required to be displayed                     |No        |System locale           |`en-US`                  |
 
 To sort your stories alphabetically, set `method` to `'alphabetical'` and optionally set the `locales` string. To sort your stories using a custom list, use the `order` array; stories that don't match an item in the `order` list will appear after the items in the list.