@salutejs/plasma-new-hope 0.66.0-dev.0 → 0.66.1-canary.1149.8446846250.0

package/styled-components/es/components/AvatarGroup/AvatarGroup.template-doc.mdx

@@ -0,0 +1,29 @@
+---
+id: avatarGroup
+title: AvatarGroup
+---
+
+import { PropsTable, Description } from '@site/src/components';
+
+# AvatarGroup
+<Description name="AvatarGroup" />
+<PropsTable name="AvatarGroup" exclude={['css']} />
+
+AvatarGroup это обертка для Avatar. Принимает в себя группу из avatar's.
+
+```tsx live
+import React from 'react';
+import { Avatar, AvatarGroup } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <AvatarGroup>
+                {
+                    Array(5).fill(true).map(() => (
+                        <Avatar size="xxl" url="https://avatars.githubusercontent.com/u/1813468?v=4" />
+                    ))
+                }
+            </AvatarGroup>
+    );
+}
+```

package/styled-components/es/components/Badge/Badge.template-doc.mdx

@@ -0,0 +1,131 @@
+---
+id: badge
+title: Badge
+---
+
+import { PropsTable, Description } from '@site/src/components';
+
+# Badge
+<Description name="Badge" />
+<PropsTable name="Badge"  exclude={['css']} />
+
+## Примеры
+
+### Размер бейджа
+Размер задается с помощью свойства `size`.
+
+Возможные значения свойства: `"l"`, `"m"`, `"s"`.
+
+```tsx live 
+import React from 'react';
+import { Badge } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <div>
+            <Badge text="Бейдж" size="l" />
+            <Badge text="Бейдж" size="m" />
+            <Badge text="Бейдж" size="s" />
+        </div>
+    );
+}
+```
+
+### Скругленность бейджа
+Скругленность задается с помощью свойства `pilled`:
+
+```tsx live 
+import React from 'react';
+import { Badge } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <div>
+            <Badge text="Бейдж" size="l" pilled />
+            <Badge text="Бейдж" size="m" pilled />
+            <Badge text="Бейдж" size="s" pilled />
+        </div>
+    );
+}
+```
+
+### Вид бейджа
+Вид бейджа задается с помощью свойства `view`. Возможные значения свойства `view`:
+
++ `"primary"` – основной бейдж;
++ `"accent"` – бейдж акцентного цвета;
++ `"positive"` – успешное завершение;
++ `"warning"` – предупреждение;
++ `"negative"` – ошибка;
++ `"dark"` – темный бэйдж;
++ `"light"` – светлый бэйдж.
+
+```tsx live 
+import React from 'react';
+import { Badge } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <div>
+            <Badge text="Бейдж" size="l" view="primary" />
+            <Badge text="Бейдж" size="l" view="accent" />
+            <Badge text="Бейдж" size="l" view="positive" />
+            <Badge text="Бейдж" size="l" view="warning" />
+            <Badge text="Бейдж" size="l" view="negative" />
+            <Badge text="Бейдж" size="l" view="dark" />
+            <Badge text="Бейдж" size="l" view="light" />
+        </div>
+    );
+}
+```
+
+так же на вид бейджа влияет свойство `transparent`:
+
+```tsx live 
+import React from 'react';
+import { Badge } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <div>
+            <Badge text="Бейдж" size="l" view="primary" transparent />
+            <Badge text="Бейдж" size="l" view="accent" transparent />
+            <Badge text="Бейдж" size="l" view="positive" transparent />
+            <Badge text="Бейдж" size="l" view="warning" transparent />
+            <Badge text="Бейдж" size="l" view="negative" transparent />
+            <Badge text="Бейдж" size="l" view="dark" transparent />
+            <Badge text="Бейдж" size="l" view="light" transparent />
+        </div>
+    );
+}
+```
+
+### Иконка слева / справа
+В левой и/или правой части бейджа можно отобразить иконку:
+
+```tsx live
+import React from 'react';
+import { Badge } from '@salutejs/{{ package }}';
+import { IconEye } from '@salutejs/plasma-icons';
+
+export function App() {
+    return (
+        <div>
+            <Badge 
+                text="Бейдж" 
+                size="l"   
+                view="primary" 
+                contentLeft={
+                    <IconEye color="inherit" size="xs" />
+                } />
+            <Badge 
+                text="Бейдж" 
+                size="l"   
+                view="primary" 
+                contentRight={
+                    <IconEye color="inherit" size="xs" />
+                } />
+        </div>
+    );
+}
+```

package/styled-components/es/components/Button/Button.template-doc.mdx

@@ -0,0 +1,162 @@
+---
+id: button
+title: Button
+---
+
+import { PropsTable, Description } from '@site/src/components';
+
+# Button
+Кнопки могут отображаться в нескольких размерах и цветах, могут содержать текст и/или иконку.
+
+## Button
+<Description name="Button" />
+<PropsTable name="Button" />
+
+## Использование
+Компонент `Button` может содержать текст, который указывается в
+свойстве `text`, или любой контент напрямую через `children`.
+
+Свойство text можно использовать вместе со свойствами `contentLeft` и `contentRight`.
+С их помощью можно размещать **иконку** слева или справа от текста.
+
+```tsx live
+import React from 'react';
+import { Button } from '@salutejs/{{package}}';
+import { IconDownload } from '@salutejs/plasma-icons';
+
+export function App() {
+    return (
+        <div>
+            <Button text="Текст" />
+
+            <Button text="Текст" contentLeft={<IconDownload />} />
+
+            <Button text="Текст" contentRight={<IconDownload />} />
+
+            <Button contentLeft={<IconDownload />} />
+
+            <Button text="Текст" isLoading />
+
+            <Button text="Текст" isLoading loader={<div>Loader...</div>} />
+
+            <Button>
+                <IconDownload />
+                <span>Текст</span>
+            </Button>
+        </div>
+    );
+}
+```
+
+## Примеры
+
+### Размер кнопки
+Размер кнопки задается с помощью свойства `size`. Возможные значения свойства: `"l"`, `"m"` или `"s"`:
+
+```tsx live
+import React from 'react';
+import { Button } from '@salutejs/{{package}}';
+
+export function App() {
+    return (
+        <div>
+            <Button text="Button" size="l" />
+            <Button text="Button" size="m" />
+            <Button text="Button" size="s" />
+        </div>
+    );
+}
+```
+
+### Вид кнопки
+Вид кнопки задается с помощью свойства `view`. Возможные значения свойства `view`:
++ `"primary"` – основная;
++ `"secondary"` – вторичная;
++ `"success"` – успешное завершение;
++ `"warning"` – предупреждение;
++ `"critical"` – ошибка;
++ `"checked"` – выбранное состояние;
++ `"clear"` – без цветового сопровождения.
+
+```tsx live
+import React from 'react';
+import { Button } from '@salutejs/{{package}}';
+
+export function App() {
+    return (
+        <div>
+            <Button text="Кнопка" size="s" view="primary" />
+            <Button text="Кнопка" size="s" view="secondary" />
+            <Button text="Кнопка" size="s" view="success" />
+            <Button text="Кнопка" size="s" view="warning" />
+            <Button text="Кнопка" size="s" view="critical" />
+            <Button text="Кнопка" size="s" view="checked" />
+            <Button text="Кнопка" size="s" view="overlay" />
+            <Button text="Кнопка" size="s" view="clear" />
+        </div>
+    );
+}
+```
+
+### Границы кнопки
+Границы кнопки задаются с помощью свойства `pin`. Возможные значения свойства `pin`:
++ `square` – обычное скругление;
++ `circle` – сильное скругление;
++ `clear` – нет скругления.
+
+```tsx live
+import React from 'react';
+import { Button } from '@salutejs/{{package}}';
+
+export function App() {
+    return (
+        <div>
+            <Button pin="square-square">Button</Button>
+            <Button pin="square-clear">Button</Button>
+            <Button pin="clear-square">Button</Button>
+            <Button pin="clear-clear">Button</Button>
+            <Button pin="clear-circle">Button</Button>
+            <Button pin="circle-clear">Button</Button>
+            <Button pin="circle-circle">Button</Button>
+        </div>
+    );
+}
+```
+
+### Квадратные и круглые кнопки
+Для отображения иконок и/или текста в квадратных или круглых кнопках с **равными сторонами**,
+используйте компонент `Button` и свойство `contentLeft`, в которое требуется передать нужное значение.
+
+По умолчанию границы кнопки **квадратные** (со скругленными углами) — `pin="square-square"`.
+**Круглые** границы кнопки можно сделать с помощью свойства `pin` со значением `"circle-circle"`.
+
+```tsx live
+import React from 'react';
+import { Button } from '@salutejs/{{package}}';
+import { IconDownload } from '@salutejs/plasma-icons';
+
+export function App() {
+    return (
+        <div>
+            <Button contentLeft={<IconDownload />} />
+
+            <Button contentLeft={<IconDownload />} pin="circle-circle" />
+        </div>
+    );
+}
+```
+
+### Гиперссылка
+Компонент поддерживает вывод в виде тега `<a>`, для этого необходимо указать свойство `as`:
+
+```tsx live
+import React from 'react';
+import { Button } from '@salutejs/{{package}}';
+import { IconDownload } from '@salutejs/plasma-icons';
+
+export function App() {
+    return (
+        <Button as="a" text="Гиперссылка" />
+    );
+}
+```

package/styled-components/es/components/ButtonGroup/ButtonGroup.template-doc.mdx

@@ -0,0 +1,123 @@
+---
+id: buttonGroup
+title: ButtonGroup
+---
+
+import { PropsTable, Description } from '@site/src/components';
+
+# ButtonGroup
+<Description name="ButtonGroup" />
+<PropsTable name="ButtonGroup" exclude={['css']} />
+
+## Использование
+Компонент `ButtonGroup` - это обертка для Button. Принимает в себя группу кнопок.
+
+```tsx live
+import React from 'react';
+import { ButtonGroup, Button } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <ButtonGroup>
+            {Array(5)
+                .fill(true)
+                .map((_, i) => (
+                    <Button text={`Button ${i}`} />
+                ))}
+        </ButtonGroup>
+    );
+}
+```
+
+## Примеры
+
+### Размер и вид группы кнопок
+Размер и вид группы кнопок задается с помощью свойств `size` и `view` соответственно.
+С помощью свойства `isCommonButtonStyles` можно отключить переопределение стилей для всех кнопок внутри группы. 
+Тогда каждая кнопка будет иметь настраиваемый размер и вид. 
+
+```tsx live
+import React from 'react';
+import { ButtonGroup, Button } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <div>
+            <ButtonGroup size="s" view="secondary">
+                {Array(5)
+                    .fill(true)
+                    .map((_, i) => (
+                        <Button text={`Button ${i}`} />
+                    ))}
+            </ButtonGroup>
+            
+            <ButtonGroup isCommonButtonStyles={false}>
+                <Button size="m" text="Default" />
+                <Button size="s" text="Primary" view="primary" />
+                <Button size="xs" text="Success" view="success" />
+            </ButtonGroup>
+        </div>
+    );
+}
+```
+
+### Ориентация группы кнопок и отступы между кнопками
+
+Группа кнопок может располагаться вертикально или горизонтально и иметь три вида отступов:
+
+```tsx live
+import React from 'react';
+import { ButtonGroup, Button } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <div>
+            <ButtonGroup size="xs" orientation="vertical" gap="none">
+                {Array(5)
+                    .fill(true)
+                    .map((_, i) => (
+                        <Button text={`Button ${i}`} />
+                    ))}
+            </ButtonGroup>
+
+            <ButtonGroup size="xs" orientation="horizontal" gap="wide">
+                {Array(4)
+                    .fill(true)
+                    .map((_, i) => (
+                        <Button text={`Button ${i}`} />
+                    ))}
+            </ButtonGroup>
+        </div>
+    );
+}
+```
+
+### Границы кнопки
+Границы кнопки задаются с помощью свойства `shape`.
+
+```tsx live
+import React from 'react';
+import { ButtonGroup, Button } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <div>
+            <ButtonGroup size="xs" shape="segmented">
+                {Array(3)
+                    .fill(true)
+                    .map((_, i) => (
+                        <Button text={`Button ${i}`} />
+                    ))}
+            </ButtonGroup>
+
+            <ButtonGroup size="xs" shape="default">
+                {Array(3)
+                    .fill(true)
+                    .map((_, i) => (
+                        <Button text={`Button ${i}`} />
+                    ))}
+            </ButtonGroup>
+        </div>
+    );
+}
+```

package/styled-components/es/components/Calendar/Calendar.template-doc.mdx

@@ -0,0 +1,208 @@
+---
+id: calendar
+title: Calendar
+---
+
+import { PropsTable, Description } from '@site/src/components';
+
+# Calendar
+Компоненты календарей для выбора даты или диапазона дат.
+
+## Calendar
+
+<Description name="Calendar" />
+<PropsTable name="Calendar" />
+
+Представляет собой универсальный компонент `Calendar`, в котором можно настроить любое доступное представление: базовый, двойной, базовый с диапазоном, двойной с диапазоном.
+
+```tsx live
+import React from 'react';
+import { Calendar } from '@salutejs/{{ package }}';
+
+export function App() {
+    const isRange = false;
+    const isDouble = false;
+    const min = new Date(2022, 4, 0);
+    const max = new Date(2022, 6, 15);
+    const date = {
+        day: 6,
+        monthIndex: 5,
+        year: 2022,
+    }
+
+    const [value, setValue] = React.useState(new Date(2022, 5, 6));
+    const [valueRange, setValueRange] = React.useState([new Date(2022, 5, 6), new Date(2022, 5, 10)]);
+
+    const handleOnChange = React.useCallback((newValue) => {
+        setValue(newValue);
+    }, []);
+    const handleOnRangeChange = React.useCallback((newValue) => {
+        setValueRange(newValue);
+    }, []);
+
+    const baseEvents = [
+        {
+            date: new Date(2022, 5, 6),
+        },
+        {
+            date: new Date(2022, 5, 10),
+            color: 'red',
+        },
+        {
+            date: new Date(2022, 5, 10),
+            color: 'green',
+        },
+        {
+            date: new Date(2022, 5, 10),
+            color: 'blue',
+        },
+    ];
+
+    const eventsRange = Array.from(Array(10),((_, day) => ({
+        date: new Date(2022, 5, 15 + day),
+        color: 'purple',
+    })));
+
+    const disabledDays = Array.from(Array(5),((_, day) => ({
+        date: new Date(2022, 5, 11 + day),
+
+    })));
+
+    return (
+        <div>
+            <Calendar
+                isRange={isRange}
+                isDouble={isDouble}
+                value={(isRange ? valueRange : value)}
+                eventList={[...baseEvents, ...eventsRange]}
+                disabledList={disabledDays}
+                date={date}
+                min={min}
+                max={max}
+                onChangeValue={(isRange ? handleOnRangeChange : handleOnChange)}
+            />
+        </div>
+    );
+}
+```
+
+## CalendarBase
+<Description name="CalendarBase" />
+<PropsTable name="CalendarBase" />
+
+```tsx live
+import React from 'react';
+import { CalendarBase } from '@salutejs/{{ package }}';
+
+export function App() {
+    const min = new Date(2022, 4, 0);
+    const max = new Date(2022, 7, 15);
+
+    const [value, setValue] = React.useState(new Date(2022, 5, 6));
+    const handleOnChange = React.useCallback((newValue) => {
+        setValue(newValue);
+    }, []);
+
+    return (
+        <div>
+            <CalendarBase
+                value={value}
+                min={min}
+                max={max}
+                onChangeValue={handleOnChange}
+            />
+        </div>
+    );
+}
+```
+
+## CalendarDouble
+<Description name="CalendarDouble" />
+<PropsTable name="CalendarDouble" />
+
+```tsx live
+import React from 'react';
+import { CalendarDouble } from '@salutejs/{{ package }}';
+
+export function App() {
+    const min = new Date(2022, 4, 0);
+    const max = new Date(2022, 7, 15);
+
+    const [value, setValue] = React.useState(new Date(2022, 5, 6));
+    const handleOnChange = React.useCallback((newValue) => {
+        setValue(newValue);
+    }, []);
+
+    return (
+        <div>
+            <CalendarDouble
+                value={value}
+                min={min}
+                max={max}
+                onChangeValue={handleOnChange}
+            />
+        </div>
+    );
+}
+```
+
+## CalendarBaseRange
+<Description name="CalendarBaseRange" />
+<PropsTable name="CalendarBaseRange" />
+
+```tsx live
+import React from 'react';
+import { CalendarBaseRange } from '@salutejs/{{ package }}';
+
+export function App() {
+    const min = new Date(2022, 4, 0);
+    const max = new Date(2022, 7, 15);
+
+    const [value, setValue] = React.useState([new Date(2022, 5, 6), new Date(2022, 5, 16)]);
+    const handleOnChange = React.useCallback((newValue) => {
+        setValue(newValue);
+    }, []);
+
+    return (
+        <div>
+            <CalendarBaseRange
+                value={value}
+                min={min}
+                max={max}
+                onChangeValue={handleOnChange}
+            />
+        </div>
+    );
+}
+```
+
+## CalendarDoubleRange
+<Description name="CalendarDoubleRange" />
+<PropsTable name="CalendarDoubleRange" />
+
+```tsx live
+import React from 'react';
+import { CalendarDoubleRange } from '@salutejs/{{ package }}';
+
+export function App() {
+    const min = new Date(2022, 4, 0);
+    const max = new Date(2022, 7, 15);
+
+    const [value, setValue] = React.useState([new Date(2022, 5, 6), new Date(2022, 6, 16)]);
+    const handleOnChange = React.useCallback((newValue) => {
+        setValue(newValue);
+    }, []);
+
+    return (
+        <div>
+            <CalendarDoubleRange
+                value={value}
+                min={min}
+                max={max}
+                onChangeValue={handleOnChange}
+            />
+        </div>
+    );
+}
+```
+

package/styled-components/es/components/Checkbox/Checkbox.template-doc.mdx

@@ -0,0 +1,44 @@
+---
+id: checkbox
+title: Checkbox
+---
+
+import { PropsTable, Description } from '@site/src/components';
+
+# Checkbox
+<Description name="Checkbox" />
+<PropsTable name="Checkbox" exclude={['css', 'focused']} />
+
+## Использование
+Компонент `Checkbox` может содержать лейбл и описание.
+
+```tsx live
+import React from 'react';
+import { Checkbox } from '@salutejs/s{{package}}';
+
+export function App() {
+    return (
+        <Checkbox label="Чекбокс" description="Описание" defaultChecked />
+    );
+}
+```
+
+Свойства `description` и `label` могут принимать JSX элементы.
+
+По умолчанию, контент внутри лейбла и описания многострочный.
+
+Для того чтобы стал однострочным, необходимо использовать свойство `singleLine`(по умолчанию `false`).
+
+```tsx live
+import React from 'react';
+import { Checkbox } from '@salutejs/s{{package}}';
+
+export function App() {
+    return (
+        <Checkbox
+            label={<div>Чекбокс со <a href="/#">ссылкой</a></div>}
+            description={<div>Описание чекбокса со <a href="/#">ссылкой</a></div>}
+        />
+    );
+}
+```