@snack-uikit/toaster 0.8.16 → 0.8.17-preview-bc9ca5dd.0

package/src/components/ToastUpload/helperComponents/ButtonIcon/ButtonIcon.tsx

@@ -0,0 +1,10 @@
+import cn from 'classnames';
+import { ButtonHTMLAttributes } from 'react';
+
+import styles from './styles.module.scss';
+
+export type ButtonIconProps = ButtonHTMLAttributes<HTMLButtonElement>;
+
+export function ButtonIcon({ className, ...props }: ButtonIconProps) {
+  return <button type='button' className={cn(styles.buttonIcon, className)} {...props}></button>;
+}

package/src/components/ToastUpload/helperComponents/ButtonIcon/index.ts

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

package/src/components/ToastUpload/helperComponents/ButtonIcon/styles.module.scss

@@ -0,0 +1,45 @@
+/* stylelint-disable scss/operator-no-newline-after */
+
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toaster-toasterSystemEvent';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toaster-toasterUpload';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
+@use '@snack-uikit/figma-tokens/build/scss/styles-theme-variables';
+
+.buttonIcon {
+  cursor: pointer;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+
+  color: styles-theme-variables.$sys-invert-neutral-text-light;
+
+  background-color: transparent;
+  border: none;
+
+  svg {
+    width: styles-tokens-element.$icon-s !important; /* stylelint-disable-line declaration-no-important */
+    height: styles-tokens-element.$icon-s !important; /* stylelint-disable-line declaration-no-important */
+  }
+
+  &:hover {
+    color: styles-theme-variables.$sys-invert-neutral-text-main;
+  }
+
+  &:focus,
+  &:active {
+    color: styles-theme-variables.$sys-invert-neutral-accent-pressed;
+  }
+
+  &:focus-visible {
+    @include styles-theme-variables.outline-var(styles-tokens-element.$container-focused-s);
+
+    color: styles-theme-variables.$sys-invert-neutral-text-main;
+    outline-color: styles-theme-variables.$sys-available-on-complementary;
+    outline-offset: styles-theme-variables.$spacing-state-focus-offset;
+  }
+}

package/src/components/ToastUpload/helperComponents/FileItem/FileItem.tsx

@@ -0,0 +1,76 @@
+import { useEffect, useState } from 'react';
+
+import { CrossSVG } from '@snack-uikit/icons';
+import { Link } from '@snack-uikit/link';
+import { ProgressBar } from '@snack-uikit/progress-bar';
+
+import { TOAST_UPLOAD_TEST_IDS } from '../../../../testIds';
+import { progressBarAppearanceByStatus } from '../../constants';
+import { UploadItem } from '../../types';
+import { formatPercent } from '../../utils';
+import { ButtonIcon } from '../ButtonIcon';
+import { LoadingStatus } from '../LoadingStatus';
+import styles from './styles.module.scss';
+
+export type FileItemProps = { item: UploadItem };
+
+export function FileItem({ item: initItem }: FileItemProps) {
+  const [item, setItem] = useState(initItem);
+
+  const showLink = item.status === 'uploaded' && item.link;
+
+  useEffect(() => {
+    if (initItem.subscribeToState) {
+      return initItem.subscribeToState(newValue => setItem(prev => ({ ...prev, ...newValue })));
+    }
+
+    return setItem(initItem);
+  }, [initItem]);
+
+  return (
+    <div className={styles.fileLine} key={item.id} data-test-id={TOAST_UPLOAD_TEST_IDS.uploadItem}>
+      <div className={styles.fileHeadLine}>
+        <span className={styles.fileTitle}>{item.title}</span>
+
+        {showLink && (
+          <Link
+            text={item.link?.text}
+            href={item.link?.href}
+            size='m'
+            truncateVariant='end'
+            onClick={item.link?.onClick}
+            appearance='invert-neutral'
+            textMode='accent'
+            data-test-id={TOAST_UPLOAD_TEST_IDS.uploadItemLink}
+          />
+        )}
+
+        {!showLink && (
+          <ButtonIcon onClick={item.actions.onCancel} data-test-id={TOAST_UPLOAD_TEST_IDS.uploadItemCancel}>
+            <CrossSVG />
+          </ButtonIcon>
+        )}
+      </div>
+
+      <ProgressBar progress={item.progress} size='xs' appearance={progressBarAppearanceByStatus[item.status]} />
+
+      <div className={styles.fileStatusLine}>
+        <div className={styles.fileStatusWrap}>
+          <LoadingStatus status={item.status} actions={item.actions} />
+
+          <span className={styles.fileStatusDescription} data-status={item.status}>
+            {item.statusLabel}
+          </span>
+        </div>
+
+        <span className={styles.fileSize} data-status={item.status}>
+          {item.size}
+        </span>
+
+        <span className={styles.fileStatusPercentage} data-status={item.status}>
+          {formatPercent(item.progress)}
+        </span>
+      </div>
+    </div>
+  );
+}

package/src/components/ToastUpload/helperComponents/FileItem/index.ts

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

package/src/components/ToastUpload/helperComponents/FileItem/styles.module.scss

@@ -0,0 +1,93 @@
+/* stylelint-disable scss/operator-no-newline-after */
+
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toaster-toasterSystemEvent';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toaster-toasterUpload';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
+@use '@snack-uikit/figma-tokens/build/scss/styles-theme-variables';
+
+.fileLine {
+  @include styles-theme-variables.composite-var(
+    styles-tokens-toaster-toasterUpload.$toaster-upload-file-line-container
+  );
+
+  display: flex;
+  flex-direction: column;
+}
+
+.fileHeadLine {
+  @include styles-theme-variables.composite-var(
+    styles-tokens-toaster-toasterUpload.$toaster-upload-file-line-headline
+  );
+
+  display: flex;
+  align-items: center;
+}
+
+.fileTitle {
+  @include styles-theme-variables.composite-var(styles-theme-variables.$sans-body-s);
+
+  flex-grow: 1;
+  color: styles-theme-variables.$sys-invert-neutral-text-main;
+}
+
+
+.fileStatusLine {
+  @include styles-theme-variables.composite-var(
+    styles-tokens-toaster-toasterUpload.$toaster-upload-status-line-container
+  );
+
+  display: flex;
+  align-items: center;
+}
+
+.fileStatusWrap {
+  @include styles-theme-variables.composite-var(
+    styles-tokens-toaster-toasterUpload.$toaster-upload-status-line-status-wrap
+  );
+
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
+}
+
+.fileStatusDescription {
+  @include styles-theme-variables.composite-var(styles-theme-variables.$sans-body-s);
+
+  color: styles-theme-variables.$sys-invert-neutral-text-main;
+
+  &[data-status='loading'] {
+    color: styles-theme-variables.$sys-invert-neutral-text-disabled;
+  }
+
+  &[data-status='uploaded'] {
+    color: styles-theme-variables.$sys-invert-neutral-text-disabled;
+  }
+}
+
+.fileSize {
+  @include styles-theme-variables.composite-var(styles-theme-variables.$sans-body-s);
+
+  color: styles-theme-variables.$sys-invert-neutral-text-disabled;
+
+  &[data-status='loading'] {
+    color: styles-theme-variables.$sys-invert-neutral-text-main;
+  }
+
+  &[data-status='uploaded'] {
+    color: styles-theme-variables.$sys-invert-neutral-text-main;
+  }
+}
+
+.fileStatusPercentage {
+  @include styles-theme-variables.composite-var(styles-theme-variables.$sans-body-s);
+
+  color: styles-theme-variables.$sys-invert-neutral-text-disabled;
+
+  &[data-status='loading'] {
+    color: styles-theme-variables.$sys-invert-neutral-text-main;
+  }
+
+  &[data-status='uploaded'] {
+    color: styles-theme-variables.$sys-invert-neutral-text-main;
+  }
+}

package/src/components/ToastUpload/helperComponents/LoadingStatus/LoadingStatus.tsx

@@ -0,0 +1,38 @@
+import { CheckFilledSVG, PauseSVG, PlaySVG, UpdateSVG } from '@snack-uikit/icons';
+
+import { ToastUploadStatus, UploadActions } from '../../types';
+import { ButtonIcon } from '../ButtonIcon';
+import styles from './styles.module.scss';
+
+export type LoadingStatusProps = {
+  status: ToastUploadStatus;
+  actions: UploadActions;
+};
+
+export function LoadingStatus({ status, actions }: LoadingStatusProps) {
+  if (status === 'loading') {
+    return (
+      <ButtonIcon onClick={actions.onPause}>
+        <PauseSVG />
+      </ButtonIcon>
+    );
+  }
+
+  if (status === 'pause') {
+    return (
+      <ButtonIcon onClick={actions.onContinue}>
+        <PlaySVG />
+      </ButtonIcon>
+    );
+  }
+
+  if (status === 'uploaded') {
+    return <CheckFilledSVG className={styles.successIcon} />;
+  }
+
+  return (
+    <ButtonIcon onClick={actions.onRetry}>
+      <UpdateSVG />
+    </ButtonIcon>
+  );
+}

package/src/components/ToastUpload/helperComponents/LoadingStatus/index.ts

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

package/src/components/ToastUpload/helperComponents/LoadingStatus/styles.module.scss

@@ -0,0 +1,8 @@
+/* stylelint-disable scss/operator-no-newline-after */
+
+@use '@snack-uikit/figma-tokens/build/scss/styles-theme-variables';
+
+
+.successIcon {
+  color: styles-theme-variables.$sys-green-accent-default;
+}

package/src/components/ToastUpload/index.ts

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

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

@@ -0,0 +1,123 @@
+/* stylelint-disable scss/operator-no-newline-after */
+
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toaster-toasterSystemEvent';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toaster-toasterUpload';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
+@use '@snack-uikit/figma-tokens/build/scss/styles-theme-variables';
+
+.container {
+  @include styles-theme-variables.composite-var(styles-tokens-toaster-toasterUpload.$toaster-upload-toast-container);
+
+  cursor: default;
+
+  position: relative;
+
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+
+  box-sizing: border-box;
+  width: calc(
+    styles-tokens-toaster-toasterSystemEvent.$size-toaster-toast-system-event-container -
+      (2 * styles-tokens-toaster-toasterUpload.$space-toaster-toast-system-event-container-padding)
+  );
+  max-width: 100%;
+  max-height: 386px;
+  padding: styles-tokens-toaster-toasterUpload.$space-toaster-toast-system-event-container-padding 0;
+
+  background-color: styles-theme-variables.$sys-invert-neutral-background;
+
+  &[data-collapsed='false'] {
+    gap: 0;
+  }
+}
+
+.titleLine {
+  display: flex;
+  flex-direction: column;
+  padding: 0 styles-tokens-toaster-toasterUpload.$space-toaster-toast-system-event-container-padding;
+}
+
+.titleLineBody {
+  @include styles-theme-variables.composite-var(styles-tokens-toaster-toasterUpload.$toaster-upload-title-line-body);
+
+  display: flex;
+  align-items: center;
+}
+
+.title {
+  @include styles-theme-variables.composite-var(styles-theme-variables.$sans-title-s);
+
+  flex-grow: 1;
+  color: styles-theme-variables.$sys-invert-neutral-text-main;
+}
+
+.generalProgress {
+  @include styles-theme-variables.composite-var(
+    styles-tokens-toaster-toasterUpload.$toaster-upload-title-line-general-progress
+  );
+
+  display: flex;
+  flex-direction: column;
+  align-self: stretch;
+}
+
+.statusLine {
+  @include styles-theme-variables.composite-var(
+    styles-tokens-toaster-toasterUpload.$toaster-upload-status-line-container
+  );
+
+  display: flex;
+  align-items: center;
+}
+
+.statusWrap {
+  @include styles-theme-variables.composite-var(
+    styles-tokens-toaster-toasterUpload.$toaster-upload-status-line-status-wrap
+  );
+
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
+}
+
+.description {
+  @include styles-theme-variables.composite-var(styles-theme-variables.$sans-body-m);
+
+  color: styles-theme-variables.$sys-invert-neutral-text-main;
+
+  &[data-status='loading'] {
+    color: styles-theme-variables.$sys-invert-neutral-text-light;
+  }
+
+  &[data-status='uploaded'] {
+    color: styles-theme-variables.$sys-invert-neutral-text-light;
+  }
+}
+
+.totalCounter {
+  @include styles-theme-variables.composite-var(styles-theme-variables.$sans-body-m);
+
+  color: styles-theme-variables.$sys-invert-neutral-text-support;
+}
+
+.totalPercentage {
+  @include styles-theme-variables.composite-var(styles-theme-variables.$sans-body-m);
+
+  color: styles-theme-variables.$sys-invert-neutral-text-support;
+}
+
+.list {
+  overflow: scroll;
+  display: flex;
+  flex-direction: column;
+
+  max-height: 280px;
+  padding: 0 styles-tokens-toaster-toasterUpload.$space-toaster-toast-system-event-container-padding;
+
+  transition: all 0.1s;
+
+  &[data-collapsed='false'] {
+    max-height: 0;
+  }
+}

package/src/components/ToastUpload/types.ts

@@ -0,0 +1,67 @@
+import { MouseEvent } from 'react';
+
+import { ProgressBarProps } from '@snack-uikit/progress-bar';
+import { ValueOf } from '@snack-uikit/utils';
+
+import { TOAST_UPLOAD_ITEM_STATUS, TOAST_UPLOAD_STATUS } from './constants';
+
+export type ToastUploadStatus = ValueOf<typeof TOAST_UPLOAD_STATUS>;
+
+export type ToastUploadItemStatus = ValueOf<typeof TOAST_UPLOAD_ITEM_STATUS>;
+
+export type ToastUploadStateSubscription<T> = (subscription: (newValue: T) => void) => () => void;
+export type WithStateSubscription<T> = {
+  /**Позволяет подписываться на изменения процесса загрузки файла внутри конпонента,
+   * тем самым обновляет элементы не зависимо от всего списка
+   * (можно использовать для улучшения производительности из-за частых обновлений)
+   */
+  subscribeToState?: ToastUploadStateSubscription<Partial<T>>;
+} & T;
+
+export type ToastUploadItemLink = {
+  text: string;
+  href: string;
+  onClick?(e: MouseEvent<HTMLAnchorElement>): void;
+};
+
+export type UploadActions = {
+  onCancel?: () => void;
+  onPause?: () => void;
+  onRetry?: () => void;
+  onContinue?: () => void;
+};
+
+export type UploadItem = WithStateSubscription<{
+  /**
+   * Уникальный id элемента
+   */
+  id: string;
+  /**
+   * Название элемента
+   */
+  title: string;
+  /**
+   * Статус загрузки
+   */
+  status: ToastUploadItemStatus;
+  /**
+   * Описание статуса загрузки
+   */
+  statusLabel: string;
+  /**
+   * Процент прогресса
+   */
+  progress: ProgressBarProps['progress'];
+  /**
+   * Размер файла
+   */
+  size: string;
+  /**
+   * Экшены для управления загрузкой
+   */
+  actions: UploadActions;
+  /**
+   * Ссылка на файл
+   */
+  link?: ToastUploadItemLink;
+}>;

package/src/components/ToastUpload/utils/formatPercent.ts

@@ -0,0 +1 @@
+export const formatPercent = (value: number) => `${value}%`;

package/src/components/ToastUpload/utils/index.ts

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

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

@@ -61,7 +61,7 @@
 }
 
 .containerWithCloseAllButton {
-  margin-bottom: calc(styles-theme-variables.$size-toaster-button-close-column + styles-theme-variables.$space-toaster-system-event-gap);
+  margin-bottom: calc(styles-theme-variables.$size-toaster-button-close-column + styles-theme-variables.$space-toaster-toast-system-event-gap);
 }
 
 @media only screen and (max-width: 480px) {

package/src/components/index.ts

@@ -1,3 +1,4 @@
 export * from './ToastSystemEvent';
 export * from './ToastUserAction';
 export * from './ToasterContainer';
+export * from './ToastUpload';

package/src/constants.ts

@@ -1,9 +1,11 @@
-import { ToasterContainerProps } from './components';
+import { ToasterContainerProps, ToastUploadProps } from './components';
+import { UploadItem } from './components/ToastUpload/types';
 import { ToasterType } from './types';
 
 export const TOASTER_TYPE = {
   SystemEvent: 'system-event',
   UserAction: 'user-action',
+  Upload: 'upload',
 } as const;
 
 export const TOASTER_CONTAINER_DEFAULT_PROPS: Record<ToasterType, ToasterContainerProps> = {
@@ -19,12 +21,99 @@ export const TOASTER_CONTAINER_DEFAULT_PROPS: Record<ToasterType, ToasterContain
     displayCloseAllButton: false,
     type: TOASTER_TYPE.UserAction,
   },
+  [TOASTER_TYPE.Upload]: {
+    limit: 5,
+    position: 'bottom-right',
+    displayCloseAllButton: true,
+    type: TOASTER_TYPE.SystemEvent,
+  },
 };
 
-export const AUTO_CLOSE_TIME = {
+export const AUTO_CLOSE_TIME: Record<ToasterType, number | false> = {
   [TOASTER_TYPE.SystemEvent]: 5000,
   [TOASTER_TYPE.UserAction]: 2000,
+  [TOASTER_TYPE.Upload]: false,
 };
 
 export const TOASTER_ROOT_ID = 'toaster-root';
 export const TOASTER_CONTAINER_PREFIX = 'toaster-container__';
+
+export const MOCK_TOAST_LOADING_ITEM: UploadItem = {
+  id: '1',
+  progress: 10,
+  size: '45 MB',
+  title: 'file name.extensions',
+  status: 'loading',
+  statusLabel: 'Loading...',
+  actions: {},
+};
+
+export const MOCK_TOAST_PAUSED_ITEM: UploadItem = {
+  id: '2',
+  progress: 20,
+  size: '45 MB',
+  title: 'file name.extensions',
+  status: 'pause',
+  statusLabel: 'Paused',
+  actions: {},
+};
+
+export const MOCK_TOAST_ERROR_ITEM: UploadItem = {
+  id: '3',
+  progress: 20,
+  size: '45 MB',
+  title: 'file name.extensions',
+  status: 'error',
+  statusLabel: 'Error',
+  actions: {},
+};
+
+export const MOCK_TOAST_UPLOADED_ITEM: UploadItem = {
+  id: '4',
+  progress: 100,
+  size: '45 MB',
+  title: 'file name.extensions',
+  status: 'uploaded',
+  statusLabel: 'Uploaded',
+  actions: {},
+  link: {
+    href: '#',
+    text: 'Show',
+  },
+};
+
+export const MOCK_TOAST_PROPS: Partial<ToastUploadProps> = {
+  title: 'Loading...',
+  description: '3 minutes left',
+  status: 'loading',
+  closable: true,
+  collapsed: true,
+  totalProgressCounter: '10/15',
+  totalProgressPercentage: 30,
+  cancelButton: {
+    label: 'Cancel all',
+    onClick: () => {},
+  },
+  generalActions: {
+    onCancel: () => {},
+    onContinue: () => {},
+    onPause: () => {},
+    onRetry: () => {},
+  },
+  onCollapsed: () => {},
+};
+
+export const MOCK_UPLOAD_ITEMS_LIST = [
+  MOCK_TOAST_LOADING_ITEM,
+  MOCK_TOAST_PAUSED_ITEM,
+  MOCK_TOAST_ERROR_ITEM,
+  MOCK_TOAST_UPLOADED_ITEM,
+  {
+    ...MOCK_TOAST_UPLOADED_ITEM,
+    id: '5',
+  },
+  {
+    ...MOCK_TOAST_UPLOADED_ITEM,
+    id: '6',
+  },
+];

package/src/helperComponents/ButtonTextNeutral/ButtonTextNeutral.tsx

@@ -0,0 +1,23 @@
+import { MouseEvent } from 'react';
+
+import styles from './styles.module.scss';
+
+export type ButtonTextNeutralProps = {
+  label: string;
+  onClick(e: MouseEvent<HTMLButtonElement>): void;
+  critical?: boolean;
+};
+
+export function ButtonTextNeutral({ label, onClick, critical }: ButtonTextNeutralProps) {
+  return (
+    <button
+      type='button'
+      className={styles.buttonTextNeutral}
+      onClick={onClick}
+      aria-label='action'
+      data-critical={critical || undefined}
+    >
+      {label}
+    </button>
+  );
+}

package/src/helperComponents/ButtonTextNeutral/index.ts

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

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

@@ -0,0 +1,42 @@
+/* stylelint-disable scss/operator-no-newline-after */
+
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toaster-toasterSystemEvent';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toaster-toasterUpload';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
+@use '@snack-uikit/figma-tokens/build/scss/styles-theme-variables';
+
+.buttonTextNeutral {
+  @include styles-theme-variables.composite-var(styles-theme-variables.$sans-body-m);
+
+  cursor: pointer;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+
+  color: styles-theme-variables.$sys-invert-neutral-text-light;
+
+  background-color: transparent;
+  border: none;
+
+  &:hover {
+    color: styles-theme-variables.$sys-invert-neutral-text-main;
+  }
+
+  &:focus,
+  &:active {
+    color: styles-theme-variables.$sys-invert-neutral-accent-pressed;
+  }
+
+  &:focus-visible {
+    @include styles-theme-variables.outline-var(styles-tokens-element.$container-focused-s);
+
+    color: styles-theme-variables.$sys-invert-neutral-text-main;
+    outline-color: styles-theme-variables.$sys-available-on-complementary;
+    outline-offset: styles-theme-variables.$spacing-state-focus-offset;
+  }
+}