import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs/blocks'

import { MAIN } from '../_utils/taxonomy'
import { Modal, ModalSize } from './index'
import { ModalOpener } from './storyUtils/ModalOpener'

<Meta title={`${MAIN}/Benefit Screen (Modals)`} />


# **Modals**

### Default

<Canvas>
  <Story name="default">
    <ModalOpener
      onClose={() => {}}
      closeOnEsc
      closeOnOutsideClick
      displayDimmer
      isOpen={false}
      closeButtonTitle="Close modal"
      aria-labelledby="label1"
      aria-describedby="description1"
      size={ModalSize.MEDIUM}
      isLoading={false}
    />
  </Story>
</Canvas>

### FullScreen

<Canvas>
  <Story name="fullscreen">
    <ModalOpener
      onClose={() => {}}
      closeOnEsc
      closeOnOutsideClick={false}
      displayDimmer={false}
      displayCloseButton
      isOpen={false}
      aria-labelledby="label2"
      aria-describedby="description2"
      size={ModalSize.FULLSCREEN}
      isLoading={false}
    />
  </Story>
</Canvas>

## Specifications

WAI ARIA: https://www.w3.org/TR/wai-aria-practices-1.1/#dialog


## Usage

```jsx
import { Modal } from '@blablacar/ui-library/build/modal'

<Modal onClose={() => null} isOpen isLoading={false} />
```

<ArgsTable of={Modal} />