@snack-uikit/alert 0.11.5 → 0.12.0

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.0 (2024-07-24)
+
+
+### Features
+
+* **PDS-128:** add alert-component updates ([93068f3](https://github.com/cloud-ru-tech/snack-uikit/commit/93068f3b499363d882efd69f6a4b5145b410f3c1))
+
+
+
+
+
 ## 0.11.5 (2024-07-19)
 
 ### Only dependencies have been changed

package/README.md

@@ -60,7 +60,9 @@ import { InfoFilledSVG } from '@snack-uikit/icons';
 | truncate | `{ title?: number; }` | '{ <br>title: 1 }' | Максимальное кол-во строк <br> - `title` - в заголовке |
 | link | `Pick<LinkProps, "text" \| "target" \| "onClick" \| "href" \| "appearance" \| "external">` | - | Cсылка |
 | onClose | `() => void` | - | Колбек закрытия |
-| appearance | enum Appearance: `"neutral"`, `"primary"`, `"error"`, `"warning"`, `"success"` | neutral | Внешний вид |
+| appearance | enum Appearance: `"neutral"`, `"primary"`, `"error"`, `"warning"`, `"success"`, `"info"` | neutral | Внешний вид |
+| outline | `boolean` | - | Внешний бордер |
+| size | enum Size: `"s"`, `"m"` | m | Размер |
 | className | `string` | - | CSS-класс |
 | actions | `{ primary: Omit<AlertButtonProps, "appearance">; secondary?: Omit<AlertButtonProps, "appearance">; }` | - | Кнопки в футере алерта |
 ## AlertTop
@@ -75,7 +77,7 @@ import { InfoFilledSVG } from '@snack-uikit/icons';
 | link | `Pick<LinkProps, "text" \| "target" \| "onClick" \| "href" \| "appearance" \| "external">` | - | Cсылка |
 | action | `AlertButtonProps` | - | Кнопка дополнительного действия |
 | onClose | `() => void` | - | Колбек закрытия |
-| appearance | enum Appearance: `"neutral"`, `"primary"`, `"error"`, `"warning"`, `"success"` | neutral | Внешний вид |
+| appearance | enum Appearance: `"neutral"`, `"primary"`, `"error"`, `"warning"`, `"success"`, `"info"` | neutral | Внешний вид |
 | className | `string` | - | CSS-класс |
 
 

package/dist/components/Alert/Alert.d.ts

@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 import { LinkProps } from '@snack-uikit/link';
 import { WithSupportProps } from '@snack-uikit/utils';
 import { AlertButtonProps } from '../../helperComponents';
-import { Appearance } from '../../types';
+import { Appearance, Size } from '../../types';
 export type AlertProps = WithSupportProps<{
     /** Отображать иконку */
     icon?: boolean;
@@ -24,6 +24,10 @@ export type AlertProps = WithSupportProps<{
     onClose?: () => void;
     /** Внешний вид */
     appearance?: Appearance;
+    /** Внешний бордер  */
+    outline?: boolean;
+    /** Размер */
+    size?: Size;
     /** CSS-класс */
     className?: string;
     /** Кнопки в футере алерта */
@@ -35,4 +39,4 @@ export type AlertProps = WithSupportProps<{
 /**
  * Компонент для отображения уведомления.
  */
-export declare function Alert({ icon, title, truncate, link, description, onClose, appearance, className, actions, ...rest }: AlertProps): import("react/jsx-runtime").JSX.Element;
+export declare function Alert({ icon, title, truncate, link, description, onClose, appearance, className, actions, outline, size, ...rest }: AlertProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Alert/Alert.js

@@ -24,6 +24,8 @@ import styles from './styles.module.css';
  */
 export function Alert(_a) {
     var _b;
-    var { icon = true, title, truncate, link, description, onClose, appearance = APPEARANCE.Neutral, className, actions } = _a, rest = __rest(_a, ["icon", "title", "truncate", "link", "description", "onClose", "appearance", "className", "actions"]);
-    return (_jsxs("div", Object.assign({ className: cn(styles.alert, className) }, extractSupportProps(rest), { "data-color": APPEARANCE_TO_COLOR_MAP[appearance], children: [_jsxs("div", { className: styles.body, children: [icon && (_jsx("div", { className: styles.icon, "data-color": APPEARANCE_TO_COLOR_MAP[appearance], "data-test-id": 'alert__icon', 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' })), _jsx("span", { "data-test-id": 'alert__description', className: styles.description, children: description }), link && (_jsx("span", { children: _jsx(Link, Object.assign({ external: true }, link, { appearance: APPEARANCE_TO_COLOR_MAP[appearance], textMode: 'default', size: 'm', "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, children: [actions.primary && (_jsx(AlertButton, Object.assign({}, actions.primary, { appearance: APPEARANCE_TO_COLOR_MAP[appearance], variant: 'simple' }))), (actions === null || actions === void 0 ? void 0 : actions.secondary) && (_jsx(AlertButton, Object.assign({}, actions.secondary, { appearance: APPEARANCE_TO_COLOR_MAP[appearance], variant: 'simple' })))] }))] })));
+    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 })))] }))] })));
 }

package/dist/components/Alert/styles.module.css

@@ -1,49 +1,99 @@
 .alert{
-  padding-top:var(--space-alert-container-vertical-padding, 14px);
-  padding-bottom:var(--space-alert-container-vertical-padding, 14px);
-  padding-left:var(--space-alert-container-horizontal-padding, 14px);
-  padding-right:var(--space-alert-container-horizontal-padding, 14px);
-  gap:var(--space-alert-container-gap, 14px);
-  border-radius:var(--radius-alert-container, 8px);
-  border-width:var(--border-width-general-xs, 1px);
   display:flex;
   flex-direction:column;
   box-sizing:border-box;
   min-width:256px;
-  border-style:solid;
 }
 .alert[data-color=neutral]{
   background-color:var(--sys-neutral-background, #eeeff3);
-  border-color:var(--sys-neutral-decor-default, #dde0ea);
 }
 .alert[data-color=primary]{
   background-color:var(--sys-primary-background, #f6effe);
-  border-color:var(--sys-primary-decor-default, #ebdefd);
 }
 .alert[data-color=red]{
   background-color:var(--sys-red-background, #fdedea);
-  border-color:var(--sys-red-decor-default, #fdd6cd);
 }
 .alert[data-color=yellow]{
   background-color:var(--sys-yellow-background, #fcf4da);
-  border-color:var(--sys-yellow-decor-default, #f0dfb1);
 }
 .alert[data-color=green]{
   background-color:var(--sys-green-background, #ecf6ea);
-  border-color:var(--sys-green-decor-default, #d2ead0);
+}
+.alert[data-color=blue]{
+  background-color:var(--sys-blue-background, #edf4fd);
+}
+.alert[data-size=s]{
+  padding-top:var(--space-alert-s-container-vertical-padding, 7px);
+  padding-bottom:var(--space-alert-s-container-vertical-padding, 7px);
+  padding-left:var(--space-alert-s-container-horizontal-padding, 7px);
+  padding-right:var(--space-alert-s-container-horizontal-padding, 7px);
+  gap:var(--space-alert-s-container-gap, 7px);
+  border-radius:var(--radius-alert-container, 8px);
+  border-width:var(--border-width-alert-single, 1px);
+}
+.alert[data-size=m]{
+  padding-top:var(--space-alert-m-container-vertical-padding, 15px);
+  padding-bottom:var(--space-alert-m-container-vertical-padding, 15px);
+  padding-left:var(--space-alert-m-container-horizontal-padding, 15px);
+  padding-right:var(--space-alert-m-container-horizontal-padding, 15px);
+  gap:var(--space-alert-m-container-gap, 15px);
+  border-radius:var(--radius-alert-container, 8px);
+  border-width:var(--border-width-alert-single, 1px);
+}
+
+.alertOutline{
+  outline-style:solid;
+  outline-width:var(--border-width-accordion-collapse-block-primary, 1px);
+}
+.alertOutline[data-color=neutral]{
+  outline-color:var(--sys-neutral-decor-default, #dde0ea);
+}
+.alertOutline[data-color=neutral]:focus-within, .alertOutline[data-color=neutral]:hover{
+  outline-color:var(--sys-neutral-decor-default, #dde0ea);
+}
+.alertOutline[data-color=primary]{
+  outline-color:var(--sys-primary-decor-default, #ebdefd);
+}
+.alertOutline[data-color=primary]:focus-within, .alertOutline[data-color=primary]:hover{
+  outline-color:var(--sys-primary-decor-default, #ebdefd);
+}
+.alertOutline[data-color=red]{
+  outline-color:var(--sys-red-decor-default, #fdd6cd);
+}
+.alertOutline[data-color=red]:focus-within, .alertOutline[data-color=red]:hover{
+  outline-color:var(--sys-red-decor-default, #fdd6cd);
+}
+.alertOutline[data-color=yellow]{
+  outline-color:var(--sys-yellow-decor-default, #f0dfb1);
+}
+.alertOutline[data-color=yellow]:focus-within, .alertOutline[data-color=yellow]:hover{
+  outline-color:var(--sys-yellow-decor-default, #f0dfb1);
+}
+.alertOutline[data-color=green]{
+  outline-color:var(--sys-green-decor-default, #d2ead0);
+}
+.alertOutline[data-color=green]:focus-within, .alertOutline[data-color=green]:hover{
+  outline-color:var(--sys-green-decor-default, #d2ead0);
+}
+.alertOutline[data-color=blue]{
+  outline-color:var(--sys-blue-decor-default, #d6e2f4);
+}
+.alertOutline[data-color=blue]:focus-within, .alertOutline[data-color=blue]:hover{
+  outline-color:var(--sys-blue-decor-default, #d6e2f4);
 }
 
 .body{
-  gap:var(--space-alert-container-body-gap, 8px);
   display:flex;
   box-sizing:border-box;
   width:100%;
 }
-
-.icon{
-  width:var(--size-icon-container-s, 24px);
-  height:var(--size-icon-container-s, 24px);
+.body[data-size=s]{
+  gap:var(--space-alert-s-container-body-gap, 4px);
 }
+.body[data-size=m]{
+  gap:var(--space-alert-m-container-body-gap, 8px);
+}
+
 .icon[data-color=neutral]{
   color:var(--sys-neutral-accent-default, #787b8a);
 }
@@ -59,45 +109,90 @@
 .icon[data-color=green]{
   color:var(--sys-green-accent-default, #57b762);
 }
-.icon svg{
+.icon[data-color=blue]{
+  color:var(--sys-blue-accent-default, #5388d1);
+}
+.icon[data-size=s]{
+  width:var(--size-icon-container-xs, 16px);
+  height:var(--size-icon-container-xs, 16px);
+}
+.icon[data-size=s] svg{
+  max-width:var(--size-icon-container-xs, 16px);
+  max-height:var(--size-icon-container-xs, 16px);
+}
+.icon[data-size=m]{
+  width:var(--size-icon-container-s, 24px);
+  height:var(--size-icon-container-s, 24px);
+}
+.icon[data-size=m] svg{
   max-width:var(--size-icon-container-s, 24px);
   max-height:var(--size-icon-container-s, 24px);
 }
 
 .contentLayout{
-  padding-top:var(--space-alert-container-content-layout-padding-top, 2px);
   display:flex;
   flex:1;
   flex-direction:column;
   min-width:0;
 }
+.contentLayout[data-size=s]{
+  padding-top:var(--space-alert-s-container-content-layout-padding-top, 0px);
+}
+.contentLayout[data-size=m]{
+  padding-top:var(--space-alert-m-container-content-layout-padding-top, 2px);
+}
 
 .title{
+  color:var(--sys-neutral-text-main, #33343f);
+}
+.title[data-size=s]{
   font-family:var(--sans-title-s-font-family, SB Sans Interface);
   font-weight:var(--sans-title-s-font-weight, Semibold);
   line-height:var(--sans-title-s-line-height, 20px);
   font-size:var(--sans-title-s-font-size, 14px);
   letter-spacing:var(--sans-title-s-letter-spacing, 0.15px);
   paragraph-spacing:var(--sans-title-s-paragraph-spacing, 7.7px);
-  color:var(--sys-neutral-text-main, #33343f);
+}
+.title[data-size=m]{
+  font-family:var(--sans-title-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-title-m-font-weight, Semibold);
+  line-height:var(--sans-title-m-line-height, 24px);
+  font-size:var(--sans-title-m-font-size, 16px);
+  letter-spacing:var(--sans-title-m-letter-spacing, 0.15px);
+  paragraph-spacing:var(--sans-title-m-paragraph-spacing, 8.8px);
 }
 
 .description{
+  color:var(--sys-neutral-text-support, #6d707f);
+  word-wrap:break-word;
+}
+.description[data-size=s]{
+  font-family:var(--sans-body-s-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-s-font-weight, Regular);
+  line-height:var(--sans-body-s-line-height, 16px);
+  font-size:var(--sans-body-s-font-size, 12px);
+  letter-spacing:var(--sans-body-s-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-s-paragraph-spacing, 6.6px);
+}
+.description[data-size=m]{
   font-family:var(--sans-body-m-font-family, SB Sans Interface);
   font-weight:var(--sans-body-m-font-weight, Regular);
   line-height:var(--sans-body-m-line-height, 20px);
   font-size:var(--sans-body-m-font-size, 14px);
   letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
   paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
-  color:var(--sys-neutral-text-support, #6d707f);
-  word-wrap:break-word;
 }
 
 .footer{
-  gap:var(--space-alert-container-footer-gap, 16px);
   position:relative;
   display:flex;
   flex-direction:row-reverse;
   align-items:center;
   width:100%;
+}
+.footer[data-size=s]{
+  gap:var(--space-alert-s-container-footer-gap, 16px);
+}
+.footer[data-size=m]{
+  gap:var(--space-alert-m-container-footer-gap, 16px);
 }

package/dist/components/AlertTop/constants.d.ts

@@ -4,4 +4,5 @@ export declare const APPEARANCE_TO_COLOR_MAP_INVERT: {
     readonly error: "red";
     readonly warning: "yellow";
     readonly success: "green";
+    readonly info: "blue";
 };

package/dist/components/AlertTop/constants.js

@@ -5,6 +5,7 @@ const COLOR = {
     Red: 'red',
     Yellow: 'yellow',
     Green: 'green',
+    Blue: 'blue',
 };
 export const APPEARANCE_TO_COLOR_MAP_INVERT = {
     [APPEARANCE.Neutral]: COLOR.InvertNeutral,
@@ -12,4 +13,5 @@ export const APPEARANCE_TO_COLOR_MAP_INVERT = {
     [APPEARANCE.Error]: COLOR.Red,
     [APPEARANCE.Warning]: COLOR.Yellow,
     [APPEARANCE.Success]: COLOR.Green,
+    [APPEARANCE.Info]: COLOR.Blue,
 };

package/dist/components/AlertTop/styles.module.css

@@ -23,6 +23,9 @@
 .alertTop[data-color=green]{
   background-color:var(--sys-green-accent-default, #57b762);
 }
+.alertTop[data-color=blue]{
+  background-color:var(--sys-blue-accent-default, #5388d1);
+}
 
 .icon{
   display:flex;
@@ -44,6 +47,9 @@
 .icon[data-color=green]{
   color:var(--sys-green-on-accent, #fcfefa);
 }
+.icon[data-color=blue]{
+  color:var(--sys-blue-on-accent, #fdfeff);
+}
 .icon svg{
   width:var(--size-icon-container-s, 24px) !important;
   height:var(--size-icon-container-s, 24px) !important;
@@ -72,6 +78,9 @@
 .title[data-color=green]{
   color:var(--sys-green-on-accent, #fcfefa);
 }
+.title[data-color=blue]{
+  color:var(--sys-blue-on-accent, #fdfeff);
+}
 
 .description{
   font-family:var(--sans-body-m-font-family, SB Sans Interface);
@@ -97,6 +106,9 @@
 .description[data-color=green]{
   color:var(--sys-green-on-accent, #fcfefa);
 }
+.description[data-color=blue]{
+  color:var(--sys-blue-on-accent, #fdfeff);
+}
 
 .contentWrapper{
   display:flex;

package/dist/constants.d.ts

@@ -6,5 +6,10 @@ export declare const APPEARANCE: {
     readonly Error: "error";
     readonly Warning: "warning";
     readonly Success: "success";
+    readonly Info: "info";
+};
+export declare const SIZE: {
+    readonly S: "s";
+    readonly M: "m";
 };
 export declare const APPEARANCE_TO_COLOR_MAP: Record<ValueOf<typeof APPEARANCE>, LinkProps['appearance']>;

package/dist/constants.js

@@ -4,6 +4,11 @@ export const APPEARANCE = {
     Error: 'error',
     Warning: 'warning',
     Success: 'success',
+    Info: 'info',
+};
+export const SIZE = {
+    S: 's',
+    M: 'm',
 };
 export const APPEARANCE_TO_COLOR_MAP = {
     [APPEARANCE.Neutral]: 'neutral',
@@ -11,4 +16,5 @@ export const APPEARANCE_TO_COLOR_MAP = {
     [APPEARANCE.Error]: 'red',
     [APPEARANCE.Warning]: 'yellow',
     [APPEARANCE.Success]: 'green',
+    [APPEARANCE.Info]: 'blue',
 };

package/dist/helperComponents/AlertButton.d.ts

@@ -1,5 +1,6 @@
 import { MouseEvent, ReactElement } from 'react';
 import { LinkProps } from '@snack-uikit/link';
+import { Size } from '../types';
 type PrivateAlertButtonProps = {
     /** Внешний вид */
     appearance?: LinkProps['appearance'] | 'invert-neutral';
@@ -13,7 +14,11 @@ type PrivateAlertButtonProps = {
     onClick?(e: MouseEvent<HTMLButtonElement>): void;
     /** Дата тест айди */
     dataTestId?: string;
+    /** Управление состоянием загрузки */
+    loading?: boolean;
+    /** Размер */
+    size?: Size;
 };
 export type AlertButtonProps = Omit<PrivateAlertButtonProps, 'appearance' | 'variant'>;
-export declare function AlertButton({ appearance, text, icon, onClick, variant, dataTestId, }: PrivateAlertButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function AlertButton({ appearance, text, icon, onClick, variant, dataTestId, loading, size, }: PrivateAlertButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/helperComponents/AlertButton.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Sun } from '@snack-uikit/loaders';
 import styles from './styles.module.css';
-export function AlertButton({ appearance, text, icon, onClick, variant = 'simple', dataTestId, }) {
-    return (_jsxs("button", { type: 'button', onClick: onClick, className: styles.alertButton, "data-variant": variant, "data-appearance": appearance, "data-test-id": dataTestId || 'alert__action-button', "data-icon-only": !text || undefined, children: [text && _jsx("span", { className: styles.text, children: text }), icon && _jsx("span", { className: styles.icon, children: icon })] }));
+export function AlertButton({ appearance, text, icon, onClick, variant = 'simple', dataTestId, loading = false, size = 's', }) {
+    return (_jsxs("button", { type: 'button', onClick: onClick, className: styles.alertButton, "data-variant": variant, "data-appearance": appearance, "data-test-id": dataTestId || 'alert__action-button', "data-icon-only": !text || undefined, "data-loading": loading, "data-size": size, children: [text && (_jsx("span", { className: styles.text, "data-size": size, children: text })), icon && (loading ? _jsx(Sun, { size: 's' }) : _jsx("span", { className: styles.icon, children: icon }))] }));
 }

package/dist/helperComponents/styles.module.css

@@ -10,7 +10,15 @@
   background:none;
   border:0;
 }
-.alertButton .text{
+.alertButton .text[data-size=s]{
+  font-family:var(--sans-label-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-label-m-font-weight, Semibold);
+  line-height:var(--sans-label-m-line-height, 16px);
+  font-size:var(--sans-label-m-font-size, 12px);
+  letter-spacing:var(--sans-label-m-letter-spacing, 0px);
+  paragraph-spacing:var(--sans-label-m-paragraph-spacing, 6.6px);
+}
+.alertButton .text[data-size=m]{
   font-family:var(--sans-label-l-font-family, SB Sans Interface);
   font-weight:var(--sans-label-l-font-weight, Semibold);
   line-height:var(--sans-label-l-line-height, 20px);
@@ -29,21 +37,34 @@
   max-width:var(--size-icon-container-s, 24px);
   max-height:var(--size-icon-container-s, 24px);
 }
+.alertButton[data-loading=true]{
+  cursor:not-allowed;
+}
+.alertButton[data-loading=true] > *{
+  cursor:not-allowed;
+}
 
-.alertButton[data-variant=simple]{
-  height:var(--size-alert-button, 24px);
-  gap:var(--space-alert-button-gap, 4px);
+.alertButton[data-variant=simple][data-size=s]{
+  height:var(--size-alert-button-m, 24px);
+  gap:var(--space-alert-m-button-gap, 4px);
   border-radius:var(--radius-alert-button, 8px);
 }
-.alertButton[data-variant=simple][data-icon-only]{
-  height:var(--size-alert-button, 24px);
-  width:var(--size-alert-button, 24px);
+.alertButton[data-variant=simple][data-size=s][data-icon-only]{
+  height:var(--size-alert-button-s, 16px);
+  width:var(--size-alert-button-s, 16px);
+  border-radius:var(--radius-alert-button, 8px);
+}
+.alertButton[data-variant=simple][data-size=m]{
+  height:var(--size-alert-button-m, 24px);
+  gap:var(--space-alert-m-button-gap, 4px);
+  border-radius:var(--radius-alert-button, 8px);
+}
+.alertButton[data-variant=simple][data-size=m][data-icon-only]{
+  height:var(--size-alert-button-m, 24px);
+  width:var(--size-alert-button-m, 24px);
   border-radius:var(--radius-alert-button, 8px);
 }
 .alertButton[data-variant=simple]:focus-visible{
-  outline-width:var(--border-state-focus-s-border-width, 2px);
-  outline-style:var(--border-state-focus-s-border-style, solid);
-  outline-color:var(--border-state-focus-s-border-color, );
   outline-color:var(--sys-available-complementary, #15151b);
   outline-offset:var(--spacing-state-focus-offset, 2px);
 }
@@ -51,7 +72,7 @@
   color:var(--sys-neutral-text-support, #6d707f);
 }
 .alertButton[data-variant=simple][data-appearance=neutral]:hover, .alertButton[data-variant=simple][data-appearance=neutral]:focus-visible{
-  color:var(--sys-neutral-text-light, #8b8e9b);
+  color:var(--sys-neutral-text-main, #33343f);
 }
 .alertButton[data-variant=simple][data-appearance=neutral]:active{
   color:var(--sys-neutral-text-main, #33343f);
@@ -60,7 +81,7 @@
   color:var(--sys-primary-text-support, #5b4796);
 }
 .alertButton[data-variant=simple][data-appearance=primary]:hover, .alertButton[data-variant=simple][data-appearance=primary]:focus-visible{
-  color:var(--sys-primary-text-light, #997adc);
+  color:var(--sys-primary-text-main, #382a62);
 }
 .alertButton[data-variant=simple][data-appearance=primary]:active{
   color:var(--sys-primary-text-main, #382a62);
@@ -69,7 +90,7 @@
   color:var(--sys-red-text-support, #a63d3a);
 }
 .alertButton[data-variant=simple][data-appearance=red]:hover, .alertButton[data-variant=simple][data-appearance=red]:focus-visible{
-  color:var(--sys-red-text-light, #ea6658);
+  color:var(--sys-red-text-main, #621c1b);
 }
 .alertButton[data-variant=simple][data-appearance=red]:active{
   color:var(--sys-red-text-main, #621c1b);
@@ -78,7 +99,7 @@
   color:var(--sys-yellow-text-support, #a77a10);
 }
 .alertButton[data-variant=simple][data-appearance=yellow]:hover, .alertButton[data-variant=simple][data-appearance=yellow]:focus-visible{
-  color:var(--sys-yellow-text-light, #ddb035);
+  color:var(--sys-yellow-text-main, #5e3d06);
 }
 .alertButton[data-variant=simple][data-appearance=yellow]:active{
   color:var(--sys-yellow-text-main, #5e3d06);
@@ -87,11 +108,20 @@
   color:var(--sys-green-text-support, #568a56);
 }
 .alertButton[data-variant=simple][data-appearance=green]:hover, .alertButton[data-variant=simple][data-appearance=green]:focus-visible{
-  color:var(--sys-green-text-light, #67ba6e);
+  color:var(--sys-green-text-main, #323f27);
 }
 .alertButton[data-variant=simple][data-appearance=green]:active{
   color:var(--sys-green-text-main, #323f27);
 }
+.alertButton[data-variant=simple][data-appearance=blue]{
+  color:var(--sys-blue-text-support, #4975a9);
+}
+.alertButton[data-variant=simple][data-appearance=blue]:hover, .alertButton[data-variant=simple][data-appearance=blue]:focus-visible{
+  color:var(--sys-blue-text-main, #153a61);
+}
+.alertButton[data-variant=simple][data-appearance=blue]:active{
+  color:var(--sys-blue-text-main, #153a61);
+}
 
 .alertButton[data-variant=tonal]{
   height:var(--size-alert-top-button, 32px);
@@ -135,4 +165,7 @@
 }
 .alertButton[data-variant=tonal][data-appearance=green]{
   color:var(--sys-green-on-accent, #fcfefa);
+}
+.alertButton[data-variant=tonal][data-appearance=blue]{
+  color:var(--sys-blue-on-accent, #fdfeff);
 }

package/dist/types.d.ts

@@ -1,3 +1,4 @@
 import { ValueOf } from '@snack-uikit/utils';
-import { APPEARANCE } from './constants';
+import { APPEARANCE, SIZE } from './constants';
 export type Appearance = ValueOf<typeof APPEARANCE>;
+export type Size = ValueOf<typeof SIZE>;

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Alert",
-  "version": "0.11.5",
+  "version": "0.12.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -34,9 +34,10 @@
   "dependencies": {
     "@snack-uikit/icons": "0.22.0",
     "@snack-uikit/link": "0.12.4",
+    "@snack-uikit/loaders": "0.5.2",
     "@snack-uikit/truncate-string": "0.4.20",
     "@snack-uikit/utils": "3.3.0",
     "classnames": "2.3.2"
   },
-  "gitHead": "4c153b54a2902cf20883d85b4dc753344313c6cb"
+  "gitHead": "e1962e152dbb02534dc447d16bf67ad0f4e19e9d"
 }

package/src/components/Alert/Alert.tsx

@@ -8,7 +8,7 @@ import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
 
 import { APPEARANCE, APPEARANCE_TO_COLOR_MAP } from '../../constants';
 import { AlertButton, AlertButtonProps } from '../../helperComponents';
-import { Appearance } from '../../types';
+import { Appearance, Size } from '../../types';
 import { getIcon } from '../../utils';
 import styles from './styles.module.scss';
 
@@ -33,6 +33,10 @@ export type AlertProps = WithSupportProps<{
   onClose?: () => void;
   /** Внешний вид */
   appearance?: Appearance;
+  /** Внешний бордер  */
+  outline?: boolean;
+  /** Размер */
+  size?: Size;
   /** CSS-класс */
   className?: string;
   /** Кнопки в футере алерта */
@@ -55,17 +59,31 @@ export function Alert({
   appearance = APPEARANCE.Neutral,
   className,
   actions,
+  outline,
+  size = 'm',
   ...rest
 }: AlertProps) {
   return (
     <div
-      className={cn(styles.alert, className)}
+      className={cn(
+        styles.alert,
+        {
+          [styles.alertOutline]: outline,
+        },
+        className,
+      )}
       {...extractSupportProps(rest)}
       data-color={APPEARANCE_TO_COLOR_MAP[appearance]}
+      data-size={size}
     >
-      <div className={styles.body}>
+      <div className={styles.body} data-size={size}>
         {icon && (
-          <div className={styles.icon} data-color={APPEARANCE_TO_COLOR_MAP[appearance]} data-test-id='alert__icon'>
+          <div
+            className={styles.icon}
+            data-color={APPEARANCE_TO_COLOR_MAP[appearance]}
+            data-test-id='alert__icon'
+            data-size={size}
+          >
             {getIcon(appearance)}
           </div>
         )}
@@ -77,10 +95,11 @@ export function Alert({
               maxLines={truncate?.title ?? 1}
               className={styles.title}
               data-test-id='alert__title'
+              data-size={size}
             />
           )}
 
-          <span data-test-id='alert__description' className={styles.description}>
+          <span data-test-id='alert__description' className={styles.description} data-size={size}>
             {description}
           </span>
 
@@ -91,7 +110,7 @@ export function Alert({
                 {...link}
                 appearance={APPEARANCE_TO_COLOR_MAP[appearance]}
                 textMode='default'
-                size='m'
+                size={size}
                 data-test-id='alert__link'
               />
             </span>
@@ -110,12 +129,22 @@ export function Alert({
       </div>
 
       {actions && (
-        <div className={styles.footer}>
+        <div className={styles.footer} data-size={size}>
           {actions.primary && (
-            <AlertButton {...actions.primary} appearance={APPEARANCE_TO_COLOR_MAP[appearance]} variant='simple' />
+            <AlertButton
+              {...actions.primary}
+              appearance={APPEARANCE_TO_COLOR_MAP[appearance]}
+              variant='simple'
+              size={size}
+            />
           )}
           {actions?.secondary && (
-            <AlertButton {...actions.secondary} appearance={APPEARANCE_TO_COLOR_MAP[appearance]} variant='simple' />
+            <AlertButton
+              {...actions.secondary}
+              appearance={APPEARANCE_TO_COLOR_MAP[appearance]}
+              variant='simple'
+              size={size}
+            />
           )}
         </div>
       )}

package/src/components/Alert/styles.module.scss

@@ -1,33 +1,55 @@
 @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-alert';
 @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
 
-$colors: 'neutral', 'primary', 'red', 'yellow', 'green';
+$colors: 'neutral', 'primary', 'red', 'yellow', 'green', 'blue';
+$sizes: 's', 'm';
+$icons: ('s': 'xs', 'm': 's');
 
 .alert {
-  @include composite-var($alert-container-container);
-
   display: flex;
   flex-direction: column;
-
   box-sizing: border-box;
   min-width: 256px;
 
-  border-style: solid;
-
   @each $color in $colors {
     &[data-color='#{$color}'] {
       background-color: simple-var($theme-variables, 'sys', $color, 'background');
-      border-color: simple-var($theme-variables, 'sys', $color, 'decor-default');
+    }
+  }
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      @include composite-var($alert, $size, 'container');
     }
   }
 }
 
-.body {
-  @include composite-var($alert-container-body);
+.alertOutline {
+  outline-style: solid;
+  outline-width: $border-width-accordion-collapse-block-primary;
+
+  @each $color in $colors {
+    &[data-color='#{$color}'] {
+      outline-color: simple-var($theme-variables, 'sys', $color, 'decor-default');
 
+      &:focus-within,
+      &:hover {
+        outline-color: simple-var($theme-variables, 'sys', $color, 'decor-default');
+      }
+    }
+  }
+}
+
+.body {
   display: flex;
   box-sizing: border-box;
   width: 100%;
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      @include composite-var($alert, $size, 'body');
+    }
+  }
 }
 
 .icon {
@@ -37,40 +59,56 @@ $colors: 'neutral', 'primary', 'red', 'yellow', 'green';
     }
   }
 
-  width: $icon-s;
-  height: $icon-s;
+  @each $name, $glyph in $icons {
+    &[data-size='#{$name}'] {
+      width: simple-var($icon, $glyph);
+      height: simple-var($icon, $glyph);
 
-  svg {
-    max-width: $icon-s;
-    max-height: $icon-s;
+      svg {
+        max-width: simple-var($icon, $glyph);
+        max-height: simple-var($icon, $glyph);
+      }
+    }
   }
+
+
 }
 
 .contentLayout {
-  @include composite-var($alert-container-content-layout);
-
   display: flex;
   flex: 1;
   flex-direction: column;
   min-width: 0;
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      @include composite-var($alert, $size, 'content-layout');
+    }
+  }
 }
 
 .title {
-  @include composite-var($sans-title-s);
-
   color: $sys-neutral-text-main;
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      @include composite-var($theme-variables, 'sans', 'title', $size)
+    }
+  }
 }
 
 .description {
-  @include composite-var($sans-body-m);
-
   color: $sys-neutral-text-support;
   word-wrap: break-word;
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      @include composite-var($theme-variables, 'sans', 'body', $size)
+    }
+  }
 }
 
 .footer {
-  @include composite-var($alert-container-footer);
-
   position: relative;
 
   display: flex;
@@ -78,4 +116,10 @@ $colors: 'neutral', 'primary', 'red', 'yellow', 'green';
   align-items: center;
 
   width: 100%;
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      @include composite-var($alert, $size, 'footer');
+    }
+  }
 }

package/src/components/AlertTop/constants.ts

@@ -6,6 +6,7 @@ const COLOR = {
   Red: 'red',
   Yellow: 'yellow',
   Green: 'green',
+  Blue: 'blue',
 } as const;
 
 export const APPEARANCE_TO_COLOR_MAP_INVERT = {
@@ -14,4 +15,5 @@ export const APPEARANCE_TO_COLOR_MAP_INVERT = {
   [APPEARANCE.Error]: COLOR.Red,
   [APPEARANCE.Warning]: COLOR.Yellow,
   [APPEARANCE.Success]: COLOR.Green,
+  [APPEARANCE.Info]: COLOR.Blue,
 } as const;

package/src/components/AlertTop/styles.module.scss

@@ -1,7 +1,7 @@
 @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-alert-alertTop';
 @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
 
-$colors: 'invert-neutral', 'primary', 'red', 'yellow', 'green';
+$colors: 'invert-neutral', 'primary', 'red', 'yellow', 'green', 'blue';
 
 .alertTop {
   @include composite-var($alert-top-container-container);

package/src/constants.ts

@@ -7,6 +7,12 @@ export const APPEARANCE = {
   Error: 'error',
   Warning: 'warning',
   Success: 'success',
+  Info: 'info',
+} as const;
+
+export const SIZE = {
+  S: 's',
+  M: 'm',
 } as const;
 
 export const APPEARANCE_TO_COLOR_MAP: Record<ValueOf<typeof APPEARANCE>, LinkProps['appearance']> = {
@@ -15,4 +21,5 @@ export const APPEARANCE_TO_COLOR_MAP: Record<ValueOf<typeof APPEARANCE>, LinkPro
   [APPEARANCE.Error]: 'red',
   [APPEARANCE.Warning]: 'yellow',
   [APPEARANCE.Success]: 'green',
+  [APPEARANCE.Info]: 'blue',
 } as const;

package/src/helperComponents/AlertButton.tsx

@@ -1,7 +1,9 @@
 import { MouseEvent, ReactElement } from 'react';
 
 import { LinkProps } from '@snack-uikit/link';
+import { Sun } from '@snack-uikit/loaders';
 
+import { Size } from '../types';
 import styles from './styles.module.scss';
 
 type PrivateAlertButtonProps = {
@@ -17,6 +19,10 @@ type PrivateAlertButtonProps = {
   onClick?(e: MouseEvent<HTMLButtonElement>): void;
   /** Дата тест айди */
   dataTestId?: string;
+  /** Управление состоянием загрузки */
+  loading?: boolean;
+  /** Размер */
+  size?: Size;
 };
 
 export type AlertButtonProps = Omit<PrivateAlertButtonProps, 'appearance' | 'variant'>;
@@ -28,6 +34,8 @@ export function AlertButton({
   onClick,
   variant = 'simple',
   dataTestId,
+  loading = false,
+  size = 's',
 }: PrivateAlertButtonProps) {
   return (
     <button
@@ -38,9 +46,15 @@ export function AlertButton({
       data-appearance={appearance}
       data-test-id={dataTestId || 'alert__action-button'}
       data-icon-only={!text || undefined}
+      data-loading={loading}
+      data-size={size}
     >
-      {text && <span className={styles.text}>{text}</span>}
-      {icon && <span className={styles.icon}>{icon}</span>}
+      {text && (
+        <span className={styles.text} data-size={size}>
+          {text}
+        </span>
+      )}
+      {icon && (loading ? <Sun size='s' /> : <span className={styles.icon}>{icon}</span>)}
     </button>
   );
 }

package/src/helperComponents/styles.module.scss

@@ -2,8 +2,10 @@
 @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-alert-alertTop';
 @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
 
-$simpleAppearances: 'neutral', 'primary', 'red', 'yellow', 'green';
-$tonalAppearances: 'invert-neutral', 'primary', 'red', 'yellow', 'green';
+$simpleAppearances: 'neutral', 'primary', 'red', 'yellow', 'green', 'blue';
+$tonalAppearances: 'invert-neutral', 'primary', 'red', 'yellow', 'green', 'blue';
+$sizes: 's', 'm';
+$text: ('s': 'm', 'm': 'l');
 
 .alertButton {
   cursor: pointer;
@@ -22,7 +24,11 @@ $tonalAppearances: 'invert-neutral', 'primary', 'red', 'yellow', 'green';
   border: 0;
 
   .text {
-    @include composite-var($sans-label-l);
+    @each $name, $glyph in $text {
+      &[data-size='#{$name}'] {
+        @include composite-var($theme-variables, 'sans', 'label', $glyph)
+      }
+    }
   }
 
   .icon {
@@ -38,18 +44,28 @@ $tonalAppearances: 'invert-neutral', 'primary', 'red', 'yellow', 'green';
       max-height: $icon-s;
     }
   }
+
+  &[data-loading='true'] {
+    cursor: not-allowed;
+    > * {
+      cursor: not-allowed;
+    }
+  }
 }
 
 .alertButton[data-variant='simple'] {
-  @include composite-var($alert-button-button-action);
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      @include composite-var($alert, $size, 'button', 'button-action');
 
-  &[data-icon-only] {
-    @include composite-var($alert-button-button-close);
+      &[data-icon-only] {
+        @include composite-var($alert, $size, 'button', 'button-close');
+
+      }
+    }
   }
 
   &:focus-visible {
-    @include outline-var($container-focused-s);
-
     outline-color: $sys-available-complementary;
     outline-offset: $spacing-state-focus-offset;
   }
@@ -60,7 +76,7 @@ $tonalAppearances: 'invert-neutral', 'primary', 'red', 'yellow', 'green';
 
       &:hover,
       &:focus-visible {
-        color: simple-var($theme-variables, 'sys', $appearance, 'text-light');
+        color: simple-var($theme-variables, 'sys', $appearance, 'text-main');
       }
 
       &:active {

package/src/types.ts

@@ -1,5 +1,7 @@
 import { ValueOf } from '@snack-uikit/utils';
 
-import { APPEARANCE } from './constants';
+import { APPEARANCE, SIZE } from './constants';
 
 export type Appearance = ValueOf<typeof APPEARANCE>;
+
+export type Size = ValueOf<typeof SIZE>;