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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salutejs/plasma-new-hope",
-  "version": "0.66.0-dev.0",
+  "version": "0.66.1-canary.1128.8446493855.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": "55fbcb26d20d75b60f5e51dda6eabb222599522f"
+  "gitHead": "53ab9ecd06142aff1f9a85a5af50d508f8199cd3"
 }

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

@@ -0,0 +1,97 @@
+---
+id: avatar
+title: Avatar
+---
+
+import { PropsTable, Description } from '@site/src/components';
+
+# Avatar
+<Description name="Avatar" />
+<PropsTable name="Avatar" exclude={['css']} />
+
+
+## Примеры
+
+### Размер аватара
+Размер задается с помощью свойства `size`. Возможные значения свойства: `"xxl"`, `"l"`, `"m"`, `"s"`, `"fit"`.
+
+```tsx live
+import React from 'react';
+import { Avatar } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <>
+            <Avatar size="xxl" url="https://avatars.githubusercontent.com/u/1813468?v=4" />
+            <Avatar size="l" url="https://avatars.githubusercontent.com/u/1813468?v=4" />
+            <Avatar size="m" url="https://avatars.githubusercontent.com/u/1813468?v=4" />
+            <Avatar size="s" url="https://avatars.githubusercontent.com/u/1813468?v=4" />
+        </>
+    );
+}
+```
+
+### Инициалы вместо фотографии
+Инициалы можно задать с помощью свойства `name`. Желательный формат строки - "Имя Фамилия". Также не должно быть свойства url.
+
+```tsx live
+import React from 'react';
+import { Avatar } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <>
+            <Avatar name="Иван Фадеев" />
+        </>
+    );
+}
+```
+
+### Статус аватара
+Статус задается с помощью свойства `status`. Возможные значения: `"active"`, `"inactive"`.
+
+```tsx live
+import React from 'react';
+import { Avatar } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <>
+            <Avatar status="active" name="Иван Фадеев" />
+            <Avatar status="inactive" name="Иван Фадеев" />
+        </>
+    );
+}
+```
+
+### Увеличение при наведении
+Опциональное свойство `"isScalable"`.
+
+```tsx live
+import React from 'react';
+import { Avatar } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <>
+            <Avatar isScalable name="Иван Фадеев" />
+        </>
+    );
+}
+```
+
+### Доступность
+Добавляем `"role"` и `"tabIndex"`.
+
+```tsx live
+import React from 'react';
+import { Avatar } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <>
+            <Avatar role="button" tabIndex="0" name="Иван Фадеев" />
+        </>
+    );
+}
+```

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

@@ -0,0 +1,29 @@
+---
+id: avatarGroup
+title: AvatarGroup
+---
+
+import { PropsTable, Description } from '@site/src/components';
+
+# AvatarGroup
+<Description name="AvatarGroup" />
+<PropsTable name="AvatarGroup" exclude={['css']} />
+
+AvatarGroup это обертка для Avatar. Принимает в себя группу из avatar's.
+
+```tsx live
+import React from 'react';
+import { Avatar, AvatarGroup } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <AvatarGroup>
+                {
+                    Array(5).fill(true).map(() => (
+                        <Avatar size="xxl" url="https://avatars.githubusercontent.com/u/1813468?v=4" />
+                    ))
+                }
+            </AvatarGroup>
+    );
+}
+```

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

@@ -0,0 +1,131 @@
+---
+id: badge
+title: Badge
+---
+
+import { PropsTable, Description } from '@site/src/components';
+
+# Badge
+<Description name="Badge" />
+<PropsTable name="Badge"  exclude={['css']} />
+
+## Примеры
+
+### Размер бейджа
+Размер задается с помощью свойства `size`.
+
+Возможные значения свойства: `"l"`, `"m"`, `"s"`.
+
+```tsx live 
+import React from 'react';
+import { Badge } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <div>
+            <Badge text="Бейдж" size="l" />
+            <Badge text="Бейдж" size="m" />
+            <Badge text="Бейдж" size="s" />
+        </div>
+    );
+}
+```
+
+### Скругленность бейджа
+Скругленность задается с помощью свойства `pilled`:
+
+```tsx live 
+import React from 'react';
+import { Badge } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <div>
+            <Badge text="Бейдж" size="l" pilled />
+            <Badge text="Бейдж" size="m" pilled />
+            <Badge text="Бейдж" size="s" pilled />
+        </div>
+    );
+}
+```
+
+### Вид бейджа
+Вид бейджа задается с помощью свойства `view`. Возможные значения свойства `view`:
+
++ `"primary"` – основной бейдж;
++ `"accent"` – бейдж акцентного цвета;
++ `"positive"` – успешное завершение;
++ `"warning"` – предупреждение;
++ `"negative"` – ошибка;
++ `"dark"` – темный бэйдж;
++ `"light"` – светлый бэйдж.
+
+```tsx live 
+import React from 'react';
+import { Badge } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <div>
+            <Badge text="Бейдж" size="l" view="primary" />
+            <Badge text="Бейдж" size="l" view="accent" />
+            <Badge text="Бейдж" size="l" view="positive" />
+            <Badge text="Бейдж" size="l" view="warning" />
+            <Badge text="Бейдж" size="l" view="negative" />
+            <Badge text="Бейдж" size="l" view="dark" />
+            <Badge text="Бейдж" size="l" view="light" />
+        </div>
+    );
+}
+```
+
+так же на вид бейджа влияет свойство `transparent`:
+
+```tsx live 
+import React from 'react';
+import { Badge } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <div>
+            <Badge text="Бейдж" size="l" view="primary" transparent />
+            <Badge text="Бейдж" size="l" view="accent" transparent />
+            <Badge text="Бейдж" size="l" view="positive" transparent />
+            <Badge text="Бейдж" size="l" view="warning" transparent />
+            <Badge text="Бейдж" size="l" view="negative" transparent />
+            <Badge text="Бейдж" size="l" view="dark" transparent />
+            <Badge text="Бейдж" size="l" view="light" transparent />
+        </div>
+    );
+}
+```
+
+### Иконка слева / справа
+В левой и/или правой части бейджа можно отобразить иконку:
+
+```tsx live
+import React from 'react';
+import { Badge } from '@salutejs/{{ package }}';
+import { IconEye } from '@salutejs/plasma-icons';
+
+export function App() {
+    return (
+        <div>
+            <Badge 
+                text="Бейдж" 
+                size="l"   
+                view="primary" 
+                contentLeft={
+                    <IconEye color="inherit" size="xs" />
+                } />
+            <Badge 
+                text="Бейдж" 
+                size="l"   
+                view="primary" 
+                contentRight={
+                    <IconEye color="inherit" size="xs" />
+                } />
+        </div>
+    );
+}
+```

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

@@ -0,0 +1,162 @@
+---
+id: button
+title: Button
+---
+
+import { PropsTable, Description } from '@site/src/components';
+
+# Button
+Кнопки могут отображаться в нескольких размерах и цветах, могут содержать текст и/или иконку.
+
+## Button
+<Description name="Button" />
+<PropsTable name="Button" />
+
+## Использование
+Компонент `Button` может содержать текст, который указывается в
+свойстве `text`, или любой контент напрямую через `children`.
+
+Свойство text можно использовать вместе со свойствами `contentLeft` и `contentRight`.
+С их помощью можно размещать **иконку** слева или справа от текста.
+
+```tsx live
+import React from 'react';
+import { Button } from '@salutejs/{{package}}';
+import { IconDownload } from '@salutejs/plasma-icons';
+
+export function App() {
+    return (
+        <div>
+            <Button text="Текст" />
+
+            <Button text="Текст" contentLeft={<IconDownload />} />
+
+            <Button text="Текст" contentRight={<IconDownload />} />
+
+            <Button contentLeft={<IconDownload />} />
+
+            <Button text="Текст" isLoading />
+
+            <Button text="Текст" isLoading loader={<div>Loader...</div>} />
+
+            <Button>
+                <IconDownload />
+                <span>Текст</span>
+            </Button>
+        </div>
+    );
+}
+```
+
+## Примеры
+
+### Размер кнопки
+Размер кнопки задается с помощью свойства `size`. Возможные значения свойства: `"l"`, `"m"` или `"s"`:
+
+```tsx live
+import React from 'react';
+import { Button } from '@salutejs/{{package}}';
+
+export function App() {
+    return (
+        <div>
+            <Button text="Button" size="l" />
+            <Button text="Button" size="m" />
+            <Button text="Button" size="s" />
+        </div>
+    );
+}
+```
+
+### Вид кнопки
+Вид кнопки задается с помощью свойства `view`. Возможные значения свойства `view`:
++ `"primary"` – основная;
++ `"secondary"` – вторичная;
++ `"success"` – успешное завершение;
++ `"warning"` – предупреждение;
++ `"critical"` – ошибка;
++ `"checked"` – выбранное состояние;
++ `"clear"` – без цветового сопровождения.
+
+```tsx live
+import React from 'react';
+import { Button } from '@salutejs/{{package}}';
+
+export function App() {
+    return (
+        <div>
+            <Button text="Кнопка" size="s" view="primary" />
+            <Button text="Кнопка" size="s" view="secondary" />
+            <Button text="Кнопка" size="s" view="success" />
+            <Button text="Кнопка" size="s" view="warning" />
+            <Button text="Кнопка" size="s" view="critical" />
+            <Button text="Кнопка" size="s" view="checked" />
+            <Button text="Кнопка" size="s" view="overlay" />
+            <Button text="Кнопка" size="s" view="clear" />
+        </div>
+    );
+}
+```
+
+### Границы кнопки
+Границы кнопки задаются с помощью свойства `pin`. Возможные значения свойства `pin`:
++ `square` – обычное скругление;
++ `circle` – сильное скругление;
++ `clear` – нет скругления.
+
+```tsx live
+import React from 'react';
+import { Button } from '@salutejs/{{package}}';
+
+export function App() {
+    return (
+        <div>
+            <Button pin="square-square">Button</Button>
+            <Button pin="square-clear">Button</Button>
+            <Button pin="clear-square">Button</Button>
+            <Button pin="clear-clear">Button</Button>
+            <Button pin="clear-circle">Button</Button>
+            <Button pin="circle-clear">Button</Button>
+            <Button pin="circle-circle">Button</Button>
+        </div>
+    );
+}
+```
+
+### Квадратные и круглые кнопки
+Для отображения иконок и/или текста в квадратных или круглых кнопках с **равными сторонами**,
+используйте компонент `Button` и свойство `contentLeft`, в которое требуется передать нужное значение.
+
+По умолчанию границы кнопки **квадратные** (со скругленными углами) — `pin="square-square"`.
+**Круглые** границы кнопки можно сделать с помощью свойства `pin` со значением `"circle-circle"`.
+
+```tsx live
+import React from 'react';
+import { Button } from '@salutejs/{{package}}';
+import { IconDownload } from '@salutejs/plasma-icons';
+
+export function App() {
+    return (
+        <div>
+            <Button contentLeft={<IconDownload />} />
+
+            <Button contentLeft={<IconDownload />} pin="circle-circle" />
+        </div>
+    );
+}
+```
+
+### Гиперссылка
+Компонент поддерживает вывод в виде тега `<a>`, для этого необходимо указать свойство `as`:
+
+```tsx live
+import React from 'react';
+import { Button } from '@salutejs/{{package}}';
+import { IconDownload } from '@salutejs/plasma-icons';
+
+export function App() {
+    return (
+        <Button as="a" text="Гиперссылка" />
+    );
+}
+```

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

@@ -0,0 +1,123 @@
+---
+id: buttonGroup
+title: ButtonGroup
+---
+
+import { PropsTable, Description } from '@site/src/components';
+
+# ButtonGroup
+<Description name="ButtonGroup" />
+<PropsTable name="ButtonGroup" exclude={['css']} />
+
+## Использование
+Компонент `ButtonGroup` - это обертка для Button. Принимает в себя группу кнопок.
+
+```tsx live
+import React from 'react';
+import { ButtonGroup, Button } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <ButtonGroup>
+            {Array(5)
+                .fill(true)
+                .map((_, i) => (
+                    <Button text={`Button ${i}`} />
+                ))}
+        </ButtonGroup>
+    );
+}
+```
+
+## Примеры
+
+### Размер и вид группы кнопок
+Размер и вид группы кнопок задается с помощью свойств `size` и `view` соответственно.
+С помощью свойства `isCommonButtonStyles` можно отключить переопределение стилей для всех кнопок внутри группы. 
+Тогда каждая кнопка будет иметь настраиваемый размер и вид. 
+
+```tsx live
+import React from 'react';
+import { ButtonGroup, Button } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <div>
+            <ButtonGroup size="s" view="secondary">
+                {Array(5)
+                    .fill(true)
+                    .map((_, i) => (
+                        <Button text={`Button ${i}`} />
+                    ))}
+            </ButtonGroup>
+            
+            <ButtonGroup isCommonButtonStyles={false}>
+                <Button size="m" text="Default" />
+                <Button size="s" text="Primary" view="primary" />
+                <Button size="xs" text="Success" view="success" />
+            </ButtonGroup>
+        </div>
+    );
+}
+```
+
+### Ориентация группы кнопок и отступы между кнопками
+
+Группа кнопок может располагаться вертикально или горизонтально и иметь три вида отступов:
+
+```tsx live
+import React from 'react';
+import { ButtonGroup, Button } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <div>
+            <ButtonGroup size="xs" orientation="vertical" gap="none">
+                {Array(5)
+                    .fill(true)
+                    .map((_, i) => (
+                        <Button text={`Button ${i}`} />
+                    ))}
+            </ButtonGroup>
+
+            <ButtonGroup size="xs" orientation="horizontal" gap="wide">
+                {Array(4)
+                    .fill(true)
+                    .map((_, i) => (
+                        <Button text={`Button ${i}`} />
+                    ))}
+            </ButtonGroup>
+        </div>
+    );
+}
+```
+
+### Границы кнопки
+Границы кнопки задаются с помощью свойства `shape`.
+
+```tsx live
+import React from 'react';
+import { ButtonGroup, Button } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <div>
+            <ButtonGroup size="xs" shape="segmented">
+                {Array(3)
+                    .fill(true)
+                    .map((_, i) => (
+                        <Button text={`Button ${i}`} />
+                    ))}
+            </ButtonGroup>
+
+            <ButtonGroup size="xs" shape="default">
+                {Array(3)
+                    .fill(true)
+                    .map((_, i) => (
+                        <Button text={`Button ${i}`} />
+                    ))}
+            </ButtonGroup>
+        </div>
+    );
+}
+```