Add notification modal

.changeset/bright-jobs-hide.md

@@ -0,0 +1,5 @@
+---
+'@sumup/circuit-ui': minor
+---
+
+Added a new `NotificationModal` component that communicates critical information, and needs the user's attention or action to proceed.

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

@@ -22,14 +22,11 @@ import Button, { ButtonProps } from '../Button';
 type Action = Omit<ButtonProps, 'variant'>;
 
 export interface ButtonGroupProps {
-  /**
-   * Buttons to group.
-   */
   /**
    * @deprecated Use the `actions` prop instead.
    */
   children?:
-    | (ReactElement<ButtonProps> | undefined)[]
+    | (ReactElement<ButtonProps> | null | undefined)[]
     | ReactElement<ButtonProps>;
   /**
    * Direction to align the content. Either left/right

packages/circuit-ui/components/NotificationModal/NotificationModal.docs.mdx

@@ -0,0 +1,23 @@
+import { Status, Props, Story } from '../../../../.storybook/components';
+import { NotificationModal } from '@sumup/circuit-ui';
+
+# NotificationModal
+
+<Status.Stable />
+
+<Story id="notification-notificationmodal--base" />
+<Props />
+
+The notification modal component communicates critical information while blocking everything else on the page, and needs the user's attention or action to proceed.
+
+## When to use it
+
+- For information that needs a user's immediate attention.
+- To request confirmation before performing a destructive action.
+
+## Usage guidelines
+
+- Use a concise headline to communicate the message.
+- If needed, an optional body copy and image can be included.
+- The maximum width of the image is 232px, and the default height is set to 120px.
+- The positioning of the buttons within a button group follows the guidelines of the [ButtonGroup](Components/Button/ButtonGroup) component.

packages/circuit-ui/components/NotificationModal/NotificationModal.spec.tsx

@@ -0,0 +1,106 @@
+/**
+ * Copyright 2021, 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 React from 'react';
+
+import { act, axe, render, userEvent, waitFor } from '../../util/test-utils';
+
+import { NotificationModal, NotificationModalProps } from './NotificationModal';
+
+describe('NotificationModal', () => {
+  const renderNotificationModal = (props: NotificationModalProps) =>
+    render(<NotificationModal {...props} />);
+
+  const baseNotificationModal: NotificationModalProps = {
+    isOpen: true,
+    closeButtonLabel: 'Close modal',
+    onClose: jest.fn(),
+    image: {
+      src: 'https://source.unsplash.com/TpHmEoVSmfQ/1600x900',
+      alt: '',
+    },
+    headline: 'Example modal',
+    body: 'Hello World!',
+    actions: {
+      primary: {
+        children: 'Primary',
+        onClick: jest.fn(),
+      },
+      secondary: {
+        children: 'Secondary',
+        onClick: jest.fn(),
+      },
+    },
+    ariaHideApp: false,
+  };
+
+  describe('styles', () => {
+    it('should render with default styles', () => {
+      const { baseElement } = renderNotificationModal(baseNotificationModal);
+      expect(baseElement).toMatchSnapshot();
+    });
+
+    it('should render the modal', async () => {
+      const { findByRole } = renderNotificationModal(baseNotificationModal);
+
+      const modalEl = await findByRole('dialog');
+
+      await waitFor(() => {
+        expect(modalEl).toBeVisible();
+      });
+    });
+  });
+
+  describe('business logic', () => {
+    it('should call the onClose callback', async () => {
+      const { findByRole } = renderNotificationModal(baseNotificationModal);
+
+      const closeButton = await findByRole('button', { name: /Close Modal/i });
+
+      userEvent.click(closeButton);
+
+      expect(baseNotificationModal.onClose).toHaveBeenCalled();
+    });
+
+    it('should close the modal without performing any action', () => {
+      renderNotificationModal(baseNotificationModal);
+
+      act(() => {
+        userEvent.click(document.body);
+      });
+
+      expect(baseNotificationModal.onClose).toHaveBeenCalled();
+    });
+
+    it('should perform action by clicking the action button and close the modal', async () => {
+      const { findByRole } = renderNotificationModal(baseNotificationModal);
+
+      const actionButton = await findByRole('button', { name: /Primary/i });
+
+      userEvent.click(actionButton);
+
+      expect(baseNotificationModal.actions.primary.onClick).toHaveBeenCalled();
+      expect(baseNotificationModal.onClose).toHaveBeenCalled();
+    });
+  });
+
+  describe('accessibility', () => {
+    it('should meet accessibility guidelines', async () => {
+      const { container } = renderNotificationModal(baseNotificationModal);
+      const actual = await axe(container);
+      expect(actual).toHaveNoViolations();
+    });
+  });
+});

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

@@ -0,0 +1,68 @@
+/**
+ * Copyright 2021, 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 React from 'react';
+import { action } from '@storybook/addon-actions';
+
+import { ModalProvider } from '../ModalContext';
+import Button from '../Button';
+
+import { NotificationModal, NotificationModalProps } from './NotificationModal';
+import { useNotificationModal } from './useNotificationModal';
+import docs from './NotificationModal.docs.mdx';
+
+export default {
+  title: 'Notification/NotificationModal',
+  parameters: {
+    docs: { page: docs },
+  },
+  component: NotificationModal,
+};
+
+export const Base = (modal: NotificationModalProps): JSX.Element => {
+  const ComponentWithModal = () => {
+    const { setModal } = useNotificationModal();
+
+    return (
+      <Button type="button" onClick={() => setModal(modal)}>
+        Open modal
+      </Button>
+    );
+  };
+  return (
+    <ModalProvider>
+      <ComponentWithModal />
+    </ModalProvider>
+  );
+};
+
+Base.args = {
+  image: {
+    src: '/images/software_update.png',
+    alt: '',
+  },
+  headline: 'Software update',
+  body: 'There is updated firmware available for your card reader.',
+  actions: {
+    primary: {
+      children: 'Update',
+      onClick: action('primary'),
+    },
+    secondary: {
+      children: 'Not now',
+      onClick: action('secondary'),
+    },
+  },
+};