Improve modal and toast stories (#2398)

Author: connor-baer

.storybook/components/FullViewport.module.css

@@ -0,0 +1,9 @@
+.base {
+  width: 100vw;
+  height: 100vh;
+}
+
+:global(.docs-story) .base {
+  width: auto;
+  height: auto;
+}

.storybook/components/FullViewport.tsx

@@ -0,0 +1,26 @@
+/**
+ * Copyright 2019, SumUp Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { ReactNode } from 'react';
+
+import classes from './FullViewport.module.css';
+
+interface FullViewportProps {
+  children: ReactNode;
+}
+
+export default function FullViewport({ children }: FullViewportProps) {
+  return <div className={classes.base}>{children}</div>;
+}

.storybook/components/index.ts

@@ -21,16 +21,17 @@ export { Props };
 
 export { Meta, IconGallery, IconItem, Typeset } from '@storybook/addon-docs';
 
-export { default as DocsContainer } from './DocsContainer';
-export { default as Status } from './Statuses';
-export { default as Preview } from './Preview';
-export { default as Story } from './Story';
-export { default as Icons } from './Icons';
-export { default as Intro } from './Intro';
-export { default as Teaser } from './Teaser';
-export { default as Link } from './Link';
-export { default as Image } from './Image';
-export { default as Stack } from './Stack';
+export { default as DocsContainer } from './DocsContainer.js';
+export { default as Status } from './Statuses.js';
+export { default as Preview } from './Preview.js';
+export { default as Story } from './Story.js';
+export { default as Icons } from './Icons.js';
+export { default as Intro } from './Intro.js';
+export { default as Teaser } from './Teaser.js';
+export { default as Link } from './Link.js';
+export { default as Image } from './Image.js';
+export { default as Stack } from './Stack.js';
+export { default as FullViewport } from './FullViewport.js';
 
 export {
   CustomPropertiesTable,
@@ -43,4 +44,4 @@ export {
   FontWeight,
   Transition,
   MediaQueriesTable,
-} from './Theme';
+} from './Theme.js';

.storybook/modes.ts

@@ -0,0 +1,18 @@
+const viewports = {
+  smallMobile: {
+    viewport: 'smallMobile',
+  },
+  largeMobile: {
+    viewport: 'largeMobile',
+  },
+  tablet: {
+    viewport: 'tablet',
+  },
+  desktop: {
+    viewport: 'desktop',
+  },
+};
+
+export const modes = {
+  ...viewports,
+};

.storybook/preview.tsx

@@ -16,6 +16,26 @@ export const parameters = {
       { name: 'v5', url: 'https://circuit-v5.sumup-vercel.app' },
     ],
   },
+  viewport: {
+    viewports: {
+      smallMobile: {
+        name: 'Small mobile',
+        styles: { width: '320px', height: '568px' },
+      },
+      largeMobile: {
+        name: 'Large mobile',
+        styles: { width: '414px', height: '896px' },
+      },
+      tablet: {
+        name: 'Tablet',
+        styles: { width: '834px', height: '1112px' },
+      },
+      desktop: {
+        name: 'Desktop',
+        styles: { width: '1280px', height: '1000px' },
+      },
+    },
+  },
   previewTabs: { 'storybook/docs/panel': { index: -1 } },
   actions: { argTypesRegex: '^on.*' },
   controls: { expanded: true },

package-lock.json

@@ -61,6 +61,7 @@
     "@vitest/coverage-c8": "^0.30.1",
     "@vitest/coverage-v8": "^0.34.6",
     "audit-ci": "^6.6.1",
+    "chromatic": "^10.3.1",
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-storybook": "^0.6.15",

package.json

@@ -16,6 +16,7 @@
 import { action } from '@storybook/addon-actions';
 
 import { Stack } from '../../../../.storybook/components/index.js';
+import { modes } from '../../../../.storybook/modes.js';
 
 import { ButtonGroup, ButtonGroupProps } from './ButtonGroup.js';
 
@@ -25,7 +26,12 @@ export default {
   parameters: {
     // we don't want to center this story to be able to see the effects of the `align` prop
     layout: 'padded',
-    chromatic: { viewports: [320, 1280] },
+    chromatic: {
+      modes: {
+        mobile: modes.smallMobile,
+        desktop: modes.desktop,
+      },
+    },
   },
 };
 

packages/circuit-ui/components/ButtonGroup/ButtonGroup.stories.tsx

@@ -13,9 +13,15 @@
  * limitations under the License.
  */
 
+import type { Decorator } from '@storybook/react';
 import { Fragment } from 'react';
+import { screen, userEvent, within } from '@storybook/testing-library';
 
-import { Stack } from '../../../../.storybook/components/index.js';
+import {
+  FullViewport,
+  Stack,
+} from '../../../../.storybook/components/index.js';
+import { modes } from '../../../../.storybook/modes.js';
 import Button from '../Button/index.js';
 import Headline from '../Headline/index.js';
 import Body from '../Body/index.js';
@@ -28,6 +34,21 @@ export default {
   title: 'Components/Modal',
   component: Modal,
   subcomponents: { ModalProvider },
+  parameters: {
+    chromatic: {
+      modes: {
+        mobile: modes.smallMobile,
+        desktop: modes.desktop,
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <FullViewport>
+        <Story />
+      </FullViewport>
+    ),
+  ] as Decorator[],
 };
 
 const defaultModalChildren = () => (
@@ -39,6 +60,20 @@ const defaultModalChildren = () => (
   </Fragment>
 );
 
+const openModal = async ({
+  canvasElement,
+}: {
+  canvasElement: HTMLCanvasElement;
+}) => {
+  const canvas = within(canvasElement);
+  const button = canvas.getByRole('button', {
+    name: 'Open modal',
+  });
+
+  await userEvent.click(button);
+  await screen.findByRole('dialog');
+};
+
 export const Base = (modal: ModalProps): JSX.Element => {
   const ComponentWithModal = () => {
     const { setModal } = useModal();
@@ -61,6 +96,7 @@ Base.args = {
   variant: 'contextual',
   closeButtonLabel: 'Close modal',
 };
+Base.play = openModal;
 
 export const Variants = (modal: ModalProps): JSX.Element => {
   const ComponentWithModal = ({ variant }: Pick<ModalProps, 'variant'>) => {
@@ -86,6 +122,9 @@ Variants.args = {
   children: defaultModalChildren,
   closeButtonLabel: 'Close modal',
 };
+Variants.parameters = {
+  chromatic: { disableSnapshot: true },
+};
 
 export const PreventClose = (modal: ModalProps): JSX.Element => {
   const ComponentWithModal = () => {
@@ -123,6 +162,7 @@ PreventClose.args = {
   variant: 'immersive',
   preventClose: true,
 };
+PreventClose.play = openModal;
 
 export const InitiallyOpen = (modal: ModalProps): JSX.Element => {
   const initialModal = { id: 'initial', component: Modal, ...modal };
@@ -171,11 +211,13 @@ CustomStyles.args = {
         Custom styles
       </Headline>
       <Body style={{ margin: '1rem' }}>
-        Custom styles can be applied using the <code>css</code> prop.
+        Custom styles can be applied using the <code>className</code> or{' '}
+        <code>style</code> props.
       </Body>
     </Fragment>
   ),
   style: { padding: '0' },
   variant: 'contextual',
   closeButtonLabel: 'Close modal',
 };
+CustomStyles.play = openModal;

packages/circuit-ui/components/Modal/Modal.stories.tsx

@@ -13,8 +13,11 @@
  * limitations under the License.
  */
 
+import type { Decorator } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
+import { screen, userEvent, within } from '@storybook/testing-library';
 
+import { FullViewport } from '../../../../.storybook/components/index.js';
 import { ModalProvider } from '../ModalContext/index.js';
 import Button from '../Button/index.js';
 
@@ -27,6 +30,16 @@ import { useNotificationModal } from './useNotificationModal.js';
 export default {
   title: 'Notification/NotificationModal',
   component: NotificationModal,
+  parameters: {
+    layout: 'padded',
+  },
+  decorators: [
+    (Story) => (
+      <FullViewport>
+        <Story />
+      </FullViewport>
+    ),
+  ] as Decorator[],
 };
 
 export const Base = (modal: NotificationModalProps): JSX.Element => {
@@ -61,3 +74,12 @@ Base.args = {
   },
   closeButtonLabel: 'Close',
 };
+Base.play = async ({ canvasElement }: { canvasElement: HTMLCanvasElement }) => {
+  const canvas = within(canvasElement);
+  const button = canvas.getByRole('button', {
+    name: 'Open modal',
+  });
+
+  await userEvent.click(button);
+  await screen.findByRole('dialog');
+};