all components have one with responsive version

marigold-ui · Jan 23, 2023 · d616d0c · d616d0c
1 parent 428debe
commit d616d0c
Show file tree

Hide file tree

Showing 31 changed files with 174 additions and 22 deletions.
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/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',
+};
diff --git a/packages/components/src/NumberField/NumberField.stories.tsx b/packages/components/src/NumberField/NumberField.stories.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import type { Meta, ComponentStory } from '@storybook/react';
 import { NumberField } from './NumberField';
+import isChromatic from 'chromatic';
 
 export default {
   title: 'Components/NumberField',
@@ -100,3 +101,8 @@ export const Controlled: ComponentStory<typeof NumberField> = args => {
     </>
   );
 };
+
+WithFormatting.parameters = {
+  chromatic: { viewports: [320, 1200] },
+  theme: isChromatic() ? 'b2b' : 'stacked',
+};
diff --git a/packages/components/src/Overlay/Overlay.stories.tsx b/packages/components/src/Overlay/Overlay.stories.tsx
@@ -65,5 +65,6 @@ export const OverlayModal: ComponentStory<typeof Modal> = args => {
 };
 
 OverlayModal.parameters = {
+  chromatic: { viewports: [320, 1200] },
   theme: 'b2b',
 };
diff --git a/packages/components/src/Radio/Radio.stories.tsx b/packages/components/src/Radio/Radio.stories.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import type { Meta, ComponentStory } from '@storybook/react';
 
 import { Radio } from '@marigold/components';
+import isChromatic from 'chromatic';
 
 export default {
   title: 'Components/Radio',
@@ -82,3 +83,8 @@ export const DefaultSelected: ComponentStory<typeof Radio.Group> = args => (
     <Radio value="4">Option 4</Radio>
   </Radio.Group>
 );
+
+DefaultSelected.parameters = {
+  chromatic: { viewports: [320, 1200] },
+  theme: isChromatic() ? 'b2b' : 'stacked',
+};
diff --git a/packages/components/src/Select/Select.stories.tsx b/packages/components/src/Select/Select.stories.tsx
@@ -2,7 +2,6 @@ import React, { useState } from 'react';
 import { Meta, ComponentStory } from '@storybook/react';
 import { Select } from './Select';
 import { Container } from '../Container';
-import isChromatic from 'chromatic/isChromatic';
 
 export default {
   title: 'Components/Select',
@@ -144,24 +143,3 @@ export const SelectedScroll = () => {
     </Select>
   );
 };
-
-export const SelectOpen: ComponentStory<typeof Select> = args => (
-  <Select open={true} {...args}>
-    <Select.Section title="Fantasy">
-      <Select.Option>Harry Potter</Select.Option>
-      <Select.Option>Lord of the Rings</Select.Option>
-    </Select.Section>
-    <Select.Section title="Sci-Fi">
-      <Select.Option>Star Wars</Select.Option>
-      <Select.Option>Star Trek</Select.Option>
-    </Select.Section>
-  </Select>
-);
-
-SelectOpen.parameters = {
-  // Set the viewports in Chromatic at a story level.
-  chromatic: { viewports: [320, 1200] },
-  theme: isChromatic() ? 'b2b' : 'stacked',
-};
-
-console.log(SelectOpen.parameters);