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

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

@@ -0,0 +1,38 @@
+---
+id: radiobox
+title: Radiobox
+---
+
+import { PropsTable, Description } from '@site/src/components';
+
+# Radiobox
+<Description name="Radiobox" />
+<PropsTable name="Radiobox" exclude={['css', 'focused']} />
+
+## Использование
+Компонент `Radiobox` может содержать лейбл и описание.
+
+По умолчанию, контент внутри лейбла и описания многострочный. 
+
+Для того чтобы стал однострочным, необходимо использовать свойство `singleLine`(по умолчанию `false`).
+
+```tsx live
+import React from 'react';
+import { Radiobox } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <Radiobox label="Радиокнопка" description="Описание" defaultChecked />
+    );
+}
+```
+
+## Группа радиокнопок
+Компоненты `Radiobox` следует объединять в `RadioGroup`
+```tsx live
+<RadioGroup aria-labelledby="radiogroup-title-id">
+    <H3 id="radiogroup-title-id">Заголовок</H3>
+    <Radiobox name="radio-1" label="Радиокнопка 1" description="Описание 1" defaultChecked />
+    <Radiobox name="radio-1" label="Радиокнопка 2" description="Описание 2" />
+</RadioGroup>
+```

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

@@ -0,0 +1,61 @@
+---
+id: segment
+title: Segment
+---
+
+import { PropsTable, Description } from '@site/src/components';
+
+# Segment
+Набор компонентов для создания группы сегментов.
+Структура для сегментов похожа на структуру маркированных списков.
+
+## SegmentGroup
+
+<Description name="SegmentGroup" />
+<PropsTable name="SegmentGroup"  exclude={['css', 'selectedView']} />
+
+## SegmentItem
+
+<Description name="SegmentItem" />
+<PropsTable name="SegmentItem"  exclude={['css', 'filledBackground', 'disabled']} />
+
+### Провайдер контекста
+
+Оберните в `SegmentProvider` компонент, в котором будут использованы SegmentGroup с SegmentItem. 
+Внутри данного провайдера есть доступ к хуку `useSegment`.
+
+```tsx live
+import React, { useState } from 'react';
+import { SegmentGroup, SegmentItem, SegmentProvider } from '@salutejs/{{ package }}';
+
+export function App() {
+    const items = Array(8).fill(0);
+
+    const SegmentTemplate = () => {
+        const {selectedSegmentItems} = useSegment();
+
+        return (
+            <>
+                <div>Выбранные элементы: {selectedSegmentItems.join(', ')}</div>
+                <SegmentGroup  view='filled' selectionMode='multiple' filledBackground pilled>
+                    {items.map((_, i) => (
+                        <SegmentItem
+                            label={`Label ${i}`}
+                            value={`label_${i}`}
+                            key={`label_${i}`}
+                            view='default'
+                            pilled
+                        />
+                    ))}
+                </SegmentGroup>
+            </>
+        )
+    }
+
+    return (
+        <SegmentProvider>
+            <SegmentTemplate/>
+        </SegmentProvider>
+    );
+}
+```

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

@@ -0,0 +1,115 @@
+---
+id: select
+title: Select
+---
+
+import { PropsTable, Description } from '@site/src/components';
+
+# Select
+<Description name="Select" />
+<PropsTable name="Select" />
+
+```tsx live
+import React, { useState } from 'react';
+import { Select } from '@salutejs/{{ package }}';
+
+export function App() {
+    const items = [
+        { value: 'each', label: 'Каждый' },
+        { value: 'hunter', label: 'Охотник', isDisabled: true },
+        { value: 'wants', label: 'Желает' },
+        {
+            value: 'toKnow',
+            label: 'Знать',
+            items: [
+                { value: '_fullText', label: 'Каждый охотник желает знать, где сидит фазан' },
+                { value: '_thePheasant', label: 'Фазан' },
+                { value: '_is', label: 'Сидит' },
+            ],
+        },
+        { value: 'where', label: 'Где' },
+        { value: 'is', label: 'Сидит' },
+        { value: 'thePheasant', label: 'Фазан' },
+        { value: 'fullText', label: 'Каждый охотник желает знать, где сидит фазан' },
+    ];
+
+    const [value, setValue] = useState(null);
+
+    return (
+        <div style=\{{ maxWidth: '20rem' }}>
+            <div style=\{{ marginBottom: '1rem' }}>
+                <Select
+                    value={value}
+                    items={items}
+                    onChange={(v) => {
+                        setValue(v);
+                    }}
+                    placeholder="Выберите пример"
+                    helperText="Заполните пример"
+                    status="success"
+                />
+            </div>
+            <div>
+                <Select value={null} items={[]} placeholder="Another select" />
+            </div>
+        </div>
+    );
+}
+```
+
+### Управление высотой выпадающего меню
+Что бы задать высоту и `scroll` для выпадающего меню можно использовать **props** для компонента `Select`:
+- **listOverflow**
+- **listHeight**
+
+> Эти **props** необязательные, если их не указать будет использовано значение - [initial](https://developer.mozilla.org/en-US/docs/Web/CSS/initial)
+
+```tsx live
+import React, { useState, useCallback } from 'react';
+import { Select, Modal, ModalsProvider, H3, Button } from '@salutejs/{{ package }}';
+
+export function App() {
+    const [value, setValue] = useState(null);
+    const [isOpenA, setIsOpenA] = useState(false);
+
+    const onCloseA = useCallback(() => setIsOpenA(false), []);
+
+    const items = [
+        { value: 'each', label: 'Каждый' },
+        { value: 'hunter', label: 'Охотник', isDisabled: true },
+        { value: 'wants', label: 'Желает' },
+        {
+            value: 'toKnow',
+            label: 'Знать',
+            items: [
+                { value: '_fullText', label: 'Каждый охотник желает знать, где сидит фазан' },
+                { value: '_thePheasant', label: 'Фазан' },
+                { value: '_is', label: 'Сидит' },
+            ],
+        },
+        { value: 'where', label: 'Где' },
+        { value: 'is', label: 'Сидит' },
+        { value: 'thePheasant', label: 'Фазан' },
+        { value: 'fullText', label: 'Каждый охотник желает знать, где сидит фазан' },
+    ];
+
+    return (
+        <section>
+            <ModalsProvider>
+                <Button text="Open modal" onClick={() => setIsOpenA(true)} />
+
+                <Modal style=\{{ "height": "20rem" }} id="modalA" isOpen={isOpenA} onClose={onCloseA}>
+                    <H3>Фильтр</H3>
+                    <Select
+                        value={value}
+                        onChange={setValue}
+                        items={items}
+                        listHeight={11}
+                        listOverflow="scroll"
+                    />
+                </Modal>
+            </ModalsProvider>
+        </section>
+    );
+}
+```

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

@@ -0,0 +1,103 @@
+---
+id: skeleton
+title: Skeleton
+---
+
+import { PropsTable, Description } from '@site/src/components';
+
+# Skeleton
+Набор компонентов для создания скелетов загрузки (плейсхолдеров).
+
+## LineSkeleton
+<Description name="LineSkeleton" />
+<PropsTable name="LineSkeleton" />
+
+```tsx live
+import React from 'react';
+import { LineSkeleton } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <LineSkeleton size="headline3" />
+    );
+}
+```
+
+## RectSkeleton
+<Description name="RectSkeleton" />
+<PropsTable name="RectSkeleton" />
+
+```tsx live
+import React from 'react';
+import { RectSkeleton } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <RectSkeleton width="12rem" height="8rem" />
+    );
+}
+```
+
+## TextSkeleton
+<Description name="TextSkeleton" />
+<PropsTable name="TextSkeleton" />
+
+```tsx live
+import React from 'react';
+import { TextSkeleton } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <TextSkeleton size="paragraph1" lines={4} />
+    );
+}
+```
+## На примере карточки
+
+```tsx live
+import React from 'react';
+import { Button, withSkeleton } from '@salutejs/{{ package }}';
+
+export function App() {
+    const ButtonSkeleton = withSkeleton(Button);
+
+    return (
+        <ButtonSkeleton
+            fullWidth
+            text="Загрузка..."
+            view="primary"
+            size="s"
+            scaleOnInteraction={false}
+            outlined={false}
+            skeleton={true}
+            tabIndex={-1}
+        />
+    );
+}
+```
+
+## Доступность
+При использование хока `withSkeleton` необходимо воспользоваться атрибутами WAI ARIA. Пример с кнопкой:
+
+```tsx
+import React, { useState } from 'react';
+import { Button } from '@salutejs/{{ package }}';
+
+const ButtonSkeleton = withSkeleton<ButtonProps & WithSkeletonProps>(BasicButton);
+
+export default function App () {
+    const [skeleton, setSkeleton] = useState(false);
+
+    return (
+        <ButtonSkeleton
+            type="button"
+            text={skeleton ? 'Загрузка' : 'Нажмите'}
+            skeleton={skeleton}
+            aria-busy={skeleton}
+            onClick={() => setSkeleton((prevValue) => !prevValue)}
+        />
+    );
+}
+```
+
+Таким образом, при `skeleton=true` и `aria-busy=true` скринридер будет оповещать о соответствующем статусе компонента.

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

@@ -0,0 +1,21 @@
+---
+id: spinner
+title: Spinner
+---
+
+import { PropsTable, Description } from '@site/src/components';
+
+# Spinner
+<Description name="Spinner" />
+<PropsTable name="Spinner" exclude={['css', 'focused']}/>
+
+```tsx live
+import React from 'react';
+import { Spinner } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <Spinner size={32} />
+    );
+}
+```

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

@@ -0,0 +1,24 @@
+---
+id: switch
+title: Switch
+---
+
+import { PropsTable, Description } from '@site/src/components';
+
+# Switch
+<Description name="Switch" />
+<PropsTable name="Switch" />
+
+## Использование
+Компонент `Switch` может содержать лейбл.
+
+```tsx live
+import React from 'react';
+import { Switch } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <Switch label="Переключатель" defaultChecked />
+    );
+}
+```

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

@@ -0,0 +1,94 @@
+---
+id: tabs
+title: Tabs
+---
+
+import { PropsTable, Description } from '@site/src/components';
+
+# Tabs
+Набор компонентов для создания вкладок.
+Структура для вкладок похожа на структуру маркированных списков.
+
+## TabsController
+
+<Description name="TabsController" />
+<PropsTable name="TabsController" />
+
+## Tabs
+
+<Description name="Tabs" />
+<PropsTable name="Tabs" />
+
+## TabItem
+
+<Description name="TabItem" />
+<PropsTable name="TabItem" />
+
+
+## Использование
+
+### Cтандартное подключение, без клавиатурной навигации
+
+```tsx live
+import React, { useState } from 'react';
+import { Tabs, TabItem } from '@salutejs/{{ package }}';
+import { IconClock } from '@salutejs/plasma-icons';
+
+export function App() {
+    const items = Array(4).fill(0);
+    const [index, setIndex] = useState(0);
+
+    return (
+        <Tabs view="filled" stretch size="xs">
+            {items.map((_, i) => (
+                <TabItem
+                    view="secondary"
+                    key={`item:${i}`}
+                    size="xs"
+                    selected={i === index}
+                    tabIndex={0}
+                    contentLeft={<IconClock size="xs" color="inherit" />}
+                    onClick={() => setIndex(i)}
+                >
+                    Label
+                </TabItem>
+            ))}
+        </Tabs>
+    );
+}
+```
+
+### Подключение клавиатурной навигации
+Для этого необходимо дополнительно прокинуть свойства `index, itemIndex, onIndexChange`.
+Клавиши ArrowLeft, ArrowRight, Home, End для навигации по вкладкам.
+
+```tsx live
+import React, { useState } from 'react';
+import { Tabs, TabItem } from '@salutejs/{{ package }}';
+import { IconClock } from '@salutejs/plasma-icons';
+
+export function App() {
+    const items = Array(4).fill(0);
+    const [index, setIndex] = useState(0);
+
+    return (
+        <Tabs view="filled" stretch size="xs" index={index}>
+            {items.map((_, i) => (
+                <TabItem
+                    view="secondary"
+                    key={`item:${i}`}
+                    size="xs"
+                    itemIndex={i}
+                    onIndexChange={(i) => setIndex(i)}
+                    selected={i === index}
+                    tabIndex={0}
+                    contentLeft={<IconClock size="xs" color="inherit" />}
+                    onClick={() => setIndex(i)}
+                >
+                    Label
+                </TabItem>
+            ))}
+        </Tabs>
+    );
+}
+```

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

@@ -0,0 +1,88 @@
+---
+id: textarea
+title: TextArea
+---
+
+import { PropsTable, Description } from '@site/src/components';
+
+# TextArea
+<Description name="TextArea" />
+<PropsTable name="TextArea" exclude={['$isFocused']} />
+
+## Использование
+Компонент `TextArea` может содержать иконку (или кнопку) справа.
+Для этого используйте свойство и `contentRight`:
+
+```tsx live
+import React from 'react';
+import { TextArea } from '@salutejs/{{ package }}';
+import { IconDownload } from '@salutejs/plasma-icons';
+
+export function App() {
+    return (
+        <div>
+            <TextArea
+                placeholder="Положение иконки"
+                defaultValue="Справа"
+                contentRight={<IconDownload />}
+            />
+        </div>
+    );
+}
+```
+
+Также можно регулировать высоту и ширину, используя свойства `height` и `width`, 
+указав значения в `rem` или соответствующие свойствам css значения.
+
+## Autoresize
+Также можно включить автоматическое регулирование высоты поля ввода по длине контента внутри (параметра `value`).
+Для этого необходимо использовать свойство `autoResize`. 
+При этом, если пользователь вручную регулирует высоту(`resize`), то она так и остается пользовательской.
+
+В этом режиме можно указать крайние значения высоты поля ввода, используя свойства `autoMin`, `autoMax`,
+указав их в `rem`.
+
+```tsx live
+import React from 'react';
+import { TextArea } from '@salutejs/{{ package }}';
+
+export function App() {
+    const [value, setValue] = React.useState('Значение');
+
+    return (
+        <div>
+            <TextArea
+                placeholder="Введите значение"
+                value={value}
+                onChange={(e) => {
+                    setValue(e.target.value);
+                }}
+                autoResize
+                minAuto={3}
+                maxAuto={5}
+            />
+        </div>
+    );
+}
+```
+
+### Подсказка
+Для вывода подсказки снизу от поля используйте свойство `leftHelper` и/или `rightHelper`.
+
+```tsx live
+import React from 'react';
+import { TextArea } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <div>
+            <TextArea
+                placeholder="Введите значение"
+                defaultValue="Значение"
+                leftHelper="Подсказка снизу слева"
+                rightHelper="Подсказка снизу справа"
+            />
+        </div>
+    );
+}
+```

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

@@ -0,0 +1,112 @@
+---
+id: textfield
+title: TextField
+---
+
+import { PropsTable, Description } from '@site/src/components';
+
+# TextField
+<Description name="TextField" />
+<PropsTable name="TextField" exclude={['$isFocused']} />
+
+## Использование
+Компонент `TextField` может содержать иконку (или кнопку) слева и справа.
+Для этого используйте свойства `contentLeft` и `contentRight`:
+
+```tsx live
+import React from 'react';
+import { TextField } from '@salutejs/{{ package }}';
+import { IconDownload } from '@salutejs/plasma-icons';
+
+export function App() {
+    return (
+        <div>
+            <TextField
+                placeholder="Положение иконки"
+                defaultValue="Слева"
+                contentLeft={<IconDownload />}
+            />
+            <TextField
+                placeholder="Положение иконки"
+                defaultValue="Справа"
+                contentRight={<IconDownload />}
+            />
+        </div>
+    );
+}
+```
+
+### Размер поля
+Размер поля задаётся с помощью свойства `size`. Свойство принимает значения `"l"` и `"m"`:
+
+```tsx live
+import React from 'react';
+import { TextField } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <div>
+            <TextField
+                placeholder="Размер"
+                size="l"
+                defaultValue="L56"
+            />
+            <TextField
+                placeholder="Размер"
+                size="m"
+                defaultValue="M48"
+            />
+        </div>
+    );
+}
+```
+
+### Статус поля
+Статус поля задается с помощью свойства `status`. Возможные значения свойства: `success`, `warning` и `error`:
+
+```tsx live
+import React from 'react';
+import { TextField } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <div>
+            <TextField
+                placeholder="Статус"
+                status="success"
+                defaultValue="Успех"
+            />
+            <TextField
+                placeholder="Статус"
+                status="warning"
+                defaultValue="Успех"
+            />
+            <TextField
+                placeholder="Статус"
+                status="error"
+                defaultValue="Ошибка"
+            />
+        </div>
+    );
+}
+```
+
+### Подсказка
+Для вывода подсказки снизу от поля используйте свойство `helperText`:
+
+```tsx live
+import React from 'react';
+import { TextField } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <div>
+            <TextField
+                placeholder="Введите значение"
+                defaultValue="Значение"
+                helperText="Подсказка снизу"
+            />
+        </div>
+    );
+}
+```