From e3e57789259824196b56df16bca6cee10539a2a1 Mon Sep 17 00:00:00 2001
From: jonniebigodes <joaocontadesenvolvimento@gmail.com>
Date: Tue, 6 Aug 2024 20:46:11 +0100
Subject: [PATCH] Feat: Adjust ParamsCallout component and documentation

---
 src/components/ParamsCallout.astro            | 31 +++++++++++++++----
 src/content/snapshotOptions/delay.mdx         |  2 +-
 .../snapshotOptions/media-features.mdx        |  6 ++--
 src/content/snapshotOptions/threshold.mdx     |  4 +--
 4 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/src/components/ParamsCallout.astro b/src/components/ParamsCallout.astro
index b9b2dfab..8f8b0b4b 100644
--- a/src/components/ParamsCallout.astro
+++ b/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>
diff --git a/src/content/snapshotOptions/delay.mdx b/src/content/snapshotOptions/delay.mdx
index adcff58b..1f4c9a14 100644
--- a/src/content/snapshotOptions/delay.mdx
+++ b/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
diff --git a/src/content/snapshotOptions/media-features.mdx b/src/content/snapshotOptions/media-features.mdx
index 47d4f46f..42297e51 100644
--- a/src/content/snapshotOptions/media-features.mdx
+++ b/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
diff --git a/src/content/snapshotOptions/threshold.mdx b/src/content/snapshotOptions/threshold.mdx
index 63e7c339..fb792dcb 100644
--- a/src/content/snapshotOptions/threshold.mdx
+++ b/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