@transferwise/components 45.23.0 → 45.25.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/index.esm.js +5 -13
- package/build/index.esm.js.map +1 -1
- package/build/index.js +5 -13
- package/build/index.js.map +1 -1
- package/build/main.css +1 -1
- package/build/styles/main.css +1 -1
- package/build/styles/nudge/Nudge.css +1 -1
- package/build/types/info/Info.d.ts +6 -2
- package/build/types/info/Info.d.ts.map +1 -1
- package/build/types/nudge/Nudge.d.ts +3 -10
- package/build/types/nudge/Nudge.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/info/Info.tsx +6 -1
- package/src/main.css +1 -1
- package/src/nudge/Nudge.css +1 -1
- package/src/nudge/Nudge.less +18 -22
- package/src/nudge/Nudge.spec.tsx +0 -18
- package/src/nudge/Nudge.story.tsx +31 -0
- package/src/nudge/Nudge.tsx +28 -36
package/src/nudge/Nudge.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
.wds-nudge{--nudge-background-color:var(--color-background-neutral);--nudge-border-radius:var(--radius-medium);--nudge-min-height:106px;--nudge-padding:0;--nudge-flex-gap:var(--size-16);--nudge-media-width:104px;--nudge-link-text-decoration:underline;--nudge-container-padding:var(--size-16);--nudge-content-flex-alignment:center;--nudge-title-color:var(--color-content-primary);--nudge-title-font-weight:var(--font-weight-semi-bold);--nudge-title-line-height:var(--line-height-title);--nudge-control-width:var(--size-24);--nudge-control-background-color:var(--color-background-neutral);align-items:stretch;background-color:var(--nudge-background-color);border-radius:var(--nudge-border-radius);display:flex;flex:1;gap:var(--nudge-flex-gap);min-height:var(--nudge-min-height);overflow:hidden;padding:var(--nudge-padding);position:relative;width:100%}.wds-nudge-media{flex-basis:var(--nudge-media-width);max-width:var(--nudge-media-width)}.wds-nudge-media-globe{margin-left:-76px;margin-top:-5px;position:absolute;width:161px}[dir=rtl] .wds-nudge-media-globe{margin-left:0;margin-right:-76px;transform:scaleX(-1)}.wds-nudge-media-lock{margin-left:-11px;margin-top:18px;position:absolute;transform:rotate(-14.86deg);width:104px}[dir=rtl] .wds-nudge-media-lock{margin-left:0;margin-right:-11px;transform:scaleX(-1)}.wds-nudge-media-wallet{margin-left:-15px;margin-top:18px;position:absolute;width:107px}[dir=rtl] .wds-nudge-media-wallet{margin-left:0;margin-right:-15px;transform:scaleX(-1)}.wds-nudge-media-gear{margin-left:-18px;margin-top:19px;position:absolute;width:111px}[dir=rtl] .wds-nudge-media-gear{margin-left:0;margin-right:-18px;transform:scaleX(-1)}.wds-nudge-media-invite-letter{margin-left:-17px;margin-top:-2px;position:absolute;width:105px}[dir=rtl] .wds-nudge-media-invite-letter{margin-left:0;margin-right:-17px;transform:scaleX(-1)}.wds-nudge-media-business-card,.wds-nudge-media-personal-card{margin-left:-15px;margin-top:2px;position:absolute;width:104px}[dir=rtl] .wds-nudge-media-business-card,[dir=rtl] .wds-nudge-media-personal-card{margin-left:0;margin-right:-15px;transform:scaleX(-1)}.wds-nudge-media-heart{margin-left:-7px;margin-top:11px;position:absolute;width:95px}[dir=rtl] .wds-nudge-media-heart{margin-left:0;margin-right:-7px;transform:scaleX(-1)}.wds-nudge-media-multi-currency{margin-left:-30px;margin-top:1px;position:absolute;width:131px}[dir=rtl] .wds-nudge-media-multi-currency{margin-left:0;margin-right:-30px;transform:scaleX(-1)}.wds-nudge-media-shopping-bag{margin-left:1px;margin-top:14px;position:absolute;width:116px}[dir=rtl] .wds-nudge-media-shopping-bag{margin-left:0;margin-right:1px;transform:scaleX(-1)}.wds-nudge-container{align-items:stretch;display:flex;flex:1;gap:var(--nudge-flex-gap);justify-content:space-between;padding:var(--nudge-container-padding) var(--nudge-container-padding) var(--nudge-container-padding) 0;width:100%}[dir=rtl] .wds-nudge-container{padding:var(--nudge-container-padding) 0 var(--nudge-container-padding) var(--nudge-container-padding)}.np-theme-personal .wds-nudge-container:first-child{padding-left:var(--nudge-flex-gap)}.wds-nudge-container .wds-nudge-content{align-self:var(--nudge-content-flex-alignment);display:flex;flex-direction:column}.wds-nudge-container .wds-nudge-content .wds-nudge-title{color:var(--nudge-title-color);font-weight:var(--nudge-title-font-weight);line-height:var(--nudge-title-line-height);margin:0}.wds-nudge-container .wds-nudge-content .wds-nudge-link{font-weight:600;font-weight:var(--font-weight-semi-bold);margin-top:4px;margin-top:var(--size-4);-webkit-text-decoration:var(--nudge-link-text-decoration);text-decoration:var(--nudge-link-text-decoration)}.wds-nudge-container .wds-nudge-control{background-color:var(--nudge-control-background-color);flex-basis:var(--nudge-control-width);flex:0 0 var(--nudge-control-width);height:var(--nudge-control-width);max-width:var(--nudge-control-width)}
|
package/src/nudge/Nudge.less
CHANGED
|
@@ -1,21 +1,19 @@
|
|
|
1
|
-
|
|
1
|
+
.wds-nudge {
|
|
2
2
|
--nudge-background-color: var(--color-background-neutral);
|
|
3
|
-
--nudge-border-radius:
|
|
4
|
-
--nudge-min-height:
|
|
5
|
-
--nudge-padding:
|
|
3
|
+
--nudge-border-radius: var(--radius-medium);
|
|
4
|
+
--nudge-min-height: 106px;
|
|
5
|
+
--nudge-padding: 0;
|
|
6
6
|
--nudge-flex-gap: var(--size-16);
|
|
7
|
-
--nudge-media-width:
|
|
8
|
-
--nudge-link-text-decoration:
|
|
9
|
-
--nudge-container-padding:
|
|
7
|
+
--nudge-media-width: 104px;
|
|
8
|
+
--nudge-link-text-decoration: underline;
|
|
9
|
+
--nudge-container-padding: var(--size-16);
|
|
10
10
|
--nudge-content-flex-alignment: center;
|
|
11
11
|
--nudge-title-color: var(--color-content-primary);
|
|
12
12
|
--nudge-title-font-weight: var(--font-weight-semi-bold);
|
|
13
13
|
--nudge-title-line-height: var(--line-height-title);
|
|
14
|
-
--nudge-control-width: var(--size-
|
|
15
|
-
--nudge-control-background-color:
|
|
16
|
-
}
|
|
14
|
+
--nudge-control-width: var(--size-24);
|
|
15
|
+
--nudge-control-background-color: var(--color-background-neutral);
|
|
17
16
|
|
|
18
|
-
.wds-nudge {
|
|
19
17
|
align-items: stretch;
|
|
20
18
|
background-color: var(--nudge-background-color);
|
|
21
19
|
border-radius: var(--nudge-border-radius);
|
|
@@ -58,6 +56,15 @@
|
|
|
58
56
|
{
|
|
59
57
|
.media-position(104px, -15px, 2px);
|
|
60
58
|
}
|
|
59
|
+
&-heart {
|
|
60
|
+
.media-position(95px, -7px, 11px);
|
|
61
|
+
}
|
|
62
|
+
&-multi-currency {
|
|
63
|
+
.media-position(131px, -30px, 1px);
|
|
64
|
+
}
|
|
65
|
+
&-shopping-bag {
|
|
66
|
+
.media-position(116px, 1px, 14px);
|
|
67
|
+
}
|
|
61
68
|
}
|
|
62
69
|
|
|
63
70
|
&-container {
|
|
@@ -121,14 +128,3 @@
|
|
|
121
128
|
margin-right: @margin-left;
|
|
122
129
|
}
|
|
123
130
|
}
|
|
124
|
-
|
|
125
|
-
.np-theme-personal {
|
|
126
|
-
--nudge-border-radius: var(--radius-medium);
|
|
127
|
-
--nudge-min-height: 106px;
|
|
128
|
-
--nudge-padding: 0;
|
|
129
|
-
--nudge-link-text-decoration: underline;
|
|
130
|
-
--nudge-container-padding: var(--size-16);
|
|
131
|
-
--nudge-media-width: 104px;
|
|
132
|
-
--nudge-control-width: var(--size-24);
|
|
133
|
-
--nudge-control-background-color: var(--color-background-neutral);
|
|
134
|
-
}
|
package/src/nudge/Nudge.spec.tsx
CHANGED
|
@@ -18,12 +18,6 @@ describe('Nudge', () => {
|
|
|
18
18
|
|
|
19
19
|
afterEach(cleanup);
|
|
20
20
|
|
|
21
|
-
it('renders a media element', () => {
|
|
22
|
-
render(<Nudge {...defaultProps} />);
|
|
23
|
-
const media = screen.getByRole('img');
|
|
24
|
-
expect(media).toBeInTheDocument();
|
|
25
|
-
});
|
|
26
|
-
|
|
27
21
|
it('renders a title', () => {
|
|
28
22
|
render(<Nudge {...defaultProps} />);
|
|
29
23
|
const title = screen.getByText('A nudge title');
|
|
@@ -51,18 +45,6 @@ describe('Nudge', () => {
|
|
|
51
45
|
expect(defaultProps.onDismiss).toHaveBeenCalledTimes(1);
|
|
52
46
|
});
|
|
53
47
|
|
|
54
|
-
it('adds the passed id to the parent container', () => {
|
|
55
|
-
render(<Nudge {...defaultProps} id="nudge-id" />);
|
|
56
|
-
const parentContainer = screen.getByRole('img').parentElement?.parentElement;
|
|
57
|
-
expect(parentContainer?.id).toBe('nudge-id');
|
|
58
|
-
});
|
|
59
|
-
|
|
60
|
-
it(`adds the passed className to the parent container's className`, () => {
|
|
61
|
-
render(<Nudge {...defaultProps} className="happy-nudge" />);
|
|
62
|
-
const parentContainer = screen.getByRole('img').parentElement?.parentElement;
|
|
63
|
-
expect(parentContainer).toHaveClass('happy-nudge');
|
|
64
|
-
});
|
|
65
|
-
|
|
66
48
|
describe('Nudge persistance', () => {
|
|
67
49
|
beforeEach(() => {
|
|
68
50
|
jest.resetAllMocks();
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { action } from '@storybook/addon-actions';
|
|
2
|
+
import { Assets } from '@wise/art';
|
|
2
3
|
|
|
3
4
|
import { Nudge } from '..';
|
|
4
5
|
|
|
@@ -73,6 +74,36 @@ export const Default = () => {
|
|
|
73
74
|
onClick={action('action clicked')}
|
|
74
75
|
onDismiss={action('dismissed')}
|
|
75
76
|
/>
|
|
77
|
+
|
|
78
|
+
<Nudge
|
|
79
|
+
mediaName={Assets.HEART}
|
|
80
|
+
className="m-b-2"
|
|
81
|
+
title="Text that is no longer than two lines."
|
|
82
|
+
link="Link"
|
|
83
|
+
href="#"
|
|
84
|
+
onClick={action('action clicked')}
|
|
85
|
+
onDismiss={action('dismissed')}
|
|
86
|
+
/>
|
|
87
|
+
|
|
88
|
+
<Nudge
|
|
89
|
+
mediaName={Assets.MULTI_CURRENCY}
|
|
90
|
+
className="m-b-2"
|
|
91
|
+
title="Text that is no longer than two lines."
|
|
92
|
+
link="Link"
|
|
93
|
+
href="#"
|
|
94
|
+
onClick={action('action clicked')}
|
|
95
|
+
onDismiss={action('dismissed')}
|
|
96
|
+
/>
|
|
97
|
+
|
|
98
|
+
<Nudge
|
|
99
|
+
mediaName={Assets.SHOPPING_BAG}
|
|
100
|
+
className="m-b-2"
|
|
101
|
+
title="Text that is no longer than two lines."
|
|
102
|
+
link="Link"
|
|
103
|
+
href="#"
|
|
104
|
+
onClick={action('action clicked')}
|
|
105
|
+
onDismiss={action('dismissed')}
|
|
106
|
+
/>
|
|
76
107
|
</div>
|
|
77
108
|
);
|
|
78
109
|
};
|
package/src/nudge/Nudge.tsx
CHANGED
|
@@ -1,26 +1,15 @@
|
|
|
1
|
-
import { Illustration } from '@wise/art';
|
|
2
|
-
import { useTheme } from '@wise/components-theming';
|
|
1
|
+
import { Illustration, Assets, IllustrationNames } from '@wise/art';
|
|
3
2
|
import classNames from 'classnames';
|
|
4
3
|
import { ReactNode, useEffect, useState, MouseEvent } from 'react';
|
|
5
4
|
|
|
6
5
|
import Body from '../body';
|
|
7
|
-
import { Typography } from '../common';
|
|
6
|
+
import { Size, Typography } from '../common';
|
|
8
7
|
import { CloseButton } from '../common/closeButton';
|
|
9
8
|
import Link from '../link';
|
|
10
9
|
|
|
11
10
|
// WARNING: Changing this will cause nudges to reappear wherever persist nudge is used and privacy team will need to be updated too
|
|
12
11
|
export const STORAGE_NAME = 'dismissedNudges';
|
|
13
12
|
|
|
14
|
-
export const Media = {
|
|
15
|
-
GLOBE: 'globe',
|
|
16
|
-
LOCK: 'lock',
|
|
17
|
-
WALLET: 'wallet',
|
|
18
|
-
GEAR: 'gear',
|
|
19
|
-
'INVITE-LETTER': 'invite-letter',
|
|
20
|
-
'PERSONAL-CARD': 'personal-card',
|
|
21
|
-
'BUSINESS-CARD': 'business-card',
|
|
22
|
-
} as const;
|
|
23
|
-
|
|
24
13
|
const getLocalStorage = (): Array<string> => {
|
|
25
14
|
try {
|
|
26
15
|
const storageItem = localStorage.getItem(STORAGE_NAME);
|
|
@@ -38,11 +27,23 @@ const getLocalStorage = (): Array<string> => {
|
|
|
38
27
|
return [];
|
|
39
28
|
};
|
|
40
29
|
|
|
30
|
+
type MediaNameType =
|
|
31
|
+
| `${Assets.GLOBE}`
|
|
32
|
+
| `${Assets.LOCK}`
|
|
33
|
+
| `${Assets.WALLET}`
|
|
34
|
+
| `${Assets.GEAR}`
|
|
35
|
+
| `${Assets.INVITE_LETTER}`
|
|
36
|
+
| `${Assets.PERSONAL_CARD}`
|
|
37
|
+
| `${Assets.BUSINESS_CARD}`
|
|
38
|
+
| `${Assets.HEART}`
|
|
39
|
+
| `${Assets.MULTI_CURRENCY}`
|
|
40
|
+
| `${Assets.SHOPPING_BAG}`;
|
|
41
|
+
|
|
41
42
|
type BaseProps = {
|
|
42
43
|
/** @deprecated use `mediaName` property instead */
|
|
43
44
|
media?: ReactNode;
|
|
44
45
|
/** Media name */
|
|
45
|
-
mediaName?:
|
|
46
|
+
mediaName?: MediaNameType;
|
|
46
47
|
title: ReactNode;
|
|
47
48
|
/** Element inside link */
|
|
48
49
|
link?: ReactNode;
|
|
@@ -89,7 +90,6 @@ const Nudge = ({
|
|
|
89
90
|
id,
|
|
90
91
|
className,
|
|
91
92
|
}: Props) => {
|
|
92
|
-
const { isModern } = useTheme();
|
|
93
93
|
const [isDismissed, setIsDismissed] = useState(false);
|
|
94
94
|
const [isMounted, setIsMounted] = useState(false);
|
|
95
95
|
|
|
@@ -138,30 +138,22 @@ const Nudge = ({
|
|
|
138
138
|
|
|
139
139
|
return (
|
|
140
140
|
<div className={classNames('wds-nudge', className)} id={id}>
|
|
141
|
-
{
|
|
142
|
-
|
|
143
|
-
<
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
</div>
|
|
152
|
-
)
|
|
153
|
-
) : (
|
|
154
|
-
<div className="wds-nudge-media">{media}</div>
|
|
141
|
+
{!!mediaName && (
|
|
142
|
+
<div className="wds-nudge-media">
|
|
143
|
+
<Illustration
|
|
144
|
+
name={mediaName as IllustrationNames}
|
|
145
|
+
className={classNames(`wds-nudge-media-${mediaName}`)}
|
|
146
|
+
size="small"
|
|
147
|
+
disablePadding
|
|
148
|
+
alt=""
|
|
149
|
+
/>
|
|
150
|
+
</div>
|
|
155
151
|
)}
|
|
156
152
|
<div className="wds-nudge-container">
|
|
157
153
|
<div className="wds-nudge-content">
|
|
158
|
-
{
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
</Body>
|
|
162
|
-
) : (
|
|
163
|
-
<div className="wds-nudge-title">{title}</div>
|
|
164
|
-
)}
|
|
154
|
+
<Body type={Typography.BODY_LARGE} className={classNames('wds-nudge-body')}>
|
|
155
|
+
{title}
|
|
156
|
+
</Body>
|
|
165
157
|
{link && (
|
|
166
158
|
<Link
|
|
167
159
|
href={href}
|