@snack-uikit/toaster 0.4.1 → 0.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/README.md +6 -18
  3. package/dist/components/ToastSystemEvent/ToastSystemEvent.js +1 -3
  4. package/dist/components/ToastSystemEvent/constants.d.ts +5 -6
  5. package/dist/components/ToastSystemEvent/constants.js +6 -6
  6. package/dist/components/ToastUserAction/ToastUserAction.js +1 -1
  7. package/dist/components/ToasterContainer/ToasterContainer.js +1 -1
  8. package/package.json +6 -6
  9. package/src/components/ToastSystemEvent/ToastSystemEvent.tsx +2 -6
  10. package/src/components/ToastSystemEvent/constants.ts +6 -6
  11. package/src/components/ToastUserAction/ToastUserAction.tsx +2 -2
package/CHANGELOG.md CHANGED
@@ -3,6 +3,28 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## 0.5.1 (2023-12-14)
7
+
8
+ ### Only dependencies have been changed
9
+ * [@snack-uikit/icons@0.19.1](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/blob/master/packages/icons/CHANGELOG.md)
10
+ * [@snack-uikit/link@0.9.1](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/blob/master/packages/link/CHANGELOG.md)
11
+ * [@snack-uikit/truncate-string@0.4.1](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/blob/master/packages/truncate-string/CHANGELOG.md)
12
+
13
+
14
+
15
+
16
+
17
+ # 0.5.0 (2023-12-14)
18
+
19
+
20
+ ### BREAKING CHANGES
21
+
22
+
23
+ * **FF-3729:** replace enum with unions ([910db4a](https://github.com/cloud-ru-tech/snack-uikit/commit/910db4aa8231ccbc58e538e5c5c1f461b1dec275))
24
+
25
+
26
+
27
+
6
28
  ## 0.4.1 (2023-12-06)
7
29
 
8
30
  ### Only dependencies have been changed
package/README.md CHANGED
@@ -36,14 +36,6 @@ toaster.systemEvent.dismiss(systemEventId);
36
36
  ## Props
37
37
 
38
38
  ```typescript jsx
39
-
40
- enum ToastUserActionAppearance {
41
- Neutral = 'neutral',
42
- Success = 'success',
43
- Error = 'error',
44
- Warning = 'warning',
45
- }
46
-
47
39
  type ToastUserActionLink = {
48
40
  text: string;
49
41
  href: string;
@@ -53,24 +45,20 @@ type ToastUserActionLink = {
53
45
  type ToastUserActionProps = Partial<RtToastContentProps> &
54
46
  WithSupportProps<{
55
47
  label: string;
56
- appearance?: ToastUserActionAppearance;
57
48
  link?: ToastUserActionLink;
58
49
  className?: string;
59
50
  }>;
60
51
 
61
- enum ToastSystemEventAppearance {
62
- Neutral = 'neutral',
63
- Error = 'error',
64
- ErrorCritical = 'errorCritical',
65
- Warning = 'warning',
66
- Success = 'success',
67
- }
52
+ type ToastSystemEventLink = {
53
+ text: string;
54
+ href: string;
55
+ onClick?(e: MouseEvent<HTMLAnchorElement>): void;
56
+ };
68
57
 
69
58
  type ToastSystemEventProps = Partial<RtToastContentProps> &
70
59
  WithSupportProps<{
71
60
  title: string;
72
61
  description?: string;
73
- appearance?: ToastSystemEventAppearance;
74
62
  link?: ToastSystemEventLink;
75
63
  progressBar?: boolean;
76
64
  closable?: boolean;
@@ -81,4 +69,4 @@ type ToastSystemEventProps = Partial<RtToastContentProps> &
81
69
 
82
70
  ### TODO
83
71
 
84
- - Translations
72
+ - Translations
package/dist/components/ToastSystemEvent/ToastSystemEvent.js CHANGED
@@ -29,8 +29,6 @@ export function ToastSystemEvent(_a) {
29
29
  onCloseClick ? onCloseClick(e, closeToast) : closeToast === null || closeToast === void 0 ? void 0 : closeToast();
30
30
  };
31
31
  const icon = useMemo(() => getIcon(appearance), [appearance]);
32
- 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
33
- ? Link.onSurfaces.Accent
34
- : 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` } }))] })));
32
+ 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` } }))] })));
35
33
  }
36
34
  ToastSystemEvent.appearances = ToastSystemEventAppearance;
package/dist/components/ToastSystemEvent/constants.d.ts CHANGED
@@ -1,4 +1,3 @@
1
- import { OnColor } from '@snack-uikit/link';
2
1
  export declare enum ToastSystemEventAppearance {
3
2
  Neutral = "neutral",
4
3
  Error = "error",
@@ -7,9 +6,9 @@ export declare enum ToastSystemEventAppearance {
7
6
  Success = "success"
8
7
  }
9
8
  export declare const APPEARANCE_TO_ON_COLOR_MAP: {
10
- readonly neutral: OnColor.InvertNeutral;
11
- readonly error: OnColor.InvertNeutral;
12
- readonly errorCritical: OnColor.Red;
13
- readonly warning: OnColor.InvertNeutral;
14
- readonly success: OnColor.InvertNeutral;
9
+ readonly neutral: "invert-neutral";
10
+ readonly error: "invert-neutral";
11
+ readonly errorCritical: "red";
12
+ readonly warning: "invert-neutral";
13
+ readonly success: "invert-neutral";
15
14
  };
package/dist/components/ToastSystemEvent/constants.js CHANGED
@@ -1,4 +1,4 @@
1
- import { OnColor } from '@snack-uikit/link';
1
+ import { ON_COLOR } from '@snack-uikit/link';
2
2
  export var ToastSystemEventAppearance;
3
3
  (function (ToastSystemEventAppearance) {
4
4
  ToastSystemEventAppearance["Neutral"] = "neutral";
@@ -8,9 +8,9 @@ export var ToastSystemEventAppearance;
8
8
  ToastSystemEventAppearance["Success"] = "success";
9
9
  })(ToastSystemEventAppearance || (ToastSystemEventAppearance = {}));
10
10
  export const APPEARANCE_TO_ON_COLOR_MAP = {
11
- [ToastSystemEventAppearance.Neutral]: OnColor.InvertNeutral,
12
- [ToastSystemEventAppearance.Error]: OnColor.InvertNeutral,
13
- [ToastSystemEventAppearance.ErrorCritical]: OnColor.Red,
14
- [ToastSystemEventAppearance.Warning]: OnColor.InvertNeutral,
15
- [ToastSystemEventAppearance.Success]: OnColor.InvertNeutral,
11
+ [ToastSystemEventAppearance.Neutral]: ON_COLOR.InvertNeutral,
12
+ [ToastSystemEventAppearance.Error]: ON_COLOR.InvertNeutral,
13
+ [ToastSystemEventAppearance.ErrorCritical]: ON_COLOR.Red,
14
+ [ToastSystemEventAppearance.Warning]: ON_COLOR.InvertNeutral,
15
+ [ToastSystemEventAppearance.Success]: ON_COLOR.InvertNeutral,
16
16
  };
package/dist/components/ToastUserAction/ToastUserAction.js CHANGED
@@ -21,6 +21,6 @@ import { getIcon } from './utils';
21
21
  export function ToastUserAction(_a) {
22
22
  var { appearance = ToastUserActionAppearance.Neutral, label, link, className } = _a, rest = __rest(_a, ["appearance", "label", "link", "className"]);
23
23
  const icon = useMemo(() => getIcon(appearance), [appearance]);
24
- 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 }))] })));
24
+ 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 }))] })));
25
25
  }
26
26
  ToastUserAction.appearances = ToastUserActionAppearance;
package/dist/components/ToasterContainer/ToasterContainer.js CHANGED
@@ -31,6 +31,6 @@ export function ToasterContainer({ position = toast.POSITION.BOTTOM_RIGHT, limit
31
31
  const hasCloseAllButton = displayCloseAllButton && notificationCounter > 2 && !isCloseAllButtonHidden;
32
32
  return (_jsxs(_Fragment, { children: [_jsx(RtToastContainer, { hideProgressBar: true, closeOnClick: false, autoClose: false, closeButton: false, draggable: false, className: cn(styles[`container-${type}`], styles[position], {
33
33
  [styles.containerWithCloseAllButton]: hasCloseAllButton,
34
- }), toastClassName: styles.toaster, bodyClassName: styles.toaster, position: position, limit: limit, containerId: containerId, enableMultiContainer: Boolean(containerId) }), hasCloseAllButton && (_jsx("div", Object.assign({ className: cn(styles.buttonCloseColumnWrapper, styles[position]) }, { children: _jsx("button", Object.assign({ className: styles.buttonCloseColumn, onClick: closeAll, "data-test-id": TOAST_SYSTEM_EVENT_TEST_IDS.buttonCloseColumn }, { children: "\u0417\u0430\u043A\u0440\u044B\u0442\u044C \u0432\u0441\u0435" })) })))] }));
34
+ }), toastClassName: styles.toaster, bodyClassName: styles.toaster, position: position, limit: limit, containerId: containerId, enableMultiContainer: Boolean(containerId) }), hasCloseAllButton && (_jsx("div", { className: cn(styles.buttonCloseColumnWrapper, styles[position]), children: _jsx("button", { className: styles.buttonCloseColumn, onClick: closeAll, "data-test-id": TOAST_SYSTEM_EVENT_TEST_IDS.buttonCloseColumn, children: "\u0417\u0430\u043A\u0440\u044B\u0442\u044C \u0432\u0441\u0435" }) }))] }));
35
35
  }
36
36
  ToasterContainer.position = toast.POSITION;
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "access": "public"
5
5
  },
6
6
  "title": "Toaster",
7
- "version": "0.4.1",
7
+ "version": "0.5.1",
8
8
  "sideEffects": [
9
9
  "*.css",
10
10
  "*.woff",
@@ -32,12 +32,12 @@
32
32
  "license": "Apache-2.0",
33
33
  "scripts": {},
34
34
  "dependencies": {
35
- "@snack-uikit/icons": "0.19.0",
36
- "@snack-uikit/link": "0.8.1",
37
- "@snack-uikit/truncate-string": "0.3.1",
38
- "@snack-uikit/utils": "3.1.0",
35
+ "@snack-uikit/icons": "0.19.1",
36
+ "@snack-uikit/link": "0.9.1",
37
+ "@snack-uikit/truncate-string": "0.4.1",
38
+ "@snack-uikit/utils": "3.2.0",
39
39
  "classnames": "2.3.2",
40
40
  "react-toastify": "9.1.3"
41
41
  },
42
- "gitHead": "76a159dde7baccf49dc7b11e1fd7abc31424b42f"
42
+ "gitHead": "62f43bf0cbfd611d0b746117400f67096b1790f6"
43
43
  }
package/src/components/ToastSystemEvent/ToastSystemEvent.tsx CHANGED
@@ -77,15 +77,11 @@ export function ToastSystemEvent({
77
77
  <Link
78
78
  text={link.text}
79
79
  href={link.href}
80
- size={Link.sizes.M}
80
+ size='m'
81
81
  onClick={link.onClick}
82
82
  onColor={APPEARANCE_TO_ON_COLOR_MAP[appearance]}
83
83
  data-test-id={TOAST_SYSTEM_EVENT_TEST_IDS.link}
84
- onSurface={
85
- appearance === ToastSystemEventAppearance.ErrorCritical
86
- ? Link.onSurfaces.Accent
87
- : Link.onSurfaces.Background
88
- }
84
+ onSurface={appearance === ToastSystemEventAppearance.ErrorCritical ? 'accent' : 'background'}
89
85
  />
90
86
  )}
91
87
  </div>
package/src/components/ToastSystemEvent/constants.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { OnColor } from '@snack-uikit/link';
1
+ import { ON_COLOR } from '@snack-uikit/link';
2
2
 
3
3
  export enum ToastSystemEventAppearance {
4
4
  Neutral = 'neutral',
@@ -9,9 +9,9 @@ export enum ToastSystemEventAppearance {
9
9
  }
10
10
 
11
11
  export const APPEARANCE_TO_ON_COLOR_MAP = {
12
- [ToastSystemEventAppearance.Neutral]: OnColor.InvertNeutral,
13
- [ToastSystemEventAppearance.Error]: OnColor.InvertNeutral,
14
- [ToastSystemEventAppearance.ErrorCritical]: OnColor.Red,
15
- [ToastSystemEventAppearance.Warning]: OnColor.InvertNeutral,
16
- [ToastSystemEventAppearance.Success]: OnColor.InvertNeutral,
12
+ [ToastSystemEventAppearance.Neutral]: ON_COLOR.InvertNeutral,
13
+ [ToastSystemEventAppearance.Error]: ON_COLOR.InvertNeutral,
14
+ [ToastSystemEventAppearance.ErrorCritical]: ON_COLOR.Red,
15
+ [ToastSystemEventAppearance.Warning]: ON_COLOR.InvertNeutral,
16
+ [ToastSystemEventAppearance.Success]: ON_COLOR.InvertNeutral,
17
17
  } as const;
package/src/components/ToastUserAction/ToastUserAction.tsx CHANGED
@@ -53,11 +53,11 @@ export function ToastUserAction({
53
53
 
54
54
  {link && (
55
55
  <Link
56
- size={Link.sizes.M}
56
+ size='m'
57
57
  text={link.text}
58
58
  href={link.href}
59
59
  onClick={link.onClick}
60
- onColor={Link.onColors.InvertNeutral}
60
+ onColor='invert-neutral'
61
61
  data-test-id={TOAST_USER_ACTION_TEST_IDS.link}
62
62
  />
63
63
  )}