import { Layout, Playground, Attributes } from 'lib/components'
import { Button, Spacer, Grid, Code } from 'components'
import Router from 'next/router'
import Settings from '@geist-ui/react-icons/settings'
import UserX from '@geist-ui/react-icons/userX'
import Power from '@geist-ui/react-icons/power'

export const meta = {
  title: 'button',
  group: 'General',
}

## Button

Used to trigger an operation.

<Playground
  title="Basic"
  desc="The basic `Button` contains an animation effect."
  scope={{ Button }}
  code={`
<Button>Action</Button>
`}
/>

<Playground
  title="Loading"
  desc="Show running status."
  scope={{ Button, Spacer }}
  code={`
<>
  <Button loading>Action</Button>
  <Spacer y={.5} />
  <Button loading auto>Action</Button>
  <Spacer y={.5} />
  <Button loading auto type="success" size="small">Action</Button>
</>
`}
/>

<Playground
  title="Disabled"
  desc="Do not respond to any action."
  scope={{ Button }}
  code={`
<Button disabled>Action</Button>
`}
/>

<Playground
  title="Shadow"
  desc="The shadow highlights the level of the button."
  scope={{ Button }}
  code={`
<Button shadow type="secondary">Shadow</Button>
`}
/>

<Playground
  title="Types"
  desc="Different state."
  scope={{ Button, Spacer, Grid }}
  code={`
<Grid.Container gap={2}>
  <Grid><Button auto type="secondary">Secondary</Button></Grid>
  <Grid><Button auto type="success">Success</Button></Grid>
  <Grid><Button auto type="warning">Warning</Button></Grid>
  <Grid><Button auto type="error">Error</Button></Grid>
  <Grid><Button auto type="abort">Abort</Button></Grid>
  <Grid><Button auto type="secondary-light">Secondary Light</Button></Grid>
  <Grid><Button auto type="success-light">Success Light</Button></Grid>
  <Grid><Button auto type="warning-light">Warning Light</Button></Grid>
  <Grid><Button auto type="error-light">Error Light</Button></Grid>
</Grid.Container>
`}
/>

<Playground
  title="GHOST"
  desc="The opposite color."
  scope={{ Button, Spacer }}
  code={`
<>
  <Button type="secondary" ghost>Secondary</Button> <Spacer y={.5} />
  <Button type="success" ghost>Success</Button> <Spacer y={.5} />
  <Button type="warning" ghost>Warning</Button> <Spacer y={.5} />
  <Button type="error" ghost>Error</Button>
</>
`}
/>

<Playground
  title="Sizes"
  desc="Buttons of different sizes."
  scope={{ Button, Spacer }}
  code={`
<>
  <Button size="mini">mini</Button> <Spacer y={.5} />
  <Button size="small">small</Button> <Spacer y={.5} />
  <Button>medium</Button> <Spacer y={.5} />
  <Button size="large">large</Button> <Spacer y={.5} />
  <Button auto>auto width</Button>
</>
`}
/>

<Playground
  title="With Icons"
  desc="The `color` and `size` of the icon will be set automatically."
  scope={{ Button, Spacer, Settings, UserX, Power }}
  code={`
<>
  <Button iconRight={<Power />} auto size="small" />
  <Spacer y={.5} />
  <Button icon={<Settings />} auto>Action</Button>
  <Spacer y={.5} />
  <Button icon={<Settings />} type="success" size="small">Success</Button>
  <Spacer y={.5} />
  <Button icon={<Settings />} type="secondary">Success</Button>
  <Spacer y={.5} />
  <Button icon={<UserX />} type="error" ghost>Remove User</Button>
  <Spacer y={.5} />
  <Button icon={<UserX />} disabled>Remove User</Button>
</>
`}
/>

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

| Attribute     | Description                               | Type                                            | Accepted values             | Default   |
| ------------- | ----------------------------------------- | ----------------------------------------------- | --------------------------- | --------- |
| **type**      | button type                               | `ButtonTypes`                                   | [ButtonTypes](#buttontypes) | `default` |
| **size**      | button size                               | `NormalSizes`                                   | [NormalSizes](#normalsizes) | `medium`  |
| **ghost**     | the opposite color                        | `boolean`                                       | -                           | `false`   |
| **loading**   | display loading indicator                 | `boolean`                                       | -                           | `false`   |
| **shadow**    | display shadow                            | `boolean`                                       | -                           | `false`   |
| **auto**      | autoscale width                           | `boolean`                                       | -                           | `false`   |
| **effect**    | display animation                         | `boolean`                                       | -                           | `true`    |
| **disabled**  | disable button                            | `boolean`                                       | -                           | `false`   |
| **onClick**   | click handler                             | `MouseEventHandler`                             | -                           | -         |
| **icon**      | show icon in button                       | `ReactNode`                                     | -                           | -         |
| **iconRight** | show icon on the other side of the button | `ReactNode`                                     | -                           | -         |
| **htmlType**  | native type of button element             | `ButtonHTMLAttributes.type`                     | -                           | `button`  |
| **ref**       | forwardRef                                | <Code>Ref<HTMLButtonElement &#124; null></Code> | -                           | -         |
| ...           | native props                              | `ButtonHTMLAttributes`                          | `'id', 'className', ...`    | -         |

<Attributes.Title>ButtonTypes</Attributes.Title>

```ts
type ButtonTypes =
  | 'default'
  | 'secondary'
  | 'success'
  | 'warning'
  | 'error'
  | 'abort'
  | 'secondary-light'
  | 'success-light'
  | 'warning-light'
  | 'error-light'
```

<Attributes.Title>NormalSizes</Attributes.Title>

```ts
type NormalSizes = 'mini' | 'small' | 'medium' | 'large'
```

</Attributes>

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