@snack-uikit/toaster 0.5.3 → 0.5.4

package/dist/testIds.js

@@ -5,6 +5,7 @@ export const TOAST_SYSTEM_EVENT_TEST_IDS = {
     title: `${TOAST_SYSTEM_EVENT_TEST_ID}__title`,
     description: `${TOAST_SYSTEM_EVENT_TEST_ID}__description`,
     buttonClose: `${TOAST_SYSTEM_EVENT_TEST_ID}__button-close`,
+    buttonAction: `${TOAST_SYSTEM_EVENT_TEST_ID}__button-action`,
     link: `${TOAST_SYSTEM_EVENT_TEST_ID}__link`,
     progressbar: `${TOAST_SYSTEM_EVENT_TEST_ID}__progressbar`,
     buttonCloseColumn: `${TOAST_SYSTEM_EVENT_TEST_ID}button-close-column`,
@@ -14,5 +15,6 @@ export const TOAST_USER_ACTION_TEST_IDS = {
     main: TOAST_USER_ACTION_TEST_ID,
     label: `${TOAST_USER_ACTION_TEST_ID}__label`,
     icon: `${TOAST_USER_ACTION_TEST_ID}__icon`,
+    loader: `${TOAST_USER_ACTION_TEST_ID}__loader`,
     link: `${TOAST_USER_ACTION_TEST_ID}__link`,
 };

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Toaster",
-  "version": "0.5.3",
+  "version": "0.5.4",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -33,11 +33,12 @@
   "scripts": {},
   "dependencies": {
     "@snack-uikit/icons": "0.19.2",
-    "@snack-uikit/link": "0.9.3",
-    "@snack-uikit/truncate-string": "0.4.3",
+    "@snack-uikit/link": "0.10.0",
+    "@snack-uikit/loaders": "0.5.0",
+    "@snack-uikit/truncate-string": "0.4.4",
     "@snack-uikit/utils": "3.2.0",
     "classnames": "2.3.2",
     "react-toastify": "9.1.3"
   },
-  "gitHead": "420ccb07e016ae79a8b783e88c24f2045fadc026"
+  "gitHead": "57c597a3eebaf6528c0c61b6b27dd244753de1cf"
 }

package/src/components/ToastSystemEvent/ToastSystemEvent.tsx

@@ -8,10 +8,12 @@ import { TruncateString } from '@snack-uikit/truncate-string';
 import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
 
 import { AUTO_CLOSE_TIME } from '../../constants';
+import { ButtonAction, ButtonActionProps } from '../../helperComponents/ButtonAction';
 import { TOAST_SYSTEM_EVENT_TEST_IDS } from '../../testIds';
 import { ToasterType } from '../../types';
-import { APPEARANCE_TO_ON_COLOR_MAP, ToastSystemEventAppearance } from './constants';
+import { APPEARANCE_TO_ON_COLOR_MAP } from './constants';
 import styles from './styles.module.scss';
+import { ToastSystemEventAppearance } from './types';
 import { getIcon } from './utils';
 
 export type ToastSystemEventLink = {
@@ -30,10 +32,12 @@ export type ToastSystemEventProps = Partial<RtToastContentProps> &
     closable?: boolean;
     className?: string;
     onCloseClick?(e: MouseEvent<HTMLButtonElement>, close?: () => void): void;
+    action?: ButtonActionProps[];
+    loading?: never;
   }>;
 
 export function ToastSystemEvent({
-  appearance = ToastSystemEventAppearance.Neutral,
+  appearance = 'neutral',
   onCloseClick,
   progressBar = true,
   closable = true,
@@ -42,6 +46,7 @@ export function ToastSystemEvent({
   link,
   closeToast,
   className,
+  action,
   ...rest
 }: ToastSystemEventProps) {
   const handleCloseClick = (e: MouseEvent<HTMLButtonElement>) => {
@@ -53,51 +58,53 @@ export function ToastSystemEvent({
 
   return (
     <div className={cn(styles.container, className)} {...extractSupportProps(rest)} data-appearance={appearance}>
-      <div className={styles.icon}>{icon}</div>
+      <div className={styles.body}>
+        <div className={styles.icon}>{icon}</div>
 
-      <div className={styles.content}>
-        <div>
-          <span className={styles.title}>
-            <TruncateString text={title} maxLines={1} hideTooltip data-test-id={TOAST_SYSTEM_EVENT_TEST_IDS.title} />
-          </span>
-
-          {description && (
-            <span className={styles.description}>
-              <TruncateString
-                maxLines={4}
-                text={description}
-                hideTooltip
-                data-test-id={TOAST_SYSTEM_EVENT_TEST_IDS.description}
-              />
+        <div className={styles.contentLayout}>
+          <div>
+            <span className={styles.title}>
+              <TruncateString text={title} maxLines={2} hideTooltip data-test-id={TOAST_SYSTEM_EVENT_TEST_IDS.title} />
             </span>
+
+            {description && (
+              <span className={styles.description}>
+                <TruncateString
+                  maxLines={4}
+                  text={description}
+                  hideTooltip
+                  data-test-id={TOAST_SYSTEM_EVENT_TEST_IDS.description}
+                />
+              </span>
+            )}
+          </div>
+
+          {link && (
+            <Link
+              text={link.text}
+              href={link.href}
+              size='m'
+              onClick={link.onClick}
+              appearance={APPEARANCE_TO_ON_COLOR_MAP[appearance]}
+              data-test-id={TOAST_SYSTEM_EVENT_TEST_IDS.link}
+              textMode={appearance === 'errorCritical' ? 'on-accent' : 'accent'}
+            />
           )}
         </div>
 
-        {link && (
-          <Link
-            text={link.text}
-            href={link.href}
-            size='m'
-            onClick={link.onClick}
-            onColor={APPEARANCE_TO_ON_COLOR_MAP[appearance]}
-            data-test-id={TOAST_SYSTEM_EVENT_TEST_IDS.link}
-            onSurface={appearance === ToastSystemEventAppearance.ErrorCritical ? 'accent' : 'background'}
-          />
+        {closable && (
+          <button
+            className={styles.buttonClose}
+            onClick={handleCloseClick}
+            data-test-id={TOAST_SYSTEM_EVENT_TEST_IDS.buttonClose}
+            // TODO add translations
+            aria-label='close notification'
+          >
+            <CrossSVG />
+          </button>
         )}
       </div>
 
-      {closable && (
-        <button
-          className={styles.buttonClose}
-          onClick={handleCloseClick}
-          data-test-id={TOAST_SYSTEM_EVENT_TEST_IDS.buttonClose}
-          // TODO add translations
-          aria-label='close notification'
-        >
-          <CrossSVG />
-        </button>
-      )}
-
       {progressBar && (
         <div
           role='progressbar'
@@ -108,8 +115,14 @@ export function ToastSystemEvent({
           style={{ animationDuration: `${AUTO_CLOSE_TIME[ToasterType.SystemEvent]}ms` }}
         />
       )}
+
+      {Array.isArray(action) && action.length > 0 && (
+        <div className={styles.footer}>
+          {action.map(buttonProps => (
+            <ButtonAction key={buttonProps.label} {...buttonProps} critical={appearance === 'errorCritical'} />
+          ))}
+        </div>
+      )}
     </div>
   );
 }
-
-ToastSystemEvent.appearances = ToastSystemEventAppearance;

package/src/components/ToastSystemEvent/constants.ts

@@ -1,17 +1,21 @@
-import { ON_COLOR } from '@snack-uikit/link';
+import { LinkProps } from '@snack-uikit/link';
+import { ValueOf } from '@snack-uikit/utils';
 
-export enum ToastSystemEventAppearance {
-  Neutral = 'neutral',
-  Error = 'error',
-  ErrorCritical = 'errorCritical',
-  Warning = 'warning',
-  Success = 'success',
-}
+export const TOAST_SYSTEM_EVENT_APPEARANCE = {
+  Neutral: 'neutral',
+  Error: 'error',
+  ErrorCritical: 'errorCritical',
+  Warning: 'warning',
+  Success: 'success',
+} as const;
 
-export const APPEARANCE_TO_ON_COLOR_MAP = {
-  [ToastSystemEventAppearance.Neutral]: ON_COLOR.InvertNeutral,
-  [ToastSystemEventAppearance.Error]: ON_COLOR.InvertNeutral,
-  [ToastSystemEventAppearance.ErrorCritical]: ON_COLOR.Red,
-  [ToastSystemEventAppearance.Warning]: ON_COLOR.InvertNeutral,
-  [ToastSystemEventAppearance.Success]: ON_COLOR.InvertNeutral,
+export const APPEARANCE_TO_ON_COLOR_MAP: Record<
+  ValueOf<typeof TOAST_SYSTEM_EVENT_APPEARANCE>,
+  LinkProps['appearance']
+> = {
+  [TOAST_SYSTEM_EVENT_APPEARANCE.Neutral]: 'invert-neutral',
+  [TOAST_SYSTEM_EVENT_APPEARANCE.Error]: 'invert-neutral',
+  [TOAST_SYSTEM_EVENT_APPEARANCE.ErrorCritical]: 'red',
+  [TOAST_SYSTEM_EVENT_APPEARANCE.Warning]: 'invert-neutral',
+  [TOAST_SYSTEM_EVENT_APPEARANCE.Success]: 'invert-neutral',
 } as const;

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

@@ -30,7 +30,7 @@
 }
 
 .buttonClose {
-  @include composite-var($toaster-system-event-toast-button-close);
+  @include composite-var($toaster-system-event-toast-button-button-close);
 
   cursor: pointer;
 
@@ -70,8 +70,8 @@
   }
 }
 
-.content {
-  @include composite-var($toaster-system-event-toast-content);
+.contentLayout {
+  @include composite-var($toaster-system-event-toast-content-layout);
 
   display: flex;
   flex: 1;
@@ -111,6 +111,23 @@
   animation-play-state: active;
 }
 
+.body {
+  @include composite-var($toaster-system-event-toast-body);
+
+  display: flex;
+  width: 100%;
+  overflow-wrap: break-word;
+}
+
+.footer {
+  @include composite-var($toaster-system-event-toast-footer);
+
+  position: relative;
+  display: flex;
+  flex-direction: row-reverse;
+  width: 100%;
+}
+
 .container {
   @include composite-var($toaster-system-event-toast-container);
 
@@ -120,6 +137,7 @@
 
   overflow: hidden;
   display: flex;
+  flex-direction: column;
 
   box-sizing: border-box;
 
@@ -192,3 +210,10 @@
     );
   }
 }
+
+.loader {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: $sys-invert-neutral-text-main;
+}

package/src/components/ToastSystemEvent/types.ts

@@ -0,0 +1,5 @@
+import { ValueOf } from '@snack-uikit/utils';
+
+import { TOAST_SYSTEM_EVENT_APPEARANCE } from './constants';
+
+export type ToastSystemEventAppearance = ValueOf<typeof TOAST_SYSTEM_EVENT_APPEARANCE>;

package/src/components/ToastSystemEvent/utils.tsx

@@ -1,17 +1,17 @@
 import { AlarmFilledSVG, CheckFilledSVG, CrossFilledSVG, InfoFilledSVG } from '@snack-uikit/icons';
 
-import { ToastSystemEventAppearance } from './constants';
+import { ToastSystemEventAppearance } from './types';
 
 export function getIcon(appearance: ToastSystemEventAppearance) {
   switch (appearance) {
-    case ToastSystemEventAppearance.Success:
+    case 'success':
       return <CheckFilledSVG />;
-    case ToastSystemEventAppearance.Error:
-    case ToastSystemEventAppearance.ErrorCritical:
+    case 'error':
+    case 'errorCritical':
       return <CrossFilledSVG />;
-    case ToastSystemEventAppearance.Warning:
+    case 'warning':
       return <AlarmFilledSVG />;
-    case ToastSystemEventAppearance.Neutral:
+    case 'neutral':
     default:
       return <InfoFilledSVG />;
   }

package/src/components/ToastUserAction/ToastUserAction.tsx

@@ -3,11 +3,12 @@ import { MouseEvent, useMemo } from 'react';
 import { ToastContentProps as RtToastContentProps } from 'react-toastify';
 
 import { Link } from '@snack-uikit/link';
+import { Sun } from '@snack-uikit/loaders';
 import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
 
 import { TOAST_USER_ACTION_TEST_IDS } from '../../testIds';
-import { ToastUserActionAppearance, Variant } from './constants';
 import styles from './styles.module.scss';
+import { ToastUserActionAppearance } from './types';
 import { getIcon } from './utils';
 
 export type ToastUserActionLink = {
@@ -22,47 +23,48 @@ export type ToastUserActionProps = Partial<RtToastContentProps> &
     appearance?: ToastUserActionAppearance;
     link?: ToastUserActionLink;
     className?: string;
+    loading?: boolean;
   }>;
 
 export function ToastUserAction({
-  appearance = ToastUserActionAppearance.Neutral,
+  appearance = 'neutral',
   label,
   link,
   className,
+  loading = false,
   ...rest
 }: ToastUserActionProps) {
   const icon = useMemo(() => getIcon(appearance), [appearance]);
 
   return (
-    <div
-      className={cn(styles.container, className)}
-      {...extractSupportProps(rest)}
-      data-appearance={appearance}
-      data-variant={icon ? Variant.WithIcon : Variant.LabelOnly}
-    >
-      <div className={styles.content}>
-        {icon && (
+    <div className={cn(styles.container, className)} {...extractSupportProps(rest)} data-appearance={appearance}>
+      {loading ? (
+        <span className={styles.loader} data-test-id={TOAST_USER_ACTION_TEST_IDS.loader}>
+          <Sun size='s' />
+        </span>
+      ) : (
+        icon && (
           <span className={styles.icon} data-test-id={TOAST_USER_ACTION_TEST_IDS.icon}>
             {icon}
           </span>
-        )}
+        )
+      )}
+      <div className={styles.contentLayout}>
         <span className={styles.label} data-test-id={TOAST_USER_ACTION_TEST_IDS.label}>
           {label}
         </span>
-      </div>
 
-      {link && (
-        <Link
-          size='m'
-          text={link.text}
-          href={link.href}
-          onClick={link.onClick}
-          onColor='invert-neutral'
-          data-test-id={TOAST_USER_ACTION_TEST_IDS.link}
-        />
-      )}
+        {link && (
+          <Link
+            size='m'
+            text={link.text}
+            href={link.href}
+            onClick={link.onClick}
+            appearance='invert-neutral'
+            data-test-id={TOAST_USER_ACTION_TEST_IDS.link}
+          />
+        )}
+      </div>
     </div>
   );
 }
-
-ToastUserAction.appearances = ToastUserActionAppearance;

package/src/components/ToastUserAction/constants.tsx

@@ -1,11 +1,11 @@
-export enum ToastUserActionAppearance {
-  Neutral = 'neutral',
-  Success = 'success',
-  Error = 'error',
-  Warning = 'warning',
-}
+export const TOAST_USER_ACTION_APPEARANCE = {
+  Neutral: 'neutral',
+  Success: 'success',
+  Error: 'error',
+  Warning: 'warning',
+} as const;
 
-export enum Variant {
-  WithIcon = 'with-icon',
-  LabelOnly = 'label-only',
-}
+export const VARIANT = {
+  WithIcon: 'with-icon',
+  LabelOnly: 'label-only',
+} as const;

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

@@ -20,15 +20,9 @@
   color: $sys-invert-neutral-text-main;
 }
 
-.content {
-  @include composite-var($toaster-user-action-toast-content);
-
-  display: flex;
-  align-items: center
-}
-
-
 .container {
+  @include composite-var($toaster-user-action-toast-container);
+
   display: flex;
   align-items: center;
   justify-content: center;
@@ -37,14 +31,6 @@
 
   background-color: $sys-invert-neutral-background;
 
-  &[data-variant='label-only'] {
-    @include composite-var($toaster-user-action-toast-container-label-only);
-  }
-
-  &[data-variant='with-icon'] {
-    @include composite-var($toaster-user-action-toast-container-with-icon);
-  }
-
   &[data-appearance='error'] {
     .icon {
       color: $sys-red-accent-default;
@@ -64,3 +50,16 @@
   }
 }
 
+.loader {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: $sys-invert-neutral-text-main
+}
+
+.contentLayout {
+  @include composite-var($toaster-user-action-toast-content-layout);
+
+  display: flex;
+  align-items: center
+}

package/src/components/ToastUserAction/types.ts

@@ -0,0 +1,5 @@
+import { ValueOf } from '@snack-uikit/utils';
+
+import { TOAST_USER_ACTION_APPEARANCE } from './constants';
+
+export type ToastUserActionAppearance = ValueOf<typeof TOAST_USER_ACTION_APPEARANCE>;

package/src/components/ToastUserAction/utils.tsx

@@ -1,16 +1,17 @@
 import { AlarmFilledSVG, CheckFilledSVG, CrossFilledSVG } from '@snack-uikit/icons';
 
-import { ToastUserActionAppearance } from './constants';
+import { TOAST_SYSTEM_EVENT_APPEARANCE } from '../ToastSystemEvent/constants';
+import { ToastUserActionAppearance } from './types';
 
 export function getIcon(appearance: ToastUserActionAppearance) {
   switch (appearance) {
-    case ToastUserActionAppearance.Success:
+    case TOAST_SYSTEM_EVENT_APPEARANCE.Success:
       return <CheckFilledSVG />;
-    case ToastUserActionAppearance.Error:
+    case TOAST_SYSTEM_EVENT_APPEARANCE.Error:
       return <CrossFilledSVG />;
-    case ToastUserActionAppearance.Warning:
+    case TOAST_SYSTEM_EVENT_APPEARANCE.Warning:
       return <AlarmFilledSVG />;
-    case ToastUserActionAppearance.Neutral:
+    case TOAST_SYSTEM_EVENT_APPEARANCE.Neutral:
     default:
       return null;
   }

package/src/helperComponents/ButtonAction/ButtonAction.tsx

@@ -0,0 +1,24 @@
+import { MouseEvent } from 'react';
+
+import { TOAST_SYSTEM_EVENT_TEST_IDS } from '../../testIds';
+import styles from './styles.module.scss';
+
+export type ButtonActionProps = {
+  label: string;
+  onClick(e: MouseEvent<HTMLButtonElement>): void;
+  critical?: boolean;
+};
+
+export function ButtonAction({ label, onClick, critical }: ButtonActionProps) {
+  return (
+    <button
+      className={styles.buttonAction}
+      onClick={onClick}
+      data-test-id={TOAST_SYSTEM_EVENT_TEST_IDS.buttonAction}
+      aria-label='action'
+      data-critical={critical || undefined}
+    >
+      {label}
+    </button>
+  );
+}

package/src/helperComponents/ButtonAction/index.ts

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

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

@@ -0,0 +1,50 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toaster-toasterSystemEvent';
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
+
+.buttonAction {
+  @include composite-var($toaster-system-event-toast-button-button-action);
+  @include composite-var($sans-body-m);
+
+  cursor: pointer;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  box-sizing: border-box;
+  margin: 0;
+
+  color: $sys-invert-neutral-text-main;
+
+  background-color: $sys-invert-neutral-decor-default;
+  border: none;
+
+  &:hover,
+  &:focus-visible {
+    background-color: $sys-invert-neutral-decor-hovered;
+  }
+
+  &:active {
+    background-color: $sys-invert-neutral-decor-activated;
+  }
+
+  &:focus-visible {
+    @include outline-var($container-focused-s);
+
+    outline-color: $sys-available-on-complementary;
+    outline-offset: $spacing-state-focus-offset;
+  }
+
+  &[data-critical] {
+    background-color: $sys-opacity-enabled;
+
+    &:hover,
+    &:focus-visible {
+      background-color: $sys-opacity-hovered;
+    }
+
+    &:active {
+      background-color: $sys-opacity-activated;
+    }
+  }
+}