import { View as ButtonView } from '@yandex-lego/components/Button/__examples__/view.tsx'
import viewButtonSource from '!!raw-loader!@yandex-lego/components/Button/__examples__/view.tsx'
import { Content as ButtonContent } from '@yandex-lego/components/Button/__examples__/content.tsx'
import contentButtonSource from '!!raw-loader!@yandex-lego/components/Button/__examples__/content.tsx'
import { CustomContent as ButtonCustomContent } from '@yandex-lego/components/Button/__examples__/custom-content.tsx'
import customContentButtonSource from '!!raw-loader!@yandex-lego/components/Button/__examples__/custom-content.tsx'
import { Pin as ButtonPin } from '@yandex-lego/components/Button/__examples__/pin.tsx'
import pinButtonSource from '!!raw-loader!@yandex-lego/components/Button/__examples__/pin.tsx'
import { States as ButtonStates } from '@yandex-lego/components/Button/__examples__/states.tsx'
import statesButtonSource from '!!raw-loader!@yandex-lego/components/Button/__examples__/states.tsx'
import { Size as ButtonSize } from '@yandex-lego/components/Button/__examples__/size.tsx'
import sizeButtonSource from '!!raw-loader!@yandex-lego/components/Button/__examples__/size.tsx'
import { Width as ButtonWidth } from '@yandex-lego/components/Button/__examples__/width.tsx'
import widthButtonSource from '!!raw-loader!@yandex-lego/components/Button/__examples__/width.tsx'
import { Baseline as ButtonBaseline } from '@yandex-lego/components/Button/__examples__/baseline.tsx'
import baselineButtonSource from '!!raw-loader!@yandex-lego/components/Button/__examples__/baseline.tsx'
import { Theme as ButtonTheme } from '@yandex-lego/components/Button/__examples__/theme.tsx'
import themeButtonSource from '!!raw-loader!@yandex-lego/components/Button/__examples__/theme.tsx'

### Виды

В Лего есть 6 видов кнопок, которые задаются модификатором `view`:

- **Action button:** главные целевые действия, используйте экономно, целевых действий не может быть много.
- **Default button:** второстепенные действия, используйте на страницах перегруженных текстами.
- **Pseudo button:** второстепенные действия, используйте в ситуациях со сложными цветными фонами.
- **Link button:** второстепенные действия, используйте для внешних ссылок, или, чтобы создать дополнительный акцент.
- **Clear button:** второстепенные действия, используется для обозначения действий не требующих повышенного внимания.
- **Raised button:** второстепенные действия, используйте в ситуациях со сложными цветными фонами или поверх контента блока / страницы.

<Example component={ButtonView} source={viewButtonSource}>
  <Title>View</Title>
  <Description>
    Чтобы изменить вид компонента, установите свойство `view` в одно из следующих значений:
    `"action"`, `"default"`, `"pseudo"`, `"link"`, `"clear"`, `"raised"`.
  </Description>
</Example>

### Контент

Компонент `Button` может включать в себя `Icon`

<Example component={ButtonContent} source={contentButtonSource}>
  <Title>Контент</Title>
  <Description>
    Чтобы добавить `Icon` в кнопку, добавьте свойства `iconLeft`, `iconRight`, `icon`, если нужна только иконка без
    лейбла.
  </Description>
</Example>

Также `Button` может включать в себя кастомный контент, например `Badge` или `Spin`

<Example component={ButtonCustomContent} source={customContentButtonSource}>
  <Title>Свой контент</Title>
  <Description>
    Если вы хотите добавить свой контент в кнопку, например `Badge` или `Spin`, сделайте это с помощью свойства
    `addonAfter` или `addonBefore`, либо измените контент в `iconLeft`, `iconRight`
  </Description>
</Example>

### Формы

`Button` может быть разной формы, в Лего для этого есть модификатор `pin`:

- **Round** — скруглённые уголки
- **Circle** — круглые уголки
- **Brick** — прямоугольные уголки
- **Clear** — нет боковой границы

<Example component={ButtonPin} source={pinButtonSource}>
  <Title>Pin</Title>
  <Description>
    Чтобы управлять формами кнопок, воспользуйтесь модификатором `pin`. Допустимыми значениями модификатора являются
    комбинации двух ключевых слов через дефис (-), которые определяют (слева направо) форму уголков, видимость границ,
    скругление границ. Используйте значения: `circle-circle`, `brick-clear`, `clear-clear`, `clear-brick`,
    `round-clear`, `clear-round`, `circle-clear`, `clear-circle`, `round-brick`, `brick-brick`, `brick-round`,
    `circle-brick`, `brick-circle`.
  </Description>
</Example>

### Состояния

`Button` может быть в разных состояниях:

- **base** — базовое состояние
- **disabled** — неактивная кнопка
- **progress** — кнопка в процессе выполнения действия
- **checked** — выбранная кнопка в `checkbox` или `radio` [ButtonGroup](/components/button-group/examples)

<Example component={ButtonStates} source={statesButtonSource} defaultBackground="white">
  <Title>Состояния</Title>
  <Description>
    Чтобы сделать кнопку неактивной – укажите свойство `disabled`, чтобы показать выполнение действия – используйте
    свойство `progress`, чтобы показать выбранную кнопку – используйте свойство `checked`.
  </Description>
</Example>

### Размеры

Для управления размером кнопки, используйте модификатор `size`.

<Example component={ButtonSize} source={sizeButtonSource}>
  <Title>Size</Title>
  <Description>
    Чтобы изменить размер кнопки, установите свойство `size` в одно из следующих значений: `"s"`, `"m"` или `"l"`
  </Description>
</Example>

### Ширина

Ширина `Button` может использоваться со следующими свойствами:

- `max` — ширина определяется шириной контейнера. Если ширина текста больше ширины контейнера, текст обрезается многоточием.
- `auto` — ширина определяется шириной текста. Ширина кнопки не может быть больше ширины контейнера. Если ширина текста больше ширины контейнера, текст обрезается многоточием.

<Example component={ButtonWidth} source={widthButtonSource}>
  <Title>Width</Title>
  <Description>
    Чтобы изменить ширину кнопки, установите свойство `width` в одно из следующих значений: `"max"` или `"auto"`.
  </Description>
</Example>

### Выравнивание

`Button` может использоваться внутри или рядом с текстом, и в таких случаях лучше выравнивать кнопку по базовой линии. Это позволяет визуально скомпенсировать вертикальный ритм.

<Example component={ButtonBaseline} source={baselineButtonSource}>
  <Title>Baseline</Title>
  <Description>Чтобы выровнять кнопки по базовой линии, установите свойство `baseline` в значение `true`.</Description>
</Example>

### Классический дизайн

Чтобы использовать предыдущую версию дизайна контролов вопользуйтесь модификатором `theme`.

<Disclaimer>
  Этот модификатор не кастомизируется с помощью дизайн-токенов. Модификаторы **view** и **theme** являются
  взаимоисключающими — не используйте их вместе.
</Disclaimer>

<Example component={ButtonTheme} source={themeButtonSource}>
  <Title>Theme</Title>
  <Description>
    Чтобы изменить стилевое оформление кнопки для классического дизайна, установите свойство `theme` в одно из следующих
    значений: `"action"`, `"normal"`, `"link"`, `"pseudo"`, `"raised"`, `"clear"`, `"websearch"`.
  </Description>
</Example>