update to release 11.30.0

Raiffeisen-DGTL · Mar 14, 2024 · d58495b · d58495b
1 parent 307c1f9
commit d58495b
Show file tree

Hide file tree

Showing 68 changed files with 9,444 additions and 0 deletions.
diff --git a/src/Accordion/README.md b/src/Accordion/README.md
@@ -0,0 +1,33 @@
+# Accordion
+
+Aккордеон это компонент для отображения списка элементов. Каждый элемент можно раскрыть, нажав на заголовок.
+
+## Импорт
+
+```
+import { Accordion } from 'vienna-ui';
+```
+
+## Свойства / Props
+Свойства наследуются от [HTMLAttributes<HTMLDivElement>](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts#L1746)
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| size | 's' \| 'm' \| 'l' \| undefined | 'm' |  |
+| iconPosition | 'left' | 'right' \| 'none' \| undefined | 'right' | |;
+
+## Использование
+
+```
+    <Accordion iconPosition='left'>
+        <Accordion.Item header='Accordion header'>
+            <ComponentHelpers.Card.Demo style={{ width: '100%' }} />
+        </Accordion.Item>
+        <Accordion.Item header='Accordion header'>
+            <ComponentHelpers.Card.Demo style={{ width: '100%' }} />
+        </Accordion.Item>
+        <Accordion.Item header='Accordion header'>
+            <ComponentHelpers.Card.Demo style={{ width: '100%' }} />
+        </Accordion.Item>
+    </Accordion>
+```
diff --git a/src/Alarm/README.md b/src/Alarm/README.md
@@ -0,0 +1,28 @@
+# Alarm
+
+Короткие уведомления. Используются для основной навигации, раздела пуш-уведомлений (звоночек в шапке).
+
+## Импорт
+
+```
+import { Alarm } from 'vienna-ui';
+```
+
+## Свойства / Props
+
+Свойства наследуются от [HTMLAttributes<HTMLDivElement>](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts#L1746)
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| design | "critical" \| "warning" \| "success" \| "accent" \| "neutral" \| "disabled" \| undefined | false |
+| position | "relative" \| "absolute" \| undefined | false |
+| top | string \| undefined | false | Свойство для вертикального позиционирования. Зависит от свойства position |
+| bottom | string \| undefined | false | Свойство для вертикального позиционирования. Зависит от свойства position |
+| left | string \| undefined | false | Свойство для горизонтального позиционирования. Зависит от свойства position |
+| right | string \| undefined | false | Свойство для горизонтального позиционирования. Зависит от свойства position |
+
+## Использование
+
+```
+<Alarm design='success' />
+```
diff --git a/src/Alarm/READMEENG.md b/src/Alarm/READMEENG.md
@@ -0,0 +1,26 @@
+# Alarm
+
+Short notifications. It's used for main navigation and push-notification section (bell on the header).
+
+## Imports
+
+```
+import { Alarm } from 'vienna-ui';
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| design | "critical" \| "warning" \| "success" \| "accent" \| "neutral" \| "disabled" \| undefined | false |
+| position | "relative" \| "absolute" \| undefined | false |
+| top | string \| undefined | false | The top property participates in specifying the vertical position of a positioned element. Depends on position property |
+| bottom | string \| undefined | false | The bottom property participates in specifying the vertical position of a positioned element. Depends on position property |
+| left | string \| undefined | false | The left property participates in specifying the horizontal position of a positioned element. Depends on position property |
+| right | string \| undefined | false | The right property participates in specifying the horizontal position of a positioned element. Depends on position property |
+
+## Usage
+
+```
+<Alarm design='success' />
+```
diff --git a/src/Alert/README.md b/src/Alert/README.md
@@ -0,0 +1,113 @@
+# Alert
+
+Alert используется как статичное уведомление для акцента на информации в контенте, требующего внимания или действий.
+
+## Импорт
+
+```
+import { Alert } from 'vienna-ui';
+```
+
+## Свойства / Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| actions | ReactNode | false | Блок для кнопок |
+| design | 'plain' \| 'error' \| 'warning' \| 'success' | 'plain' |
+| dynamic | boolean \| undefined | false | Контролирует динамическую ширину компонента |
+| noIcon | boolean \| undefined | false | Контролирует отображение иконки |
+| compactBelow | number \| undefined | false | Контролирует отображение коммпактного режима, когда ширина просмотра меньше заданного числа |
+
+## Использование
+
+```jsx
+<Alert title='Важно!'>Информация о некритичных подробностях</Alert>
+```
+
+## Дизайн
+
+##### Свойство `design`
+
+Внешний вид контролируется параметром `design`. Доступно 4 варианта дизайна - `plain`, `success`, `warning`, `error`.
+
+```jsx
+<Alert design='success'>Информация о некритичных подробностях</Alert>
+```
+
+## Заголовок
+
+##### Свойство `title`
+
+Параметр `title` является опциональным.
+
+```jsx
+<Alert title='Успешно!' design='success'>
+    Информация об успешном результате действия
+</Alert>
+```
+
+## Без иконки
+
+##### Свойство `noIcon`
+
+Передав параметр `noIcon` можно убрать иконку из уведомления.
+
+```jsx
+<Alert design='success' noIcon>
+    Информация об успешном результате действия
+</Alert>
+<Alert title='Ошибка!' design='error' noIcon>
+    Информация об ошибке в результате действия
+</Alert>
+```
+
+## Динамический контент
+
+##### Свойство `dynamic`
+
+По умолчанию компонент занимает 100% ширины родителя. Если передан параметр `dynamic`, то ширина компонента равна ширине контента.
+
+```jsx
+<Alert dynamic title='Успешно!' design='success'>
+    Динамический Alert
+</Alert>
+```
+
+## Компактный режим
+
+##### Свойство `compactBelow`
+
+Комопнент поддерживает компактный режим отображения. В параметр `compactBelow` можно передать пороговое значение ширины viewport, ниже которого компонент будет отображаться в компактном виде.
+
+```jsx
+<Alert compactBelow={1024} title='Успешно!' design='success'>
+    Информация об успешном результате действия
+</Alert>
+```
+
+Если передать заведомо большее значение, то компонет будет отображаться в компактном виде всегда.
+
+```jsx
+<Alert compactBelow={100000} title='Успешно!' design='success'>
+    Информация об успешном результате действия
+</Alert>
+```
+
+## С кнопками
+
+##### Свойство `actions`
+
+Компонент поддерживает свойство `actions`, куда можно передать JSX объект с кнопками. Поддерживается 2 вида дизайнов кнопок 'primary' - вариант по умолчанию, не требующий явно указывать свойство `design`, и `ghost`. При этом при начличии `actions` нотификация всегда отображается в компактном режиме.
+
+```jsx
+<Alert
+    title='Важно!'
+    actions={
+        <Groups>
+            <Button>Complete</Button>
+            <Button design='ghost'>Cancel</Button>
+        </Groups>
+    }>
+    Информация о некритичных подробностях
+</Alert>
+```
diff --git a/src/Avatar/README.md b/src/Avatar/README.md
@@ -0,0 +1,47 @@
+# Avatar
+
+Компонент для визуальной идентификации пользователя и компаний. Используется в разных компонентах от шапки до карточек.
+
+## Импорт
+
+```
+import { Avatar } from 'vienna-ui';
+```
+
+## Свойства / Props
+
+Свойства наследуются от [HTMLAttributes<HTMLDivElement>](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts#L1746)
+
+| Prop     | Type                                           | Default | Description                 |
+| -------- | ---------------------------------------------- | ------- | --------------------------- |
+| children | ReactNode                                      | false   |
+| size     | "xs" \| "s" \| "m" \| "l" \| "xl" \| undefined | false   | Доступные размеры           |
+| align    | "left" \| "center" \| "right" \| undefined     | false   | Выравнивание по горизонтали |
+| valign   | "center" \| "top" \| "bottom" \| undefined     | false   | Выравнивание по вертикали   |
+
+## Использование
+
+```
+<Avatar src={ImageURL} />
+```
+
+## Размеры
+
+##### Свойство `size`
+
+Доступные размеры: `xs`, `s`, `l`, `m` (по умолчанию) и `xl`
+
+## Использование с `RoundIcon`
+
+Если изображение, переданное в `src` недоступно - отобразиться содержиммое `children`
+
+```jsx
+import { Avatar } from 'vienna-ui';
+import { RoundIcon } from 'vienna-ui';
+
+<Avatar src='https://bad.url.to.avatar/avatar.png' size='xl'>
+    <RoundIcon size='xl' color='nice10'>
+        B
+    </RoundIcon>
+</Avatar>;
+```
diff --git a/src/Avatar/READMEENG.md b/src/Avatar/READMEENG.md
@@ -0,0 +1,43 @@
+# Avatar
+
+Component is for visual user identification. It's used in sort of components like Header or Card.
+
+## Imports
+
+```
+import { Avatar } from 'vienna-ui';
+```
+
+## Props
+
+| Prop     | Type                                           | Default | Description                                |
+| -------- | ---------------------------------------------- | ------- | ------------------------------------------ |
+| children | ReactNode                                      | false   | If src is unavailable, children are showed |
+| size     | "xs" \| "s" \| "m" \| "l" \| "xl" \| undefined | false   | Available sizes                            |
+| align    | "left" \| "center" \| "right" \| undefined     | false   | Horizontally component aligning            |
+| valign   | "center" \| "top" \| "bottom" \| undefined     | false   | Vertically component aligning              |
+
+## Usage
+
+```
+<Avatar src={ImageURL} />
+```
+
+## Sizes
+
+Avatar has base sizes: `xs`, `s`, `l`, `m` (default) & `xl`
+
+## Usage with RoundIcon
+
+If src isn't passed or image isn't displayed, children content is showed.
+
+```jsx
+import { Avatar } from 'vienna-ui';
+import { RoundIcon } from 'vienna-ui';
+
+<Avatar src='https://bad.url.to.avatar/avatar.png' size='xl'>
+    <RoundIcon size='xl' color='nice10'>
+        B
+    </RoundIcon>
+</Avatar>;
+```
diff --git a/src/Badge/README.md b/src/Badge/README.md
@@ -0,0 +1,55 @@
+# Badge
+
+Для статусов и лейблов. Актуально для таблиц и списков.
+
+## Импорт
+
+```
+import { Badge } from 'vienna-ui';
+```
+
+## Свойства / Props
+
+Свойства наследуются от [HTMLProps<HTMLAnchorElement>](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts#L1342)
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| color | "paris10" \| "paris30" \| "miami10" \| "miami30" \| "dubai10" \| "dubai30" \| "nice10" \| "nice30" \| "seattle05" \| "seattle10" \| undefined | false |
+| size | "s" \| "m" \| "l" \| undefined | 'm' | Доступные размеры |
+| grid | 0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12 \| undefined |  |
+| forwardedRef | any |  | Ссылка на DOM элемент |
+| clickable | boolean \| undefined | false | Возможность нажатия на компонент |
+
+## Использование
+
+```
+<Badge>Badge text</Badge>
+```
+
+## Использование с иконкой
+
+Badge может быть использован с различным контентом, например, с иконкой.
+
+```jsx
+<Badge color='paris10'>
+    <Clip size='s' /> Badge text
+</Badge>
+```
+
+## Размеры
+
+##### Свойство `size`
+
+Доступные размеры: `s`, `m` (по умолчанию) и `l`
+
+## Ограничение по длине
+
+##### Свойство `grid`
+
+Свойство `grid` можно использовать для задания максимальной ширины. Например, при использовании в ячейке таблицы.
+
+```jsx
+<Badge size='s' grid={1}>
+    Badge text
+</Badge>
+```