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

import WootButton from '../../app/javascript/dashboard/components/ui/WootButton.vue';

<Meta title="Styleguide/Buttons" />

# Buttons

Buttons can be used by `woot-button` component in `vue`. You can play with all the props here 👉 [woot-button](/story/components-button--primary). The button component is made on top of [foundation button](https://get.foundation/sites/docs/button.html)
so the style of button can be used outside of vue with `button` class.

Other than declred props the `woot-button` can be customised by providing custom classnames through `class-names` prop.

<Story name="default">
  {{
    template: `<woot-button size="" title="Press me">Default</woot-button>`,
  }}
</Story>

- While naming button labels make sure to describe the action with some context.
- For HTML forms use `<woot-button type="submit">` instead of `<input type="submit" />`
- Provide title or tooltip if possible.

## Button sizes

Size of the buttons can be set with `size` to `woot-button`. By default medium is the default size of a button. Other sizes are `tiny, small, medium, large`.

<Canvas>
  <Story name="sizes">
    {{
      template: `<div class="row">
          <div class="margin-horizontal-2">
              <woot-button size="tiny">Tiny</woot-button> 
          </div>
          <div class="margin-horizontal-2">
              <woot-button size="small">Small</woot-button> 
          </div>
          <div class="margin-horizontal-2">
              <woot-button size="">Default</woot-button> 
          </div>
          <div class="margin-horizontal-2">
              <woot-button size="large">Large</woot-button> 
          </div>
        </div>`,
    }}
  </Story>
</Canvas>

Buttons can expanded to full width by setting the `is-expanded` prop. For with by screen size or to make it responsive try with the classnames on
[Responsive Expanded buttons](https://get.foundation/sites/docs/button.html#responsive-expanded-buttons) with foundation.

<Canvas>
  <Story name="expanded">
    {{
      template: `<div class="row">
          <div class="columns">
              <woot-button size="large" is-expanded title="Micheal Scott said the rest">This is buttons is very long</woot-button> 
          </div>
        </div>`,
    }}
  </Story>
</Canvas>

## Button colors

Chatwoot comes with predefined set of colors for buttons. The color of the button can be set with `color-scheme` to `woot-button`.
Default color scheme is `primary`, other color-schemes are `secondary, success, alert, warning`.

<Canvas>
  <Story name="colors">
    {{
      template: `<div class="row">
          <div class="margin-horizontal-2">
              <woot-button >Primary</woot-button> 
          </div>
          <div class="margin-horizontal-2">
              <woot-button color-scheme="secondary">Secondary</woot-button> 
          </div>
          <div class="margin-horizontal-2">
              <woot-button color-scheme="success">Success</woot-button> 
          </div>
          <div class="margin-horizontal-2">
              <woot-button color-scheme="alert">Alert</woot-button> 
          </div>
          <div class="margin-horizontal-2">
              <woot-button color-scheme="warning">Warning</woot-button> 
          </div>
        </div>`,
    }}
  </Story>
</Canvas>

## Button style variations

There are diffrent styles that comes with chatwoot buttons. This can set with `variants` prop for `woot-button`. By deault the filled will be the style, other variations are `smooth, hollow, clear, link`

- Primary form actions like Save details, Create campaign etc should use default style.
- The Cancel action has to use the smooth style.

<Canvas>
  <Story name="variants">
    {{
      template: `<div class="row">
          <div class="margin-horizontal-2">
              <woot-button >Default</woot-button> 
          </div>
          <div class="margin-horizontal-2">
              <woot-button variant="smooth" color-scheme="alert">Smooth</woot-button> 
          </div>
          <div class="margin-horizontal-2">
              <woot-button color-scheme="secondary" variant="hollow">Hollow</woot-button> 
          </div>
          <div class="margin-horizontal-2">
              <woot-button color-scheme="success" variant="clear">Success</woot-button> 
          </div>
          <div class="margin-horizontal-2">
              <woot-button color-scheme="alert" variant="link">Link</woot-button> 
          </div>
        </div>`,
    }}
  </Story>
</Canvas>

## Button states

The button can be disbaled with `is-disabled` which accepts a boolean value. The button can set to a loading state with `is-loading` which accepts a boolean value.

These are states other than the default interaction states like hover, active, focused.

<Canvas>
  <Story name="states">
    {{
      template: `<div class="row">
          <div class="margin-horizontal-2">
              <woot-button color-scheme="alert" is-disabled>disabled :/</woot-button> 
          </div>
          <div class="margin-horizontal-2">
              <woot-button variant="smooth" color-scheme="primary" is-loading>Loading...</woot-button> 
          </div>
        </div>`,
    }}
  </Story>
</Canvas>

## Button with icon and text

Chatwoot currently use [IonIcons version 2](https://ionic.io/ionicons/v2) which are font-icons. The button position is fixed on the left.
The prop `icon` can be used to pass the **ion icon classname** to render the icon.

<Canvas>
  <Story name="icons">
    {{
      template: `<div class="row">
          <div class="margin-horizontal-2">
              <woot-button color-scheme="alert" icon="ion-stop">Stop</woot-button> 
          </div>
          <div class="margin-horizontal-2">
              <woot-button icon="ion-person" variant="hollow">Hollow man</woot-button>
          </div>
        </div>`,
    }}
  </Story>
</Canvas>

#### Buttons with only icon

The `woot-button` can be used as an icon only button by keeping the button text empty.

<Canvas>
  <Story name="icononly">
    {{
      template: `<div class="row">
          <div class="margin-horizontal-2">
              <woot-button color-scheme="success" icon="ion-plus" size="tiny"></woot-button> 
          </div>
          <div class="margin-horizontal-2">
              <woot-button color-scheme="secondary" icon="ion-plus" size="small" variant="smooth"></woot-button>
          </div>
          <div class="margin-horizontal-2">
              <woot-button icon="ion-plus" variant="hollow"></woot-button>
          </div>
        </div>`,
    }}
  </Story>
</Canvas>