chore: test responsiveness in Chromatic (#2727)

marigold-ui · Jan 23, 2023 · 1f33094 · 1f33094
1 parent 3545b61
commit 1f33094
Show file tree

Hide file tree

Showing 39 changed files with 9,560 additions and 3,086 deletions.
diff --git a/config/storybook/preview.tsx b/config/storybook/preview.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import isChromatic from 'chromatic/isChromatic';
-import type { StoryFn } from '@storybook/react';
+import { StoryFn } from '@storybook/react';
 
 import { Box, MarigoldProvider } from '@marigold/components';
 import b2bTheme from '@marigold/theme-b2b';
@@ -48,7 +48,7 @@ export const parameters = {
 export const decorators = [
   (Story: StoryFn, { globals, parameters }: any) => {
     const theme = isChromatic()
-      ? 'stacked'
+      ? parameters.theme || 'stacked'
       : globals.theme || parameters.theme || 'b2b';
 
     switch (theme) {
@@ -68,7 +68,9 @@ export const decorators = [
       default: {
         return (
           <MarigoldProvider theme={THEME[theme as ThemeNames]}>
-            <Story />
+            <div style={{ height: '900px' }}>
+              <Story />
+            </div>
           </MarigoldProvider>
         );
       }

diff --git a/package.json b/package.json
@@ -26,6 +26,7 @@
     "@types/node": "16.18.3",
     "all-contributors-cli": "6.24.0",
     "async-retry": "1.3.3",
+    "chromatic": "6.6.3",
     "eslint": "8.32.0",
     "husky": "8.0.2",
     "jest": "29.3.1",

diff --git a/packages/components/src/Aside/Aside.stories.tsx b/packages/components/src/Aside/Aside.stories.tsx
@@ -3,6 +3,7 @@ import type { Meta, ComponentStory } from '@storybook/react';
 import { Box } from '../Box';
 
 import { Aside } from './Aside';
+import isChromatic from 'chromatic';
 
 export default {
   title: 'Components/Aside',
@@ -85,3 +86,9 @@ export const InheritWidth: ComponentStory<typeof Aside> = () => (
     </Box>
   </Aside>
 );
+
+Basic.parameters = {
+  // Set the viewports in Chromatic at a story level.
+  chromatic: { viewports: [320, 1200] },
+  theme: isChromatic() ? 'b2b' : 'stacked',
+};
diff --git a/packages/components/src/Aspect/Aspect.stories.tsx b/packages/components/src/Aspect/Aspect.stories.tsx
@@ -3,6 +3,7 @@ import type { Meta, ComponentStory } from '@storybook/react';
 
 import { Aspect } from './Aspect';
 import { Image } from '../Image';
+import isChromatic from 'chromatic';
 
 export default {
   title: 'Components/Aspect',
@@ -49,3 +50,8 @@ export const CutImage: ComponentStory<typeof Aspect> = args => (
     />
   </Aspect>
 );
+
+CutImage.parameters = {
+  chromatic: { viewports: [320, 1200] },
+  theme: isChromatic() ? 'b2b' : 'stacked',
+};
diff --git a/packages/components/src/Breakout/Breakout.stories.tsx b/packages/components/src/Breakout/Breakout.stories.tsx
@@ -8,6 +8,7 @@ import { Image } from '../Image';
 import { Text } from '../Text';
 
 import { Breakout } from './Breakout';
+import isChromatic from 'chromatic';
 
 export default {
   title: 'Components/Breakout',
@@ -127,3 +128,8 @@ export const ExampleFrame: ComponentStory<typeof Breakout> = args => (
     </Text>
   </Container>
 );
+
+ExampleFrame.parameters = {
+  chromatic: { viewports: [320, 1200] },
+  theme: isChromatic() ? 'b2b' : 'stacked',
+};
diff --git a/packages/components/src/Button/Button.stories.tsx b/packages/components/src/Button/Button.stories.tsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import type { Meta, ComponentStory } from '@storybook/react';
 import { Facebook } from '@marigold/icons';
 import { Button } from './Button';
+import isChromatic from 'chromatic';
 
 export default {
   title: 'Components/Button',
@@ -82,3 +83,8 @@ export const PassThroughProps: ComponentStory<typeof Button> = args => {
     </>
   );
 };
+
+WithIcon.parameters = {
+  chromatic: { viewports: [320, 1200] },
+  theme: isChromatic() ? 'b2b' : 'stacked',
+};
diff --git a/packages/components/src/Card/Card.stories.tsx b/packages/components/src/Card/Card.stories.tsx
@@ -9,6 +9,7 @@ import { Close, ExternalLink } from '@marigold/icons';
 import { Inline } from '../Inline';
 import { Split } from '../Split';
 import { Tiles } from '../Tiles';
+import isChromatic from 'chromatic';
 
 export default {
   title: 'Components/Card',
@@ -85,3 +86,8 @@ export const CoreCard: ComponentStory<typeof Card> = args => (
     </Card>
   </Tiles>
 );
+
+CoreCard.parameters = {
+  chromatic: { viewports: [320, 1200] },
+  theme: isChromatic() ? 'b2b' : 'stacked',
+};
diff --git a/packages/components/src/Center/Center.stories.tsx b/packages/components/src/Center/Center.stories.tsx
@@ -8,6 +8,7 @@ import { Headline } from '../Headline';
 import { Stack } from '../Stack';
 import { Text } from '../Text';
 import { Button } from '../Button';
+import isChromatic from 'chromatic';
 
 export default {
   title: 'Components/Center',
@@ -99,3 +100,8 @@ export const Complex: ComponentStory<typeof Center> = args => (
     </Text>
   </Stack>
 );
+
+Complex.parameters = {
+  chromatic: { viewports: [320, 1200] },
+  theme: isChromatic() ? 'b2b' : 'stacked',
+};
diff --git a/packages/components/src/Checkbox/CheckboxGroup.stories.tsx b/packages/components/src/Checkbox/CheckboxGroup.stories.tsx
@@ -3,6 +3,7 @@ import type { Meta, ComponentStory } from '@storybook/react';
 
 import { Checkbox } from './Checkbox';
 import { CheckboxGroup } from './CheckboxGroup';
+import isChromatic from 'chromatic';
 
 export default {
   title: 'Components/CheckboxGroup',
@@ -94,3 +95,8 @@ export const Error: ComponentStory<typeof CheckboxGroup> = args => {
     </>
   );
 };
+
+Basic.parameters = {
+  chromatic: { viewports: [320, 1200] },
+  theme: isChromatic() ? 'b2b' : 'stacked',
+};
diff --git a/packages/components/src/Columns/Columns.stories.tsx b/packages/components/src/Columns/Columns.stories.tsx
@@ -2,6 +2,7 @@ import React, { ReactNode } from 'react';
 import type { Meta, ComponentStory } from '@storybook/react';
 
 import { Box, Columns, Stack } from '@marigold/components';
+import isChromatic from 'chromatic';
 
 export default {
   title: 'Components/Columns',
@@ -122,3 +123,8 @@ export const FullHeight: ComponentStory<typeof Columns> = args => (
     </Columns>
   </Box>
 );
+
+MultiRow.parameters = {
+  chromatic: { viewports: [320, 1200] },
+  theme: isChromatic() ? 'b2b' : 'stacked',
+};
diff --git a/packages/components/src/Container/Container.stories.tsx b/packages/components/src/Container/Container.stories.tsx
@@ -5,6 +5,7 @@ import { Box } from '../Box';
 import { Container } from './Container';
 import { Headline } from '../Headline';
 import { Text } from '../Text';
+import isChromatic from 'chromatic';
 
 export default {
   title: 'Components/Container',
@@ -90,3 +91,8 @@ export const InnerContent: ComponentStory<typeof Container> = args => (
     </Container>
   </Box>
 );
+
+InnerContent.parameters = {
+  chromatic: { viewports: [320, 1200] },
+  theme: isChromatic() ? 'b2b' : 'stacked',
+};
diff --git a/packages/components/src/Divider/Divider.stories.tsx b/packages/components/src/Divider/Divider.stories.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import type { Meta, ComponentStory } from '@storybook/react';
 import { Divider } from './Divider';
 import { Text } from '../Text';
+import isChromatic from 'chromatic';
 
 export default {
   title: 'Components/Divider',
@@ -28,3 +29,8 @@ export const Basic: ComponentStory<typeof Divider> = args => (
     <Text>Below</Text>
   </>
 );
+
+Basic.parameters = {
+  chromatic: { viewports: [320, 1200] },
+  theme: isChromatic() ? 'b2b' : 'stacked',
+};
diff --git a/packages/components/src/FieldBase/FieldBase.stories.tsx b/packages/components/src/FieldBase/FieldBase.stories.tsx
@@ -7,6 +7,7 @@ import { TextField } from '../TextField';
 import { RadioGroup } from '../Radio/RadioGroup';
 import { Radio } from '../Radio';
 import { Checkbox, CheckboxGroup } from '../Checkbox';
+import isChromatic from 'chromatic';
 
 export default {
   title: 'Components/FieldBase',
@@ -85,3 +86,8 @@ export const Complex: ComponentStory<typeof FieldBase> = args => (
     </CheckboxGroup>
   </FieldGroup>
 );
+
+Complex.parameters = {
+  chromatic: { viewports: [320, 1200] },
+  theme: isChromatic() ? 'b2b' : 'stacked',
+};
diff --git a/packages/components/src/Footer/Footer.stories.tsx b/packages/components/src/Footer/Footer.stories.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import type { Meta, ComponentStory } from '@storybook/react';
 import { Footer } from './Footer';
+import isChromatic from 'chromatic';
 
 export default {
   title: 'Components/Footer',
@@ -23,3 +24,8 @@ export default {
 export const Basic: ComponentStory<typeof Footer> = args => (
   <Footer>This is a Footer.</Footer>
 );
+
+Basic.parameters = {
+  chromatic: { viewports: [320, 1200] },
+  theme: isChromatic() ? 'b2b' : 'stacked',
+};
diff --git a/packages/components/src/Header/Header.stories.tsx b/packages/components/src/Header/Header.stories.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import type { Meta, ComponentStory } from '@storybook/react';
 import { Container } from '../Container';
 import { Header } from './Header';
+import isChromatic from 'chromatic';
 
 export default {
   title: 'Components/Header',
@@ -26,3 +27,8 @@ export const Basic: ComponentStory<typeof Header> = args => (
     <Header {...args}>Awsome Header</Header>
   </Container>
 );
+
+Basic.parameters = {
+  chromatic: { viewports: [320, 1200] },
+  theme: isChromatic() ? 'b2b' : 'stacked',
+};
diff --git a/packages/components/src/HelpText/HelpText.stories.tsx b/packages/components/src/HelpText/HelpText.stories.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import type { Meta, ComponentStory } from '@storybook/react';
 import { HelpText } from '../HelpText';
+import isChromatic from 'chromatic';
 
 export default {
   title: 'Components/HelpText',
@@ -39,3 +40,8 @@ export default {
 export const Basic: ComponentStory<typeof HelpText> = args => (
   <HelpText {...args} />
 );
+
+Basic.parameters = {
+  chromatic: { viewports: [320, 1200] },
+  theme: isChromatic() ? 'b2b' : 'stacked',
+};
diff --git a/packages/components/src/Image/Image.stories.tsx b/packages/components/src/Image/Image.stories.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import type { Meta, ComponentStory } from '@storybook/react';
 import { Image } from './Image';
+import isChromatic from 'chromatic';
 
 export default {
   title: 'Components/Image',
@@ -52,3 +53,9 @@ export const Basic: ComponentStory<typeof Image> = args => (
     alt="marigold_logo"
   />
 );
+
+Basic.parameters = {
+  // Set the viewports in Chromatic at a story level.
+  chromatic: { viewports: [320, 1200] },
+  theme: isChromatic() ? 'b2b' : 'stacked',
+};
diff --git a/packages/components/src/Inline/Inline.stories.tsx b/packages/components/src/Inline/Inline.stories.tsx
@@ -4,6 +4,7 @@ import { Box } from '@marigold/system';
 import { shadow } from '@marigold/tokens';
 
 import { Inline } from './Inline';
+import isChromatic from 'chromatic';
 
 export default {
   title: 'Components/Inline',
@@ -70,3 +71,8 @@ export const Basic: ComponentStory<typeof Inline> = args => (
     <Block>Löffelstiel!</Block>
   </Inline>
 );
+
+Basic.parameters = {
+  chromatic: { viewports: [320, 1200] },
+  theme: isChromatic() ? 'b2b' : 'stacked',
+};
diff --git a/packages/components/src/Input/Input.stories.tsx b/packages/components/src/Input/Input.stories.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import type { Meta, ComponentStory } from '@storybook/react';
 import { Input } from './Input';
+import isChromatic from 'chromatic';
 
 export default {
   title: 'Components/Input',
@@ -44,3 +45,8 @@ export default {
 export const Basic: ComponentStory<typeof Input> = args => (
   <Input placeholder="Placeholder..." {...args} />
 );
+
+Basic.parameters = {
+  chromatic: { viewports: [320, 1200] },
+  theme: isChromatic() ? 'b2b' : 'stacked',
+};
diff --git a/packages/components/src/Label/Label.stories.tsx b/packages/components/src/Label/Label.stories.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import type { Meta, ComponentStory } from '@storybook/react';
 import { Label } from './Label';
+import isChromatic from 'chromatic';
 
 export default {
   title: 'Components/Label',
@@ -25,3 +26,8 @@ export default {
 export const Basic: ComponentStory<typeof Label> = ({ children, ...args }) => (
   <Label {...args}>{children}</Label>
 );
+
+Basic.parameters = {
+  chromatic: { viewports: [320, 1200] },
+  theme: isChromatic() ? 'b2b' : 'stacked',
+};
diff --git a/packages/components/src/Link/Link.stories.tsx b/packages/components/src/Link/Link.stories.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import type { Meta, ComponentStory } from '@storybook/react';
 import { Link } from './Link';
 import { Text } from '../Text';
+import isChromatic from 'chromatic';
 
 export default {
   title: 'Components/Link',
@@ -36,3 +37,8 @@ export const Basic: ComponentStory<typeof Link> = args => (
     </Link>
   </Text>
 );
+
+Basic.parameters = {
+  chromatic: { viewports: [320, 1200] },
+  theme: isChromatic() ? 'b2b' : 'stacked',
+};
diff --git a/packages/components/src/List/List.stories.tsx b/packages/components/src/List/List.stories.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import type { Meta, ComponentStory } from '@storybook/react';
 import { List } from './List';
+import isChromatic from 'chromatic';
 
 export default {
   title: 'Components/List',
@@ -35,3 +36,8 @@ export const Ordered: ComponentStory<typeof List> = args => (
     <List.Item>Brot</List.Item>
   </List>
 );
+
+Basic.parameters = {
+  chromatic: { viewports: [320, 1200] },
+  theme: isChromatic() ? 'b2b' : 'stacked',
+};
diff --git a/packages/components/src/Message/Message.stories.tsx b/packages/components/src/Message/Message.stories.tsx
@@ -3,6 +3,7 @@ import type { Meta, ComponentStory } from '@storybook/react';
 import { Message } from './Message';
 import { Text } from '../Text';
 import { Box } from '@marigold/system';
+import isChromatic from 'chromatic';
 
 export default {
   title: 'Components/Message',
@@ -39,3 +40,8 @@ export const MultiLineTitle: ComponentStory<typeof Message> = () => (
     </Message>
   </Box>
 );
+
+Basic.parameters = {
+  chromatic: { viewports: [320, 1200] },
+  theme: isChromatic() ? 'b2b' : 'stacked',
+};