Skip to content

Commit

Permalink
feat(Informer): add _view_outline (#3791)
Browse files Browse the repository at this point in the history
closes #3511

---------

Co-authored-by: alyonurchick1 <[email protected]>
  • Loading branch information
gizeasy and alyonurchick1 authored Oct 31, 2024
1 parent d1f87de commit 35d82b0
Show file tree
Hide file tree
Showing 8 changed files with 151 additions and 129 deletions.
31 changes: 18 additions & 13 deletions src/components/Informer/Informer.css
Original file line number Diff line number Diff line change
@@ -1,28 +1,33 @@
.Informer {
padding: var(--space-s) var(--space-m);
color: var(--color-typo-primary);
border-radius: var(--control-radius);

&_withIcon {
display: flex;
flex-wrap: nowrap;
}
background-color: var(--informer-bg);
border-radius: var(--space-xs);

&_view {
&_bordered {
background-color: var(--color-bg-default);
border-left: var(--space-xs) solid var(--informer-status-color);
--informer-bg: var(--color-bg-default);
border-left: var(--space-xs) solid var(--informer-bg-color);
box-shadow: var(--shadow-layer);
}

&_filled {
background-color: var(--informer-status-color);
--informer-bg: var(--informer-bg-color);
}

&_outline {
--informer-icon-color: var(--informer-typo-color);
--informer-bg:
color-mix(
in srgb,
var(--informer-bg-color) var(--informer-bg-opacity),
var(--color-bg-default)
);
border: var(--control-border-width) solid var(--informer-border-color);
}
}

&-Icon {
margin-right: var(--space-s);
transform: translateY(var(--space-3xs));
flex-shrink: 0;
flex: 1;
color: var(--informer-icon-color, inherit);
}
}
34 changes: 24 additions & 10 deletions src/components/Informer/Informer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,15 @@ import { classnames } from '@bem-react/classnames';
import { IconComponent } from '@consta/icons/Icon';
import React from 'react';

import { cnMixFlex } from '##/mixs/MixFlex';
import { cnMixSpace } from '##/mixs/MixSpace';

import { cn } from '../../utils/bem';
import { PropsWithHTMLAttributes } from '../../utils/types/PropsWithHTMLAttributes';
import { Text } from '../Text/Text';
import { useTheme } from '../Theme/Theme';

export const informerPropView = ['filled', 'bordered'] as const;
export const informerPropView = ['filled', 'bordered', 'outline'] as const;
export type InformerPropView = typeof informerPropView[number];
export const informerPropViewDefault: InformerPropView = informerPropView[0];

Expand All @@ -20,6 +21,7 @@ export const informerPropStatus = [
'system',
'alert',
'warning',
'normal',
] as const;
export type InformerPropStatus = typeof informerPropStatus[number];
export const informerPropStatusDefault: InformerPropStatus =
Expand Down Expand Up @@ -48,16 +50,15 @@ export const Informer = React.forwardRef<HTMLDivElement, InformerProps>(
view = informerPropViewDefault,
status = informerPropStatusDefault,
size = informerPropSiseDefault,
icon,
icon: Icon,
label,
title,
children,
style,
...otherProps
} = props;
const Icon = icon;
const withIcon = !!icon;
const { themeClassNames } = useTheme();

const className =
status !== 'system' && view === 'filled'
? classnames(props.className, themeClassNames.color.accent)
Expand All @@ -69,19 +70,32 @@ export const Informer = React.forwardRef<HTMLDivElement, InformerProps>(
className={cnInformer(
{
view,
withIcon,
},
[className, cnMixSpace({ p: size })],
[
className,
cnMixSpace({ p: size }),
cnMixFlex({ flex: 'flex', gap: 's' }),
],
)}
style={{
...style,
['--informer-status-color' as string]: status
? `var(--color-bg-${status})`
: undefined,
['--informer-bg-color' as string]: `var(--color-bg-${status})`,
['--informer-border-color' as string]:
status === 'system'
? `var(--color-bg-border)`
: `var(--color-bg-${status})`,
['--informer-typo-color' as string]: `var(--color-typo-${status})`,
['--informer-bg-opacity' as string]:
status === 'system' ? '30%' : '10%',
}}
ref={ref}
>
{Icon && <Icon className={cnInformer('Icon')} size="s" />}
{Icon && (
<Icon
className={cnInformer('Icon', [cnMixSpace({ mT: '3xs' })])}
size="s"
/>
)}
<div className={cnInformer('Content')}>
{title && (
<Text
Expand Down
120 changes: 60 additions & 60 deletions src/components/Informer/__stand__/Informer.dev.stand.mdx
Original file line number Diff line number Diff line change
@@ -1,92 +1,108 @@
import { MdxMenu } from '@consta/stand';

import { InformerExampleView } from './examples/InformerExampleView/InformerExampleView';
import { InformerExampleType } from './examples/InformerExampleType/InformerExampleType';
import { InformerExampleStatus } from './examples/InformerExampleStatus/InformerExampleStatus';
import { InformerExampleIcon } from './examples/InformerExampleIcon/InformerExampleIcon';
import { InformerExampleSuccess } from './examples/InformerExampleText/InformerExampleText';
import { InformerExampleAlert } from './examples/InformerExampleText/InformerExampleText';
import { InformerExampleSize } from './examples/InformerExampleSize/InformerExampleSize';

import { MdxTabs } from '@consta/stand';

```tsx
import { Informer } from '@consta/uikit/Informer';
```

<MdxMenu>

- [Тип сообщения](#тип-сообщения)
- [Статус сообщения](#статус-сообщения)
- [Текст сообщения](#текст-сообщения)
- [Внешний вид](#внешний-вид)
- [Тип информера](#тип-информера)
- [Вид информера](#вид-информера)
- [Иконка](#иконка)
- [Размер](#размер)
- [Импорт](#импорт)
- [Список свойств](#свойства)
- [Пример использования](#пример)

</MdxMenu>

## Тип сообщения
## Статус сообщения

За тип сообщения отвечает свойство `status`. Доступные типы:

- `success` – обозначение успеха операции,
- `warning` – обозначение ошибки операции,
- `alert` – обозначение ограничений, которые блокируют операцию,
- `system` – обозначение важной, но не влияющей на результат операции, информации.

За тип сообщения отвечает свойство `type`.
<MdxTabs>

```tsx
<Informer
status="success"
view="filled"
title="Всё хорошо — это 'success'"
label="Подходит, чтобы рассказать об успешном результате процесса, в котором сейчас находится пользователь"
label="Файл Отпуск_2025 успешно загружен"
/>
<Informer
status="warning"
view="filled"
title="Внимание — это 'alert'"
label="Здесь можно написать важную информацию, которая может понадобиться прямо сейчас. Например, о каких-то ограничениях"
title="Заполните все поля"
label="Поле Конец отпуска не заполнено"
/>
<Informer
status="alert"
view="filled"
title="Не получилось — это 'warning'"
label="Подходит, чтобы рассказать об ошибке в процессе"
title="Не удалось загрузить файл"
label="Максимальный размер файла 20 Гб"
/>
<Informer
status="system"
view="filled"
title="Важно, но не критично — это 'system'"
label="Это просто информация, которую стоит выделить"
title="Файл сохранен"
label="Файл Отпуск_2025 сохранен на Рабочий стол"
/>
```

<InformerExampleType />
<InformerExampleStatus />

</MdxTabs>

## Текст сообщения

Текст состоит из двух частей:
Чтобы задать текст в информере, используйте свойства:

- заголовок задаётся свойством `title`,
- основной текст — свойством `label`.
- `title` – для текста заголовка,
- `label` – для основного текста.

## Внешний вид

### Тип информера
### Вид информера

За тип информера отвечает свойство `view`. В дизайн-системе есть информеры двух типов:
с заливкой `filled` или без неё `bordered`.
Чтобы настроить вид информера, задайте свойство `view` с возможными значениями:

```tsx
<Informer label="Ваше сообщение отправлено" view="filled" status="success" />
```
- `filled` – для вида с заливкой,
- `outline` – для вида без заливки,
- `bordered` – для вида без заливки.

<MdxTabs>

```tsx
<Informer label="Сообщение отправлено" view="filled" status="success" />
<Informer label="Работа выполнена" view="outline" status="success" />
<Informer label="Всё заполнено" view="bordered" status="success" />
```

<InformerExampleView />

</MdxTabs>

### Иконка

С помощью свойства `icon` можно добавить иконку — любую из [библиотеки иконок](##LIBS.LIB/lib:icons).
Чтобы добавить иконку в информер, используйте свойство `icon`. Полный набор иконок смотрите в [библиотеке иконок](##LIBS.LIB/lib:icons).

> Не добавляйте иконку в информер без заливки.
Не стоит добавлять иконку в информер без заливки.
<MdxTabs>

```tsx
<Informer
Expand All @@ -99,16 +115,20 @@ import { Informer } from '@consta/uikit/Informer';

<InformerExampleIcon />

</MdxTabs>

### Размер

За размер сообщения отвечает свойство `size`. Варианты: `m`, `s`, по умолчанию — `m`.
Чтобы настроить размер информера, используйте свойство `size`. Доступные размеры: `m` – по умолчанию и `s`.

<MdxTabs>

```tsx
<Informer
status="system"
view="filled"
title="Размер m"
label="Это обычное сообщение, и размер обычный"
label="Это обычное сообщение с обычным размером"
size="m"
/>
<Informer
Expand All @@ -122,38 +142,18 @@ import { Informer } from '@consta/uikit/Informer';

<InformerExampleSize />

## Импорт

```tsx
import { Informer } from '@consta/uikit/Informer';
```
</MdxTabs>

## Свойства

| Свойство | Тип или варианты значения | По умолчанию | Описание |
| ---------------------------- | ----------------------------------------------- | ------------ | ---------------------------------- |
| [`status?`](#тип-сообщения) | `'system'`, `'alert'`, `'warning'`, '`success'` | `'success'` | Тип сообщения |
| [`title?`](#текст-сообщения) | `string` | - | Заголовок сообщения |
| [`label?`](#текст-сообщения) | `string` | - | Текст сообщения |
| `children?` | `React.ReactNode` | - | Текст сообщения |
| [`view?`](#внешний-вид) | `'filled'`, `'bordered'` | `'filled'` | Тип информера (с заливкой или без) |
| [`icon?`](#внешний-вид) | `IconComponent` | - | Иконка |
| [`size?`](#размер) | `'m'`, `'s'` | `'m'` | Размер |
| `ref?` | `React.Ref<HTMLDivElement>` | - | Ссылка на DOM-элемент компонента |
| `className` | `string` | - | Дополнительный CSS-класс |

## Пример

```ts
import React from 'react';
import { Informer } from '@consta/uikit/Informer';

const App = () => {
return (
<Informer
title="Всё хорошо"
label="Уже сейчас всё хорошо, а будет ещё лучше"
/>
);
};
```
| Свойство | Тип или варианты значения | По умолчанию | Описание |
| ---------------------------- | -------------------------------------------------------------------------------------------------------- | ------------ | ---------------------------------- |
| [`status?`](#тип-сообщения) | `'system'` <code>&#124;</code> `'alert'` <code>&#124;</code> `'warning'` <code>&#124;</code> '`success'` | `'success'` | Тип сообщения |
| [`title?`](#текст-сообщения) | `string` | - | Заголовок сообщения |
| [`label?`](#текст-сообщения) | `string` | - | Текст сообщения |
| `children?` | `React.ReactNode` | - | Текст сообщения |
| [`view?`](#внешний-вид) | `'filled'` <code>&#124;</code> `'bordered'` <code>&#124;</code> `'outline'` | `'filled'` | Тип информера (с заливкой или без) |
| [`icon?`](#внешний-вид) | `IconComponent` | - | Иконка |
| [`size?`](#размер) | `'m'` <code>&#124;</code> `'s'` | `'m'` | Размер |
| `ref?` | `React.Ref<HTMLDivElement>` | - | Ссылка на DOM-элемент компонента |
| `className` | `string` | - | Дополнительный CSS-класс |
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export const InformerExampleSize = () => (
status="system"
view="filled"
title="Размер m"
label="Это обычное сообщение, и размер обычный"
label="Это обычное сообщение с обычным размером"
size="m"
/>
<Informer
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import { Example } from '@consta/stand';
import React from 'react';

import { Informer } from '../../../Informer';

export const InformerExampleStatus = () => (
<Example col={{ 1: 0, 2: 720 }}>
<Informer
status="success"
view="filled"
label="Файл Отпуск_2025 успешно загружен"
/>
<Informer
status="warning"
view="filled"
title="Заполните все поля"
label="Поле Конец отпуска не заполнено"
/>
<Informer
status="alert"
view="filled"
title="Не удалось загрузить файл"
label="Максимальный размер файла 20 Гб"
/>
<Informer
status="system"
view="filled"
title="Файл сохранен"
label="Файл Отпуск_2025 сохранен на Рабочий стол"
/>
</Example>
);
Loading

0 comments on commit 35d82b0

Please sign in to comment.