@snack-uikit/alert 0.8.8-preview-1fcf96b1.0 → 0.9.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.9.0 (2024-03-22)
+
+
+### BREAKING CHANGES
+
+
+* **FF-4556:** link/action(ex button) props was union; add link onClick ([314aab0](https://github.com/cloud-ru-tech/snack-uikit/commit/314aab0db20d73957fa58e09f1a604469a734d40))
+
+
+
+
 ## 0.8.7 (2024-02-29)
 
 ### Only dependencies have been changed

package/README.md

@@ -17,9 +17,10 @@ import { InfoFilledSVG } from '@snack-uikit/icons';
 
 <Alert
   appearance='neutral'
-  link='Link Text'
-  href='https://cloud.ru/'
-  icon={true}
+  link={{
+    text: 'Link text',
+    href: 'https://cloud.ru/',
+  }}
   title='Title'
   description='Title description'
   onClose={() => console.log('alert')}
@@ -30,15 +31,18 @@ import { InfoFilledSVG } from '@snack-uikit/icons';
 
 <AlertTop
   appearance='neutral'
-  link='Link Text'
-  href='https://cloud.ru/'
-  closeable={true}
-  icon={true}
+  link={{
+    text: 'Link text',
+    href: 'https://cloud.ru/',
+  }}
+  closeable
   title='Title'
   description='Title description'
-  buttonText='Button Text'
-  buttonOnClick={() => console.log('Button Clicked')}
-  buttonIcon={<InfoFilledSVG />}
+  action={{
+    text: 'Button Text',
+    icon: <PlaceholderSVG />,
+    onClick: () => {},
+  }}
   onClose={() => console.log('alert top')}
 />;
 ```
@@ -53,12 +57,11 @@ import { InfoFilledSVG } from '@snack-uikit/icons';
 | description* | `string` | - | Описание |
 | icon | `boolean` | true | Отображать иконку |
 | title | `string` | - | Заголовок |
-| link | `string` | - | Текст ссылки |
-| href | `string` | - | Ссылка |
+| link | `Pick<LinkProps, "text" \| "target" \| "onClick" \| "href">` | - | Cсылка |
 | onClose | `() => void` | - | Колбек закрытия |
 | appearance | enum Appearance: `"neutral"`, `"primary"`, `"error"`, `"warning"`, `"success"` | neutral | Внешний вид |
 | className | `string` | - | CSS-класс |
-| action | `Pick<AlertButtonProps, "icon" \| "label" \| "onClick">[]` | - | Свойства, описывающие кнопки в футере алерта |
+| actions | `{ primary: Omit<AlertButtonProps, "appearance">; secondary?: Omit<AlertButtonProps, "appearance">; }` | - | Кнопки в футере алерта |
 ## AlertTop
 Компонент для отображения уведомления вверху экрана.
 ### Props
@@ -67,13 +70,10 @@ import { InfoFilledSVG } from '@snack-uikit/icons';
 | description* | `string` | - | Описание |
 | icon | `boolean` | true | Отображать иконку |
 | title | `string` | - | Заголовок |
-| link | `string` | - | Текст ссылки |
-| href | `string` | - | Ссылка |
+| link | `Pick<LinkProps, "text" \| "target" \| "onClick" \| "href">` | - | Cсылка |
+| action | `AlertButtonProps` | - | Кнопка дополнительного действия |
 | onClose | `() => void` | - | Колбек закрытия |
 | appearance | enum Appearance: `"neutral"`, `"primary"`, `"error"`, `"warning"`, `"success"` | neutral | Внешний вид |
-| buttonText | `string` | - | Текст кнопки |
-| buttonOnClick | `() => void` | - | Колбек клика по кнопке |
-| buttonIcon | `ReactElement<any, string \| JSXElementConstructor<any>>` | - | Иконка в кнопке |
 | className | `string` | - | CSS-класс |
 
 

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

@@ -1,3 +1,4 @@
+import { LinkProps } from '@snack-uikit/link';
 import { WithSupportProps } from '@snack-uikit/utils';
 import { AlertButtonProps } from '../../helperComponents';
 import { Appearance } from '../../types';
@@ -8,20 +9,21 @@ export type AlertProps = WithSupportProps<{
     title?: string;
     /** Описание */
     description: string;
-    /** Текст ссылки */
-    link?: string;
-    /** Ссылка */
-    href?: string;
+    /** Cсылка */
+    link?: Pick<LinkProps, 'text' | 'target' | 'onClick' | 'href'>;
     /** Колбек закрытия */
     onClose?: () => void;
     /** Внешний вид */
     appearance?: Appearance;
     /** CSS-класс */
     className?: string;
-    /** Свойства, описывающие кнопки в футере алерта */
-    action?: Pick<AlertButtonProps, 'label' | 'onClick' | 'icon'>[];
+    /** Кнопки в футере алерта */
+    actions?: {
+        primary: Omit<AlertButtonProps, 'appearance'>;
+        secondary?: Omit<AlertButtonProps, 'appearance'>;
+    };
 }>;
 /**
  * Компонент для отображения уведомления.
  */
-export declare function Alert({ icon, title, href, link, description, onClose, appearance, className, action, ...rest }: AlertProps): import("react/jsx-runtime").JSX.Element;
+export declare function Alert({ icon, title, link, description, onClose, appearance, className, actions, ...rest }: AlertProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Alert/Alert.js

@@ -23,6 +23,6 @@ import styles from './styles.module.css';
  * Компонент для отображения уведомления.
  */
 export function Alert(_a) {
-    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))) }))] })));
+    var { icon = true, title, link, description, onClose, appearance = APPEARANCE.Neutral, className, actions } = _a, rest = __rest(_a, ["icon", "title", "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: 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({}, link, { textMode: 'default', external: true, appearance: APPEARANCE_TO_COLOR_MAP[appearance], 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' })))] }))] })));
 }

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

@@ -40,6 +40,10 @@
   width:100%;
 }
 
+.icon{
+  width:var(--size-icon-container-s, 24px);
+  height:var(--size-icon-container-s, 24px);
+}
 .icon[data-color=neutral]{
   color:var(--sys-neutral-accent-default, #6f717c);
 }
@@ -56,8 +60,8 @@
   color:var(--sys-green-accent-default, #57b762);
 }
 .icon svg{
-  width:var(--size-icon-container-s, 24px) !important;
-  height:var(--size-icon-container-s, 24px) !important;
+  max-width:var(--size-icon-container-s, 24px);
+  max-height:var(--size-icon-container-s, 24px);
 }
 
 .contentLayout{
@@ -89,106 +93,6 @@
   word-wrap:break-word;
 }
 
-.closeButton{
-  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;
-  justify-content:center;
-  box-sizing:border-box;
-  margin:0;
-  margin-left:auto;
-  padding:0;
-  background:none;
-  border:none;
-}
-.closeButton svg{
-  width:var(--size-icon-container-s, 24px) !important;
-  height:var(--size-icon-container-s, 24px) !important;
-}
-.closeButton[data-color=neutral]{
-  color:var(--sys-neutral-text-support, #656771);
-}
-.closeButton[data-color=neutral]:hover{
-  color:var(--sys-neutral-text-light, #868892);
-}
-.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-light, #868892);
-  outline-color:var(--sys-available-complementary, #141415);
-}
-.closeButton[data-color=neutral]:active{
-  color:var(--sys-neutral-text-main, #33333b);
-}
-.closeButton[data-color=primary]{
-  color:var(--sys-primary-text-support, #5b4796);
-}
-.closeButton[data-color=primary]:hover{
-  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-light, #997adc);
-  outline-color:var(--sys-available-complementary, #141415);
-}
-.closeButton[data-color=primary]:active{
-  color:var(--sys-primary-text-main, #382a62);
-}
-.closeButton[data-color=red]{
-  color:var(--sys-red-text-support, #ab423e);
-}
-.closeButton[data-color=red]:hover{
-  color:var(--sys-red-text-light, #ea6658);
-}
-.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-light, #ea6658);
-  outline-color:var(--sys-available-complementary, #141415);
-}
-.closeButton[data-color=red]:active{
-  color:var(--sys-red-text-main, #621c1b);
-}
-.closeButton[data-color=yellow]{
-  color:var(--sys-yellow-text-support, #a57b0e);
-}
-.closeButton[data-color=yellow]:hover{
-  color:var(--sys-yellow-text-light, #ddb035);
-}
-.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-light, #ddb035);
-  outline-color:var(--sys-available-complementary, #141415);
-}
-.closeButton[data-color=yellow]:active{
-  color:var(--sys-yellow-text-main, #5e3d06);
-}
-.closeButton[data-color=green]{
-  color:var(--sys-green-text-support, #568a56);
-}
-.closeButton[data-color=green]:hover{
-  color:var(--sys-green-text-light, #67ba6e);
-}
-.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-light, #67ba6e);
-  outline-color:var(--sys-available-complementary, #141415);
-}
-.closeButton[data-color=green]:active{
-  color:var(--sys-green-text-main, #323f27);
-}
-
 .footer{
   gap:var(--space-alert-container-footer-gap, 16px);
   position:relative;

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

@@ -1,5 +1,6 @@
-import { ReactElement } from 'react';
+import { LinkProps } from '@snack-uikit/link';
 import { WithSupportProps } from '@snack-uikit/utils';
+import { AlertButtonProps } from '../../helperComponents';
 import { Appearance } from '../../types';
 export type AlertTopProps = WithSupportProps<{
     /** Отображать иконку */
@@ -8,24 +9,18 @@ export type AlertTopProps = WithSupportProps<{
     title?: string;
     /** Описание */
     description: string;
-    /** Текст ссылки */
-    link?: string;
-    /** Ссылка */
-    href?: string;
+    /** Cсылка */
+    link?: Pick<LinkProps, 'text' | 'target' | 'onClick' | 'href'>;
+    /** Кнопка дополнительного действия */
+    action?: AlertButtonProps;
     /** Колбек закрытия */
     onClose?: () => void;
     /** Внешний вид */
     appearance?: Appearance;
-    /** Текст кнопки */
-    buttonText?: string;
-    /** Колбек клика по кнопке */
-    buttonOnClick?: () => void;
-    /** Иконка в кнопке */
-    buttonIcon?: ReactElement;
     /** CSS-класс */
     className?: string;
 }>;
 /**
  * Компонент для отображения уведомления вверху экрана.
  */
-export declare function AlertTop({ icon, title, description, link, href, onClose, appearance, buttonText, buttonOnClick, buttonIcon, className, ...rest }: AlertTopProps): import("react/jsx-runtime").JSX.Element;
+export declare function AlertTop({ icon, title, description, link, onClose, appearance, action, className, ...rest }: AlertTopProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/AlertTop/AlertTop.js

@@ -16,7 +16,7 @@ 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 { AlertTopButton } from '../../helperComponents';
+import { AlertButton } from '../../helperComponents';
 import { getIcon } from '../../utils';
 import { APPEARANCE_TO_COLOR_MAP_INVERT } from './constants';
 import styles from './styles.module.css';
@@ -24,6 +24,6 @@ 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, { 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, {}) }))] })] })));
+    var { icon = true, title, description, link, onClose, appearance = APPEARANCE.Neutral, action, className } = _a, rest = __rest(_a, ["icon", "title", "description", "link", "onClose", "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: 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({}, link, { textMode: 'on-accent', external: true, appearance: APPEARANCE_TO_COLOR_MAP[appearance], 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/components/AlertTop/styles.module.css

@@ -120,118 +120,4 @@
   display:flex;
   gap:var(--dimension-2m, 16px);
   align-items:center;
-}
-
-.closeButton{
-  border-radius:var(--radius-alert-top-button, 12px);
-  height:var(--size-alert-top-button, 32px);
-  width:var(--size-alert-top-button, 32px);
-  cursor:pointer;
-  display:flex;
-  align-items:center;
-  justify-content:center;
-  box-sizing:border-box;
-  margin:0;
-  padding:0;
-  background:none;
-  border:none;
-}
-.closeButton svg{
-  width:var(--size-icon-container-s, 24px) !important;
-  height:var(--size-icon-container-s, 24px) !important;
-}
-.closeButton[data-color=invert-neutral]{
-  color:var(--sys-invert-neutral-text-main, #e8eaf1);
-  background-color:inherit;
-}
-.closeButton[data-color=invert-neutral]:hover{
-  opacity:unset;
-  background-color:var(--sys-opacity-hovered, rgba(255, 255, 255, 0.2392156863));
-}
-.closeButton[data-color=invert-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, );
-  opacity:unset;
-  background-color:var(--sys-opacity-hovered, rgba(255, 255, 255, 0.2392156863));
-  outline-color:var(--sys-available-on-complementary, #ffffff);
-}
-.closeButton[data-color=invert-neutral]:active{
-  background-color:var(--sys-opacity-activated, rgba(255, 255, 255, 0.3215686275));
-}
-.closeButton[data-color=primary]{
-  color:var(--sys-primary-on-accent, #fdfbff);
-  background-color:inherit;
-}
-.closeButton[data-color=primary]:hover{
-  opacity:unset;
-  background-color:var(--sys-opacity-hovered, rgba(255, 255, 255, 0.2392156863));
-}
-.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, );
-  opacity:unset;
-  background-color:var(--sys-opacity-hovered, rgba(255, 255, 255, 0.2392156863));
-  outline-color:var(--sys-available-on-complementary, #ffffff);
-}
-.closeButton[data-color=primary]:active{
-  background-color:var(--sys-opacity-activated, rgba(255, 255, 255, 0.3215686275));
-}
-.closeButton[data-color=red]{
-  color:var(--sys-red-on-accent, #fffbf9);
-  background-color:inherit;
-}
-.closeButton[data-color=red]:hover{
-  opacity:unset;
-  background-color:var(--sys-opacity-hovered, rgba(255, 255, 255, 0.2392156863));
-}
-.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, );
-  opacity:unset;
-  background-color:var(--sys-opacity-hovered, rgba(255, 255, 255, 0.2392156863));
-  outline-color:var(--sys-available-on-complementary, #ffffff);
-}
-.closeButton[data-color=red]:active{
-  background-color:var(--sys-opacity-activated, rgba(255, 255, 255, 0.3215686275));
-}
-.closeButton[data-color=yellow]{
-  color:var(--sys-yellow-on-accent, #5e3d06);
-  background-color:inherit;
-}
-.closeButton[data-color=yellow]:hover{
-  opacity:unset;
-  background-color:var(--sys-opacity-hovered, rgba(255, 255, 255, 0.2392156863));
-}
-.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, );
-  opacity:unset;
-  background-color:var(--sys-opacity-hovered, rgba(255, 255, 255, 0.2392156863));
-  outline-color:var(--sys-available-on-complementary, #ffffff);
-}
-.closeButton[data-color=yellow]:active{
-  background-color:var(--sys-opacity-activated, rgba(255, 255, 255, 0.3215686275));
-}
-.closeButton[data-color=green]{
-  color:var(--sys-green-on-accent, #fcfefa);
-  background-color:inherit;
-}
-.closeButton[data-color=green]:hover{
-  opacity:unset;
-  background-color:var(--sys-opacity-hovered, rgba(255, 255, 255, 0.2392156863));
-}
-.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, );
-  opacity:unset;
-  background-color:var(--sys-opacity-hovered, rgba(255, 255, 255, 0.2392156863));
-  outline-color:var(--sys-available-on-complementary, #ffffff);
-}
-.closeButton[data-color=green]:active{
-  background-color:var(--sys-opacity-activated, rgba(255, 255, 255, 0.3215686275));
 }

package/dist/helperComponents/AlertButton.d.ts

@@ -0,0 +1,19 @@
+import { MouseEvent, ReactElement } from 'react';
+import { LinkProps } from '@snack-uikit/link';
+type PrivateAlertButtonProps = {
+    /** Внешний вид */
+    appearance?: LinkProps['appearance'] | 'invert-neutral';
+    /** Текст кнопки */
+    text?: string;
+    /** Иконка в кнопке */
+    icon?: ReactElement;
+    /** Вариант отображения */
+    variant?: 'simple' | 'tonal';
+    /** Колбек клика */
+    onClick?(e: MouseEvent<HTMLButtonElement>): void;
+    /** Дата тест айди */
+    dataTestId?: string;
+};
+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 {};

package/dist/helperComponents/AlertButton.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from './styles.module.css';
+export function AlertButton({ appearance, text, icon, onClick, variant = 'simple', dataTestId, }) {
+    return (_jsxs("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 })] }));
+}

package/dist/helperComponents/index.d.ts

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

package/dist/helperComponents/index.js

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

package/dist/helperComponents/styles.module.css

@@ -0,0 +1,138 @@
+.alertButton{
+  cursor:pointer;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  box-sizing:border-box;
+  margin:0;
+  padding:0;
+  white-space:nowrap;
+  background:none;
+  border:0;
+}
+.alertButton .text{
+  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);
+}
+.alertButton .icon{
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+  width:var(--size-icon-container-s, 24px);
+  height:var(--size-icon-container-s, 24px);
+}
+.alertButton .icon svg{
+  max-width:var(--size-icon-container-s, 24px);
+  max-height:var(--size-icon-container-s, 24px);
+}
+
+.alertButton[data-variant=simple]{
+  height:var(--size-alert-button, 24px);
+  gap:var(--space-alert-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);
+  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, #141415);
+  outline-offset:var(--spacing-state-focus-offset, 2px);
+}
+.alertButton[data-variant=simple][data-appearance=neutral]{
+  color:var(--sys-neutral-text-support, #656771);
+}
+.alertButton[data-variant=simple][data-appearance=neutral]:hover, .alertButton[data-variant=simple][data-appearance=neutral]:focus-visible{
+  color:var(--sys-neutral-text-light, #868892);
+}
+.alertButton[data-variant=simple][data-appearance=neutral]:active{
+  color:var(--sys-neutral-text-main, #33333b);
+}
+.alertButton[data-variant=simple][data-appearance=primary]{
+  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);
+}
+.alertButton[data-variant=simple][data-appearance=primary]:active{
+  color:var(--sys-primary-text-main, #382a62);
+}
+.alertButton[data-variant=simple][data-appearance=red]{
+  color:var(--sys-red-text-support, #ab423e);
+}
+.alertButton[data-variant=simple][data-appearance=red]:hover, .alertButton[data-variant=simple][data-appearance=red]:focus-visible{
+  color:var(--sys-red-text-light, #ea6658);
+}
+.alertButton[data-variant=simple][data-appearance=red]:active{
+  color:var(--sys-red-text-main, #621c1b);
+}
+.alertButton[data-variant=simple][data-appearance=yellow]{
+  color:var(--sys-yellow-text-support, #a57b0e);
+}
+.alertButton[data-variant=simple][data-appearance=yellow]:hover, .alertButton[data-variant=simple][data-appearance=yellow]:focus-visible{
+  color:var(--sys-yellow-text-light, #ddb035);
+}
+.alertButton[data-variant=simple][data-appearance=yellow]:active{
+  color:var(--sys-yellow-text-main, #5e3d06);
+}
+.alertButton[data-variant=simple][data-appearance=green]{
+  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);
+}
+.alertButton[data-variant=simple][data-appearance=green]:active{
+  color:var(--sys-green-text-main, #323f27);
+}
+
+.alertButton[data-variant=tonal]{
+  height:var(--size-alert-top-button, 32px);
+  gap:var(--space-alert-top-button-gap, 4px);
+  border-radius:var(--radius-alert-top-button, 12px);
+  padding-left:var(--space-alert-top-button-horizontal-padding, 12px);
+  padding-right:var(--space-alert-top-button-horizontal-padding, 12px);
+  background:var(--sys-opacity-enabled, rgba(255, 255, 255, 0.1607843137));
+}
+.alertButton[data-variant=tonal][data-icon-only]{
+  border-radius:var(--radius-alert-top-button, 12px);
+  height:var(--size-alert-top-button, 32px);
+  width:var(--size-alert-top-button, 32px);
+  background:none;
+}
+.alertButton[data-variant=tonal]:hover{
+  opacity:unset;
+  background-color:var(--sys-opacity-hovered, rgba(255, 255, 255, 0.2392156863));
+}
+.alertButton[data-variant=tonal]: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, );
+  background-color:var(--sys-opacity-hovered, rgba(255, 255, 255, 0.2392156863));
+  outline-color:var(--sys-available-on-complementary, #ffffff);
+}
+.alertButton[data-variant=tonal]:active{
+  background-color:var(--sys-opacity-activated, rgba(255, 255, 255, 0.3215686275));
+}
+.alertButton[data-variant=tonal][data-appearance=invert-neutral]{
+  color:var(--sys-invert-neutral-text-main, #e8eaf1);
+}
+.alertButton[data-variant=tonal][data-appearance=primary]{
+  color:var(--sys-primary-on-accent, #fdfbff);
+}
+.alertButton[data-variant=tonal][data-appearance=red]{
+  color:var(--sys-red-on-accent, #fffbf9);
+}
+.alertButton[data-variant=tonal][data-appearance=yellow]{
+  color:var(--sys-yellow-on-accent, #5e3d06);
+}
+.alertButton[data-variant=tonal][data-appearance=green]{
+  color:var(--sys-green-on-accent, #fcfefa);
+}

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Alert",
-  "version": "0.8.8-preview-1fcf96b1.0",
+  "version": "0.9.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -33,10 +33,10 @@
   "scripts": {},
   "dependencies": {
     "@snack-uikit/icons": "0.20.1",
-    "@snack-uikit/link": "0.11.5-preview-1fcf96b1.0",
-    "@snack-uikit/truncate-string": "0.4.11-preview-1fcf96b1.0",
+    "@snack-uikit/link": "0.11.4",
+    "@snack-uikit/truncate-string": "0.4.10",
     "@snack-uikit/utils": "3.2.0",
     "classnames": "2.3.2"
   },
-  "gitHead": "6258f32293b256d090f415fbbecd88ac9b037fc8"
+  "gitHead": "75924c55d6a759804ff2de973ba9532a19ad0aa7"
 }