@snack-uikit/alert 0.8.7 → 0.9.0

package/src/components/Alert/Alert.tsx

@@ -1,7 +1,7 @@
 import cn from 'classnames';
 
 import { CrossSVG } from '@snack-uikit/icons';
-import { Link } from '@snack-uikit/link';
+import { Link, LinkProps } from '@snack-uikit/link';
 import { TruncateString } from '@snack-uikit/truncate-string';
 import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
 
@@ -18,18 +18,19 @@ 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'>;
+  };
 }>;
 
 /**
@@ -38,13 +39,12 @@ export type AlertProps = WithSupportProps<{
 export function Alert({
   icon = true,
   title,
-  href,
   link,
   description,
   onClose,
   appearance = APPEARANCE.Neutral,
   className,
-  action,
+  actions,
   ...rest
 }: AlertProps) {
   return (
@@ -62,6 +62,7 @@ export function Alert({
 
         <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>
@@ -69,8 +70,7 @@ export function Alert({
           {link && (
             <span>
               <Link
-                href={href}
-                text={link}
+                {...link}
                 textMode='default'
                 external
                 appearance={APPEARANCE_TO_COLOR_MAP[appearance]}
@@ -82,22 +82,24 @@ export function Alert({
         </div>
 
         {onClose && (
-          <button
+          <AlertButton
             onClick={onClose}
-            className={styles.closeButton}
-            data-color={APPEARANCE_TO_COLOR_MAP[appearance]}
-            data-test-id='alert__close-button'
-          >
-            <CrossSVG />
-          </button>
+            appearance={APPEARANCE_TO_COLOR_MAP[appearance]}
+            icon={<CrossSVG />}
+            variant='simple'
+            dataTestId='alert__close-button'
+          />
         )}
       </div>
 
-      {Array.isArray(action) && action.length > 0 && (
+      {actions && (
         <div className={styles.footer}>
-          {action.map(buttonProps => (
-            <AlertButton key={buttonProps.label} {...buttonProps} appearance={appearance} />
-          ))}
+          {actions.primary && (
+            <AlertButton {...actions.primary} appearance={APPEARANCE_TO_COLOR_MAP[appearance]} variant='simple' />
+          )}
+          {actions?.secondary && (
+            <AlertButton {...actions.secondary} appearance={APPEARANCE_TO_COLOR_MAP[appearance]} variant='simple' />
+          )}
         </div>
       )}
     </div>

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

@@ -19,7 +19,7 @@ $colors: 'neutral', 'primary', 'red', 'yellow', 'green';
       background-color: simple-var($theme-variables, 'sys', $color, 'background');
       border-color: simple-var($theme-variables, 'sys', $color, 'decor-default');
     }
-   }
+  }
 }
 
 .body {
@@ -27,7 +27,7 @@ $colors: 'neutral', 'primary', 'red', 'yellow', 'green';
 
   display: flex;
   box-sizing: border-box;
-  width: 100%
+  width: 100%;
 }
 
 .icon {
@@ -37,9 +37,12 @@ $colors: 'neutral', 'primary', 'red', 'yellow', 'green';
     }
   }
 
+  width: $icon-s;
+  height: $icon-s;
+
   svg {
-    width: $icon-s !important; /* stylelint-disable-line declaration-no-important */
-    height: $icon-s !important; /* stylelint-disable-line declaration-no-important */
+    max-width: $icon-s;
+    max-height: $icon-s;
   }
 }
 
@@ -65,50 +68,6 @@ $colors: 'neutral', 'primary', 'red', 'yellow', 'green';
   word-wrap: break-word;
 }
 
-.closeButton {
-  @include composite-var($alert-button-button-close);
-
-  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;
-
-  svg {
-    width: $icon-s !important; /* stylelint-disable-line declaration-no-important */
-    height: $icon-s !important; /* stylelint-disable-line declaration-no-important */
-  }
-
-  @each $color in $colors {
-    &[data-color='#{$color}'] {
-      color: simple-var($theme-variables, 'sys', $color, 'text-support');
-
-      &:hover {
-        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-light');
-        outline-color: $sys-available-complementary;
-      }
-
-      &:active {
-        color: simple-var($theme-variables, 'sys', $color, 'text-main');
-      }
-    }
-  }
-}
-
 .footer {
   @include composite-var($alert-container-footer);
 

package/src/components/AlertTop/AlertTop.tsx

@@ -1,13 +1,12 @@
 import cn from 'classnames';
-import { ReactElement } from 'react';
 
 import { CrossSVG } from '@snack-uikit/icons';
-import { Link } from '@snack-uikit/link';
+import { Link, LinkProps } from '@snack-uikit/link';
 import { TruncateString } from '@snack-uikit/truncate-string';
 import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
 
 import { APPEARANCE, APPEARANCE_TO_COLOR_MAP } from '../../constants';
-import { AlertTopButton } from '../../helperComponents';
+import { AlertButton, AlertButtonProps } from '../../helperComponents';
 import { Appearance } from '../../types';
 import { getIcon } from '../../utils';
 import { APPEARANCE_TO_COLOR_MAP_INVERT } from './constants';
@@ -20,20 +19,14 @@ 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;
 }>;
@@ -46,12 +39,9 @@ export function AlertTop({
   title,
   description,
   link,
-  href,
   onClose,
   appearance = APPEARANCE.Neutral,
-  buttonText,
-  buttonOnClick,
-  buttonIcon,
+  action,
   className,
   ...rest
 }: AlertTopProps) {
@@ -92,12 +82,12 @@ export function AlertTop({
               {description}
             </span>
           </div>
+
           {link && (
             <span>
               <Link
+                {...link}
                 textMode='on-accent'
-                href={href}
-                text={link}
                 external
                 appearance={APPEARANCE_TO_COLOR_MAP[appearance]}
                 size='m'
@@ -108,24 +98,16 @@ export function AlertTop({
         </div>
       </div>
       <div className={styles.actions}>
-        {buttonText && (
-          <AlertTopButton
-            buttonIcon={buttonIcon}
-            buttonOnClick={buttonOnClick}
-            buttonText={buttonText}
-            appearance={appearance}
-          />
-        )}
+        {action && <AlertButton {...action} appearance={APPEARANCE_TO_COLOR_MAP_INVERT[appearance]} variant='tonal' />}
 
         {onClose && (
-          <button
+          <AlertButton
             onClick={onClose}
-            className={styles.closeButton}
-            data-color={APPEARANCE_TO_COLOR_MAP_INVERT[appearance]}
-            data-test-id='alert-top__close-button'
-          >
-            <CrossSVG />
-          </button>
+            appearance={APPEARANCE_TO_COLOR_MAP_INVERT[appearance]}
+            icon={<CrossSVG />}
+            variant='tonal'
+            dataTestId='alert-top__close-button'
+          />
         )}
       </div>
     </div>

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

@@ -12,11 +12,11 @@ $colors: 'invert-neutral', 'primary', 'red', 'yellow', 'green';
 
   @each $color in $colors {
     &[data-color='#{$color}'] {
-      @if $color == 'invert-neutral'{
-        background-color:$sys-invert-neutral-background;
+      @if $color == 'invert-neutral' {
+        background-color: $sys-invert-neutral-background;
       }
 
-      @else {
+ @else {
         background-color: simple-var($theme-variables, 'sys', $color, 'accent-default');
       }
     }
@@ -30,11 +30,11 @@ $colors: 'invert-neutral', 'primary', 'red', 'yellow', 'green';
 
   @each $color in $colors {
     &[data-color='#{$color}'] {
-      @if $color == 'invert-neutral'{
-        color:$sys-invert-neutral-text-main;
+      @if $color == 'invert-neutral' {
+        color: $sys-invert-neutral-text-main;
       }
 
-      @else {
+ @else {
         color: simple-var($theme-variables, 'sys', $color, 'on-accent');
       }
     }
@@ -51,11 +51,11 @@ $colors: 'invert-neutral', 'primary', 'red', 'yellow', 'green';
 
   @each $color in $colors {
     &[data-color='#{$color}'] {
-      @if $color == 'invert-neutral'{
-        color:$sys-invert-neutral-text-main;
+      @if $color == 'invert-neutral' {
+        color: $sys-invert-neutral-text-main;
       }
 
-      @else {
+ @else {
         color: simple-var($theme-variables, 'sys', $color, 'on-accent');
       }
     }
@@ -69,11 +69,11 @@ $colors: 'invert-neutral', 'primary', 'red', 'yellow', 'green';
 
   @each $color in $colors {
     &[data-color='#{$color}'] {
-      @if $color == 'invert-neutral'{
-        color:$sys-invert-neutral-text-main;
+      @if $color == 'invert-neutral' {
+        color: $sys-invert-neutral-text-main;
       }
 
-      @else {
+ @else {
         color: simple-var($theme-variables, 'sys', $color, 'on-accent');
       }
     }
@@ -85,15 +85,14 @@ $colors: 'invert-neutral', 'primary', 'red', 'yellow', 'green';
   gap: $dimension-2m;
   align-items: center;
   min-width: 0;
-}   
-
+}
 
 .contentLayout {
   @include composite-var($alert-top-container-content-layout);
 
   display: flex;
   flex-direction: column;
-  min-width: 0; 
+  min-width: 0;
 }
 
 .textLayout {
@@ -105,56 +104,3 @@ $colors: 'invert-neutral', 'primary', 'red', 'yellow', 'green';
   gap: $dimension-2m;
   align-items: center;
 }
-
-.closeButton {
-  @include composite-var($alert-top-button-button-close);
-
-  cursor: pointer;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-
-  background: none;
-  border: none;
-
-  svg {
-    width: $icon-s !important; /* stylelint-disable-line declaration-no-important */
-    height: $icon-s !important; /* stylelint-disable-line declaration-no-important */
-  }
-
-  @each $color in $colors {
-    &[data-color='#{$color}'] {
-      @if $color == 'invert-neutral'{
-        color: $sys-invert-neutral-text-main;
-      }
-
-      @else {
-        color: simple-var($theme-variables, 'sys', $color, 'on-accent');
-      }
-      
-      background-color: inherit;
-
-      &:hover {
-        opacity: unset;
-        background-color: $sys-opacity-hovered;
-      }
-
-      &:focus-visible {
-        @include outline-var($container-focused-s);
-
-        opacity: unset;
-        background-color: $sys-opacity-hovered;
-        outline-color: $sys-available-on-complementary;
-      }
-
-      &:active {
-        background-color: $sys-opacity-activated;
-      } 
-    }
-  }
-}

package/src/helperComponents/AlertButton.tsx

@@ -0,0 +1,45 @@
+import { MouseEvent, ReactElement } from 'react';
+
+import { LinkProps } from '@snack-uikit/link';
+
+import styles from './styles.module.scss';
+
+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 function AlertButton({
+  appearance,
+  text,
+  icon,
+  onClick,
+  variant = 'simple',
+  dataTestId,
+}: PrivateAlertButtonProps) {
+  return (
+    <button
+      onClick={onClick}
+      className={styles.alertButton}
+      data-variant={variant}
+      data-appearance={appearance}
+      data-test-id={dataTestId || 'alert__action-button'}
+      data-icon-only={!text || undefined}
+    >
+      {text && <span className={styles.text}>{text}</span>}
+      {icon && <span className={styles.icon}>{icon}</span>}
+    </button>
+  );
+}

package/src/helperComponents/index.ts

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

package/src/helperComponents/styles.module.scss

@@ -0,0 +1,110 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-alert';
+@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';
+
+.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;
+
+  .text {
+    @include composite-var($sans-label-l);
+  }
+
+  .icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    width: $icon-s;
+    height: $icon-s;
+
+    svg {
+      max-width: $icon-s;
+      max-height: $icon-s;
+    }
+  }
+}
+
+.alertButton[data-variant='simple'] {
+  @include composite-var($alert-button-button-action);
+
+  &[data-icon-only] {
+    @include composite-var($alert-button-button-close);
+  }
+
+  &:focus-visible {
+    @include outline-var($container-focused-s);
+
+    outline-color: $sys-available-complementary;
+    outline-offset: $spacing-state-focus-offset;
+  }
+
+  @each $appearance in $simpleAppearances {
+    &[data-appearance='#{$appearance}'] {
+      color: simple-var($theme-variables, 'sys', $appearance, 'text-support');
+
+      &:hover,
+      &:focus-visible {
+        color: simple-var($theme-variables, 'sys', $appearance, 'text-light');
+      }
+
+      &:active {
+        color: simple-var($theme-variables, 'sys', $appearance, 'text-main');
+      }
+    }
+  }
+}
+
+.alertButton[data-variant='tonal'] {
+  @include composite-var($alert-top-button-button-action);
+
+  background: $sys-opacity-enabled;
+
+  &[data-icon-only] {
+    @include composite-var($alert-top-button-button-close);
+
+    background: none;
+  }
+
+  &:hover {
+    opacity: unset;
+    background-color: $sys-opacity-hovered;
+  }
+
+  &:focus-visible {
+    @include outline-var($container-focused-s);
+
+    background-color: $sys-opacity-hovered;
+    outline-color: $sys-available-on-complementary;
+  }
+  &:active {
+    background-color: $sys-opacity-activated;
+  }
+
+  @each $appearance in $tonalAppearances {
+    &[data-appearance='#{$appearance}'] {
+      @if $appearance == 'invert-neutral' {
+        color: simple-var($theme-variables, 'sys', $appearance, 'text-main');
+      }
+
+ @else {
+        color: simple-var($theme-variables, 'sys', $appearance, 'on-accent');
+      }
+    }
+  }
+}

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

@@ -1,9 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

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

package/dist/helperComponents/AlertButton/index.js

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

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

@@ -1,75 +0,0 @@
-.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(--size-icon-container-s, 24px) !important;
-  height:var(--size-icon-container-s, 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, #141415);
-  outline-offset:var(--spacing-state-focus-offset, 2px);
-}
-.alertButton[data-color=neutral]{
-  color:var(--sys-neutral-text-support, #656771);
-}
-.alertButton[data-color=neutral]:hover, .alertButton[data-color=neutral]:focus-visible{
-  color:var(--sys-neutral-text-light, #868892);
-}
-.alertButton[data-color=neutral]:active{
-  color:var(--sys-neutral-text-main, #33333b);
-}
-.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, #ab423e);
-}
-.alertButton[data-color=red]:hover, .alertButton[data-color=red]:focus-visible{
-  color:var(--sys-red-text-light, #ea6658);
-}
-.alertButton[data-color=red]:active{
-  color:var(--sys-red-text-main, #621c1b);
-}
-.alertButton[data-color=yellow]{
-  color:var(--sys-yellow-text-support, #a57b0e);
-}
-.alertButton[data-color=yellow]:hover, .alertButton[data-color=yellow]:focus-visible{
-  color:var(--sys-yellow-text-light, #ddb035);
-}
-.alertButton[data-color=yellow]:active{
-  color:var(--sys-yellow-text-main, #5e3d06);
-}
-.alertButton[data-color=green]{
-  color:var(--sys-green-text-support, #568a56);
-}
-.alertButton[data-color=green]:hover, .alertButton[data-color=green]:focus-visible{
-  color:var(--sys-green-text-light, #67ba6e);
-}
-.alertButton[data-color=green]:active{
-  color:var(--sys-green-text-main, #323f27);
-}

package/dist/helperComponents/AlertTopButton/AlertTopButton.d.ts

@@ -1,9 +0,0 @@
-import { ReactElement } from 'react';
-import { Appearance } from '../../types';
-export type AlertTopButtonProps = {
-    appearance: Appearance;
-    buttonText: string;
-    buttonIcon?: ReactElement;
-    buttonOnClick?: () => void;
-};
-export declare function AlertTopButton({ appearance, buttonText, buttonIcon, buttonOnClick }: AlertTopButtonProps): import("react/jsx-runtime").JSX.Element;