add some stories for responsiveness

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',
+};

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',
+};

packages/components/src/Overlay/Overlay.stories.tsx

@@ -5,6 +5,10 @@ import { useOverlayTriggerState } from '@react-stately/overlays';
 import { ComponentStory } from '@storybook/react';
 import { Tray } from './Tray';
 import { Menu } from '../Menu';
+import { Dialog } from '../Dialog';
+import { Headline } from '../Headline';
+import { Modal } from './Modal';
+import { Text } from '../Text';
 
 export default {
   title: 'Components/Overlay',
@@ -35,3 +39,31 @@ export const OverlayTray: ComponentStory<typeof Tray> = args => {
 OverlayTray.parameters = {
   theme: 'b2b',
 };
+
+export const OverlayModal: ComponentStory<typeof Modal> = args => {
+  return (
+    <Modal open>
+      <Dialog closeButton aria-labelledby="my-cool-headline">
+        <Headline id="my-cool-headline">This is a headline!</Headline>
+        <Text>
+          Pellentesque habitant morbi tristique senectus et netus et malesuada
+          fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae,
+          ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam
+          egestas semper. Aenean ultricies mi vitae est. Mauris placerat
+          eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.
+          Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet,
+          wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum
+          rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in
+          turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus
+          faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat.
+          Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,
+          facilisis luctus, metus.
+        </Text>
+      </Dialog>
+    </Modal>
+  );
+};
+
+OverlayModal.parameters = {
+  theme: 'b2b',
+};

packages/components/src/Select/Select.stories.tsx

@@ -161,7 +161,7 @@ export const SelectOpen: ComponentStory<typeof Select> = args => (
 SelectOpen.parameters = {
   // Set the viewports in Chromatic at a story level.
   chromatic: { viewports: [320, 1200] },
-  theme: isChromatic() ? 'b2b' : 'core',
+  theme: isChromatic() ? 'b2b' : 'stacked',
 };
 
 console.log(SelectOpen.parameters);

packages/components/src/Table/Table.stories.tsx

@@ -8,6 +8,7 @@ import { Stack } from '../Stack';
 
 import { Table } from './Table';
 import { Select } from '../Select';
+import isChromatic from 'chromatic';
 
 export default {
   title: 'Components/Table',
@@ -513,3 +514,9 @@ export const SelectedTable = () => (
     </Table.Body>
   </Table>
 );
+
+DataTable.parameters = {
+  // Set the viewports in Chromatic at a story level.
+  chromatic: { viewports: [320, 1200] },
+  theme: isChromatic() ? 'b2b' : 'stacked',
+};

packages/components/src/Tiles/Tiles.stories.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { Meta, ComponentStory } from '@storybook/react';
 import { Box, Headline, Image, Stack, Text, Tiles } from '@marigold/components';
+import isChromatic from 'chromatic';
 
 export default {
   title: 'Components/Tiles',
@@ -161,3 +162,9 @@ export const Stacks: ComponentStory<typeof Tiles> = args => (
     </Box>
   </Tiles>
 );
+
+Stacks.parameters = {
+  // Set the viewports in Chromatic at a story level.
+  chromatic: { viewports: [320, 1200] },
+  theme: isChromatic() ? 'b2b' : 'stacked',
+};