@snack-uikit/alert 0.12.0 → 0.12.1

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.12.1 (2024-07-29)
+
+
+### Bug Fixes
+
+* **FF-00:** change icon size for size='s' ([17923a9](https://github.com/cloud-ru-tech/snack-uikit/commit/17923a99dbadb946c3ba0e67c2415fc82a4fb3d0))
+
+
+
+
+
 # 0.12.0 (2024-07-24)
 
 

package/dist/components/Alert/Alert.js

@@ -27,5 +27,5 @@ export function Alert(_a) {
     var { icon = true, title, truncate, link, description, onClose, appearance = APPEARANCE.Neutral, className, actions, outline, size = 'm' } = _a, rest = __rest(_a, ["icon", "title", "truncate", "link", "description", "onClose", "appearance", "className", "actions", "outline", "size"]);
     return (_jsxs("div", Object.assign({ className: cn(styles.alert, {
             [styles.alertOutline]: outline,
-        }, className) }, extractSupportProps(rest), { "data-color": APPEARANCE_TO_COLOR_MAP[appearance], "data-size": size, children: [_jsxs("div", { className: styles.body, "data-size": size, children: [icon && (_jsx("div", { className: styles.icon, "data-color": APPEARANCE_TO_COLOR_MAP[appearance], "data-test-id": 'alert__icon', "data-size": size, children: getIcon(appearance) })), _jsxs("div", { className: styles.contentLayout, children: [title && (_jsx(TruncateString, { text: title, maxLines: (_b = truncate === null || truncate === void 0 ? void 0 : truncate.title) !== null && _b !== void 0 ? _b : 1, className: styles.title, "data-test-id": 'alert__title', "data-size": size })), _jsx("span", { "data-test-id": 'alert__description', className: styles.description, "data-size": size, children: description }), link && (_jsx("span", { children: _jsx(Link, Object.assign({ external: true }, link, { appearance: APPEARANCE_TO_COLOR_MAP[appearance], textMode: 'default', size: size, "data-test-id": 'alert__link' })) }))] }), onClose && (_jsx(AlertButton, { onClick: onClose, appearance: APPEARANCE_TO_COLOR_MAP[appearance], icon: _jsx(CrossSVG, {}), variant: 'simple', dataTestId: 'alert__close-button' }))] }), actions && (_jsxs("div", { className: styles.footer, "data-size": size, children: [actions.primary && (_jsx(AlertButton, Object.assign({}, actions.primary, { appearance: APPEARANCE_TO_COLOR_MAP[appearance], variant: 'simple', size: size }))), (actions === null || actions === void 0 ? void 0 : actions.secondary) && (_jsx(AlertButton, Object.assign({}, actions.secondary, { appearance: APPEARANCE_TO_COLOR_MAP[appearance], variant: 'simple', size: size })))] }))] })));
+        }, className) }, extractSupportProps(rest), { "data-color": APPEARANCE_TO_COLOR_MAP[appearance], "data-size": size, children: [_jsxs("div", { className: styles.body, "data-size": size, children: [icon && (_jsx("div", { className: styles.icon, "data-color": APPEARANCE_TO_COLOR_MAP[appearance], "data-test-id": 'alert__icon', "data-size": size, children: getIcon(appearance, size === 's' ? 16 : 24) })), _jsxs("div", { className: styles.contentLayout, children: [title && (_jsx(TruncateString, { text: title, maxLines: (_b = truncate === null || truncate === void 0 ? void 0 : truncate.title) !== null && _b !== void 0 ? _b : 1, className: styles.title, "data-test-id": 'alert__title', "data-size": size })), _jsx("span", { "data-test-id": 'alert__description', className: styles.description, "data-size": size, children: description }), link && (_jsx("span", { children: _jsx(Link, Object.assign({ external: true }, link, { appearance: APPEARANCE_TO_COLOR_MAP[appearance], textMode: 'default', size: size, "data-test-id": 'alert__link' })) }))] }), onClose && (_jsx(AlertButton, { onClick: onClose, appearance: APPEARANCE_TO_COLOR_MAP[appearance], icon: _jsx(CrossSVG, {}), variant: 'simple', dataTestId: 'alert__close-button' }))] }), actions && (_jsxs("div", { className: styles.footer, "data-size": size, children: [actions.primary && (_jsx(AlertButton, Object.assign({}, actions.primary, { appearance: APPEARANCE_TO_COLOR_MAP[appearance], variant: 'simple', size: size }))), (actions === null || actions === void 0 ? void 0 : actions.secondary) && (_jsx(AlertButton, Object.assign({}, actions.secondary, { appearance: APPEARANCE_TO_COLOR_MAP[appearance], variant: 'simple', size: size })))] }))] })));
 }

package/dist/components/AlertTop/AlertTop.js

@@ -26,5 +26,5 @@ import styles from './styles.module.css';
 export function AlertTop(_a) {
     var _b;
     var { icon = true, title, description, link, onClose, truncate, appearance = APPEARANCE.Neutral, action, className } = _a, rest = __rest(_a, ["icon", "title", "description", "link", "onClose", "truncate", "appearance", "action", "className"]);
-    return (_jsxs("div", Object.assign({ className: cn(styles.alertTop, className) }, extractSupportProps(rest), { "data-color": APPEARANCE_TO_COLOR_MAP_INVERT[appearance], children: [_jsxs("div", { className: styles.contentWrapper, children: [icon && (_jsx("div", { className: styles.icon, "data-color": APPEARANCE_TO_COLOR_MAP_INVERT[appearance], "data-test-id": 'alert-top__icon', children: getIcon(appearance) })), _jsxs("div", { className: styles.contentLayout, children: [_jsxs("div", { className: styles.textLayout, children: [title && (_jsx("div", { className: styles.title, "data-color": APPEARANCE_TO_COLOR_MAP_INVERT[appearance], "data-test-id": 'alert-top__title', children: _jsx(TruncateString, { text: title, maxLines: (_b = truncate === null || truncate === void 0 ? void 0 : truncate.title) !== null && _b !== void 0 ? _b : 1 }) })), _jsx("span", { className: styles.description, "data-color": APPEARANCE_TO_COLOR_MAP_INVERT[appearance], "data-test-id": 'alert-top__description', children: description })] }), link && (_jsx("span", { children: _jsx(Link, Object.assign({ external: true }, link, { appearance: APPEARANCE_TO_COLOR_MAP[appearance], textMode: 'on-accent', size: 'm', "data-test-id": 'alert-top__link' })) }))] })] }), _jsxs("div", { className: styles.actions, children: [action && _jsx(AlertButton, Object.assign({}, action, { appearance: APPEARANCE_TO_COLOR_MAP_INVERT[appearance], variant: 'tonal' })), onClose && (_jsx(AlertButton, { onClick: onClose, appearance: APPEARANCE_TO_COLOR_MAP_INVERT[appearance], icon: _jsx(CrossSVG, {}), variant: 'tonal', dataTestId: 'alert-top__close-button' }))] })] })));
+    return (_jsxs("div", Object.assign({ className: cn(styles.alertTop, className) }, extractSupportProps(rest), { "data-color": APPEARANCE_TO_COLOR_MAP_INVERT[appearance], children: [_jsxs("div", { className: styles.contentWrapper, children: [icon && (_jsx("div", { className: styles.icon, "data-color": APPEARANCE_TO_COLOR_MAP_INVERT[appearance], "data-test-id": 'alert-top__icon', children: getIcon(appearance, 24) })), _jsxs("div", { className: styles.contentLayout, children: [_jsxs("div", { className: styles.textLayout, children: [title && (_jsx("div", { className: styles.title, "data-color": APPEARANCE_TO_COLOR_MAP_INVERT[appearance], "data-test-id": 'alert-top__title', children: _jsx(TruncateString, { text: title, maxLines: (_b = truncate === null || truncate === void 0 ? void 0 : truncate.title) !== null && _b !== void 0 ? _b : 1 }) })), _jsx("span", { className: styles.description, "data-color": APPEARANCE_TO_COLOR_MAP_INVERT[appearance], "data-test-id": 'alert-top__description', children: description })] }), link && (_jsx("span", { children: _jsx(Link, Object.assign({ external: true }, link, { appearance: APPEARANCE_TO_COLOR_MAP[appearance], textMode: 'on-accent', size: 'm', "data-test-id": 'alert-top__link' })) }))] })] }), _jsxs("div", { className: styles.actions, children: [action && _jsx(AlertButton, Object.assign({}, action, { appearance: APPEARANCE_TO_COLOR_MAP_INVERT[appearance], variant: 'tonal' })), onClose && (_jsx(AlertButton, { onClick: onClose, appearance: APPEARANCE_TO_COLOR_MAP_INVERT[appearance], icon: _jsx(CrossSVG, {}), variant: 'tonal', dataTestId: 'alert-top__close-button' }))] })] })));
 }

package/dist/utils.d.ts

@@ -1,2 +1,2 @@
 import { Appearance } from './types';
-export declare function getIcon(appearance: Appearance): import("react/jsx-runtime").JSX.Element;
+export declare function getIcon(appearance: Appearance, size: number): import("react/jsx-runtime").JSX.Element;

package/dist/utils.js

@@ -1,17 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { AlarmFilledSVG, CheckFilledSVG, CrossFilledSVG, InfoFilledSVG } from '@snack-uikit/icons';
 import { APPEARANCE } from './constants';
-export function getIcon(appearance) {
+export function getIcon(appearance, size) {
     switch (appearance) {
         case APPEARANCE.Success:
-            return _jsx(CheckFilledSVG, {});
+            return _jsx(CheckFilledSVG, { size: size });
         case APPEARANCE.Error:
-            return _jsx(CrossFilledSVG, {});
+            return _jsx(CrossFilledSVG, { size: size });
         case APPEARANCE.Warning:
-            return _jsx(AlarmFilledSVG, {});
+            return _jsx(AlarmFilledSVG, { size: size });
         case APPEARANCE.Primary:
         case APPEARANCE.Neutral:
         default:
-            return _jsx(InfoFilledSVG, {});
+            return _jsx(InfoFilledSVG, { size: size });
     }
 }

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Alert",
-  "version": "0.12.0",
+  "version": "0.12.1",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -39,5 +39,5 @@
     "@snack-uikit/utils": "3.3.0",
     "classnames": "2.3.2"
   },
-  "gitHead": "e1962e152dbb02534dc447d16bf67ad0f4e19e9d"
+  "gitHead": "d1b1ac720c6ea300a6c8cc3b4765609899200af7"
 }

package/src/components/Alert/Alert.tsx

@@ -84,7 +84,7 @@ export function Alert({
             data-test-id='alert__icon'
             data-size={size}
           >
-            {getIcon(appearance)}
+            {getIcon(appearance, size === 's' ? 16 : 24)}
           </div>
         )}
 

package/src/components/AlertTop/AlertTop.tsx

@@ -68,7 +68,7 @@ export function AlertTop({
             data-color={APPEARANCE_TO_COLOR_MAP_INVERT[appearance]}
             data-test-id='alert-top__icon'
           >
-            {getIcon(appearance)}
+            {getIcon(appearance, 24)}
           </div>
         )}
 

package/src/utils.tsx

@@ -3,17 +3,17 @@ import { AlarmFilledSVG, CheckFilledSVG, CrossFilledSVG, InfoFilledSVG } from '@
 import { APPEARANCE } from './constants';
 import { Appearance } from './types';
 
-export function getIcon(appearance: Appearance) {
+export function getIcon(appearance: Appearance, size: number) {
   switch (appearance) {
     case APPEARANCE.Success:
-      return <CheckFilledSVG />;
+      return <CheckFilledSVG size={size} />;
     case APPEARANCE.Error:
-      return <CrossFilledSVG />;
+      return <CrossFilledSVG size={size} />;
     case APPEARANCE.Warning:
-      return <AlarmFilledSVG />;
+      return <AlarmFilledSVG size={size} />;
     case APPEARANCE.Primary:
     case APPEARANCE.Neutral:
     default:
-      return <InfoFilledSVG />;
+      return <InfoFilledSVG size={size} />;
   }
 }