@salutejs/plasma-new-hope 0.82.1-canary.1210.9186102644.0 → 0.83.0-canary.1194.9174145281.0

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

@@ -1,156 +0,0 @@
----
-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/cjs/components/Pagination/Pagination.template-doc.mdx

@@ -1,130 +0,0 @@
----
-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/cjs/components/Progress/Progress.template-doc.mdx

@@ -1,33 +0,0 @@
----
-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/Toolbar/Toolbar.template-doc.mdx

@@ -1,120 +0,0 @@
----
-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/Cell/Cell.template-doc.mdx

@@ -1,68 +0,0 @@
----
-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/es/components/Divider/Divider.template-docs.mdx

@@ -1,57 +0,0 @@
----
-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>
-    );
-}
-```