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

import Drawer from '../Drawer';

import SimpleDrawer from '../examples/SimpleDrawer';
import AttachedDrawer from '../examples/AttachedDrawer';
import ContentPlaceholder from '../assets/contentPlaceholder.png';
import Button from '../../Button';
import Divider from '../../Divider';

<Meta title="Components/Drawer" component={Drawer} />

# Drawer API

The API documentation of the Drawer React component. Learn more about the props and the CSS customization points.

## Import

```javascript
import { Drawer } from '@useblu/ocean-react';
```

## Usage

```jsx
<Drawer open={false}>Hello There!</Drawer>
```

## Props

<ArgsTable of="." />

## CSS

| Global class                   | Description                                                   |
| ------------------------------ | ------------------------------------------------------------- |
| .ods-drawer\_\overlay          | Styles applied to the overlay.                                |
| .ods-drawer\_\overlay--open    | Transitional styles applied to the overlay after open.        |
| .ods-drawer                    | Styles applied to the drawer content.                         |
| .ods-drawer--open              | Transitional styles applied to the drawer content after open. |
| .ods-drawer--small             | Styled applied to drawer size                                 |
| .ods-drawer--large             | Styled applied to drawer size                                 |
| .ods-drawer\_\_content--header | Styles applied to the drawer content header.                  |

## Playground

<Canvas>
  <Story
    name="playground"
    args={{
      open: false,
      align: 'right',
      iconAlignment: 'right',
      size: 'small',
    }}
    parameters={{
      controls: { exclude: /^onMouseOutDrawer*/ },
    }}
    argTypes={{
      open: {
        name: 'open',
        control: 'boolean',
      },
      iconAlignment: {
        name: 'iconAlignment',
        options: ['right', 'left'],
        control: { type: 'select' },
      },
      align: {
        name: 'align',
        options: ['right', 'left'],
        control: { type: 'select' },
      },
      size: {
        name: 'size',
        options: ['small', 'large'],
        control: { type: 'radio' },
      },
    }}
  >
    {(props) => (
      <SimpleDrawer {...props}>
        <div
          style={{
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'space-between',
            height: '100%',
          }}
        >
          <div
            style={{
              display: 'flex',
              flexDirection: 'column',
              justifyContent: 'center',
              padding: '0 24px',
            }}
          >
            <h3
              style={{
                fontFamily: 'Avenir',
                fontSize: '20px',
                fontWeight: '800',
                lineHeight: '22px',
                color: '#393B47',
                margin: '0 0 8px 0',
              }}
            >
              Drawer title
            </h3>
            <p
              style={{
                fontFamily: 'Nunito Sans',
                fontSize: '16px',
                fontWeight: '400',
                lineHeight: '24px',
                color: '#67697A',
                margin: '0 0 16px 0',
              }}
            >
              Lorem ipsum dolor sit amet, consectetur adipi elit. Semper diam
              adipiscing.
            </p>
            <img src={ContentPlaceholder} />
          </div>
          <div
            style={{
              display: 'flex',
              flexDirection: 'row',
              aliginItems: 'center',
              justifyContent: 'space-between',
              padding: '16px 24px',
              borderTop: 'solid 1px #EBECF5',
            }}
          >
            <Button
              variant="secondary"
              size="md"
              blocked
              style={{ margin: '0 12px 0 0' }}
            >
              Default
            </Button>
            <Button size="md" blocked>
              Default
            </Button>
          </div>
        </div>
      </SimpleDrawer>
    )}
  </Story>
</Canvas>

## Attached Drawer

<Canvas>
  <Story
    name="attached"
    args={{
      open: false,
      align: 'right',
      iconAlignment: 'right',
      size: 'small',
    }}
    parameters={{
      controls: { exclude: /^onMouseOutDrawer*/ },
    }}
    argTypes={{
      open: {
        name: 'open',
        control: 'boolean',
      },
      iconAlignment: {
        name: 'iconAlignment',
        options: ['right', 'left'],
        control: { type: 'select' },
      },
      align: {
        name: 'align',
        options: ['right', 'left'],
        control: { type: 'select' },
      },
      size: {
        name: 'size',
        options: ['small', 'large'],
        control: { type: 'radio' },
      },
    }}
  >
    {(props) => (
      <AttachedDrawer {...props}>
        <div
          style={{
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'center',
            padding: '0 24px',
          }}
        >
          <h3
            style={{
              fontFamily: 'Avenir',
              fontSize: '20px',
              fontWeight: '800',
              lineHeight: '22px',
              color: '#393B47',
              margin: '0 0 8px 0',
            }}
          >
            Drawer title
          </h3>
        </div>
      </AttachedDrawer>
    )}
  </Story>
</Canvas>
