@snack-uikit/toaster 0.5.3 → 0.5.5

package/CHANGELOG.md

@@ -3,6 +3,29 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.5.5 (2024-01-23)
+
+### Only dependencies have been changed
+* [@snack-uikit/icons@0.20.0](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/icons/CHANGELOG.md)
+* [@snack-uikit/link@0.10.1](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/link/CHANGELOG.md)
+* [@snack-uikit/truncate-string@0.4.5](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/truncate-string/CHANGELOG.md)
+
+
+
+
+
+## 0.5.4 (2023-12-28)
+
+
+### Bug Fixes
+
+* **FF-3960:** support link props renaming ([990b35e](https://github.com/cloud-ru-tech/snack-uikit/commit/990b35e6f0ea091c499b337e721add2f1606a251))
+* **FF-3960:** update inner structure, add loading prop, add action buttons ([8546108](https://github.com/cloud-ru-tech/snack-uikit/commit/854610855497e7df915c82768c3f907a449a9a36))
+
+
+
+
+
 ## 0.5.3 (2023-12-25)
 
 ### Only dependencies have been changed

package/dist/components/ToastSystemEvent/ToastSystemEvent.d.ts

@@ -1,7 +1,8 @@
 import { MouseEvent } from 'react';
 import { ToastContentProps as RtToastContentProps } from 'react-toastify';
 import { WithSupportProps } from '@snack-uikit/utils';
-import { ToastSystemEventAppearance } from './constants';
+import { ButtonActionProps } from '../../helperComponents/ButtonAction';
+import { ToastSystemEventAppearance } from './types';
 export type ToastSystemEventLink = {
     text: string;
     href: string;
@@ -16,8 +17,7 @@ export type ToastSystemEventProps = Partial<RtToastContentProps> & WithSupportPr
     closable?: boolean;
     className?: string;
     onCloseClick?(e: MouseEvent<HTMLButtonElement>, close?: () => void): void;
+    action?: ButtonActionProps[];
+    loading?: never;
 }>;
-export declare function ToastSystemEvent({ appearance, onCloseClick, progressBar, closable, title, description, link, closeToast, className, ...rest }: ToastSystemEventProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace ToastSystemEvent {
-    var appearances: typeof ToastSystemEventAppearance;
-}
+export declare function ToastSystemEvent({ appearance, onCloseClick, progressBar, closable, title, description, link, closeToast, className, action, ...rest }: ToastSystemEventProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ToastSystemEvent/ToastSystemEvent.js

@@ -17,18 +17,18 @@ import { Link } from '@snack-uikit/link';
 import { TruncateString } from '@snack-uikit/truncate-string';
 import { extractSupportProps } from '@snack-uikit/utils';
 import { AUTO_CLOSE_TIME } from '../../constants';
+import { ButtonAction } 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.css';
 import { getIcon } from './utils';
 export function ToastSystemEvent(_a) {
-    var { appearance = ToastSystemEventAppearance.Neutral, onCloseClick, progressBar = true, closable = true, title, description, link, closeToast, className } = _a, rest = __rest(_a, ["appearance", "onCloseClick", "progressBar", "closable", "title", "description", "link", "closeToast", "className"]);
+    var { appearance = 'neutral', onCloseClick, progressBar = true, closable = true, title, description, link, closeToast, className, action } = _a, rest = __rest(_a, ["appearance", "onCloseClick", "progressBar", "closable", "title", "description", "link", "closeToast", "className", "action"]);
     const handleCloseClick = (e) => {
         e.stopPropagation();
         onCloseClick ? onCloseClick(e, closeToast) : closeToast === null || closeToast === void 0 ? void 0 : closeToast();
     };
     const icon = useMemo(() => getIcon(appearance), [appearance]);
-    return (_jsxs("div", Object.assign({ className: cn(styles.container, className) }, extractSupportProps(rest), { "data-appearance": appearance, children: [_jsx("div", { className: styles.icon, children: icon }), _jsxs("div", { className: styles.content, children: [_jsxs("div", { children: [_jsx("span", { className: styles.title, children: _jsx(TruncateString, { text: title, maxLines: 1, hideTooltip: true, "data-test-id": TOAST_SYSTEM_EVENT_TEST_IDS.title }) }), description && (_jsx("span", { className: styles.description, children: _jsx(TruncateString, { maxLines: 4, text: description, hideTooltip: true, "data-test-id": TOAST_SYSTEM_EVENT_TEST_IDS.description }) }))] }), link && (_jsx(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 && (_jsx("button", { className: styles.buttonClose, onClick: handleCloseClick, "data-test-id": TOAST_SYSTEM_EVENT_TEST_IDS.buttonClose, "aria-label": 'close notification', children: _jsx(CrossSVG, {}) })), progressBar && (_jsx("div", { role: 'progressbar', "aria-label": 'progressbar', "data-test-id": TOAST_SYSTEM_EVENT_TEST_IDS.progressbar, className: styles.progress, style: { animationDuration: `${AUTO_CLOSE_TIME[ToasterType.SystemEvent]}ms` } }))] })));
+    return (_jsxs("div", Object.assign({ className: cn(styles.container, className) }, extractSupportProps(rest), { "data-appearance": appearance, children: [_jsxs("div", { className: styles.body, children: [_jsx("div", { className: styles.icon, children: icon }), _jsxs("div", { className: styles.contentLayout, children: [_jsxs("div", { children: [_jsx("span", { className: styles.title, children: _jsx(TruncateString, { text: title, maxLines: 2, hideTooltip: true, "data-test-id": TOAST_SYSTEM_EVENT_TEST_IDS.title }) }), description && (_jsx("span", { className: styles.description, children: _jsx(TruncateString, { maxLines: 4, text: description, hideTooltip: true, "data-test-id": TOAST_SYSTEM_EVENT_TEST_IDS.description }) }))] }), link && (_jsx(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' }))] }), closable && (_jsx("button", { className: styles.buttonClose, onClick: handleCloseClick, "data-test-id": TOAST_SYSTEM_EVENT_TEST_IDS.buttonClose, "aria-label": 'close notification', children: _jsx(CrossSVG, {}) }))] }), progressBar && (_jsx("div", { role: 'progressbar', "aria-label": 'progressbar', "data-test-id": TOAST_SYSTEM_EVENT_TEST_IDS.progressbar, className: styles.progress, style: { animationDuration: `${AUTO_CLOSE_TIME[ToasterType.SystemEvent]}ms` } })), Array.isArray(action) && action.length > 0 && (_jsx("div", { className: styles.footer, children: action.map(buttonProps => (_jsx(ButtonAction, Object.assign({}, buttonProps, { critical: appearance === 'errorCritical' }), buttonProps.label))) }))] })));
 }
-ToastSystemEvent.appearances = ToastSystemEventAppearance;

package/dist/components/ToastSystemEvent/constants.d.ts

@@ -1,14 +1,10 @@
-export declare enum ToastSystemEventAppearance {
-    Neutral = "neutral",
-    Error = "error",
-    ErrorCritical = "errorCritical",
-    Warning = "warning",
-    Success = "success"
-}
-export declare const APPEARANCE_TO_ON_COLOR_MAP: {
-    readonly neutral: "invert-neutral";
-    readonly error: "invert-neutral";
-    readonly errorCritical: "red";
-    readonly warning: "invert-neutral";
-    readonly success: "invert-neutral";
+import { LinkProps } from '@snack-uikit/link';
+import { ValueOf } from '@snack-uikit/utils';
+export declare const TOAST_SYSTEM_EVENT_APPEARANCE: {
+    readonly Neutral: "neutral";
+    readonly Error: "error";
+    readonly ErrorCritical: "errorCritical";
+    readonly Warning: "warning";
+    readonly Success: "success";
 };
+export declare const APPEARANCE_TO_ON_COLOR_MAP: Record<ValueOf<typeof TOAST_SYSTEM_EVENT_APPEARANCE>, LinkProps['appearance']>;

package/dist/components/ToastSystemEvent/constants.js

@@ -1,16 +1,14 @@
-import { ON_COLOR } from '@snack-uikit/link';
-export var ToastSystemEventAppearance;
-(function (ToastSystemEventAppearance) {
-    ToastSystemEventAppearance["Neutral"] = "neutral";
-    ToastSystemEventAppearance["Error"] = "error";
-    ToastSystemEventAppearance["ErrorCritical"] = "errorCritical";
-    ToastSystemEventAppearance["Warning"] = "warning";
-    ToastSystemEventAppearance["Success"] = "success";
-})(ToastSystemEventAppearance || (ToastSystemEventAppearance = {}));
+export const TOAST_SYSTEM_EVENT_APPEARANCE = {
+    Neutral: 'neutral',
+    Error: 'error',
+    ErrorCritical: 'errorCritical',
+    Warning: 'warning',
+    Success: 'success',
+};
 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,
+    [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',
 };

package/dist/components/ToastSystemEvent/styles.module.css

@@ -6,7 +6,7 @@
 .buttonClose{
   width:var(--size-toaster-toast-system-event-button-close, 24px);
   height:var(--size-toaster-toast-system-event-button-close, 24px);
-  border-radius:var(--radius-toaster-toast-system-event-button-close, 8px);
+  border-radius:var(--radius-toaster-toast-system-event-button, 8px);
   cursor:pointer;
   display:flex;
   align-items:center;
@@ -37,9 +37,8 @@
   outline-offset:var(--spacing-state-focus-offset, 2px);
 }
 
-.content{
-  gap:var(--space-toaster-toast-system-event-container-content-gap, 8px);
-  padding-top:var(--space-toaster-toast-system-event-container-content-padding-top, 2px);
+.contentLayout{
+  padding-top:var(--space-toaster-toast-system-event-container-content-layout-padding-top, 2px);
   display:flex;
   flex:1;
   flex-direction:column;
@@ -83,6 +82,21 @@
   animation-play-state:active;
 }
 
+.body{
+  gap:var(--space-toaster-toast-system-event-container-body-gap, 16px);
+  display:flex;
+  width:100%;
+  overflow-wrap:break-word;
+}
+
+.footer{
+  gap:var(--space-toaster-toast-system-event-container-footer-gap, 8px);
+  position:relative;
+  display:flex;
+  flex-direction:row-reverse;
+  width:100%;
+}
+
 .container{
   padding:var(--space-toaster-toast-system-event-container-padding, 16px);
   border-radius:var(--radius-toaster-toast-system-event-container, 16px);
@@ -91,6 +105,7 @@
   position:relative;
   overflow:hidden;
   display:flex;
+  flex-direction:column;
   box-sizing:border-box;
 }
 .container:hover .progress{
@@ -180,4 +195,11 @@
 }
 .container[data-appearance=success] .progress{
   background-color:var(--sys-green-accent-default, #0bbe8f);
+}
+
+.loader{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  color:var(--sys-invert-neutral-text-main, #e7e7e7);
 }

package/dist/components/ToastSystemEvent/types.d.ts

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

package/dist/components/ToastSystemEvent/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/ToastSystemEvent/utils.d.ts

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

package/dist/components/ToastSystemEvent/utils.js

@@ -1,16 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { AlarmFilledSVG, CheckFilledSVG, CrossFilledSVG, InfoFilledSVG } from '@snack-uikit/icons';
-import { ToastSystemEventAppearance } from './constants';
 export function getIcon(appearance) {
     switch (appearance) {
-        case ToastSystemEventAppearance.Success:
+        case 'success':
             return _jsx(CheckFilledSVG, {});
-        case ToastSystemEventAppearance.Error:
-        case ToastSystemEventAppearance.ErrorCritical:
+        case 'error':
+        case 'errorCritical':
             return _jsx(CrossFilledSVG, {});
-        case ToastSystemEventAppearance.Warning:
+        case 'warning':
             return _jsx(AlarmFilledSVG, {});
-        case ToastSystemEventAppearance.Neutral:
+        case 'neutral':
         default:
             return _jsx(InfoFilledSVG, {});
     }

package/dist/components/ToastUserAction/ToastUserAction.d.ts

@@ -1,7 +1,7 @@
 import { MouseEvent } from 'react';
 import { ToastContentProps as RtToastContentProps } from 'react-toastify';
 import { WithSupportProps } from '@snack-uikit/utils';
-import { ToastUserActionAppearance } from './constants';
+import { ToastUserActionAppearance } from './types';
 export type ToastUserActionLink = {
     text: string;
     href: string;
@@ -12,8 +12,6 @@ export type ToastUserActionProps = Partial<RtToastContentProps> & WithSupportPro
     appearance?: ToastUserActionAppearance;
     link?: ToastUserActionLink;
     className?: string;
+    loading?: boolean;
 }>;
-export declare function ToastUserAction({ appearance, label, link, className, ...rest }: ToastUserActionProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace ToastUserAction {
-    var appearances: typeof ToastUserActionAppearance;
-}
+export declare function ToastUserAction({ appearance, label, link, className, loading, ...rest }: ToastUserActionProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ToastUserAction/ToastUserAction.js

@@ -13,14 +13,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import cn from 'classnames';
 import { useMemo } from 'react';
 import { Link } from '@snack-uikit/link';
+import { Sun } from '@snack-uikit/loaders';
 import { extractSupportProps } from '@snack-uikit/utils';
 import { TOAST_USER_ACTION_TEST_IDS } from '../../testIds';
-import { ToastUserActionAppearance, Variant } from './constants';
 import styles from './styles.module.css';
 import { getIcon } from './utils';
 export function ToastUserAction(_a) {
-    var { appearance = ToastUserActionAppearance.Neutral, label, link, className } = _a, rest = __rest(_a, ["appearance", "label", "link", "className"]);
+    var { appearance = 'neutral', label, link, className, loading = false } = _a, rest = __rest(_a, ["appearance", "label", "link", "className", "loading"]);
     const icon = useMemo(() => getIcon(appearance), [appearance]);
-    return (_jsxs("div", Object.assign({ className: cn(styles.container, className) }, extractSupportProps(rest), { "data-appearance": appearance, "data-variant": icon ? Variant.WithIcon : Variant.LabelOnly, children: [_jsxs("div", { className: styles.content, children: [icon && (_jsx("span", { className: styles.icon, "data-test-id": TOAST_USER_ACTION_TEST_IDS.icon, children: icon })), _jsx("span", { className: styles.label, "data-test-id": TOAST_USER_ACTION_TEST_IDS.label, children: label })] }), link && (_jsx(Link, { size: 'm', text: link.text, href: link.href, onClick: link.onClick, onColor: 'invert-neutral', "data-test-id": TOAST_USER_ACTION_TEST_IDS.link }))] })));
+    return (_jsxs("div", Object.assign({ className: cn(styles.container, className) }, extractSupportProps(rest), { "data-appearance": appearance, children: [loading ? (_jsx("span", { className: styles.loader, "data-test-id": TOAST_USER_ACTION_TEST_IDS.loader, children: _jsx(Sun, { size: 's' }) })) : (icon && (_jsx("span", { className: styles.icon, "data-test-id": TOAST_USER_ACTION_TEST_IDS.icon, children: icon }))), _jsxs("div", { className: styles.contentLayout, children: [_jsx("span", { className: styles.label, "data-test-id": TOAST_USER_ACTION_TEST_IDS.label, children: label }), link && (_jsx(Link, { size: 'm', text: link.text, href: link.href, onClick: link.onClick, appearance: 'invert-neutral', "data-test-id": TOAST_USER_ACTION_TEST_IDS.link }))] })] })));
 }
-ToastUserAction.appearances = ToastUserActionAppearance;

package/dist/components/ToastUserAction/constants.d.ts

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

package/dist/components/ToastUserAction/constants.js

@@ -1,12 +1,10 @@
-export var ToastUserActionAppearance;
-(function (ToastUserActionAppearance) {
-    ToastUserActionAppearance["Neutral"] = "neutral";
-    ToastUserActionAppearance["Success"] = "success";
-    ToastUserActionAppearance["Error"] = "error";
-    ToastUserActionAppearance["Warning"] = "warning";
-})(ToastUserActionAppearance || (ToastUserActionAppearance = {}));
-export var Variant;
-(function (Variant) {
-    Variant["WithIcon"] = "with-icon";
-    Variant["LabelOnly"] = "label-only";
-})(Variant || (Variant = {}));
+export const TOAST_USER_ACTION_APPEARANCE = {
+    Neutral: 'neutral',
+    Success: 'success',
+    Error: 'error',
+    Warning: 'warning',
+};
+export const VARIANT = {
+    WithIcon: 'with-icon',
+    LabelOnly: 'label-only',
+};

package/dist/components/ToastUserAction/styles.module.css

@@ -18,33 +18,17 @@
   color:var(--sys-invert-neutral-text-main, #e7e7e7);
 }
 
-.content{
-  gap:var(--space-toaster-toast-user-action-content-gap, 8px);
-  display:flex;
-  align-items:center;
-}
-
 .container{
+  height:var(--size-toaster-toast-user-action-container, 40px);
+  padding-left:var(--space-toaster-toast-user-action-horizont-padding, 8px);
+  padding-right:var(--space-toaster-toast-user-action-horizont-padding, 8px);
+  border-radius:var(--radius-toaster-toast-user-action-container, 16px);
   display:flex;
   align-items:center;
   justify-content:center;
   box-sizing:border-box;
   background-color:var(--sys-invert-neutral-background, #232323);
 }
-.container[data-variant=label-only]{
-  height:var(--size-toaster-toast-user-action-container, 40px);
-  gap:var(--space-toaster-toast-user-action-gap, 16px);
-  padding-left:var(--space-toaster-toast-user-action-from-label, 16px);
-  padding-right:var(--space-toaster-toast-user-action-from-label, 16px);
-  border-radius:var(--radius-toaster-toast-user-action-container, 16px);
-}
-.container[data-variant=with-icon]{
-  height:var(--size-toaster-toast-user-action-container, 40px);
-  gap:var(--space-toaster-toast-user-action-gap, 16px);
-  padding-left:var(--space-toaster-toast-user-action-from-icon, 8px);
-  padding-right:var(--space-toaster-toast-user-action-from-label, 16px);
-  border-radius:var(--radius-toaster-toast-user-action-container, 16px);
-}
 .container[data-appearance=error] .icon{
   color:var(--sys-red-accent-default, #d93f2f);
 }
@@ -53,4 +37,19 @@
 }
 .container[data-appearance=success] .icon{
   color:var(--sys-green-accent-default, #0bbe8f);
+}
+
+.loader{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  color:var(--sys-invert-neutral-text-main, #e7e7e7);
+}
+
+.contentLayout{
+  gap:var(--space-toaster-toast-user-action-content-layout-gap, 8px);
+  padding-left:var(--space-toaster-toast-user-action-content-layout-horizont-padding, 8px);
+  padding-right:var(--space-toaster-toast-user-action-content-layout-horizont-padding, 8px);
+  display:flex;
+  align-items:center;
 }

package/dist/components/ToastUserAction/types.d.ts

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

package/dist/components/ToastUserAction/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/ToastUserAction/utils.d.ts

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

package/dist/components/ToastUserAction/utils.js

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

package/dist/helperComponents/ButtonAction/ButtonAction.d.ts

@@ -0,0 +1,7 @@
+import { MouseEvent } from 'react';
+export type ButtonActionProps = {
+    label: string;
+    onClick(e: MouseEvent<HTMLButtonElement>): void;
+    critical?: boolean;
+};
+export declare function ButtonAction({ label, onClick, critical }: ButtonActionProps): import("react/jsx-runtime").JSX.Element;

package/dist/helperComponents/ButtonAction/ButtonAction.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TOAST_SYSTEM_EVENT_TEST_IDS } from '../../testIds';
+import styles from './styles.module.css';
+export function ButtonAction({ label, onClick, critical }) {
+    return (_jsx("button", { className: styles.buttonAction, onClick: onClick, "data-test-id": TOAST_SYSTEM_EVENT_TEST_IDS.buttonAction, "aria-label": 'action', "data-critical": critical || undefined, children: label }));
+}

package/dist/helperComponents/ButtonAction/index.d.ts

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

package/dist/helperComponents/ButtonAction/index.js

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

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

@@ -0,0 +1,43 @@
+.buttonAction{
+  border-radius:var(--radius-toaster-toast-system-event-button, 8px);
+  height:var(--size-toaster-toast-system-event-button, 32px);
+  padding-left:var(--space-toaster-system-event-padding, 8px);
+  padding-right:var(--space-toaster-system-event-padding, 8px);
+  font-family:var(--sans-body-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-m-font-weight, Regular);
+  line-height:var(--sans-body-m-line-height, 20px);
+  font-size:var(--sans-body-m-font-size, 14px);
+  letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
+  cursor:pointer;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  box-sizing:border-box;
+  margin:0;
+  color:var(--sys-invert-neutral-text-main, #e7e7e7);
+  background-color:var(--sys-invert-neutral-decor-default, #333333);
+  border:none;
+}
+.buttonAction:hover, .buttonAction:focus-visible{
+  background-color:var(--sys-invert-neutral-decor-hovered, #494949);
+}
+.buttonAction:active{
+  background-color:var(--sys-invert-neutral-decor-activated, #494949);
+}
+.buttonAction: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, );
+  outline-color:var(--sys-available-on-complementary, #fdfdfd);
+  outline-offset:var(--spacing-state-focus-offset, 2px);
+}
+.buttonAction[data-critical]{
+  background-color:var(--sys-opacity-enabled, rgba(253, 253, 253, 0.1607843137));
+}
+.buttonAction[data-critical]:hover, .buttonAction[data-critical]:focus-visible{
+  background-color:var(--sys-opacity-hovered, rgba(253, 253, 253, 0.2392156863));
+}
+.buttonAction[data-critical]:active{
+  background-color:var(--sys-opacity-activated, rgba(253, 253, 253, 0.3215686275));
+}

package/dist/helpers.js

@@ -20,10 +20,10 @@ function getToasterContainer({ type, toasterParent, containerProps, }) {
         toasterContainerProps,
     };
 }
-function getToastOptions({ type, toastOptions, containerId, }) {
+function getToastOptions({ type, toastOptions, containerId, toasterProps, }) {
     return {
         toastId: toastOptions === null || toastOptions === void 0 ? void 0 : toastOptions.id,
-        autoClose: AUTO_CLOSE_TIME[type],
+        autoClose: (toasterProps === null || toasterProps === void 0 ? void 0 : toasterProps.loading) ? false : AUTO_CLOSE_TIME[type],
         containerId: containerId || `${TOASTER_CONTAINER_PREFIX}${type}`,
     };
 }
@@ -75,50 +75,50 @@ const userAction = {
     success(options) {
         return openToast({
             type: ToasterType.UserAction,
-            toasterProps: Object.assign(Object.assign({}, options), { appearance: ToastUserAction.appearances.Success }),
+            toasterProps: Object.assign(Object.assign({}, options), { appearance: 'success' }),
         });
     },
     neutral(options) {
         return openToast({
             type: ToasterType.UserAction,
-            toasterProps: Object.assign(Object.assign({}, options), { appearance: ToastUserAction.appearances.Neutral }),
+            toasterProps: Object.assign(Object.assign({}, options), { appearance: 'neutral' }),
         });
     },
     error(options) {
         return openToast({
             type: ToasterType.UserAction,
-            toasterProps: Object.assign(Object.assign({}, options), { appearance: ToastUserAction.appearances.Error }),
+            toasterProps: Object.assign(Object.assign({}, options), { appearance: 'error' }),
         });
     },
     warning(options) {
         return openToast({
             type: ToasterType.UserAction,
-            toasterProps: Object.assign(Object.assign({}, options), { appearance: ToastUserAction.appearances.Warning }),
+            toasterProps: Object.assign(Object.assign({}, options), { appearance: 'warning' }),
         });
     },
     update: {
         success(id, options) {
             updateToast(id, {
                 type: ToasterType.UserAction,
-                toasterProps: Object.assign(Object.assign({}, options), { appearance: ToastUserAction.appearances.Success }),
+                toasterProps: Object.assign(Object.assign({}, options), { appearance: 'success' }),
             });
         },
         neutral(id, options) {
             updateToast(id, {
                 type: ToasterType.UserAction,
-                toasterProps: Object.assign(Object.assign({}, options), { appearance: ToastUserAction.appearances.Neutral }),
+                toasterProps: Object.assign(Object.assign({}, options), { appearance: 'neutral' }),
             });
         },
         warning(id, options) {
             updateToast(id, {
                 type: ToasterType.UserAction,
-                toasterProps: Object.assign(Object.assign({}, options), { appearance: ToastUserAction.appearances.Warning }),
+                toasterProps: Object.assign(Object.assign({}, options), { appearance: 'warning' }),
             });
         },
         error(id, options) {
             updateToast(id, {
                 type: ToasterType.UserAction,
-                toasterProps: Object.assign(Object.assign({}, options), { appearance: ToastUserAction.appearances.Error }),
+                toasterProps: Object.assign(Object.assign({}, options), { appearance: 'error' }),
             });
         },
     },
@@ -130,62 +130,62 @@ const systemEvent = {
     success(options) {
         return openToast({
             type: ToasterType.SystemEvent,
-            toasterProps: Object.assign(Object.assign({}, options), { appearance: ToastSystemEvent.appearances.Success }),
+            toasterProps: Object.assign(Object.assign({}, options), { appearance: 'success' }),
         });
     },
     neutral(options) {
         return openToast({
             type: ToasterType.SystemEvent,
-            toasterProps: Object.assign(Object.assign({}, options), { appearance: ToastSystemEvent.appearances.Neutral }),
+            toasterProps: Object.assign(Object.assign({}, options), { appearance: 'neutral' }),
         });
     },
     warning(options) {
         return openToast({
             type: ToasterType.SystemEvent,
-            toasterProps: Object.assign(Object.assign({}, options), { appearance: ToastSystemEvent.appearances.Warning }),
+            toasterProps: Object.assign(Object.assign({}, options), { appearance: 'warning' }),
         });
     },
     error(options) {
         return openToast({
             type: ToasterType.SystemEvent,
-            toasterProps: Object.assign(Object.assign({}, options), { appearance: ToastSystemEvent.appearances.Error }),
+            toasterProps: Object.assign(Object.assign({}, options), { appearance: 'error' }),
         });
     },
     errorCritical(options) {
         return openToast({
             type: ToasterType.SystemEvent,
-            toasterProps: Object.assign(Object.assign({}, options), { appearance: ToastSystemEvent.appearances.ErrorCritical }),
+            toasterProps: Object.assign(Object.assign({}, options), { appearance: 'errorCritical' }),
         });
     },
     update: {
         success(id, options) {
             return updateToast(id, {
                 type: ToasterType.SystemEvent,
-                toasterProps: Object.assign(Object.assign({}, options), { appearance: ToastSystemEvent.appearances.Success }),
+                toasterProps: Object.assign(Object.assign({}, options), { appearance: 'success' }),
             });
         },
         neutral(id, options) {
             return updateToast(id, {
                 type: ToasterType.SystemEvent,
-                toasterProps: Object.assign(Object.assign({}, options), { appearance: ToastSystemEvent.appearances.Neutral }),
+                toasterProps: Object.assign(Object.assign({}, options), { appearance: 'neutral' }),
             });
         },
         warning(id, options) {
             return updateToast(id, {
                 type: ToasterType.SystemEvent,
-                toasterProps: Object.assign(Object.assign({}, options), { appearance: ToastSystemEvent.appearances.Warning }),
+                toasterProps: Object.assign(Object.assign({}, options), { appearance: 'warning' }),
             });
         },
         error(id, options) {
             return updateToast(id, {
                 type: ToasterType.SystemEvent,
-                toasterProps: Object.assign(Object.assign({}, options), { appearance: ToastSystemEvent.appearances.Error }),
+                toasterProps: Object.assign(Object.assign({}, options), { appearance: 'error' }),
             });
         },
         errorCritical(id, options) {
             return updateToast(id, {
                 type: ToasterType.SystemEvent,
-                toasterProps: Object.assign(Object.assign({}, options), { appearance: ToastSystemEvent.appearances.ErrorCritical }),
+                toasterProps: Object.assign(Object.assign({}, options), { appearance: 'errorCritical' }),
             });
         },
     },