Adds docs for testing print styles in Chromatic

src/content/configuration/media-features.md

@@ -62,3 +62,127 @@ The `prefersReducedMotion` option supports the following values:
 
 - `reduce` - Indicating that the user has defined a preference for reduced motion,
 - `no-preference` - Indicating that the user has not preferred reduced motion, and animations display normally.
+
+## Test print styles
+
+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/react/writing-stories/parameters):
+
+```js
+// MyComponent.stories.js|jsx
+
+import { MyComponent } from "./MyComponent";
+
+export default {
+  component: MyComponent,
+  title: "MyComponent",
+};
+
+export const Base = {
+  args: {
+    //...
+  },
+};
+
+export const WithPrintStyles = {
+  args: {
+    //...
+  },
+   // 👇 Sets media to "print" for this story
+  parameters: {
+    chromatic: { media: "print" },
+  },
+};
+```
+
+Currently, setting the `chromatic.media` parameter using [Modes](/docs/modes/) is not supported. So, though you can define a print mode, <strong>using it in a story will not work</strong>:
+
+```js
+// .storybook/modes.js
+
+export const allModes = {
+  print: {
+    media: "print",
+  },
+  // {...  other modes}
+};
+
+
+// MyComponent.stories.js|jsx
+
+import { allModes } from "../.storybook/modes";
+import { MyComponent } from "./MyComponent";
+
+export default {
+  component: MyComponent,
+  title: "MyComponent",
+};
+
+export const Base = {
+  args: {
+    //...
+  },
+};
+
+export const WithPrintStyles = {
+  parameters: {
+    chromatic: {
+      // 🚨 THIS WILL NOT WORK 🚨
+      modes: {
+        print: allModes["print"],
+      },
+    },
+  },
+};
+```
+
+However, you <em>can</em> combine existing modes with the `chromatic.media` parameter. For example, if you have defined modes for German and American English locales, you can write a story combining those modes with print styles. The story would create two Chromatic snapshots, one with German locale mode and print styles, and another with American English locale mode and print styles. It might look like this:
+
+```js
+// .storybook/modes.js
+
+// Define modes
+export const allModes = {
+  german: {
+    locale: "de"
+  },
+  american: {
+    locale: 'en-us'
+  },
+  // {...  other modes}
+};
+
+
+// MyComponent.stories.js|jsx
+
+import { allModes } from "../.storybook/modes";
+import { MyComponent } from "./MyComponent";
+
+export default {
+  component: MyComponent,
+  title: "MyComponent",
+};
+
+export const Base = {
+  args: {
+    //...
+  },
+};
+
+// 👇 Combines modes with print media styles
+// 1️⃣ Set the `media` option to `print`
+// 2️⃣ Set the `modes` to use the desired locales
+// 👀 Note: These modes keys (eg, "german print") will be used in the Chromatic UI
+export const WithPrintStyles = {
+  parameters: {
+    chromatic: {
+      // 1️⃣
+      media: "print",
+      // 2️⃣
+      modes: {
+        "german print": allModes["de"],
+        "en-us print": allModes["en-us"],
+      },
+    },
+  },
+};
+```