import { useState } from 'react'
import Button from '../Button'
import Div from '../Div'
import Row from '../Row'
import Br from '../Br'
import { Sandbox } from '@startupjs/docs'
import {
  faHouseUser,
  faCheck,
  faTable,
  faShareAlt,
  faCoffee
} from '@fortawesome/free-solid-svg-icons'
import './index.mdx.styl'

# Button (кнопки)

Кнопки позволяет юзеру совершить какое-то действие или перейти на другую страницу. У кнопки есть несколько стилевых параметров для разных целей. Одно из главных UX предназначений кнопки — это привлечь внимание к какому-то действию на странице (или в компоненте), которое позволит юзеру продвинуться дальше.

```jsx
import { Button } from '@startupjs/ui'
```

## Простой пример
```jsx example
const [counter, setCounter] = useState(0)

return (
  <Button onPress={() => setCounter(counter + 1)}>
    Нажато {counter} раз
  </Button>
)
```

## Async кнопка

```jsx example
async function onPress() {
  await new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve()
    }, 5000)
  })
}

return (
  <Button onPress={onPress}>
    Async button
  </Button>
)
```

## Разновидности

Свойство `variant` отвечает за внешнее отображение кнопки (влияет на цвет иконки и текста кнопки). Значение по умолчанию - `outlined`.

```jsx example
return (
  <Div>
    <Button icon={faCoffee}>
      Контурная
    </Button>
    <Br />
    <Button variant='flat' icon={faCoffee}>
      Плоская
    </Button>
    <Br />
    <Button variant='text' icon={faCoffee}>
      Текстовая
    </Button>
  </Div>
)
```

## Цвета

Цвет по умолчанию `dark`. Его можно изменить, передав имя цвета из списка цветов конфигурации в свойство `color`. Возможные значения свойства можно найти в разделе `Sandbox` внизу страницы.

```jsx example
return (
  <Div>
    <Button variant='flat'>
      Default dark
    </Button>
    <Br />
    <Button color='primary' variant='flat'>
      Primary
    </Button>
    <Br />
    <Button color='success' variant='flat'>
      Success
    </Button>
  </Div>
)
```

## Размеры

Свойство `size` применяется к размеру кнопки, иконки и тексту кнопки.
Размер по умолчанию - `m`. Возможные значения свойства можно найти в разделе `Sandbox` внизу страницы.

```jsx example
return (
  <Div>
    <Button variant='flat' size='s' icon={faCheck}>
      Small
    </Button>
    <Br />
    <Button variant='flat' icon={faCheck}>
      Default
    </Button>
    <Br />
    <Button variant='flat' size='l' icon={faCheck}>
      Large
    </Button>
  </Div>
)
```

## Иконки

Иконка может быть добавлена используя `icon` свойство. Положение иконки можно изменить, передав в компонент `iconPosition` (`left` по умолчанию). Чтобы изменить цвет иконки используйте `iconStyleName` свойство.

В `.styl` файле
```stylus
.icon
  color $UI.colors.success
```

```jsx example
return (
  <Div>
    <Button icon={faCoffee} iconStyleName='icon'>
      Иконка слева (по умолчанию) с измененным цветом
    </Button>
    <Br />
    <Button icon={faCoffee} iconPosition='right'>
      Иконка справа
    </Button>
  </Div>
)
```

## Призыв к Действию

Всегда старайтесь свести разнообразие стилей кнопок, которые вы используете в приложении, к минимуму.

__Никогда__ не ставьте несколько кнопок `Призыв к Действию` в один компонент. И в целом старайтесь сводить свой UX к тому, чтобы на любой странице в конкретный момент был виден только один `Призыв к Действию`. Для пользователя это будет работать как авто-туториал — он быстро привыкнет к тому, что именно `primary` `flat` кнопка двигает его дальше.

Поэтому правильное решение при разработке любого UX — это всегда по-умолчанию использовать обычную кнопку без каких-либо опций. И лишь потом решать вместе с UX специалистами какую **одну** из кнопок сделать `Призывом к Действию` — `primary` `flat`.

```jsx example
<Button color='primary' variant='flat'>
  Уничтожить Звезду Смерти!
</Button>
```

## Порядок кнопок

Когда вы ставите несколько кнопок в ряд, придерживайтесь такого их порядка, к которому привыкли пользователи в операционных системах. Сначала должна идти кнопка `Отмена` и после нее — `OK`

```jsx example
<Row align='right'>
  <Button>
    Cancel
  </Button>
  <Button pushed color='primary' variant='flat'>
    OK
  </Button>
</Row>
```

## Песочница

<Sandbox
  Component={Button}
  extraParams={{
    icon: {
      showIconSelect: true
    }
  }}
  props={{
    children: 'Press me',
    onPress: () => alert('"onPress" event on "Button" component'),
    onLongPress: () => alert('"onLongPress" event on "Button" component')
  }}
/>