feat(Informer): add _view_outline

closes #3511
consta-design-system · Oct 24, 2024 · 91fffa7 · 91fffa7
1 parent d1f87de
commit 91fffa7
Show file tree

Hide file tree

Showing 5 changed files with 89 additions and 67 deletions.
diff --git a/src/components/Informer/Informer.css b/src/components/Informer/Informer.css
@@ -1,28 +1,33 @@
 .Informer {
-  padding: var(--space-s) var(--space-m);
   color: var(--color-typo-primary);
+  background-color: var(--informer-bg);
   border-radius: var(--control-radius);
 
-  &_withIcon {
-    display: flex;
-    flex-wrap: nowrap;
-  }
-
   &_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-bg-color);
     }
   }
 
   &-Icon {
-    margin-right: var(--space-s);
-    transform: translateY(var(--space-3xs));
-    flex-shrink: 0;
+    flex: 1;
+    color: var(--informer-icon-color, inherit);
   }
 }
diff --git a/src/components/Informer/Informer.tsx b/src/components/Informer/Informer.tsx
@@ -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];
 
@@ -48,16 +49,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)
@@ -69,19 +69,28 @@ 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-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

diff --git a/src/components/Informer/__stand__/Informer.dev.stand.mdx b/src/components/Informer/__stand__/Informer.dev.stand.mdx
@@ -1,33 +1,36 @@
 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`.
 
-За тип сообщения отвечает свойство `type`.
+<MdxTabs>
 
 ```tsx
 <Informer
@@ -56,7 +59,9 @@ import { Informer } from '@consta/uikit/Informer';
 />
 ```
 
-<InformerExampleType />
+<InformerExampleStatus />
+
+</MdxTabs>
 
 ## Текст сообщения
 
@@ -67,27 +72,31 @@ import { Informer } from '@consta/uikit/Informer';
 
 ## Внешний вид
 
-### Тип информера
+### Вид информера
 
-За тип информера отвечает свойство `view`. В дизайн-системе есть информеры двух типов:
+За вид информера отвечает свойство `view`. В дизайн-системе есть информеры двух типов:
 с заливкой `filled` или без неё `bordered`.
 
-```tsx
-<Informer label="Ваше сообщение отправлено" view="filled" status="success" />
-```
+<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).
 
 Не стоит добавлять иконку в информер без заливки.
 
+<MdxTabs>
+
 ```tsx
 <Informer
   label="Сообщение отправлено"
@@ -99,10 +108,14 @@ import { Informer } from '@consta/uikit/Informer';
 
 <InformerExampleIcon />
 
+</MdxTabs>
+
 ### Размер
 
 За размер сообщения отвечает свойство `size`. Варианты: `m`, `s`, по умолчанию — `m`.
 
+<MdxTabs>
+
 ```tsx
 <Informer
   status="system"
@@ -122,6 +135,8 @@ import { Informer } from '@consta/uikit/Informer';
 
 <InformerExampleSize />
 
+</MdxTabs>
+
 ## Импорт
 
 ```tsx
@@ -130,30 +145,14 @@ import { Informer } from '@consta/uikit/Informer';
 
 ## Свойства
 
-| Свойство                     | Тип или варианты значения                       | По умолчанию | Описание                           |
-| ---------------------------- | ----------------------------------------------- | ------------ | ---------------------------------- |
-| [`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-класс           |
diff --git a/...formerExampleType/InformerExampleType.tsx → ...erExampleStatus/InformerExampleStatus.tsx b/...formerExampleType/InformerExampleType.tsx → ...erExampleStatus/InformerExampleStatus.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 
 import { Informer } from '../../../Informer';
 
-export const InformerExampleType = () => (
+export const InformerExampleStatus = () => (
   <Example col={{ 1: 0, 2: 720 }}>
     <Informer
       status="success"

diff --git a/src/components/Informer/__stand__/examples/InformerExampleView/InformerExampleView.tsx b/src/components/Informer/__stand__/examples/InformerExampleView/InformerExampleView.tsx
@@ -3,7 +3,6 @@ import React from 'react';
 
 import { cnMixSpace } from '##/mixs/MixSpace';
 
-import { cnDocsExample } from '../../../../../uiKit/components/DocsExample/DocsExample';
 import { Informer } from '../../../Informer';
 
 export function InformerExampleView() {
@@ -16,22 +15,32 @@ export function InformerExampleView() {
           status="success"
           className={cnMixSpace({ mB: 'm' })}
         />
-        <p className={cnDocsExample('Caption')}>
+        <p>
           Такой лучше использовать, когда сообщение — часть контента и находится
           на одном уровне с ним.
         </p>
       </>
       <>
         <Informer
           label="Всё заполнено"
-          view="bordered"
+          view="outline"
           status="success"
           className={cnMixSpace({ mB: 'm' })}
         />
-        <p className={cnDocsExample('Caption')}>
-          А такой — когда сообщение должно быть на уровень выше контента.
+        <p>
+          Такой лучше использовать, когда сообщение — часть контента и находится
+          на одном уровне с ним.
         </p>
       </>
+      <>
+        <Informer
+          label="Всё заполнено"
+          view="bordered"
+          status="success"
+          className={cnMixSpace({ mB: 'm' })}
+        />
+        <p>А такой — когда сообщение должно быть на уровень выше контента.</p>
+      </>
     </Example>
   );
 }