@transferwise/components 46.126.0 → 46.127.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 (64) hide show
  1. package/build/listItem/Prompt/ListItemPrompt.js +5 -4
  2. package/build/listItem/Prompt/ListItemPrompt.js.map +1 -1
  3. package/build/listItem/Prompt/ListItemPrompt.mjs +6 -2
  4. package/build/listItem/Prompt/ListItemPrompt.mjs.map +1 -1
  5. package/build/main.css +21 -21
  6. package/build/styles/main.css +21 -21
  7. package/build/styles/sentimentSurface/SentimentSurface.css +21 -21
  8. package/build/types/listItem/ListItem.d.ts +1 -1
  9. package/build/types/listItem/Prompt/ListItemPrompt.d.ts +2 -3
  10. package/build/types/listItem/Prompt/ListItemPrompt.d.ts.map +1 -1
  11. package/package.json +4 -4
  12. package/src/accordion/Accordion.test.js +0 -6
  13. package/src/accordion/AccordionItem/AccordionItem.test.js +0 -10
  14. package/src/actionButton/ActionButton.test.tsx +0 -4
  15. package/src/avatarWrapper/AvatarWrapper.test.tsx +0 -53
  16. package/src/checkbox/Checkbox.test.tsx +0 -5
  17. package/src/chevron/Chevron.test.tsx +0 -7
  18. package/src/chips/Chips.test.tsx +0 -8
  19. package/src/common/RadioButton/RadioButton.test.tsx +0 -18
  20. package/src/common/bottomSheet/BottomSheet.test.tsx +0 -9
  21. package/src/common/card/Card.test.tsx +0 -6
  22. package/src/common/closeButton/CloseButton.test.tsx +0 -4
  23. package/src/common/panel/Panel.test.tsx +0 -6
  24. package/src/flowNavigation/FlowNavigation.test.js +0 -10
  25. package/src/listItem/Prompt/ListItemPrompt.story.tsx +71 -9
  26. package/src/listItem/Prompt/ListItemPrompt.test.tsx +31 -0
  27. package/src/listItem/Prompt/ListItemPrompt.tsx +8 -2
  28. package/src/logo/Logo.story.tsx +24 -5
  29. package/src/main.css +21 -21
  30. package/src/overlayHeader/OverlayHeader.test.tsx +0 -3
  31. package/src/popover/Popover.test.tsx +0 -25
  32. package/src/promoCard/PromoCard.test.tsx +0 -6
  33. package/src/promoCard/PromoCardGroup.test.tsx +0 -5
  34. package/src/prompt/InlinePrompt/InlinePrompt.story.tsx +13 -10
  35. package/src/prompt/InlinePrompt/InlinePrompt.test.tsx +13 -1
  36. package/src/sentimentSurface/SentimentSurface.css +21 -21
  37. package/src/sentimentSurface/SentimentSurface.less +13 -13
  38. package/src/sentimentSurface/SentimentSurface.story.tsx +1 -1
  39. package/src/sentimentSurface/SentimentSurface.test.story.tsx +48 -1
  40. package/src/tile/Tile.test.tsx +0 -10
  41. package/src/tooltip/Tooltip.test.tsx +0 -10
  42. package/src/accordion/AccordionItem/__snapshots__/AccordionItem.test.js.snap +0 -124
  43. package/src/accordion/__snapshots__/Accordion.test.js.snap +0 -3
  44. package/src/actionButton/__snapshots__/ActionButton.test.tsx.snap +0 -12
  45. package/src/avatarWrapper/__snapshots__/AvatarWrapper.test.tsx.snap +0 -156
  46. package/src/checkbox/__snapshots__/Checkbox.test.tsx.snap +0 -40
  47. package/src/chevron/__snapshots__/Chevron.test.tsx.snap +0 -24
  48. package/src/chips/__snapshots__/Chips.test.tsx.snap +0 -153
  49. package/src/common/RadioButton/__snapshots__/RadioButton.test.tsx.snap +0 -58
  50. package/src/common/bottomSheet/__snapshots__/BottomSheet.test.tsx.snap +0 -80
  51. package/src/common/card/__snapshots__/Card.test.tsx.snap +0 -10
  52. package/src/common/closeButton/__snapshots__/CloseButton.test.tsx.snap +0 -30
  53. package/src/common/flowHeader/FlowHeader.test.tsx +0 -22
  54. package/src/common/flowHeader/__snapshots__/FlowHeader.test.tsx.snap +0 -33
  55. package/src/common/panel/__snapshots__/Panel.test.tsx.snap +0 -3
  56. package/src/flowNavigation/__snapshots__/FlowNavigation.test.js.snap +0 -262
  57. package/src/logo/Logo.test.tsx +0 -55
  58. package/src/logo/__snapshots__/Logo.test.tsx.snap +0 -281
  59. package/src/overlayHeader/__snapshots__/OverlayHeader.test.tsx.snap +0 -65
  60. package/src/popover/__snapshots__/Popover.test.tsx.snap +0 -51
  61. package/src/promoCard/__snapshots__/PromoCard.test.tsx.snap +0 -40
  62. package/src/promoCard/__snapshots__/PromoCardGroup.test.tsx.snap +0 -80
  63. package/src/tile/__snapshots__/Tile.test.tsx.snap +0 -55
  64. package/src/tooltip/__snapshots__/Tooltip.test.tsx.snap +0 -32
package/src/common/bottomSheet/__snapshots__/BottomSheet.test.tsx.snap DELETED
@@ -1,80 +0,0 @@
1
- // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
2
-
3
- exports[`BottomSheet renders content when open 1`] = `
4
- <body>
5
- <div />
6
- <div
7
- class="np-theme-personal"
8
- >
9
- <span
10
- data-focus-scope-start="true"
11
- hidden=""
12
- />
13
- <div
14
- tabindex="-1"
15
- >
16
- <div
17
- class="dimmer"
18
- role="presentation"
19
- >
20
- <div
21
- class="dimmer-content-positioner"
22
- >
23
- <div
24
- class="sliding-panel sliding-panel--open-bottom np-bottom-sheet sliding-panel-appear sliding-panel-appear-active"
25
- >
26
- <div
27
- aria-modal="true"
28
- role="dialog"
29
- >
30
- <div
31
- class="np-bottom-sheet--top-bar"
32
- >
33
- <div
34
- class="np-bottom-sheet--handler"
35
- />
36
- <button
37
- aria-label="Close"
38
- class="np-close-button close btn-link text-no-decoration sr-only np-bottom-sheet--close-btn"
39
- type="button"
40
- >
41
- <span
42
- class="tw-icon tw-icon-cross "
43
- data-testid="cross-icon"
44
- >
45
- <svg
46
- aria-hidden="true"
47
- fill="currentColor"
48
- focusable="false"
49
- height="16"
50
- role="none"
51
- viewBox="0 0 24 24"
52
- width="16"
53
- >
54
- <path
55
- d="m12 13.414-7.293 7.293-1.414-1.414L10.586 12 3.293 4.707l1.414-1.414L12 10.586l7.293-7.293 1.414 1.414L13.414 12l7.293 7.293-1.414 1.414z"
56
- />
57
- </svg>
58
- </span>
59
- </button>
60
- </div>
61
- <div
62
- class="np-bottom-sheet--content"
63
- style="max-height: calc(768px - 64px - 32px);"
64
- >
65
- <b>
66
- Test Content
67
- </b>
68
- </div>
69
- </div>
70
- </div>
71
- </div>
72
- </div>
73
- </div>
74
- <span
75
- data-focus-scope-end="true"
76
- hidden=""
77
- />
78
- </div>
79
- </body>
80
- `;
package/src/common/card/__snapshots__/Card.test.tsx.snap DELETED
@@ -1,10 +0,0 @@
1
- // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
2
-
3
- exports[`Card matches snapshot 1`] = `
4
- <div
5
- class="np-Card"
6
- data-testid="test-card"
7
- >
8
- Test Content
9
- </div>
10
- `;
package/src/common/closeButton/__snapshots__/CloseButton.test.tsx.snap DELETED
@@ -1,30 +0,0 @@
1
- // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
2
-
3
- exports[`CloseButton renders as expected 1`] = `
4
- <div>
5
- <button
6
- aria-label="Close"
7
- class="np-close-button close btn-link text-no-decoration np-close-button--large className"
8
- type="button"
9
- >
10
- <span
11
- class="tw-icon tw-icon-cross "
12
- data-testid="cross-icon"
13
- >
14
- <svg
15
- aria-hidden="true"
16
- fill="currentColor"
17
- focusable="false"
18
- height="24"
19
- role="none"
20
- viewBox="0 0 24 24"
21
- width="24"
22
- >
23
- <path
24
- d="m12 13.414-7.293 7.293-1.414-1.414L10.586 12 3.293 4.707l1.414-1.414L12 10.586l7.293-7.293 1.414 1.414L13.414 12l7.293 7.293-1.414 1.414z"
25
- />
26
- </svg>
27
- </span>
28
- </button>
29
- </div>
30
- `;
package/src/common/flowHeader/FlowHeader.test.tsx DELETED
@@ -1,22 +0,0 @@
1
- import { render } from '@testing-library/react';
2
-
3
- import { Layout } from '../propsValues/layouts';
4
-
5
- import FlowHeader from './FlowHeader';
6
- import type { FlowHeaderProps } from './FlowHeader';
7
-
8
- describe('FlowHeader', () => {
9
- const props = {
10
- leftContent: 'leftContent',
11
- rightContent: 'rightContent',
12
- bottomContent: 'bottomContent',
13
- className: 'className',
14
- } satisfies FlowHeaderProps;
15
- it('renders as expected', () => {
16
- expect(render(<FlowHeader {...props} />).container).toMatchSnapshot();
17
- });
18
-
19
- it('renders as expected with vertical layout', () => {
20
- expect(render(<FlowHeader {...props} layout={Layout.VERTICAL} />).container).toMatchSnapshot();
21
- });
22
- });
package/src/common/flowHeader/__snapshots__/FlowHeader.test.tsx.snap DELETED
@@ -1,33 +0,0 @@
1
- // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
2
-
3
- exports[`FlowHeader renders as expected 1`] = `
4
- <div>
5
- <div
6
- class="np-flow-header d-flex flex-wrap align-items-center justify-content-between flex__item--12 className"
7
- >
8
- leftContent
9
- rightContent
10
- <div
11
- class="align-items-center d-flex justify-content-center order-1 flex-grow-1"
12
- >
13
- bottomContent
14
- </div>
15
- </div>
16
- </div>
17
- `;
18
-
19
- exports[`FlowHeader renders as expected with vertical layout 1`] = `
20
- <div>
21
- <div
22
- class="np-flow-header d-flex flex-wrap align-items-center justify-content-between flex__item--12 className"
23
- >
24
- leftContent
25
- rightContent
26
- <div
27
- class="align-items-center d-flex justify-content-center flex__item--12"
28
- >
29
- bottomContent
30
- </div>
31
- </div>
32
- </div>
33
- `;
package/src/common/panel/__snapshots__/Panel.test.tsx.snap DELETED
@@ -1,3 +0,0 @@
1
- // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
2
-
3
- exports[`Panel renders 1`] = `<div />`;
package/src/flowNavigation/__snapshots__/FlowNavigation.test.js.snap DELETED
@@ -1,262 +0,0 @@
1
- // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
2
-
3
- exports[`FlowNavigation on mobile renders as expected 1`] = `
4
- <div>
5
- <div
6
- class="np-flow-navigation d-flex align-items-center justify-content-center p-y-3 np-flow-navigation--border-bottom"
7
- >
8
- <div
9
- class="np-flow-header d-flex flex-wrap align-items-center justify-content-between flex__item--12 np-flow-navigation__content p-x-3 np-flow-navigation--xs-max"
10
- >
11
- <button
12
- aria-label="back to previous step"
13
- aria-live="off"
14
- class="np-circle d-flex align-items-center justify-content-center np-icon-button np-icon-button-tertiary-default"
15
- style="--circle-size: 40px; --circle-icon-size: 20px; --circle-font-size: 18px;"
16
- type="button"
17
- >
18
- <span
19
- class="tw-icon tw-icon-arrow-left "
20
- data-testid="arrow-left-icon"
21
- >
22
- <svg
23
- aria-hidden="true"
24
- fill="currentColor"
25
- focusable="false"
26
- height="16"
27
- role="none"
28
- viewBox="0 0 24 24"
29
- width="16"
30
- >
31
- <path
32
- clip-rule="evenodd"
33
- d="m5.414 11 6.293-6.293-1.414-1.414L2.3 11.286a1.01 1.01 0 0 0 0 1.428l7.993 7.993 1.414-1.414L5.414 13H22v-2z"
34
- fill-rule="evenodd"
35
- />
36
- </svg>
37
- </span>
38
- </button>
39
- <div
40
- class="m-x-1"
41
- data-testid="activeLabel-1"
42
- >
43
- AnimatedLabel
44
- </div>
45
- <div
46
- class="np-flow-header__right d-flex align-items-center justify-content-end order-2--lg"
47
- >
48
- <div
49
- class="np-circle d-flex align-items-center justify-content-center np-avatar-view np-avatar-view-non-interactive"
50
- style="--circle-size: 48px; --circle-icon-size: 24px; --circle-font-size: 22px;"
51
- >
52
- <div
53
- class="np-circle np-circle-border d-flex align-items-center justify-content-center np-avatar-view-content"
54
- style="--circle-size: 48px; --circle-icon-size: 24px; --circle-font-size: 22px;"
55
- >
56
- TM
57
- </div>
58
- </div>
59
- <span
60
- class="m-x-1"
61
- />
62
- <button
63
- aria-label="Close"
64
- class="np-close-button close btn-link text-no-decoration np-close-button--x-large"
65
- type="button"
66
- >
67
- <span
68
- class="tw-icon tw-icon-cross "
69
- data-testid="cross-icon"
70
- >
71
- <svg
72
- aria-hidden="true"
73
- fill="currentColor"
74
- focusable="false"
75
- height="24"
76
- role="none"
77
- viewBox="0 0 24 24"
78
- width="24"
79
- >
80
- <path
81
- d="m12 13.414-7.293 7.293-1.414-1.414L10.586 12 3.293 4.707l1.414-1.414L12 10.586l7.293-7.293 1.414 1.414L13.414 12l7.293 7.293-1.414 1.414z"
82
- />
83
- </svg>
84
- </span>
85
- </button>
86
- </div>
87
- <div
88
- class="align-items-center d-flex justify-content-center flex__item--12"
89
- >
90
- <div
91
- class="tw-stepper np-flow-navigation__stepper"
92
- >
93
- <div
94
- class="progress"
95
- >
96
- <div
97
- class="progress-bar"
98
- data-testid="progress-bar"
99
- />
100
- </div>
101
- <ol
102
- class="tw-stepper-steps p-t-1 m-b-0"
103
- >
104
- <li
105
- aria-current="false"
106
- class="hidden-xs tw-stepper__step np-text-body-default"
107
- style="left: 0%;"
108
- >
109
- <span
110
- class="tw-stepper__step-label"
111
- >
112
- label-0
113
- </span>
114
- </li>
115
- <li
116
- aria-current="step"
117
- class="hidden-xs tw-stepper__step np-text-body-default-bold tw-stepper__step--active"
118
- style="left: 50%;"
119
- >
120
- <span
121
- class="tw-stepper__step-label"
122
- >
123
- label-1
124
- </span>
125
- </li>
126
- <li
127
- aria-current="false"
128
- class="hidden-xs tw-stepper__step np-text-body-default"
129
- style="left: 100%;"
130
- >
131
- <span
132
- class="tw-stepper__step-label"
133
- >
134
- label-2
135
- </span>
136
- </li>
137
- </ol>
138
- </div>
139
- </div>
140
- </div>
141
- </div>
142
- </div>
143
- `;
144
-
145
- exports[`FlowNavigation renders as expected 1`] = `
146
- <div>
147
- <div
148
- class="np-flow-navigation d-flex align-items-center justify-content-center p-y-3 np-flow-navigation--border-bottom"
149
- >
150
- <div
151
- class="np-flow-header d-flex flex-wrap align-items-center justify-content-between flex__item--12 np-flow-navigation__content p-x-3 np-flow-navigation--sm np-flow-navigation--lg"
152
- >
153
- <div
154
- class="np-flow-header__left"
155
- >
156
- <img
157
- alt="logo"
158
- height="24"
159
- src="logo.svg"
160
- width="138"
161
- />
162
- </div>
163
- <div
164
- class="np-flow-header__right d-flex align-items-center justify-content-end order-2--lg"
165
- >
166
- <div
167
- class="np-circle d-flex align-items-center justify-content-center np-avatar-view np-avatar-view-non-interactive"
168
- style="--circle-size: 48px; --circle-icon-size: 24px; --circle-font-size: 22px;"
169
- >
170
- <div
171
- class="np-circle np-circle-border d-flex align-items-center justify-content-center np-avatar-view-content"
172
- style="--circle-size: 48px; --circle-icon-size: 24px; --circle-font-size: 22px;"
173
- >
174
- TM
175
- </div>
176
- </div>
177
- <span
178
- class="m-x-1"
179
- />
180
- <button
181
- aria-label="Close"
182
- class="np-close-button close btn-link text-no-decoration np-close-button--x-large"
183
- type="button"
184
- >
185
- <span
186
- class="tw-icon tw-icon-cross "
187
- data-testid="cross-icon"
188
- >
189
- <svg
190
- aria-hidden="true"
191
- fill="currentColor"
192
- focusable="false"
193
- height="24"
194
- role="none"
195
- viewBox="0 0 24 24"
196
- width="24"
197
- >
198
- <path
199
- d="m12 13.414-7.293 7.293-1.414-1.414L10.586 12 3.293 4.707l1.414-1.414L12 10.586l7.293-7.293 1.414 1.414L13.414 12l7.293 7.293-1.414 1.414z"
200
- />
201
- </svg>
202
- </span>
203
- </button>
204
- </div>
205
- <div
206
- class="align-items-center d-flex justify-content-center order-1 flex-grow-1"
207
- >
208
- <div
209
- class="tw-stepper np-flow-navigation__stepper"
210
- >
211
- <div
212
- class="progress"
213
- >
214
- <div
215
- class="progress-bar"
216
- data-testid="progress-bar"
217
- style="width: 0%;"
218
- />
219
- </div>
220
- <ol
221
- class="tw-stepper-steps p-t-1 m-b-0"
222
- >
223
- <li
224
- aria-current="step"
225
- class="hidden-xs tw-stepper__step np-text-body-default-bold tw-stepper__step--active"
226
- style="left: 0%;"
227
- >
228
- <span
229
- class="tw-stepper__step-label"
230
- >
231
- label-0
232
- </span>
233
- </li>
234
- <li
235
- aria-current="false"
236
- class="hidden-xs tw-stepper__step np-text-body-default"
237
- style="left: 50%;"
238
- >
239
- <span
240
- class="tw-stepper__step-label"
241
- >
242
- label-1
243
- </span>
244
- </li>
245
- <li
246
- aria-current="false"
247
- class="hidden-xs tw-stepper__step np-text-body-default"
248
- style="left: 100%;"
249
- >
250
- <span
251
- class="tw-stepper__step-label"
252
- >
253
- label-2
254
- </span>
255
- </li>
256
- </ol>
257
- </div>
258
- </div>
259
- </div>
260
- </div>
261
- </div>
262
- `;
package/src/logo/Logo.test.tsx DELETED
@@ -1,55 +0,0 @@
1
- import { render, mockMatchMedia } from '../test-utils';
2
-
3
- import Logo, { LogoType } from '.';
4
-
5
- mockMatchMedia();
6
-
7
- describe('Logo', () => {
8
- it('renders wise logo', () => {
9
- expect(render(<Logo className="class" type={LogoType.WISE} />).container).toMatchSnapshot();
10
- });
11
-
12
- it('renders wise logo by default', () => {
13
- expect(render(<Logo className="class" />).container).toMatchSnapshot();
14
- });
15
-
16
- it('renders wise business logo', () => {
17
- expect(
18
- render(<Logo className="class" type={LogoType.WISE_BUSINESS} />).container,
19
- ).toMatchSnapshot();
20
- });
21
-
22
- it('renders wise platform logo', () => {
23
- expect(
24
- render(<Logo className="class" type={LogoType.WISE_PLATFORM} />).container,
25
- ).toMatchSnapshot();
26
- });
27
-
28
- it('renders wise logo inversed', () => {
29
- expect(
30
- render(<Logo className="class" type={LogoType.WISE} inverse />).container,
31
- ).toMatchSnapshot();
32
- });
33
-
34
- it('renders wise business logo inversed', () => {
35
- expect(
36
- render(<Logo className="class" type={LogoType.WISE_BUSINESS} inverse />).container,
37
- ).toMatchSnapshot();
38
- });
39
-
40
- it('renders wise platform logo inversed', () => {
41
- expect(
42
- render(<Logo className="class" type={LogoType.WISE_PLATFORM} inverse />).container,
43
- ).toMatchSnapshot();
44
- });
45
-
46
- describe('on mobile', () => {
47
- beforeEach(() => {
48
- window.innerWidth = 500;
49
- });
50
-
51
- it('renders only fast flag', () => {
52
- expect(render(<Logo className="class" type={LogoType.WISE} />).container).toMatchSnapshot();
53
- });
54
- });
55
- });