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

<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

## useModal

In most cases, you should use the modal in conjunction with the `useModal` hook, as such:

```
const Modal = () => {
  const { showModal, onModalClose, onModalToggle } = useModal();
  return (
    <>
      <TertiaryButton spacing="mh4" onClick={onModalToggle}>
        Open Modal
      </TertiaryButton>

      <Modal show={showModal} onClose={onModalClose}>
        <div>Something amazing I guess</div>
      </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"
/>