Merge pull request #333 from chromaui/update-ia-for-3.0

Create workflow section

src/components/Navigation/Navigation.astro

@@ -12,6 +12,7 @@ interface Props {
     title: string;
     items: (
       | CollectionEntry<"getStarted">
+      | CollectionEntry<"workflow">
       | CollectionEntry<"configuration">
       | CollectionEntry<"modes">
       | CollectionEntry<"snapshot">

src/components/Navigation/SideNav.tsx

@@ -103,10 +103,12 @@ const SidebarContainer = styled.div`
 
 type Item = (
   | CollectionEntry<"getStarted">
+  | CollectionEntry<"workflow">
   | CollectionEntry<"configuration">
   | CollectionEntry<"modes">
   | CollectionEntry<"snapshot">
   | CollectionEntry<"collaborate">
+  | CollectionEntry<"plugins">
   | CollectionEntry<"ci">
   | CollectionEntry<"account">
 ) & {

src/content/config.ts

@@ -17,6 +17,11 @@ const getStarted = defineCollection({
   schema,
 });
 
+const workflow = defineCollection({
+  type: "content",
+  schema,
+});
+
 const configuration = defineCollection({
   type: "content",
   schema,
@@ -54,6 +59,7 @@ const account = defineCollection({
 
 export const collections = {
   getStarted,
+  workflow,
   configuration,
   modes,
   snapshot,

src/content/getStarted/setup.md

@@ -133,7 +133,7 @@ Chromatic posts a "Storybook Publish" status check in your pull/merge request th
 
 ## Next: Catch UI bugs
 
-📸 Now that you published Storybook, let's see how to automate [UI tests](/docs/test) to catch bugs.
+📸 Now that you published Storybook, let's see how to automate [UI Tests](/docs/test) to catch bugs.
 
 <a class="btn primary round" href="/docs/test">Read next chapter</a>
 

src/content/getStarted/test.md

@@ -9,7 +9,7 @@ sidebar: { order: 3, label: "UI Tests" }
 
 UI tests pinpoint visual changes and verify user [interactions](/docs/interactions). They capture a [snapshot](/docs/snapshots) of every story in a cloud browser environment. Whenever you push code, Chromatic generates a new set of snapshots and compares them against [baseline snapshots](/docs/branching-and-baselines#whats-a-baseline). If there are changes, you verify that they’re intentional. If there are test errors, you get notified to fix them.
 
-![UI test](../../images/workflow-uitest.png)
+![UI Tests](../../images/workflow-uitest.png)
 
 ## Enable
 
@@ -115,11 +115,11 @@ Yes, [rerun the latest build](/docs/snapshots#rerun-builds-to-retake-snapshots)
 </details>
 
 <details>
-<summary>How are changes on builds different from those listed on the PR Screen ‘Changeset’ tab?</summary>
+<summary>How are changes on builds different from those listed on the Review page ‘Changeset’ tab?</summary>
 
 UI tests (shown on the build screen) detect changes between builds, specifically, between the last accepted baseline and the latest build. This is useful for detecting defects during the development process and when merging to the main branch to ship.
 
-In contrast, the PR screen shows the changeset between the latest commit on the PR branch (head) and the ‘merge base’ (base). Think of it like code review, but for UI.
+In contrast, the Review page shows the changeset between the latest commit on the PR branch (head) and the ‘merge base’ (base). Think of it like code review, but for UI.
 
 </details>
 

src/content/snapshot/turbosnap.mdx

@@ -9,7 +9,7 @@ import { YouTubeCallout } from "../../components/YouTubeCallout";
 
 # TurboSnap (beta)
 
-TurboSnap is an advanced Chromatic feature that speeds up builds for faster [UI testing](/docs/test) and [review](/docs/review) using Git and Webpack's [dependency graph](https://webpack.js.org/concepts/dependency-graph/). It identifies component files and dependencies that have changed, then intelligently snapshots only the stories associated with those changes. TurboSnap is currently in beta.
+TurboSnap is an advanced Chromatic feature that speeds up builds for faster [UI Tests](/docs/test) and [UI Review](/docs/review) using Git and Webpack's [dependency graph](https://webpack.js.org/concepts/dependency-graph/). It identifies component files and dependencies that have changed, then intelligently snapshots only the stories associated with those changes. TurboSnap is currently in beta.
 
 ![TurboSnap tracks dependencies](../../images/turbosnap-dep-tracking.gif)
 

src/content/workflow/in-development.md

@@ -0,0 +1,63 @@
+---
+layout: "../../layouts/Layout.astro"
+title: In development
+description: How Chromatic helps teams develop applications
+sidebar: { order: 1 }
+---
+
+# In development workflow
+
+Chromatic automates UI development so you can build features faster, with less manual work. Follow along with our recommended workflow to see how it fits into your development process.
+
+### Develop UIs with Storybook
+
+Chromatic automatically turns stories into tests. So the more coverage of your UI with stories, the more time you'll save your team with our automation.
+
+If you're just getting started with Storybook, we recommend you incrementally adopt Storybook to help develop discrete parts of your UI and then expand usage from there. For example, start by using Storybook to develop a new feature. This gives you the chance to write your first stories and see how it fits into your workflow.
+
+![Develop with Storybook](../../images/interaction-test-storybook-passed-test.png)
+
+If you're a seasoned Storybook user, most teams choose a [Component-Driven](https://componentdriven.org/) approach to UI development. UIs are built from the “bottom up” starting with basic components that are progressively combined to assemble pages.
+
+![Component-Driven UI](../../images/component-driven.jpg)
+
+1. Build each component in isolation and write stories for its variations.
+2. Compose small components together to enable more complex functionality.
+3. Assemble pages by combining composite components.
+4. Integrate pages into your project by hooking up data and business logic.
+
+<!-- Uncomment when E2EVT lands <details>
+<summary>Chromatic also integrates with Playwright and Cypress</summary>
+
+Developers test user flows end-to-end by navigating between pages with Playwright or Cypress. This methodology allows you to simulate how users behave. Chromatic uses these E2E tests as visual test cases by automatically snapshotting key moments in the test.
+
+[TK Learn how to setup Playwright](/docs/)
+[TK Learn how to setup Cypress](/docs/)
+
+</details> -->
+
+### Verify each story in multiple dimensions
+
+Once key UI states are captured as stories, verify how each story renders in different environments and with different user preferences to see how real users experience the UI.
+
+| Dimension                              | What to test                              |
+| -------------------------------------- | ----------------------------------------- |
+| [Browsers](/docs/browsers)             | Chrome, Safari, Edge, Firefox             |
+| [Viewports](/docs/viewports)           | Mobile, tablet, desktop                   |
+| [Themes](/docs/themes)                 | Dark mode, light mode, and custom themes  |
+| [Locales](/docs/custom-decorators)     | Languages, text direction                 |
+| [Media features](/docs/media-features) | `forced-colors`, `prefers-reduced-motion` |
+
+### Create a library of test cases
+
+In the steps above, you developed UI and manually verified each story's appearance and functionality. Chromatic is designed to automate this manual verification process by creating a library of test cases from your stories. Once you create a story, you don't need to go back to check each story by hand to confirm that it looks correct. Instead, your library is automatically tested for changes every time you push code.
+
+![Component library](../../images/library.png)
+
+---
+
+## Next: In pull request workflow
+
+Now that you've developed UI in Storybook, see how Chromatic speeds up your pull request workflow. Learn how to collect feedback, manage change requests, and get stakeholder sign-off.
+
+<a class="btn primary round" href="/docs/in-pull-request">Read next chapter</a>