Adding ModalOverlay component (#18161)

ui/components/component-library/component-library-components.scss

@@ -30,3 +30,5 @@
 @import 'banner-alert/banner-alert';
 @import 'banner-tip/banner-tip';
 @import 'modal-content/modal-content';
+@import 'modal-overlay/modal-overlay';
+

ui/components/component-library/index.js

@@ -32,6 +32,7 @@ export { Input, INPUT_TYPES } from './input';
 export { TextField, TEXT_FIELD_TYPES, TEXT_FIELD_SIZES } from './text-field';
 export { TextFieldSearch } from './text-field-search';
 export { ModalContent, ModalContentSize } from './modal-content';
+export { ModalOverlay } from './modal-overlay';
 
 // Molecules
 export { BannerBase } from './banner-base';

ui/components/component-library/modal-overlay/README.mdx

@@ -0,0 +1,40 @@
+import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+
+import { ModalOverlay } from './modal-overlay';
+
+# ModalOverlay
+
+`ModalOverlay` is a transparent overlay that covers the entire screen. It is used to dim the background when a modal is open.
+
+<Canvas>
+  <Story id="components-componentlibrary-modaloverlay--default-story" />
+</Canvas>
+
+## Props
+
+The `ModalOverlay` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props
+
+<ArgsTable of={ModalOverlay} />
+
+### On Click
+
+Use the `onClick` prop to handle clicks on the overlay
+
+<Canvas>
+  <Story id="components-componentlibrary-modaloverlay--on-click" />
+</Canvas>
+
+```jsx
+import React, { useState } from 'react';
+import { ModalOverlay } from '../../component-library';
+
+const [open, setOpen] = useState(false);
+const handleOnClick = () => {
+  setOpen(!open);
+};
+
+<button onClick={handleOnClick}>Show modal overlay</button>;
+{
+  open && <ModalOverlay onClick={handleOnClick} />;
+}
+```

ui/components/component-library/modal-overlay/__snapshots__/modal-overlay.test.tsx.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ModalOverlay should match snapshot 1`] = `
+<div>
+  <div
+    class="box mm-modal-overlay box--flex-direction-row box--width-full box--height-full box--background-color-overlay-default"
+  />
+</div>
+`;

ui/components/component-library/modal-overlay/index.ts

@@ -0,0 +1,2 @@
+export { ModalOverlay } from './modal-overlay';
+export type { ModalOverlayProps } from './modal-overlay.types';

ui/components/component-library/modal-overlay/modal-overlay.scss

@@ -0,0 +1,7 @@
+.mm-modal-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}

ui/components/component-library/modal-overlay/modal-overlay.stories.tsx

@@ -0,0 +1,44 @@
+import React, { useState } from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { ModalOverlay } from './modal-overlay';
+
+import README from './README.mdx';
+
+export default {
+  title: 'Components/ComponentLibrary/ModalOverlay',
+  component: ModalOverlay,
+  parameters: {
+    docs: {
+      page: README,
+    },
+  },
+  argTypes: {
+    className: {
+      control: 'text',
+    },
+    onClick: {
+      action: 'onClick',
+    },
+  },
+} as ComponentMeta<typeof ModalOverlay>;
+
+const Template: ComponentStory<typeof ModalOverlay> = (args) => (
+  <ModalOverlay {...args} />
+);
+
+export const DefaultStory = Template.bind({});
+DefaultStory.storyName = 'Default';
+
+export const OnClick: ComponentStory<typeof ModalOverlay> = (args) => {
+  const [open, setOpen] = useState(false);
+  const handleOnClick = () => {
+    setOpen(!open);
+  };
+  return (
+    <>
+      <button onClick={handleOnClick}>Show modal overlay</button>
+      {open && <ModalOverlay {...args} onClick={handleOnClick} />}
+    </>
+  );
+};

ui/components/component-library/modal-overlay/modal-overlay.test.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { ModalOverlay } from './modal-overlay';
+
+describe('ModalOverlay', () => {
+  it('should render ModalOverlay without error', () => {
+    const { getByTestId } = render(
+      <ModalOverlay data-testid="modal-overlay" />,
+    );
+    expect(getByTestId('modal-overlay')).toBeDefined();
+    expect(getByTestId('modal-overlay')).toHaveClass('mm-modal-overlay');
+  });
+  it('should match snapshot', () => {
+    const { container } = render(<ModalOverlay />);
+    expect(container).toMatchSnapshot();
+  });
+  it('should render with and additional className', () => {
+    const { getByTestId } = render(
+      <ModalOverlay data-testid="modal-overlay" className="test-class" />,
+    );
+    expect(getByTestId('modal-overlay')).toHaveClass('test-class');
+  });
+  it('should fire the onClick function when clicked', () => {
+    const onClick = jest.fn();
+    const { getByTestId } = render(
+      <ModalOverlay data-testid="modal-overlay" onClick={onClick} />,
+    );
+    getByTestId('modal-overlay').click();
+    expect(onClick).toHaveBeenCalled();
+  });
+});

ui/components/component-library/modal-overlay/modal-overlay.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import classnames from 'classnames';
+
+import {
+  BackgroundColor,
+  BLOCK_SIZES,
+} from '../../../helpers/constants/design-system';
+
+import Box from '../../ui/box/box';
+
+import { ModalOverlayProps } from './modal-overlay.types';
+
+export const ModalOverlay: React.FC<ModalOverlayProps> = ({
+  onClick,
+  className = '',
+  ...props
+}) => (
+  <Box
+    className={classnames('mm-modal-overlay', className)}
+    backgroundColor={BackgroundColor.overlayDefault}
+    width={BLOCK_SIZES.FULL}
+    height={BLOCK_SIZES.FULL}
+    onClick={onClick}
+    {...props}
+  />
+);
+
+export default ModalOverlay;

ui/components/component-library/modal-overlay/modal-overlay.types.ts

@@ -0,0 +1,13 @@
+import { BoxProps } from '../../ui/box/box.d';
+
+export interface ModalOverlayProps extends BoxProps {
+  /**
+   * onClick handler for the overlay
+   * Not necessary when used with Modal and closeOnClickOutside is true
+   */
+  onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+  /**
+   * Additional className to add to the ModalOverlay
+   */
+  className?: string;
+}