Merge pull request #11869 from storybookjs/reorder-essentials

docs/essentials/introduction.md

@@ -4,11 +4,12 @@ title: 'Essential addons'
 
 A major strength of Storybook are [addons](/addons/) that extend Storybook’s UI and behavior. There are many third-party addons as well as “official” addons developed by the Storybook core team. Storybook ships by default with a set of “essential” addons that add to the initial user experience.
 
-- [Actions](./actions.md)
-- [Backgrounds](./backgrounds.md)
-- [Controls](./controls.md)
 - [Docs](../writing-docs/introduction.md)
+- [Controls](./controls.md)
+- [Actions](./actions.md)
 - [Viewport](./viewports.md)
+- [Backgrounds](./backgrounds.md)
+- [Toolbars](./toolbars.md)
 
 ### Configuration
 
@@ -35,5 +36,7 @@ As an example, if the background addon wasn't necessary to your work, you would
 <!-- prettier-ignore-end -->
 
 <div class="aside">
-  You can use the following keys for each individual addon: `actions`, `backgrounds`, `controls`, `docs`, `viewport`.
+
+You can use the following keys for each individual addon: `actions`, `backgrounds`, `controls`, `docs`, `viewport`, `toolbars`.
+
 </div>

docs/toc.js

@@ -117,27 +117,26 @@ module.exports = {
           title: 'Introduction',
           type: 'link',
         },
-
-        {
-          pathSegment: 'actions',
-          title: 'Actions',
-          type: 'link',
-        },
-        {
-          pathSegment: 'backgrounds',
-          title: 'Backgrounds',
-          type: 'link',
-        },
         {
           pathSegment: 'controls',
           title: 'Controls',
           type: 'link',
         },
+        {
+          pathSegment: 'actions',
+          title: 'Actions',
+          type: 'link',
+        },
         {
           pathSegment: 'viewport',
           title: 'Viewport',
           type: 'link',
         },
+        {
+          pathSegment: 'backgrounds',
+          title: 'Backgrounds',
+          type: 'link',
+        },
         {
           pathSegment: 'toolbars-and-globals',
           title: 'Toolbars & globals',

docs/workflows/stories-for-multiple-components.md

@@ -75,8 +75,10 @@ OneItem.args = {
 
 Now that `children` is an arg, we can potentially reuse it in another story.
 
-<div class="aside"/>
+<div class="aside">
+
 As things stand (we hope to improve this soon) you cannot edit children in a control yet.
+
 </div>
 
 ## Creating a Template Component