@alfalab/core-components-badge - npm Package Compare versions

Comparing version 5.0.2 to 5.1.0

Component.d.ts

 /// <reference types="react" />
 import React from 'react';
+type BackgroundColorType = "accent" | "info" | "attention-muted" | "positive-muted" | "negative-muted" | "primary" | "primary-inverted" | "secondary" | "secondary-inverted" | "tertiary" | "tertiary-inverted" | "quaternary" | "quaternary-inverted" | "specialbg-component" | "specialbg-component-inverted" | "specialbg-primary-grouped" | "specialbg-secondary-grouped" | "specialbg-tertiary-grouped" | "specialbg-secondary-transparent" | "specialbg-secondary-transparent-inverted" | "specialbg-tertiary-transparent" | "specialbg-tertiary-transparent-inverted";
+type GraphicColorType = "accent" | "link" | "attention" | "positive" | "negative" | "primary" | "primary-inverted" | "secondary" | "secondary-inverted" | "tertiary" | "tertiary-inverted" | "quaternary" | "quaternary-inverted" | "static-light" | "static-accent" | "static-dark";
+type IconColorType = Extract<GraphicColorType, 'positive' | 'attention' | 'link' | 'negative' | 'tertiary' | 'secondary' | 'primary'>;
 type BadgeProps = {
@@ -34,6 +37,14 @@ /**
     /**
-     * Цветовое оформление иконки
+     * Цветовое оформление бейджа при view='count'
      */
-    iconColor?: 'positive' | 'attention' | 'link' | 'negative' | 'tertiary' | 'secondary' | 'primary';
+    color?: Extract<BackgroundColorType, 'accent' | 'primary' | 'specialbg-secondary-transparent'>;
     /**
+     * Цветовое оформление бейджа при view='icon'
+     */
+    iconColor?: IconColorType;
+    /**
+     * Цвет подложки под иконкой
+     */
+    iconUnderlayColor?: Extract<GraphicColorType, 'primary' | 'static-light'>;
+    /**
      * Идентификатор для систем автоматизированного тестирования
@@ -43,3 +54,3 @@ */
 };
-declare const Badge: ({ className, size, view, visibleIconOutline, visibleColorOutline, content, height, iconColor, dataTestId, }: BadgeProps) => JSX.Element;
-export { BadgeProps, Badge };
+declare const Badge: ({ className, size, view, visibleIconOutline, visibleColorOutline, content, height, iconColor, color, iconUnderlayColor, dataTestId, }: BadgeProps) => JSX.Element;
+export { IconColorType, BadgeProps, Badge };

Component.js

@@ -14,3 +14,3 @@ 'use strict';
 
-var styles = {"wrapper":"badge__wrapper_914m3","s":"badge__s_914m3","m":"badge__m_914m3","xl":"badge__xl_914m3","component":"badge__component_914m3","count":"badge__count_914m3","outlineCount":"badge__outlineCount_914m3","l":"badge__l_914m3","heightS":"badge__heightS_914m3","heightM":"badge__heightM_914m3","heightL":"badge__heightL_914m3","heightXL":"badge__heightXL_914m3","heightXXL":"badge__heightXXL_914m3","icon":"badge__icon_914m3","positive":"badge__positive_914m3","attention":"badge__attention_914m3","negative":"badge__negative_914m3","link":"badge__link_914m3","tertiary":"badge__tertiary_914m3","secondary":"badge__secondary_914m3","primary":"badge__primary_914m3","outline":"badge__outline_914m3","outlineColor":"badge__outlineColor_914m3","dot":"badge__dot_914m3","isHidden":"badge__isHidden_914m3"};
+var styles = {"wrapper":"badge__wrapper_hjr2o","s":"badge__s_hjr2o","m":"badge__m_hjr2o","xl":"badge__xl_hjr2o","component":"badge__component_hjr2o","background-accent":"badge__background-accent_hjr2o","background-specialbg-secondary-transparent":"badge__background-specialbg-secondary-transparent_hjr2o","background-primary":"badge__background-primary_hjr2o","count":"badge__count_hjr2o","outlineCount":"badge__outlineCount_hjr2o","l":"badge__l_hjr2o","heightS":"badge__heightS_hjr2o","heightM":"badge__heightM_hjr2o","heightL":"badge__heightL_hjr2o","heightXL":"badge__heightXL_hjr2o","heightXXL":"badge__heightXXL_hjr2o","icon":"badge__icon_hjr2o","positive":"badge__positive_hjr2o","attention":"badge__attention_hjr2o","negative":"badge__negative_hjr2o","link":"badge__link_hjr2o","tertiary":"badge__tertiary_hjr2o","secondary":"badge__secondary_hjr2o","primary":"badge__primary_hjr2o","graphic-static-light":"badge__graphic-static-light_hjr2o","graphic-primary":"badge__graphic-primary_hjr2o","outline":"badge__outline_hjr2o","outlineColor":"badge__outlineColor_hjr2o","dot":"badge__dot_hjr2o","isHidden":"badge__isHidden_hjr2o"};
 require('./index.css')
@@ -21,3 +21,3 @@
     var _b, _c;
-    var className = _a.className, _d = _a.size, size = _d === void 0 ? 'm' : _d, view = _a.view, _e = _a.visibleIconOutline, visibleIconOutline = _e === void 0 ? false : _e, _f = _a.visibleColorOutline, visibleColorOutline = _f === void 0 ? false : _f, content = _a.content, _g = _a.height, height = _g === void 0 ? 16 : _g, iconColor = _a.iconColor, dataTestId = _a.dataTestId;
+    var className = _a.className, _d = _a.size, size = _d === void 0 ? 'm' : _d, view = _a.view, _e = _a.visibleIconOutline, visibleIconOutline = _e === void 0 ? false : _e, _f = _a.visibleColorOutline, visibleColorOutline = _f === void 0 ? false : _f, content = _a.content, _g = _a.height, height = _g === void 0 ? 16 : _g, iconColor = _a.iconColor, _h = _a.color, color = _h === void 0 ? 'accent' : _h, _j = _a.iconUnderlayColor, iconUnderlayColor = _j === void 0 ? 'static-light' : _j, dataTestId = _a.dataTestId;
     var isCountView = view === 'count';
@@ -33,7 +33,7 @@ var isHidden = isCountView && typeof content === 'number' && content <= 0;
             _b[styles[size]] = !isCountView,
-            _b[styles.outline] = visibleIconOutline,
+            _b[styles.outline] = !isCountView && visibleIconOutline,
             _b[styles.outlineColor] = !isCountView && visibleColorOutline,
             _b[styles.count] = isCountView,
             _b), className), "data-test-id": dataTestId },
-        React__default.default.createElement("div", { className: cn__default.default(styles.component, styles[size], styles[view], iconColor && styles[iconColor], isHeightS && styles.heightS, isHeightM && styles.heightM, isHeightL && styles.heightL, isHeightXL && styles.heightXL, isHeightXXL && styles.heightXXL, (_c = {},
+        React__default.default.createElement("div", { className: cn__default.default(styles.component, styles[size], styles[view], styles["background-".concat(color)], styles["graphic-".concat(iconUnderlayColor)], iconColor && styles[iconColor], isHeightS && styles.heightS, isHeightM && styles.heightM, isHeightL && styles.heightL, isHeightXL && styles.heightXL, isHeightXXL && styles.heightXXL, (_c = {},
                 _c[styles.isHidden] = isHidden,
@@ -40,0 +40,0 @@ _c[styles.dot] = !content,

cssm/Component.d.ts

 /// <reference types="react" />
 import React from 'react';
+type BackgroundColorType = "accent" | "info" | "attention-muted" | "positive-muted" | "negative-muted" | "primary" | "primary-inverted" | "secondary" | "secondary-inverted" | "tertiary" | "tertiary-inverted" | "quaternary" | "quaternary-inverted" | "specialbg-component" | "specialbg-component-inverted" | "specialbg-primary-grouped" | "specialbg-secondary-grouped" | "specialbg-tertiary-grouped" | "specialbg-secondary-transparent" | "specialbg-secondary-transparent-inverted" | "specialbg-tertiary-transparent" | "specialbg-tertiary-transparent-inverted";
+type GraphicColorType = "accent" | "link" | "attention" | "positive" | "negative" | "primary" | "primary-inverted" | "secondary" | "secondary-inverted" | "tertiary" | "tertiary-inverted" | "quaternary" | "quaternary-inverted" | "static-light" | "static-accent" | "static-dark";
+type IconColorType = Extract<GraphicColorType, 'positive' | 'attention' | 'link' | 'negative' | 'tertiary' | 'secondary' | 'primary'>;
 type BadgeProps = {
@@ -34,6 +37,14 @@ /**
     /**
-     * Цветовое оформление иконки
+     * Цветовое оформление бейджа при view='count'
      */
-    iconColor?: 'positive' | 'attention' | 'link' | 'negative' | 'tertiary' | 'secondary' | 'primary';
+    color?: Extract<BackgroundColorType, 'accent' | 'primary' | 'specialbg-secondary-transparent'>;
     /**
+     * Цветовое оформление бейджа при view='icon'
+     */
+    iconColor?: IconColorType;
+    /**
+     * Цвет подложки под иконкой
+     */
+    iconUnderlayColor?: Extract<GraphicColorType, 'primary' | 'static-light'>;
+    /**
      * Идентификатор для систем автоматизированного тестирования
@@ -43,3 +54,3 @@ */
 };
-declare const Badge: ({ className, size, view, visibleIconOutline, visibleColorOutline, content, height, iconColor, dataTestId, }: BadgeProps) => JSX.Element;
-export { BadgeProps, Badge };
+declare const Badge: ({ className, size, view, visibleIconOutline, visibleColorOutline, content, height, iconColor, color, iconUnderlayColor, dataTestId, }: BadgeProps) => JSX.Element;
+export { IconColorType, BadgeProps, Badge };

cssm/Component.js

@@ -19,3 +19,3 @@ 'use strict';
     var _b, _c;
-    var className = _a.className, _d = _a.size, size = _d === void 0 ? 'm' : _d, view = _a.view, _e = _a.visibleIconOutline, visibleIconOutline = _e === void 0 ? false : _e, _f = _a.visibleColorOutline, visibleColorOutline = _f === void 0 ? false : _f, content = _a.content, _g = _a.height, height = _g === void 0 ? 16 : _g, iconColor = _a.iconColor, dataTestId = _a.dataTestId;
+    var className = _a.className, _d = _a.size, size = _d === void 0 ? 'm' : _d, view = _a.view, _e = _a.visibleIconOutline, visibleIconOutline = _e === void 0 ? false : _e, _f = _a.visibleColorOutline, visibleColorOutline = _f === void 0 ? false : _f, content = _a.content, _g = _a.height, height = _g === void 0 ? 16 : _g, iconColor = _a.iconColor, _h = _a.color, color = _h === void 0 ? 'accent' : _h, _j = _a.iconUnderlayColor, iconUnderlayColor = _j === void 0 ? 'static-light' : _j, dataTestId = _a.dataTestId;
     var isCountView = view === 'count';
@@ -31,7 +31,7 @@ var isHidden = isCountView && typeof content === 'number' && content <= 0;
             _b[styles__default.default[size]] = !isCountView,
-            _b[styles__default.default.outline] = visibleIconOutline,
+            _b[styles__default.default.outline] = !isCountView && visibleIconOutline,
             _b[styles__default.default.outlineColor] = !isCountView && visibleColorOutline,
             _b[styles__default.default.count] = isCountView,
             _b), className), "data-test-id": dataTestId },
-        React__default.default.createElement("div", { className: cn__default.default(styles__default.default.component, styles__default.default[size], styles__default.default[view], iconColor && styles__default.default[iconColor], isHeightS && styles__default.default.heightS, isHeightM && styles__default.default.heightM, isHeightL && styles__default.default.heightL, isHeightXL && styles__default.default.heightXL, isHeightXXL && styles__default.default.heightXXL, (_c = {},
+        React__default.default.createElement("div", { className: cn__default.default(styles__default.default.component, styles__default.default[size], styles__default.default[view], styles__default.default["background-".concat(color)], styles__default.default["graphic-".concat(iconUnderlayColor)], iconColor && styles__default.default[iconColor], isHeightS && styles__default.default.heightS, isHeightM && styles__default.default.heightM, isHeightL && styles__default.default.heightL, isHeightXL && styles__default.default.heightXL, isHeightXXL && styles__default.default.heightXXL, (_c = {},
                 _c[styles__default.default.isHidden] = isHidden,
@@ -38,0 +38,0 @@ _c[styles__default.default.dot] = !content,

esm/Component.d.ts

 /// <reference types="react" />
 import React from 'react';
+type BackgroundColorType = "accent" | "info" | "attention-muted" | "positive-muted" | "negative-muted" | "primary" | "primary-inverted" | "secondary" | "secondary-inverted" | "tertiary" | "tertiary-inverted" | "quaternary" | "quaternary-inverted" | "specialbg-component" | "specialbg-component-inverted" | "specialbg-primary-grouped" | "specialbg-secondary-grouped" | "specialbg-tertiary-grouped" | "specialbg-secondary-transparent" | "specialbg-secondary-transparent-inverted" | "specialbg-tertiary-transparent" | "specialbg-tertiary-transparent-inverted";
+type GraphicColorType = "accent" | "link" | "attention" | "positive" | "negative" | "primary" | "primary-inverted" | "secondary" | "secondary-inverted" | "tertiary" | "tertiary-inverted" | "quaternary" | "quaternary-inverted" | "static-light" | "static-accent" | "static-dark";
+type IconColorType = Extract<GraphicColorType, 'positive' | 'attention' | 'link' | 'negative' | 'tertiary' | 'secondary' | 'primary'>;
 type BadgeProps = {
@@ -34,6 +37,14 @@ /**
     /**
-     * Цветовое оформление иконки
+     * Цветовое оформление бейджа при view='count'
      */
-    iconColor?: 'positive' | 'attention' | 'link' | 'negative' | 'tertiary' | 'secondary' | 'primary';
+    color?: Extract<BackgroundColorType, 'accent' | 'primary' | 'specialbg-secondary-transparent'>;
     /**
+     * Цветовое оформление бейджа при view='icon'
+     */
+    iconColor?: IconColorType;
+    /**
+     * Цвет подложки под иконкой
+     */
+    iconUnderlayColor?: Extract<GraphicColorType, 'primary' | 'static-light'>;
+    /**
      * Идентификатор для систем автоматизированного тестирования
@@ -43,3 +54,3 @@ */
 };
-declare const Badge: ({ className, size, view, visibleIconOutline, visibleColorOutline, content, height, iconColor, dataTestId, }: BadgeProps) => JSX.Element;
-export { BadgeProps, Badge };
+declare const Badge: ({ className, size, view, visibleIconOutline, visibleColorOutline, content, height, iconColor, color, iconUnderlayColor, dataTestId, }: BadgeProps) => JSX.Element;
+export { IconColorType, BadgeProps, Badge };

esm/Component.js

@@ -5,3 +5,3 @@ import { __assign } from 'tslib';
 
-var styles = {"wrapper":"badge__wrapper_914m3","s":"badge__s_914m3","m":"badge__m_914m3","xl":"badge__xl_914m3","component":"badge__component_914m3","count":"badge__count_914m3","outlineCount":"badge__outlineCount_914m3","l":"badge__l_914m3","heightS":"badge__heightS_914m3","heightM":"badge__heightM_914m3","heightL":"badge__heightL_914m3","heightXL":"badge__heightXL_914m3","heightXXL":"badge__heightXXL_914m3","icon":"badge__icon_914m3","positive":"badge__positive_914m3","attention":"badge__attention_914m3","negative":"badge__negative_914m3","link":"badge__link_914m3","tertiary":"badge__tertiary_914m3","secondary":"badge__secondary_914m3","primary":"badge__primary_914m3","outline":"badge__outline_914m3","outlineColor":"badge__outlineColor_914m3","dot":"badge__dot_914m3","isHidden":"badge__isHidden_914m3"};
+var styles = {"wrapper":"badge__wrapper_hjr2o","s":"badge__s_hjr2o","m":"badge__m_hjr2o","xl":"badge__xl_hjr2o","component":"badge__component_hjr2o","background-accent":"badge__background-accent_hjr2o","background-specialbg-secondary-transparent":"badge__background-specialbg-secondary-transparent_hjr2o","background-primary":"badge__background-primary_hjr2o","count":"badge__count_hjr2o","outlineCount":"badge__outlineCount_hjr2o","l":"badge__l_hjr2o","heightS":"badge__heightS_hjr2o","heightM":"badge__heightM_hjr2o","heightL":"badge__heightL_hjr2o","heightXL":"badge__heightXL_hjr2o","heightXXL":"badge__heightXXL_hjr2o","icon":"badge__icon_hjr2o","positive":"badge__positive_hjr2o","attention":"badge__attention_hjr2o","negative":"badge__negative_hjr2o","link":"badge__link_hjr2o","tertiary":"badge__tertiary_hjr2o","secondary":"badge__secondary_hjr2o","primary":"badge__primary_hjr2o","graphic-static-light":"badge__graphic-static-light_hjr2o","graphic-primary":"badge__graphic-primary_hjr2o","outline":"badge__outline_hjr2o","outlineColor":"badge__outlineColor_hjr2o","dot":"badge__dot_hjr2o","isHidden":"badge__isHidden_hjr2o"};
 require('./index.css')
@@ -12,3 +12,3 @@
     var _b, _c;
-    var className = _a.className, _d = _a.size, size = _d === void 0 ? 'm' : _d, view = _a.view, _e = _a.visibleIconOutline, visibleIconOutline = _e === void 0 ? false : _e, _f = _a.visibleColorOutline, visibleColorOutline = _f === void 0 ? false : _f, content = _a.content, _g = _a.height, height = _g === void 0 ? 16 : _g, iconColor = _a.iconColor, dataTestId = _a.dataTestId;
+    var className = _a.className, _d = _a.size, size = _d === void 0 ? 'm' : _d, view = _a.view, _e = _a.visibleIconOutline, visibleIconOutline = _e === void 0 ? false : _e, _f = _a.visibleColorOutline, visibleColorOutline = _f === void 0 ? false : _f, content = _a.content, _g = _a.height, height = _g === void 0 ? 16 : _g, iconColor = _a.iconColor, _h = _a.color, color = _h === void 0 ? 'accent' : _h, _j = _a.iconUnderlayColor, iconUnderlayColor = _j === void 0 ? 'static-light' : _j, dataTestId = _a.dataTestId;
     var isCountView = view === 'count';
@@ -24,7 +24,7 @@ var isHidden = isCountView && typeof content === 'number' && content <= 0;
             _b[styles[size]] = !isCountView,
-            _b[styles.outline] = visibleIconOutline,
+            _b[styles.outline] = !isCountView && visibleIconOutline,
             _b[styles.outlineColor] = !isCountView && visibleColorOutline,
             _b[styles.count] = isCountView,
             _b), className), "data-test-id": dataTestId },
-        React.createElement("div", { className: cn(styles.component, styles[size], styles[view], iconColor && styles[iconColor], isHeightS && styles.heightS, isHeightM && styles.heightM, isHeightL && styles.heightL, isHeightXL && styles.heightXL, isHeightXXL && styles.heightXXL, (_c = {},
+        React.createElement("div", { className: cn(styles.component, styles[size], styles[view], styles["background-".concat(color)], styles["graphic-".concat(iconUnderlayColor)], iconColor && styles[iconColor], isHeightS && styles.heightS, isHeightM && styles.heightM, isHeightL && styles.heightL, isHeightXL && styles.heightXL, isHeightXXL && styles.heightXXL, (_c = {},
                 _c[styles.isHidden] = isHidden,
@@ -31,0 +31,0 @@ _c[styles.dot] = !content,

modern/Component.d.ts

 /// <reference types="react" />
 import React from 'react';
+type BackgroundColorType = "accent" | "info" | "attention-muted" | "positive-muted" | "negative-muted" | "primary" | "primary-inverted" | "secondary" | "secondary-inverted" | "tertiary" | "tertiary-inverted" | "quaternary" | "quaternary-inverted" | "specialbg-component" | "specialbg-component-inverted" | "specialbg-primary-grouped" | "specialbg-secondary-grouped" | "specialbg-tertiary-grouped" | "specialbg-secondary-transparent" | "specialbg-secondary-transparent-inverted" | "specialbg-tertiary-transparent" | "specialbg-tertiary-transparent-inverted";
+type GraphicColorType = "accent" | "link" | "attention" | "positive" | "negative" | "primary" | "primary-inverted" | "secondary" | "secondary-inverted" | "tertiary" | "tertiary-inverted" | "quaternary" | "quaternary-inverted" | "static-light" | "static-accent" | "static-dark";
+type IconColorType = Extract<GraphicColorType, 'positive' | 'attention' | 'link' | 'negative' | 'tertiary' | 'secondary' | 'primary'>;
 type BadgeProps = {
@@ -34,6 +37,14 @@ /**
     /**
-     * Цветовое оформление иконки
+     * Цветовое оформление бейджа при view='count'
      */
-    iconColor?: 'positive' | 'attention' | 'link' | 'negative' | 'tertiary' | 'secondary' | 'primary';
+    color?: Extract<BackgroundColorType, 'accent' | 'primary' | 'specialbg-secondary-transparent'>;
     /**
+     * Цветовое оформление бейджа при view='icon'
+     */
+    iconColor?: IconColorType;
+    /**
+     * Цвет подложки под иконкой
+     */
+    iconUnderlayColor?: Extract<GraphicColorType, 'primary' | 'static-light'>;
+    /**
      * Идентификатор для систем автоматизированного тестирования
@@ -43,3 +54,3 @@ */
 };
-declare const Badge: ({ className, size, view, visibleIconOutline, visibleColorOutline, content, height, iconColor, dataTestId, }: BadgeProps) => JSX.Element;
-export { BadgeProps, Badge };
+declare const Badge: ({ className, size, view, visibleIconOutline, visibleColorOutline, content, height, iconColor, color, iconUnderlayColor, dataTestId, }: BadgeProps) => JSX.Element;
+export { IconColorType, BadgeProps, Badge };

modern/Component.js

 import React from 'react';
 import cn from 'classnames';
 
-const styles = {"wrapper":"badge__wrapper_914m3","s":"badge__s_914m3","m":"badge__m_914m3","xl":"badge__xl_914m3","component":"badge__component_914m3","count":"badge__count_914m3","outlineCount":"badge__outlineCount_914m3","l":"badge__l_914m3","heightS":"badge__heightS_914m3","heightM":"badge__heightM_914m3","heightL":"badge__heightL_914m3","heightXL":"badge__heightXL_914m3","heightXXL":"badge__heightXXL_914m3","icon":"badge__icon_914m3","positive":"badge__positive_914m3","attention":"badge__attention_914m3","negative":"badge__negative_914m3","link":"badge__link_914m3","tertiary":"badge__tertiary_914m3","secondary":"badge__secondary_914m3","primary":"badge__primary_914m3","outline":"badge__outline_914m3","outlineColor":"badge__outlineColor_914m3","dot":"badge__dot_914m3","isHidden":"badge__isHidden_914m3"};
+const styles = {"wrapper":"badge__wrapper_hjr2o","s":"badge__s_hjr2o","m":"badge__m_hjr2o","xl":"badge__xl_hjr2o","component":"badge__component_hjr2o","background-accent":"badge__background-accent_hjr2o","background-specialbg-secondary-transparent":"badge__background-specialbg-secondary-transparent_hjr2o","background-primary":"badge__background-primary_hjr2o","count":"badge__count_hjr2o","outlineCount":"badge__outlineCount_hjr2o","l":"badge__l_hjr2o","heightS":"badge__heightS_hjr2o","heightM":"badge__heightM_hjr2o","heightL":"badge__heightL_hjr2o","heightXL":"badge__heightXL_hjr2o","heightXXL":"badge__heightXXL_hjr2o","icon":"badge__icon_hjr2o","positive":"badge__positive_hjr2o","attention":"badge__attention_hjr2o","negative":"badge__negative_hjr2o","link":"badge__link_hjr2o","tertiary":"badge__tertiary_hjr2o","secondary":"badge__secondary_hjr2o","primary":"badge__primary_hjr2o","graphic-static-light":"badge__graphic-static-light_hjr2o","graphic-primary":"badge__graphic-primary_hjr2o","outline":"badge__outline_hjr2o","outlineColor":"badge__outlineColor_hjr2o","dot":"badge__dot_hjr2o","isHidden":"badge__isHidden_hjr2o"};
 require('./index.css')
 
 // eslint-disable-next-line complexity
-const Badge = ({ className, size = 'm', view, visibleIconOutline = false, visibleColorOutline = false, content, height = 16, iconColor, dataTestId, }) => {
+const Badge = ({ className, size = 'm', view, visibleIconOutline = false, visibleColorOutline = false, content, height = 16, iconColor, color = 'accent', iconUnderlayColor = 'static-light', dataTestId, }) => {
     const isCountView = view === 'count';
@@ -19,7 +19,7 @@ const isHidden = isCountView && typeof content === 'number' && content <= 0;
             [styles[size]]: !isCountView,
-            [styles.outline]: visibleIconOutline,
+            [styles.outline]: !isCountView && visibleIconOutline,
             [styles.outlineColor]: !isCountView && visibleColorOutline,
             [styles.count]: isCountView,
         }, className), "data-test-id": dataTestId },
-        React.createElement("div", { className: cn(styles.component, styles[size], styles[view], iconColor && styles[iconColor], isHeightS && styles.heightS, isHeightM && styles.heightM, isHeightL && styles.heightL, isHeightXL && styles.heightXL, isHeightXXL && styles.heightXXL, {
+        React.createElement("div", { className: cn(styles.component, styles[size], styles[view], styles[`background-${color}`], styles[`graphic-${iconUnderlayColor}`], iconColor && styles[iconColor], isHeightS && styles.heightS, isHeightM && styles.heightM, isHeightL && styles.heightL, isHeightXL && styles.heightXL, isHeightXXL && styles.heightXXL, {
                 [styles.isHidden]: isHidden,
@@ -26,0 +26,0 @@ [styles.dot]: !content,

package.json

 {
     "name": "@alfalab/core-components-badge",
-    "version": "5.0.2",
+    "version": "5.1.0",
     "description": "",
@@ -5,0 +5,0 @@ "keywords": [],

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

58939

increased by20.67%

Lines of code

1263

increased by9.16%

No dependency changes