@snack-uikit/toaster 0.4.1 → 0.5.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.5.0 (2023-12-14)
+
+
+### BREAKING CHANGES
+
+
+* **FF-3729:** replace enum with unions ([910db4a](https://github.com/cloud-ru-tech/snack-uikit/commit/910db4aa8231ccbc58e538e5c5c1f461b1dec275))
+
+
+
+
 ## 0.4.1 (2023-12-06)
 
 ### Only dependencies have been changed

package/README.md

@@ -36,14 +36,6 @@ toaster.systemEvent.dismiss(systemEventId);
 ## Props
 
 ```typescript jsx
-
-enum ToastUserActionAppearance {
-  Neutral = 'neutral',
-  Success = 'success',
-  Error = 'error',
-  Warning = 'warning',
-}
-
 type ToastUserActionLink = {
   text: string;
   href: string;
@@ -53,24 +45,20 @@ type ToastUserActionLink = {
 type ToastUserActionProps = Partial<RtToastContentProps> &
   WithSupportProps<{
     label: string;
-    appearance?: ToastUserActionAppearance;
     link?: ToastUserActionLink;
     className?: string;
   }>;
 
-enum ToastSystemEventAppearance {
-  Neutral = 'neutral',
-  Error = 'error',
-  ErrorCritical = 'errorCritical',
-  Warning = 'warning',
-  Success = 'success',
-}
+type ToastSystemEventLink = {
+  text: string;
+  href: string;
+  onClick?(e: MouseEvent<HTMLAnchorElement>): void;
+};
 
 type ToastSystemEventProps = Partial<RtToastContentProps> &
   WithSupportProps<{
     title: string;
     description?: string;
-    appearance?: ToastSystemEventAppearance;
     link?: ToastSystemEventLink;
     progressBar?: boolean;
     closable?: boolean;
@@ -81,4 +69,4 @@ type ToastSystemEventProps = Partial<RtToastContentProps> &
 
 ### TODO
 
-- Translations
+- Translations

package/dist/components/ToastSystemEvent/ToastSystemEvent.js

@@ -29,8 +29,6 @@ export function ToastSystemEvent(_a) {
         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", Object.assign({ className: styles.icon }, { children: icon })), _jsxs("div", Object.assign({ className: styles.content }, { children: [_jsxs("div", { children: [_jsx("span", Object.assign({ className: styles.title }, { children: _jsx(TruncateString, { text: title, maxLines: 1, hideTooltip: true, "data-test-id": TOAST_SYSTEM_EVENT_TEST_IDS.title }) })), description && (_jsx("span", Object.assign({ 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: Link.sizes.M, onClick: link.onClick, onColor: APPEARANCE_TO_ON_COLOR_MAP[appearance], "data-test-id": TOAST_SYSTEM_EVENT_TEST_IDS.link, onSurface: appearance === ToastSystemEventAppearance.ErrorCritical
-                            ? Link.onSurfaces.Accent
-                            : Link.onSurfaces.Background }))] })), closable && (_jsx("button", Object.assign({ 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: [_jsx("div", Object.assign({ className: styles.icon }, { children: icon })), _jsxs("div", Object.assign({ className: styles.content }, { children: [_jsxs("div", { children: [_jsx("span", Object.assign({ className: styles.title }, { children: _jsx(TruncateString, { text: title, maxLines: 1, hideTooltip: true, "data-test-id": TOAST_SYSTEM_EVENT_TEST_IDS.title }) })), description && (_jsx("span", Object.assign({ 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", Object.assign({ 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` } }))] })));
 }
 ToastSystemEvent.appearances = ToastSystemEventAppearance;

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

@@ -1,4 +1,3 @@
-import { OnColor } from '@snack-uikit/link';
 export declare enum ToastSystemEventAppearance {
     Neutral = "neutral",
     Error = "error",
@@ -7,9 +6,9 @@ export declare enum ToastSystemEventAppearance {
     Success = "success"
 }
 export declare const APPEARANCE_TO_ON_COLOR_MAP: {
-    readonly neutral: OnColor.InvertNeutral;
-    readonly error: OnColor.InvertNeutral;
-    readonly errorCritical: OnColor.Red;
-    readonly warning: OnColor.InvertNeutral;
-    readonly success: OnColor.InvertNeutral;
+    readonly neutral: "invert-neutral";
+    readonly error: "invert-neutral";
+    readonly errorCritical: "red";
+    readonly warning: "invert-neutral";
+    readonly success: "invert-neutral";
 };

package/dist/components/ToastSystemEvent/constants.js

@@ -1,4 +1,4 @@
-import { OnColor } from '@snack-uikit/link';
+import { ON_COLOR } from '@snack-uikit/link';
 export var ToastSystemEventAppearance;
 (function (ToastSystemEventAppearance) {
     ToastSystemEventAppearance["Neutral"] = "neutral";
@@ -8,9 +8,9 @@ export var ToastSystemEventAppearance;
     ToastSystemEventAppearance["Success"] = "success";
 })(ToastSystemEventAppearance || (ToastSystemEventAppearance = {}));
 export const APPEARANCE_TO_ON_COLOR_MAP = {
-    [ToastSystemEventAppearance.Neutral]: OnColor.InvertNeutral,
-    [ToastSystemEventAppearance.Error]: OnColor.InvertNeutral,
-    [ToastSystemEventAppearance.ErrorCritical]: OnColor.Red,
-    [ToastSystemEventAppearance.Warning]: OnColor.InvertNeutral,
-    [ToastSystemEventAppearance.Success]: OnColor.InvertNeutral,
+    [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,
 };

package/dist/components/ToastUserAction/ToastUserAction.js

@@ -21,6 +21,6 @@ import { getIcon } from './utils';
 export function ToastUserAction(_a) {
     var { appearance = ToastUserActionAppearance.Neutral, label, link, className } = _a, rest = __rest(_a, ["appearance", "label", "link", "className"]);
     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", Object.assign({ className: styles.content }, { children: [icon && (_jsx("span", Object.assign({ className: styles.icon, "data-test-id": TOAST_USER_ACTION_TEST_IDS.icon }, { children: icon }))), _jsx("span", Object.assign({ className: styles.label, "data-test-id": TOAST_USER_ACTION_TEST_IDS.label }, { children: label }))] })), link && (_jsx(Link, { size: Link.sizes.M, text: link.text, href: link.href, onClick: link.onClick, onColor: Link.onColors.InvertNeutral, "data-test-id": TOAST_USER_ACTION_TEST_IDS.link }))] })));
+    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", Object.assign({ className: styles.content }, { children: [icon && (_jsx("span", Object.assign({ className: styles.icon, "data-test-id": TOAST_USER_ACTION_TEST_IDS.icon }, { children: icon }))), _jsx("span", Object.assign({ 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 }))] })));
 }
 ToastUserAction.appearances = ToastUserActionAppearance;

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Toaster",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -33,11 +33,11 @@
   "scripts": {},
   "dependencies": {
     "@snack-uikit/icons": "0.19.0",
-    "@snack-uikit/link": "0.8.1",
-    "@snack-uikit/truncate-string": "0.3.1",
-    "@snack-uikit/utils": "3.1.0",
+    "@snack-uikit/link": "0.9.0",
+    "@snack-uikit/truncate-string": "0.4.0",
+    "@snack-uikit/utils": "3.2.0",
     "classnames": "2.3.2",
     "react-toastify": "9.1.3"
   },
-  "gitHead": "76a159dde7baccf49dc7b11e1fd7abc31424b42f"
+  "gitHead": "bd39c5e674f3b91b0e2487782a04b15034cf3d8b"
 }

package/src/components/ToastSystemEvent/ToastSystemEvent.tsx

@@ -77,15 +77,11 @@ export function ToastSystemEvent({
           <Link
             text={link.text}
             href={link.href}
-            size={Link.sizes.M}
+            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
-                ? Link.onSurfaces.Accent
-                : Link.onSurfaces.Background
-            }
+            onSurface={appearance === ToastSystemEventAppearance.ErrorCritical ? 'accent' : 'background'}
           />
         )}
       </div>

package/src/components/ToastSystemEvent/constants.ts

@@ -1,4 +1,4 @@
-import { OnColor } from '@snack-uikit/link';
+import { ON_COLOR } from '@snack-uikit/link';
 
 export enum ToastSystemEventAppearance {
   Neutral = 'neutral',
@@ -9,9 +9,9 @@ export enum ToastSystemEventAppearance {
 }
 
 export const APPEARANCE_TO_ON_COLOR_MAP = {
-  [ToastSystemEventAppearance.Neutral]: OnColor.InvertNeutral,
-  [ToastSystemEventAppearance.Error]: OnColor.InvertNeutral,
-  [ToastSystemEventAppearance.ErrorCritical]: OnColor.Red,
-  [ToastSystemEventAppearance.Warning]: OnColor.InvertNeutral,
-  [ToastSystemEventAppearance.Success]: OnColor.InvertNeutral,
+  [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,
 } as const;

package/src/components/ToastUserAction/ToastUserAction.tsx

@@ -53,11 +53,11 @@ export function ToastUserAction({
 
       {link && (
         <Link
-          size={Link.sizes.M}
+          size='m'
           text={link.text}
           href={link.href}
           onClick={link.onClick}
-          onColor={Link.onColors.InvertNeutral}
+          onColor='invert-neutral'
           data-test-id={TOAST_USER_ACTION_TEST_IDS.link}
         />
       )}