Merge pull request #533 from chromaui/params_callout_adjustments

Feat: Adjust ParamsCallout component and documentation

src/components/ParamsCallout.astro

@@ -1,11 +1,30 @@
 ---
-const { name } = Astro.props;
+const { name, integration } = Astro.props;
 ---
 
 <div class="callout">
-  ℹ️ The <code>chromatic.{name}</code> parameter can be set at story, component,
-  and project levels. This enables you to set project wide defaults and override
-  them for specific components and/or stories. <a
-    href="/docs/config-with-story-params">Learn more »</a
-  >
+  {
+    integration === "storybook" ? (
+      <>
+        ℹ️ The <code>chromatic.{name}</code> parameter can be set at story,
+        component, and project levels. This enables you to set project wide
+        defaults and override them for specific components and/or stories.{" "}
+        <a href="/docs/config-with-story-params">Learn more »</a>
+      </>
+    ) : integration === "playwright" ? (
+      <>
+        ℹ️ The <code>{name}</code> configuration option can be set at the
+        project level or the test level. This enables you to set project wide
+        defaults and override them for specific tests.{" "}
+        <a href="/docs/playwright/configure">Learn more »</a>
+      </>
+    ) : integration === "cypress" ? (
+      <>
+        ℹ️ The <code>{name}</code> configuration option can be set at the
+        project level or the test level. This enables you to set project wide
+        defaults and override them for specific tests.{" "}
+        <a href="/docs/cypress/configure">Learn more »</a>
+      </>
+    ) : null
+  }
 </div>

src/content/snapshotOptions/delay.mdx

@@ -24,7 +24,7 @@ The maximum time for snapshot capture is 15s. Your story should finish loading r
 
 Use [story-level](https://storybook.js.org/docs/writing-stories/parameters#story-parameters) delay to ensure a minimum amount of time (in milliseconds) has passed before Chromatic takes a screenshot.
 
-<ParamsCallout name="delay" />
+<ParamsCallout name="delay" integration="storybook" />
 
 ```js
 // MyComponent.stories.js|jsx

src/content/snapshotOptions/media-features.mdx

@@ -15,7 +15,7 @@ CSS media features enable developers to create responsive designs and adapt layo
 
 The [`forced-colors`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors) CSS media feature enables developers to create accessible websites for users with visual impairments. It detects high-contrast mode and color preferences ensuring that websites and applications are legible and accessible. To test it in Chromatic, add the `forcedColors` option to the `chromatic` parameter:
 
-<ParamsCallout name="forcedColors" />
+<ParamsCallout name="forcedColors" integration="storybook" />
 
 ```js
 // MyComponent.stories.js|jsx
@@ -44,7 +44,7 @@ The `forcedColors` option supports the following values:
 
 The [`prefers-reduced-motion`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) CSS media feature enables developers to check whether the user enabled a preference for reduced motion animations. Primarily used to create a more inclusive user experience for people who may experience discomfort or nausea when viewing animations that involve rapid movement. To test it in Chromatic, add the `prefersReducedMotion` option to the `chromatic` parameter:
 
-<ParamsCallout name="prefersReducedMotion" />
+<ParamsCallout name="prefersReducedMotion" integration="storybook" />
 
 ```js
 // MyComponent.stories.js|jsx
@@ -73,7 +73,7 @@ The `prefersReducedMotion` option supports the following values:
 
 The [`print`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/print) CSS media feature enables developers to create print styles for web pages. To test it in Chromatic, set the `media` option to `print` in the `chromatic` [parameter](https://storybook.js.org/docs/writing-stories/parameters):
 
-<ParamsCallout name="media" />
+<ParamsCallout name="media" integration="storybook" />
 
 ```js
 // MyComponent.stories.js|jsx

src/content/snapshotOptions/threshold.mdx

@@ -17,7 +17,7 @@ Chromatic's default threshold is `.063`, which balances high visual accuracy wit
 
 Configure the `diffThreshold` with a Storybook [parameter](https://storybook.js.org/docs/writing-stories/parameters#story-parameters) like so:
 
-<ParamsCallout name="diffThreshold" />
+<ParamsCallout name="diffThreshold" integration="storybook" />
 
 ```js
 // MyComponent.stories.js|jsx
@@ -50,7 +50,7 @@ By default, Chromatic detects anti-aliased pixels and ignores them to prevent fa
 
 Configure the `diffIncludeAntiAliasing` with a Storybook [parameter](https://storybook.js.org/docs/writing-stories/parameters#story-parameters) like so:
 
-<ParamsCallout name="diffIncludeAntiAliasing" />
+<ParamsCallout name="diffIncludeAntiAliasing" integration="storybook" />
 
 ```js
 // MyComponent.stories.js|jsx