more formatting

chromaui · Sep 4, 2023 · 3ddb282 · 3ddb282
1 parent 18821e5
commit 3ddb282
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 33 deletions.
diff --git a/modes.md b/modes.md
@@ -209,7 +209,7 @@ export default {
   title: 'ArticleCard',
   parameters: {
     chromatic: {
-      //🔶 Test each story for ArticleCard in two modes
+      //🔶 Test each story for ArticleCard with this mode
       modes: {
         desktop: allModes['desktop'],
       },
@@ -230,6 +230,7 @@ export const Base = {
     },
   },
 };
+
 export const MembersOnly = {
   args: {
     //...

diff --git a/viewports.md b/viewports.md
@@ -171,40 +171,46 @@ export const allModes = {
 };
 ```
 
-- **What if I set `defaultViewport` in my story?**
-  You have the ability to configure the default viewport for stories at different levels: project, component, or story. This can be done by setting the `parameters.viewport` value. By adjusting this setting, you can control the dimensions of the story canvas when viewing it in the browser using Storybook.
-  However, it's important to note that when capturing snapshots, Chromatic will ignore `defaultViewport` and size the viewport based on the configuration within the mode.
-  In the example below, `MyStory` will use `md` viewport size when viewed in the browser. However, the two snapshots will use `lg` and `xl` viewport sizes respectively.
-
-  ```jsx
-  // MyComponent.stories.ts|tsx
-
-  import type { Meta, StoryObj } from '@storybook/react';
-  import { allModes } from '../.storybook/modes';
-  import { MyComponent } from './MyComponent';
-
-  const meta: Meta<typeof MyComponent> = {
-    component: MyComponent,
-    title: 'MyComponent',
-  };
-
-  export default meta;
-  type Story = StoryObj<typeof MyComponent>;
-
-  export const MyStory: Story = {
-    parameters: {
-      viewport: {
-        defaultViewport: 'md',
-      },
-      chromatic: {
-        modes: {
-          lg: allModes['lg'],
-          xl: allModes['xl'],
-        },
+<details>
+<summary>What if I set <code>defaultViewport</code> in my story?</summary>
+
+You have the ability to configure the default viewport for stories at different levels: project, component, or story. This can be done by setting the `parameters.viewport` value. By adjusting this setting, you can control the dimensions of the story canvas when viewing it in the browser using Storybook.
+
+However, it's important to note that when capturing snapshots, Chromatic will ignore `defaultViewport` and size the viewport based on the configuration within the mode.
+
+In the example below, `MyStory` will use `md` viewport size when viewed in the browser. However, the two snapshots will use `lg` and `xl` viewport sizes respectively.
+
+```jsx
+// MyComponent.stories.ts|tsx
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { allModes } from '../.storybook/modes';
+import { MyComponent } from './MyComponent';
+
+const meta: Meta<typeof MyComponent> = {
+  component: MyComponent,
+  title: 'MyComponent',
+};
+
+export default meta;
+type Story = StoryObj<typeof MyComponent>;
+
+export const MyStory: Story = {
+  parameters: {
+    viewport: {
+      defaultViewport: 'md',
+    },
+    chromatic: {
+      modes: {
+        lg: allModes['lg'],
+        xl: allModes['xl'],
       },
     },
-  };
-  ```
+  },
+};
+```
+
+</details>
 
 ## Migration from viewports (legacy) to modes