import { Meta } from '@storybook/addon-docs';

<Meta title="Components/Modal/Codesandbox" />

# Modal

Modals are containers appearing in front of the main content to provide critical information or an actionable piece of content.
These are specifically great for presenting new flows while preserving the state of content.

The default behavior of a Modal is to focus on the first focusable item.
Therefore, you should ensure that the first focusable item is non-destructive, such as a "cancel" or close button.

Modal consists of three child components that are automatically included with the `<Card />`:

1. `<Modal.Header />` - a standard header of a Modal, which may contain a title for the Modal's contents and a close button
1. `<Modal.Body />` - for the body of the Modal
1. `<Modal.Footer />` - a place for primary actions for the Modals's contents

## Basic Usage

In order to hide or show the Modal, set the Modal's `isOpen` prop to `true` or `false`.

```js codesandbox=palmetto-components
import React, { useState } from 'react';
import { Button, Modal, useOpenClose } from '@palmetto/palmetto-components';

export default () => {
  const {
    isOpen: isModalOpen,
    handleOpen: openModal,
    handleClose: closeModal,
  } = useOpenClose();

  return (
    <div>
      <Button variant="primary" tone="neutral" onClick={openModal}>
        Show Modal
      </Button>
      <Modal
        ariaLabelledBy="titleBasic"
        isOpen={isModalOpen}
        onDismiss={closeModal}
      >
        <Modal.Header
          id="titleBasic"
          title="The Modal Title"
          onDismiss={closeModal}
        />
        <Modal.Body>Modal content</Modal.Body>
        <Modal.Footer>
          <Button variant="primary" tone="neutral" onClick={closeModal}>
            Cancel
          </Button>
          <Button variant="primary">Primary Action</Button>
        </Modal.Footer>
      </Modal>
    </div>
  );
};
```
