chore(template): add components docs template

packages/plasma-new-hope/src/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="Иван Фадеев" />
+        </>
+    );
+}
+```

packages/plasma-new-hope/src/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>
+    );
+}
+```

packages/plasma-new-hope/src/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>
+    );
+}
+```