@transferwise/components 0.0.0-experimental-eaf43c2 → 0.0.0-experimental-6730b89
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/avatarLayout/AvatarLayout.js.map +1 -1
- package/build/avatarLayout/AvatarLayout.mjs.map +1 -1
- package/build/avatarView/AvatarView.js +8 -4
- package/build/avatarView/AvatarView.js.map +1 -1
- package/build/avatarView/AvatarView.mjs +8 -4
- package/build/avatarView/AvatarView.mjs.map +1 -1
- package/build/avatarView/{NotificationDot.js → Dot.js} +14 -12
- package/build/avatarView/Dot.js.map +1 -0
- package/build/avatarView/{NotificationDot.mjs → Dot.mjs} +14 -12
- package/build/avatarView/Dot.mjs.map +1 -0
- package/build/i18n/en.json +0 -2
- package/build/i18n/en.json.js +0 -2
- package/build/i18n/en.json.js.map +1 -1
- package/build/i18n/en.json.mjs +0 -2
- package/build/i18n/en.json.mjs.map +1 -1
- package/build/index.js +0 -2
- package/build/index.js.map +1 -1
- package/build/index.mjs +0 -1
- package/build/index.mjs.map +1 -1
- package/build/main.css +17 -69
- package/build/styles/avatarView/AvatarView.css +17 -11
- package/build/styles/avatarView/Dot.css +26 -0
- package/build/styles/main.css +17 -69
- package/build/types/avatarLayout/AvatarLayout.d.ts +1 -1
- package/build/types/avatarLayout/AvatarLayout.d.ts.map +1 -1
- package/build/types/avatarView/AvatarView.d.ts +4 -1
- package/build/types/avatarView/AvatarView.d.ts.map +1 -1
- package/build/types/avatarView/Dot.d.ts +8 -0
- package/build/types/avatarView/Dot.d.ts.map +1 -0
- package/build/types/index.d.ts +0 -2
- package/build/types/index.d.ts.map +1 -1
- package/build/types/test-utils/index.d.ts +0 -4
- package/build/types/test-utils/index.d.ts.map +1 -1
- package/package.json +2 -3
- package/src/avatarLayout/AvatarLayout.tsx +1 -1
- package/src/avatarView/AvatarView.css +17 -11
- package/src/avatarView/AvatarView.less +1 -1
- package/src/avatarView/AvatarView.story.tsx +37 -0
- package/src/avatarView/AvatarView.tsx +13 -6
- package/src/avatarView/Dot.css +26 -0
- package/src/avatarView/Dot.less +31 -0
- package/src/avatarView/Dot.tsx +42 -0
- package/src/i18n/en.json +0 -2
- package/src/index.ts +0 -2
- package/src/listItem/AvatarView/ListItemAvatarView.story.tsx +69 -2
- package/src/main.css +17 -69
- package/src/main.less +0 -1
- package/src/ssr.spec.tsx +0 -1
- package/build/avatarView/NotificationDot.js.map +0 -1
- package/build/avatarView/NotificationDot.mjs.map +0 -1
- package/build/moneyInputField/AmountInput.js +0 -284
- package/build/moneyInputField/AmountInput.js.map +0 -1
- package/build/moneyInputField/AmountInput.mjs +0 -282
- package/build/moneyInputField/AmountInput.mjs.map +0 -1
- package/build/moneyInputField/AnimatedNumber.js +0 -50
- package/build/moneyInputField/AnimatedNumber.js.map +0 -1
- package/build/moneyInputField/AnimatedNumber.mjs +0 -48
- package/build/moneyInputField/AnimatedNumber.mjs.map +0 -1
- package/build/moneyInputField/Chevron.js +0 -33
- package/build/moneyInputField/Chevron.js.map +0 -1
- package/build/moneyInputField/Chevron.mjs +0 -31
- package/build/moneyInputField/Chevron.mjs.map +0 -1
- package/build/moneyInputField/CurrencySelector.js +0 -160
- package/build/moneyInputField/CurrencySelector.js.map +0 -1
- package/build/moneyInputField/CurrencySelector.mjs +0 -157
- package/build/moneyInputField/CurrencySelector.mjs.map +0 -1
- package/build/moneyInputField/MoneyInputField.js +0 -113
- package/build/moneyInputField/MoneyInputField.js.map +0 -1
- package/build/moneyInputField/MoneyInputField.messages.js +0 -17
- package/build/moneyInputField/MoneyInputField.messages.js.map +0 -1
- package/build/moneyInputField/MoneyInputField.messages.mjs +0 -13
- package/build/moneyInputField/MoneyInputField.messages.mjs.map +0 -1
- package/build/moneyInputField/MoneyInputField.mjs +0 -109
- package/build/moneyInputField/MoneyInputField.mjs.map +0 -1
- package/build/moneyInputField/useFocus.js +0 -37
- package/build/moneyInputField/useFocus.js.map +0 -1
- package/build/moneyInputField/useFocus.mjs +0 -35
- package/build/moneyInputField/useFocus.mjs.map +0 -1
- package/build/moneyInputField/useInputStyle.js +0 -71
- package/build/moneyInputField/useInputStyle.js.map +0 -1
- package/build/moneyInputField/useInputStyle.mjs +0 -69
- package/build/moneyInputField/useInputStyle.mjs.map +0 -1
- package/build/moneyInputField/utils.js +0 -87
- package/build/moneyInputField/utils.js.map +0 -1
- package/build/moneyInputField/utils.mjs +0 -78
- package/build/moneyInputField/utils.mjs.map +0 -1
- package/build/styles/avatarView/NotificationDot.css +0 -20
- package/build/styles/moneyInputField/AmountInput.css +0 -32
- package/build/styles/moneyInputField/Chevron.css +0 -12
- package/build/styles/moneyInputField/CurrencySelector.css +0 -6
- package/build/styles/moneyInputField/MoneyInputField.css +0 -58
- package/build/types/avatarView/NotificationDot.d.ts +0 -8
- package/build/types/avatarView/NotificationDot.d.ts.map +0 -1
- package/build/types/moneyInputField/AmountInput.d.ts +0 -13
- package/build/types/moneyInputField/AmountInput.d.ts.map +0 -1
- package/build/types/moneyInputField/AnimatedNumber.d.ts +0 -9
- package/build/types/moneyInputField/AnimatedNumber.d.ts.map +0 -1
- package/build/types/moneyInputField/Chevron.d.ts +0 -6
- package/build/types/moneyInputField/Chevron.d.ts.map +0 -1
- package/build/types/moneyInputField/CurrencySelector.d.ts +0 -30
- package/build/types/moneyInputField/CurrencySelector.d.ts.map +0 -1
- package/build/types/moneyInputField/MoneyInputField.d.ts +0 -30
- package/build/types/moneyInputField/MoneyInputField.d.ts.map +0 -1
- package/build/types/moneyInputField/MoneyInputField.messages.d.ts +0 -12
- package/build/types/moneyInputField/MoneyInputField.messages.d.ts.map +0 -1
- package/build/types/moneyInputField/index.d.ts +0 -3
- package/build/types/moneyInputField/index.d.ts.map +0 -1
- package/build/types/moneyInputField/useFocus.d.ts +0 -7
- package/build/types/moneyInputField/useFocus.d.ts.map +0 -1
- package/build/types/moneyInputField/useInputStyle.d.ts +0 -10
- package/build/types/moneyInputField/useInputStyle.d.ts.map +0 -1
- package/build/types/moneyInputField/useSelectionRange.d.ts +0 -10
- package/build/types/moneyInputField/useSelectionRange.d.ts.map +0 -1
- package/build/types/moneyInputField/utils.d.ts +0 -22
- package/build/types/moneyInputField/utils.d.ts.map +0 -1
- package/src/avatarView/NotificationDot.css +0 -20
- package/src/avatarView/NotificationDot.less +0 -24
- package/src/avatarView/NotificationDot.tsx +0 -35
- package/src/moneyInputField/AmountInput.css +0 -32
- package/src/moneyInputField/AmountInput.less +0 -43
- package/src/moneyInputField/AmountInput.tsx +0 -355
- package/src/moneyInputField/AnimatedNumber.tsx +0 -40
- package/src/moneyInputField/Chevron.css +0 -12
- package/src/moneyInputField/Chevron.less +0 -13
- package/src/moneyInputField/Chevron.tsx +0 -35
- package/src/moneyInputField/CurrencySelector.css +0 -6
- package/src/moneyInputField/CurrencySelector.less +0 -7
- package/src/moneyInputField/CurrencySelector.tsx +0 -219
- package/src/moneyInputField/MoneyInputField.css +0 -58
- package/src/moneyInputField/MoneyInputField.less +0 -13
- package/src/moneyInputField/MoneyInputField.messages.ts +0 -13
- package/src/moneyInputField/MoneyInputField.story.tsx +0 -188
- package/src/moneyInputField/MoneyInputField.tsx +0 -123
- package/src/moneyInputField/index.ts +0 -2
- package/src/moneyInputField/useFocus.ts +0 -35
- package/src/moneyInputField/useInputStyle.ts +0 -85
- package/src/moneyInputField/useSelectionRange.ts +0 -23
- package/src/moneyInputField/utils.spec.ts +0 -114
- package/src/moneyInputField/utils.ts +0 -116
|
@@ -1,23 +1,29 @@
|
|
|
1
|
-
.np-
|
|
2
|
-
--np-
|
|
1
|
+
.np-dot {
|
|
2
|
+
--np-dot-size: 14px;
|
|
3
3
|
position: relative;
|
|
4
4
|
display: inline-block;
|
|
5
5
|
}
|
|
6
|
-
.np-
|
|
7
|
-
-webkit-mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-
|
|
8
|
-
mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-
|
|
9
|
-
-webkit-mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-
|
|
10
|
-
mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-
|
|
6
|
+
.np-dot-mask {
|
|
7
|
+
-webkit-mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
|
|
8
|
+
mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
|
|
9
|
+
-webkit-mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
|
|
10
|
+
mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
|
|
11
11
|
}
|
|
12
|
-
.np-
|
|
12
|
+
.np-dot-badge {
|
|
13
13
|
position: absolute;
|
|
14
|
-
width: var(--np-
|
|
15
|
-
height: var(--np-
|
|
16
|
-
background-color: var(--color-sentiment-negative);
|
|
14
|
+
width: var(--np-dot-size);
|
|
15
|
+
height: var(--np-dot-size);
|
|
17
16
|
border-radius: 9999px;
|
|
18
17
|
border-radius: var(--radius-full);
|
|
19
18
|
right: 0;
|
|
20
19
|
}
|
|
20
|
+
.np-dot-badge-notification {
|
|
21
|
+
background-color: var(--color-sentiment-negative);
|
|
22
|
+
}
|
|
23
|
+
.np-dot-badge-online {
|
|
24
|
+
background-color: #00a2dd;
|
|
25
|
+
background-color: var(--color-interactive-accent);
|
|
26
|
+
}
|
|
21
27
|
.np-avatar-view .np-avatar-view-content {
|
|
22
28
|
color: #37517e;
|
|
23
29
|
color: var(--color-content-primary);
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
.np-dot {
|
|
2
|
+
--np-dot-size: 14px;
|
|
3
|
+
position: relative;
|
|
4
|
+
display: inline-block;
|
|
5
|
+
}
|
|
6
|
+
.np-dot-mask {
|
|
7
|
+
-webkit-mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
|
|
8
|
+
mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
|
|
9
|
+
-webkit-mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
|
|
10
|
+
mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
|
|
11
|
+
}
|
|
12
|
+
.np-dot-badge {
|
|
13
|
+
position: absolute;
|
|
14
|
+
width: var(--np-dot-size);
|
|
15
|
+
height: var(--np-dot-size);
|
|
16
|
+
border-radius: 9999px;
|
|
17
|
+
border-radius: var(--radius-full);
|
|
18
|
+
right: 0;
|
|
19
|
+
}
|
|
20
|
+
.np-dot-badge-notification {
|
|
21
|
+
background-color: var(--color-sentiment-negative);
|
|
22
|
+
}
|
|
23
|
+
.np-dot-badge-online {
|
|
24
|
+
background-color: #00a2dd;
|
|
25
|
+
background-color: var(--color-interactive-accent);
|
|
26
|
+
}
|
package/build/styles/main.css
CHANGED
|
@@ -586,26 +586,32 @@
|
|
|
586
586
|
.wds-inline-prompt.wds-inline-prompt--warning:has(a, button):active {
|
|
587
587
|
background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 84%, var(--color-sentiment-warning-primary));
|
|
588
588
|
}
|
|
589
|
-
.np-
|
|
590
|
-
--np-
|
|
589
|
+
.np-dot {
|
|
590
|
+
--np-dot-size: 14px;
|
|
591
591
|
position: relative;
|
|
592
592
|
display: inline-block;
|
|
593
593
|
}
|
|
594
|
-
.np-
|
|
595
|
-
-webkit-mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-
|
|
596
|
-
mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-
|
|
597
|
-
-webkit-mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-
|
|
598
|
-
mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-
|
|
594
|
+
.np-dot-mask {
|
|
595
|
+
-webkit-mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
|
|
596
|
+
mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
|
|
597
|
+
-webkit-mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
|
|
598
|
+
mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
|
|
599
599
|
}
|
|
600
|
-
.np-
|
|
600
|
+
.np-dot-badge {
|
|
601
601
|
position: absolute;
|
|
602
|
-
width: var(--np-
|
|
603
|
-
height: var(--np-
|
|
604
|
-
background-color: var(--color-sentiment-negative);
|
|
602
|
+
width: var(--np-dot-size);
|
|
603
|
+
height: var(--np-dot-size);
|
|
605
604
|
border-radius: 9999px;
|
|
606
605
|
border-radius: var(--radius-full);
|
|
607
606
|
right: 0;
|
|
608
607
|
}
|
|
608
|
+
.np-dot-badge-notification {
|
|
609
|
+
background-color: var(--color-sentiment-negative);
|
|
610
|
+
}
|
|
611
|
+
.np-dot-badge-online {
|
|
612
|
+
background-color: #00a2dd;
|
|
613
|
+
background-color: var(--color-interactive-accent);
|
|
614
|
+
}
|
|
609
615
|
.np-avatar-view .np-avatar-view-content {
|
|
610
616
|
color: #37517e;
|
|
611
617
|
color: var(--color-content-primary);
|
|
@@ -4441,64 +4447,6 @@ button.np-link {
|
|
|
4441
4447
|
box-shadow: inset 0 0 0 1px #c9cbce !important;
|
|
4442
4448
|
box-shadow: inset 0 0 0 1px var(--color-interactive-secondary) !important;
|
|
4443
4449
|
}
|
|
4444
|
-
.wds-amount-input-container {
|
|
4445
|
-
width: 100%;
|
|
4446
|
-
}
|
|
4447
|
-
.wds-amount-input-input-container {
|
|
4448
|
-
display: flex;
|
|
4449
|
-
justify-content: right;
|
|
4450
|
-
width: 100%;
|
|
4451
|
-
transition: font-size 0.4s cubic-bezier(0.3, 0, 0.1, 1), height 0.4s cubic-bezier(0.3, 0, 0.1, 1), margin-top 0.4s cubic-bezier(0.3, 0, 0.1, 1), color 0.4s ease;
|
|
4452
|
-
color: var(--color-interactive-primary);
|
|
4453
|
-
overflow: hidden;
|
|
4454
|
-
margin-bottom: 0 !important;
|
|
4455
|
-
}
|
|
4456
|
-
@media (prefers-reduced-motion: reduce) {
|
|
4457
|
-
.wds-amount-input-input-container {
|
|
4458
|
-
transition: none;
|
|
4459
|
-
}
|
|
4460
|
-
}
|
|
4461
|
-
.wds-amount-input-input {
|
|
4462
|
-
border: none;
|
|
4463
|
-
outline: none;
|
|
4464
|
-
flex-grow: 1;
|
|
4465
|
-
text-align: right;
|
|
4466
|
-
background-color: transparent;
|
|
4467
|
-
}
|
|
4468
|
-
.wds-amount-input-input:focus-visible {
|
|
4469
|
-
outline: none;
|
|
4470
|
-
}
|
|
4471
|
-
.wds-amount-input-placeholder {
|
|
4472
|
-
flex-grow: 0;
|
|
4473
|
-
display: flex;
|
|
4474
|
-
align-items: center;
|
|
4475
|
-
}
|
|
4476
|
-
.wds-currency-selector:disabled {
|
|
4477
|
-
opacity: 1 !important;
|
|
4478
|
-
cursor: auto !important;
|
|
4479
|
-
cursor: initial !important;
|
|
4480
|
-
mix-blend-mode: initial !important;
|
|
4481
|
-
}
|
|
4482
|
-
.wds-chevron-container {
|
|
4483
|
-
width: 32px;
|
|
4484
|
-
width: var(--size-32);
|
|
4485
|
-
overflow: hidden;
|
|
4486
|
-
color: var(--color-interactive-primary);
|
|
4487
|
-
margin-left: 8px;
|
|
4488
|
-
margin-left: var(--size-8);
|
|
4489
|
-
transition: width 0.3s ease;
|
|
4490
|
-
}
|
|
4491
|
-
.wds-chevron-hidden {
|
|
4492
|
-
width: 0;
|
|
4493
|
-
}
|
|
4494
|
-
.wds-money-input-field-currency-selector {
|
|
4495
|
-
flex-shrink: 0;
|
|
4496
|
-
margin-right: 24px;
|
|
4497
|
-
margin-right: var(--size-24);
|
|
4498
|
-
}
|
|
4499
|
-
.wds-money-input-field-chevron {
|
|
4500
|
-
transform: translateY(-5%);
|
|
4501
|
-
}
|
|
4502
4450
|
.np-navigation-option {
|
|
4503
4451
|
-webkit-text-decoration: none;
|
|
4504
4452
|
text-decoration: none;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { AvatarViewProps } from '../avatarView';
|
|
2
2
|
type SingleAvatarType = {
|
|
3
3
|
asset?: AvatarViewProps['children'];
|
|
4
|
-
} & Omit<AvatarViewProps, 'notification' | 'selected' | 'size' | 'badge' | 'children' | 'interactive'>;
|
|
4
|
+
} & Omit<AvatarViewProps, 'notification' | 'selected' | 'size' | 'badge' | 'children' | 'interactive' | 'dot'>;
|
|
5
5
|
export type Props = {
|
|
6
6
|
avatars: SingleAvatarType[];
|
|
7
7
|
orientation?: 'horizontal' | 'diagonal';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarLayout.d.ts","sourceRoot":"","sources":["../../../src/avatarLayout/AvatarLayout.tsx"],"names":[],"mappings":"AACA,OAAmB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAG5D,KAAK,gBAAgB,GAAG;IAAE,KAAK,CAAC,EAAE,eAAe,CAAC,UAAU,CAAC,CAAA;CAAE,GAAG,IAAI,CACpE,eAAe,EACf,cAAc,GAAG,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,aAAa,
|
|
1
|
+
{"version":3,"file":"AvatarLayout.d.ts","sourceRoot":"","sources":["../../../src/avatarLayout/AvatarLayout.tsx"],"names":[],"mappings":"AACA,OAAmB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAG5D,KAAK,gBAAgB,GAAG;IAAE,KAAK,CAAC,EAAE,eAAe,CAAC,UAAU,CAAC,CAAA;CAAE,GAAG,IAAI,CACpE,eAAe,EACf,cAAc,GAAG,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,aAAa,GAAG,KAAK,CACpF,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG;IAClB,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACzC,GAAG,IAAI,CACN,eAAe,EACf,MAAM,GAAG,aAAa,GAAG,WAAW,GAAG,MAAM,GAAG,YAAY,GAAG,iBAAiB,GAAG,aAAa,CACjG,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,OAAY,EACZ,WAAW,EAAE,eAA8B,EAC3C,IAAS,EACT,SAAS,EACT,WAAW,EACX,GAAG,SAAS,EACb,EAAE,KAAK,sCAwDP"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { BadgeProps, BadgeAssetsProps } from '../badge';
|
|
2
|
+
import { DotProps } from './Dot';
|
|
2
3
|
import { HTMLAttributes } from 'react';
|
|
3
4
|
import { ProfileTypeBusiness, ProfileTypePersonal } from '../common';
|
|
4
5
|
export type AvatarViewBadgeProps = Omit<BadgeAssetsProps, 'size'> & Pick<BadgeProps, 'aria-label'> & {
|
|
@@ -16,11 +17,13 @@ export type Props = {
|
|
|
16
17
|
profileType?: ProfileTypeBusiness | ProfileTypePersonal;
|
|
17
18
|
size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;
|
|
18
19
|
notification?: boolean;
|
|
20
|
+
/** @experimental may replace `notification` in future versions */
|
|
21
|
+
dot?: DotProps['variant'];
|
|
19
22
|
badge?: AvatarViewBadgeProps;
|
|
20
23
|
interactive?: boolean;
|
|
21
24
|
selected?: boolean;
|
|
22
25
|
style?: Pick<React.CSSProperties, 'border' | 'backgroundColor' | 'color'>;
|
|
23
26
|
} & Pick<HTMLAttributes<HTMLDivElement>, 'className' | 'children' | 'role' | 'aria-label' | 'aria-labelledby' | 'aria-hidden'>;
|
|
24
|
-
declare function AvatarView({ children, size, selected, notification, badge, interactive, className, style, imgSrc, profileType, profileName, ...restProps }: Props): import("react").JSX.Element;
|
|
27
|
+
declare function AvatarView({ children, size, selected, notification, dot, badge, interactive, className, style, imgSrc, profileType, profileName, ...restProps }: Props): import("react").JSX.Element;
|
|
25
28
|
export default AvatarView;
|
|
26
29
|
//# sourceMappingURL=AvatarView.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarView.d.ts","sourceRoot":"","sources":["../../../src/avatarView/AvatarView.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAe,UAAU,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"AvatarView.d.ts","sourceRoot":"","sources":["../../../src/avatarView/AvatarView.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAe,UAAU,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAC5E,OAAY,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGtC,OAAO,EAAE,cAAc,EAA+B,MAAM,OAAO,CAAC;AAEpE,OAAO,EAA4B,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAC;AAM/F,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC,GAC/D,IAAI,CAAC,UAAU,EAAE,YAAY,CAAC,GAAG;IAC/B;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB,CAAC;AAEJ,MAAM,MAAM,KAAK,GAAG;IAClB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,WAAW,CAAC,EAAE,mBAAmB,GAAG,mBAAmB,CAAC;IACxD,IAAI,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IACxC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,kEAAkE;IAClE,GAAG,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC,CAAC;IAC1B,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,QAAQ,GAAG,iBAAiB,GAAG,OAAO,CAAC,CAAC;CAC3E,GAAG,IAAI,CACN,cAAc,CAAC,cAAc,CAAC,EAC9B,WAAW,GAAG,UAAU,GAAG,MAAM,GAAG,YAAY,GAAG,iBAAiB,GAAG,aAAa,CACrF,CAAC;AAEF,iBAAS,UAAU,CAAC,EAClB,QAAoB,EACpB,IAAS,EACT,QAAQ,EACR,YAAY,EACZ,GAAG,EACH,KAAK,EACL,WAAmB,EACnB,SAAS,EACT,KAAK,EACL,MAAM,EACN,WAAW,EACX,WAAW,EACX,GAAG,SAAS,EACb,EAAE,KAAK,+BAkCP;AAuGD,eAAe,UAAU,CAAC"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { HTMLAttributes } from 'react';
|
|
2
|
+
import { Props as AvatarViewProps } from './AvatarView';
|
|
3
|
+
export type DotProps = Pick<HTMLAttributes<HTMLDivElement>, 'children'> & {
|
|
4
|
+
avatarSize?: AvatarViewProps['size'];
|
|
5
|
+
variant?: 'notification' | 'online';
|
|
6
|
+
};
|
|
7
|
+
export default function Dot({ children, avatarSize, variant }: DotProps): import("react").JSX.Element;
|
|
8
|
+
//# sourceMappingURL=Dot.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Dot.d.ts","sourceRoot":"","sources":["../../../src/avatarView/Dot.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,KAAK,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAGxD,MAAM,MAAM,QAAQ,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,GAAG;IACxE,UAAU,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IACrC,OAAO,CAAC,EAAE,cAAc,GAAG,QAAQ,CAAC;CACrC,CAAC;AAeF,MAAM,CAAC,OAAO,UAAU,GAAG,CAAC,EAAE,QAAQ,EAAE,UAAe,EAAE,OAAwB,EAAE,EAAE,QAAQ,+BAmB5F"}
|
package/build/types/index.d.ts
CHANGED
|
@@ -40,7 +40,6 @@ export type { MarkdownProps } from './markdown';
|
|
|
40
40
|
export type { ModalProps } from './modal';
|
|
41
41
|
export type { MoneyProps } from './money';
|
|
42
42
|
export type { CurrencyHeaderItem, CurrencyItem, CurrencyOptionItem, MoneyInputProps, } from './moneyInput';
|
|
43
|
-
export type { MoneyInputFieldProps } from './moneyInputField';
|
|
44
43
|
export type { NavigationOptionListProps } from './navigationOptionsList';
|
|
45
44
|
export type { NavigationOptionProps } from './navigationOption/NavigationOption';
|
|
46
45
|
export type { OverlayHeaderProps } from './overlayHeader';
|
|
@@ -134,7 +133,6 @@ export { default as Markdown } from './markdown';
|
|
|
134
133
|
export { default as Modal } from './modal';
|
|
135
134
|
export { default as Money } from './money';
|
|
136
135
|
export { default as MoneyInput } from './moneyInput';
|
|
137
|
-
export { default as MoneyInputField } from './moneyInputField';
|
|
138
136
|
export { default as NavigationOption } from './navigationOption';
|
|
139
137
|
export { default as NavigationOptionsList } from './navigationOptionsList';
|
|
140
138
|
export { default as Nudge } from './nudge';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AACjE,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAClE,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,YAAY,EAAE,cAAc,IAAI,WAAW,EAAE,MAAM,UAAU,CAAC;AAC9D,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,YAAY,EACV,SAAS,EACT,YAAY,EACZ,eAAe,EACf,SAAS,EACT,UAAU,EACV,eAAe,GAChB,MAAM,UAAU,CAAC;AAClB,YAAY,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,YAAY,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACzD,YAAY,EAAE,mBAAmB,EAAE,wBAAwB,EAAE,MAAM,kBAAkB,CAAC;AACtF,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAC9C,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,YAAY,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAChD,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,YAAY,EAAE,2BAA2B,EAAE,MAAM,0BAA0B,CAAC;AAC5E,YAAY,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACjD,YAAY,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC3D,YAAY,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,YAAY,EACV,oBAAoB,EACpB,eAAe,EACf,6BAA6B,EAC7B,qBAAqB,EACrB,gBAAgB,EAChB,wBAAwB,EACxB,6BAA6B,GAC9B,MAAM,sBAAsB,CAAC;AAC9B,YAAY,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AACvD,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAChE,YAAY,EAAE,UAAU,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAC3F,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,YAAY,EACV,kBAAkB,EAClB,YAAY,EACZ,kBAAkB,EAClB,eAAe,GAChB,MAAM,cAAc,CAAC;AACtB,YAAY,EAAE,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"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"}
|
|
@@ -33,8 +33,6 @@ declare function customRender(ui: ReactElement, { locale, messages, ...renderOpt
|
|
|
33
33
|
"neptune.MoneyInput.Select.placeholder": string;
|
|
34
34
|
"neptune.MoneyInput.Select.searchPlaceholder": string;
|
|
35
35
|
"neptune.MoneyInput.Select.selectCurrencyLabel": string;
|
|
36
|
-
"neptune.MoneyInputField.currency.search.placeholder": string;
|
|
37
|
-
"neptune.MoneyInputField.currency.select.currency": string;
|
|
38
36
|
"neptune.PhoneNumberInput.SelectInput.placeholder": string;
|
|
39
37
|
"neptune.PhoneNumberInput.countryCodeLabel": string;
|
|
40
38
|
"neptune.PhoneNumberInput.phoneNumberLabel": string;
|
|
@@ -118,8 +116,6 @@ declare function customRenderHook(callback: () => unknown, { locale, messages }?
|
|
|
118
116
|
"neptune.MoneyInput.Select.placeholder": string;
|
|
119
117
|
"neptune.MoneyInput.Select.searchPlaceholder": string;
|
|
120
118
|
"neptune.MoneyInput.Select.selectCurrencyLabel": string;
|
|
121
|
-
"neptune.MoneyInputField.currency.search.placeholder": string;
|
|
122
|
-
"neptune.MoneyInputField.currency.select.currency": string;
|
|
123
119
|
"neptune.PhoneNumberInput.SelectInput.placeholder": string;
|
|
124
120
|
"neptune.PhoneNumberInput.countryCodeLabel": string;
|
|
125
121
|
"neptune.PhoneNumberInput.phoneNumberLabel": string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/test-utils/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAM,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,MAAM,EAAc,MAAM,wBAAwB,CAAC;AAE5D,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAMxD;;;;GAIG;AACH,iBAAS,YAAY,CACnB,EAAE,EAAE,YAAY,EAChB,EAAE,MAAuB,EAAE,QAAa,EAAE,GAAG,aAAa,EAAE
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/test-utils/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAM,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,MAAM,EAAc,MAAM,wBAAwB,CAAC;AAE5D,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAMxD;;;;GAIG;AACH,iBAAS,YAAY,CACnB,EAAE,EAAE,YAAY,EAChB,EAAE,MAAuB,EAAE,QAAa,EAAE,GAAG,aAAa,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAK,GAChE,UAAU,CAAC,OAAO,MAAM,CAAC,CAK3B;AAED;;;GAGG;AACH,iBAAS,gBAAgB,CACvB,QAAQ,EAAE,MAAM,OAAO,EACvB,EAAE,MAAuB,EAAE,QAAa,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAK,uEAKhD;AAED,cAAc,wBAAwB,CAAC;AACvC,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAE,YAAY,IAAI,MAAM,EAAE,gBAAgB,IAAI,UAAU,EAAE,SAAS,EAAE,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@transferwise/components",
|
|
3
|
-
"version": "0.0.0-experimental-
|
|
3
|
+
"version": "0.0.0-experimental-6730b89",
|
|
4
4
|
"description": "Neptune React components",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -83,9 +83,9 @@
|
|
|
83
83
|
"storybook": "^9.1.3",
|
|
84
84
|
"storybook-addon-tag-badges": "^2.0.2",
|
|
85
85
|
"storybook-addon-test-codegen": "^2.0.1",
|
|
86
|
-
"@transferwise/less-config": "3.1.2",
|
|
87
86
|
"@transferwise/neptune-css": "14.25.0",
|
|
88
87
|
"@wise/components-theming": "1.7.0",
|
|
88
|
+
"@transferwise/less-config": "3.1.2",
|
|
89
89
|
"@wise/wds-configs": "0.0.0"
|
|
90
90
|
},
|
|
91
91
|
"peerDependencies": {
|
|
@@ -101,7 +101,6 @@
|
|
|
101
101
|
"@babel/runtime": "^7.28.3",
|
|
102
102
|
"@floating-ui/react": "^0.27.16",
|
|
103
103
|
"@headlessui/react": "^1.7.19",
|
|
104
|
-
"framer-motion": "^12.15.0",
|
|
105
104
|
"@popperjs/core": "^2.11.8",
|
|
106
105
|
"@react-aria/focus": "^3.21.0",
|
|
107
106
|
"@react-aria/overlays": "^3.28.0",
|
|
@@ -4,7 +4,7 @@ import { useDirection } from '../common/hooks';
|
|
|
4
4
|
|
|
5
5
|
type SingleAvatarType = { asset?: AvatarViewProps['children'] } & Omit<
|
|
6
6
|
AvatarViewProps,
|
|
7
|
-
'notification' | 'selected' | 'size' | 'badge' | 'children' | 'interactive'
|
|
7
|
+
'notification' | 'selected' | 'size' | 'badge' | 'children' | 'interactive' | 'dot'
|
|
8
8
|
>;
|
|
9
9
|
|
|
10
10
|
export type Props = {
|
|
@@ -1,23 +1,29 @@
|
|
|
1
|
-
.np-
|
|
2
|
-
--np-
|
|
1
|
+
.np-dot {
|
|
2
|
+
--np-dot-size: 14px;
|
|
3
3
|
position: relative;
|
|
4
4
|
display: inline-block;
|
|
5
5
|
}
|
|
6
|
-
.np-
|
|
7
|
-
-webkit-mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-
|
|
8
|
-
mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-
|
|
9
|
-
-webkit-mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-
|
|
10
|
-
mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-
|
|
6
|
+
.np-dot-mask {
|
|
7
|
+
-webkit-mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
|
|
8
|
+
mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
|
|
9
|
+
-webkit-mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
|
|
10
|
+
mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
|
|
11
11
|
}
|
|
12
|
-
.np-
|
|
12
|
+
.np-dot-badge {
|
|
13
13
|
position: absolute;
|
|
14
|
-
width: var(--np-
|
|
15
|
-
height: var(--np-
|
|
16
|
-
background-color: var(--color-sentiment-negative);
|
|
14
|
+
width: var(--np-dot-size);
|
|
15
|
+
height: var(--np-dot-size);
|
|
17
16
|
border-radius: 9999px;
|
|
18
17
|
border-radius: var(--radius-full);
|
|
19
18
|
right: 0;
|
|
20
19
|
}
|
|
20
|
+
.np-dot-badge-notification {
|
|
21
|
+
background-color: var(--color-sentiment-negative);
|
|
22
|
+
}
|
|
23
|
+
.np-dot-badge-online {
|
|
24
|
+
background-color: #00a2dd;
|
|
25
|
+
background-color: var(--color-interactive-accent);
|
|
26
|
+
}
|
|
21
27
|
.np-avatar-view .np-avatar-view-content {
|
|
22
28
|
color: #37517e;
|
|
23
29
|
color: var(--color-content-primary);
|
|
@@ -103,6 +103,43 @@ export const Notification: Story = {
|
|
|
103
103
|
),
|
|
104
104
|
};
|
|
105
105
|
|
|
106
|
+
export const Online: Story = {
|
|
107
|
+
tags: ['early-access'],
|
|
108
|
+
render: () => (
|
|
109
|
+
<div
|
|
110
|
+
style={{
|
|
111
|
+
gap: '1em',
|
|
112
|
+
display: 'grid',
|
|
113
|
+
justifyContent: 'space-between',
|
|
114
|
+
gridTemplate: `auto auto / repeat(${sizes.length}, min-content)`,
|
|
115
|
+
}}
|
|
116
|
+
>
|
|
117
|
+
{sizes.map((size) => (
|
|
118
|
+
<Body type="body-large-bold">{size}</Body>
|
|
119
|
+
))}
|
|
120
|
+
{sizes.map((size) => (
|
|
121
|
+
<AvatarView key={size} size={size} dot="online">
|
|
122
|
+
<Freeze />
|
|
123
|
+
</AvatarView>
|
|
124
|
+
))}
|
|
125
|
+
{sizes.map((size) => (
|
|
126
|
+
<AvatarView key={size} size={size} dot="online" interactive>
|
|
127
|
+
<Freeze />
|
|
128
|
+
</AvatarView>
|
|
129
|
+
))}
|
|
130
|
+
{sizes.map((size) => (
|
|
131
|
+
<AvatarView
|
|
132
|
+
key={size}
|
|
133
|
+
size={size}
|
|
134
|
+
imgSrc="../avatar-rectangle-fox.webp"
|
|
135
|
+
dot="online"
|
|
136
|
+
interactive
|
|
137
|
+
/>
|
|
138
|
+
))}
|
|
139
|
+
</div>
|
|
140
|
+
),
|
|
141
|
+
};
|
|
142
|
+
|
|
106
143
|
export const Badge: Story = {
|
|
107
144
|
render: () => {
|
|
108
145
|
const currencies = ['USD', 'EUR', 'GBP', 'AUD', 'CAD', 'JPY', 'CNY'];
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import Badge, { BadgeAssets, BadgeProps, BadgeAssetsProps } from '../badge';
|
|
2
|
-
import
|
|
2
|
+
import Dot, { DotProps } from './Dot';
|
|
3
3
|
import Circle from '../common/circle';
|
|
4
4
|
import Image from '../image';
|
|
5
5
|
import { HTMLAttributes, PropsWithChildren, useState } from 'react';
|
|
@@ -27,6 +27,8 @@ export type Props = {
|
|
|
27
27
|
profileType?: ProfileTypeBusiness | ProfileTypePersonal;
|
|
28
28
|
size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;
|
|
29
29
|
notification?: boolean;
|
|
30
|
+
/** @experimental may replace `notification` in future versions */
|
|
31
|
+
dot?: DotProps['variant'];
|
|
30
32
|
badge?: AvatarViewBadgeProps;
|
|
31
33
|
interactive?: boolean;
|
|
32
34
|
selected?: boolean;
|
|
@@ -41,6 +43,7 @@ function AvatarView({
|
|
|
41
43
|
size = 48,
|
|
42
44
|
selected,
|
|
43
45
|
notification,
|
|
46
|
+
dot,
|
|
44
47
|
badge,
|
|
45
48
|
interactive = false,
|
|
46
49
|
className,
|
|
@@ -62,7 +65,7 @@ function AvatarView({
|
|
|
62
65
|
)}
|
|
63
66
|
{...restProps}
|
|
64
67
|
>
|
|
65
|
-
<Badges avatar={{ size, notification, selected }} {...badge}>
|
|
68
|
+
<Badges avatar={{ size, notification, dot, selected }} {...badge}>
|
|
66
69
|
<Circle
|
|
67
70
|
size={size}
|
|
68
71
|
fixedSize
|
|
@@ -115,7 +118,7 @@ const MAP_BADGE_POSITION = {
|
|
|
115
118
|
|
|
116
119
|
type BadgesProps = AvatarViewBadgeProps &
|
|
117
120
|
PropsWithChildren<{
|
|
118
|
-
avatar: Pick<Props, 'selected' | 'size' | 'notification'>;
|
|
121
|
+
avatar: Pick<Props, 'selected' | 'size' | 'notification' | 'dot'>;
|
|
119
122
|
}>;
|
|
120
123
|
|
|
121
124
|
/**
|
|
@@ -128,7 +131,7 @@ function Badges({
|
|
|
128
131
|
asset: customBadge,
|
|
129
132
|
...badgeAssets
|
|
130
133
|
}: BadgesProps) {
|
|
131
|
-
const { size = 48, selected, notification } = avatar;
|
|
134
|
+
const { size = 48, selected, notification, dot } = avatar;
|
|
132
135
|
const anyBadge = Object.values({ customBadge, ...badgeAssets }).filter(Boolean).length > 0;
|
|
133
136
|
if ((anyBadge || selected) && size > 16) {
|
|
134
137
|
const badgeSize: BadgeAssetsProps['size'] = MAP_BADGE_ASSET_SIZE[size];
|
|
@@ -154,8 +157,12 @@ function Badges({
|
|
|
154
157
|
</Badge>
|
|
155
158
|
);
|
|
156
159
|
}
|
|
157
|
-
if (notification) {
|
|
158
|
-
return
|
|
160
|
+
if (notification || dot) {
|
|
161
|
+
return (
|
|
162
|
+
<Dot avatarSize={size} variant={dot}>
|
|
163
|
+
{children}
|
|
164
|
+
</Dot>
|
|
165
|
+
);
|
|
159
166
|
}
|
|
160
167
|
return children;
|
|
161
168
|
}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
.np-dot {
|
|
2
|
+
--np-dot-size: 14px;
|
|
3
|
+
position: relative;
|
|
4
|
+
display: inline-block;
|
|
5
|
+
}
|
|
6
|
+
.np-dot-mask {
|
|
7
|
+
-webkit-mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
|
|
8
|
+
mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
|
|
9
|
+
-webkit-mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
|
|
10
|
+
mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
|
|
11
|
+
}
|
|
12
|
+
.np-dot-badge {
|
|
13
|
+
position: absolute;
|
|
14
|
+
width: var(--np-dot-size);
|
|
15
|
+
height: var(--np-dot-size);
|
|
16
|
+
border-radius: 9999px;
|
|
17
|
+
border-radius: var(--radius-full);
|
|
18
|
+
right: 0;
|
|
19
|
+
}
|
|
20
|
+
.np-dot-badge-notification {
|
|
21
|
+
background-color: var(--color-sentiment-negative);
|
|
22
|
+
}
|
|
23
|
+
.np-dot-badge-online {
|
|
24
|
+
background-color: #00a2dd;
|
|
25
|
+
background-color: var(--color-interactive-accent);
|
|
26
|
+
}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
.np-dot {
|
|
2
|
+
--np-dot-size: 14px;
|
|
3
|
+
position: relative;
|
|
4
|
+
display: inline-block;
|
|
5
|
+
|
|
6
|
+
&-mask {
|
|
7
|
+
mask-image: radial-gradient(
|
|
8
|
+
circle at bottom calc(100% - calc(var(--np-dot-size) / 2))
|
|
9
|
+
left calc(100% - calc(var(--np-dot-size) / 2)),
|
|
10
|
+
transparent 0,
|
|
11
|
+
transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)),
|
|
12
|
+
black 0
|
|
13
|
+
);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
&-badge {
|
|
17
|
+
position: absolute;
|
|
18
|
+
width: var(--np-dot-size);
|
|
19
|
+
height: var(--np-dot-size);
|
|
20
|
+
border-radius: var(--radius-full);
|
|
21
|
+
right: 0;
|
|
22
|
+
|
|
23
|
+
&-notification {
|
|
24
|
+
background-color: var(--color-sentiment-negative);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
&-online {
|
|
28
|
+
background-color: var(--color-interactive-accent);
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { HTMLAttributes } from 'react';
|
|
2
|
+
import { Props as AvatarViewProps } from './AvatarView';
|
|
3
|
+
import { clsx } from 'clsx';
|
|
4
|
+
|
|
5
|
+
export type DotProps = Pick<HTMLAttributes<HTMLDivElement>, 'children'> & {
|
|
6
|
+
avatarSize?: AvatarViewProps['size'];
|
|
7
|
+
variant?: 'notification' | 'online';
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* Depending on avatar size, dot size and offset are different
|
|
12
|
+
*/
|
|
13
|
+
const MAP_STYLE_CONFIG = {
|
|
14
|
+
16: { size: 6, offset: 1 },
|
|
15
|
+
24: { size: 8, offset: 2 },
|
|
16
|
+
32: { size: 10, offset: 2 },
|
|
17
|
+
40: { size: 10, offset: 2 },
|
|
18
|
+
48: { size: 14, offset: 2 },
|
|
19
|
+
56: { size: 16, offset: 3 },
|
|
20
|
+
72: { size: 20, offset: 3 },
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
export default function Dot({ children, avatarSize = 48, variant = 'notification' }: DotProps) {
|
|
24
|
+
return (
|
|
25
|
+
<div
|
|
26
|
+
className="np-dot"
|
|
27
|
+
style={{
|
|
28
|
+
// @ts-expect-error CSS custom props allowed
|
|
29
|
+
'--np-dot-size': `${MAP_STYLE_CONFIG[avatarSize].size}px`,
|
|
30
|
+
'--np-dot-offset': `${MAP_STYLE_CONFIG[avatarSize].offset}px`,
|
|
31
|
+
}}
|
|
32
|
+
>
|
|
33
|
+
<div
|
|
34
|
+
className={clsx('np-dot-badge', {
|
|
35
|
+
'np-dot-badge-notification': variant === 'notification',
|
|
36
|
+
'np-dot-badge-online': variant === 'online',
|
|
37
|
+
})}
|
|
38
|
+
/>
|
|
39
|
+
<div className="np-dot-mask">{children}</div>
|
|
40
|
+
</div>
|
|
41
|
+
);
|
|
42
|
+
}
|
package/src/i18n/en.json
CHANGED
|
@@ -23,8 +23,6 @@
|
|
|
23
23
|
"neptune.MoneyInput.Select.placeholder": "Select an option...",
|
|
24
24
|
"neptune.MoneyInput.Select.searchPlaceholder": "Type a currency or country",
|
|
25
25
|
"neptune.MoneyInput.Select.selectCurrencyLabel": "Select currency",
|
|
26
|
-
"neptune.MoneyInputField.currency.search.placeholder": "Type a currency / country",
|
|
27
|
-
"neptune.MoneyInputField.currency.select.currency": "Select currency",
|
|
28
26
|
"neptune.PhoneNumberInput.SelectInput.placeholder": "Select an option...",
|
|
29
27
|
"neptune.PhoneNumberInput.countryCodeLabel": "Country code",
|
|
30
28
|
"neptune.PhoneNumberInput.phoneNumberLabel": "Phone number",
|