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

<Meta
  title="Components/Button"
  component={Button}
  argTypes={{
    component: {
      name: 'component',
      description:
        'The component used for the root node. Either a string to use a HTML element or a component.',
      table: {
        type: { summary: 'elementType' },
        defaultValue: { summary: 'button' },
      },
      control: { type: null },
    },
    variant: {
      name: 'variant',
      description: 'The variant to use.',
      table: {
        type: {
          summary:
            '"primary" | "primaryCritical" | "secondary" | "secondaryCritical" | "text" | "textCritical" | "textTertiary" | "textTertiaryCritical" | "inverse"',
        },
        defaultValue: { summary: 'primary' },
      },
      control: { type: null },
    },
    size: {
      name: 'size',
      description: 'The size of the button.',
      table: {
        type: {
          summary: '"sm" | "md" | "lg"',
        },
        defaultValue: { summary: 'md' },
      },
      control: { type: null },
    },
    blocked: {
      name: 'blocked',
      description: 'Spans the full width of the Button parent.',
      table: {
        type: {
          summary: 'true | false',
        },
        defaultValue: { summary: false },
      },
      control: { type: null },
    },
  }}
/>

# Button API

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

## Import

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

## Usage

<Canvas withSource="open" withToolbar>
  <Story name="usage">
    <Button>Click Here!</Button>
  </Story>
</Canvas>

## Variations

<Canvas withSource="open" withToolbar>
  <Story name="variations">
    <div className="flex-story">
      <Button variant="primary">Primary</Button>
      <Button variant="primaryCritical">Primary Critical</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="secondaryCritical">Secondary Critical</Button>
      <Button variant="text">Text</Button>
      <Button variant="textCritical">Text Critical</Button>
      <Button variant="textTertiary">Text Tertiary</Button>
      <Button variant="textTertiaryCritical">Text Tertiary Critical</Button>
      <Button variant="inverse">Inverse</Button>
    </div>
  </Story>
</Canvas>

## Size

<Canvas withSource="open" withToolbar>
  <Story name="size">
    <div className="flex-story">
      <Button size="sm">Small</Button>
      <Button size="md">Medium</Button>
      <Button size="lg">Large</Button>
    </div>
  </Story>
</Canvas>

## Blocked

<Canvas withSource="open" withToolbar>
  <Story name="blocked">
    <Button blocked>Blocked Button</Button>
  </Story>
</Canvas>

## Disabled

<Canvas withSource="open" withToolbar>
  <Story name="disabled">
    <Button disabled>Disabled Button</Button>
  </Story>
</Canvas>

## Loading

<Canvas withSource="open" withToolbar>
  <Story name="loading">
    <Button loading>Loading Button</Button>
  </Story>
</Canvas>

## Loading auto on color

<Canvas withSource="open" withToolbar>
  <Story name="loading-auto-on-color">
    <div className="flex-story">
      <Button variant="primary" loading>
        On Color
      </Button>
      <Button variant="primaryCritical" loading>
        On Color
      </Button>
      <Button variant="secondary" loading>
        On Color
      </Button>
      <Button variant="secondaryCritical" loading>
        On Color
      </Button>
      <Button variant="text" loading>
        On Color
      </Button>
      <Button variant="textCritical" loading>
        On Color
      </Button>
      <Button variant="textTertiary" loading>
        On Color
      </Button>
      <Button variant="textTertiaryCritical" loading>
        On Color
      </Button>
      <Button variant="inverse" loading>
        On Color
      </Button>
    </div>
  </Story>
</Canvas>

## Loading variations on size

<Canvas withSource="open" withToolbar>
  <Story name="loading-on-size">
    <div className="flex-story">
      <Button size="sm" loading>
        Small
      </Button>
      <Button size="md" loading>
        Medium
      </Button>
      <Button size="lg" loading>
        Large
      </Button>
    </div>
  </Story>
</Canvas>

## Props

<ArgsTable story="Usage" of="." />

The ref is forwarded to the root element.

Any other props supplied will be provided to the root element (native element).

## CSS

| Global class                     | Description                                             |
| -------------------------------- | ------------------------------------------------------- |
| .ods-btn                         | Styles applied to the root element.                     |
| .ods-btn--primary                | Sets primary background and text color of the button.   |
| .ods-btn--primary-critical       | Sets styles of the primary critical button.             |
| .ods-btn--secondary              | Sets secondary background and text color of the button. |
| .ods-btn--secondary-critical     | Sets styles of the secondary critical button.           |
| .ods-btn--text                   | Sets styles of the text button.                         |
| .ods-btn--text-critical          | Sets styles of the text critical button.                |
| .ods-btn--text-tertiary          | Sets styles of the text tertiary button.                |
| .ods-btn--text-tertiary-critical | Sets styles of the text tertiary critical button.       |
| .ods-btn--inverse                | Use the inverse button on dark backgrounds.             |
| .ods-btn--[sm,md,lg]             | Specifies the width of the button.                      |
| .ods-btn--blocked                | Spans the full width of the Button parent.              |

If that's not sufficient, you can check the [implementation of the component](https://github.com/ocean-ds/ocean-web/blob/master/packages/ocean-react/src/Button/Button.tsx) for more detail.

## Playground

<Canvas>
  <Story
    name="playground"
    args={{
      children: 'My Button',
      blocked: false,
      disabled: false,
      loading: false,
    }}
    argTypes={{
      children: {
        name: 'children',
        control: 'text',
      },
      variant: {
        name: 'variant',
        options: [
          'primary',
          'primaryCritical',
          'secondary',
          'secondaryCritical',
          'text',
          'textCritical',
          'textTertiary',
          'textTertiaryCritical',
          'inverse',
        ],
        control: { type: 'select' },
      },
      size: {
        name: 'size',
        options: ['sm', 'md', 'lg'],
        control: { type: 'select' },
      },
      blocked: {
        name: 'blocked',
        control: 'boolean',
      },
      disabled: {
        name: 'disabled',
        control: 'boolean',
      },
      loading: {
        name: 'loading',
        control: 'boolean',
      },
    }}
  >
    {(props) => <Button {...props} onClick={() => alert('clicked')} />}
  </Story>
</Canvas>
