Content updates

- Re-arrange install, to be less intimidating - Fix What's a story? title - Remove H4s from Why Storybook? - Fix typo
storybookjs · Nov 27, 2023 · fc933ba · fc933ba
1 parent eb0d93d
commit fc933ba
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 15 deletions.
diff --git a/docs/get-started/install.md b/docs/get-started/install.md
@@ -2,8 +2,6 @@
 title: 'Install Storybook'
 ---
 
-<YouTubeCallout id="CtfU1UnizHU" title="New Storybook" />
-
 Use the Storybook CLI to install it in a single command. Run this inside your _existing project’s_ root directory:
 
 <!-- prettier-ignore-start -->
@@ -18,12 +16,6 @@ Use the Storybook CLI to install it in a single command. Run this inside your _e
 
 <!-- prettier-ignore-end -->
 
-<Callout variant="info" title="Running into issues?">
-
-Check the [Troubleshooting section](#troubleshooting) below for guidance on how to solve it.
-
-</Callout>
-
 <details>
 
 <summary><code>storybook init</code> is not made for empty projects</summary>
@@ -49,6 +41,8 @@ The command above will make the following changes to your local environment:
 - 📝 Add some boilerplate stories to get you started.
 - 📡 Set up telemetry to help us improve Storybook. Read more about it [here](../configure/telemetry.md).
 
+<YouTubeCallout id="CtfU1UnizHU" title="New Storybook" style={{ marginTop: '1em' }} />
+
 <IfRenderer renderer='react'>
 
 ## Run the Setup Wizard

diff --git a/docs/get-started/whats-a-story.md b/docs/get-started/whats-a-story.md
@@ -1,5 +1,5 @@
 ---
-title: "What's a Story"
+title: "What's a story?"
 ---
 
 A story captures the rendered state of a UI component. Developers write multiple stories per component that describe all the “interesting” states a component can support.

diff --git a/docs/get-started/why-storybook.md b/docs/get-started/why-storybook.md
@@ -109,23 +109,23 @@ Most community members choose a [Component-Driven](https://www.componentdriven.o
 
 When you write stories for components, you get a bunch of additional benefits for free.
 
-#### 📝 Develop UIs that are more durable
+**📝 Develop UIs that are more durable**
 
 Isolate components and pages and track their use cases as [stories](../writing-stories/index.md). Verify hard-to-reach edge cases of UI. Use addons to mock everything a component needs—context, API requests, device features, etc.
 
-#### ✅ Test UIs with less effort and no flakes
+**✅ Test UIs with less effort and no flakes**
 
 Stories are a pragmatic, reproducible way of tracking UI states. Use them to spot-test the UI during development. Storybook offers built-in workflows for automated [Accessibility](../writing-tests/accessibility-testing.md), [Interaction](../writing-tests/interaction-testing.md), and [Visual](../writing-tests/visual-testing.md) testing. Or use stories as test cases by importing them into other JavaScript testing tools.
 
-#### 📚 Document UI for your team to reuse
+**📚 Document UI for your team to reuse**
 
 Storybook is the single source of truth for your UI. Stories index all your components and their various states, making it easy for your team to find and reuse existing UI patterns. Storybook also auto-generates [documentation](../writing-docs/index.md) from those stories.
 
-#### 📤 Share how the UI actually works
+**📤 Share how the UI actually works**
 
 Stories show how UIs actually work, not just a picture of how they're supposed to work. That keeps everyone aligned on what's currently in production. [Publish Storybook](../sharing/publish-storybook.md) to get sign-off from teammates. Or [embed](../sharing/embed.md) them in wikis, Markdown, and Figma to streamline collaboration.
 
-#### 🚦Automate UI workflows
+**🚦Automate UI workflows**
 
 Storybook is compatible with your continuous integration workflow. Add it as a CI step to automate user interface testing, review implementation with teammates, and get signoff from stakeholders.
 

diff --git a/docs/sharing/index.md b/docs/sharing/index.md
@@ -3,7 +3,7 @@ title: 'Sharing'
 hideRendererSelector: true
 ---
 
-You have your components ready and tested. That's great! Now you want to make your component library available to your team or community to help them understand how they work. There's mupliple ways you can do that. You can publish your Storybook to services like Chromatic, embed some of your stories in your own website, or use third party services like Figma.
+You have your components ready and tested. That's great! Now you want to make your component library available to your team or community to help them understand how they work. There are multiple ways you can do that. You can publish your Storybook to services like Chromatic, embed some of your stories in your own website, or use third party services like Figma.
 
 - [Publish](./publish-storybook.md)
 - [Embed](./embed.md)