@salutejs/plasma-new-hope 0.82.0-canary.1203.9113315762.0 → 0.82.1-canary.1210.9126725322.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salutejs/plasma-new-hope",
-  "version": "0.82.0-canary.1203.9113315762.0",
+  "version": "0.82.1-canary.1210.9126725322.0",
   "description": "Salute Design System blueprint",
   "main": "cjs/index.js",
   "module": "es/index.js",
@@ -102,5 +102,5 @@
     "react-popper": "2.3.0",
     "storeon": "3.1.5"
   },
-  "gitHead": "3dc863fc9d948f83826b077fb36f5eb05a11a1b4"
+  "gitHead": "855b9b58dfdd960e3e6ad14e1720a0ed2a32c1ca"
 }

package/styled-components/cjs/components/Avatar/Avatar.template-doc.mdx

@@ -32,7 +32,9 @@ export function App() {
 ```
 
 ### Инициалы вместо фотографии
-Инициалы можно задать с помощью свойства `name`. Желательный формат строки - "Имя Фамилия". Также не должно быть свойства url.
+Инициалы можно задать с помощью свойства `name`.
+Желательный формат строки - "Имя Фамилия".
+Также не должно быть свойства url.
 
 ```tsx live
 import React from 'react';

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

@@ -11,7 +11,7 @@ import { PropsTable, Description } from '@site/src/components';
 
 ## Примеры
 
-### Размер бейджа
+### Размер badge
 Размер задается с помощью свойства `size`.
 
 Возможные значения свойства: `"l"`, `"m"`, `"s"`.
@@ -31,7 +31,7 @@ export function App() {
 }
 ```
 
-### Скругленность бейджа
+### Скругленность badge
 Скругленность задается с помощью свойства `pilled`:
 
 ```tsx live 
@@ -49,16 +49,16 @@ export function App() {
 }
 ```
 
-### Вид бейджа
-Вид бейджа задается с помощью свойства `view`. Возможные значения свойства `view`:
+### Вид badge
+Вид `badge` задается с помощью свойства `view`. Возможные значения свойства `view`:
 
-+ `"primary"` – основной бейдж;
++ `"primary"` – основной badge;
 + `"accent"` – бейдж акцентного цвета;
 + `"positive"` – успешное завершение;
 + `"warning"` – предупреждение;
 + `"negative"` – ошибка;
-+ `"dark"` – темный бэйдж;
-+ `"light"` – светлый бэйдж.
++ `"dark"` – темный badge;
++ `"light"` – светлый badge.
 
 ```tsx live 
 import React from 'react';
@@ -79,7 +79,7 @@ export function App() {
 }
 ```
 
-так же на вид бейджа влияет свойство `transparent`:
+Так же на вид badge влияет свойство `transparent`:
 
 ```tsx live 
 import React from 'react';
@@ -101,7 +101,7 @@ export function App() {
 ```
 
 ### Иконка слева / справа
-В левой и/или правой части бейджа можно отобразить иконку:
+В левой и/или правой части badge можно отобразить иконку:
 
 ```tsx live
 import React from 'react';

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

@@ -21,7 +21,7 @@ import { PropsTable, Description } from '@site/src/components';
 
 ```tsx live
 import React from 'react';
-import { Button } from '@salutejs/{{package}}';
+import { Button } from '@salutejs/{{ package }}';
 import { IconDownload } from '@salutejs/plasma-icons';
 
 export function App() {
@@ -55,7 +55,7 @@ export function App() {
 
 ```tsx live
 import React from 'react';
-import { Button } from '@salutejs/{{package}}';
+import { Button } from '@salutejs/{{ package }}';
 
 export function App() {
     return (
@@ -80,7 +80,7 @@ export function App() {
 
 ```tsx live
 import React from 'react';
-import { Button } from '@salutejs/{{package}}';
+import { Button } from '@salutejs/{{ package }}';
 
 export function App() {
     return (
@@ -106,7 +106,7 @@ export function App() {
 
 ```tsx live
 import React from 'react';
-import { Button } from '@salutejs/{{package}}';
+import { Button } from '@salutejs/{{ package }}';
 
 export function App() {
     return (
@@ -132,15 +132,15 @@ export function App() {
 
 ```tsx live
 import React from 'react';
-import { Button } from '@salutejs/{{package}}';
+import { Button } from '@salutejs/{{ package }}';
 import { IconDownload } from '@salutejs/plasma-icons';
 
 export function App() {
     return (
         <div>
-            <Button contentLeft={<IconDownload />} />
+            <Button contentLeft={<IconDownload color="inherit" />} />
 
-            <Button contentLeft={<IconDownload />} pin="circle-circle" />
+            <Button contentLeft={<IconDownload color="inherit" />} pin="circle-circle" />
         </div>
     );
 }
@@ -151,8 +151,7 @@ export function App() {
 
 ```tsx live
 import React from 'react';
-import { Button } from '@salutejs/{{package}}';
-import { IconDownload } from '@salutejs/plasma-icons';
+import { Button } from '@salutejs/{{ package }}';
 
 export function App() {
     return (

package/styled-components/cjs/components/Cell/Cell.template-doc.mdx

@@ -0,0 +1,68 @@
+---
+id: cell
+title: Cell
+---
+
+import { PropsTable, Description } from '@site/src/components';
+
+# Cell
+<PropsTable name="Cell" />
+<Description name="Cell" />
+
+Компонент ячейки представляет собой стилизованные слоты для контента.
+
+Также имеются вспомогательные компоненты (Textbox, TextTitle, TextSubtitle, TextLabel).
+
+Они представляют собой стилизованный текст и слот для них.
+
+## Примеры
+
+### Базовое использование
+
+```tsx live
+import React from 'react';
+import { Avatar, Cell } from '@salutejs/{{ package }}';
+import { IconChevronRight } from '@salutejs/plasma-icons';
+
+export function App() {
+    return (
+        <>
+            <Cell
+                contentLeft={ <Avatar size="m" url="https://avatars.githubusercontent.com/u/1813468?v=4" /> }
+                size="m"
+                contentRight={<IconChevronRight color="inheart" size="xs" />}
+                title="Title"
+                subtitle="Subtitle"
+                label="Label"
+            />
+        </>
+    );
+}
+```
+
+### С использованием своих стилей или встроенных компонентов
+
+```tsx live
+import React from 'react';
+import { Avatar, Cell , CellTextboxLabel , CellTextboxTitle , CellTextboxSubtitle, CellTextbox } from '@salutejs/{{ package }}';
+import { IconChevronRight } from '@salutejs/plasma-icons';
+
+export function App() {
+    return (
+        <>
+            <Cell
+                contentLeft={ <Avatar size="m" url="https://avatars.githubusercontent.com/u/1813468?v=4" /> }
+                size="m"
+                contentRight={<IconChevronRight color="inheart" size="xs" />}
+            >
+                <CellTextbox>
+                    <CellTextboxLabel>Label</CellTextboxLabel>
+                    <CellTextboxTitle>Title</CellTextboxTitle>
+                    <CellTextboxSubtitle>Subtitle</CellTextboxSubtitle>
+                    <div style=\{{'font-size': '12px', opacity: 0.4}}>Caption</div>
+                </CellTextbox>
+            </Cell>
+        </>
+    );
+}
+```

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

@@ -14,7 +14,7 @@ import { PropsTable, Description } from '@site/src/components';
 
 ```tsx live
 import React from 'react';
-import { Checkbox } from '@salutejs/s{{package}}';
+import { Checkbox } from '@salutejs/{{ package }}';
 
 export function App() {
     return (
@@ -31,7 +31,7 @@ export function App() {
 
 ```tsx live
 import React from 'react';
-import { Checkbox } from '@salutejs/s{{package}}';
+import { Checkbox } from '@salutejs/{{ package }}';
 
 export function App() {
     return (

package/styled-components/cjs/components/Chip/Chip.template-doc.mdx

@@ -72,7 +72,7 @@ export function App() {
 Вид Chip задается с помощью свойства `view`. Возможные значения свойства `view`:
 + `"default"` – основная;
 + `"secondary"` – вторичная;
-+ `"accent"` – акцентый.
++ `"accent"` – акцентный;
 
 ```tsx live
 import React from 'react';

package/styled-components/cjs/components/Combobox/Combobox.template-doc.mdx

@@ -22,24 +22,24 @@ import { PropsTable, Description } from '@site/src/components';
 ## Клавиатурная навигация
 
 Данный компонент может полностью управляться с помощью клавиатуры, используя следующие клавиши:
--  `Tab` - переход на таргет (инпут)
+-  `Tab` - переход на target (input)
 -  `Shift` + `tab` - выход с него (теряем фокус)
 -  `Стрелка вверх` / `стрелка вниз` - открыть выпадающий список и переместиться на первый элемент
 -  `Стрелка вверх` / `стрелка вниз` ходим по элементам с зацикливанием
--  `Enter` - выбираем элемент, закрываем выпадающий список и переходим фокусом снова на таргет (инпут)
--  Если мы ходим по селекту и нажимаем `Tab` - выпадающий список закрывается и теряем фокус
--  Если мы ходим по селекту и нажимаем `Escape` - выпадающий список закрывается и фокусом остаёмся на таргете
--  В мультиселекте то же самое кроме закрытия выпадающего списка при выборе элемента
+-  `Enter` - выбираем элемент, закрываем выпадающий список и переходим фокусом снова на target (input)
+-  Если мы ходим по select и нажимаем `Tab` - выпадающий список закрывается и теряем фокус
+-  Если мы ходим по select и нажимаем `Escape` - выпадающий список закрывается и фокусом остаёмся на target
+-  В multi-select то же самое кроме закрытия выпадающего списка при выборе элемента
 -  Когда находимся на первом чипе, нажимаем `стрелку влево` / `стрелку вправо` - переходим по чипам
--  Когда оказываемся на последнем чипе и нажимаем `стрелку вправо` - переходим на таргет (инпут)  
--  Когда находимся на таргете (инпуте) и нажимаем `Backspace` - удаляется последний чип
--  Когда находимся на таргете (инпуте) и нажимаем `стрелку влево` - переходим на последний чип
+-  Когда оказываемся на последнем чипе и нажимаем `стрелку вправо` - переходим на target (input)
+-  Когда находимся на target (input) и нажимаем `Backspace` - удаляется последний чип
+-  Когда находимся на target (input) и нажимаем `стрелку влево` - переходим на последний чип
 -  Нажимаем `Backspace` - удаляем выбранный чип и переходим на предыдущий
--  Если удалили последний чип, то фокусируемся на таргете
+-  Если удалили последний чип, то фокусируемся на target
 -  Если находимся в выборе элемента из выпадающего списка и нажимаем `стрелку влево` / `стрелку вправо` - попадаем на самый последний чип
 -  Если находимся в режиме выбора элемента и нажимаем `стрелку вниз` / `стрелку вверх` находясь на последнем / первом элементе, то перескакиваем в начало / в конец
--  Если находимся в режиме выбора элемента и нажимаем любую клавишу **кроме** `стрелки вниз` / `вверх` / `влево` / `вправо` / `Escape` / `Tab` / `Enter`, то переходим на таргет (инпут) и вводим значения
--  Ввод значение в таргет (инпут) приводит к фильтрации элементов в выпадающем списке. Если значение не соответствует ни одному элементу, то отобразится сообщение "Элементы не найдены"
+-  Если находимся в режиме выбора элемента и нажимаем любую клавишу **кроме** `стрелки вниз` / `вверх` / `влево` / `вправо` / `Escape` / `Tab` / `Enter`, то переходим на target (input) и вводим значения
+-  Ввод значение в target (input) приводит к фильтрации элементов в выпадающем списке. Если значение не соответствует ни одному элементу, то отобразится сообщение "Элементы не найдены"
 
 ### Single 
 
@@ -178,12 +178,12 @@ export function App() {
 ```
 
 ### Применение пользовательского фильтра 
-`Combobox` поддерживает возможность создавать собственные правила для фильтрации списка элементов с помощью функции колбэка `filterFunction`,
-которая срабатывает на каждый элемент и если возвращает `true`, то элемент рендерится, иначе нет.
+`Combobox` поддерживает возможность создавать собственные правила для фильтрации списка элементов с помощью функции callback `filterFunction`,
+которая срабатывает на каждый элемент и если возвращает `true`, то элемент rendering, иначе нет.
 
 ```tsx live
 import React from 'react';
-import { Combobox } from '@salutejs/{{ package }}';
+import { Combobox, ComboboxItem } from '@salutejs/{{ package }}';
 
 export function App() {
     const [value, setValue] = React.useState(['item_0']);

package/styled-components/cjs/components/Counter/Counter.template-doc.mdx

@@ -11,7 +11,7 @@ import { PropsTable, Description } from '@site/src/components';
 
 ## Примеры
 
-### Максимальное значение числового бейджа
+### Максимальное значение числового badge
 Задается с помощью свойства `maxCount`.
 
 ```tsx live 
@@ -28,7 +28,7 @@ export function App() {
 }
 ```
 
-### Размер числового бейджа
+### Размер числового badge
 Размер задается с помощью свойства `size`. Возможные значения свойства: `"xs"` или `"xxs"`.
 
 ```tsx live 
@@ -45,7 +45,7 @@ export function App() {
 }
 ```
 
-### Вид числового бейджа
+### Вид числового badge
 Вид задается с помощью свойства `view`. Возможные значения свойства `view`:
 
 + `"primary"` – основной бейдж;
@@ -53,8 +53,8 @@ export function App() {
 + `"positive"` – успешное завершение;
 + `"warning"` – предупреждение;
 + `"negative"` – ошибка;
-+ `"dark"` – темный бэйдж;
-+ `"light"` – светлый бэйдж.
++ `"dark"` – темный badge;
++ `"light"` – светлый badge.
 
 ```tsx live 
 import React from 'react';

package/styled-components/cjs/components/Divider/Divider.template-docs.mdx

@@ -0,0 +1,57 @@
+---
+id: divider
+title: Divider
+---
+
+import { PropsTable, Description } from '@site/src/components';
+
+## Divider
+<Description name="Divider" />
+<PropsTable name="Divider" exclude={['css']} />
+
+## Использование
+Компонент `Divider` используется для визуального разделения компонент.
+
+### Ориентация разделителя
+Ориентация разделителя задается с помощью свойства orientation.
+
+Возможные значения свойства orientation:
++ "horizontal" – горизонтальная (по умолчанию);
++ "vertical" – вертикальная;
+
+```tsx live
+import React from 'react';
+import { BodyS, Divider } from '@salutejs/{{ package }}';
+
+export function App() {
+    const Demo = ({
+        orientation = 'horizontal',
+        length = '100%',
+        beforeText = 'Before',
+        afterText = 'After',
+    }) => {
+        const wrapperStyle = {
+            display: "inline-flex",
+            gap: "0.5rem",
+            alignItems: "center",
+            justifyContent: "center",
+            flexDirection: orientation === "horizontal" ? "column" : "row"
+        }
+
+        return (
+            <div style={wrapperStyle}>
+                <BodyS>{beforeText}</BodyS>
+                <Divider orientation={orientation} length={length} />
+                <BodyS>{afterText}</BodyS>
+            </div>
+        );
+    };
+
+    return (
+        <div style=\{{ display: "flex", gap: "2rem" }}>
+            <Demo />
+            <Demo orientation="vertical" />
+        </div>
+    );
+}
+```

package/styled-components/cjs/components/Drawer/Drawer.template-doc.mdx

@@ -35,13 +35,13 @@ Drawer можно использовать как и на всем окне, т
 а также определить отступы от точки с помощью `offset`.
  
 У компонента Drawer есть 2 режима отображения: 
-модальный - добавляет при этом подложку(`overlay`), а также блокирует скролл и фокус; 
-немодальный - нет подложки, скролл и фокус не заблокированы.
+- модальный - добавляет при этом подложку(`overlay`), а также блокирует scroll и фокус;
+- немодальный - нет подложки, scroll и фокус не заблокированы.
 
 ```tsx live
 import React, { useRef } from 'react';
 import { IconDone } from '@salutejs/plasma-icons';
-import { surfaceSolidSecondary } from '@salutejs/{{ theme }}';
+import { surfaceSolidSecondary } from '@salutejs/{{ vertical }}/tokens';
 
 import { SSRProvider, H3, Button, Drawer, DrawerHeader, DrawerContent, DrawerFooter, PopupProvider } from  '@salutejs/{{ package }}';