import { Meta, Story, Props, Preview } from '@storybook/addon-docs/blocks';
import { Modal } from './modal.component';
import { FlowPropsTable, ExternalReferenceLink } from '../../../utils';

<Meta title="Components/Overlays/Modal" component={Modal} />

# Modal

The Modal presents a modal, with a faded background around the modal.

The modal takes in:

- any React element as its body
- a `show` prop (whether to actually display the modal or not)
- a `persistent` prop. If present/true, no "x" button will be displayed, and clicking outside will not close the modal.
- a `onClose` prop that will be called when the user clicks the `Close` icon OR the background (since they would expect the modal to then close).
- `disableAutoFocus`: When true, it will not attempt to auto focus the modal content
- `disableRestoreFocus`: When true, it will not attempt to refocus the last item focused before opening the modal

## Stories

See left navigation to view modal stories, one by one.

## Supported Property Mixins

Stackee

## Props

<FlowPropsTable ofComponent={Modal} />

## External Reference

<ExternalReferenceLink src="" type="figma" />
<ExternalReferenceLink
  src="https://github.com/wealthsimple/patchwork/tree/master/core/overlays/modal"
  type="github"
/>
