feat(Informer): add _view_outline

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

Hide file tree

Showing 2 changed files with 25 additions and 11 deletions.
diff --git a/src/components/Informer/Informer.css b/src/components/Informer/Informer.css
@@ -1,6 +1,6 @@
 .Informer {
-  padding: var(--space-s) var(--space-m);
   color: var(--color-typo-primary);
+  background-color: var(--informer-bg);
   border-radius: var(--control-radius);
 
   &_withIcon {
@@ -10,18 +10,30 @@
 
   &_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);
+    color: var(--informer-icon-color, inherit);
     transform: translateY(var(--space-3xs));
     flex-shrink: 0;
   }

diff --git a/src/components/Informer/Informer.tsx b/src/components/Informer/Informer.tsx
@@ -11,7 +11,7 @@ import { PropsWithHTMLAttributes } from '../../utils/types/PropsWithHTMLAttribut
 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];
 
@@ -55,9 +55,10 @@ export const Informer = React.forwardRef<HTMLDivElement, InformerProps>(
       style,
       ...otherProps
     } = props;
-    const Icon = icon;
-    const withIcon = !!icon;
     const { themeClassNames } = useTheme();
+
+    const Icon = icon;
+
     const className =
       status !== 'system' && view === 'filled'
         ? classnames(props.className, themeClassNames.color.accent)
@@ -69,15 +70,16 @@ export const Informer = React.forwardRef<HTMLDivElement, InformerProps>(
         className={cnInformer(
           {
             view,
-            withIcon,
+            withIcon: !!icon,
           },
           [className, cnMixSpace({ p: size })],
         )}
         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}
       >