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

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

@@ -0,0 +1,156 @@
+---
+id: IconButton
+title: IconButton
+---
+
+import { PropsTable, Description } from '@site/src/components';
+
+# IconButton
+Кнопки могут отображаться в нескольких размерах и цветах, могут содержать иконку.
+
+## IconButton
+<Description name="IconButton" />
+<PropsTable name="IconButton" exclude={['css']} />
+
+## Использование
+Компонент `IconButton` может содержать иконку, которая указывается напрямую через `children`.
+
+```tsx live
+import React from 'react';
+import { IconButton } from '@salutejs/{{ package }}';
+import { IconClose } from '@salutejs/plasma-icons';
+
+export function App() {
+    return (
+        <div>
+            <IconButton>
+                <IconClose color="inherit" />
+            </IconButton>
+        </div>
+    );
+}
+```
+
+## Примеры
+
+### Размер кнопки
+Размер кнопки задается с помощью свойства `size`.
+
+```tsx live
+import React from 'react';
+import { IconButton } from '@salutejs/{{ package }}';
+import { IconClose } from '@salutejs/plasma-icons';
+
+export function App() {
+    return (
+        <div>
+            <IconButton size="l">
+                <IconClose color="inherit" />
+            </IconButton>
+            <IconButton size="m">
+                <IconClose color="inherit" />
+            </IconButton>
+            <IconButton size="s">
+                <IconClose color="inherit" />
+            </IconButton>
+            <IconButton size="xs">
+                <IconClose color="inherit" size="xs" />
+            </IconButton>
+        </div>
+    );
+}
+```
+
+### Вид кнопки
+Вид кнопки задается с помощью свойства `view`.
+
+Возможные значения свойства `view`:
++ `"default"` – по умолчанию;
++ `"secondary"` – вторичная;
++ `"success"` – успешное завершение;
++ `"warning"` – предупреждение;
++ `"critical"` – ошибка;
++ `"clear"` – без цветового сопровождения;
++ `"dark"` – темная;
++ `"black"` – черная;
++ `"white"` – белая.
+
+```tsx live
+import React from 'react';
+import { IconButton } from '@salutejs/{{ package }}';
+import { IconClose } from '@salutejs/plasma-icons';
+
+export function App() {
+    return (
+        <div>
+            <IconButton size="s" view="default">
+                <IconClose color="inherit" />
+            </IconButton>
+            <IconButton size="s" view="secondary">
+                <IconClose color="inherit" />
+            </IconButton>
+            <IconButton size="s" view="success">
+                <IconClose color="inherit" />
+            </IconButton>
+            <IconButton size="s" view="warning">
+                <IconClose color="inherit" />
+            </IconButton>
+            <IconButton size="s" view="critical">
+                <IconClose color="inherit" />
+            </IconButton>
+            <IconButton size="s" view="clear">
+                <IconClose color="inherit" />
+            </IconButton>
+            <IconButton size="s" view="dark">
+                <IconClose  color="inherit" />
+            </IconButton>
+            <IconButton size="s" view="black">
+                <IconClose color="inherit" />
+            </IconButton>
+            <IconButton size="s" view="white">
+                <IconClose color="inherit" />
+            </IconButton>
+        </div>
+    );
+}
+```
+
+### Границы кнопки
+Границы кнопки задаются с помощью свойства `pin`. Возможные значения свойства `pin`:
++ `square` – обычное скругление;
++ `circle` – сильное скругление;
++ `clear` – нет скругления.
+
+```tsx live
+import React from 'react';
+import { IconButton } from '@salutejs/{{ package }}';
+import { IconClose } from '@salutejs/plasma-icons';
+
+export function App() {
+    return (
+        <div>
+            <IconButton pin="square-square">
+                <IconClose color="inherit" />
+            </IconButton>
+            <IconButton pin="square-clear">
+                <IconClose color="inherit" />
+            </IconButton>
+            <IconButton pin="clear-square">
+                <IconClose color="inherit" />
+            </IconButton>
+            <IconButton pin="clear-clear">
+                <IconClose color="inherit" />
+            </IconButton>
+            <IconButton pin="clear-circle">
+                <IconClose color="inherit" />
+            </IconButton>
+            <IconButton pin="circle-clear">
+                <IconClose color="inherit" />
+            </IconButton>
+            <IconButton pin="circle-circle">
+                <IconClose color="inherit" />
+            </IconButton>
+        </div>
+    );
+}
+```

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

@@ -16,7 +16,7 @@ import { Image } from '@salutejs/{{ package }}';
 export function App() {
     return (
         <Image
-            src="/web/images/320_320_9.jpg"
+            src="/{{ package }}/images/320_320_9.jpg"
             width="320px"
             height="320px"
             alt="Картинка для примера фоном"

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

@@ -11,13 +11,13 @@ import { PropsTable, Description } from '@site/src/components';
 
 ```tsx live
 import React from 'react';
-import { P1, Link } from '@salutejs/{{ package }}';
+import { TextS, Link } from '@salutejs/{{ package }}';
 
 export function App() {
     return (
-        <P1>
-            Скачайте <Link href="/" target="_blank">приложение</Link>.
-        </P1>
+        <TextS>
+            Скачайте <Link href="/" target="_blank">приложение.</Link>
+        </TextS>
     );
 }
 ```

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

@@ -11,46 +11,98 @@ import { PropsTable, Description } from '@site/src/components';
 
 ## Использование
 
-### Провайдер контекста
-Поместите `ModalsProvider` в [корень приложения](../../#корень-приложения) или там, где будете применять модальные окна:
+Перед использованием убедитесь, что `PopupProvider` подключен.
+Компонент Modal во многом схож с Popup, добавляет при этом подложку(`overlay`), а также блокирует scroll и focus.
 
-```tsx title="index.ts"
-import ReactDOM from 'react-dom';
-import { ModalsProvider } from '@salutejs/{{ package }}';
+```tsx live
+import React, { useState } from 'react';
+import { surfaceSolidSecondary } from '@salutejs/{{ vertical }}/tokens';
+import { SSRProvider, Button, Modal, PopupProvider } from '@salutejs/{{ package }}';
 
-import { App } from './App';
+export function App() {
+    const [isOpenA, setIsOpenA] = useState(false);
+    const [isOpenB, setIsOpenB] = useState(false);
 
-ReactDOM.render(
-    <ModalsProvider>
-        <App />
-    </ModalsProvider>,
-    document.getElementById('root')
-);
+    return (
+        <SSRProvider>
+            <PopupProvider>
+                <div style=\{{ height: "300px" }}>
+                    <div style=\{{ display: 'flex', flexDirection: 'column' }}>
+                        <Button text="Открыть A" onClick={() => setIsOpenA(true)} />
+                    </div>
+                    <Modal
+                        id="modalA"
+                        onClose={() => setIsOpenA(false)}
+                        isOpen={isOpenA}
+                        placement="center"
+                        offset={[0, 0]}
+                    >
+                        <div style=\{{ background: `${surfaceSolidSecondary}`, padding: "1rem" }}>
+                            <Button onClick={() => setIsOpenA(false)}>Close</Button>
+                            <Button text="Открыть B" onClick={() => setIsOpenB(true)} />
+                            Content
+                        </div>
+                        <Modal
+                            id="modalB"
+                            onClose={() => setIsOpenB(false)}
+                            isOpen={isOpenB}
+                            placement="right"
+                            offset={[0, 0]}
+                        >
+                            <div style=\{{ background: `${surfaceSolidSecondary}`, padding: "1rem" }}>
+                                <Button onClick={() => setIsOpenB(false)}>Close</Button>
+                                Content
+                            </div>
+                        </Modal>
+                    </Modal>
+                </div>
+            </PopupProvider>
+        </SSRProvider>
+    );
+}
 ```
 
-### Вызов модального окна
-После подключения `ModalsProvider` поместите компонент `Modal` туда, где необходимо применить модальное окно:
+## Подключение анимации
+Подключение анимации аналогично тому, как это происходит в `Popup` - через свойство `withAnimation`(управление через `popupClasses`, `modalClasses`).
+Для добавления анимации в оверлей необходимо использовать класс `.modal-overlay` через переменную `modalClasses.overlay` из пакета.
 
-```tsx live
-import React from 'react';
-import { Modal, Headline3, P1, Button } from '@salutejs/{{ package }}';
+Пример:
 
-export function App() {
-    const [isOpen, setIsOpen] = React.useState(false);
+```tsx
+import styled from 'styled-components';
+import { Modal } from '@salutejs/{{ package }}';
 
-    const close = React.useCallback(() => {
-      setIsOpen(false);
-    }, []);
+const StyledModal = styled(Modal)`
+    && > .${popupClasses.root}, .${modalClasses.overlay} {
+        animation: fadeIn 1s forwards;
+    }
 
-    return (
-        <div>
-            <Button text="Открыть модальное окно" onClick={() => setIsOpen(!isOpen)} />
-            <Modal isOpen={isOpen} onClose={close}>
-                <Headline3 mb={10}>Модальное окно</Headline3>
-                <P1>Содержимое модального окна.</P1>
-                <Button text="Закрыть" onClick={close} />
-            </Modal>
-        </div>
-    );
-}
+    &&.${popupClasses.endAnimation} .${popupClasses.root} {
+        animation: fadeOut 1s forwards;
+    }
+
+    &&.${popupClasses.endAnimation} .${modalClasses.overlay} {
+        animation: fadeOut 1s forwards;
+    }
+
+    @keyframes fadeIn {
+        from {
+            opacity: 0;
+        }
+
+        to {
+            opacity: 1;
+        }
+    }
+
+    @keyframes fadeOut {
+        from {
+            opacity: 1;
+        }
+
+        to {
+            opacity: 0;
+        }
+    }
+`;
 ```

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

@@ -34,8 +34,7 @@ ReactDOM.render(
 ```
 
 ### Вызов уведомления
-После подключения `NotificationsProvider` станет возможен вызов функции `addNotification`,
-который приведет к отображению оповещения.
+После подключения `NotificationsProvider` станет возможен вызов функции `addNotification`,который приведет к отображению оповещения.
 Функция принимает значения свойств компонента `Notification`:
 
 ```tsx live

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

@@ -0,0 +1,130 @@
+---
+id: pagination
+title: Pagination
+---
+
+import { PropsTable, Description } from '@site/src/components';
+
+# Pagination
+
+Pagination может отображаться в разных размерах и может содержать select с выбором количества элементов на странице 
+и быстрый выбор страницы.
+
+## Pagination
+<Description name="Pagination" />
+<PropsTable name="Pagination" exclude={['css', 'focused']} />
+
+## Использование
+Компонент `Pagination` должен содержать параметр slots. Он обозначает количество кнопок в Pagination.
+
+Также компонент имеет параметр hasPerPage, логика работы такова:
+
+- если указан только параметр count, то он равен кол-ву страниц
+- если указан параметр hasPerPage или perPage, то count делится на perPage
+
+```tsx live
+import React from 'react';
+import { Pagination } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <div style=\{{display: "flex", "flex-direction": "column"}}>
+            <div>
+                <Pagination slots={7} count={200} />
+            </div>
+            <div>
+                <Pagination slots={9} count={200} hasPerPage={true} perPage={20} />
+            </div>
+            <div>
+                <Pagination slots={9} count={200} hasPerPage={true} />
+            </div>
+            <div>
+                <Pagination slots={9} count={200} hasPerPage={false} />
+            </div>
+        </div>
+    );
+}
+```
+
+## Примеры
+
+### Размер Pagination
+Размер Pagination задается с помощью свойства `size`.
+Возможные значения свойства: `"l"`, `"m"`, `"s"` или `"xs"`:
+
+```tsx live
+import React from 'react';
+import { Pagination } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <div style=\{{display: "flex", "flex-direction": "column"}}>
+            <Pagination size="l" slots={9} count={200} hasPerPage={true} />
+            <Pagination size="m" slots={9} count={200} hasPerPage={true} />
+            <Pagination size="s" slots={9} count={200} hasPerPage={true} />
+            <Pagination size="xs" slots={9} count={200} hasPerPage={true} />
+        </div>
+    );
+}
+```
+
+### Вид Pagination
+Вид Pagination задается с помощью свойства `view`. Возможные значения свойства `view`:
++ `"default"` – основная;
++ `"secondary"` – вторичная;
++ `"clear"` – чистая;
+
+```tsx live
+import React from 'react';
+import { Pagination } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <div style=\{{display: "flex", "flex-direction": "column"}}>
+            <Pagination size="xs" view="default" slots={9} count={200} hasPerPage={true} />
+            <Pagination size="xs" view="secondary" slots={9} count={200} hasPerPage={true} />
+            <Pagination size="xs" view="clear" slots={9} count={200} hasPerPage={true} />
+        </div>
+    );
+}
+```
+
+### Вид активной кнопки Pagination
+Вид Pagination задается с помощью свойства `viewCurrentPage`. Возможные значения свойства `viewCurrentPage`:
++ `"default"` – основная;
++ `"secondary"` – вторичная;
++ `"clear"` – чистая;
+
+```tsx live
+import React from 'react';
+import { Pagination } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <div style=\{{display: "flex", "flex-direction": "column"}}>
+            <Pagination size="xs" viewCurrentPage="default" slots={9} count={200} hasPerPage={true} />
+            <Pagination size="xs" viewCurrentPage="secondary" slots={9} count={200} hasPerPage={true} />
+            <Pagination size="xs" viewCurrentPage="clear" slots={9} count={200} hasPerPage={true} />
+        </div>
+    );
+}
+```
+
+### Типы Pagination
+Тип Pagination задается с помощью свойства `type`. Возможные значения свойства `type`:
++ `"default"` – обычная;
++ `"compact"` – компактная;
+
+```tsx live
+import React from 'react';
+import { Pagination } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <div style=\{{display: "flex", "flex-direction": "column"}}>
+            <Pagination size="xs" type="default" slots={9} count={200} hasPerPage={true} />
+            <Pagination size="xs" type="compact" slots={9} count={200} hasPerPage={true} />
+        </div>
+    );
+}
+```

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

@@ -12,7 +12,7 @@ import { PropsTable, Description } from '@site/src/components';
 ```tsx live
 import React from 'react';
 import styled from "styled-components";
-import { surfaceSolid03 } from "@salutejs/plasma-tokens/brands/{{ theme }}";
+import { surfaceSolidTertiary } from "@salutejs/{{ vertical }}/tokens";
 import { Popover, Button } from '@salutejs/{{ package }}';
 
 export function App() {
@@ -26,7 +26,7 @@ export function App() {
             position: absolute;
             width: 0.5rem;
             height: 0.5rem;
-            background: ${surfaceSolid03};
+            background: ${surfaceSolidTertiary};
         }
 
         &::before {
@@ -37,7 +37,7 @@ export function App() {
     `;
 
     const StyledContent = styled.div`
-        background: ${surfaceSolid03};
+        background: ${surfaceSolidTertiary};
         padding: 1rem;
 
         display: flex;