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

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;
+  }
+}

package/src/helpers.tsx

@@ -9,9 +9,11 @@ import {
   ToasterContainerProps,
   ToastSystemEvent,
   ToastSystemEventProps,
+  ToastUploadProps,
   ToastUserAction,
   ToastUserActionProps,
 } from './components';
+import { ToastUploadForToaster } from './components/ToastUpload/ToastUploadToaster';
 import {
   AUTO_CLOSE_TIME,
   TOASTER_CONTAINER_DEFAULT_PROPS,
@@ -28,6 +30,7 @@ import {
   ToasterType,
   ToastOptions,
   UpdateToast,
+  UploadOptions,
   UserActionOptions,
 } from './types';
 
@@ -97,6 +100,8 @@ function getToastComponent<T extends keyof ToasterPropsMap>({
       return <ToastUserAction {...(toasterProps as ToastUserActionProps)} />;
     case TOASTER_TYPE.SystemEvent:
       return <ToastSystemEvent {...(toasterProps as ToastSystemEventProps)} />;
+    case TOASTER_TYPE.Upload:
+      return <ToastUploadForToaster {...(toasterProps as ToastUploadProps)} />;
     default:
       return undefined;
   }
@@ -331,7 +336,37 @@ const systemEvent = {
   },
 };
 
+const upload = {
+  startOrUpdate({ id, ...options }: UploadOptions) {
+    const toastId = id || TOASTER_TYPE.Upload;
+
+    if (toast.isActive(toastId)) {
+      return updateToast(toastId, {
+        type: TOASTER_TYPE.Upload,
+        toasterProps: { ...options, loading: true },
+      });
+    }
+
+    return openToast({
+      type: TOASTER_TYPE.Upload,
+      toasterProps: {
+        ...options,
+        loading: true,
+      },
+      toastOptions: {
+        id: toastId,
+        onClose: options.onClose,
+      },
+    });
+  },
+
+  dismiss(id?: ToasterId) {
+    return toast.dismiss(id);
+  },
+};
+
 export const toaster: Toaster = {
   userAction,
   systemEvent,
+  upload,
 };

package/src/index.ts

@@ -1,5 +1,10 @@
 export { toaster, openToast, updateToast, dismissToast } from './helpers';
-export type { ToastSystemEventProps, ToastUserActionProps, ToasterContainerProps } from './components';
+export type {
+  ToastSystemEventProps,
+  ToastUserActionProps,
+  ToasterContainerProps,
+  ToastUploadProps,
+} from './components';
 export type {
   Toaster,
   UpdateToast,
@@ -8,5 +13,6 @@ export type {
   SystemEventOptions,
   ToasterId,
   ToastOptions,
+  UploadOptions,
 } from './types';
 export { TOASTER_TYPE } from './constants';

package/src/testIds.ts

@@ -21,3 +21,20 @@ export const TOAST_USER_ACTION_TEST_IDS = {
   loader: `${TOAST_USER_ACTION_TEST_ID}__loader`,
   link: `${TOAST_USER_ACTION_TEST_ID}__link`,
 };
+
+const TOAST_UPLOAD_TEST_ID = 'toast-upload';
+
+export const TOAST_UPLOAD_TEST_IDS = {
+  main: TOAST_UPLOAD_TEST_ID,
+  close: `${TOAST_UPLOAD_TEST_ID}__close`,
+  title: `${TOAST_UPLOAD_TEST_ID}__title`,
+  description: `${TOAST_UPLOAD_TEST_ID}__description`,
+  counter: `${TOAST_UPLOAD_TEST_ID}__counter`,
+  progress: `${TOAST_UPLOAD_TEST_ID}__progress`,
+  list: `${TOAST_UPLOAD_TEST_ID}__list`,
+  collapseButton: `${TOAST_UPLOAD_TEST_ID}__collapseButton`,
+  progressBar: `${TOAST_UPLOAD_TEST_ID}__progressBar`,
+  uploadItem: `${TOAST_UPLOAD_TEST_ID}__uploadItem`,
+  uploadItemLink: `${TOAST_UPLOAD_TEST_ID}__uploadItemLink`,
+  uploadItemCancel: `${TOAST_UPLOAD_TEST_ID}__uploadItemCancel`,
+};

package/src/types.ts

@@ -2,7 +2,7 @@ import { Id, ToastOptions as RtToastOptions } from 'react-toastify';
 
 import { ValueOf } from '@snack-uikit/utils';
 
-import { ToasterContainerProps, ToastSystemEventProps, ToastUserActionProps } from './components';
+import { ToasterContainerProps, ToastSystemEventProps, ToastUploadProps, ToastUserActionProps } from './components';
 import { TOASTER_TYPE } from './constants';
 
 export type ToasterId = Id;
@@ -19,6 +19,7 @@ export type ToasterType = ValueOf<typeof TOASTER_TYPE>;
 export type ToasterPropsMap = {
   [TOASTER_TYPE.UserAction]: ToastUserActionProps;
   [TOASTER_TYPE.SystemEvent]: ToastSystemEventProps;
+  [TOASTER_TYPE.Upload]: ToastUploadProps & { loading: boolean };
 };
 
 type OpenNotificationProps<T extends keyof ToasterPropsMap> = {
@@ -49,6 +50,7 @@ export type UpdateToast = <T extends keyof ToasterPropsMap>(
 
 export type UserActionOptions = Omit<ToastUserActionProps, 'appearance'> & Pick<ToastOptions, 'id' | 'onClose'>;
 export type SystemEventOptions = Omit<ToastSystemEventProps, 'appearance'> & Pick<ToastOptions, 'id' | 'onClose'>;
+export type UploadOptions = ToastUploadProps & Pick<ToastOptions, 'id' | 'onClose'>;
 
 export type Toaster = {
   userAction: {
@@ -79,4 +81,8 @@ export type Toaster = {
     };
     dismiss(id?: ToasterId): void;
   };
+  upload: {
+    startOrUpdate(options: UploadOptions): void;
+    dismiss(id?: ToasterId): void;
+  };
 };