@snack-uikit/alert 0.7.3 → 0.8.0

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.8.0 (2023-12-28)
+
+
+### Bug Fixes
+
+* **FF-3960:** support link props renaming ([990b35e](https://github.com/cloud-ru-tech/snack-uikit/commit/990b35e6f0ea091c499b337e721add2f1606a251))
+
+
+### Features
+
+* **FF-3960:** update inner structure, add action buttons ([0de436c](https://github.com/cloud-ru-tech/snack-uikit/commit/0de436c7128a9d6753645ed80c8c45201586d952))
+
+
+
+
+
 ## 0.7.3 (2023-12-25)
 
 ### Only dependencies have been changed

package/README.md

@@ -58,6 +58,7 @@ import { InfoFilledSVG } from '@snack-uikit/icons';
 | onClose | `() => void` | - | Колбек закрытия |
 | appearance | enum Appearance: `"neutral"`, `"primary"`, `"error"`, `"warning"`, `"success"` | neutral | Внешний вид |
 | className | `string` | - | CSS-класс |
+| action | `Pick<AlertButtonProps, "icon" \| "label" \| "onClick">[]` | - | Свойства, описывающие кнопки в футере алерта |
 ## AlertTop
 Компонент для отображения уведомления вверху экрана.
 ### Props

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

@@ -1,4 +1,5 @@
 import { WithSupportProps } from '@snack-uikit/utils';
+import { AlertButtonProps } from '../../helperComponents';
 import { Appearance } from '../../types';
 export type AlertProps = WithSupportProps<{
     /** Отображать иконку */
@@ -17,8 +18,10 @@ export type AlertProps = WithSupportProps<{
     appearance?: Appearance;
     /** CSS-класс */
     className?: string;
+    /** Свойства, описывающие кнопки в футере алерта */
+    action?: Pick<AlertButtonProps, 'label' | 'onClick' | 'icon'>[];
 }>;
 /**
  * Компонент для отображения уведомления.
  */
-export declare function Alert({ icon, title, href, link, description, onClose, appearance, className, ...rest }: AlertProps): import("react/jsx-runtime").JSX.Element;
+export declare function Alert({ icon, title, href, link, description, onClose, appearance, className, action, ...rest }: AlertProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Alert/Alert.js

@@ -16,12 +16,13 @@ import { Link } from '@snack-uikit/link';
 import { TruncateString } from '@snack-uikit/truncate-string';
 import { extractSupportProps } from '@snack-uikit/utils';
 import { APPEARANCE, APPEARANCE_TO_COLOR_MAP } from '../../constants';
+import { AlertButton } from '../../helperComponents';
 import { getIcon } from '../../utils';
 import styles from './styles.module.css';
 /**
  * Компонент для отображения уведомления.
  */
 export function Alert(_a) {
-    var { icon = true, title, href, link, description, onClose, appearance = APPEARANCE.Neutral, className } = _a, rest = __rest(_a, ["icon", "title", "href", "link", "description", "onClose", "appearance", "className"]);
-    return (_jsxs("div", Object.assign({ className: cn(styles.alert, className) }, extractSupportProps(rest), { "data-color": APPEARANCE_TO_COLOR_MAP[appearance], 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.content, children: [_jsxs("div", { className: styles.textlayout, children: [title && _jsx(TruncateString, { text: title, maxLines: 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, { href: href, text: link, onSurface: 'decor', external: true, onColor: APPEARANCE_TO_COLOR_MAP[appearance], size: 'm', "data-test-id": 'alert__link' }) }))] }), onClose && (_jsx("button", { onClick: onClose, className: styles.closeButton, "data-color": APPEARANCE_TO_COLOR_MAP[appearance], "data-test-id": 'alert__close-button', children: _jsx(CrossSVG, {}) }))] })));
+    var { icon = true, title, href, link, description, onClose, appearance = APPEARANCE.Neutral, className, action } = _a, rest = __rest(_a, ["icon", "title", "href", "link", "description", "onClose", "appearance", "className", "action"]);
+    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: 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, { href: href, text: link, textMode: 'default', external: true, appearance: APPEARANCE_TO_COLOR_MAP[appearance], size: 'm', "data-test-id": 'alert__link' }) }))] }), onClose && (_jsx("button", { onClick: onClose, className: styles.closeButton, "data-color": APPEARANCE_TO_COLOR_MAP[appearance], "data-test-id": 'alert__close-button', children: _jsx(CrossSVG, {}) }))] }), Array.isArray(action) && action.length > 0 && (_jsx("div", { className: styles.footer, children: action.map(buttonProps => (_jsx(AlertButton, Object.assign({}, buttonProps, { appearance: appearance }), buttonProps.label))) }))] })));
 }

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

@@ -3,10 +3,11 @@
   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, 8px);
+  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;
@@ -32,38 +33,11 @@
   border-color:var(--sys-green-decor-default, #cdebe3);
 }
 
-.title{
-  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, #333333);
-}
-
-.textlayout{
-  padding-top:var(--space-alert-container-content-layout-text-layout-padding-top, 2px);
-  overflow:hidden;
-}
-
-.description{
-  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, #565656);
-  word-wrap:break-word;
-}
-
-.content{
-  gap:var(--space-alert-container-content-layout-gap, 8px);
+.body{
+  gap:var(--space-alert-container-body-gap, 8px);
   display:flex;
-  flex:1;
-  flex-direction:column;
-  min-width:0;
+  box-sizing:border-box;
+  width:100%;
 }
 
 .icon[data-color=neutral]{
@@ -86,10 +60,39 @@
   height:var(--dimension-3m, 24px) !important;
 }
 
+.contentLayout{
+  padding-top:var(--space-alert-container-content-layout-padding-top, 2px);
+  display:flex;
+  flex:1;
+  flex-direction:column;
+  min-width:0;
+}
+
+.title{
+  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, #333333);
+}
+
+.description{
+  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, #565656);
+  word-wrap:break-word;
+}
+
 .closeButton{
-  height:var(--size-alert-button-close, 24px);
-  width:var(--size-alert-button-close, 24px);
-  border-radius:var(--radius-alert-button-close, 8px);
+  height:var(--size-alert-button, 24px);
+  width:var(--size-alert-button, 24px);
+  border-radius:var(--radius-alert-button, 8px);
   cursor:pointer;
   display:flex;
   align-items:center;
@@ -106,82 +109,91 @@
   height:var(--dimension-3m, 24px) !important;
 }
 .closeButton[data-color=neutral]{
-  color:var(--sys-neutral-text-light, #898989);
+  color:var(--sys-neutral-text-support, #565656);
 }
 .closeButton[data-color=neutral]:hover{
-  color:var(--sys-neutral-text-support, #565656);
+  color:var(--sys-neutral-text-light, #898989);
 }
 .closeButton[data-color=neutral]: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, );
-  color:var(--sys-neutral-text-support, #565656);
+  color:var(--sys-neutral-text-light, #898989);
   outline-color:var(--sys-available-complementary, #131313);
 }
 .closeButton[data-color=neutral]:active{
   color:var(--sys-neutral-text-main, #333333);
 }
 .closeButton[data-color=primary]{
-  color:var(--sys-primary-text-light, #997adc);
+  color:var(--sys-primary-text-support, #5b4796);
 }
 .closeButton[data-color=primary]:hover{
-  color:var(--sys-primary-text-support, #5b4796);
+  color:var(--sys-primary-text-light, #997adc);
 }
 .closeButton[data-color=primary]: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, );
-  color:var(--sys-primary-text-support, #5b4796);
+  color:var(--sys-primary-text-light, #997adc);
   outline-color:var(--sys-available-complementary, #131313);
 }
 .closeButton[data-color=primary]:active{
   color:var(--sys-primary-text-main, #382a62);
 }
 .closeButton[data-color=red]{
-  color:var(--sys-red-text-light, #ec7465);
+  color:var(--sys-red-text-support, #a93936);
 }
 .closeButton[data-color=red]:hover{
-  color:var(--sys-red-text-support, #a93936);
+  color:var(--sys-red-text-light, #ec7465);
 }
 .closeButton[data-color=red]: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, );
-  color:var(--sys-red-text-support, #a93936);
+  color:var(--sys-red-text-light, #ec7465);
   outline-color:var(--sys-available-complementary, #131313);
 }
 .closeButton[data-color=red]:active{
   color:var(--sys-red-text-main, #621c1e);
 }
 .closeButton[data-color=yellow]{
-  color:var(--sys-yellow-text-light, #be7d3c);
+  color:var(--sys-yellow-text-support, #80461b);
 }
 .closeButton[data-color=yellow]:hover{
-  color:var(--sys-yellow-text-support, #80461b);
+  color:var(--sys-yellow-text-light, #be7d3c);
 }
 .closeButton[data-color=yellow]: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, );
-  color:var(--sys-yellow-text-support, #80461b);
+  color:var(--sys-yellow-text-light, #be7d3c);
   outline-color:var(--sys-available-complementary, #131313);
 }
 .closeButton[data-color=yellow]:active{
   color:var(--sys-yellow-text-main, #54290f);
 }
 .closeButton[data-color=green]{
-  color:var(--sys-green-text-light, #4d9e80);
+  color:var(--sys-green-text-support, #335747);
 }
 .closeButton[data-color=green]:hover{
-  color:var(--sys-green-text-support, #335747);
+  color:var(--sys-green-text-light, #4d9e80);
 }
 .closeButton[data-color=green]: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, );
-  color:var(--sys-green-text-support, #335747);
+  color:var(--sys-green-text-light, #4d9e80);
   outline-color:var(--sys-available-complementary, #131313);
 }
 .closeButton[data-color=green]:active{
   color:var(--sys-green-text-main, #1f392a);
+}
+
+.footer{
+  gap:var(--space-alert-container-footer-gap, 16px);
+  position:relative;
+  display:flex;
+  flex-direction:row-reverse;
+  align-items:center;
+  width:100%;
 }

package/dist/components/AlertTop/AlertTop.js

@@ -25,5 +25,5 @@ import styles from './styles.module.css';
  */
 export function AlertTop(_a) {
     var { icon = true, title, description, link, href, onClose, appearance = APPEARANCE.Neutral, buttonText, buttonOnClick, buttonIcon, className } = _a, rest = __rest(_a, ["icon", "title", "description", "link", "href", "onClose", "appearance", "buttonText", "buttonOnClick", "buttonIcon", "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: 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, { onSurface: 'accent', href: href, text: link, external: true, onColor: APPEARANCE_TO_COLOR_MAP[appearance], size: 'm', "data-test-id": 'alert-top__link' }) }))] })] }), _jsxs("div", { className: styles.actions, children: [buttonText && (_jsx(AlertTopButton, { buttonIcon: buttonIcon, buttonOnClick: buttonOnClick, buttonText: buttonText, appearance: appearance })), onClose && (_jsx("button", { onClick: onClose, className: styles.closeButton, "data-color": APPEARANCE_TO_COLOR_MAP_INVERT[appearance], "data-test-id": 'alert-top__close-button', children: _jsx(CrossSVG, {}) }))] })] })));
+    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: 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, { textMode: 'on-accent', href: href, text: link, external: true, appearance: APPEARANCE_TO_COLOR_MAP[appearance], size: 'm', "data-test-id": 'alert-top__link' }) }))] })] }), _jsxs("div", { className: styles.actions, children: [buttonText && (_jsx(AlertTopButton, { buttonIcon: buttonIcon, buttonOnClick: buttonOnClick, buttonText: buttonText, appearance: appearance })), onClose && (_jsx("button", { onClick: onClose, className: styles.closeButton, "data-color": APPEARANCE_TO_COLOR_MAP_INVERT[appearance], "data-test-id": 'alert-top__close-button', children: _jsx(CrossSVG, {}) }))] })] })));
 }

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

@@ -24,6 +24,11 @@
   background-color:var(--sys-green-accent-default, #0bbe8f);
 }
 
+.icon{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+}
 .icon[data-color=invert-neutral]{
   color:var(--sys-invert-neutral-text-main, #e7e7e7);
 }
@@ -131,7 +136,7 @@
 }
 .closeButton[data-color=invert-neutral]{
   color:var(--sys-invert-neutral-text-main, #e7e7e7);
-  opacity:var(--opacity-a080, 0.8);
+  background-color:inherit;
 }
 .closeButton[data-color=invert-neutral]:hover{
   opacity:unset;
@@ -146,12 +151,11 @@
   outline-color:var(--sys-available-on-complementary, #fdfdfd);
 }
 .closeButton[data-color=invert-neutral]:active{
-  opacity:var(--opacity-a080, 0.8);
   background-color:var(--sys-opacity-activated, rgba(253, 253, 253, 0.3215686275));
 }
 .closeButton[data-color=primary]{
   color:var(--sys-primary-on-accent, #fdfbff);
-  opacity:var(--opacity-a080, 0.8);
+  background-color:inherit;
 }
 .closeButton[data-color=primary]:hover{
   opacity:unset;
@@ -166,12 +170,11 @@
   outline-color:var(--sys-available-on-complementary, #fdfdfd);
 }
 .closeButton[data-color=primary]:active{
-  opacity:var(--opacity-a080, 0.8);
   background-color:var(--sys-opacity-activated, rgba(253, 253, 253, 0.3215686275));
 }
 .closeButton[data-color=red]{
   color:var(--sys-red-on-accent, #fffbfa);
-  opacity:var(--opacity-a080, 0.8);
+  background-color:inherit;
 }
 .closeButton[data-color=red]:hover{
   opacity:unset;
@@ -186,12 +189,11 @@
   outline-color:var(--sys-available-on-complementary, #fdfdfd);
 }
 .closeButton[data-color=red]:active{
-  opacity:var(--opacity-a080, 0.8);
   background-color:var(--sys-opacity-activated, rgba(253, 253, 253, 0.3215686275));
 }
 .closeButton[data-color=yellow]{
   color:var(--sys-yellow-on-accent, #54290f);
-  opacity:var(--opacity-a080, 0.8);
+  background-color:inherit;
 }
 .closeButton[data-color=yellow]:hover{
   opacity:unset;
@@ -206,12 +208,11 @@
   outline-color:var(--sys-available-on-complementary, #fdfdfd);
 }
 .closeButton[data-color=yellow]:active{
-  opacity:var(--opacity-a080, 0.8);
   background-color:var(--sys-opacity-activated, rgba(253, 253, 253, 0.3215686275));
 }
 .closeButton[data-color=green]{
   color:var(--sys-green-on-accent, #1f392a);
-  opacity:var(--opacity-a080, 0.8);
+  background-color:inherit;
 }
 .closeButton[data-color=green]:hover{
   opacity:unset;
@@ -226,7 +227,6 @@
   outline-color:var(--sys-available-on-complementary, #fdfdfd);
 }
 .closeButton[data-color=green]:active{
-  opacity:var(--opacity-a080, 0.8);
   background-color:var(--sys-opacity-activated, rgba(253, 253, 253, 0.3215686275));
 }
 

package/dist/constants.d.ts

@@ -1,3 +1,5 @@
+import { LinkProps } from '@snack-uikit/link';
+import { ValueOf } from '@snack-uikit/utils';
 export declare const APPEARANCE: {
     readonly Neutral: "neutral";
     readonly Primary: "primary";
@@ -5,10 +7,4 @@ export declare const APPEARANCE: {
     readonly Warning: "warning";
     readonly Success: "success";
 };
-export declare const APPEARANCE_TO_COLOR_MAP: {
-    readonly neutral: "neutral";
-    readonly primary: "primary";
-    readonly error: "red";
-    readonly warning: "yellow";
-    readonly success: "green";
-};
+export declare const APPEARANCE_TO_COLOR_MAP: Record<ValueOf<typeof APPEARANCE>, LinkProps['appearance']>;

package/dist/constants.js

@@ -1,4 +1,3 @@
-import { ON_COLOR } from '@snack-uikit/link';
 export const APPEARANCE = {
     Neutral: 'neutral',
     Primary: 'primary',
@@ -7,9 +6,9 @@ export const APPEARANCE = {
     Success: 'success',
 };
 export const APPEARANCE_TO_COLOR_MAP = {
-    [APPEARANCE.Neutral]: ON_COLOR.Neutral,
-    [APPEARANCE.Primary]: ON_COLOR.Primary,
-    [APPEARANCE.Error]: ON_COLOR.Red,
-    [APPEARANCE.Warning]: ON_COLOR.Yellow,
-    [APPEARANCE.Success]: ON_COLOR.Green,
+    [APPEARANCE.Neutral]: 'neutral',
+    [APPEARANCE.Primary]: 'primary',
+    [APPEARANCE.Error]: 'red',
+    [APPEARANCE.Warning]: 'yellow',
+    [APPEARANCE.Success]: 'green',
 };

package/dist/helperComponents/AlertButton/AlertButton.d.ts

@@ -0,0 +1,9 @@
+import { MouseEvent, ReactElement } from 'react';
+import { Appearance } from '../../types';
+export type AlertButtonProps = {
+    appearance: Appearance;
+    label: string;
+    icon?: ReactElement;
+    onClick(e: MouseEvent<HTMLButtonElement>): void;
+};
+export declare function AlertButton({ appearance, label, icon, onClick }: AlertButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/helperComponents/AlertButton/AlertButton.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { APPEARANCE_TO_COLOR_MAP } from '../../constants';
+import styles from './styles.module.css';
+export function AlertButton({ appearance, label, icon, onClick }) {
+    return (_jsxs("button", { onClick: onClick, className: styles.alertButton, "data-color": APPEARANCE_TO_COLOR_MAP[appearance], "data-test-id": 'alert__action-button', children: [_jsx("span", { children: label }), icon] }));
+}

package/dist/helperComponents/AlertButton/index.d.ts

@@ -0,0 +1 @@
+export * from './AlertButton';

package/dist/helperComponents/AlertButton/index.js

@@ -0,0 +1 @@
+export * from './AlertButton';

package/dist/helperComponents/AlertButton/styles.module.css

@@ -0,0 +1,75 @@
+.alertButton{
+  height:var(--size-alert-button, 24px);
+  gap:var(--space-alert-button-gap, 4px);
+  border-radius:var(--radius-alert-button, 8px);
+  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);
+  font-size:var(--sans-label-l-font-size, 14px);
+  letter-spacing:var(--sans-label-l-letter-spacing, -0.1px);
+  paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
+  cursor:pointer;
+  display:flex;
+  align-items:center;
+  box-sizing:border-box;
+  margin:0;
+  white-space:nowrap;
+  background:none;
+  border:0;
+}
+.alertButton svg{
+  width:var(--dimension-3m, 24px) !important;
+  height:var(--dimension-3m, 24px) !important;
+}
+.alertButton: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, #131313);
+  outline-offset:var(--spacing-state-focus-offset, 2px);
+}
+.alertButton[data-color=neutral]{
+  color:var(--sys-neutral-text-support, #565656);
+}
+.alertButton[data-color=neutral]:hover, .alertButton[data-color=neutral]:focus-visible{
+  color:var(--sys-neutral-text-light, #898989);
+}
+.alertButton[data-color=neutral]:active{
+  color:var(--sys-neutral-text-main, #333333);
+}
+.alertButton[data-color=primary]{
+  color:var(--sys-primary-text-support, #5b4796);
+}
+.alertButton[data-color=primary]:hover, .alertButton[data-color=primary]:focus-visible{
+  color:var(--sys-primary-text-light, #997adc);
+}
+.alertButton[data-color=primary]:active{
+  color:var(--sys-primary-text-main, #382a62);
+}
+.alertButton[data-color=red]{
+  color:var(--sys-red-text-support, #a93936);
+}
+.alertButton[data-color=red]:hover, .alertButton[data-color=red]:focus-visible{
+  color:var(--sys-red-text-light, #ec7465);
+}
+.alertButton[data-color=red]:active{
+  color:var(--sys-red-text-main, #621c1e);
+}
+.alertButton[data-color=yellow]{
+  color:var(--sys-yellow-text-support, #80461b);
+}
+.alertButton[data-color=yellow]:hover, .alertButton[data-color=yellow]:focus-visible{
+  color:var(--sys-yellow-text-light, #be7d3c);
+}
+.alertButton[data-color=yellow]:active{
+  color:var(--sys-yellow-text-main, #54290f);
+}
+.alertButton[data-color=green]{
+  color:var(--sys-green-text-support, #335747);
+}
+.alertButton[data-color=green]:hover, .alertButton[data-color=green]:focus-visible{
+  color:var(--sys-green-text-light, #4d9e80);
+}
+.alertButton[data-color=green]:active{
+  color:var(--sys-green-text-main, #1f392a);
+}

package/dist/helperComponents/AlertTopButton/styles.module.css

@@ -17,8 +17,7 @@
   margin:0;
   margin-left:auto;
   white-space:nowrap;
-  opacity:var(--opacity-a080, 0.8);
-  background:none;
+  background:var(--sys-opacity-enabled, rgba(253, 253, 253, 0.1607843137));
   border:0;
 }
 .alertTopButton svg{
@@ -33,12 +32,10 @@
   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, );
-  opacity:unset;
   background-color:var(--sys-opacity-hovered, rgba(253, 253, 253, 0.2392156863));
   outline-color:var(--sys-available-on-complementary, #fdfdfd);
 }
 .alertTopButton:active{
-  opacity:var(--opacity-a080, 0.8);
   background-color:var(--sys-opacity-activated, rgba(253, 253, 253, 0.3215686275));
 }
 .alertTopButton[data-color=invert-neutral]{

package/dist/helperComponents/index.d.ts

@@ -1 +1,2 @@
+export * from './AlertButton';
 export * from './AlertTopButton';

package/dist/helperComponents/index.js

@@ -1 +1,2 @@
+export * from './AlertButton';
 export * from './AlertTopButton';

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Alert",
-  "version": "0.7.3",
+  "version": "0.8.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -33,10 +33,10 @@
   "scripts": {},
   "dependencies": {
     "@snack-uikit/icons": "0.19.2",
-    "@snack-uikit/link": "0.9.3",
-    "@snack-uikit/truncate-string": "0.4.3",
+    "@snack-uikit/link": "0.10.0",
+    "@snack-uikit/truncate-string": "0.4.4",
     "@snack-uikit/utils": "3.2.0",
     "classnames": "2.3.2"
   },
-  "gitHead": "420ccb07e016ae79a8b783e88c24f2045fadc026"
+  "gitHead": "57c597a3eebaf6528c0c61b6b27dd244753de1cf"
 }

package/src/components/Alert/Alert.tsx

@@ -6,6 +6,7 @@ import { TruncateString } from '@snack-uikit/truncate-string';
 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 { getIcon } from '../../utils';
 import styles from './styles.module.scss';
@@ -27,6 +28,8 @@ export type AlertProps = WithSupportProps<{
   appearance?: Appearance;
   /** CSS-класс */
   className?: string;
+  /** Свойства, описывающие кнопки в футере алерта */
+  action?: Pick<AlertButtonProps, 'label' | 'onClick' | 'icon'>[];
 }>;
 
 /**
@@ -41,6 +44,7 @@ export function Alert({
   onClose,
   appearance = APPEARANCE.Neutral,
   className,
+  action,
   ...rest
 }: AlertProps) {
   return (
@@ -49,42 +53,52 @@ export function Alert({
       {...extractSupportProps(rest)}
       data-color={APPEARANCE_TO_COLOR_MAP[appearance]}
     >
-      {icon && (
-        <div className={styles.icon} data-color={APPEARANCE_TO_COLOR_MAP[appearance]} data-test-id='alert__icon'>
-          {getIcon(appearance)}
-        </div>
-      )}
-      <div className={styles.content}>
-        <div className={styles.textlayout}>
+      <div className={styles.body}>
+        {icon && (
+          <div className={styles.icon} data-color={APPEARANCE_TO_COLOR_MAP[appearance]} data-test-id='alert__icon'>
+            {getIcon(appearance)}
+          </div>
+        )}
+
+        <div className={styles.contentLayout}>
           {title && <TruncateString text={title} maxLines={1} className={styles.title} data-test-id='alert__title' />}
           <span data-test-id='alert__description' className={styles.description}>
             {description}
           </span>
+
+          {link && (
+            <span>
+              <Link
+                href={href}
+                text={link}
+                textMode='default'
+                external
+                appearance={APPEARANCE_TO_COLOR_MAP[appearance]}
+                size='m'
+                data-test-id='alert__link'
+              />
+            </span>
+          )}
         </div>
 
-        {link && (
-          <span>
-            <Link
-              href={href}
-              text={link}
-              onSurface='decor'
-              external
-              onColor={APPEARANCE_TO_COLOR_MAP[appearance]}
-              size='m'
-              data-test-id='alert__link'
-            />
-          </span>
+        {onClose && (
+          <button
+            onClick={onClose}
+            className={styles.closeButton}
+            data-color={APPEARANCE_TO_COLOR_MAP[appearance]}
+            data-test-id='alert__close-button'
+          >
+            <CrossSVG />
+          </button>
         )}
       </div>
-      {onClose && (
-        <button
-          onClick={onClose}
-          className={styles.closeButton}
-          data-color={APPEARANCE_TO_COLOR_MAP[appearance]}
-          data-test-id='alert__close-button'
-        >
-          <CrossSVG />
-        </button>
+
+      {Array.isArray(action) && action.length > 0 && (
+        <div className={styles.footer}>
+          {action.map(buttonProps => (
+            <AlertButton key={buttonProps.label} {...buttonProps} appearance={appearance} />
+          ))}
+        </div>
       )}
     </div>
   );

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

@@ -3,13 +3,15 @@
 
 $colors: 'neutral', 'primary', 'red', 'yellow', 'green';
 
-
 .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 {
@@ -20,26 +22,28 @@ $colors: 'neutral', 'primary', 'red', 'yellow', 'green';
    }
 }
 
-.title {
-  @include composite-var($sans-title-s);
+.body {
+  @include composite-var($alert-container-body);
 
-  color: $sys-neutral-text-main;
-}
-
-.textlayout {
-  @include composite-var($alert-container-text-layout);
-
-  overflow: hidden;
+  display: flex;
+  box-sizing: border-box;
+  width: 100%
 }
 
-.description {
-  @include composite-var($sans-body-m);
+.icon {
+  @each $color in $colors {
+    &[data-color='#{$color}'] {
+      color: simple-var($theme-variables, 'sys', $color, 'accent-default');
+    }
+  }
 
-  color: $sys-neutral-text-support;
-  word-wrap: break-word;
+  svg {
+    width: $icon-s !important; /* stylelint-disable-line declaration-no-important */
+    height: $icon-s !important; /* stylelint-disable-line declaration-no-important */
+  }
 }
 
-.content {
+.contentLayout {
   @include composite-var($alert-container-content-layout);
 
   display: flex;
@@ -48,17 +52,17 @@ $colors: 'neutral', 'primary', 'red', 'yellow', 'green';
   min-width: 0;
 }
 
-.icon {
-  @each $color in $colors { 
-    &[data-color='#{$color}'] {
-      color: simple-var($theme-variables, 'sys', $color, 'accent-default');
-    }
-  }  
+.title {
+  @include composite-var($sans-title-s);
 
-  svg {
-    width: $icon-s !important; /* stylelint-disable-line declaration-no-important */
-    height: $icon-s !important; /* stylelint-disable-line declaration-no-important */
-  }
+  color: $sys-neutral-text-main;
+}
+
+.description {
+  @include composite-var($sans-body-m);
+
+  color: $sys-neutral-text-support;
+  word-wrap: break-word;
 }
 
 .closeButton {
@@ -83,24 +87,36 @@ $colors: 'neutral', 'primary', 'red', 'yellow', 'green';
     height: $icon-s !important; /* stylelint-disable-line declaration-no-important */
   }
 
-  @each $color in $colors { 
+  @each $color in $colors {
     &[data-color='#{$color}'] {
-      color: simple-var($theme-variables, 'sys', $color, 'text-light');
-      
+      color: simple-var($theme-variables, 'sys', $color, 'text-support');
+
       &:hover {
-        color: simple-var($theme-variables, 'sys', $color, 'text-support');
+        color: simple-var($theme-variables, 'sys', $color, 'text-light');
       }
-    
+
       &:focus-visible {
         @include outline-var($container-focused-s);
 
-        color: simple-var($theme-variables, 'sys', $color, 'text-support');
+        color: simple-var($theme-variables, 'sys', $color, 'text-light');
         outline-color: $sys-available-complementary;
       }
-      
+
       &:active {
         color: simple-var($theme-variables, 'sys', $color, 'text-main');
       }
     }
-  } 
-}
+  }
+}
+
+.footer {
+  @include composite-var($alert-container-footer);
+
+  position: relative;
+
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: center;
+
+  width: 100%;
+}

package/src/components/AlertTop/AlertTop.tsx

@@ -95,11 +95,11 @@ export function AlertTop({
           {link && (
             <span>
               <Link
-                onSurface='accent'
+                textMode='on-accent'
                 href={href}
                 text={link}
                 external
-                onColor={APPEARANCE_TO_COLOR_MAP[appearance]}
+                appearance={APPEARANCE_TO_COLOR_MAP[appearance]}
                 size='m'
                 data-test-id='alert-top__link'
               />

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

@@ -24,6 +24,10 @@ $colors: 'invert-neutral', 'primary', 'red', 'yellow', 'green';
 }
 
 .icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
   @each $color in $colors {
     &[data-color='#{$color}'] {
       @if $color == 'invert-neutral'{
@@ -127,7 +131,7 @@ $colors: 'invert-neutral', 'primary', 'red', 'yellow', 'green';
         color: simple-var($theme-variables, 'sys', $color, 'on-accent');
       }
       
-      opacity: $opacity-a080;
+      background-color: inherit;
 
       &:hover {
         opacity: unset;
@@ -143,7 +147,6 @@ $colors: 'invert-neutral', 'primary', 'red', 'yellow', 'green';
       }
 
       &:active {
-        opacity: $opacity-a080;
         background-color: $sys-opacity-activated;
       } 
     }

package/src/constants.ts

@@ -1,4 +1,5 @@
-import { ON_COLOR } from '@snack-uikit/link';
+import { LinkProps } from '@snack-uikit/link';
+import { ValueOf } from '@snack-uikit/utils';
 
 export const APPEARANCE = {
   Neutral: 'neutral',
@@ -8,10 +9,10 @@ export const APPEARANCE = {
   Success: 'success',
 } as const;
 
-export const APPEARANCE_TO_COLOR_MAP = {
-  [APPEARANCE.Neutral]: ON_COLOR.Neutral,
-  [APPEARANCE.Primary]: ON_COLOR.Primary,
-  [APPEARANCE.Error]: ON_COLOR.Red,
-  [APPEARANCE.Warning]: ON_COLOR.Yellow,
-  [APPEARANCE.Success]: ON_COLOR.Green,
+export const APPEARANCE_TO_COLOR_MAP: Record<ValueOf<typeof APPEARANCE>, LinkProps['appearance']> = {
+  [APPEARANCE.Neutral]: 'neutral',
+  [APPEARANCE.Primary]: 'primary',
+  [APPEARANCE.Error]: 'red',
+  [APPEARANCE.Warning]: 'yellow',
+  [APPEARANCE.Success]: 'green',
 } as const;

package/src/helperComponents/AlertButton/AlertButton.tsx

@@ -0,0 +1,26 @@
+import { MouseEvent, ReactElement } from 'react';
+
+import { APPEARANCE_TO_COLOR_MAP } from '../../constants';
+import { Appearance } from '../../types';
+import styles from './styles.module.scss';
+
+export type AlertButtonProps = {
+  appearance: Appearance;
+  label: string;
+  icon?: ReactElement;
+  onClick(e: MouseEvent<HTMLButtonElement>): void;
+};
+
+export function AlertButton({ appearance, label, icon, onClick }: AlertButtonProps) {
+  return (
+    <button
+      onClick={onClick}
+      className={styles.alertButton}
+      data-color={APPEARANCE_TO_COLOR_MAP[appearance]}
+      data-test-id='alert__action-button'
+    >
+      <span>{label}</span>
+      {icon}
+    </button>
+  );
+}

package/src/helperComponents/AlertButton/index.ts

@@ -0,0 +1 @@
+export * from './AlertButton';

package/src/helperComponents/AlertButton/styles.module.scss

@@ -0,0 +1,49 @@
+@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';
+
+.alertButton {
+  @include composite-var($alert-button-button-action);
+  @include composite-var($sans-label-l);
+
+  cursor: pointer;
+
+  display: flex;
+  align-items: center;
+
+  box-sizing: border-box;
+  margin: 0;
+
+  white-space: nowrap;
+
+  background: none;
+  border: 0;
+
+  svg {
+    width: $icon-s !important; /* stylelint-disable-line declaration-no-important */
+    height: $icon-s !important; /* stylelint-disable-line declaration-no-important */
+  }
+
+  &:focus-visible {
+    @include outline-var($container-focused-s);
+
+    outline-color: $sys-available-complementary;
+    outline-offset: $spacing-state-focus-offset;
+  }
+
+  @each $color in $colors {
+    &[data-color='#{$color}'] {
+      color: simple-var($theme-variables, 'sys', $color, 'text-support');
+
+      &:hover,
+      &:focus-visible {
+        color: simple-var($theme-variables, 'sys', $color, 'text-light');
+      }
+
+      &:active {
+        color: simple-var($theme-variables, 'sys', $color, 'text-main');
+      }
+    }
+  }
+}

package/src/helperComponents/AlertTopButton/styles.module.scss

@@ -18,8 +18,7 @@ $colors: 'invert-neutral', 'primary', 'red', 'yellow', 'green';
 
   white-space: nowrap;
 
-  opacity: $opacity-a080;
-  background: none;
+  background: $sys-opacity-enabled;
   border: 0;
 
   svg {
@@ -34,12 +33,10 @@ $colors: 'invert-neutral', 'primary', 'red', 'yellow', 'green';
   &:focus-visible {
     @include outline-var($container-focused-s);
 
-    opacity: unset;
     background-color: $sys-opacity-hovered;
     outline-color: $sys-available-on-complementary;
   }
   &:active {
-    opacity: $opacity-a080;
     background-color: $sys-opacity-activated;
   }
 

package/src/helperComponents/index.ts

@@ -1 +1,2 @@
+export * from './AlertButton';
 export * from './AlertTopButton';