Merge pull request #16032 from storybookjs/chore_polish_get_started_section_6_4

Chore:(Docs) Polish get started section 6 4

docs/get-started/browse-stories.md

@@ -2,11 +2,11 @@
 title: 'Browse Stories'
 ---
 
-Last chapter we learned that stories correspond with discrete component states. This chapter demonstrates how to use Storybook as a workshop for building components.
+Last chapter, we learned that stories correspond with discrete component states. This chapter demonstrates how to use Storybook as a workshop for building components.
 
 ## Sidebar and Canvas
 
-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.
+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.
 
 <video autoPlay muted playsInline loop>
   <source
@@ -15,8 +15,7 @@ A `*.stories.js` file defines all the stories for a component. Each story has a
   />
 </video>
 
-
-Navigate between stories by clicking on them in the sidebar. Try the sidebar search to find a story by name. 
+Navigate between stories by clicking on them in the sidebar. Try the sidebar search to find a story by name.
 
 Or use keyboard shortcuts. Click on the Storybook's menu to see the list of shortcuts available.
 
@@ -29,7 +28,7 @@ Or use keyboard shortcuts. Click on the Storybook's menu to see the list of shor
 
 ## Toolbar
 
-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 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)
 
@@ -44,7 +43,7 @@ Storybook ships with time-saving tools built in. The toolbar contains tools that
   />
 </video>
 
-The [“Docs”](../writing-docs/introduction.md) 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.
+The [“Docs”](../writing-docs/introduction.md) 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.
 
 <video autoPlay muted playsInline loop>
   <source
@@ -61,8 +60,8 @@ Addons are plugins that extend Storybook's core functionality. You can find them
 
 ![Storybook addon examples](./addons.png)
 
-- **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.
+- **Controls** allows you to interact with a component’s args (inputs) dynamically. 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.
 
 <video autoPlay muted playsInline loop>
   <source

docs/get-started/install.md

@@ -27,7 +27,7 @@ title: 'Install Storybook'
 
 <summary><code>sb init</code> is not made for empty projects</summary>
 
-Storybook needs to be installed into a project that is already set up with a framework. It will not work on an empty project. There are many ways to bootstrap an app in a given framework including:
+Storybook needs to be installed into a project that is already set up with a framework. It will not work on an empty project. There are many ways to bootstrap an app in a given framework, including:
 
 - 📦 [Create an Angular Workspace](https://angular.io/cli/new)
 - 📦 [Create React App](https://reactjs.org/docs/create-a-new-react-app.html)
@@ -37,16 +37,16 @@ Storybook needs to be installed into a project that is already set up with a fra
 
 </details>
 
-During its install process, Storybook will look into your project's dependencies and provide you with the best configuration available.
+Storybook will look into your project's dependencies during its install process and provide you with the best configuration available.
 
 The command above will make the following changes to your local environment:
 
 - 📦 Install the required dependencies.
-- 🛠 Set up the necessary scripts to run and build Storybook.
+- 🛠 Setup the necessary scripts to run and build Storybook.
 - 🛠 Add the default Storybook configuration.
 - 📝 Add some boilerplate stories to get you started.
 
-Depending on your framework, first build your app and then check that everything worked by running:
+Depending on your framework, first, build your app and then check that everything worked by running:
 
 <!-- prettier-ignore-start -->
 
@@ -59,17 +59,17 @@ Depending on your framework, first build your app and then check that everything
 
 <!-- prettier-ignore-end -->
 
-It will start Storybook locally and output the address. Depending on your system configuration, it will automatically open the address in a new browser tab and you'll be greeted by a welcome screen.
+It will start Storybook locally and output the address. Depending on your system configuration, it will automatically open the address in a new browser tab, and you'll be greeted by a welcome screen.
 
 ![Storybook welcome screen](./example-welcome.png)
 
 There are some noteworthy items here:
 
-- 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 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.
 
-Now that you installed Storybook successfully, let’s take a look at a story that was written for us.
+Now that you installed Storybook successfully let’s take a look at a story that was written for us.
 
 <details>
 <summary><h4>Troubleshooting</h4></summary>

docs/get-started/installation-problems/angular.mdx

@@ -1,2 +1,3 @@
 - You can also setup Storybook manually through the Storybook CLI. Add the `--type angular` flag when you initialize Storybook in your project.
 - If there's an installation problem, check the [README for the Angular framework](../../app/angular/README.md).
+- Check if you're running the install command in the root directory of your project, or if you're working with a monorepo from the directory where the `angular.json` is located.

docs/get-started/setup.md

@@ -41,9 +41,9 @@ Your project may have additional requirements before components can be rendered
 <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:
+If you see errors on the CLI when you run the `yarn storybook` command, you likely need to make changes to Storybook’s build configuration. Here are some things to try:
 
-- [Presets](../addons/addon-types.md) bundle common configurations for various technologies into Storybook. In particular presets exist for Create React App, SCSS and Ant Design.
+- [Presets](../addons/addon-types.md) 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/babel.md#custom-babel-config) for Storybook. Storybook automatically tries to use your project’s config if it can.
 - Adjust the [webpack configuration](../configure/webpack.md) that Storybook uses. Try patching in your own configuration if needed.
 
@@ -52,18 +52,18 @@ If you see errors on the CLI when you run the `yarn storybook` command. It’s l
 <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.
+If Storybook builds but you see an error immediately when connecting to it in the browser, in that case, 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>
 
 <details id="component-context" name="component-context">
 <summary>Component context</summary>
 
-If a particular story has a problem rendering, often it means your component expects a certain environment is available to the component.
+If a particular story has a problem rendering, often it means your component expects a specific environment is available to the component.
 
-A common frontend pattern is for components to assume that they render in a certain “context” with parent components higher up the rendering hierarchy (for instance theme providers)
+A common frontend pattern is for components to assume that they render in a specific “context” with parent components higher up the rendering hierarchy (for instance, theme providers).
 
-Use [decorators](../writing-stories/decorators.md) to “wrap” every story in the necessary context providers. [`.storybook/preview.js`](../configure/overview.md#configure-story-rendering) allows you to customize how components render in Canvas, the preview iframe. In this decorator example, we wrap every component rendered in Storybook with `ThemeProvider`.
+Use [decorators](../writing-stories/decorators.md) to “wrap” every story in the necessary context providers. The [`.storybook/preview.js`](../configure/overview.md#configure-story-rendering) file allows you to customize how components render in Canvas, the preview iframe. In this decorator example, we wrap every component rendered in Storybook with `ThemeProvider`.
 
 <!-- prettier-ignore-start -->
 
@@ -81,30 +81,28 @@ Use [decorators](../writing-stories/decorators.md) to “wrap” every story in
 
 ## Render component styles
 
-Storybook isn’t opinionated about how you generate or load CSS. It renders whatever DOM elements you provide. But sometimes things won’t “look right” out of the box.
+Storybook isn’t opinionated about how you generate or load CSS. It renders whatever DOM elements you provide. But sometimes, things won’t “look right” out of the box.
 
 You may have to configure your CSS tooling for Storybook’s rendering environment. Here are some tips on what could help:
 
 <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](#component-context).
+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](#component-context).
 
 </details>
 
 <details>
   <summary>@import CSS into components</summary>
 
-Storybook allows you to import CSS files in your components directly. But in some cases you may need to [tweak the webpack config](../configure/webpack.md#extendingstorybooks-webpack-config). Angular components require [a special import](../configure/styling-and-css.md#importing-css-files).
+Storybook allows you to import CSS files in your components directly. But in some cases you may need to [tweak its webpack configuration](../configure/webpack.md#extendingstorybooks-webpack-config). Angular components require [a special import](../configure/styling-and-css.md#importing-css-files).
 
 </details>
 
 <details>
   <summary>Global imported styles</summary>
 
-If you have global imported styles, create a file called [`.storybook/preview.js`](../configure/overview.md#configure-story-rendering) and import the styles there. The styles will be added by Storybook automatically for all stories.
+If you have global imported styles, create a file called [`.storybook/preview.js`](../configure/overview.md#configure-story-rendering) and import the styles there. They will be added by Storybook automatically for all stories.
 
 </details>
 
@@ -124,6 +122,6 @@ If you're referencing fonts or images from a local directory, you'll need to con
 
 ## Load assets and resources
 
-If you want to [link to static files](../configure/images-and-assets.md) in your project or stories (e.g. `/fonts/XYZ.woff`), use the `-s path/to/folder` to specify a static folder to serve from when you start up Storybook. To do so, edit the `storybook` and `build-storybook` scripts in `package.json`.
+If you want to [link to static files](../configure/images-and-assets.md) in your project or stories (e.g., `/fonts/XYZ.woff`), use the `-s path/to/folder` flag to specify a static folder to serve from when you start up Storybook. To do so, edit the `storybook` and `build-storybook` scripts in `package.json`.
 
-We recommend serving external resources and assets requested in your components statically with Storybook. This ensures that assets are always available to your stories.
+We recommend serving external resources and assets requested in your components statically with Storybook. It ensures that assets are always available to your stories.

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

@@ -6,7 +6,7 @@ A story captures the rendered state of a UI component. Developers write multiple
 
 The CLI created example components that demonstrate the types of components you can build with Storybook: Button, Header, and Page.
 
-Each example component has a set of stories that show the states it supports. You can browse the stories in the UI and see the code behind them in files that end with `.stories.js` or `.stories.ts`. The stories are written in Component Story Format (CSF)―an ES6 modules-based standard―for writing component examples.
+Each example component has a set of stories that show the states it supports. You can browse the stories in the UI and see the code behind them in files that end with `.stories.js` or `.stories.ts`. The stories are written in Component Story Format (CSF)--an ES6 modules-based standard--for writing component examples.
 
 Let’s start with the `Button` component. A story is a function that describes how to render the component in question. Here’s how to render `Button` in the “primary” state and export a story called `Primary`.
 
@@ -34,7 +34,7 @@ Let’s start with the `Button` component. A story is a function that describes
 
 View the rendered `Button` by clicking on it in the Storybook sidebar.
 
-The above story definition can be further improved to take advantage of [Storybook’s “args”](../writing-stories/args.md) concept. Args describes the arguments to Button in a machine readable way. This unlocks Storybook’s superpower of altering and composing arguments dynamically.
+The above story definition can be further improved to take advantage of [Storybook’s “args”](../writing-stories/args.md) concept. Args describes the arguments to Button in a machine-readable way. It unlocks Storybook’s superpower of altering and composing arguments dynamically.
 
 <!-- prettier-ignore-start -->
 
@@ -65,17 +65,11 @@ Both story examples render the same thing because Storybook feeds the given `arg
 - `Button`s callbacks are logged into the Actions tab. Click to try it.
 - `Button`s arguments are dynamically editable in the Controls tab. Adjust the controls
 
-<div class="aside">
-
-Note that `Template.bind({})` is a [standard JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind) technique for making a copy of a function. We copy the `Template` so each exported story can set its own properties on it.
-
-</div>
-
 ### Edit a story
 
-Storybook makes it easy to work on one component in one state (aka a story) at a time. When you edit the Button code or stories, Storybook will instantly re-render in the browser. No need to manually refresh.
+Storybook makes it easy to work on one component in one state (aka a story) at a time. When you edit the Button code or stories, Storybook will instantly re-render in the browser. No need to refresh manually.
 
-Update the `label` of the `Primary` story then see your change in Storybook.
+Update the `label` of the `Primary` story, then see your change in Storybook.
 
 <video autoPlay muted playsInline loop>
   <source
@@ -84,7 +78,7 @@ Update the `label` of the `Primary` story then see your change in Storybook.
   />
 </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.
+Stories are also helpful 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.
 
 <video autoPlay muted playsInline loop>
   <source
@@ -95,4 +89,4 @@ Stories are also useful for checking that UI continues to look correct as you ma
 
 Checking component’s stories as you develop helps prevent accidental regressions. Tools that integrate with Storybook can also [automate](../workflows/testing-with-storybook.md) this for you.
 
-Now we’ve seen the basic anatomy of a story, let’s see how we use Storybook’s UI to develop stories.
+Now that we’ve seen the basic anatomy of a story let’s see how we use Storybook’s UI to develop stories.