@transferwise/components 0.0.0-experimental-8109a86 → 0.0.0-experimental-688d30c

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 (44) hide show
  1. package/build/avatarView/AvatarView.js +5 -5
  2. package/build/avatarView/AvatarView.js.map +1 -1
  3. package/build/avatarView/AvatarView.mjs +5 -5
  4. package/build/avatarView/AvatarView.mjs.map +1 -1
  5. package/build/common/circle/Circle.js +3 -1
  6. package/build/common/circle/Circle.js.map +1 -1
  7. package/build/common/circle/Circle.mjs +3 -1
  8. package/build/common/circle/Circle.mjs.map +1 -1
  9. package/build/i18n/zh-HK.json +5 -0
  10. package/build/i18n/zh-HK.json.js +5 -0
  11. package/build/i18n/zh-HK.json.js.map +1 -1
  12. package/build/i18n/zh-HK.json.mjs +5 -0
  13. package/build/i18n/zh-HK.json.mjs.map +1 -1
  14. package/build/main.css +0 -35
  15. package/build/styles/avatarView/AvatarView.css +0 -6
  16. package/build/styles/main.css +0 -35
  17. package/build/types/avatarView/AvatarView.d.ts +1 -1
  18. package/build/types/avatarView/AvatarView.d.ts.map +1 -1
  19. package/build/types/common/circle/Circle.d.ts.map +1 -1
  20. package/package.json +3 -3
  21. package/src/avatarView/AvatarView.css +0 -6
  22. package/src/avatarView/AvatarView.less +1 -7
  23. package/src/avatarView/AvatarView.story.tsx +41 -54
  24. package/src/avatarView/AvatarView.tsx +4 -4
  25. package/src/avatarWrapper/AvatarWrapper.story.tsx +19 -0
  26. package/src/circularButton/CircularButton.spec.tsx +0 -36
  27. package/src/common/circle/Circle.less +2 -2
  28. package/src/common/circle/Circle.tsx +3 -1
  29. package/src/flowNavigation/FlowNavigation.story.tsx +16 -11
  30. package/src/i18n/zh-HK.json +5 -0
  31. package/src/main.css +0 -35
  32. package/src/main.less +0 -1
  33. package/src/overlayHeader/OverlayHeader.story.tsx +2 -5
  34. package/build/styles/avatarGroup/AvatarGroup.css +0 -29
  35. package/build/types/avatarGroup/AvatarGroup.d.ts +0 -18
  36. package/build/types/avatarGroup/AvatarGroup.d.ts.map +0 -1
  37. package/build/types/avatarGroup/index.d.ts +0 -3
  38. package/build/types/avatarGroup/index.d.ts.map +0 -1
  39. package/src/avatarGroup/AvatarGroup.css +0 -29
  40. package/src/avatarGroup/AvatarGroup.less +0 -42
  41. package/src/avatarGroup/AvatarGroup.story.tsx +0 -284
  42. package/src/avatarGroup/AvatarGroup.tsx +0 -117
  43. package/src/avatarGroup/index.ts +0 -2
  44. package/src/circularButton/__snapshots__/CircularButton.spec.tsx.snap +0 -381
package/src/avatarView/AvatarView.story.tsx CHANGED
@@ -20,8 +20,9 @@ import {
20
20
  } from '@transferwise/icons';
21
21
  import AvatarView, { AvatarViewProps } from '.';
22
22
  import { Flag } from '@wise/art';
23
- import { getBrandColorFromSeed, getInitials } from '../common';
23
+ import { getBrandColorFromSeed, getInitials, ProfileType } from '../common';
24
24
  import Display from '../display';
25
+ import Body from '../body';
25
26
 
26
27
  export default {
27
28
  title: 'Content/AvatarView',
@@ -45,6 +46,9 @@ export const Selected: Story = {
45
46
  gridTemplate: `auto auto / repeat(${sizes.length}, min-content)`,
46
47
  }}
47
48
  >
49
+ {sizes.map((size) => (
50
+ <Body type="body-large-bold">{size}</Body>
51
+ ))}
48
52
  {sizes.map((size) => (
49
53
  <AvatarView key={size} size={size} selected interactive>
50
54
  <Freeze />
@@ -75,6 +79,9 @@ export const Notification: Story = {
75
79
  gridTemplate: `auto auto / repeat(${sizes.length}, min-content)`,
76
80
  }}
77
81
  >
82
+ {sizes.map((size) => (
83
+ <Body type="body-large-bold">{size}</Body>
84
+ ))}
78
85
  {sizes.map((size) => (
79
86
  <AvatarView key={size} size={size} notification>
80
87
  <Freeze />
@@ -98,40 +105,6 @@ export const Notification: Story = {
98
105
  ),
99
106
  };
100
107
 
101
- export const Test: Story = {
102
- // tags: ['autodocs'],
103
- render: () => (
104
- <div>
105
- <AvatarView
106
- imgSrc="../avatar-square-dude.webp"
107
- size={72}
108
- badge={{
109
- flagCode: 'EU',
110
- }}
111
- />
112
- <AvatarView
113
- imgSrc="../avatar-square-dude.webp"
114
- size={72}
115
- badge={{
116
- asset: (
117
- <div
118
- className="d-flex align-items-center justify-content-center"
119
- style={{
120
- backgroundColor: 'var(--color-bright-pink)',
121
- color: 'var(--color-interactive-primary)',
122
- width: '100%',
123
- height: '100%',
124
- }}
125
- >
126
- <Leaf />
127
- </div>
128
- ),
129
- }}
130
- />
131
- </div>
132
- ),
133
- };
134
-
135
108
  export const Badge: Story = {
136
109
  tags: ['autodocs'],
137
110
  render: () => {
@@ -154,13 +127,16 @@ export const Badge: Story = {
154
127
  gridTemplate: 'auto auto / repeat(7, min-content)',
155
128
  }}
156
129
  >
130
+ {sizes.map((size) => (
131
+ <Body type="body-large-bold">{size}</Body>
132
+ ))}
157
133
  {sizes.map((size, index) => (
158
134
  <AvatarView key={size} size={size} badge={{ flagCode: currencies[index] }}>
159
135
  {icons[index]}
160
136
  </AvatarView>
161
137
  ))}
162
138
 
163
- {sizes.map((size, index) => (
139
+ {sizes.map((size) => (
164
140
  <AvatarView
165
141
  key={size}
166
142
  size={size}
@@ -169,7 +145,7 @@ export const Badge: Story = {
169
145
  />
170
146
  ))}
171
147
 
172
- {sizes.map((size, index) => (
148
+ {sizes.map((size) => (
173
149
  <AvatarView
174
150
  key={size}
175
151
  size={size}
@@ -285,6 +261,9 @@ export const Images: Story = {
285
261
  gridTemplate: 'auto auto / repeat(7, min-content)',
286
262
  }}
287
263
  >
264
+ {sizes.map((size) => (
265
+ <Body type="body-large-bold">{size}</Body>
266
+ ))}
288
267
  {sizes.map((size) => (
289
268
  <AvatarView
290
269
  key={size}
@@ -292,7 +271,7 @@ export const Images: Story = {
292
271
  interactive
293
272
  imgSrc="../avatar-square-dude.webp"
294
273
  profileName="Test Name"
295
- profileType="business"
274
+ profileType={ProfileType.BUSINESS}
296
275
  />
297
276
  ))}
298
277
  {sizes.map((size) => (
@@ -301,7 +280,7 @@ export const Images: Story = {
301
280
  size={size}
302
281
  imgSrc="../avatar-square-dude.webp"
303
282
  profileName="Test Name"
304
- profileType="business"
283
+ profileType={ProfileType.BUSINESS}
305
284
  />
306
285
  ))}
307
286
  {sizes.map((size) => (
@@ -337,13 +316,16 @@ export const Profiles: Story = {
337
316
  gridTemplate: 'auto auto / repeat(7, min-content)',
338
317
  }}
339
318
  >
319
+ {sizes.map((size) => (
320
+ <Body type="body-large-bold">{size}</Body>
321
+ ))}
340
322
  {sizes.map((size) => (
341
323
  <AvatarView
342
324
  key={size}
343
325
  size={size}
344
326
  imgSrc="../avatar-square-dude.webp"
345
327
  profileName="Test Name"
346
- profileType="business"
328
+ profileType={ProfileType.BUSINESS}
347
329
  />
348
330
  ))}
349
331
 
@@ -354,7 +336,7 @@ export const Profiles: Story = {
354
336
  interactive
355
337
  imgSrc="../avatar-square-dude.webp"
356
338
  profileName="Test Name"
357
- profileType="business"
339
+ profileType={ProfileType.BUSINESS}
358
340
  />
359
341
  ))}
360
342
 
@@ -367,11 +349,11 @@ export const Profiles: Story = {
367
349
  ))}
368
350
 
369
351
  {sizes.map((size) => (
370
- <AvatarView key={size} size={size} profileType="business" />
352
+ <AvatarView key={size} size={size} profileType={ProfileType.BUSINESS} />
371
353
  ))}
372
354
 
373
355
  {sizes.map((size) => (
374
- <AvatarView key={size} size={size} interactive profileType="business" />
356
+ <AvatarView key={size} size={size} interactive profileType={ProfileType.BUSINESS} />
375
357
  ))}
376
358
 
377
359
  {sizes.map((size) => (
@@ -387,13 +369,22 @@ export const Profiles: Story = {
387
369
  };
388
370
 
389
371
  export const ProfileBrokenImageFallback: Story = {
390
- render: () => (
391
- <>
392
- <AvatarView imgSrc="../img-wrong-url.lol" />
393
- <AvatarView imgSrc="../img-wrong-url.lol" profileType="business" />
394
- <AvatarView imgSrc="../img-wrong-url.lol" profileType="business" profileName="D D" />
395
- </>
396
- ),
372
+ parameters: {
373
+ chromatic: {
374
+ delay: 3000,
375
+ },
376
+ },
377
+ render: () => {
378
+ const assetUrl = 'https://test.com/img-wrong-url.test';
379
+ return (
380
+ <>
381
+ <AvatarView />
382
+ <AvatarView imgSrc={assetUrl} />
383
+ <AvatarView imgSrc={assetUrl} profileType={ProfileType.BUSINESS} />
384
+ <AvatarView imgSrc={assetUrl} profileType={ProfileType.BUSINESS} profileName="Test Name" />
385
+ </>
386
+ );
387
+ },
397
388
  };
398
389
 
399
390
  export const EdgeInstaces: Story = {
@@ -412,7 +403,6 @@ export const EdgeInstaces: Story = {
412
403
  }}
413
404
  >
414
405
  <style>{css}</style>
415
- {/* <Body>- Custom colors</Body> */}
416
406
  <AvatarView
417
407
  interactive
418
408
  badge={{ flagCode: 'EU' }}
@@ -426,14 +416,12 @@ export const EdgeInstaces: Story = {
426
416
  >
427
417
  <Money />
428
418
  </AvatarView>
429
- {/* <Body>- Add example with dashed avatar as in shared balances</Body> */}
430
419
  <AvatarView interactive className="custom-variant">
431
420
  <PlusCircle />
432
421
  </AvatarView>
433
422
  <AvatarView interactive className="custom-variant">
434
423
  {null}
435
424
  </AvatarView>
436
- {/* <Body> - Add example custom backgrounds as in account summary (https://wise.com/account-summary)</Body> */}
437
425
  <AvatarView style={{ color: 'rgb(22, 51, 0)', backgroundColor: 'rgb(203, 217, 195)' }}>
438
426
  <Graph />
439
427
  </AvatarView>
@@ -452,7 +440,6 @@ export const EdgeInstaces: Story = {
452
440
  >
453
441
  <Rewards />
454
442
  </AvatarView>
455
- {/* <Body>- Add example Wise Sand + custom background from hash</Body> */}
456
443
  <AvatarView
457
444
  badge={{ flagCode: 'EU' }}
458
445
  style={{ backgroundColor: getBrandColorFromSeed(profileName1) }}
package/src/avatarView/AvatarView.tsx CHANGED
@@ -46,8 +46,8 @@ function AvatarView({
46
46
  className,
47
47
  style,
48
48
  imgSrc,
49
- profileType: type,
50
- profileName: name,
49
+ profileType,
50
+ profileName,
51
51
  ...restProps
52
52
  }: Props) {
53
53
  return (
@@ -73,7 +73,7 @@ function AvatarView({
73
73
  ...style,
74
74
  }}
75
75
  >
76
- <AvatarViewContent {...{ imgSrc, profileType: type, profileName: name }}>
76
+ <AvatarViewContent {...{ imgSrc, profileType, profileName }}>
77
77
  {children}
78
78
  </AvatarViewContent>
79
79
  </Circle>
@@ -93,7 +93,7 @@ const MAP_BADGE_ASSET_SIZE = {
93
93
  72: 24,
94
94
  } satisfies Record<number, BadgeAssetsProps['size']>;
95
95
 
96
- /** Certain sizes of AvatarView has a custom offset of Badge */
96
+ /** Certain sizes of AvatarView has a custom offset for badge */
97
97
  const MAP_BADGE_POSITION = {
98
98
  24: -6,
99
99
  32: -4,
package/src/avatarWrapper/AvatarWrapper.story.tsx CHANGED
@@ -99,3 +99,22 @@ export const All: Story = {
99
99
  );
100
100
  },
101
101
  };
102
+
103
+ export const ProfileBrokenImageFallback: Story = {
104
+ parameters: {
105
+ chromatic: {
106
+ delay: 3000,
107
+ },
108
+ },
109
+ render: () => {
110
+ const assetUrl = 'https://test.com/img-wrong-url.test';
111
+ return (
112
+ <>
113
+ <AvatarWrapper />
114
+ <AvatarWrapper url={assetUrl} />
115
+ <AvatarWrapper url={assetUrl} profileType={ProfileType.BUSINESS} />
116
+ <AvatarWrapper url={assetUrl} profileType={ProfileType.BUSINESS} name="Test Name" />
117
+ </>
118
+ );
119
+ },
120
+ };
package/src/circularButton/CircularButton.spec.tsx CHANGED
@@ -34,10 +34,6 @@ describe('CircularButton', () => {
34
34
  it('is not disabled', () => {
35
35
  expect(screen.getByRole('button')).toBeEnabled();
36
36
  });
37
-
38
- it('renders a button of type accent and priority primary', () => {
39
- expect(render(<CircularButton {...props} />).container).toMatchSnapshot();
40
- });
41
37
  });
42
38
 
43
39
  describe('button attributes', () => {
@@ -69,36 +65,4 @@ describe('CircularButton', () => {
69
65
  expect(onClick).toHaveBeenCalledTimes(0);
70
66
  });
71
67
  });
72
-
73
- describe('types', () => {
74
- it('renders accent buttons', () => {
75
- expect(render(<CircularButton {...props} type={ACCENT} />).container).toMatchSnapshot();
76
- });
77
-
78
- it('renders positive buttons', () => {
79
- expect(render(<CircularButton {...props} type={POSITIVE} />).container).toMatchSnapshot();
80
- });
81
-
82
- it('renders negative buttons', () => {
83
- expect(render(<CircularButton {...props} type={NEGATIVE} />).container).toMatchSnapshot();
84
- });
85
- });
86
-
87
- describe('priorities', () => {
88
- it('renders primary buttons', () => {
89
- [ACCENT, POSITIVE, NEGATIVE].forEach((type) =>
90
- expect(
91
- render(<CircularButton {...props} priority={PRIMARY} type={type} />).container,
92
- ).toMatchSnapshot(),
93
- );
94
- });
95
-
96
- it('renders secondary buttons', () => {
97
- [ACCENT, POSITIVE, NEGATIVE].forEach((type) =>
98
- expect(
99
- render(<CircularButton {...props} priority={SECONDARY} type={type} />).container,
100
- ).toMatchSnapshot(),
101
- );
102
- });
103
- });
104
68
  });
package/src/common/circle/Circle.less CHANGED
@@ -7,12 +7,12 @@
7
7
  --circle-border-color: var(--color-border-neutral);
8
8
  --circle-border-width: 1px;
9
9
 
10
- // sets custom typography styles for default (Inter) font
10
+ // circle like components have custom typography styles for for default (Inter) font
11
11
  font-size: var(--circle-font-size);
12
12
  font-weight: var(--font-weight-semi-bold);
13
13
  line-height: 1;
14
14
 
15
- // sets custom typography styles for Wise Sand font
15
+ // circle like components have custom typography styles for Wise Sand font
16
16
  .np-display {
17
17
  font-size: var(--circle-font-size);
18
18
  }
package/src/common/circle/Circle.tsx CHANGED
@@ -36,7 +36,9 @@ const MAP_ICON_SIZE = {
36
36
  };
37
37
 
38
38
  /**
39
- * circle like components have custom font styles
39
+ * circle like components have custom typography styles for for default (Inter) font
40
+ *
41
+ * circle size : font size (px)
40
42
  */
41
43
  const MAP_FONT_SIZE = {
42
44
  16: 8,
package/src/flowNavigation/FlowNavigation.story.tsx CHANGED
@@ -21,19 +21,20 @@ export default {
21
21
  export const Variants = () => {
22
22
  const [activeStep, setActiveStep] = useState(2);
23
23
  const [closed, setClosed] = useState(false);
24
- const showAvatar = select('avatar', ['', ProfileType.PERSONAL, ProfileType.BUSINESS], 'Profile');
24
+ const profileType = select(
25
+ 'avatar',
26
+ [ProfileType.PERSONAL, ProfileType.BUSINESS],
27
+ ProfileType.PERSONAL,
28
+ );
25
29
  const showCloseButton = boolean('show closeButton', true);
26
30
  const showMobileBackButton = boolean('show mobile backButton', true);
27
31
  const done = boolean('done', false);
28
- const avatarURL = text(
29
- 'avatarURL',
30
- 'https://wise.com/web-art/assets/illustrations/heart-small@2x.webp',
31
- );
32
+ const avatarURL = text('avatarURL', '../tapestry-01.png');
32
33
 
33
34
  return !closed ? (
34
35
  <>
35
36
  <FlowNavigation
36
- avatar={!showAvatar ? null : <AvatarView profileType={showAvatar.toLowerCase()} />}
37
+ avatar={!profileType ? null : <AvatarView profileType={profileType} />}
37
38
  logo={<Logo />}
38
39
  activeStep={activeStep}
39
40
  done={done}
@@ -110,7 +111,7 @@ export const Variants = () => {
110
111
 
111
112
  <FlowNavigation
112
113
  done={done}
113
- avatar={<AvatarView imgSrc={avatarURL} profileType={showAvatar?.toLowerCase()} />}
114
+ avatar={<AvatarView imgSrc={avatarURL} profileType={profileType} />}
114
115
  activeStep={activeStep}
115
116
  steps={[
116
117
  {
@@ -156,7 +157,7 @@ export const Variants = () => {
156
157
  {/* Instance of always `done` FlowNav for visual testing */}
157
158
  <FlowNavigation
158
159
  done
159
- avatar={<AvatarView imgSrc={avatarURL} profileType={showAvatar.toLowerCase()} />}
160
+ avatar={<AvatarView imgSrc={avatarURL} profileType={profileType} />}
160
161
  activeStep={activeStep}
161
162
  steps={[
162
163
  { label: 'Recipient', hoverLabel: 'Daniele Tomboro', onClick: () => setActiveStep(0) },
@@ -246,7 +247,11 @@ export const SendFlow = () => {
246
247
  export const WithOverlayHeaderComparison = () => {
247
248
  const [activeStep, setActiveStep] = useState(4);
248
249
  const [closed, setClosed] = useState(false);
249
- const showAvatar = select('avatar', ['', ProfileType.PERSONAL, ProfileType.BUSINESS], 'Profile');
250
+ const profileType = select(
251
+ 'avatar',
252
+ [ProfileType.PERSONAL, ProfileType.BUSINESS],
253
+ ProfileType.PERSONAL,
254
+ );
250
255
  const showCloseButton = boolean('show closeButton', true);
251
256
  const showMobileBackButton = boolean('show mobile backButton', true);
252
257
  const done = boolean('done', false);
@@ -255,7 +260,7 @@ export const WithOverlayHeaderComparison = () => {
255
260
  <>
256
261
  <div style={{ border: '1px solid #e8e8e8' }}>
257
262
  <FlowNavigation
258
- avatar={showAvatar ? <AvatarView profileType={showAvatar.toLowerCase()} /> : null}
263
+ avatar={profileType ? <AvatarView profileType={profileType} /> : null}
259
264
  activeStep={activeStep}
260
265
  done={done}
261
266
  steps={[]}
@@ -269,7 +274,7 @@ export const WithOverlayHeaderComparison = () => {
269
274
  </div>
270
275
  <div style={{ border: '1px solid #e8e8e8' }}>
271
276
  <OverlayHeader
272
- avatar={showAvatar ? <AvatarView profileType={showAvatar.toLowerCase()} /> : null}
277
+ avatar={profileType ? <AvatarView profileType={profileType} /> : null}
273
278
  onClose={showCloseButton ? () => setClosed(true) : undefined}
274
279
  />
275
280
  </div>
package/src/i18n/zh-HK.json CHANGED
@@ -27,6 +27,11 @@
27
27
  "neptune.SelectInput.noResultsFound": "找不到任何結果",
28
28
  "neptune.SelectOption.action.label": "選擇",
29
29
  "neptune.SelectOption.selected.action.label": "更改已選選項",
30
+ "neptune.StatusIcon.iconLabel.error": "錯誤:",
31
+ "neptune.StatusIcon.iconLabel.information": "資訊:",
32
+ "neptune.StatusIcon.iconLabel.pending": "處理中:",
33
+ "neptune.StatusIcon.iconLabel.success": "成功:",
34
+ "neptune.StatusIcon.iconLabel.warning": "警告：",
30
35
  "neptune.Summary.statusDone": "已完成事項",
31
36
  "neptune.Summary.statusNotDone": "未完成事項",
32
37
  "neptune.Summary.statusPending": "待處理事項",
package/src/main.css CHANGED
@@ -499,47 +499,12 @@ div.critical-comms .critical-comms-body {
499
499
  background-color: rgba(134,167,189,0.10196);
500
500
  background-color: var(--color-background-neutral);
501
501
  }
502
- .np-avatar-view-interactive:hover {
503
- background-color: var(--color-background-neutral-hover);
504
- }
505
- .np-avatar-view-interactive:active {
506
- background-color: var(--color-background-neutral-active);
507
- }
508
502
  .np-avatar-view-non-interactive .np-circle {
509
503
  background-color: transparent;
510
504
  }
511
505
  .np-avatar-view-non-interactive .np-avatar-view-content .wds-flag {
512
506
  box-shadow: none;
513
507
  }
514
- .np-avatar-group {
515
- display: inline-flex;
516
- position: relative;
517
- }
518
- .np-avatar-group-diagonal {
519
- width: var(--np-avatar-group-size);
520
- height: var(--np-avatar-group-size);
521
- }
522
- .np-avatar-group-diagonal-mask {
523
- -webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-group-size) / 1.5) right calc(100% - var(--np-avatar-group-size) / 1.5), transparent 0, transparent calc(var(--np-avatar-group-single-size) / 2 + 0.5px), black 0);
524
- mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-group-size) / 1.5) right calc(100% - var(--np-avatar-group-size) / 1.5), transparent 0, transparent calc(var(--np-avatar-group-single-size) / 2 + 0.5px), black 0);
525
- }
526
- .np-avatar-group-diagonal-child {
527
- position: absolute;
528
- top: var(--np-avatar-group-diagonal-child-position);
529
- right: 0;
530
- }
531
- .np-avatar-group-horizontal {
532
- height: var(--np-avatar-group-size);
533
- }
534
- .np-avatar-group-horizontal-mask {
535
- -webkit-mask-image: radial-gradient(circle at top calc(100% - var(--np-avatar-group-single-size) / 2) right calc((100% - var(--np-avatar-group-single-size) / 1.5) * -1), transparent 0, transparent calc((var(--np-avatar-group-single-size) / 2.5) + var(--np-avatar-group-horizontal-child-position)), black 0);
536
- mask-image: radial-gradient(circle at top calc(100% - var(--np-avatar-group-single-size) / 2) right calc((100% - var(--np-avatar-group-single-size) / 1.5) * -1), transparent 0, transparent calc((var(--np-avatar-group-single-size) / 2.5) + var(--np-avatar-group-horizontal-child-position)), black 0);
537
- -webkit-mask-image: radial-gradient(circle at top calc(100% - var(--np-avatar-group-single-size) / 2) right calc(calc(100% - var(--np-avatar-group-single-size) / 1.5) * -1), transparent 0, transparent calc(calc(var(--np-avatar-group-single-size) / 2.5) + var(--np-avatar-group-horizontal-child-position)), black 0);
538
- mask-image: radial-gradient(circle at top calc(100% - var(--np-avatar-group-single-size) / 2) right calc(calc(100% - var(--np-avatar-group-single-size) / 1.5) * -1), transparent 0, transparent calc(calc(var(--np-avatar-group-single-size) / 2.5) + var(--np-avatar-group-horizontal-child-position)), black 0);
539
- }
540
- .np-avatar-group-horizontal-child {
541
- margin-left: calc(var(--np-avatar-group-horizontal-child-position) * -1);
542
- }
543
508
  .tw-badge {
544
509
  position: relative;
545
510
  display: inline-block;
package/src/main.less CHANGED
@@ -4,7 +4,6 @@
4
4
  @import "./alert/Alert.less";
5
5
  @import "./avatar/Avatar.less";
6
6
  @import "./avatarView/AvatarView.less";
7
- @import "./avatarGroup/AvatarGroup.less";
8
7
  @import "./badge/Badge.less";
9
8
  @import "./button/Button.less";
10
9
  @import "./card/Card.less";
package/src/overlayHeader/OverlayHeader.story.tsx CHANGED
@@ -35,10 +35,7 @@ export const Basic = () => {
35
35
  };
36
36
 
37
37
  export const WithAvatarWrapper = () => {
38
- const avatarURL = text(
39
- 'avatarURL',
40
- 'https://wise.com/web-art/assets/illustrations/heart-small@2x.webp',
41
- );
38
+ const avatarURL = text('avatarURL', '../tapestry-01.png');
42
39
  const profileType = select(
43
40
  'profileType',
44
41
  [ProfileType.PERSONAL, ProfileType.BUSINESS],
@@ -47,7 +44,7 @@ export const WithAvatarWrapper = () => {
47
44
  return (
48
45
  <OverlayHeader
49
46
  logo={<Logo />}
50
- avatar={<AvatarView imgSrc={avatarURL} profileType={profileType?.toLowerCase()} />}
47
+ avatar={<AvatarView imgSrc={avatarURL} profileType={profileType} />}
51
48
  onClose={action('Close clicked')}
52
49
  />
53
50
  );
package/build/styles/avatarGroup/AvatarGroup.css DELETED
@@ -1,29 +0,0 @@
1
- .np-avatar-group {
2
- display: inline-flex;
3
- position: relative;
4
- }
5
- .np-avatar-group-diagonal {
6
- width: var(--np-avatar-group-size);
7
- height: var(--np-avatar-group-size);
8
- }
9
- .np-avatar-group-diagonal-mask {
10
- -webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-group-size) / 1.5) right calc(100% - var(--np-avatar-group-size) / 1.5), transparent 0, transparent calc(var(--np-avatar-group-single-size) / 2 + 0.5px), black 0);
11
- mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-group-size) / 1.5) right calc(100% - var(--np-avatar-group-size) / 1.5), transparent 0, transparent calc(var(--np-avatar-group-single-size) / 2 + 0.5px), black 0);
12
- }
13
- .np-avatar-group-diagonal-child {
14
- position: absolute;
15
- top: var(--np-avatar-group-diagonal-child-position);
16
- right: 0;
17
- }
18
- .np-avatar-group-horizontal {
19
- height: var(--np-avatar-group-size);
20
- }
21
- .np-avatar-group-horizontal-mask {
22
- -webkit-mask-image: radial-gradient(circle at top calc(100% - var(--np-avatar-group-single-size) / 2) right calc((100% - var(--np-avatar-group-single-size) / 1.5) * -1), transparent 0, transparent calc((var(--np-avatar-group-single-size) / 2.5) + var(--np-avatar-group-horizontal-child-position)), black 0);
23
- mask-image: radial-gradient(circle at top calc(100% - var(--np-avatar-group-single-size) / 2) right calc((100% - var(--np-avatar-group-single-size) / 1.5) * -1), transparent 0, transparent calc((var(--np-avatar-group-single-size) / 2.5) + var(--np-avatar-group-horizontal-child-position)), black 0);
24
- -webkit-mask-image: radial-gradient(circle at top calc(100% - var(--np-avatar-group-single-size) / 2) right calc(calc(100% - var(--np-avatar-group-single-size) / 1.5) * -1), transparent 0, transparent calc(calc(var(--np-avatar-group-single-size) / 2.5) + var(--np-avatar-group-horizontal-child-position)), black 0);
25
- mask-image: radial-gradient(circle at top calc(100% - var(--np-avatar-group-single-size) / 2) right calc(calc(100% - var(--np-avatar-group-single-size) / 1.5) * -1), transparent 0, transparent calc(calc(var(--np-avatar-group-single-size) / 2.5) + var(--np-avatar-group-horizontal-child-position)), black 0);
26
- }
27
- .np-avatar-group-horizontal-child {
28
- margin-left: calc(var(--np-avatar-group-horizontal-child-position) * -1);
29
- }
package/build/types/avatarGroup/AvatarGroup.d.ts DELETED
@@ -1,18 +0,0 @@
1
- import { CommonProps } from '../common';
2
- import { AvatarViewProps } from '../avatarView';
3
- type AvatarType = {
4
- asset?: AvatarViewProps['children'];
5
- } & Omit<AvatarViewProps, 'notification' | 'selected' | 'size' | 'badge' | 'action' | 'children'>;
6
- type AvatarGroupOrientation = 'horizontal' | 'diagonal';
7
- type AvatarGroupDiagonalSize = 24 | 32 | 40 | 48 | 56 | 72;
8
- type AvatarGroupSize = 16 | AvatarGroupDiagonalSize;
9
- export type Props = {
10
- 'aria-label'?: string;
11
- avatars: AvatarType[];
12
- orientation?: AvatarGroupOrientation;
13
- size?: AvatarGroupSize;
14
- interactive?: boolean;
15
- } & CommonProps;
16
- export default function AvatarGroup({ avatars, orientation, size: groupSize, 'aria-label': ariaLabel, className, interactive, }: Props): import("react").JSX.Element;
17
- export {};
18
- //# sourceMappingURL=AvatarGroup.d.ts.map
package/build/types/avatarGroup/AvatarGroup.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"AvatarGroup.d.ts","sourceRoot":"","sources":["../../../src/avatarGroup/AvatarGroup.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AACxC,OAAmB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAE5D,KAAK,UAAU,GAAG;IAAE,KAAK,CAAC,EAAE,eAAe,CAAC,UAAU,CAAC,CAAA;CAAE,GAAG,IAAI,CAC9D,eAAe,EACf,cAAc,GAAG,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,UAAU,CACvE,CAAC;AACF,KAAK,sBAAsB,GAAG,YAAY,GAAG,UAAU,CAAC;AACxD,KAAK,uBAAuB,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAC3D,KAAK,eAAe,GAAG,EAAE,GAAG,uBAAuB,CAAC;AAqCpD,MAAM,MAAM,KAAK,GAAG;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,WAAW,CAAC,EAAE,sBAAsB,CAAC;IACrC,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,GAAG,WAAW,CAAC;AAEhB,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,OAAO,EACP,WAA0B,EAC1B,IAAI,EAAE,SAAc,EACpB,YAAY,EAAE,SAAS,EACvB,SAAS,EACT,WAAW,GACZ,EAAE,KAAK,+BAoDP"}
package/build/types/avatarGroup/index.d.ts DELETED
@@ -1,3 +0,0 @@
1
- export type { Props as AvatarGroupProps } from './AvatarGroup';
2
- export { default } from './AvatarGroup';
3
- //# sourceMappingURL=index.d.ts.map
package/build/types/avatarGroup/index.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/avatarGroup/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,KAAK,IAAI,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAC/D,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC"}
package/src/avatarGroup/AvatarGroup.css DELETED
@@ -1,29 +0,0 @@
1
- .np-avatar-group {
2
- display: inline-flex;
3
- position: relative;
4
- }
5
- .np-avatar-group-diagonal {
6
- width: var(--np-avatar-group-size);
7
- height: var(--np-avatar-group-size);
8
- }
9
- .np-avatar-group-diagonal-mask {
10
- -webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-group-size) / 1.5) right calc(100% - var(--np-avatar-group-size) / 1.5), transparent 0, transparent calc(var(--np-avatar-group-single-size) / 2 + 0.5px), black 0);
11
- mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-group-size) / 1.5) right calc(100% - var(--np-avatar-group-size) / 1.5), transparent 0, transparent calc(var(--np-avatar-group-single-size) / 2 + 0.5px), black 0);
12
- }
13
- .np-avatar-group-diagonal-child {
14
- position: absolute;
15
- top: var(--np-avatar-group-diagonal-child-position);
16
- right: 0;
17
- }
18
- .np-avatar-group-horizontal {
19
- height: var(--np-avatar-group-size);
20
- }
21
- .np-avatar-group-horizontal-mask {
22
- -webkit-mask-image: radial-gradient(circle at top calc(100% - var(--np-avatar-group-single-size) / 2) right calc((100% - var(--np-avatar-group-single-size) / 1.5) * -1), transparent 0, transparent calc((var(--np-avatar-group-single-size) / 2.5) + var(--np-avatar-group-horizontal-child-position)), black 0);
23
- mask-image: radial-gradient(circle at top calc(100% - var(--np-avatar-group-single-size) / 2) right calc((100% - var(--np-avatar-group-single-size) / 1.5) * -1), transparent 0, transparent calc((var(--np-avatar-group-single-size) / 2.5) + var(--np-avatar-group-horizontal-child-position)), black 0);
24
- -webkit-mask-image: radial-gradient(circle at top calc(100% - var(--np-avatar-group-single-size) / 2) right calc(calc(100% - var(--np-avatar-group-single-size) / 1.5) * -1), transparent 0, transparent calc(calc(var(--np-avatar-group-single-size) / 2.5) + var(--np-avatar-group-horizontal-child-position)), black 0);
25
- mask-image: radial-gradient(circle at top calc(100% - var(--np-avatar-group-single-size) / 2) right calc(calc(100% - var(--np-avatar-group-single-size) / 1.5) * -1), transparent 0, transparent calc(calc(var(--np-avatar-group-single-size) / 2.5) + var(--np-avatar-group-horizontal-child-position)), black 0);
26
- }
27
- .np-avatar-group-horizontal-child {
28
- margin-left: calc(var(--np-avatar-group-horizontal-child-position) * -1);
29
- }
package/src/avatarGroup/AvatarGroup.less DELETED
@@ -1,42 +0,0 @@
1
- .np-avatar-group {
2
- display: inline-flex;
3
- position: relative;
4
-
5
- &-diagonal {
6
- width: var(--np-avatar-group-size);
7
- height: var(--np-avatar-group-size);
8
-
9
- &-mask {
10
- mask-image: radial-gradient(
11
- circle at bottom calc(100% - var(--np-avatar-group-size) / 1.5)
12
- right calc(100% - var(--np-avatar-group-size) / 1.5),
13
- transparent 0,
14
- transparent calc(var(--np-avatar-group-single-size) / 2 + 0.5px),
15
- black 0
16
- );
17
- }
18
-
19
- &-child {
20
- position: absolute;
21
- top: var(--np-avatar-group-diagonal-child-position);
22
- right: 0;
23
- }
24
- }
25
-
26
- &-horizontal {
27
- height: var(--np-avatar-group-size);
28
-
29
- &-mask {
30
- mask-image: radial-gradient(
31
- circle at top calc(100% - var(--np-avatar-group-single-size) / 2)
32
- right calc(calc(100% - var(--np-avatar-group-single-size) / 1.5) * -1),
33
- transparent 0,
34
- transparent calc(calc(var(--np-avatar-group-single-size) / 2.5) + var(--np-avatar-group-horizontal-child-position)),
35
- black 0);
36
- }
37
-
38
- &-child {
39
- margin-left: calc(var(--np-avatar-group-horizontal-child-position) * -1);
40
- }
41
- }
42
- }