Skip to content

Commit

Permalink
Merge pull request #19187 from storybookjs/chore_docs_why_page_minor_…
Browse files Browse the repository at this point in the history
…tweaks

Chore: (Docs) Minor tweaks to the Why page
  • Loading branch information
jonniebigodes authored and shilman committed Sep 15, 2022
1 parent 6b2bd0a commit edf9867
Showing 1 changed file with 8 additions and 8 deletions.
16 changes: 8 additions & 8 deletions docs/why-storybook.md
Expand Up @@ -16,7 +16,7 @@ The breadth of modern frontends overwhelm existing workflows. Developers must co

## The solution

**Build UIs in isolation**
#### Build UIs in isolation

Every piece of UI is now a [component](https://www.componentdriven.org/). The superpower of components is that you don't need to spin up the whole app just to see how they render. You can render a specific variation in isolation by passing in props, mocking data, or faking events.

Expand All @@ -29,7 +29,7 @@ Storybook is packaged as a small, development-only, [workshop](https://bradfrost
/>
</video>

**Capture UI variations as “stories”**
#### Capture UI variations as “stories”

When developing a component variation in isolation, save it as a story. [Stories](https://github.com/ComponentDriven/csf) are a declarative syntax for supplying props and mock data to simulate component variations. Each component can have multiple stories. Each story allows you to demonstrate a specific variation of that component to verify appearance and behavior.

Expand Down Expand Up @@ -62,7 +62,7 @@ You write stories for granular UI component variation and then use those stories

<!-- prettier-ignore-end -->

**Storybook keeps track of every story**
#### Storybook keeps track of every story

Storybook is an interactive directory of your UI components and their stories. In the past, you'd have to spin up the app, navigate to a page, and contort the UI into the right state. This is a huge waste of time and bogs down frontend development. With Storybook, you can skip all those steps and jump straight to working on a UI component in a specific state.

Expand Down Expand Up @@ -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/introduction.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/introduction.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.

Expand Down

0 comments on commit edf9867

Please sign in to comment.