@transferwise/components 46.82.0 → 46.83.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.
Files changed (141) hide show
  1. package/build/alert/Alert.js +2 -9
  2. package/build/alert/Alert.js.map +1 -1
  3. package/build/alert/Alert.mjs +2 -9
  4. package/build/alert/Alert.mjs.map +1 -1
  5. package/build/avatarLayout/AvatarLayout.js +111 -0
  6. package/build/avatarLayout/AvatarLayout.js.map +1 -0
  7. package/build/avatarLayout/AvatarLayout.mjs +109 -0
  8. package/build/avatarLayout/AvatarLayout.mjs.map +1 -0
  9. package/build/button/Button.js +1 -1
  10. package/build/button/Button.js.map +1 -1
  11. package/build/button/Button.mjs +1 -1
  12. package/build/button/Button.mjs.map +1 -1
  13. package/build/i18n/commonMessages/Button.messages.js.map +1 -0
  14. package/build/i18n/commonMessages/Button.messages.mjs.map +1 -0
  15. package/build/i18n/es.json +5 -0
  16. package/build/i18n/es.json.js +5 -0
  17. package/build/i18n/es.json.js.map +1 -1
  18. package/build/i18n/es.json.mjs +5 -0
  19. package/build/i18n/es.json.mjs.map +1 -1
  20. package/build/i18n/pl.json +5 -0
  21. package/build/i18n/pl.json.js +5 -0
  22. package/build/i18n/pl.json.js.map +1 -1
  23. package/build/i18n/pl.json.mjs +5 -0
  24. package/build/i18n/pl.json.mjs.map +1 -1
  25. package/build/i18n/ro.json +5 -0
  26. package/build/i18n/ro.json.js +5 -0
  27. package/build/i18n/ro.json.js.map +1 -1
  28. package/build/i18n/ro.json.mjs +5 -0
  29. package/build/i18n/ro.json.mjs.map +1 -1
  30. package/build/index.js +2 -0
  31. package/build/index.js.map +1 -1
  32. package/build/index.mjs +1 -0
  33. package/build/index.mjs.map +1 -1
  34. package/build/logo/Logo.js +11 -131
  35. package/build/logo/Logo.js.map +1 -1
  36. package/build/logo/Logo.mjs +1 -121
  37. package/build/logo/Logo.mjs.map +1 -1
  38. package/build/logo/logo-assets.js +134 -0
  39. package/build/logo/logo-assets.js.map +1 -0
  40. package/build/logo/logo-assets.mjs +125 -0
  41. package/build/logo/logo-assets.mjs.map +1 -0
  42. package/build/main.css +30 -0
  43. package/build/styles/avatarLayout/AvatarLayout.css +30 -0
  44. package/build/styles/main.css +30 -0
  45. package/build/types/alert/Alert.d.ts +1 -5
  46. package/build/types/alert/Alert.d.ts.map +1 -1
  47. package/build/types/avatarLayout/AvatarLayout.d.ts +11 -0
  48. package/build/types/avatarLayout/AvatarLayout.d.ts.map +1 -0
  49. package/build/types/avatarLayout/index.d.ts +3 -0
  50. package/build/types/avatarLayout/index.d.ts.map +1 -0
  51. package/build/types/i18n/commonMessages/Button.messages.d.ts.map +1 -0
  52. package/build/types/index.d.ts +2 -0
  53. package/build/types/index.d.ts.map +1 -1
  54. package/build/types/logo/Logo.d.ts.map +1 -1
  55. package/build/types/logo/logo-assets.d.ts +10 -0
  56. package/build/types/logo/logo-assets.d.ts.map +1 -0
  57. package/build/types/primitives/PrimitiveAnchor/index.d.ts +3 -0
  58. package/build/types/primitives/PrimitiveAnchor/index.d.ts.map +1 -0
  59. package/build/types/primitives/PrimitiveAnchor/src/PrimitiveAnchor.d.ts +14 -0
  60. package/build/types/primitives/PrimitiveAnchor/src/PrimitiveAnchor.d.ts.map +1 -0
  61. package/build/types/primitives/PrimitiveAnchor/src/PrimitiveAnchor.types.d.ts +21 -0
  62. package/build/types/primitives/PrimitiveAnchor/src/PrimitiveAnchor.types.d.ts.map +1 -0
  63. package/build/types/primitives/PrimitiveAnchor/src/index.d.ts +3 -0
  64. package/build/types/primitives/PrimitiveAnchor/src/index.d.ts.map +1 -0
  65. package/build/types/primitives/PrimitiveButton/index.d.ts +3 -0
  66. package/build/types/primitives/PrimitiveButton/index.d.ts.map +1 -0
  67. package/build/types/primitives/PrimitiveButton/src/PrimitiveButton.d.ts +14 -0
  68. package/build/types/primitives/PrimitiveButton/src/PrimitiveButton.d.ts.map +1 -0
  69. package/build/types/primitives/PrimitiveButton/src/PrimitiveButton.types.d.ts +21 -0
  70. package/build/types/primitives/PrimitiveButton/src/PrimitiveButton.types.d.ts.map +1 -0
  71. package/build/types/primitives/PrimitiveButton/src/index.d.ts +3 -0
  72. package/build/types/primitives/PrimitiveButton/src/index.d.ts.map +1 -0
  73. package/build/types/primitives/index.d.ts +6 -0
  74. package/build/types/primitives/index.d.ts.map +1 -0
  75. package/build/types/primitives/types.d.ts +34 -0
  76. package/build/types/primitives/types.d.ts.map +1 -0
  77. package/build/types/test-utils/index.d.ts.map +1 -1
  78. package/package.json +1 -2
  79. package/src/alert/Alert.spec.story.tsx +0 -82
  80. package/src/alert/Alert.spec.tsx +0 -30
  81. package/src/alert/Alert.tsx +51 -67
  82. package/src/avatarLayout/AvatarLayout.css +30 -0
  83. package/src/avatarLayout/AvatarLayout.less +39 -0
  84. package/src/avatarLayout/AvatarLayout.story.tsx +277 -0
  85. package/src/avatarLayout/AvatarLayout.tsx +91 -0
  86. package/src/avatarLayout/index.ts +2 -0
  87. package/src/button/Button.spec.tsx +1 -1
  88. package/src/button/Button.tsx +1 -1
  89. package/src/i18n/es.json +5 -0
  90. package/src/i18n/pl.json +5 -0
  91. package/src/i18n/ro.json +5 -0
  92. package/src/index.ts +2 -0
  93. package/src/logo/Logo.tsx +10 -8
  94. package/src/logo/__snapshots__/Logo.spec.tsx.snap +16 -16
  95. package/src/logo/logo-assets.tsx +137 -0
  96. package/src/main.css +30 -0
  97. package/src/main.less +1 -0
  98. package/src/primitives/PrimitiveAnchor/index.ts +2 -0
  99. package/src/primitives/PrimitiveAnchor/src/PrimitiveAnchor.tsx +122 -0
  100. package/src/primitives/PrimitiveAnchor/src/PrimitiveAnchor.types.ts +28 -0
  101. package/src/primitives/PrimitiveAnchor/src/index.ts +6 -0
  102. package/src/primitives/PrimitiveAnchor/stories/PrimitiveAnchor.story.tsx +77 -0
  103. package/src/primitives/PrimitiveAnchor/stories/PrimitiveAnchor.tests.story.tsx +169 -0
  104. package/src/primitives/PrimitiveAnchor/test/PrimitiveAnchor.spec.tsx +95 -0
  105. package/src/primitives/PrimitiveButton/index.ts +2 -0
  106. package/src/primitives/PrimitiveButton/src/PrimitiveButton.tsx +131 -0
  107. package/src/primitives/PrimitiveButton/src/PrimitiveButton.types.ts +28 -0
  108. package/src/primitives/PrimitiveButton/src/index.ts +6 -0
  109. package/src/primitives/PrimitiveButton/stories/PrimitiveButton.story.tsx +73 -0
  110. package/src/primitives/PrimitiveButton/stories/PrimitiveButton.tests.story.tsx +230 -0
  111. package/src/primitives/PrimitiveButton/test/PrimitiveButton.spec.tsx +114 -0
  112. package/src/primitives/index.ts +14 -0
  113. package/src/primitives/types.ts +40 -0
  114. package/src/test-utils/index.tsx +1 -0
  115. package/build/button/Button.messages.js.map +0 -1
  116. package/build/button/Button.messages.mjs.map +0 -1
  117. package/build/logo/svg/flag-inverse.svg +0 -1
  118. package/build/logo/svg/flag-platform-white.svg +0 -1
  119. package/build/logo/svg/flag-platform.svg +0 -1
  120. package/build/logo/svg/flag.svg +0 -1
  121. package/build/logo/svg/logo-business-inverse.svg +0 -1
  122. package/build/logo/svg/logo-business.svg +0 -1
  123. package/build/logo/svg/logo-inverse.svg +0 -1
  124. package/build/logo/svg/logo-platform-white.svg +0 -1
  125. package/build/logo/svg/logo-platform.svg +0 -1
  126. package/build/logo/svg/logo.svg +0 -1
  127. package/build/types/button/Button.messages.d.ts.map +0 -1
  128. package/src/logo/svg/flag-inverse.svg +0 -1
  129. package/src/logo/svg/flag-platform-white.svg +0 -1
  130. package/src/logo/svg/flag-platform.svg +0 -1
  131. package/src/logo/svg/flag.svg +0 -1
  132. package/src/logo/svg/logo-business-inverse.svg +0 -1
  133. package/src/logo/svg/logo-business.svg +0 -1
  134. package/src/logo/svg/logo-inverse.svg +0 -1
  135. package/src/logo/svg/logo-platform-white.svg +0 -1
  136. package/src/logo/svg/logo-platform.svg +0 -1
  137. package/src/logo/svg/logo.svg +0 -1
  138. /package/build/{button → i18n/commonMessages}/Button.messages.js +0 -0
  139. /package/build/{button → i18n/commonMessages}/Button.messages.mjs +0 -0
  140. /package/build/types/{button → i18n/commonMessages}/Button.messages.d.ts +0 -0
  141. /package/src/{button → i18n/commonMessages}/Button.messages.ts +0 -0
package/src/avatarLayout/AvatarLayout.less ADDED
@@ -0,0 +1,39 @@
1
+ .np-avatar-layout {
2
+ display: inline-flex;
3
+ --np-avatar-layout-size: 48px;
4
+ --np-avatar-size: 32px;
5
+
6
+ &-diagonal {
7
+ width: var(--np-avatar-layout-size);
8
+ height: var(--np-avatar-layout-size);
9
+
10
+ &-mask {
11
+ mask-image:
12
+ radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) right calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)),
13
+ transparent 0,
14
+ transparent calc(var(--np-avatar-size) / 2 + 2px),
15
+ black 0);
16
+ }
17
+
18
+ &-child {
19
+ margin-left: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
20
+ margin-top: calc(var(--np-avatar-layout-size) - var(--np-avatar-size));
21
+ }
22
+ }
23
+
24
+ &-horizontal {
25
+ width: calc(var(--np-avatar-size) * 2 - var(--np-avatar-offset) - 2px);
26
+ height: var(--np-avatar-layout-size);
27
+
28
+ &-mask {
29
+ mask-image: radial-gradient(circle at top calc(100% - calc(var(--np-avatar-size) / 2)) left calc(100% + calc(var(--np-avatar-size) / 2) - var(--np-avatar-offset)),
30
+ transparent,
31
+ transparent calc(var(--np-avatar-size) / 2 + 2px),
32
+ black 0);
33
+ }
34
+
35
+ &-child {
36
+ margin-left: calc(var(--np-avatar-offset) * -1);
37
+ }
38
+ }
39
+ }
package/src/avatarLayout/AvatarLayout.story.tsx ADDED
@@ -0,0 +1,277 @@
1
+ /* eslint-disable react/jsx-key */
2
+ import { Meta, StoryObj } from '@storybook/react';
3
+ import AvatarLayout, { AvatarLayoutProps } from '.';
4
+ import { Freeze, Graph, Plane, Rewards } from '@transferwise/icons';
5
+ import { Flag } from '@wise/art';
6
+ import Body from '../body';
7
+
8
+ export default {
9
+ title: 'Content/AvatarLayout',
10
+ } satisfies Meta<typeof AvatarLayout>;
11
+
12
+ type Story = StoryObj<typeof AvatarLayout>;
13
+
14
+ const sizes: AvatarLayoutProps['size'][] = [16, 24, 32, 40, 48, 56, 72];
15
+
16
+ export const Diagonal: Story = {
17
+ tags: ['autodocs'],
18
+ render: () => (
19
+ <div
20
+ style={{
21
+ gap: '1em',
22
+ display: 'grid',
23
+ justifyContent: 'center',
24
+ textAlign: 'center',
25
+ gridTemplate: `auto auto / repeat(${sizes.length}, min-content)`,
26
+ }}
27
+ >
28
+ {sizes.map((size) => (
29
+ <Body type="body-large-bold">{size}</Body>
30
+ ))}
31
+
32
+ {sizes.map((size) => (
33
+ <AvatarLayout
34
+ key={size}
35
+ size={size}
36
+ orientation="diagonal"
37
+ avatars={[{ asset: <Freeze /> }, { asset: <Freeze /> }]}
38
+ />
39
+ ))}
40
+
41
+ {sizes.map((size) => (
42
+ <AvatarLayout
43
+ key={size}
44
+ size={size}
45
+ orientation="diagonal"
46
+ interactive
47
+ avatars={[{ asset: <Freeze /> }, { asset: <Freeze /> }]}
48
+ />
49
+ ))}
50
+
51
+ {sizes.map((size) => (
52
+ <AvatarLayout
53
+ key={size}
54
+ size={size}
55
+ orientation="diagonal"
56
+ avatars={[{ profileName: 'Jay Jay' }, { profileName: 'Amy Amy' }]}
57
+ />
58
+ ))}
59
+
60
+ {sizes.map((size) => (
61
+ <AvatarLayout
62
+ key={size}
63
+ size={size}
64
+ orientation="diagonal"
65
+ interactive
66
+ avatars={[{ profileName: 'Jay Jay' }, { profileName: 'Amy Amy' }]}
67
+ />
68
+ ))}
69
+
70
+ {sizes.map((size) => (
71
+ <AvatarLayout
72
+ key={size}
73
+ size={size}
74
+ orientation="diagonal"
75
+ avatars={[{ asset: <Flag code="br" /> }, { asset: <Flag code="jp" /> }]}
76
+ />
77
+ ))}
78
+
79
+ {sizes.map((size) => (
80
+ <AvatarLayout
81
+ key={size}
82
+ size={size}
83
+ orientation="diagonal"
84
+ avatars={[{ asset: <Flag code="eu" /> }, { asset: <Flag code="eu" /> }]}
85
+ />
86
+ ))}
87
+
88
+ {sizes.map((size) => (
89
+ <AvatarLayout
90
+ key={size}
91
+ size={size}
92
+ orientation="diagonal"
93
+ avatars={[{ imgSrc: '../tapestry-01.png' }, { imgSrc: '../tapestry-01.png' }]}
94
+ />
95
+ ))}
96
+ </div>
97
+ ),
98
+ };
99
+
100
+ export const Horizontal: Story = {
101
+ tags: ['autodocs'],
102
+ render: () => (
103
+ <div
104
+ style={{
105
+ gap: '1em',
106
+ display: 'grid',
107
+ justifyContent: 'center',
108
+ textAlign: 'center',
109
+ gridTemplate: `auto auto / repeat(${sizes.length}, min-content)`,
110
+ }}
111
+ >
112
+ {sizes.map((size) => (
113
+ <Body type="body-large-bold">{size}</Body>
114
+ ))}
115
+
116
+ {sizes.map((size) => (
117
+ <AvatarLayout
118
+ key={size}
119
+ size={size}
120
+ orientation="horizontal"
121
+ avatars={[{ asset: <Freeze /> }, { asset: <Freeze /> }]}
122
+ />
123
+ ))}
124
+
125
+ {sizes.map((size) => (
126
+ <AvatarLayout
127
+ key={size}
128
+ size={size}
129
+ orientation="horizontal"
130
+ interactive
131
+ avatars={[{ asset: <Freeze /> }, { asset: <Freeze /> }]}
132
+ />
133
+ ))}
134
+
135
+ {sizes.map((size) => (
136
+ <AvatarLayout
137
+ key={size}
138
+ size={size}
139
+ orientation="horizontal"
140
+ avatars={[{ profileName: 'Jay Jay' }, { profileName: 'Amy Amy' }]}
141
+ />
142
+ ))}
143
+
144
+ {sizes.map((size) => (
145
+ <AvatarLayout
146
+ key={size}
147
+ size={size}
148
+ orientation="horizontal"
149
+ interactive
150
+ avatars={[{ profileName: 'Jay Jay' }, { profileName: 'Amy Amy' }]}
151
+ />
152
+ ))}
153
+
154
+ {sizes.map((size) => (
155
+ <AvatarLayout
156
+ key={size}
157
+ size={size}
158
+ orientation="horizontal"
159
+ avatars={[{ asset: <Flag code="br" /> }, { asset: <Flag code="jp" /> }]}
160
+ />
161
+ ))}
162
+
163
+ {sizes.map((size) => (
164
+ <AvatarLayout
165
+ key={size}
166
+ size={size}
167
+ orientation="horizontal"
168
+ avatars={[{ asset: <Flag code="eu" /> }, { asset: <Flag code="eu" /> }]}
169
+ />
170
+ ))}
171
+
172
+ {sizes.map((size) => (
173
+ <AvatarLayout
174
+ key={size}
175
+ size={size}
176
+ orientation="horizontal"
177
+ avatars={[{ imgSrc: '../tapestry-01.png' }, { imgSrc: '../tapestry-01.png' }]}
178
+ />
179
+ ))}
180
+ </div>
181
+ ),
182
+ };
183
+
184
+ export const EdgeInstances: Story = {
185
+ tags: ['autodocs'],
186
+ render: () => (
187
+ <div
188
+ style={{
189
+ gap: '1em',
190
+ display: 'grid',
191
+ justifyContent: 'space-between',
192
+ gridTemplate: `auto auto / repeat(2, min-content)`,
193
+ }}
194
+ >
195
+ <AvatarLayout
196
+ orientation="diagonal"
197
+ avatars={[{ asset: <Flag code="gb" /> }, { asset: <Flag code="jp" /> }]}
198
+ />
199
+
200
+ <AvatarLayout
201
+ orientation="horizontal"
202
+ interactive
203
+ avatars={[
204
+ { imgSrc: '../avatar-squere-dude.webp' },
205
+ { asset: null, style: { border: '1px dashed var(--color-border-neutral)' } },
206
+ ]}
207
+ />
208
+
209
+ <AvatarLayout
210
+ orientation="horizontal"
211
+ interactive
212
+ avatars={[
213
+ { imgSrc: '../avatar-square-dude.webp' },
214
+ {
215
+ asset: <Plane />,
216
+ style: { backgroundColor: 'var(--color-bright-pink)' },
217
+ },
218
+ ]}
219
+ />
220
+
221
+ <AvatarLayout
222
+ orientation="horizontal"
223
+ interactive
224
+ avatars={[
225
+ {
226
+ asset: <Graph />,
227
+ style: { color: 'rgb(22, 51, 0)', backgroundColor: 'rgb(203, 217, 195)' },
228
+ },
229
+ {
230
+ asset: <Rewards />,
231
+ style: { color: 'rgb(203, 217, 195)', backgroundColor: 'rgb(22, 51, 0)' },
232
+ },
233
+ ]}
234
+ />
235
+
236
+ <AvatarLayout
237
+ orientation="horizontal"
238
+ interactive
239
+ avatars={[
240
+ { asset: <Flag code="gb" /> },
241
+ { asset: '3+', style: { border: '1px dashed var(--color-border-neutral)' } },
242
+ ]}
243
+ />
244
+
245
+ <AvatarLayout
246
+ orientation="horizontal"
247
+ avatars={[{ imgSrc: '../avatar-rectangle-fox.webp' }, { profileName: 'Jay Jay' }]}
248
+ />
249
+
250
+ <AvatarLayout
251
+ interactive
252
+ orientation="horizontal"
253
+ avatars={[
254
+ { imgSrc: '../avatar-rectangle-fox.webp' },
255
+ { imgSrc: '../avatar-square-dude.webp' },
256
+ { asset: '7+' },
257
+ ]}
258
+ />
259
+
260
+ <AvatarLayout
261
+ interactive
262
+ orientation="horizontal"
263
+ avatars={[{ asset: <Flag code="gb" /> }, { asset: <Flag code="br" /> }, { asset: '3+' }]}
264
+ />
265
+
266
+ <AvatarLayout
267
+ orientation="horizontal"
268
+ avatars={[
269
+ { asset: <Flag code="gb" /> },
270
+ { asset: <Flag code="br" /> },
271
+ { asset: <Flag code="jp" /> },
272
+ { asset: '3+' },
273
+ ]}
274
+ />
275
+ </div>
276
+ ),
277
+ };
package/src/avatarLayout/AvatarLayout.tsx ADDED
@@ -0,0 +1,91 @@
1
+ import { clsx } from 'clsx';
2
+ import AvatarView, { AvatarViewProps } from '../avatarView';
3
+
4
+ type SingleAvatarType = { asset?: AvatarViewProps['children'] } & Omit<
5
+ AvatarViewProps,
6
+ 'notification' | 'selected' | 'size' | 'badge' | 'children' | 'interactive'
7
+ >;
8
+
9
+ export type Props = {
10
+ avatars: SingleAvatarType[];
11
+ orientation?: 'horizontal' | 'diagonal';
12
+ } & Pick<
13
+ AvatarViewProps,
14
+ 'size' | 'interactive' | 'className' | 'role' | 'aria-label' | 'aria-labelledby' | 'aria-hidden'
15
+ >;
16
+
17
+ export default function AvatarLayout({
18
+ avatars = [],
19
+ orientation = 'horizontal',
20
+ size = 48,
21
+ className,
22
+ interactive,
23
+ ...restProps
24
+ }: Props) {
25
+ const isDiagonal = orientation === 'diagonal';
26
+ const avatarSize = isDiagonal ? DIAGONAL_LAYOUT_STYLE_CONFIG[size]?.avatarSize : size;
27
+ return (
28
+ <div
29
+ className={clsx('np-avatar-layout', `np-avatar-layout-${orientation}`, className)}
30
+ style={{
31
+ // @ts-expect-error CSS custom props allowed
32
+ '--np-avatar-layout-size': `${size}px`,
33
+ '--np-avatar-size': `${avatarSize}px`,
34
+ '--np-avatar-offset': `${isDiagonal ? DIAGONAL_LAYOUT_STYLE_CONFIG[size].offset : HORIZONTAL_LAYOUT_OFFSET[size]}px`,
35
+ }}
36
+ {...restProps}
37
+ >
38
+ {avatars.length < 2 || (size === 16 && isDiagonal)
39
+ ? null
40
+ : avatars.map(({ asset, style, ...avatar }, index) => (
41
+ <div
42
+ // eslint-disable-next-line react/no-array-index-key
43
+ key={index}
44
+ className={clsx(
45
+ { [`np-avatar-layout-${orientation}-child`]: index !== 0 },
46
+ { [`np-avatar-layout-${orientation}-mask`]: index !== avatars.length - 1 },
47
+ )}
48
+ >
49
+ <AvatarView
50
+ {...avatar}
51
+ size={avatarSize as Props['size']}
52
+ style={{
53
+ ...(isDiagonal && {
54
+ '--circle-size': `${avatarSize}px`,
55
+ '--circle-icon-size': `${DIAGONAL_LAYOUT_STYLE_CONFIG[size].iconSize}px`,
56
+ '--circle-font-size': `${DIAGONAL_LAYOUT_STYLE_CONFIG[size].fontSize}px`,
57
+ }),
58
+ ...style,
59
+ }}
60
+ interactive={interactive}
61
+ >
62
+ {asset}
63
+ </AvatarView>
64
+ </div>
65
+ ))}
66
+ </div>
67
+ );
68
+ }
69
+
70
+ /** Diagonal layout have custom sizes for avatar, font and icon */
71
+ const DIAGONAL_LAYOUT_STYLE_CONFIG = {
72
+ // Diagonal layout doesn't support 16 size
73
+ 16: { avatarSize: undefined, offset: undefined, fontSize: undefined, iconSize: undefined },
74
+ 24: { avatarSize: 15, offset: 2.5, fontSize: 8, iconSize: 11.25 },
75
+ 32: { avatarSize: 20, offset: 2.5, fontSize: 12, iconSize: 15 },
76
+ 40: { avatarSize: 24, offset: 4.5, fontSize: 12, iconSize: 18 },
77
+ 48: { avatarSize: 30, offset: 3.5, fontSize: 14, iconSize: 16.87 },
78
+ 56: { avatarSize: 34, offset: 5, fontSize: 14, iconSize: 19.12 },
79
+ 72: { avatarSize: 44, offset: 6, fontSize: 22, iconSize: 22 },
80
+ };
81
+
82
+ /** Horizontal layout have custom offset between avatars */
83
+ const HORIZONTAL_LAYOUT_OFFSET = {
84
+ 16: 2,
85
+ 24: 2,
86
+ 32: 4,
87
+ 40: 4,
88
+ 48: 4,
89
+ 56: 5,
90
+ 72: 5,
91
+ };
package/src/avatarLayout/index.ts ADDED
@@ -0,0 +1,2 @@
1
+ export type { Props as AvatarLayoutProps } from './AvatarLayout';
2
+ export { default } from './AvatarLayout';
package/src/button/Button.spec.tsx CHANGED
@@ -4,7 +4,7 @@ import { ControlType, Type, Priority, Size } from '../common';
4
4
  import { render, screen, userEvent } from '../test-utils';
5
5
 
6
6
  import Button from '.';
7
- import messages from './Button.messages';
7
+ import messages from '../i18n/commonMessages/Button.messages';
8
8
  import { ButtonReferenceType } from './Button';
9
9
 
10
10
  const { ACCENT, POSITIVE, NEGATIVE } = ControlType;
package/src/button/Button.tsx CHANGED
@@ -19,7 +19,7 @@ import {
19
19
  } from '../common';
20
20
  import ProcessIndicator from '../processIndicator';
21
21
 
22
- import messages from './Button.messages';
22
+ import messages from '../i18n/commonMessages/Button.messages';
23
23
  import { typeClassMap, priorityClassMap } from './classMap';
24
24
  import { establishNewPriority, establishNewType, logDeprecationNotices } from './legacyUtils';
25
25
 
package/src/i18n/es.json CHANGED
@@ -35,6 +35,11 @@
35
35
  "neptune.Summary.statusDone": "Apartado listo",
36
36
  "neptune.Summary.statusNotDone": "Apartado a completar",
37
37
  "neptune.Summary.statusPending": "Apartado pendiente",
38
+ "neptune.Table.actionHeader": "Acción",
39
+ "neptune.Table.emptyData": "No se han encontrado resultados",
40
+ "neptune.Table.loaded": "Los datos de la tabla se han cargado",
41
+ "neptune.Table.loading": "Los datos de la tabla se están cargando",
42
+ "neptune.Table.refreshPage": "Actualizar página",
38
43
  "neptune.Upload.csButtonText": "¿Quieres subir otro archivo?",
39
44
  "neptune.Upload.csFailureText": "La carga del archivo ha fallado. Por favor, inténtalo de nuevo",
40
45
  "neptune.Upload.csSuccessText": "¡Se ha subido el archivo!",
package/src/i18n/pl.json CHANGED
@@ -35,6 +35,11 @@
35
35
  "neptune.Summary.statusDone": "Czynność wykonana",
36
36
  "neptune.Summary.statusNotDone": "Czynność do wykonania",
37
37
  "neptune.Summary.statusPending": "Czynność oczekująca",
38
+ "neptune.Table.actionHeader": "Akcja",
39
+ "neptune.Table.emptyData": "Nie znaleziono wyników",
40
+ "neptune.Table.loaded": "Wczytano dane tabeli",
41
+ "neptune.Table.loading": "Wczytywanie danych tabeli",
42
+ "neptune.Table.refreshPage": "Odśwież stronę",
38
43
  "neptune.Upload.csButtonText": "Prześlij kolejny plik?",
39
44
  "neptune.Upload.csFailureText": "Przesyłanie nie powiodło się. Proszę spróbować ponownie",
40
45
  "neptune.Upload.csSuccessText": "Przesyłanie zakończone!",
package/src/i18n/ro.json CHANGED
@@ -35,6 +35,11 @@
35
35
  "neptune.Summary.statusDone": "Finalizat",
36
36
  "neptune.Summary.statusNotDone": "De făcut",
37
37
  "neptune.Summary.statusPending": "În așteptare",
38
+ "neptune.Table.actionHeader": "Acțiune",
39
+ "neptune.Table.emptyData": "Nu s-a găsit niciun rezultat",
40
+ "neptune.Table.loaded": "Datele din tabel au fost încărcate",
41
+ "neptune.Table.loading": "Datele din tabel se încarcă",
42
+ "neptune.Table.refreshPage": "Reîncarcă pagina",
38
43
  "neptune.Upload.csButtonText": "Încarci un alt fișier?",
39
44
  "neptune.Upload.csFailureText": "Încărcare eșuată. Te rugăm să încerci din nou",
40
45
  "neptune.Upload.csSuccessText": "Încărcare completă!",
package/src/index.ts CHANGED
@@ -9,6 +9,7 @@ export type { SelectOptionProps, SelectOptionValue, SelectOptiopsSection } from
9
9
  export type { AlertAction, AlertProps, AlertType } from './alert';
10
10
  export type { AvatarProps } from './avatar';
11
11
  export type { AvatarViewProps } from './avatarView';
12
+ export type { AvatarLayoutProps } from './avatarLayout';
12
13
  export type { BadgeProps } from './badge';
13
14
  export type { CardProps } from './card';
14
15
  export type { CarouselProps } from './carousel';
@@ -105,6 +106,7 @@ export { default as SelectOption } from './selectOption';
105
106
  export { default as Alert } from './alert';
106
107
  export { default as Avatar } from './avatar';
107
108
  export { default as AvatarView } from './avatarView';
109
+ export { default as avatarLayout } from './avatarLayout';
108
110
  export { default as AvatarWrapper } from './avatarWrapper';
109
111
  export { default as Badge } from './badge';
110
112
  export { default as Body } from './body';
package/src/logo/Logo.tsx CHANGED
@@ -1,13 +1,15 @@
1
1
  import { clsx } from 'clsx';
2
2
 
3
- import { ReactComponent as LogoFlagInverse } from './svg/flag-inverse.svg';
4
- import { ReactComponent as LogoFlagPlatformInverse } from './svg/flag-platform-white.svg';
5
- import { ReactComponent as LogoFlagPlatform } from './svg/flag-platform.svg';
6
- import { ReactComponent as LogoFlag } from './svg/flag.svg';
7
- import { ReactComponent as LogoWiseInverse } from './svg/logo-inverse.svg';
8
- import { ReactComponent as LogoWisePlatformInverse } from './svg/logo-platform-white.svg';
9
- import { ReactComponent as LogoWisePlatform } from './svg/logo-platform.svg';
10
- import { ReactComponent as LogoWise } from './svg/logo.svg';
3
+ import {
4
+ LogoWise,
5
+ LogoWiseInverse,
6
+ LogoWisePlatform,
7
+ LogoWisePlatformInverse,
8
+ LogoFlag,
9
+ LogoFlagInverse,
10
+ LogoFlagPlatform,
11
+ LogoFlagPlatformInverse,
12
+ } from './logo-assets';
11
13
 
12
14
  const svgPaths = {
13
15
  WISE: LogoWise,