@transferwise/components 0.0.0-experimental-cfd9ac0 → 0.0.0-experimental-2e92e2c

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/build/main.css +4 -5
  2. package/build/styles/UploadInput/UploadItem/UploadItem.css +4 -5
  3. package/build/styles/main.css +4 -5
  4. package/package.json +2 -2
  5. package/src/ListItem/_stories/subcomponents.tsx +1 -1
  6. package/src/Loader/_stories/Loader.test.story.tsx +23 -0
  7. package/src/Nudge/_stories/Nudge.test.story.tsx +29 -12
  8. package/src/UploadInput/UploadItem/UploadItem.css +4 -5
  9. package/src/UploadInput/UploadItem/UploadItem.less +7 -6
  10. package/src/UploadInput/_stories/UploadInput.test.story.tsx +1 -1
  11. package/src/main.css +4 -5
package/build/main.css CHANGED
@@ -26935,8 +26935,7 @@ button.np-link {
26935
26935
  .np-upload-input__item .np-upload-input__title,
26936
26936
  .np-upload-input__item .np-upload-input__text {
26937
26937
  margin: 0;
26938
- -moz-text-align-last: left;
26939
- text-align-last: left;
26938
+ text-align: start;
26940
26939
  color: #5d7079;
26941
26940
  color: var(--color-content-secondary);
26942
26941
  }
@@ -26992,7 +26991,7 @@ button.np-link {
26992
26991
  justify-content: center;
26993
26992
  }
26994
26993
  .np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button:before {
26995
- content: '';
26994
+ content: "";
26996
26995
  display: block;
26997
26996
  inline-size: var(--clickAreaSize);
26998
26997
  block-size: var(--clickAreaSize);
@@ -27047,8 +27046,8 @@ button.np-link {
27047
27046
  padding-inline-start: var(--size-16);
27048
27047
  }
27049
27048
  .np-upload-input__item .np-upload-input-errors > li::before {
27050
- content: '•' ;
27051
- content: '•' / '';
27049
+ content: "•" ;
27050
+ content: "•" / "";
27052
27051
  position: absolute;
27053
27052
  display: block;
27054
27053
  inset-inline-start: 0;
package/build/styles/UploadInput/UploadItem/UploadItem.css CHANGED
@@ -41,8 +41,7 @@
41
41
  .np-upload-input__item .np-upload-input__title,
42
42
  .np-upload-input__item .np-upload-input__text {
43
43
  margin: 0;
44
- -moz-text-align-last: left;
45
- text-align-last: left;
44
+ text-align: start;
46
45
  color: #5d7079;
47
46
  color: var(--color-content-secondary);
48
47
  }
@@ -98,7 +97,7 @@
98
97
  justify-content: center;
99
98
  }
100
99
  .np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button:before {
101
- content: '';
100
+ content: "";
102
101
  display: block;
103
102
  inline-size: var(--clickAreaSize);
104
103
  block-size: var(--clickAreaSize);
@@ -153,8 +152,8 @@
153
152
  padding-inline-start: var(--size-16);
154
153
  }
155
154
  .np-upload-input__item .np-upload-input-errors > li::before {
156
- content: '•' ;
157
- content: '•' / '';
155
+ content: "•" ;
156
+ content: "•" / "";
158
157
  position: absolute;
159
158
  display: block;
160
159
  inset-inline-start: 0;
package/build/styles/main.css CHANGED
@@ -26935,8 +26935,7 @@ button.np-link {
26935
26935
  .np-upload-input__item .np-upload-input__title,
26936
26936
  .np-upload-input__item .np-upload-input__text {
26937
26937
  margin: 0;
26938
- -moz-text-align-last: left;
26939
- text-align-last: left;
26938
+ text-align: start;
26940
26939
  color: #5d7079;
26941
26940
  color: var(--color-content-secondary);
26942
26941
  }
@@ -26992,7 +26991,7 @@ button.np-link {
26992
26991
  justify-content: center;
26993
26992
  }
26994
26993
  .np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button:before {
26995
- content: '';
26994
+ content: "";
26996
26995
  display: block;
26997
26996
  inline-size: var(--clickAreaSize);
26998
26997
  block-size: var(--clickAreaSize);
@@ -27047,8 +27046,8 @@ button.np-link {
27047
27046
  padding-inline-start: var(--size-16);
27048
27047
  }
27049
27048
  .np-upload-input__item .np-upload-input-errors > li::before {
27050
- content: '•' ;
27051
- content: '•' / '';
27049
+ content: "•" ;
27050
+ content: "•" / "";
27052
27051
  position: absolute;
27053
27052
  display: block;
27054
27053
  inset-inline-start: 0;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "0.0.0-experimental-cfd9ac0",
3
+ "version": "0.0.0-experimental-2e92e2c",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -91,7 +91,7 @@
91
91
  "storybook": "^10.5.4",
92
92
  "storybook-addon-tag-badges": "^3.1.0",
93
93
  "storybook-addon-test-codegen": "^3.0.4",
94
- "@transferwise/less-config": "0.0.0-experimental-cfd9ac0",
94
+ "@transferwise/less-config": "0.0.0-experimental-2e92e2c",
95
95
  "@wise/components-theming": "1.10.3",
96
96
  "@wise/wds-configs": "0.0.0"
97
97
  },
package/src/ListItem/_stories/subcomponents.tsx CHANGED
@@ -60,7 +60,7 @@ export const SB_LIST_ITEM_CONTROLS: Record<SB_ListItem_ControlType, ReactNode> =
60
60
  ),
61
61
  navigation: <ListItem.Navigation href="https://wise.com" />,
62
62
  navigationAsButton: <ListItem.Navigation onClick={fn()} />,
63
- checkbox: <ListItem.Checkbox onChange={() => {}} />,
63
+ checkbox: <ListItem.Checkbox checked onChange={() => {}} />,
64
64
  radio: <ListItem.Radio name="radio" value={Math.random().toString()} onChange={() => {}} />,
65
65
  switch: <ListItem.Switch onClick={() => {}} />,
66
66
  iconButton: (
package/src/Loader/_stories/Loader.test.story.tsx ADDED
@@ -0,0 +1,23 @@
1
+ import type { Meta, StoryObj } from '@storybook/react-webpack5';
2
+ import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
3
+ import Loader from '..';
4
+
5
+ export default {
6
+ component: Loader,
7
+ title: 'Loading/Loader/Tests',
8
+ tags: ['!autodocs', '!manifest'],
9
+ } satisfies Meta<typeof Loader>;
10
+
11
+ type Story = StoryObj<typeof Loader>;
12
+
13
+ export const RTLDiff: Story = {
14
+ render: () => (
15
+ <>
16
+ <Loader size="sm" displayInstantly />
17
+ <Loader size="md" displayInstantly />
18
+ <Loader size="sm" displayInstantly label="Sending your money" />
19
+ <Loader size="md" displayInstantly label="Sending your money" />
20
+ </>
21
+ ),
22
+ ...withRTLDiff(),
23
+ };
package/src/Nudge/_stories/Nudge.test.story.tsx CHANGED
@@ -10,28 +10,45 @@ export default {
10
10
 
11
11
  type Story = StoryObj<typeof Nudge>;
12
12
 
13
+ const MEDIA_NAMES = [
14
+ 'globe',
15
+ 'lock',
16
+ 'wallet',
17
+ 'gear',
18
+ 'invite-letter',
19
+ 'personal-card',
20
+ 'business-card',
21
+ 'heart',
22
+ 'multi-currency',
23
+ 'shopping-bag',
24
+ 'flower',
25
+ 'gift-box',
26
+ 'backpack',
27
+ 'documents',
28
+ ] as const;
29
+
13
30
  export const RTLDiff: Story = {
14
31
  render: () => (
15
32
  <>
33
+ {MEDIA_NAMES.map((mediaName) => (
34
+ <Nudge
35
+ key={mediaName}
36
+ mediaName={mediaName}
37
+ title={mediaName}
38
+ link="Link"
39
+ href="#"
40
+ onDismiss={() => {}}
41
+ />
42
+ ))}
16
43
  <Nudge
17
44
  mediaName="globe"
18
- title="With media and dismiss"
19
- link="Link"
20
- href="#"
21
- onDismiss={() => {}}
22
- />
23
- <div style={{ marginTop: 16 }} />
24
- <Nudge
25
- mediaName="globe"
26
- title="With media, action, and dismiss"
45
+ title="With action"
27
46
  action={{ text: 'Learn more', href: '#' }}
28
47
  onDismiss={() => {}}
29
48
  />
30
- <div style={{ marginTop: 16 }} />
31
49
  <Nudge title="Without media, with dismiss" link="Link" href="#" onDismiss={() => {}} />
32
- <div style={{ marginTop: 16 }} />
33
50
  <Nudge title="Without media, no dismiss" link="Link" href="#" />
34
51
  </>
35
52
  ),
36
- ...withRTLDiff(),
53
+ ...withRTLDiff({ width: 'stretch' }),
37
54
  };
package/src/UploadInput/UploadItem/UploadItem.css CHANGED
@@ -41,8 +41,7 @@
41
41
  .np-upload-input__item .np-upload-input__title,
42
42
  .np-upload-input__item .np-upload-input__text {
43
43
  margin: 0;
44
- -moz-text-align-last: left;
45
- text-align-last: left;
44
+ text-align: start;
46
45
  color: #5d7079;
47
46
  color: var(--color-content-secondary);
48
47
  }
@@ -98,7 +97,7 @@
98
97
  justify-content: center;
99
98
  }
100
99
  .np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button:before {
101
- content: '';
100
+ content: "";
102
101
  display: block;
103
102
  inline-size: var(--clickAreaSize);
104
103
  block-size: var(--clickAreaSize);
@@ -153,8 +152,8 @@
153
152
  padding-inline-start: var(--size-16);
154
153
  }
155
154
  .np-upload-input__item .np-upload-input-errors > li::before {
156
- content: '•' ;
157
- content: '•' / '';
155
+ content: "•" ;
156
+ content: "•" / "";
158
157
  position: absolute;
159
158
  display: block;
160
159
  inset-inline-start: 0;
package/src/UploadInput/UploadItem/UploadItem.less CHANGED
@@ -39,7 +39,7 @@
39
39
  .np-upload-input__title,
40
40
  .np-upload-input__text {
41
41
  margin: 0;
42
- text-align-last: left;
42
+ text-align: left;
43
43
  color: var(--color-content-secondary);
44
44
  }
45
45
 
@@ -64,7 +64,7 @@
64
64
  --buttonTopRightOffset: var(--size-16);
65
65
  // Offset towards the parent's top-right edge
66
66
  // ensuring no overflow on smaller screens
67
- --clickAreaTopRightOffset: calc((var(--clickAreaSize) - var(--iconSize)) * -.5);
67
+ --clickAreaTopRightOffset: calc((var(--clickAreaSize) - var(--iconSize)) * -0.5);
68
68
 
69
69
  position: absolute;
70
70
  right: var(--buttonTopRightOffset);
@@ -84,14 +84,16 @@
84
84
  border: 0;
85
85
  background-color: var(--color-background-neutral);
86
86
  color: var(--color-interactive-primary);
87
- transition: color, background-color 0.15s ease-in-out;
87
+ transition:
88
+ color,
89
+ background-color 0.15s ease-in-out;
88
90
  outline-offset: 0;
89
91
  display: flex;
90
92
  align-items: center;
91
93
  justify-content: center;
92
94
 
93
95
  &:before {
94
- content: '';
96
+ content: "";
95
97
  display: block;
96
98
  width: var(--clickAreaSize);
97
99
  height: var(--clickAreaSize);
@@ -116,7 +118,6 @@
116
118
  padding: 0;
117
119
 
118
120
  &:hover:not(:has(.np-upload-input__item-button:hover)) {
119
-
120
121
  &:before,
121
122
  & + .np-upload-input__item:before {
122
123
  width: 100%;
@@ -158,7 +159,7 @@
158
159
  padding-left: var(--size-16);
159
160
 
160
161
  &::before {
161
- content: '•' / '';
162
+ content: "•" / "";
162
163
  position: absolute;
163
164
  display: block;
164
165
  left: 0;
package/src/UploadInput/_stories/UploadInput.test.story.tsx CHANGED
@@ -345,5 +345,5 @@ export const RTLDiff: Story = {
345
345
  />
346
346
  </>
347
347
  ),
348
- ...withRTLDiff(),
348
+ ...withRTLDiff({ renderAs: 'iframe' }),
349
349
  };
package/src/main.css CHANGED
@@ -26935,8 +26935,7 @@ button.np-link {
26935
26935
  .np-upload-input__item .np-upload-input__title,
26936
26936
  .np-upload-input__item .np-upload-input__text {
26937
26937
  margin: 0;
26938
- -moz-text-align-last: left;
26939
- text-align-last: left;
26938
+ text-align: start;
26940
26939
  color: #5d7079;
26941
26940
  color: var(--color-content-secondary);
26942
26941
  }
@@ -26992,7 +26991,7 @@ button.np-link {
26992
26991
  justify-content: center;
26993
26992
  }
26994
26993
  .np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button:before {
26995
- content: '';
26994
+ content: "";
26996
26995
  display: block;
26997
26996
  inline-size: var(--clickAreaSize);
26998
26997
  block-size: var(--clickAreaSize);
@@ -27047,8 +27046,8 @@ button.np-link {
27047
27046
  padding-inline-start: var(--size-16);
27048
27047
  }
27049
27048
  .np-upload-input__item .np-upload-input-errors > li::before {
27050
- content: '•' ;
27051
- content: '•' / '';
27049
+ content: "•" ;
27050
+ content: "•" / "";
27052
27051
  position: absolute;
27053
27052
  display: block;
27054
27053
  inset-inline-start: 0;