@cloud-ru/uikit-product-mobile-alert 0.4.64

package/src/helperComponents/AlertButton.tsx

@@ -0,0 +1,51 @@
+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 = {
+  /** Внешний вид */
+  appearance?: LinkProps['appearance'] | 'invert-neutral';
+  /** Текст кнопки */
+  text?: string;
+  /** Иконка в кнопке */
+  icon?: ReactElement;
+  /** Вариант отображения */
+  variant?: 'simple' | 'tonal';
+  /** Колбек клика */
+  onClick?(e: MouseEvent<HTMLButtonElement>): void;
+  /** Дата тест айди */
+  dataTestId?: string;
+  /** Управление состоянием загрузки */
+  loading?: boolean;
+  /** Размер */
+  size?: Size;
+};
+
+export type AlertButtonProps = Omit<PrivateAlertButtonProps, 'appearance' | 'variant'>;
+
+export function AlertButton({ appearance, text, icon, onClick, dataTestId, loading = false }: PrivateAlertButtonProps) {
+  return (
+    <button
+      type='button'
+      onClick={onClick}
+      className={styles.alertButton}
+      data-variant='tonal'
+      data-appearance={appearance}
+      data-test-id={dataTestId || 'alert__action-button'}
+      data-icon-only={!text || undefined}
+      data-loading={loading}
+      data-size='m'
+    >
+      {text && (
+        <span className={styles.text} data-size='m'>
+          {text}
+        </span>
+      )}
+      {icon && (loading ? <Sun size='s' /> : <span className={styles.icon}>{icon}</span>)}
+    </button>
+  );
+}

package/src/helperComponents/index.ts

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

package/src/helperComponents/styles.module.scss

@@ -0,0 +1,89 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/components/styles-tokens-alert-alertTop';
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/components/styles-tokens-element';
+
+$simpleAppearances: 'neutral', 'primary', 'red', 'yellow', 'green', 'blue';
+$tonalAppearances: 'invert-neutral', 'primary', 'red', 'yellow', 'green', 'blue';
+
+.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 {
+    &[data-size='m'] {
+      @include styles-tokens-element.composite-var(styles-tokens-element.$theme-variables, 'sans', 'label', 'l')
+    }
+  }
+
+  .icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    width: styles-tokens-element.$icon-s;
+    height: styles-tokens-element.$icon-s;
+
+    svg {
+      max-width: styles-tokens-element.$icon-s;
+      max-height: styles-tokens-element.$icon-s;
+    }
+  }
+
+  &[data-loading='true'] {
+    cursor: not-allowed;
+
+    > * {
+      cursor: not-allowed;
+    }
+  }
+  
+  &[data-variant='tonal'] {
+    @include styles-tokens-element.composite-var(styles-tokens-alert-alertTop.$alert-top-button-button-action);
+
+    background: styles-tokens-element.$sys-opacity-enabled;
+
+    &[data-icon-only] {
+      @include styles-tokens-element.composite-var(styles-tokens-alert-alertTop.$alert-top-button-button-close);
+      height: styles-tokens-element.$dimension-5m;
+      width: styles-tokens-element.$dimension-5m;
+
+      background: none;
+    }
+
+    &:hover {
+      opacity: unset;
+      background-color: styles-tokens-element.$sys-opacity-hovered;
+    }
+
+    &:focus-visible {
+      @include styles-tokens-element.outline-var(styles-tokens-element.$container-focused-s);
+
+      background-color: styles-tokens-element.$sys-opacity-hovered;
+      outline-color: styles-tokens-element.$sys-available-on-complementary;
+    }
+    &:active {
+      background-color: styles-tokens-element.$sys-opacity-activated;
+    }
+
+    @each $appearance in $tonalAppearances {
+      &[data-appearance='#{$appearance}'] {
+        @if $appearance == 'invert-neutral' {
+          color: styles-tokens-element.simple-var(styles-tokens-element.$theme-variables, 'sys', $appearance, 'text-main');
+        } @else {
+          color: styles-tokens-element.simple-var(styles-tokens-element.$theme-variables, 'sys', $appearance, 'on-accent');
+        }
+      }
+    }
+  }
+}

package/src/index.ts

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

package/src/types.ts

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