import Layout from 'lib/components/layout'
import Attributes from 'lib/components/attributes'
import Playground from 'lib/components/playground'
import { ButtonDropdown, Spacer } from 'components'

export const meta = {
  title: 'button-dropdown',
  group: 'Navigation',
  index: 101,
}

## Button Dropdown

Display related but alternate actions for a button.


<Playground
  title="Basic"
  scope={{ ButtonDropdown }}
  code={`
<ButtonDropdown>
  <ButtonDropdown.Item main>Default Action</ButtonDropdown.Item>
  <ButtonDropdown.Item>Secondary Action</ButtonDropdown.Item>
  <ButtonDropdown.Item>Tertiary Action</ButtonDropdown.Item>
</ButtonDropdown>
`} />

<Playground
  title="Disabled"
  desc="Disable all buttons."
  scope={{ ButtonDropdown }}
  code={`
<ButtonDropdown disabled>
  <ButtonDropdown.Item main>Default Action</ButtonDropdown.Item>
  <ButtonDropdown.Item>Secondary Action</ButtonDropdown.Item>
  <ButtonDropdown.Item>Tertiary Action</ButtonDropdown.Item>
</ButtonDropdown>
`} />

<Playground
  title="Loading"
  desc="Show friendly load indicator."
  scope={{ ButtonDropdown }}
  code={`
<ButtonDropdown loading>
  <ButtonDropdown.Item main>Default Action</ButtonDropdown.Item>
  <ButtonDropdown.Item>Secondary Action</ButtonDropdown.Item>
  <ButtonDropdown.Item>Tertiary Action</ButtonDropdown.Item>
</ButtonDropdown>
`} />

<Playground
  title="Types"
  scope={{ ButtonDropdown, Spacer }}
  code={`
<>
  <ButtonDropdown type="secondary">
    <ButtonDropdown.Item main>Secondary Action</ButtonDropdown.Item>
  </ButtonDropdown>
  <Spacer y={.5} />
  <ButtonDropdown type="success">
    <ButtonDropdown.Item main>Success Action</ButtonDropdown.Item>
  </ButtonDropdown>
  <Spacer y={.5} />
  <ButtonDropdown type="warning">
    <ButtonDropdown.Item main>Warning Action</ButtonDropdown.Item>
  </ButtonDropdown>
  <Spacer y={.5} />
  <ButtonDropdown type="error">
    <ButtonDropdown.Item main>Error Action</ButtonDropdown.Item>
  </ButtonDropdown>
</>
`} />

<Playground
  title="Sizes"
  desc="Components of different sizes."
  scope={{ ButtonDropdown, Spacer }}
  code={`
<>
  <ButtonDropdown size="mini" auto>
    <ButtonDropdown.Item main>Auto Mini</ButtonDropdown.Item>
  </ButtonDropdown>
  <Spacer y={.5} />
  <ButtonDropdown size="small" auto>
      <ButtonDropdown.Item main>Auto Small</ButtonDropdown.Item>
  </ButtonDropdown>
  <Spacer y={.5} />
  <ButtonDropdown size="small" auto>
    <ButtonDropdown.Item main>Auto Medium</ButtonDropdown.Item>
  </ButtonDropdown>
  <Spacer y={.5} />
  <ButtonDropdown size="mini">
    <ButtonDropdown.Item main>Mini</ButtonDropdown.Item>
  </ButtonDropdown>
  <Spacer y={.5} />
  <ButtonDropdown size="small">
    <ButtonDropdown.Item main>Small</ButtonDropdown.Item>
  </ButtonDropdown>
  <Spacer y={.5} />
  <ButtonDropdown size="medium">
    <ButtonDropdown.Item main>Medium</ButtonDropdown.Item>
  </ButtonDropdown>
  <Spacer y={.5} />
  <ButtonDropdown size="large">
    <ButtonDropdown.Item main>Large</ButtonDropdown.Item>
  </ButtonDropdown>
</>
`} />

<Playground
  title="Multiple Type"
  desc="Specify the status of a button individually."
  scope={{ ButtonDropdown }}
  code={`
<ButtonDropdown>
  <ButtonDropdown.Item main>Check Account</ButtonDropdown.Item>
  <ButtonDropdown.Item>Block Account</ButtonDropdown.Item>
  <ButtonDropdown.Item>Lock Account</ButtonDropdown.Item>
  <ButtonDropdown.Item type="error">Destoy Account</ButtonDropdown.Item>
</ButtonDropdown>
`} />

<Attributes edit="/pages/en-us/components/button-dropdown.mdx">
<Attributes.Title>ButtonDropdown.Props</Attributes.Title>

| Attribute | Description | Type | Accepted values | Default
| ---------- | ---------- | ---- |  -------------- | ------ |
| **type** | button type | `NormalTypes` | `'default', 'secondary', 'success', 'warning', 'error'` | `default` |
| **size** | button size | `NormalSizes` | `'mini', 'small', 'medium', 'large'` | `medium` |
| **loading** | display loading indicator | `boolean` | - | `false` |
| **auto** | autoscale width | `boolean` | - | `false` |
| **disabled** | disable button | `boolean` | - | `false` |
| ... | native props | `HTMLAttributes` | `'autoFocus', 'name', 'className', ...` | - |

<Attributes.Title>ButtonDropdown.Item.Props</Attributes.Title>

| Attribute | Description | Type | Accepted values | Default
| ---------- | ---------- | ---- |  -------------- | ------ |
| **type** | button type | `NormalTypes` | `'default', 'secondary', 'success', 'warning', 'error'` | `default` |
| **main** | the main action | `boolean` | - | `false` |
| **onClick** | event handler | `MouseEventHandler` | - | - |
| ... | native props | `ButtonHTMLAttributes` | `'id', 'name', 'className', ...` | - |

</Attributes>



export default ({ children }) => <Layout meta={meta}>{children}</Layout>
