Merge pull request #297 from chromaui/oauth-scopes

Oauth scopes & modes updates

src/content/collaborate/access.md

@@ -32,6 +32,22 @@ Depending on your Git provider, Chromatic will request a set of OAuth scopes whe
 
 </details>
 
+<details>
+    <summary>What do you need to link a project to a Git provider repository?</summary>
+
+To link a project to a Git provider repository, you need:
+
+- Membership in the organization that owns the repository.
+- Write access to the repository, via one of the following roles:
+
+| Git provider                                                                                                                                                                                                 | Role                                  |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------- |
+| [GitHub](https://docs.github.com/en/organizations/managing-user-access-to-your-organizations-repositories/managing-repository-roles/repository-roles-for-an-organization#repository-roles-for-organizations) | `write`, `maintain`, or `admin`       |
+| [GitLab](https://docs.gitlab.com/ee/user/permissions.html#project-members-permissions)                                                                                                                       | `developer`, `maintainer`, or `owner` |
+| [Bitbucket](https://support.atlassian.com/bitbucket-cloud/docs/grant-repository-access-to-users-and-groups/)                                                                                                 | `admin`, or `write`                   |
+
+</details>
+
 <details>
     <summary>What permissions does the GitHub App request?</summary>
 

src/content/collaborate/collaborators.md

@@ -93,7 +93,7 @@ External collaborators are added and removed manually. Once they create an accou
 
 #### Limitations of external collaborator accounts
 
-External collaborator accounts do not have an association with a Git provider. As a result, they cannot link the project to a repository on GitHub, Bitbucket, or GitLab.
+External collaborator accounts cannot link the project to a repository on GitHub, Bitbucket, or GitLab.
 
 ### Roles
 

src/content/modes/modes.md → src/content/modes/modes.mdx

@@ -5,15 +5,20 @@ description: Configure Chromatic to test themes, viewports, locales and more sim
 sidebar: { order: 1 }
 ---
 
+import { YouTubeCallout } from "../../components/YouTubeCallout";
+
 # Modes for testing themes, viewports, locales & more
 
 Global-level configurations (globals) such as viewport size, theme (light/dark), and locale impact how a component renders. Chromatic simplifies the process of visually testing your stories with different global configs.
 
+<YouTubeCallout client:load id="BDuQb8jdz-c" summary="Watch a quick demo of how modes work" />
+
 You can save combinations of globals as a unique "mode" and apply one or multiple modes to a story using the `chromatic.modes` parameter. When Chromatic tests your story, it will capture a snapshot for each applied mode. These modes are treated separately, with independent baselines and distinct approvals.
 
 Using modes requires Storybook 6.0 or later.
 
-<details><summary>Modes are powered by Storybook globals & decorators</summary>
+<details>
+<summary>Modes are powered by Storybook globals & decorators</summary>
 
 Consider this card component. It supports both light and dark variants, and its layout adjusts based on the viewport size. To switch between themes and viewport sizes, we click on the Storybook toolbar.
 
@@ -378,7 +383,8 @@ export const allModes = {
 
 ### Frequently asked questions
 
-<details><summary>What happens if I remove a mode?</summary>
+<details>
+<summary>What happens if I remove a mode?</summary>
 
 Each mode has its own independent baselines and distinct approvals. Therefore, if you remove a mode, Chromatic will not capture a snapshot for that mode.
 

src/content/snapshot/snapshots.md

@@ -11,12 +11,14 @@ A snapshot is an image of a story plus some metadata captured by a standardized
 
 ## Table of contents:
 
-- [View snapshots for a story](#view-snapshots-for-a-story)
-- [How are snapshots captured?](#how-are-snapshots-captured)
-- [Improve snapshot consistency](#improve-snapshot-consistency)
-- [Debug snapshot rendering](#debug-snapshot-rendering)
-- [Rerun builds to retake snapshots](#rerun-builds-to-retake-snapshots)
-- [Browser differences between snapshots](#browser-differences-between-snapshots)
+- [Snapshots](#snapshots)
+  - [Table of contents:](#table-of-contents)
+  - [View snapshots for a story](#view-snapshots-for-a-story)
+  - [How are snapshots captured?](#how-are-snapshots-captured)
+  - [Improve snapshot consistency](#improve-snapshot-consistency)
+  - [Debug snapshot rendering](#debug-snapshot-rendering)
+  - [Rerun builds to retake snapshots](#rerun-builds-to-retake-snapshots)
+  - [Browser differences between snapshots](#browser-differences-between-snapshots)
 
 <div class="aside">
 
@@ -268,9 +270,7 @@ export const StoryWithDimensions = {
 <details>
 <summary>Do you support taking snapshots of a component with multiple themes?</summary>
 
-We recommend you render stories multiple times, one for each theme. Here's a [blog post](https://storybook.js.org/blog/how-to-add-a-theme-switcher-to-storybook/) that explains how to enable a theme switcher in Storybook. Using this approach, this is how the snapshots will [appear in Chromatic](https://www.chromatic.com/library?appId=5a375b97f4b14f0020b0cda3&branch=next).
-
-If you'd only like to see multiple themes side-by-side in Chromatic and not in your local Storybook, use [isChromatic()](/docs/ischromatic).
+Yes, check out the Chromatic's [modes feature](/docs/modes) is simplifies the process of visually testing your stories with different global configs such as themes. Check out the [Themes in modes](/docs/themes) guide to get started.
 
 </details>