@transferwise/components 46.120.1 → 46.121.0
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.
- package/build/main.css +11 -7
- package/build/nudge/Nudge.js +12 -7
- package/build/nudge/Nudge.js.map +1 -1
- package/build/nudge/Nudge.mjs +12 -7
- package/build/nudge/Nudge.mjs.map +1 -1
- package/build/styles/main.css +11 -7
- package/build/styles/nudge/Nudge.css +11 -7
- package/build/types/nudge/Nudge.d.ts +2 -2
- package/build/types/nudge/Nudge.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/main.css +11 -7
- package/src/nudge/Nudge.css +11 -7
- package/src/nudge/Nudge.less +10 -13
- package/src/nudge/Nudge.spec.tsx +5 -6
- package/src/nudge/Nudge.story.tsx +9 -0
- package/src/nudge/Nudge.tsx +14 -3
package/build/main.css
CHANGED
|
@@ -5064,6 +5064,17 @@ html:not([dir="rtl"]) .np-navigation-option {
|
|
|
5064
5064
|
margin-left: 0;
|
|
5065
5065
|
margin-right: -16px;
|
|
5066
5066
|
}
|
|
5067
|
+
.wds-nudge-media-gift-box {
|
|
5068
|
+
margin-left: -22px;
|
|
5069
|
+
margin-top: 6px;
|
|
5070
|
+
position: absolute;
|
|
5071
|
+
width: 129px;
|
|
5072
|
+
}
|
|
5073
|
+
[dir="rtl"] .wds-nudge-media-gift-box {
|
|
5074
|
+
transform: scaleX(-1);
|
|
5075
|
+
margin-left: 0;
|
|
5076
|
+
margin-right: -22px;
|
|
5077
|
+
}
|
|
5067
5078
|
.wds-nudge-container {
|
|
5068
5079
|
align-items: stretch;
|
|
5069
5080
|
display: flex;
|
|
@@ -5099,13 +5110,6 @@ html:not([dir="rtl"]) .np-navigation-option {
|
|
|
5099
5110
|
-webkit-text-decoration: var(--nudge-link-text-decoration);
|
|
5100
5111
|
text-decoration: var(--nudge-link-text-decoration);
|
|
5101
5112
|
}
|
|
5102
|
-
.wds-nudge-container .wds-nudge-control {
|
|
5103
|
-
max-width: var(--nudge-control-width);
|
|
5104
|
-
flex-basis: var(--nudge-control-width);
|
|
5105
|
-
flex: 0 0 var(--nudge-control-width);
|
|
5106
|
-
height: var(--nudge-control-width);
|
|
5107
|
-
background-color: var(--nudge-control-background-color);
|
|
5108
|
-
}
|
|
5109
5113
|
.np-overlay-header .np-overlay-header__content {
|
|
5110
5114
|
min-height: 97px;
|
|
5111
5115
|
width: 100%;
|
package/build/nudge/Nudge.js
CHANGED
|
@@ -25,9 +25,12 @@ require('../common/propsValues/variant.js');
|
|
|
25
25
|
require('../common/propsValues/scroll.js');
|
|
26
26
|
require('../common/propsValues/markdownNodeType.js');
|
|
27
27
|
require('../common/fileType.js');
|
|
28
|
-
var
|
|
29
|
-
var
|
|
28
|
+
var icons = require('@transferwise/icons');
|
|
29
|
+
var reactIntl = require('react-intl');
|
|
30
|
+
var CloseButton_messages = require('../common/closeButton/CloseButton.messages.js');
|
|
30
31
|
var jsxRuntime = require('react/jsx-runtime');
|
|
32
|
+
var Link = require('../link/Link.js');
|
|
33
|
+
var IconButton = require('../iconButton/IconButton.js');
|
|
31
34
|
|
|
32
35
|
const STORAGE_NAME = 'dismissedNudges';
|
|
33
36
|
const getLocalStorage = () => {
|
|
@@ -43,7 +46,6 @@ const getLocalStorage = () => {
|
|
|
43
46
|
return [];
|
|
44
47
|
};
|
|
45
48
|
const Nudge = ({
|
|
46
|
-
media,
|
|
47
49
|
mediaName,
|
|
48
50
|
title,
|
|
49
51
|
link,
|
|
@@ -56,6 +58,7 @@ const Nudge = ({
|
|
|
56
58
|
className,
|
|
57
59
|
action
|
|
58
60
|
}) => {
|
|
61
|
+
const intl = reactIntl.useIntl();
|
|
59
62
|
const [isDismissed, setIsDismissed] = React.useState(false);
|
|
60
63
|
const [isMounted, setIsMounted] = React.useState(false);
|
|
61
64
|
const handleOnDismiss = () => {
|
|
@@ -123,10 +126,12 @@ const Nudge = ({
|
|
|
123
126
|
onClick: action.onClick,
|
|
124
127
|
children: action.text
|
|
125
128
|
})]
|
|
126
|
-
}), onDismiss || persistDismissal ? /*#__PURE__*/jsxRuntime.jsx(
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
129
|
+
}), onDismiss || persistDismissal ? /*#__PURE__*/jsxRuntime.jsx(IconButton.default, {
|
|
130
|
+
size: 24,
|
|
131
|
+
priority: "tertiary",
|
|
132
|
+
"aria-label": intl.formatMessage(CloseButton_messages.default.ariaLabel),
|
|
133
|
+
onClick: handleOnDismiss,
|
|
134
|
+
children: /*#__PURE__*/jsxRuntime.jsx(icons.Cross, {})
|
|
130
135
|
}) : null]
|
|
131
136
|
})]
|
|
132
137
|
});
|
package/build/nudge/Nudge.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Nudge.js","sources":["../../src/nudge/Nudge.tsx"],"sourcesContent":["import { Illustration, Assets, type IllustrationNames } from '@wise/art';\nimport { clsx } from 'clsx';\nimport { ReactNode, useEffect, useState, MouseEvent } from 'react';\n\nimport Body from '../body';\nimport { Typography } from '../common';\nimport {
|
|
1
|
+
{"version":3,"file":"Nudge.js","sources":["../../src/nudge/Nudge.tsx"],"sourcesContent":["import { Illustration, Assets, type IllustrationNames } from '@wise/art';\nimport { clsx } from 'clsx';\nimport { ReactNode, useEffect, useState, MouseEvent } from 'react';\n\nimport Body from '../body';\nimport { Typography } from '../common';\nimport Link from '../link';\nimport type { AlertAction } from '../alert';\nimport IconButton from '../iconButton';\nimport { Cross } from '@transferwise/icons';\nimport { useIntl } from 'react-intl';\nimport closeBtnMessages from '../common/closeButton/CloseButton.messages';\n\n// WARNING: Changing this will cause nudges to reappear wherever persist nudge is used and privacy team will need to be updated too\nexport const STORAGE_NAME = 'dismissedNudges';\n\nconst getLocalStorage = (): string[] => {\n try {\n const storageItem = localStorage.getItem(STORAGE_NAME);\n\n if (storageItem) {\n const storage: unknown = JSON.parse(storageItem);\n\n if (Array.isArray(storage)) {\n return storage.map((item) => String(item));\n }\n }\n } catch (error) {}\n\n return [];\n};\n\ntype MediaNameType =\n | `${Assets.GLOBE}`\n | `${Assets.LOCK}`\n | `${Assets.WALLET}`\n | `${Assets.GEAR}`\n | `${Assets.INVITE_LETTER}`\n | `${Assets.PERSONAL_CARD}`\n | `${Assets.BUSINESS_CARD}`\n | `${Assets.HEART}`\n | `${Assets.MULTI_CURRENCY}`\n | `${Assets.SHOPPING_BAG}`\n | `${Assets.FLOWER}`\n | `${Assets.GIFT_BOX}`\n | `${Assets.BACKPACK}`;\n\ntype BaseProps = {\n /** @deprecated use `mediaName` property instead */\n media?: ReactNode;\n /** Media name */\n mediaName?: MediaNameType;\n title: ReactNode;\n link?: ReactNode;\n href?: string;\n onClick?: (event?: MouseEvent<HTMLSpanElement>) => void;\n /** Fired when the user clicks on close button */\n onDismiss?: () => void;\n /** An optional call to action to sit under the main body of the nudge. If your label is short, use aria-label to provide more context */\n action?: AlertAction;\n className?: string;\n};\n\nexport interface OptionalId extends BaseProps {\n id?: string;\n persistDismissal?: false;\n isPreviouslyDismissed?: undefined;\n}\n\nexport interface RequiredPersistProps extends BaseProps {\n /** This ID should be completely unique to the page and feature as it uses a shared array which could conflict with other nudges in Wise */\n id: string;\n /** Use persist dismissal to keep the nudge dismissed using the browser's localStorage */\n persistDismissal: true;\n /**\n * Fired on mount for determining if nudge has been dismissed before\n *\n * @param {boolean} value - set to true if dismissed previously\n */\n isPreviouslyDismissed?: (value: boolean) => void;\n}\n\nexport type Props = OptionalId | RequiredPersistProps;\n\nconst Nudge = ({\n mediaName,\n title,\n link,\n href,\n onClick,\n onDismiss,\n persistDismissal,\n isPreviouslyDismissed,\n id,\n className,\n action,\n}: Props) => {\n const intl = useIntl();\n const [isDismissed, setIsDismissed] = useState(false);\n const [isMounted, setIsMounted] = useState(false);\n\n const handleOnDismiss = () => {\n const dismissedNudgesStorage = getLocalStorage();\n\n if (persistDismissal && id) {\n try {\n localStorage.setItem(STORAGE_NAME, JSON.stringify([...dismissedNudgesStorage, id]));\n } catch (error) {}\n\n setIsDismissed(true);\n }\n\n if (onDismiss) {\n onDismiss();\n }\n };\n\n useEffect(() => {\n if (persistDismissal && id) {\n const dismissedNudgesStorage = getLocalStorage();\n let isDismissed = false;\n\n if (dismissedNudgesStorage?.find((item) => item === id)) {\n setIsDismissed(true);\n isDismissed = true;\n }\n\n if (isPreviouslyDismissed) {\n isPreviouslyDismissed(isDismissed);\n }\n }\n\n setIsMounted(true);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [id, persistDismissal]);\n\n if (persistDismissal && (isDismissed || !isMounted)) {\n return null;\n }\n\n return (\n <div className={clsx('wds-nudge', className)} id={id}>\n {!!mediaName && (\n <div className=\"wds-nudge-media\">\n <Illustration\n name={mediaName as IllustrationNames}\n className={clsx(`wds-nudge-media-${mediaName}`)}\n size=\"small\"\n disablePadding\n alt=\"\"\n />\n </div>\n )}\n <div className=\"wds-nudge-container\">\n <div className=\"wds-nudge-content\">\n <Body type={Typography.BODY_LARGE} className={clsx('wds-nudge-body')}>\n {title}\n </Body>\n {/* Merge these two Link instances into one */}\n {link && (\n <Link\n href={href}\n type={Typography.LINK_LARGE}\n className=\"wds-nudge-link\"\n onClick={onClick}\n >\n {link}\n </Link>\n )}\n {action && (\n <Link\n href={action.href}\n target={action.target}\n className=\"m-t-1\"\n aria-label={action['aria-label']}\n type={Typography.LINK_LARGE}\n onClick={action.onClick}\n >\n {action.text}\n </Link>\n )}\n </div>\n {onDismiss || persistDismissal ? (\n <IconButton\n size={24}\n priority=\"tertiary\"\n aria-label={intl.formatMessage(closeBtnMessages.ariaLabel)}\n onClick={handleOnDismiss}\n >\n <Cross />\n </IconButton>\n ) : null}\n </div>\n </div>\n );\n};\n\nexport default Nudge;\n"],"names":["STORAGE_NAME","getLocalStorage","storageItem","localStorage","getItem","storage","JSON","parse","Array","isArray","map","item","String","error","Nudge","mediaName","title","link","href","onClick","onDismiss","persistDismissal","isPreviouslyDismissed","id","className","action","intl","useIntl","isDismissed","setIsDismissed","useState","isMounted","setIsMounted","handleOnDismiss","dismissedNudgesStorage","setItem","stringify","useEffect","find","_jsxs","clsx","children","_jsx","Illustration","name","size","disablePadding","alt","Body","type","Typography","BODY_LARGE","Link","LINK_LARGE","target","text","IconButton","priority","formatMessage","closeBtnMessages","ariaLabel","Cross"],"mappings":"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"}
|
package/build/nudge/Nudge.mjs
CHANGED
|
@@ -21,9 +21,12 @@ import '../common/propsValues/variant.mjs';
|
|
|
21
21
|
import '../common/propsValues/scroll.mjs';
|
|
22
22
|
import '../common/propsValues/markdownNodeType.mjs';
|
|
23
23
|
import '../common/fileType.mjs';
|
|
24
|
-
import {
|
|
25
|
-
import
|
|
24
|
+
import { Cross } from '@transferwise/icons';
|
|
25
|
+
import { useIntl } from 'react-intl';
|
|
26
|
+
import closeBtnMessages from '../common/closeButton/CloseButton.messages.mjs';
|
|
26
27
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
28
|
+
import Link from '../link/Link.mjs';
|
|
29
|
+
import IconButton from '../iconButton/IconButton.mjs';
|
|
27
30
|
|
|
28
31
|
const STORAGE_NAME = 'dismissedNudges';
|
|
29
32
|
const getLocalStorage = () => {
|
|
@@ -39,7 +42,6 @@ const getLocalStorage = () => {
|
|
|
39
42
|
return [];
|
|
40
43
|
};
|
|
41
44
|
const Nudge = ({
|
|
42
|
-
media,
|
|
43
45
|
mediaName,
|
|
44
46
|
title,
|
|
45
47
|
link,
|
|
@@ -52,6 +54,7 @@ const Nudge = ({
|
|
|
52
54
|
className,
|
|
53
55
|
action
|
|
54
56
|
}) => {
|
|
57
|
+
const intl = useIntl();
|
|
55
58
|
const [isDismissed, setIsDismissed] = useState(false);
|
|
56
59
|
const [isMounted, setIsMounted] = useState(false);
|
|
57
60
|
const handleOnDismiss = () => {
|
|
@@ -119,10 +122,12 @@ const Nudge = ({
|
|
|
119
122
|
onClick: action.onClick,
|
|
120
123
|
children: action.text
|
|
121
124
|
})]
|
|
122
|
-
}), onDismiss || persistDismissal ? /*#__PURE__*/jsx(
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
125
|
+
}), onDismiss || persistDismissal ? /*#__PURE__*/jsx(IconButton, {
|
|
126
|
+
size: 24,
|
|
127
|
+
priority: "tertiary",
|
|
128
|
+
"aria-label": intl.formatMessage(closeBtnMessages.ariaLabel),
|
|
129
|
+
onClick: handleOnDismiss,
|
|
130
|
+
children: /*#__PURE__*/jsx(Cross, {})
|
|
126
131
|
}) : null]
|
|
127
132
|
})]
|
|
128
133
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Nudge.mjs","sources":["../../src/nudge/Nudge.tsx"],"sourcesContent":["import { Illustration, Assets, type IllustrationNames } from '@wise/art';\nimport { clsx } from 'clsx';\nimport { ReactNode, useEffect, useState, MouseEvent } from 'react';\n\nimport Body from '../body';\nimport { Typography } from '../common';\nimport {
|
|
1
|
+
{"version":3,"file":"Nudge.mjs","sources":["../../src/nudge/Nudge.tsx"],"sourcesContent":["import { Illustration, Assets, type IllustrationNames } from '@wise/art';\nimport { clsx } from 'clsx';\nimport { ReactNode, useEffect, useState, MouseEvent } from 'react';\n\nimport Body from '../body';\nimport { Typography } from '../common';\nimport Link from '../link';\nimport type { AlertAction } from '../alert';\nimport IconButton from '../iconButton';\nimport { Cross } from '@transferwise/icons';\nimport { useIntl } from 'react-intl';\nimport closeBtnMessages from '../common/closeButton/CloseButton.messages';\n\n// WARNING: Changing this will cause nudges to reappear wherever persist nudge is used and privacy team will need to be updated too\nexport const STORAGE_NAME = 'dismissedNudges';\n\nconst getLocalStorage = (): string[] => {\n try {\n const storageItem = localStorage.getItem(STORAGE_NAME);\n\n if (storageItem) {\n const storage: unknown = JSON.parse(storageItem);\n\n if (Array.isArray(storage)) {\n return storage.map((item) => String(item));\n }\n }\n } catch (error) {}\n\n return [];\n};\n\ntype MediaNameType =\n | `${Assets.GLOBE}`\n | `${Assets.LOCK}`\n | `${Assets.WALLET}`\n | `${Assets.GEAR}`\n | `${Assets.INVITE_LETTER}`\n | `${Assets.PERSONAL_CARD}`\n | `${Assets.BUSINESS_CARD}`\n | `${Assets.HEART}`\n | `${Assets.MULTI_CURRENCY}`\n | `${Assets.SHOPPING_BAG}`\n | `${Assets.FLOWER}`\n | `${Assets.GIFT_BOX}`\n | `${Assets.BACKPACK}`;\n\ntype BaseProps = {\n /** @deprecated use `mediaName` property instead */\n media?: ReactNode;\n /** Media name */\n mediaName?: MediaNameType;\n title: ReactNode;\n link?: ReactNode;\n href?: string;\n onClick?: (event?: MouseEvent<HTMLSpanElement>) => void;\n /** Fired when the user clicks on close button */\n onDismiss?: () => void;\n /** An optional call to action to sit under the main body of the nudge. If your label is short, use aria-label to provide more context */\n action?: AlertAction;\n className?: string;\n};\n\nexport interface OptionalId extends BaseProps {\n id?: string;\n persistDismissal?: false;\n isPreviouslyDismissed?: undefined;\n}\n\nexport interface RequiredPersistProps extends BaseProps {\n /** This ID should be completely unique to the page and feature as it uses a shared array which could conflict with other nudges in Wise */\n id: string;\n /** Use persist dismissal to keep the nudge dismissed using the browser's localStorage */\n persistDismissal: true;\n /**\n * Fired on mount for determining if nudge has been dismissed before\n *\n * @param {boolean} value - set to true if dismissed previously\n */\n isPreviouslyDismissed?: (value: boolean) => void;\n}\n\nexport type Props = OptionalId | RequiredPersistProps;\n\nconst Nudge = ({\n mediaName,\n title,\n link,\n href,\n onClick,\n onDismiss,\n persistDismissal,\n isPreviouslyDismissed,\n id,\n className,\n action,\n}: Props) => {\n const intl = useIntl();\n const [isDismissed, setIsDismissed] = useState(false);\n const [isMounted, setIsMounted] = useState(false);\n\n const handleOnDismiss = () => {\n const dismissedNudgesStorage = getLocalStorage();\n\n if (persistDismissal && id) {\n try {\n localStorage.setItem(STORAGE_NAME, JSON.stringify([...dismissedNudgesStorage, id]));\n } catch (error) {}\n\n setIsDismissed(true);\n }\n\n if (onDismiss) {\n onDismiss();\n }\n };\n\n useEffect(() => {\n if (persistDismissal && id) {\n const dismissedNudgesStorage = getLocalStorage();\n let isDismissed = false;\n\n if (dismissedNudgesStorage?.find((item) => item === id)) {\n setIsDismissed(true);\n isDismissed = true;\n }\n\n if (isPreviouslyDismissed) {\n isPreviouslyDismissed(isDismissed);\n }\n }\n\n setIsMounted(true);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [id, persistDismissal]);\n\n if (persistDismissal && (isDismissed || !isMounted)) {\n return null;\n }\n\n return (\n <div className={clsx('wds-nudge', className)} id={id}>\n {!!mediaName && (\n <div className=\"wds-nudge-media\">\n <Illustration\n name={mediaName as IllustrationNames}\n className={clsx(`wds-nudge-media-${mediaName}`)}\n size=\"small\"\n disablePadding\n alt=\"\"\n />\n </div>\n )}\n <div className=\"wds-nudge-container\">\n <div className=\"wds-nudge-content\">\n <Body type={Typography.BODY_LARGE} className={clsx('wds-nudge-body')}>\n {title}\n </Body>\n {/* Merge these two Link instances into one */}\n {link && (\n <Link\n href={href}\n type={Typography.LINK_LARGE}\n className=\"wds-nudge-link\"\n onClick={onClick}\n >\n {link}\n </Link>\n )}\n {action && (\n <Link\n href={action.href}\n target={action.target}\n className=\"m-t-1\"\n aria-label={action['aria-label']}\n type={Typography.LINK_LARGE}\n onClick={action.onClick}\n >\n {action.text}\n </Link>\n )}\n </div>\n {onDismiss || persistDismissal ? (\n <IconButton\n size={24}\n priority=\"tertiary\"\n aria-label={intl.formatMessage(closeBtnMessages.ariaLabel)}\n onClick={handleOnDismiss}\n >\n <Cross />\n </IconButton>\n ) : null}\n </div>\n </div>\n );\n};\n\nexport default Nudge;\n"],"names":["STORAGE_NAME","getLocalStorage","storageItem","localStorage","getItem","storage","JSON","parse","Array","isArray","map","item","String","error","Nudge","mediaName","title","link","href","onClick","onDismiss","persistDismissal","isPreviouslyDismissed","id","className","action","intl","useIntl","isDismissed","setIsDismissed","useState","isMounted","setIsMounted","handleOnDismiss","dismissedNudgesStorage","setItem","stringify","useEffect","find","_jsxs","clsx","children","_jsx","Illustration","name","size","disablePadding","alt","Body","type","Typography","BODY_LARGE","Link","LINK_LARGE","target","text","IconButton","priority","formatMessage","closeBtnMessages","ariaLabel","Cross"],"mappings":"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"}
|
package/build/styles/main.css
CHANGED
|
@@ -5064,6 +5064,17 @@ html:not([dir="rtl"]) .np-navigation-option {
|
|
|
5064
5064
|
margin-left: 0;
|
|
5065
5065
|
margin-right: -16px;
|
|
5066
5066
|
}
|
|
5067
|
+
.wds-nudge-media-gift-box {
|
|
5068
|
+
margin-left: -22px;
|
|
5069
|
+
margin-top: 6px;
|
|
5070
|
+
position: absolute;
|
|
5071
|
+
width: 129px;
|
|
5072
|
+
}
|
|
5073
|
+
[dir="rtl"] .wds-nudge-media-gift-box {
|
|
5074
|
+
transform: scaleX(-1);
|
|
5075
|
+
margin-left: 0;
|
|
5076
|
+
margin-right: -22px;
|
|
5077
|
+
}
|
|
5067
5078
|
.wds-nudge-container {
|
|
5068
5079
|
align-items: stretch;
|
|
5069
5080
|
display: flex;
|
|
@@ -5099,13 +5110,6 @@ html:not([dir="rtl"]) .np-navigation-option {
|
|
|
5099
5110
|
-webkit-text-decoration: var(--nudge-link-text-decoration);
|
|
5100
5111
|
text-decoration: var(--nudge-link-text-decoration);
|
|
5101
5112
|
}
|
|
5102
|
-
.wds-nudge-container .wds-nudge-control {
|
|
5103
|
-
max-width: var(--nudge-control-width);
|
|
5104
|
-
flex-basis: var(--nudge-control-width);
|
|
5105
|
-
flex: 0 0 var(--nudge-control-width);
|
|
5106
|
-
height: var(--nudge-control-width);
|
|
5107
|
-
background-color: var(--nudge-control-background-color);
|
|
5108
|
-
}
|
|
5109
5113
|
.np-overlay-header .np-overlay-header__content {
|
|
5110
5114
|
min-height: 97px;
|
|
5111
5115
|
width: 100%;
|
|
@@ -158,6 +158,17 @@
|
|
|
158
158
|
margin-left: 0;
|
|
159
159
|
margin-right: -16px;
|
|
160
160
|
}
|
|
161
|
+
.wds-nudge-media-gift-box {
|
|
162
|
+
margin-left: -22px;
|
|
163
|
+
margin-top: 6px;
|
|
164
|
+
position: absolute;
|
|
165
|
+
width: 129px;
|
|
166
|
+
}
|
|
167
|
+
[dir="rtl"] .wds-nudge-media-gift-box {
|
|
168
|
+
transform: scaleX(-1);
|
|
169
|
+
margin-left: 0;
|
|
170
|
+
margin-right: -22px;
|
|
171
|
+
}
|
|
161
172
|
.wds-nudge-container {
|
|
162
173
|
align-items: stretch;
|
|
163
174
|
display: flex;
|
|
@@ -193,10 +204,3 @@
|
|
|
193
204
|
-webkit-text-decoration: var(--nudge-link-text-decoration);
|
|
194
205
|
text-decoration: var(--nudge-link-text-decoration);
|
|
195
206
|
}
|
|
196
|
-
.wds-nudge-container .wds-nudge-control {
|
|
197
|
-
max-width: var(--nudge-control-width);
|
|
198
|
-
flex-basis: var(--nudge-control-width);
|
|
199
|
-
flex: 0 0 var(--nudge-control-width);
|
|
200
|
-
height: var(--nudge-control-width);
|
|
201
|
-
background-color: var(--nudge-control-background-color);
|
|
202
|
-
}
|
|
@@ -2,7 +2,7 @@ import { Assets } from '@wise/art';
|
|
|
2
2
|
import { ReactNode, MouseEvent } from 'react';
|
|
3
3
|
import type { AlertAction } from '../alert';
|
|
4
4
|
export declare const STORAGE_NAME = "dismissedNudges";
|
|
5
|
-
type MediaNameType = `${Assets.GLOBE}` | `${Assets.LOCK}` | `${Assets.WALLET}` | `${Assets.GEAR}` | `${Assets.INVITE_LETTER}` | `${Assets.PERSONAL_CARD}` | `${Assets.BUSINESS_CARD}` | `${Assets.HEART}` | `${Assets.MULTI_CURRENCY}` | `${Assets.SHOPPING_BAG}` | `${Assets.FLOWER}` | `${Assets.BACKPACK}`;
|
|
5
|
+
type MediaNameType = `${Assets.GLOBE}` | `${Assets.LOCK}` | `${Assets.WALLET}` | `${Assets.GEAR}` | `${Assets.INVITE_LETTER}` | `${Assets.PERSONAL_CARD}` | `${Assets.BUSINESS_CARD}` | `${Assets.HEART}` | `${Assets.MULTI_CURRENCY}` | `${Assets.SHOPPING_BAG}` | `${Assets.FLOWER}` | `${Assets.GIFT_BOX}` | `${Assets.BACKPACK}`;
|
|
6
6
|
type BaseProps = {
|
|
7
7
|
/** @deprecated use `mediaName` property instead */
|
|
8
8
|
media?: ReactNode;
|
|
@@ -36,6 +36,6 @@ export interface RequiredPersistProps extends BaseProps {
|
|
|
36
36
|
isPreviouslyDismissed?: (value: boolean) => void;
|
|
37
37
|
}
|
|
38
38
|
export type Props = OptionalId | RequiredPersistProps;
|
|
39
|
-
declare const Nudge: ({
|
|
39
|
+
declare const Nudge: ({ mediaName, title, link, href, onClick, onDismiss, persistDismissal, isPreviouslyDismissed, id, className, action, }: Props) => import("react").JSX.Element | null;
|
|
40
40
|
export default Nudge;
|
|
41
41
|
//# sourceMappingURL=Nudge.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Nudge.d.ts","sourceRoot":"","sources":["../../../src/nudge/Nudge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgB,MAAM,EAA0B,MAAM,WAAW,CAAC;AAEzE,OAAO,EAAE,SAAS,EAAuB,UAAU,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Nudge.d.ts","sourceRoot":"","sources":["../../../src/nudge/Nudge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgB,MAAM,EAA0B,MAAM,WAAW,CAAC;AAEzE,OAAO,EAAE,SAAS,EAAuB,UAAU,EAAE,MAAM,OAAO,CAAC;AAKnE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAO5C,eAAO,MAAM,YAAY,oBAAoB,CAAC;AAkB9C,KAAK,aAAa,GACd,GAAG,MAAM,CAAC,KAAK,EAAE,GACjB,GAAG,MAAM,CAAC,IAAI,EAAE,GAChB,GAAG,MAAM,CAAC,MAAM,EAAE,GAClB,GAAG,MAAM,CAAC,IAAI,EAAE,GAChB,GAAG,MAAM,CAAC,aAAa,EAAE,GACzB,GAAG,MAAM,CAAC,aAAa,EAAE,GACzB,GAAG,MAAM,CAAC,aAAa,EAAE,GACzB,GAAG,MAAM,CAAC,KAAK,EAAE,GACjB,GAAG,MAAM,CAAC,cAAc,EAAE,GAC1B,GAAG,MAAM,CAAC,YAAY,EAAE,GACxB,GAAG,MAAM,CAAC,MAAM,EAAE,GAClB,GAAG,MAAM,CAAC,QAAQ,EAAE,GACpB,GAAG,MAAM,CAAC,QAAQ,EAAE,CAAC;AAEzB,KAAK,SAAS,GAAG;IACf,mDAAmD;IACnD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,kBAAkB;IAClB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,eAAe,CAAC,KAAK,IAAI,CAAC;IACxD,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,yIAAyI;IACzI,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,WAAW,UAAW,SAAQ,SAAS;IAC3C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,gBAAgB,CAAC,EAAE,KAAK,CAAC;IACzB,qBAAqB,CAAC,EAAE,SAAS,CAAC;CACnC;AAED,MAAM,WAAW,oBAAqB,SAAQ,SAAS;IACrD,2IAA2I;IAC3I,EAAE,EAAE,MAAM,CAAC;IACX,yFAAyF;IACzF,gBAAgB,EAAE,IAAI,CAAC;IACvB;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CAClD;AAED,MAAM,MAAM,KAAK,GAAG,UAAU,GAAG,oBAAoB,CAAC;AAEtD,QAAA,MAAM,KAAK,GAAI,uHAYZ,KAAK,uCAmGP,CAAC;AAEF,eAAe,KAAK,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@transferwise/components",
|
|
3
|
-
"version": "46.
|
|
3
|
+
"version": "46.121.0",
|
|
4
4
|
"description": "Neptune React components",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -69,7 +69,7 @@
|
|
|
69
69
|
"@types/react": "^18.3.23",
|
|
70
70
|
"@types/react-dom": "^18.3.7",
|
|
71
71
|
"@types/react-transition-group": "4.4.12",
|
|
72
|
-
"@wise/art": "^2.
|
|
72
|
+
"@wise/art": "^2.26.0",
|
|
73
73
|
"@wise/eslint-config": "^13.3.0",
|
|
74
74
|
"babel-plugin-formatjs": "^10.5.39",
|
|
75
75
|
"eslint": "^9.39.2",
|
|
@@ -93,7 +93,7 @@
|
|
|
93
93
|
"peerDependencies": {
|
|
94
94
|
"@transferwise/icons": "^3 || ^4",
|
|
95
95
|
"@transferwise/neptune-css": "^14.26",
|
|
96
|
-
"@wise/art": "^2.
|
|
96
|
+
"@wise/art": "^2.26",
|
|
97
97
|
"@wise/components-theming": "^1.9.1",
|
|
98
98
|
"framer-motion": "^12.23.26",
|
|
99
99
|
"react": ">=18",
|
package/src/main.css
CHANGED
|
@@ -5064,6 +5064,17 @@ html:not([dir="rtl"]) .np-navigation-option {
|
|
|
5064
5064
|
margin-left: 0;
|
|
5065
5065
|
margin-right: -16px;
|
|
5066
5066
|
}
|
|
5067
|
+
.wds-nudge-media-gift-box {
|
|
5068
|
+
margin-left: -22px;
|
|
5069
|
+
margin-top: 6px;
|
|
5070
|
+
position: absolute;
|
|
5071
|
+
width: 129px;
|
|
5072
|
+
}
|
|
5073
|
+
[dir="rtl"] .wds-nudge-media-gift-box {
|
|
5074
|
+
transform: scaleX(-1);
|
|
5075
|
+
margin-left: 0;
|
|
5076
|
+
margin-right: -22px;
|
|
5077
|
+
}
|
|
5067
5078
|
.wds-nudge-container {
|
|
5068
5079
|
align-items: stretch;
|
|
5069
5080
|
display: flex;
|
|
@@ -5099,13 +5110,6 @@ html:not([dir="rtl"]) .np-navigation-option {
|
|
|
5099
5110
|
-webkit-text-decoration: var(--nudge-link-text-decoration);
|
|
5100
5111
|
text-decoration: var(--nudge-link-text-decoration);
|
|
5101
5112
|
}
|
|
5102
|
-
.wds-nudge-container .wds-nudge-control {
|
|
5103
|
-
max-width: var(--nudge-control-width);
|
|
5104
|
-
flex-basis: var(--nudge-control-width);
|
|
5105
|
-
flex: 0 0 var(--nudge-control-width);
|
|
5106
|
-
height: var(--nudge-control-width);
|
|
5107
|
-
background-color: var(--nudge-control-background-color);
|
|
5108
|
-
}
|
|
5109
5113
|
.np-overlay-header .np-overlay-header__content {
|
|
5110
5114
|
min-height: 97px;
|
|
5111
5115
|
width: 100%;
|
package/src/nudge/Nudge.css
CHANGED
|
@@ -158,6 +158,17 @@
|
|
|
158
158
|
margin-left: 0;
|
|
159
159
|
margin-right: -16px;
|
|
160
160
|
}
|
|
161
|
+
.wds-nudge-media-gift-box {
|
|
162
|
+
margin-left: -22px;
|
|
163
|
+
margin-top: 6px;
|
|
164
|
+
position: absolute;
|
|
165
|
+
width: 129px;
|
|
166
|
+
}
|
|
167
|
+
[dir="rtl"] .wds-nudge-media-gift-box {
|
|
168
|
+
transform: scaleX(-1);
|
|
169
|
+
margin-left: 0;
|
|
170
|
+
margin-right: -22px;
|
|
171
|
+
}
|
|
161
172
|
.wds-nudge-container {
|
|
162
173
|
align-items: stretch;
|
|
163
174
|
display: flex;
|
|
@@ -193,10 +204,3 @@
|
|
|
193
204
|
-webkit-text-decoration: var(--nudge-link-text-decoration);
|
|
194
205
|
text-decoration: var(--nudge-link-text-decoration);
|
|
195
206
|
}
|
|
196
|
-
.wds-nudge-container .wds-nudge-control {
|
|
197
|
-
max-width: var(--nudge-control-width);
|
|
198
|
-
flex-basis: var(--nudge-control-width);
|
|
199
|
-
flex: 0 0 var(--nudge-control-width);
|
|
200
|
-
height: var(--nudge-control-width);
|
|
201
|
-
background-color: var(--nudge-control-background-color);
|
|
202
|
-
}
|
package/src/nudge/Nudge.less
CHANGED
|
@@ -53,8 +53,7 @@
|
|
|
53
53
|
}
|
|
54
54
|
|
|
55
55
|
&-personal-card,
|
|
56
|
-
&-business-card
|
|
57
|
-
{
|
|
56
|
+
&-business-card {
|
|
58
57
|
.media-position(104px, -15px, 2px);
|
|
59
58
|
}
|
|
60
59
|
|
|
@@ -69,7 +68,7 @@
|
|
|
69
68
|
&-shopping-bag {
|
|
70
69
|
.media-position(116px, -9px, 14px);
|
|
71
70
|
}
|
|
72
|
-
|
|
71
|
+
|
|
73
72
|
&-flower {
|
|
74
73
|
.media-position(156px, -24px, 11px);
|
|
75
74
|
}
|
|
@@ -77,6 +76,10 @@
|
|
|
77
76
|
&-backpack {
|
|
78
77
|
.media-position(123px, -16px, 6px);
|
|
79
78
|
}
|
|
79
|
+
|
|
80
|
+
&-gift-box {
|
|
81
|
+
.media-position(129px, -22px, 6px);
|
|
82
|
+
}
|
|
80
83
|
}
|
|
81
84
|
|
|
82
85
|
&-container {
|
|
@@ -85,11 +88,13 @@
|
|
|
85
88
|
flex: 1;
|
|
86
89
|
gap: var(--nudge-flex-gap);
|
|
87
90
|
justify-content: space-between;
|
|
88
|
-
padding: var(--nudge-container-padding) var(--nudge-container-padding)
|
|
91
|
+
padding: var(--nudge-container-padding) var(--nudge-container-padding)
|
|
92
|
+
var(--nudge-container-padding) 0;
|
|
89
93
|
width: 100%;
|
|
90
94
|
|
|
91
95
|
[dir="rtl"] & {
|
|
92
|
-
padding: var(--nudge-container-padding) 0 var(--nudge-container-padding)
|
|
96
|
+
padding: var(--nudge-container-padding) 0 var(--nudge-container-padding)
|
|
97
|
+
var(--nudge-container-padding);
|
|
93
98
|
}
|
|
94
99
|
|
|
95
100
|
.np-theme-personal & {
|
|
@@ -117,14 +122,6 @@
|
|
|
117
122
|
text-decoration: var(--nudge-link-text-decoration);
|
|
118
123
|
}
|
|
119
124
|
}
|
|
120
|
-
|
|
121
|
-
.wds-nudge-control {
|
|
122
|
-
max-width: var(--nudge-control-width);
|
|
123
|
-
flex-basis: var(--nudge-control-width);
|
|
124
|
-
flex: 0 0 var(--nudge-control-width);
|
|
125
|
-
height: var(--nudge-control-width);
|
|
126
|
-
background-color: var(--nudge-control-background-color);
|
|
127
|
-
}
|
|
128
125
|
}
|
|
129
126
|
}
|
|
130
127
|
|
package/src/nudge/Nudge.spec.tsx
CHANGED
|
@@ -1,14 +1,11 @@
|
|
|
1
|
-
import { render, fireEvent, cleanup, screen } from '../test-utils';
|
|
1
|
+
import { render, fireEvent, cleanup, screen, mockMatchMedia } from '../test-utils';
|
|
2
2
|
|
|
3
3
|
import Nudge from '.';
|
|
4
4
|
|
|
5
|
+
mockMatchMedia();
|
|
6
|
+
|
|
5
7
|
describe('Nudge', () => {
|
|
6
8
|
const defaultProps = {
|
|
7
|
-
media: (
|
|
8
|
-
<span role="img" aria-label="Party popper emoji">
|
|
9
|
-
🎉
|
|
10
|
-
</span>
|
|
11
|
-
),
|
|
12
9
|
title: 'A nudge title',
|
|
13
10
|
link: 'CTA',
|
|
14
11
|
href: '#',
|
|
@@ -75,6 +72,7 @@ describe('Nudge', () => {
|
|
|
75
72
|
});
|
|
76
73
|
|
|
77
74
|
it('shows a nudge if localStorage has been set with a different id for a different nudge and calls is previously dismissed with FALSE', () => {
|
|
75
|
+
mockMatchMedia();
|
|
78
76
|
jest.spyOn(Storage.prototype, 'getItem').mockReturnValue('["BANANA"]');
|
|
79
77
|
const isPreviouslyDismissed = jest.fn();
|
|
80
78
|
|
|
@@ -92,6 +90,7 @@ describe('Nudge', () => {
|
|
|
92
90
|
});
|
|
93
91
|
|
|
94
92
|
it('calls local storage with updated dismissed nudges value', () => {
|
|
93
|
+
mockMatchMedia();
|
|
95
94
|
jest.spyOn(Storage.prototype, 'getItem').mockReturnValue('["BANANA"]');
|
|
96
95
|
const setItem = jest.spyOn(Storage.prototype, 'setItem');
|
|
97
96
|
|
|
@@ -119,6 +119,15 @@ export const Default = () => {
|
|
|
119
119
|
onClick={action('action clicked')}
|
|
120
120
|
onDismiss={action('dismissed')}
|
|
121
121
|
/>
|
|
122
|
+
<Nudge
|
|
123
|
+
mediaName={Assets.GIFT_BOX}
|
|
124
|
+
className="m-b-2"
|
|
125
|
+
title="Text that is no longer than two lines."
|
|
126
|
+
link="Link"
|
|
127
|
+
href="#"
|
|
128
|
+
onClick={action('action clicked')}
|
|
129
|
+
onDismiss={action('dismissed')}
|
|
130
|
+
/>
|
|
122
131
|
</div>
|
|
123
132
|
);
|
|
124
133
|
};
|
package/src/nudge/Nudge.tsx
CHANGED
|
@@ -4,9 +4,12 @@ import { ReactNode, useEffect, useState, MouseEvent } from 'react';
|
|
|
4
4
|
|
|
5
5
|
import Body from '../body';
|
|
6
6
|
import { Typography } from '../common';
|
|
7
|
-
import { CloseButton } from '../common/closeButton';
|
|
8
7
|
import Link from '../link';
|
|
9
8
|
import type { AlertAction } from '../alert';
|
|
9
|
+
import IconButton from '../iconButton';
|
|
10
|
+
import { Cross } from '@transferwise/icons';
|
|
11
|
+
import { useIntl } from 'react-intl';
|
|
12
|
+
import closeBtnMessages from '../common/closeButton/CloseButton.messages';
|
|
10
13
|
|
|
11
14
|
// WARNING: Changing this will cause nudges to reappear wherever persist nudge is used and privacy team will need to be updated too
|
|
12
15
|
export const STORAGE_NAME = 'dismissedNudges';
|
|
@@ -39,6 +42,7 @@ type MediaNameType =
|
|
|
39
42
|
| `${Assets.MULTI_CURRENCY}`
|
|
40
43
|
| `${Assets.SHOPPING_BAG}`
|
|
41
44
|
| `${Assets.FLOWER}`
|
|
45
|
+
| `${Assets.GIFT_BOX}`
|
|
42
46
|
| `${Assets.BACKPACK}`;
|
|
43
47
|
|
|
44
48
|
type BaseProps = {
|
|
@@ -79,7 +83,6 @@ export interface RequiredPersistProps extends BaseProps {
|
|
|
79
83
|
export type Props = OptionalId | RequiredPersistProps;
|
|
80
84
|
|
|
81
85
|
const Nudge = ({
|
|
82
|
-
media,
|
|
83
86
|
mediaName,
|
|
84
87
|
title,
|
|
85
88
|
link,
|
|
@@ -92,6 +95,7 @@ const Nudge = ({
|
|
|
92
95
|
className,
|
|
93
96
|
action,
|
|
94
97
|
}: Props) => {
|
|
98
|
+
const intl = useIntl();
|
|
95
99
|
const [isDismissed, setIsDismissed] = useState(false);
|
|
96
100
|
const [isMounted, setIsMounted] = useState(false);
|
|
97
101
|
|
|
@@ -177,7 +181,14 @@ const Nudge = ({
|
|
|
177
181
|
)}
|
|
178
182
|
</div>
|
|
179
183
|
{onDismiss || persistDismissal ? (
|
|
180
|
-
<
|
|
184
|
+
<IconButton
|
|
185
|
+
size={24}
|
|
186
|
+
priority="tertiary"
|
|
187
|
+
aria-label={intl.formatMessage(closeBtnMessages.ariaLabel)}
|
|
188
|
+
onClick={handleOnDismiss}
|
|
189
|
+
>
|
|
190
|
+
<Cross />
|
|
191
|
+
</IconButton>
|
|
181
192
|
) : null}
|
|
182
193
|
</div>
|
|
183
194
|
</div>
|