@snack-uikit/alert 0.5.20-preview-85c5f47b.0

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

@@ -0,0 +1,58 @@
+.alertTopButton{
+  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);
+  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;
+  margin-left:auto;
+  white-space:nowrap;
+  opacity:var(--opacity-a080, 0.8);
+  background:none;
+  border:0;
+}
+.alertTopButton svg{
+  width:var(--dimension-3m, 24px) !important;
+  height:var(--dimension-3m, 24px) !important;
+}
+.alertTopButton:hover{
+  opacity:unset;
+  background-color:var(--sys-opacity-hovered, rgba(253, 253, 253, 0.2392156863));
+}
+.alertTopButton: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(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]{
+  color:var(--sys-invert-neutral-text-main, #e7e7e7);
+}
+.alertTopButton[data-color=primary]{
+  color:var(--sys-primary-on-accent, #fdfbff);
+}
+.alertTopButton[data-color=red]{
+  color:var(--sys-red-on-accent, #fffbfa);
+}
+.alertTopButton[data-color=yellow]{
+  color:var(--sys-yellow-on-accent, #54290f);
+}
+.alertTopButton[data-color=green]{
+  color:var(--sys-green-on-accent, #1f392a);
+}

package/dist/helperComponents/index.d.ts

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

package/dist/helperComponents/index.js

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

package/dist/index.d.ts

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

package/dist/index.js

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

package/dist/utils.d.ts

@@ -0,0 +1,2 @@
+import { Appearance } from './constants';
+export declare function getIcon(appearance: Appearance): import("react/jsx-runtime").JSX.Element;

package/dist/utils.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AlarmFilledSVG, CheckFilledSVG, CrossFilledSVG, InfoFilledSVG } from '@snack-uikit/icons';
+import { Appearance } from './constants';
+export function getIcon(appearance) {
+    switch (appearance) {
+        case Appearance.Success:
+            return _jsx(CheckFilledSVG, {});
+        case Appearance.Error:
+            return _jsx(CrossFilledSVG, {});
+        case Appearance.Warning:
+            return _jsx(AlarmFilledSVG, {});
+        case Appearance.Primary:
+        case Appearance.Neutral:
+        default:
+            return _jsx(InfoFilledSVG, {});
+    }
+}

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@snack-uikit/alert",
+  "publishConfig": {
+    "access": "public"
+  },
+  "title": "Alert",
+  "version": "0.5.20-preview-85c5f47b.0",
+  "sideEffects": [
+    "*.css",
+    "*.woff",
+    "*.woff2"
+  ],
+  "description": "",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "homepage": "https://github.com/cloud-ru-tech/snack-uikit/tree/master/packages/alert",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/cloud-ru-tech/snack-uikit.git",
+    "directory": "packages/alert"
+  },
+  "author": "Alexander Starodubtsev <avstarodubtsev@cloud.ru>",
+  "contributors": [
+    "Alexander Starodubtsev <avstarodubtsev@cloud.ru>"
+  ],
+  "files": [
+    "dist",
+    "src",
+    "./CHANGELOG.md",
+    "./LICENSE"
+  ],
+  "license": "Apache-2.0",
+  "scripts": {},
+  "dependencies": {
+    "@snack-uikit/icons": "0.18.2-preview-85c5f47b.0",
+    "@snack-uikit/link": "0.7.1-preview-85c5f47b.0",
+    "@snack-uikit/truncate-string": "0.2.17-preview-85c5f47b.0",
+    "@snack-uikit/utils": "2.0.2-preview-85c5f47b.0",
+    "classnames": "2.3.2"
+  },
+  "gitHead": "6a7eef41d780d945f64f791448eaa72b9e0ae72d"
+}

package/src/components/Alert/Alert.tsx

@@ -0,0 +1,92 @@
+import cn from 'classnames';
+
+import { CrossSVG } from '@snack-uikit/icons';
+import { Link } 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 { getIcon } from '../../utils';
+import styles from './styles.module.scss';
+
+export type AlertProps = WithSupportProps<{
+  /** Отображать иконку */
+  icon?: boolean;
+  /** Заголовок */
+  title?: string;
+  /** Описание */
+  description: string;
+  /** Текст ссылки */
+  link?: string;
+  /** Ссылка */
+  href?: string;
+  /** Колбек закрытия */
+  onClose?: () => void;
+  /** Внешний вид */
+  appearance?: Appearance;
+  /** CSS-класс */
+  className?: string;
+}>;
+
+/**
+ * Компонент для отображения уведомления.
+ */
+export function Alert({
+  icon = true,
+  title,
+  href,
+  link,
+  description,
+  onClose,
+  appearance = Alert.appearances.Neutral,
+  className,
+  ...rest
+}: AlertProps) {
+  return (
+    <div
+      className={cn(styles.alert, className)}
+      {...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}>
+          {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>
+        </div>
+
+        {link && (
+          <span>
+            <Link
+              href={href}
+              text={link}
+              onSurface={Link.onSurfaces.Decor}
+              external
+              onColor={APPEARANCE_TO_COLOR_MAP[appearance]}
+              size={Link.sizes.M}
+              data-test-id='alert__link'
+            />
+          </span>
+        )}
+      </div>
+      {onClose && (
+        <button
+          onClick={onClose}
+          className={styles.closeButton}
+          data-color={APPEARANCE_TO_COLOR_MAP[appearance]}
+          data-test-id='alert__close-button'
+        >
+          <CrossSVG />
+        </button>
+      )}
+    </div>
+  );
+}
+
+Alert.appearances = Appearance;

package/src/components/Alert/index.ts

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

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

@@ -0,0 +1,106 @@
+@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';
+
+
+.alert {
+  @include composite-var($alert-container-container);
+
+  display: flex;
+  box-sizing: border-box;
+  min-width: 256px;
+  border-style: solid;
+
+  @each $color in $colors {
+    &[data-color='#{$color}'] {
+      background-color: simple-var($theme-variables, 'sys', $color, 'background');
+      border-color: simple-var($theme-variables, 'sys', $color, 'decor-default');
+    }
+   }
+}
+
+.title {
+  @include composite-var($sans-title-s);
+
+  color: $sys-neutral-text-main;
+}
+
+.textlayout {
+  @include composite-var($alert-container-text-layout);
+
+  overflow: hidden;
+}
+
+.description {
+  @include composite-var($sans-body-m);
+
+  color: $sys-neutral-text-support;
+  word-wrap: break-word;
+}
+
+.content {
+  @include composite-var($alert-container-content-layout);
+
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.icon {
+  @each $color in $colors { 
+    &[data-color='#{$color}'] {
+      color: simple-var($theme-variables, 'sys', $color, 'accent-default');
+    }
+  }  
+
+  svg {
+    width: $icon-s !important; /* stylelint-disable-line declaration-no-important */
+    height: $icon-s !important; /* stylelint-disable-line declaration-no-important */
+  }
+}
+
+.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-light');
+      
+      &:hover {
+        color: simple-var($theme-variables, 'sys', $color, 'text-support');
+      }
+    
+      &:focus-visible {
+        @include outline-var($container-focused-s);
+
+        color: simple-var($theme-variables, 'sys', $color, 'text-support');
+        outline-color: $sys-available-complementary;
+      }
+      
+      &:active {
+        color: simple-var($theme-variables, 'sys', $color, 'text-main');
+      }
+    }
+  } 
+}

package/src/components/AlertTop/AlertTop.tsx

@@ -0,0 +1,134 @@
+import cn from 'classnames';
+import { ReactElement } from 'react';
+
+import { CrossSVG } from '@snack-uikit/icons';
+import { Link } 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 { getIcon } from '../../utils';
+import { APPEARANCE_TO_COLOR_MAP_INVERT } from './constants';
+import styles from './styles.module.scss';
+
+export type AlertTopProps = WithSupportProps<{
+  /** Отображать иконку */
+  icon?: boolean;
+  /** Заголовок */
+  title?: string;
+  /** Описание */
+  description: string;
+  /** Текст ссылки */
+  link?: string;
+  /** Ссылка */
+  href?: string;
+  /** Колбек закрытия */
+  onClose?: () => void;
+  /** Внешний вид */
+  appearance?: Appearance;
+  /** Текст кнопки */
+  buttonText?: string;
+  /** Колбек клика по кнопке */
+  buttonOnClick?: () => void;
+  /** Иконка в кнопке */
+  buttonIcon?: ReactElement;
+  /** CSS-класс */
+  className?: string;
+}>;
+
+/**
+ * Компонент для отображения уведомления вверху экрана.
+ */
+export function AlertTop({
+  icon = true,
+  title,
+  description,
+  link,
+  href,
+  onClose,
+  appearance = AlertTop.appearances.Neutral,
+  buttonText,
+  buttonOnClick,
+  buttonIcon,
+  className,
+  ...rest
+}: AlertTopProps) {
+  return (
+    <div
+      className={cn(styles.alertTop, className)}
+      {...extractSupportProps(rest)}
+      data-color={APPEARANCE_TO_COLOR_MAP_INVERT[appearance]}
+    >
+      <div className={styles.contentWrapper}>
+        {icon && (
+          <div
+            className={styles.icon}
+            data-color={APPEARANCE_TO_COLOR_MAP_INVERT[appearance]}
+            data-test-id='alert-top__icon'
+          >
+            {getIcon(appearance)}
+          </div>
+        )}
+
+        <div className={styles.contentLayout}>
+          <div className={styles.textLayout}>
+            {title && (
+              <div
+                className={styles.title}
+                data-color={APPEARANCE_TO_COLOR_MAP_INVERT[appearance]}
+                data-test-id='alert-top__title'
+              >
+                <TruncateString text={title} maxLines={1} />
+              </div>
+            )}
+
+            <span
+              className={styles.description}
+              data-color={APPEARANCE_TO_COLOR_MAP_INVERT[appearance]}
+              data-test-id='alert-top__description'
+            >
+              {description}
+            </span>
+          </div>
+          {link && (
+            <span>
+              <Link
+                onSurface={Link.onSurfaces.Accent}
+                href={href}
+                text={link}
+                external
+                onColor={APPEARANCE_TO_COLOR_MAP[appearance]}
+                size={Link.sizes.M}
+                data-test-id='alert-top__link'
+              />
+            </span>
+          )}
+        </div>
+      </div>
+      <div className={styles.actions}>
+        {buttonText && (
+          <AlertTopButton
+            buttonIcon={buttonIcon}
+            buttonOnClick={buttonOnClick}
+            buttonText={buttonText}
+            appearance={appearance}
+          />
+        )}
+
+        {onClose && (
+          <button
+            onClick={onClose}
+            className={styles.closeButton}
+            data-color={APPEARANCE_TO_COLOR_MAP_INVERT[appearance]}
+            data-test-id='alert-top__close-button'
+          >
+            <CrossSVG />
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+AlertTop.appearances = Appearance;

package/src/components/AlertTop/constants.ts

@@ -0,0 +1,17 @@
+import { Appearance } from '../../constants';
+
+export enum Color {
+  InvertNeutral = 'invert-neutral',
+  Primary = 'primary',
+  Red = 'red',
+  Yellow = 'yellow',
+  Green = 'green',
+}
+
+export const APPEARANCE_TO_COLOR_MAP_INVERT = {
+  [Appearance.Neutral]: Color.InvertNeutral,
+  [Appearance.Primary]: Color.Primary,
+  [Appearance.Error]: Color.Red,
+  [Appearance.Warning]: Color.Yellow,
+  [Appearance.Success]: Color.Green,
+} as const;

package/src/components/AlertTop/index.ts

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

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

@@ -0,0 +1,157 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-alert-alertTop';
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
+
+$colors: 'invert-neutral', 'primary', 'red', 'yellow', 'green';
+
+.alertTop {
+  @include composite-var($alert-top-container-container);
+
+  display: flex;
+  justify-content: space-between;
+  box-sizing: border-box;
+
+  @each $color in $colors {
+    &[data-color='#{$color}'] {
+      @if $color == 'invert-neutral'{
+        background-color:$sys-invert-neutral-background;
+      }
+
+      @else {
+        background-color: simple-var($theme-variables, 'sys', $color, 'accent-default');
+      }
+    }
+  }
+}
+
+.icon {
+  @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');
+      }
+    }
+  }
+
+  svg {
+    width: $icon-s !important; /* stylelint-disable-line declaration-no-important */
+    height: $icon-s !important; /* stylelint-disable-line declaration-no-important */
+  }
+}
+
+.title {
+  @include composite-var($sans-title-s);
+
+  @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');
+      }
+    }
+  }
+}
+
+.description {
+  @include composite-var($sans-body-m);
+
+  word-wrap: break-word;
+
+  @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');
+      }
+    }
+  }
+}
+
+.contentWrapper {
+  display: flex;
+  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; 
+}
+
+.textLayout {
+  overflow: hidden;
+}
+
+.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');
+      }
+      
+      opacity: $opacity-a080;
+
+      &: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 {
+        opacity: $opacity-a080;
+        background-color: $sys-opacity-activated;
+      } 
+    }
+  }
+}
+
+.actions {
+  display: flex;
+  gap: $dimension-2m;
+  align-items: center;
+}

package/src/components/index.ts

@@ -0,0 +1,2 @@
+export * from './Alert';
+export * from './AlertTop';

package/src/constants.ts

@@ -0,0 +1,17 @@
+import { OnColor } from '@snack-uikit/link';
+
+export enum Appearance {
+  Neutral = 'neutral',
+  Primary = 'primary',
+  Error = 'error',
+  Warning = 'warning',
+  Success = 'success',
+}
+
+export const APPEARANCE_TO_COLOR_MAP = {
+  [Appearance.Neutral]: OnColor.Neutral,
+  [Appearance.Primary]: OnColor.Primary,
+  [Appearance.Error]: OnColor.Red,
+  [Appearance.Warning]: OnColor.Yellow,
+  [Appearance.Success]: OnColor.Green,
+} as const;

package/src/helperComponents/AlertTopButton/AlertTopButton.tsx

@@ -0,0 +1,25 @@
+import { ReactElement } from 'react';
+
+import { APPEARANCE_TO_COLOR_MAP_INVERT } from '../../components/AlertTop/constants';
+import { Appearance } from '../../constants';
+import styles from './styles.module.scss';
+
+export type AlertTopButtonProps = {
+  appearance: Appearance;
+  buttonText: string;
+  buttonIcon?: ReactElement;
+  buttonOnClick?: () => void;
+};
+
+export function AlertTopButton({ appearance, buttonText, buttonIcon, buttonOnClick }: AlertTopButtonProps) {
+  return (
+    <button
+      onClick={buttonOnClick}
+      className={styles.alertTopButton}
+      data-color={APPEARANCE_TO_COLOR_MAP_INVERT[appearance]}
+    >
+      <span>{buttonText}</span>
+      {buttonIcon}
+    </button>
+  );
+}