import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks'
import { action } from '@storybook/addon-actions'
import BaseButton from '@/elements/button/BaseButton.vue'

import BaseIcon from '@/elements/icon/BaseIcon.vue'

<Meta title="Elements|Button" component={BaseButton} />

# Button

<Props of={BaseButton} />

## Types

The `type` prop defines the visual style of the button. The visual style suggest to the user the purpose or importance of the button:

- `important` buttons can be used to draw attention to the action you want the user to absolutely do (eg. very important housekeeping procedure). This type of button should be used very rarely, in order to focus the user on its presence.
- `primary` buttons can be used to indicate an important action (for example, submitting a form).
- `assertive` buttons indicate that the user should be cautious when triggering it, for example, when deleting content.
- `destructive` buttons indicate that the user should be cautious when triggering it, for example, when deleting content.
- `secondary` buttons can be used for actions which are less important, an usually follow a Primary button.
- `default` buttons are used for the main action in places where the primary button is already in used. For example, for actions
- `link` buttons will cause the button to be styled similarly to a hyperlink, and are primarily used when the button is embedded in another component (for example, a form field).
- `invisible` button is the same as link, but only for icons.

### Don't

The buttons of type `important`, `primary`, `assertive` and `destructive` should not be placed near each other.

<Preview>
  <Story name="Button with types">
    {{
        components: { BaseButton },
        template: 
          `<div>
            <div>
              <base-button type="important">Important</base-button>
              <base-button type="primary">Primary</base-button>
              <base-button type="assertive">Assertive</base-button>
              <base-button type="destructive">Destructive</base-button>
            </div>
            <br>
            <div>
              <base-button>Default</base-button>
              <base-button type="secondary">Secondary</base-button>
              <base-button type="link">Link</base-button>
              <base-button type="invisible">Invisible</base-button>
            </div>
          </div>`,
        methods: { action: action("clicked") }
    }}
  </Story>
</Preview>

```html
<base-button type="default">Text</base-button>
```

## States

```html
<base-button>Default</base-button>
<base-button disabled>Disabled</base-button>
<base-button waiting>Waiting</base-button>
```

<Preview>
  <Story name="Button with states">
    {{
      components: { BaseButton },
      template:
        `<div>
          <base-button>Default</base-button>
          <base-button disabled>Disabled</base-button>
          <base-button waiting>Loading</base-button>
        </div>`
    }}
  </Story>
</Preview>

## With icon

```html
<base-button>
  <base-icon value="arrow-left" />
  <span>Action</span>
</base-button>
```

<Preview>
  <Story name="Button with icon">
    {{
        components: { BaseButton, BaseIcon },
        template:
          `<div>
            <base-button>
              <base-icon value="arrow-left" />
              <span>Action</span>
            </base-button>
          </div>`,
        methods: { action: action("clicked") }
    }}
  </Story>
</Preview>