Merge remote-tracking branch 'storybookjs/next' into marklb/fix-run-c…

…ompodoc-on-windows

docs/addons/addon-types.md

@@ -47,7 +47,7 @@ Use this boilerplate code to add a new `button` to Storybook's Toolbar:
 
 <div class="aside">
 
-The <code>icon</code> element used in the example loads the icons from the <code>@storybook/components</code> package. See [here](../workflows/faq.md#what-icons-are-available-for-my-toolbar-or-my-addon) for the list of available icons that you can use.
+The <code>icon</code> element used in the example loads the icons from the <code>@storybook/components</code> package. See [here](../faq.md#what-icons-are-available-for-my-toolbar-or-my-addon) for the list of available icons that you can use.
 
 </div>
 

docs/addons/addons-api.md

@@ -85,7 +85,7 @@ The options to `makeDecorator` are:
 
 <div class="aside">
 
-💡 <strong>Note:</strong>If the story's parameters include `{ foo: { disable: true } }` (where `foo` is the `parameterName` of your addon), your decorator will not be called.
+💡 If the story's parameters include `{ foo: { disable: true } }` (where `foo` is the `parameterName` of your addon), your decorator will not be called.
 
 </div>
 
@@ -286,7 +286,7 @@ This method allows you to set query string parameters. You can use that as tempo
 
 <div class="aside">
 
-💡 <strong>Note:</strong> If you need to remove a query param, use `null` for that. For example, let's say we need to remove the `bbc` query param. See below how to do it:
+💡 If you need to remove a query param, use `null` for that. For example, let's say we need to remove the `bbc` query param. See below how to do it:
 
 </div>
 

docs/api/argtypes.md

@@ -4,7 +4,7 @@ title: 'ArgTypes'
 
 <div class="aside">
 
-<strong>NOTE</strong>: This API is experimental and may change outside of the typical semver release cycle
+This API is experimental and may change outside of the typical semver release cycle
 
 </div>
 

docs/api/cli-options.md

@@ -35,12 +35,12 @@ Usage: start-storybook [options]
 | `--no-manager-cache`            | Disables Storybook's manager caching mechanism. See note below.<br/>`start-storybook --no-manager-cache`                                                                    |
 
 <div class="aside">
-💡 <strong>NOTE</strong>: The flag <code>--no-manager-cache</code> disables the internal caching of Storybook and can severely impact your Storybook loading time, so only use it when you need to refresh Storybook's UI, such as when editing themes.
+💡 The flag <code>--no-manager-cache</code> disables the internal caching of Storybook and can severely impact your Storybook loading time, so only use it when you need to refresh Storybook's UI, such as when editing themes.
 </div>
 
 <div class="aside" id="static-dir-deprecation">
 
-💡 <strong>NOTE</strong>: Starting in 6.4 the `-s` flag is deprecated. Instead, use a configuration object in your `.storybook/main.js` file. See the [images and assets documentation](../configure/images-and-assets.md#serving-static-files-via-storybook) for more information.
+💡 Starting in 6.4 the `-s` flag is deprecated. Instead, use a configuration object in your `.storybook/main.js` file. See the [images and assets documentation](../configure/images-and-assets.md#serving-static-files-via-storybook) for more information.
 
 </div>
 
@@ -65,5 +65,5 @@ Usage: build-storybook [options]
 | `--docs`                        | Builds Storybook in documentation mode. Learn more about it in [here](../writing-docs/build-documentation.md#publish-storybooks-documentation)<br/>`build-storybook --docs` |
 
 <div class="aside">
-💡 <strong>NOTE</strong>: If you're using npm instead of yarn to publish Storybook, the commands work slightly different. For example, <code>npm run build-storybook -- -o ./path/to/build</code>.
-</div>
+💡  If you're using npm instead of yarn to publish Storybook, the commands work slightly different. For example, <code>npm run build-storybook -- -o ./path/to/build</code>.
+</div>

docs/configure/environment-variables.md

@@ -65,7 +65,7 @@ Then you can access this environment variable anywhere, even within your stories
 You can also use specific files for specific modes. Add a <code>.env.development</code> or <code>.env.production</code> to apply different values to your environment variables.
 </div>
 
-You can also pass these environment variables when you are [building your Storybook](../workflows/publish-storybook.md) with `build-storybook`.
+You can also pass these environment variables when you are [building your Storybook](../sharing/publish-storybook.md) with `build-storybook`.
 
 Then they'll be hardcoded to the static version of your Storybook.
 
@@ -82,5 +82,5 @@ The table below lists the available options:
 | Chromium | `BROWSER="chromium"` |
 
 <div class="aside">
-💡 <strong>Note</strong>: By default, Storybook will open a new Chrome window as part of its startup process. If you don't have Chrome installed, make sure to include one of the following options, or set your default browser accordingly.
-</div>
+💡 By default, Storybook will open a new Chrome window as part of its startup process. If you don't have Chrome installed, make sure to include one of the following options, or set your default browser accordingly.
+</div>

docs/configure/overview.md

@@ -75,7 +75,7 @@ Additionally, you can also customize your Storybook configuration to load your s
 <!-- prettier-ignore-end -->
 
 <div class="aside">
-💡 <strong>Note:</strong> If you've enabled <a href="#on-demand-story-loading">on-demand story loading</a>, this option will not work. You must define the story's titles manually.
+💡 If you've enabled <a href="#on-demand-story-loading">on-demand story loading</a>, this option will not work. You must define the story's titles manually.
 </div>
 
 When Storybook starts, it will look for any file containing the `stories` extension inside the `packages/stories` directory and generate the titles for your stories.

docs/configure/sidebar-and-urls.md

@@ -44,7 +44,7 @@ If you need, you can also generate automatic titles for all your stories using a
 
 ## Permalinking to stories
 
-By default, Storybook generates an `id` for each story based on the component title and the story name. This `id` in particular is used in the URL for each story, and that URL can serve as a permalink (primarily when you [publish](../workflows/publish-storybook.md) your Storybook).
+By default, Storybook generates an `id` for each story based on the component title and the story name. This `id` in particular is used in the URL for each story, and that URL can serve as a permalink (primarily when you [publish](../sharing/publish-storybook.md) your Storybook).
 
 Consider the following story:
 

docs/configure/webpack.md

@@ -109,7 +109,7 @@ The following code snippet shows how you can replace the loaders from Storybook
 <!-- prettier-ignore-end -->
 
 <div class="aside"> 
-💡 <strong>Note:</strong> Projects initialized via generators (e.g, Vue CLI) may require that you import their own webpack config file (i.e., <code>/projectRoot/node_modules/@vue/cli-service/webpack.config.js</code>) to use a certain feature with Storybook. For other generators, make sure to check the documentation for instructions. 
+💡 Projects initialized via generators (e.g, Vue CLI) may require that you import their own webpack config file (i.e., <code>/projectRoot/node_modules/@vue/cli-service/webpack.config.js</code>) to use a certain feature with Storybook. For other generators, make sure to check the documentation for instructions. 
 </div>
 
 ### Bundle splitting

docs/contribute/how-to-reproduce.md

@@ -17,7 +17,7 @@ npx sb@next repro
 ```
 
 <div class="aside">
-💡 <strong>Note</strong>: You can add the <code>--template</code> flag to include a custom template.
+💡 You can add the <code>--template</code> flag to include a custom template.
 </div>
 
 Next, select the framework, for example, `react`:
@@ -33,7 +33,7 @@ Finally, enter a location for your reproduction:
 ![Storybook reproduction location](./storybook-reproduction-generator-location-optimized.png)
 
 <div class="aside">
-💡 <strong>Note</strong>: If you don't provide a full path for the reproduction it will be generated in the current directory.
+💡 If you don't provide a full path for the reproduction it will be generated in the current directory.
 </div>
 
 If everything worked as it should, you should have a fully functional Storybook set up in your local environment.
@@ -68,7 +68,7 @@ An excellent way to check your reproduction is to have it deployed online.  We r
 
 ### Helpful resources when working with Chromatic
 
-- [Publish Storybook](../workflows/publish-storybook.md)
+- [Publish Storybook](../sharing/publish-storybook.md)
 - [Setup Chromatic](https://www.chromatic.com/docs/setup)
 - [Automate Chromatic with continuous integration](https://www.chromatic.com/docs/ci)
 

docs/contribute/new-snippets.md

@@ -80,7 +80,7 @@ Create the file `ember/your-component.js.mdx`, similar to the other frameworks,
 ```
 
 <div class="aside">
-💡 <strong>Note:</strong> Code snippets are divided into various file extensions, if you're contributing a TypeScript file use <code>.ts.mdx</code>, or if you're adding MDX files use <code>.mdx.mdx</code> .
+💡 Code snippets are divided into various file extensions, if you're contributing a TypeScript file use <code>.ts.mdx</code>, or if you're adding MDX files use <code>.mdx.mdx</code> .
 </div>
 
 Go through the rest of the documentation and repeat the process.
@@ -110,7 +110,7 @@ yarn start:skip-addons
 ```
 
 <div class="aside">
-💡 <strong>Note:</strong> During the start process if there's an issue with the the documentation, the process will stop and you'll get a notification.
+💡 During the start process if there's an issue with the the documentation, the process will stop and you'll get a notification.
 </div>
 
 Open a browser window to `http://localhost:8000`, click the Docs link, and select your framework from the dropdown.

docs/essentials/actions.md

@@ -63,7 +63,7 @@ If you need more granular control over which `argTypes` are matched, you can adj
 
 <div class="aside">
 
-💡 <strong>NOTE</strong>: If you're generating argTypes with another addon (like [docs](../writing-docs/introduction.md), which is the common behavior), ensure the actions addon <strong>AFTER</strong> the other addon. You can do this by listing it later in the addons registration code in [`.storybook/main.js`](../configure/overview.md#configure-story-rendering). This is default in [essentials](./introduction.md).
+💡 If you're generating argTypes with another addon (like [docs](../writing-docs/introduction.md), which is the common behavior), ensure the actions addon <strong>AFTER</strong> the other addon. You can do this by listing it later in the addons registration code in [`.storybook/main.js`](../configure/overview.md#configure-story-rendering). This is default in [essentials](./introduction.md).
 
 </div>
 

docs/essentials/controls.md

@@ -105,7 +105,7 @@ To do so, use the `matchers` property in the `controls` parameter:
 
 ## Fully custom args
 
-Up until now, we only used auto-generated controls based on the component we're writing stories for. If we are writing [complex stories](../workflows/stories-for-multiple-components.md), we may want to add controls for args that aren’t part of the component.
+Up until now, we only used auto-generated controls based on the component we're writing stories for. If we are writing [complex stories](../writing-stories/stories-for-multiple-components.md), we may want to add controls for args that aren’t part of the component.
 
 <!-- prettier-ignore-start -->
 

docs/essentials/interactions.md

@@ -39,7 +39,7 @@ Next, update [`.storybook/main.js`](../configure/overview.md#configure-story-ren
 <!-- prettier-ignore-end -->
 
 <div class="aside">
-⚠️ <strong>Note</strong>: Make sure to list `@storybook/addon-interactions` **after** `addon-essentials` (or `addon-actions`).
+💡 Make sure to list `@storybook/addon-interactions` **after** `addon-essentials` (or `addon-actions`).
 </div>
 
 Now when you run Storybook, the Interactions addon will be enabled.

docs/essentials/measure-and-outline.md

@@ -15,7 +15,7 @@ With Storybook's Measure addon, you can quickly visualize each component's measu
 </video>
 
 <div class="aside">
-💡 <strong>Note: </strong> Alternatively you can press the <code>m</code> key on your keyboard to toggle the addon.
+💡 Alternatively you can press the <code>m</code> key on your keyboard to toggle the addon.
 </div>
 
 ## Outline addon

docs/essentials/toolbars-and-globals.md

@@ -68,7 +68,7 @@ In your [`.storybook/preview.js`](../configure/overview.md#configure-story-rende
 
 <div class="aside">
 
-💡 The <code>icon</code> element used in the examples loads the icons from the <code>@storybook/components</code> package. See [here](../workflows/faq.md#what-icons-are-available-for-my-toolbar-or-my-addon) for the list of available icons that you can use.
+💡 The <code>icon</code> element used in the examples loads the icons from the <code>@storybook/components</code> package. See [here](../faq.md#what-icons-are-available-for-my-toolbar-or-my-addon) for the list of available icons that you can use.
 
 </div>