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

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

@@ -1,45 +1,79 @@
 ---
-id: popupBase
-title: PopupBase
+id: popup
+title: Popup
 ---
 
 import { PropsTable, Description } from '@site/src/components';
 
-# PopupBase
-<Description name="PopupBase" />
-<PropsTable name="PopupBase" />
+# Popup
+<Description name="Popup" />
+<PropsTable name="Popup" />
 
 ### Провайдер контекста
 
-Поместите `PopupBaseProvider` в [корень приложения](../../#корень-приложения) или там, где будете применять PopupBase:
+Поместите `PopupProvider` в [корень приложения](../../#корень-приложения) или там, где будете применять Popup:
 
 ```tsx title="index.ts"
 import ReactDOM from 'react-dom';
-import { PopupBaseProvider } from '@salutejs/{{ package }}';
+import { PopupProvider } from '@salutejs/sdds-serv';
 
 import { App } from './App';
 
 ReactDOM.render(
-    <PopupBaseProvider>
+    <PopupProvider>
         <App />
-    </PopupBaseProvider>,
+    </PopupProvider>,
     document.getElementById('root')
 );
 ```
 
 ### Использование
 
-PopupBase можно использовать как и на всем окне, так и в отдельном фрейме - свойство `frame`.
+Popup можно использовать как и на всем окне, так и в отдельном фрейме - свойство `frame`.
+
 Также это свойство поддерживает передачу id элемента, в котором будет использоваться компонент.
+
 Само позиционирование можно указать с помощью свойства `placement`(center - по умолчанию; left, right, top, bottom и их комбинации),
- а также определить отступы от точки с помощью `offset`.
+а также определить отступы от точки с помощью `offset`.
 
 ```tsx live
 import React, { useRef } from 'react';
-import { surfaceSolid03, surfaceSolid02 } from '@salutejs/plasma-tokens/brands/{{ theme }}';
-import { SSRProvider, Button, PopupBase, PopupBaseProvider } from  '@salutejs/{{ package }}';
+import styled from 'styled-components';
+import { surfaceSolidTertiary, surfaceSolidSecondary } from '@salutejs/{{ vertical }}/tokens';
+
+import { SSRProvider, Button, Popup, PopupProvider } from  '@salutejs/{{ package }}';
 
 export function App() {
+    const StyledButton = styled(Button)`
+        margin-top: 1rem;
+        width: 15rem;
+    `;
+
+    const StyledWrapper = styled.div`
+        height: 500px;
+    `;
+
+    const OtherContent = styled.div`
+        margin-top: 1rem;
+        width: 400px;
+        height: 500px;
+        background: ${surfaceSolidTertiary};
+        position: absolute;
+
+        display: flex;
+        align-items: flex-start;
+        justify-content: center;
+        padding: 1rem;
+
+        bottom: 0;
+        right: 0;
+    `;
+
+    const Content = styled.div`
+        background: ${surfaceSolidSecondary};
+        padding: 1rem;
+    `;
+
     const [isOpenA, setIsOpenA] = React.useState(false);
     const [isOpenB, setIsOpenB] = React.useState(false);
 
@@ -47,59 +81,28 @@ export function App() {
 
     return (
         <SSRProvider>
-            <PopupBaseProvider>
-                <div style=\{{height: "500px"}}>
+            <PopupProvider>
+                <StyledWrapper>
                     <div style=\{{ display: 'flex', flexDirection: 'column' }}>
-                        <Button 
-                            style=\{{
-                                marginTop: "1rem",
-                                width: "15rem"
-                            }} 
-                            text="Открыть в document" 
-                            onClick={() => setIsOpenB(true)} 
-                        />
-                        <Button 
-                            style=\{{
-                                marginTop: "1rem",
-                                width: "15rem"
-                            }} 
-                            text="Открыть во Frame" 
-                            onClick={() => setIsOpenA(true)} 
-                        />
+                        <StyledButton text="Открыть в document" onClick={() => setIsOpenB(true)} />
+                        <StyledButton text="Открыть во Frame" onClick={() => setIsOpenA(true)} />
                     </div>
-                    <PopupBase
+                    <Popup
                         id="popupA"
                         frame={ref}
                         isOpen={isOpenA}
                         placement="center"
                         offset={[0, 0]}
                     >
-                        <div style=\{{ background: surfaceSolid02, padding: "1rem" }}>
+                        <Content>
                             <Button onClick={() => setIsOpenA(false)}>Close</Button>
                             <>Content</>
-                        </div>
-                    </PopupBase>
-                    <div 
-                        ref={ref} 
-                        style=\{{
-                            marginTop: "1rem",
-                            width: "400px",
-                            height: "500px",
-                            background: surfaceSolid03,
-                            position: "absolute",
-
-                            display: "flex",
-                            alignItems: "flex-start",
-                            justifyContent: "center",
-                            padding: "1rem",
-
-                            bottom: 0,
-                            right: 0
-                        }}
-                    >
+                        </Content>
+                    </Popup>
+                    <OtherContent ref={ref}>
                         <>Frame</>
-                    </div>
-                    <PopupBase
+                    </OtherContent>
+                    <Popup
                         id="popupB"
                         frame="document"
                         isOpen={isOpenB}
@@ -110,9 +113,9 @@ export function App() {
                             <Button onClick={() => setIsOpenB(false)}>Close</Button>
                             <>Content</>
                         </Content>
-                    </PopupBase>
-                </div>
-            </PopupBaseProvider>
+                    </Popup>
+                </StyledWrapper>
+            </PopupProvider>
         </SSRProvider>
     );
 }
@@ -121,19 +124,19 @@ export function App() {
 ## Подключение анимации
 
 Для подключения анимации нужно добавить параметр `withAnimation`.
-Само управление происходит с помощью классов через переменные `endAnimation`, `endTransition` из объекта `popupBaseClasses` для `PopupBase`.
-Для добавления анимации необходимо использовать класс `.popup-base-root` через переменную `popupBaseClasses.root` из пакета.
+Само управление происходит с помощью классов через переменные `endAnimation`, `endTransition` из объекта `PopupClasses` для `Popup`.
+Для добавления анимации необходимо использовать класс `.popup-root` через переменную `PopupClasses.root` из пакета.
 
 Пример:
 
 ```tsx
-const StyledPopupTransition = styled(PopupBase)`
-    && > .${popupBaseClasses.root} {
+const StyledPopupTransition = styled(Popup)`
+    && > .${PopupClasses.root} {
         opacity: 1;
         transition: opacity 0.5s 0.1s;
     }
 
-    &&.${popupBaseClasses.endTransition} > .${popupBaseClasses.root} {
+    &&.${PopupClasses.endTransition} > .${PopupClasses.root} {
         opacity: 0;
         transition: opacity 0.5s 0.1s;
     }
@@ -143,12 +146,12 @@ const StyledPopupTransition = styled(PopupBase)`
 или
 
 ```tsx
-const StyledPopupAnimation = styled(PopupBase)`
-    && > .${popupBaseClasses.root} {
+const StyledPopupAnimation = styled(Popup)`
+    && > .${PopupClasses.root} {
         animation: fadeIn 1s forwards;
     }
 
-    &&.${popupBaseClasses.endAnimation} > .${popupBaseClasses.root} {
+    &&.${PopupClasses.endAnimation} > .${PopupClasses.root} {
         animation: fadeOut 1s forwards;
     }
 
@@ -182,14 +185,7 @@ const StyledPopupAnimation = styled(PopupBase)`
     return (
         <>
             <div>
-                <Button 
-                    style=\{{
-                        marginTop: "1rem",
-                        width: "15rem"
-                    }} 
-                    text="Открыть" 
-                    onClick={() => setIsOpen(true)} 
-                />
+                <StyledButton text="Открыть" onClick={() => setIsOpen(true)} />
             </div>
             <StyledPopupAnimation
                 id="popup-id"

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

@@ -0,0 +1,33 @@
+---
+id: progress
+title: Progress
+---
+
+import { PropsTable, Description } from '@site/src/components';
+
+# Progress
+<Description name="Progress" />
+<PropsTable name="Progress" exclude={['css']} />
+
+##Примеры
+
+### Вид прогресса
+Вид прогресса задается с помощью свойства `view`. Возможные значения свойства `view`:
++ `"default"` – по умолчанию;
++ `"primary"` – основная;
++ `"secondary"` – вторичная;
++ `"accent"` – акцентная;
++ `"success"` – успешное завершение;
++ `"warning"` – предупреждение;
++ `"error"` – ошибка;
+
+```tsx live
+import React from 'react';
+import { Progress } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <Progress value={25} view="success" displayValue />
+    );
+}
+```

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

@@ -27,8 +27,9 @@ export function App() {
 }
 ```
 
-## Группа радиокнопок
+## RadioGroup
 Компоненты `Radiobox` следует объединять в `RadioGroup`
+
 ```tsx live
 <RadioGroup aria-labelledby="radiogroup-title-id">
     <H3 id="radiogroup-title-id">Заголовок</H3>

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

@@ -25,8 +25,8 @@ import { PropsTable, Description } from '@site/src/components';
 Внутри данного провайдера есть доступ к хуку `useSegment`.
 
 ```tsx live
-import React, { useState } from 'react';
-import { SegmentGroup, SegmentItem, SegmentProvider } from '@salutejs/{{ package }}';
+import React from 'react';
+import { SegmentGroup, SegmentItem, SegmentProvider, useSegment } from '@salutejs/{{ package }}';
 
 export function App() {
     const items = Array(8).fill(0);

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

@@ -6,7 +6,7 @@ title: Skeleton
 import { PropsTable, Description } from '@site/src/components';
 
 # Skeleton
-Набор компонентов для создания скелетов загрузки (плейсхолдеров).
+Набор компонентов для создания скелетов загрузки (placeholders).
 
 ## LineSkeleton
 <Description name="LineSkeleton" />
@@ -77,13 +77,13 @@ export function App() {
 ```
 
 ## Доступность
-При использование хока `withSkeleton` необходимо воспользоваться атрибутами WAI ARIA. Пример с кнопкой:
+При использовании hook `withSkeleton` необходимо воспользоваться атрибутами WAI ARIA. Пример с кнопкой:
 
 ```tsx
 import React, { useState } from 'react';
 import { Button } from '@salutejs/{{ package }}';
 
-const ButtonSkeleton = withSkeleton<ButtonProps & WithSkeletonProps>(BasicButton);
+const ButtonSkeleton = withSkeleton<ButtonProps & WithSkeletonProps>(Button);
 
 export default function App () {
     const [skeleton, setSkeleton] = useState(false);
@@ -100,4 +100,4 @@ export default function App () {
 }
 ```
 
-Таким образом, при `skeleton=true` и `aria-busy=true` скринридер будет оповещать о соответствующем статусе компонента.
+Таким образом, при `skeleton=true` и `aria-busy=true` screen-reader будет оповещать о соответствующем статусе компонента.

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

@@ -27,7 +27,7 @@ import { PropsTable, Description } from '@site/src/components';
 
 ## Использование
 
-### Cтандартное подключение, без клавиатурной навигации
+### Стандартное подключение, без клавиатурной навигации
 
 ```tsx live
 import React, { useState } from 'react';

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

@@ -117,7 +117,7 @@ export function App() {
 
 ```tsx live
 import React from 'react';
-import { TextField } from '@salutejs/{{ package }};
+import { TextField } from '@salutejs/{{ package }}';
 
 export function App() {
     return (
@@ -133,4 +133,4 @@ export function App() {
         </div>
     );
 }
-```
+```

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

@@ -0,0 +1,120 @@
+---
+id: toolbar
+title: Toolbar
+---
+
+import { PropsTable, Description } from '@site/src/components';
+
+# Toolbar
+Toolbar может отображаться в горизонтальном и вертикальном положении с разными размерами.
+
+## Toolbar
+<Description name="Toolbar" />
+<PropsTable name="Toolbar" exclude={['css', 'focused']} />
+
+## Использование
+Компонент `Toolbar` должен содержать контент передаваемый в `children`.
+Для разделения элементов можно использовать ToolbarDivider.
+
+```tsx live
+import React from 'react';
+import { Toolbar, Button, ToolbarDivider } from '@salutejs/{{ package }}';
+import { IconEdit } from '@salutejs/plasma-icons';
+
+export function App() {
+    return (
+        <Toolbar>
+            <Button square size="m" view="clear" contentLeft={<IconEdit />} />
+            <Button square size="m" view="clear" contentLeft={<IconEdit />} />
+            <Button square size="m" view="clear" contentLeft={<IconEdit />} />
+            <ToolbarDivider />
+            <Button square size="m" view="clear" contentLeft={<IconEdit />} />
+            <Button square size="m" view="clear" contentLeft={<IconEdit />} />
+        </Toolbar>
+    );
+}
+```
+
+## Примеры
+
+### Размер Toolbar
+Размер Toolbar задается с помощью свойства `size`.
+
+Возможные значения свойства: `"l"`, `"m"`, `"s"` или `"xs"`:
+
+```tsx live
+import React from 'react';
+import { Toolbar, Button, ToolbarDivider } from '@salutejs/{{ package }}';
+import { IconEdit } from '@salutejs/plasma-icons';
+
+export function App() {
+    return (
+        <div>
+            <Toolbar size="l">
+                <Button square size="l" view="clear" contentLeft={<IconEdit />} />
+                <Button square size="l" view="clear" contentLeft={<IconEdit />} />
+                <ToolbarDivider />
+                <Button square size="l" view="clear" contentLeft={<IconEdit />} />
+                <Button square size="l" view="clear" contentLeft={<IconEdit />} />
+            </Toolbar>
+
+            <Toolbar size="m">
+                <Button square size="m" view="clear" contentLeft={<IconEdit />} />
+                <Button square size="m" view="clear" contentLeft={<IconEdit />} />
+                <ToolbarDivider />
+                <Button square size="m" view="clear" contentLeft={<IconEdit />} />
+                <Button square size="m" view="clear" contentLeft={<IconEdit />} />
+            </Toolbar>
+
+            <Toolbar size="m">
+                <Button square size="m" view="clear" contentLeft={<IconEdit />} />
+                <Button square size="m" view="clear" contentLeft={<IconEdit />} />
+                <ToolbarDivider />
+                <Button square size="s" view="clear" contentLeft={<IconEdit />} />
+                <Button square size="s" view="clear" contentLeft={<IconEdit />} />
+            </Toolbar>
+
+            <Toolbar size="xs">
+                <Button square size="xs" view="clear" contentLeft={<IconEdit />} />
+                <Button square size="xs" view="clear" contentLeft={<IconEdit />} />
+                <ToolbarDivider />
+                <Button square size="xs" view="clear" contentLeft={<IconEdit />} />
+                <Button square size="xs" view="clear" contentLeft={<IconEdit />} />
+            </Toolbar>
+        </div>
+    );
+}
+```
+
+### Положение Toolbar
+Положение Toolbar задается с помощью свойства `orientation`. Возможные значения свойства `orientation`:
++ `"vertical"` – вертикальное положение;
++ `"horizontal"` – горизонтальное положение;
+
+```tsx live
+import React from 'react';
+import { Toolbar, Button, ToolbarDivider } from '@salutejs/{{ package }}';
+import { IconEdit } from '@salutejs/plasma-icons';
+
+export function App() {
+    return (
+        <div>
+            <Toolbar orientation="vertical">
+                <Button square size="m" view="clear" contentLeft={<IconEdit />} />
+                <Button square size="m" view="clear" contentLeft={<IconEdit />} />
+                <ToolbarDivider />
+                <Button square size="m" view="clear" contentLeft={<IconEdit />} />
+                <Button square size="m" view="clear" contentLeft={<IconEdit />} />
+            </Toolbar>
+
+            <Toolbar orientation="horizontal">
+                <Button square size="m" view="clear" contentLeft={<IconEdit />} />
+                <Button square size="m" view="clear" contentLeft={<IconEdit />} />
+                <ToolbarDivider />
+                <Button square size="m" view="clear" contentLeft={<IconEdit />} />
+                <Button square size="m" view="clear" contentLeft={<IconEdit />} />
+            </Toolbar>
+        </div>
+    );
+}
+```

package/styled-components/es/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/es/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/es/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/es/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>
+        </>
+    );
+}
+```