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

# Button

<Meta
  title='Button'
  component='fw-button'
/>

## Props

<Props of="fw-button"/>

## Usage

### Primary Buttons
<Preview>
<Story name='Primary'>{() => `
      <fw-button color="primary">Primary</fw-button>
      <fw-button color="primary" disabled>Disabled</fw-button>`}
</Story>
</Preview>

### Secondary Buttons
<Preview>
<Story name='Secondary'>{() => `
      <fw-button color="secondary">Secondary</fw-button>
      <fw-button color="secondary" disabled>Disabled</fw-button>`}
</Story>
</Preview>

### Danger Buttons
<Preview>
<Story name='Danger'>{() => `
      <fw-button color="danger">Danger</fw-button>
      <fw-button color="danger" disabled>Disabled</fw-button>`}
</Story>
</Preview>

### Link Buttons
<Preview>
<Story name='Link'>{() => `
      <fw-button color="link">Danger</fw-button>
      <fw-button color="link" disabled>Disabled</fw-button>`}
</Story>
</Preview>

### Text Buttons
<Preview>
<Story name='Text'>{() => `
      <fw-button color="text">Danger</fw-button>
      <fw-button color="text" disabled>Disabled</fw-button>`}
</Story>
</Preview>

### Block Buttons
<Preview>
<Story name='Block'>{() => `
    <fw-button expand>Default</fw-button>
    <fw-button color="primary" expand>Primary</fw-button>
    <fw-button color="secondary" expand>Secondary</fw-button>
    <fw-button color="danger" expand>Danger</fw-button>`}
</Story>
</Preview>

### Small Buttons
<Preview>
<Story name='Small'>{() => `
    <fw-button size="small">Default</fw-button>
    <fw-button color="primary" size="small">Primary</fw-button>
    <fw-button color="secondary" size="small">Secondary</fw-button>
    <fw-button color="danger" size="small">Danger</fw-button>`}
</Story>
</Preview>

### Mini Buttons
<Preview>
<Story name='Mini'>{() => `
    <fw-button size="mini">Default</fw-button>
    <fw-button color="primary" size="mini">Primary</fw-button>
    <fw-button color="secondary" size="mini">Secondary</fw-button>
    <fw-button color="danger" size="mini">Danger</fw-button>`}
</Story>
</Preview>

### Icon Buttons
<Preview>
<Story name='Icon'>{() => `
    <fw-button size="icon"><fw-icon name="phone" color="white" ></fw-icon></fw-button>
    <fw-button color="primary" size="icon"><fw-icon color="#fefefe" name="agent" ></fw-icon></fw-button>
    <fw-button color="secondary" size="icon"><fw-icon name="check" ></fw-icon></fw-button>
    <fw-button color="danger" size="icon"><fw-icon color="#fefefe" name="code" ></fw-icon></fw-button>`}
</Story>
</Preview>

### Icon with text Buttons
<Preview>
<Story name='IconText'>{() => `
    <fw-button><fw-icon name="phone" color="white" ></fw-icon> Call</fw-button>
    <fw-button color="primary"><fw-icon color="#fefefe" name="agent" ></fw-icon> Support</fw-button>
    <fw-button color="secondary"><fw-icon name="delete" ></fw-icon> Delete</fw-button>
    <fw-button color="danger"><fw-icon color="#fefefe" name="code" ></fw-icon> See Code</fw-button>`}
</Story>
</Preview>
