@transferwise/components 0.0.0-experimental-d2bc8ee → 0.0.0-experimental-2b5b7ab
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/common/closeButton/CloseButton.messages.js +2 -2
- package/build/common/closeButton/CloseButton.messages.js.map +1 -1
- package/build/common/closeButton/CloseButton.messages.mjs +2 -2
- package/build/common/closeButton/CloseButton.messages.mjs.map +1 -1
- package/build/common/closeButton/CloseButton.mjs +2 -2
- package/build/common/closeButton/CloseButton.mjs.map +1 -1
- package/build/drawer/Drawer.js +18 -9
- package/build/drawer/Drawer.js.map +1 -1
- package/build/drawer/Drawer.mjs +18 -9
- package/build/drawer/Drawer.mjs.map +1 -1
- package/build/main.css +649 -510
- package/build/mocks.js +7 -0
- package/build/mocks.js.map +1 -1
- package/build/mocks.mjs +7 -1
- package/build/mocks.mjs.map +1 -1
- package/build/modal/Modal.js +20 -21
- package/build/modal/Modal.js.map +1 -1
- package/build/modal/Modal.mjs +20 -21
- package/build/modal/Modal.mjs.map +1 -1
- package/build/select/Select.js +2 -1
- package/build/select/Select.js.map +1 -1
- package/build/select/Select.mjs +2 -1
- package/build/select/Select.mjs.map +1 -1
- package/build/sentimentSurface/classMap.js +17 -0
- package/build/sentimentSurface/classMap.js.map +1 -0
- package/build/sentimentSurface/classMap.mjs +14 -0
- package/build/sentimentSurface/classMap.mjs.map +1 -0
- package/build/statusIcon/StatusIcon.js +4 -1
- package/build/statusIcon/StatusIcon.js.map +1 -1
- package/build/statusIcon/StatusIcon.mjs +4 -1
- package/build/statusIcon/StatusIcon.mjs.map +1 -1
- package/build/styles/accordion/Accordion.css +6 -2
- package/build/styles/actionButton/ActionButton.css +4 -12
- package/build/styles/avatar/Avatar.css +10 -13
- package/build/styles/avatarView/AvatarView.css +3 -5
- package/build/styles/avatarView/Dot.css +1 -2
- package/build/styles/button/Button.css +0 -1
- package/build/styles/card/Card.css +2 -2
- package/build/styles/carousel/Carousel.css +2 -5
- package/build/styles/checkboxButton/CheckboxButton.css +1 -0
- package/build/styles/chips/Chip.css +12 -31
- package/build/styles/circularButton/CircularButton.css +0 -6
- package/build/styles/common/Option/Option.css +2 -2
- package/build/styles/common/RadioButton/RadioButton.css +1 -1
- package/build/styles/common/bottomSheet/BottomSheet.css +1 -1
- package/build/styles/common/card/Card.css +1 -1
- package/build/styles/common/closeButton/CloseButton.css +2 -7
- package/build/styles/criticalBanner/CriticalCommsBanner.css +0 -4
- package/build/styles/dateLookup/DateLookup.css +3 -5
- package/build/styles/definitionList/DefinitionList.css +1 -1
- package/build/styles/divider/Divider.css +1 -1
- package/build/styles/drawer/Drawer.css +11 -58
- package/build/styles/emphasis/Emphasis.css +5 -4
- package/build/styles/expressiveMoneyInput/ExpressiveMoneyInput.css +0 -2
- package/build/styles/expressiveMoneyInput/amountInput/AmountInput.css +0 -1
- package/build/styles/expressiveMoneyInput/chevron/Chevron.css +0 -1
- package/build/styles/flowNavigation/FlowNavigation.css +1 -2
- package/build/styles/header/Header.css +2 -2
- package/build/styles/iconButton/IconButton.css +4 -27
- package/build/styles/inputs/Input.css +5 -5
- package/build/styles/inputs/InputGroup.css +2 -3
- package/build/styles/inputs/SelectInput.css +13 -14
- package/build/styles/inputs/TextArea.css +5 -5
- package/build/styles/instructionsList/InstructionsList.css +0 -2
- package/build/styles/listItem/ListItem.css +8 -22
- package/build/styles/logo/Logo.css +0 -2
- package/build/styles/main.css +649 -510
- package/build/styles/modal/Modal.css +6 -68
- package/build/styles/moneyInput/MoneyInput.css +2 -2
- package/build/styles/navigationOption/NavigationOption.css +3 -1
- package/build/styles/nudge/Nudge.css +1 -1
- package/build/styles/overlayHeader/OverlayHeader.css +1 -2
- package/build/styles/popover/Popover.css +2 -2
- package/build/styles/progress/Progress.css +3 -3
- package/build/styles/progressBar/ProgressBar.css +2 -2
- package/build/styles/promoCard/PromoCard.css +3 -3
- package/build/styles/prompt/InlinePrompt/InlinePrompt.css +3 -39
- package/build/styles/segmentedControl/SegmentedControl.css +2 -6
- package/build/styles/select/Select.css +41 -25
- package/build/styles/sentimentSurface/SentimentSurface.css +424 -0
- package/build/styles/slidingPanel/SlidingPanel.css +4 -4
- package/build/styles/snackbar/Snackbar.css +4 -4
- package/build/styles/statusIcon/StatusIcon.css +4 -44
- package/build/styles/stepper/Stepper.css +4 -4
- package/build/styles/summary/Summary.css +2 -5
- package/build/styles/switch/Switch.css +2 -3
- package/build/styles/table/Table.css +5 -13
- package/build/styles/tabs/Tabs.css +9 -10
- package/build/styles/tile/Tile.css +5 -8
- package/build/styles/typeahead/Typeahead.css +1 -2
- package/build/styles/typeahead/typeaheadOption/TypeaheadOption.css +4 -1
- package/build/styles/upload/Upload.css +1 -1
- package/build/styles/uploadInput/uploadButton/UploadButton.css +2 -4
- package/build/styles/uploadInput/uploadItem/UploadItem.css +4 -8
- package/build/types/drawer/Drawer.d.ts.map +1 -1
- package/build/types/mocks.d.ts +1 -0
- package/build/types/mocks.d.ts.map +1 -1
- package/build/types/modal/Modal.d.ts.map +1 -1
- package/build/types/select/Select.d.ts +1 -1
- package/build/types/select/Select.d.ts.map +1 -1
- package/build/types/sentimentSurface/SentimentSurface.d.ts +30 -0
- package/build/types/sentimentSurface/SentimentSurface.d.ts.map +1 -0
- package/build/types/sentimentSurface/SentimentSurface.types.d.ts +80 -0
- package/build/types/sentimentSurface/SentimentSurface.types.d.ts.map +1 -0
- package/build/types/sentimentSurface/classMap.d.ts +4 -0
- package/build/types/sentimentSurface/classMap.d.ts.map +1 -0
- package/build/types/sentimentSurface/index.d.ts +3 -0
- package/build/types/sentimentSurface/index.d.ts.map +1 -0
- package/build/types/statusIcon/StatusIcon.d.ts.map +1 -1
- package/build/types/test-utils/window-mock.d.ts +1 -0
- package/build/types/test-utils/window-mock.d.ts.map +1 -1
- package/package.json +5 -10
- package/src/accordion/Accordion.css +6 -2
- package/src/accordion/Accordion.less +7 -0
- package/src/accordion/Accordion.story.tsx +1 -1
- package/src/actionButton/ActionButton.css +4 -12
- package/src/avatar/Avatar.css +10 -13
- package/src/avatarLayout/AvatarLayout.story.tsx +1 -0
- package/src/avatarView/AvatarView.css +3 -5
- package/src/avatarView/AvatarView.story.tsx +1 -0
- package/src/avatarView/Dot.css +1 -2
- package/src/button/Button.css +0 -1
- package/src/card/Card.css +2 -2
- package/src/carousel/Carousel.css +2 -5
- package/src/checkboxButton/CheckboxButton.css +1 -0
- package/src/chips/Chip.css +12 -31
- package/src/circularButton/CircularButton.css +0 -6
- package/src/common/Option/Option.css +2 -2
- package/src/common/RadioButton/RadioButton.css +1 -1
- package/src/common/bottomSheet/BottomSheet.css +1 -1
- package/src/common/card/Card.css +1 -1
- package/src/common/closeButton/CloseButton.css +2 -7
- package/src/criticalBanner/CriticalCommsBanner.css +0 -4
- package/src/dateLookup/DateLookup.css +3 -5
- package/src/definitionList/DefinitionList.css +1 -1
- package/src/display/Display.story.tsx +1 -0
- package/src/divider/Divider.css +1 -1
- package/src/drawer/Drawer.css +11 -58
- package/src/drawer/Drawer.less +14 -70
- package/src/drawer/Drawer.story.tsx +158 -100
- package/src/drawer/Drawer.tsx +26 -7
- package/src/emphasis/Emphasis.css +5 -4
- package/src/expressiveMoneyInput/ExpressiveMoneyInput.css +0 -2
- package/src/expressiveMoneyInput/ExpressiveMoneyInput.spec.tsx +229 -0
- package/src/expressiveMoneyInput/amountInput/AmountInput.css +0 -1
- package/src/expressiveMoneyInput/amountInput/AmountInput.spec.tsx +282 -0
- package/src/expressiveMoneyInput/chevron/Chevron.css +0 -1
- package/src/expressiveMoneyInput/currencySelector/CurrencySelector.spec.tsx +160 -0
- package/src/flowNavigation/FlowNavigation.css +1 -2
- package/src/header/Header.css +2 -2
- package/src/iconButton/IconButton.css +4 -27
- package/src/iconButton/IconButton.story.tsx +1 -0
- package/src/inputs/Input.css +5 -5
- package/src/inputs/InputGroup.css +2 -3
- package/src/inputs/SelectInput.css +13 -14
- package/src/inputs/SelectInput.spec.tsx +7 -1
- package/src/inputs/TextArea.css +5 -5
- package/src/instructionsList/InstructionsList.css +0 -2
- package/src/listItem/ListItem.css +8 -22
- package/src/logo/Logo.css +0 -2
- package/src/main.css +649 -510
- package/src/main.less +2 -0
- package/src/mocks.ts +7 -0
- package/src/modal/Modal.css +6 -68
- package/src/modal/Modal.less +6 -76
- package/src/modal/Modal.tsx +23 -23
- package/src/moneyInput/MoneyInput.css +2 -2
- package/src/moneyInput/MoneyInput.spec.tsx +9 -1
- package/src/navigationOption/NavigationOption.css +3 -1
- package/src/nudge/Nudge.css +1 -1
- package/src/overlayHeader/OverlayHeader.css +1 -2
- package/src/popover/Popover.css +2 -2
- package/src/progress/Progress.css +3 -3
- package/src/progressBar/ProgressBar.css +2 -2
- package/src/promoCard/PromoCard.css +3 -3
- package/src/prompt/InlinePrompt/InlinePrompt.css +3 -39
- package/src/provider/theme/ThemeProvider.story.tsx +78 -11
- package/src/segmentedControl/SegmentedControl.css +2 -6
- package/src/select/Select.css +41 -25
- package/src/select/Select.less +25 -0
- package/src/select/Select.tsx +6 -1
- package/src/sentimentSurface/SentimentSurface.css +424 -0
- package/src/sentimentSurface/SentimentSurface.docs.mdx +527 -0
- package/src/sentimentSurface/SentimentSurface.less +296 -0
- package/src/sentimentSurface/SentimentSurface.spec.tsx +140 -0
- package/src/sentimentSurface/SentimentSurface.story.tsx +340 -0
- package/src/sentimentSurface/SentimentSurface.tests.story.tsx +123 -0
- package/src/sentimentSurface/SentimentSurface.tsx +72 -0
- package/src/sentimentSurface/SentimentSurface.types.ts +104 -0
- package/src/sentimentSurface/classMap.ts +15 -0
- package/src/sentimentSurface/index.ts +8 -0
- package/src/slidingPanel/SlidingPanel.css +4 -4
- package/src/snackbar/Snackbar.css +4 -4
- package/src/snackbar/Snackbar.less +4 -2
- package/src/statusIcon/StatusIcon.css +4 -44
- package/src/statusIcon/StatusIcon.less +2 -40
- package/src/statusIcon/StatusIcon.tsx +10 -1
- package/src/stepper/Stepper.css +4 -4
- package/src/summary/Summary.css +2 -5
- package/src/switch/Switch.css +2 -3
- package/src/table/Table.css +5 -13
- package/src/tabs/Tabs.css +9 -10
- package/src/test-utils/jest.setup.ts +0 -5
- package/src/test-utils/window-mock.ts +5 -0
- package/src/tile/Tile.css +5 -8
- package/src/typeahead/Typeahead.css +1 -2
- package/src/typeahead/typeaheadOption/TypeaheadOption.css +4 -1
- package/src/typeahead/typeaheadOption/TypeaheadOption.less +6 -0
- package/src/upload/Upload.css +1 -1
- package/src/uploadInput/uploadButton/UploadButton.css +2 -4
- package/src/uploadInput/uploadItem/UploadItem.css +4 -8
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
.np-table-container {
|
|
32
32
|
padding: 8px;
|
|
33
33
|
padding: var(--size-8);
|
|
34
|
-
background-color: rgba(
|
|
34
|
+
background-color: rgba(134,167,189,0.10196);
|
|
35
35
|
background-color: var(--color-background-neutral);
|
|
36
36
|
border-radius: inherit;
|
|
37
37
|
}
|
|
@@ -39,11 +39,9 @@
|
|
|
39
39
|
background-image: none;
|
|
40
40
|
}
|
|
41
41
|
.np-table-inner-container {
|
|
42
|
-
background-image: linear-gradient(to right, #ffffff, #ffffff), linear-gradient(to right, #ffffff, #ffffff), linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0)), linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0));
|
|
43
42
|
background-image: linear-gradient(to right, var(--color-contrast-overlay), var(--color-contrast-overlay)), linear-gradient(to right, var(--color-contrast-overlay), var(--color-contrast-overlay)), linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0)), linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0));
|
|
44
43
|
background-position: left center, right center, left center, right center;
|
|
45
44
|
background-repeat: no-repeat;
|
|
46
|
-
background-color: #ffffff;
|
|
47
45
|
background-color: var(--color-contrast-overlay);
|
|
48
46
|
background-size: 15px 100%, 15px 100%, 15px 100%, 15px 100%;
|
|
49
47
|
background-attachment: local, local, scroll, scroll;
|
|
@@ -51,7 +49,6 @@
|
|
|
51
49
|
border-radius: 10px;
|
|
52
50
|
}
|
|
53
51
|
.np-theme-personal--dark .np-table-inner-container {
|
|
54
|
-
background-image: linear-gradient(to right, #ffffff, #ffffff), linear-gradient(to right, #ffffff, #ffffff), linear-gradient(to right, #000000, rgba(0, 0, 0, 0)), linear-gradient(to left, #000000, rgba(0, 0, 0, 0));
|
|
55
52
|
background-image: linear-gradient(to right, var(--color-contrast-overlay), var(--color-contrast-overlay)), linear-gradient(to right, var(--color-contrast-overlay), var(--color-contrast-overlay)), linear-gradient(to right, #000000, rgba(0, 0, 0, 0)), linear-gradient(to left, #000000, rgba(0, 0, 0, 0));
|
|
56
53
|
}
|
|
57
54
|
.np-table-row:last-child .np-table-cell:first-child {
|
|
@@ -82,7 +79,6 @@
|
|
|
82
79
|
width: 100%;
|
|
83
80
|
top: 0;
|
|
84
81
|
left: 0;
|
|
85
|
-
background-color: rgba(22,51,0,0.07843);
|
|
86
82
|
background-color: var(--color-background-screen-hover);
|
|
87
83
|
}
|
|
88
84
|
.np-table-row--clickable .np-table-cell:first-child:before,
|
|
@@ -168,9 +164,8 @@
|
|
|
168
164
|
padding-bottom: var(--size-8);
|
|
169
165
|
padding-left: 8px;
|
|
170
166
|
padding-left: var(--size-8);
|
|
171
|
-
background-color: rgba(
|
|
167
|
+
background-color: rgba(134,167,189,0.10196);
|
|
172
168
|
background-color: var(--color-background-neutral);
|
|
173
|
-
color: #163300;
|
|
174
169
|
color: var(--color-interactive-primary);
|
|
175
170
|
}
|
|
176
171
|
.np-table-header-content {
|
|
@@ -183,7 +178,6 @@
|
|
|
183
178
|
letter-spacing: var(--letter-spacing-sm);
|
|
184
179
|
}
|
|
185
180
|
.np-table-header--error {
|
|
186
|
-
color: #cb272f;
|
|
187
181
|
color: var(--color-sentiment-negative);
|
|
188
182
|
}
|
|
189
183
|
.np-table-header--action {
|
|
@@ -214,23 +208,21 @@
|
|
|
214
208
|
margin-bottom: 4px;
|
|
215
209
|
margin-bottom: var(--size-4);
|
|
216
210
|
height: 1px;
|
|
217
|
-
background-color: rgba(
|
|
211
|
+
background-color: rgba(134,167,189,0.10196);
|
|
218
212
|
background-color: var(--color-background-neutral);
|
|
219
213
|
padding: 0;
|
|
220
214
|
}
|
|
221
215
|
.np-table-cell .np-text-body-default-bold {
|
|
222
216
|
display: flex;
|
|
223
217
|
align-items: center;
|
|
224
|
-
color: #
|
|
218
|
+
color: #37517e;
|
|
225
219
|
color: var(--color-content-primary);
|
|
226
220
|
white-space: nowrap;
|
|
227
221
|
}
|
|
228
222
|
.np-table-cell .np-table-content--success {
|
|
229
|
-
color: #054d28;
|
|
230
223
|
color: var(--color-sentiment-positive);
|
|
231
224
|
}
|
|
232
225
|
.np-table-cell .np-table-content--error {
|
|
233
|
-
color: #cb272f;
|
|
234
226
|
color: var(--color-sentiment-negative);
|
|
235
227
|
}
|
|
236
228
|
.np-table-cell .tw-loader {
|
|
@@ -263,7 +255,7 @@
|
|
|
263
255
|
flex-direction: column;
|
|
264
256
|
font-size: 0.75rem;
|
|
265
257
|
font-size: var(--font-size-12);
|
|
266
|
-
color: #
|
|
258
|
+
color: #768e9c;
|
|
267
259
|
color: var(--color-content-tertiary);
|
|
268
260
|
}
|
|
269
261
|
.np-table-content--reversed {
|
|
@@ -8,23 +8,23 @@
|
|
|
8
8
|
padding: 8px;
|
|
9
9
|
padding: var(--size-8);
|
|
10
10
|
margin-bottom: -2px;
|
|
11
|
-
color: #
|
|
11
|
+
color: #37517e;
|
|
12
12
|
color: var(--color-content-primary);
|
|
13
13
|
font-weight: 600;
|
|
14
14
|
font-weight: var(--font-weight-semi-bold);
|
|
15
15
|
transition: color 0.15s ease-in-out;
|
|
16
16
|
}
|
|
17
17
|
.np-theme-personal .tabs__tab {
|
|
18
|
-
color: #
|
|
18
|
+
color: #5d7079;
|
|
19
19
|
color: var(--color-content-secondary);
|
|
20
20
|
font-weight: 400;
|
|
21
21
|
font-weight: var(--font-weight-regular);
|
|
22
22
|
}
|
|
23
23
|
.tabs__tab--selected {
|
|
24
|
+
color: #0097c7;
|
|
24
25
|
color: var(--color-content-accent);
|
|
25
26
|
}
|
|
26
27
|
.np-theme-personal .tabs__tab--selected {
|
|
27
|
-
color: #163300;
|
|
28
28
|
color: var(--color-interactive-primary);
|
|
29
29
|
font-weight: 600;
|
|
30
30
|
font-weight: var(--font-weight-semi-bold);
|
|
@@ -33,29 +33,29 @@
|
|
|
33
33
|
border-radius: 2px;
|
|
34
34
|
}
|
|
35
35
|
.tabs__tab:not(.disabled):not(:disabled):focus-visible .tabs__tab__content {
|
|
36
|
+
color: #0084b3;
|
|
36
37
|
color: var(--color-content-accent-hover);
|
|
37
38
|
}
|
|
38
39
|
.np-theme-personal .tabs__tab:not(.disabled):not(:disabled):focus-visible .tabs__tab__content {
|
|
39
|
-
color: #0d1f00;
|
|
40
40
|
color: var(--color-interactive-primary-hover);
|
|
41
41
|
outline: var(--ring-outline-color) solid var(--ring-outline-width);
|
|
42
42
|
outline-offset: var(--ring-outline-offset);
|
|
43
43
|
}
|
|
44
44
|
@media (min-width: 992px) {
|
|
45
45
|
.tabs__tab:not(.disabled):not(:disabled):hover {
|
|
46
|
+
color: #0084b3;
|
|
46
47
|
color: var(--color-content-accent-hover);
|
|
47
48
|
}
|
|
48
49
|
.np-theme-personal .tabs__tab:not(.disabled):not(:disabled):hover {
|
|
49
|
-
color: #0d1f00;
|
|
50
50
|
color: var(--color-interactive-primary-hover);
|
|
51
51
|
}
|
|
52
52
|
}
|
|
53
53
|
@media (hover: hover) {
|
|
54
54
|
.tabs__tab:not(.disabled):not(:disabled):hover {
|
|
55
|
+
color: #0084b3;
|
|
55
56
|
color: var(--color-content-accent-hover);
|
|
56
57
|
}
|
|
57
58
|
.np-theme-personal .tabs__tab:not(.disabled):not(:disabled):hover {
|
|
58
|
-
color: #0d1f00;
|
|
59
59
|
color: var(--color-interactive-primary-hover);
|
|
60
60
|
}
|
|
61
61
|
}
|
|
@@ -63,19 +63,18 @@
|
|
|
63
63
|
list-style: none;
|
|
64
64
|
padding: 0;
|
|
65
65
|
margin: 0;
|
|
66
|
-
border-bottom: 1px solid rgba(
|
|
66
|
+
border-bottom: 1px solid rgba(0,0,0,0.10196);
|
|
67
67
|
border-bottom: 1px solid var(--color-border-neutral);
|
|
68
68
|
}
|
|
69
69
|
.tabs__line {
|
|
70
70
|
height: 2px;
|
|
71
|
-
background-color: #
|
|
71
|
+
background-color: #00a2dd;
|
|
72
72
|
background-color: var(--color-interactive-accent);
|
|
73
73
|
transition: transform cubic-bezier(0, 0.94, 0.62, 1) 350ms;
|
|
74
74
|
position: relative;
|
|
75
75
|
bottom: -1px;
|
|
76
76
|
}
|
|
77
77
|
.np-theme-personal .tabs__line {
|
|
78
|
-
background-color: #163300;
|
|
79
78
|
background-color: var(--color-interactive-primary);
|
|
80
79
|
}
|
|
81
80
|
.tabs__panel-container {
|
|
@@ -98,7 +97,7 @@
|
|
|
98
97
|
opacity: 0;
|
|
99
98
|
}
|
|
100
99
|
.tabs--inverse .tabs__tab-list {
|
|
101
|
-
border-bottom-color: rgba(
|
|
100
|
+
border-bottom-color: rgba(0,0,0,0.10196);
|
|
102
101
|
border-bottom-color: var(--color-border-neutral);
|
|
103
102
|
}
|
|
104
103
|
.tabs--inverse .tabs__tab:not(.tabs__tab--selected) {
|
|
@@ -5,31 +5,28 @@
|
|
|
5
5
|
width: 100%;
|
|
6
6
|
}
|
|
7
7
|
.np-theme-personal .np-tile {
|
|
8
|
-
background-color: rgba(
|
|
8
|
+
background-color: rgba(134,167,189,0.10196);
|
|
9
9
|
background-color: var(--color-background-neutral);
|
|
10
10
|
}
|
|
11
11
|
.np-theme-personal .np-tile .tw-avatar .tw-avatar__content {
|
|
12
|
-
background-color: #ffffff;
|
|
13
12
|
background-color: var(--color-contrast);
|
|
14
13
|
}
|
|
15
14
|
.np-tile.decision {
|
|
16
15
|
margin-top: 0;
|
|
17
|
-
border: 1px solid rgba(
|
|
16
|
+
border: 1px solid rgba(0,0,0,0.10196);
|
|
18
17
|
border: 1px solid var(--color-border-neutral);
|
|
19
18
|
}
|
|
20
19
|
.np-theme-personal .np-tile.decision {
|
|
21
20
|
border: none;
|
|
22
21
|
}
|
|
23
22
|
.np-theme-personal .np-tile.decision:hover {
|
|
24
|
-
background-color: rgba(22,51,0,0.12941);
|
|
25
23
|
background-color: var(--color-background-neutral-hover);
|
|
26
24
|
}
|
|
27
25
|
.np-theme-personal .np-tile.decision:active {
|
|
28
|
-
background-color: rgba(22,51,0,0.18039);
|
|
29
26
|
background-color: var(--color-background-neutral-active);
|
|
30
27
|
}
|
|
31
28
|
.np-theme-personal .np-tile.decision .np-text-body-default {
|
|
32
|
-
color: #
|
|
29
|
+
color: #5d7079;
|
|
33
30
|
color: var(--color-content-secondary);
|
|
34
31
|
}
|
|
35
32
|
.np-tile.np-decision__tile--fixed-width {
|
|
@@ -39,7 +36,7 @@
|
|
|
39
36
|
width: 100%;
|
|
40
37
|
}
|
|
41
38
|
.np-tile__description {
|
|
42
|
-
color: #
|
|
39
|
+
color: #5d7079;
|
|
43
40
|
color: var(--color-content-secondary);
|
|
44
41
|
margin-top: 12px;
|
|
45
42
|
margin-top: var(--size-12);
|
|
@@ -60,7 +57,7 @@
|
|
|
60
57
|
background-color: var(--color-background-screen);
|
|
61
58
|
}
|
|
62
59
|
.np-tile__description {
|
|
63
|
-
color: #
|
|
60
|
+
color: #5d7079;
|
|
64
61
|
color: var(--color-content-secondary);
|
|
65
62
|
font-weight: 400;
|
|
66
63
|
font-weight: var(--font-weight-regular);
|
|
@@ -162,11 +162,10 @@
|
|
|
162
162
|
}
|
|
163
163
|
}
|
|
164
164
|
.np-theme-personal .typeahead .input-group:not(.disabled):not(:disabled):not(.input-group--has-error):focus-within .tw-icon-search {
|
|
165
|
-
color: #163300;
|
|
166
165
|
color: var(--color-interactive-primary);
|
|
167
166
|
}
|
|
168
167
|
.np-theme-personal .typeahead .tw-icon-search {
|
|
169
|
-
color: #
|
|
168
|
+
color: #c9cbce;
|
|
170
169
|
color: var(--color-interactive-secondary);
|
|
171
170
|
}
|
|
172
171
|
.np-theme-personal .typeahead .np-chip {
|
|
@@ -1,5 +1,8 @@
|
|
|
1
|
+
.typeahead__option.tw-dropdown-item .dropdown-item:active strong {
|
|
2
|
+
color: #ffffff;
|
|
3
|
+
}
|
|
1
4
|
.typeahead__option.tw-dropdown-item--focused {
|
|
2
|
-
box-shadow: inset 0 0 0 1px #
|
|
5
|
+
box-shadow: inset 0 0 0 1px #c9cbce;
|
|
3
6
|
box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
|
|
4
7
|
border-radius: 10px;
|
|
5
8
|
border-radius: var(--radius-small);
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
.upload-error-message {
|
|
23
23
|
margin-top: 24px;
|
|
24
24
|
margin-top: var(--padding-medium);
|
|
25
|
-
border-top: 1px solid rgba(
|
|
25
|
+
border-top: 1px solid rgba(0,0,0,0.10196);
|
|
26
26
|
border-top: 1px solid var(--color-border-neutral);
|
|
27
27
|
text-align: start;
|
|
28
28
|
}
|
|
@@ -13,7 +13,6 @@
|
|
|
13
13
|
cursor: pointer;
|
|
14
14
|
}
|
|
15
15
|
.np-upload-input__upload-button .np-upload-input__title {
|
|
16
|
-
color: #163300;
|
|
17
16
|
color: var(--color-content-link);
|
|
18
17
|
-webkit-text-decoration: underline;
|
|
19
18
|
text-decoration: underline;
|
|
@@ -26,7 +25,6 @@
|
|
|
26
25
|
.np-upload-input__upload-button .np-upload-input__icon {
|
|
27
26
|
padding-right: 16px;
|
|
28
27
|
padding-right: var(--size-16);
|
|
29
|
-
color: #163300;
|
|
30
28
|
color: var(--color-interactive-primary);
|
|
31
29
|
}
|
|
32
30
|
.np-upload-input__upload-button.is-dropping .np-upload-input__icon,
|
|
@@ -61,7 +59,7 @@
|
|
|
61
59
|
display: block;
|
|
62
60
|
position: absolute;
|
|
63
61
|
height: 1px;
|
|
64
|
-
background-color: rgba(
|
|
62
|
+
background-color: rgba(0,0,0,0.10196);
|
|
65
63
|
background-color: var(--color-border-neutral);
|
|
66
64
|
content: " ";
|
|
67
65
|
left: 16px;
|
|
@@ -78,7 +76,7 @@
|
|
|
78
76
|
.np-upload-input__upload-button--enabled.is-dropping,
|
|
79
77
|
.np-upload-input__upload-button--enabled:hover,
|
|
80
78
|
.np-upload-input__upload-button--enabled:active {
|
|
81
|
-
background: rgba(
|
|
79
|
+
background: rgba(134,167,189,0.10196);
|
|
82
80
|
background: var(--color-background-neutral);
|
|
83
81
|
}
|
|
84
82
|
.np-upload-input__upload-button--enabled.is-dropping:before,
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
width: calc(100% - 2 * 16px);
|
|
25
25
|
width: calc(100% - 2 * var(--size-16));
|
|
26
26
|
top: 0;
|
|
27
|
-
background: rgba(
|
|
27
|
+
background: rgba(0,0,0,0.10196);
|
|
28
28
|
background: var(--color-border-neutral);
|
|
29
29
|
}
|
|
30
30
|
.np-upload-input__item .np-upload-input__item-content {
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
margin: 0;
|
|
44
44
|
-moz-text-align-last: left;
|
|
45
45
|
text-align-last: left;
|
|
46
|
-
color: #
|
|
46
|
+
color: #5d7079;
|
|
47
47
|
color: var(--color-content-secondary);
|
|
48
48
|
}
|
|
49
49
|
.np-upload-input__item .np-upload-input__title + .np-upload-input__text {
|
|
@@ -87,9 +87,8 @@
|
|
|
87
87
|
padding: 0 var(--size-4);
|
|
88
88
|
border-radius: 50%;
|
|
89
89
|
border: 0;
|
|
90
|
-
background-color: rgba(
|
|
90
|
+
background-color: rgba(134,167,189,0.10196);
|
|
91
91
|
background-color: var(--color-background-neutral);
|
|
92
|
-
color: #163300;
|
|
93
92
|
color: var(--color-interactive-primary);
|
|
94
93
|
transition: color, background-color 0.15s ease-in-out;
|
|
95
94
|
outline-offset: 0;
|
|
@@ -108,13 +107,10 @@
|
|
|
108
107
|
right: var(--clickAreaTopRightOffset);
|
|
109
108
|
}
|
|
110
109
|
.np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button:hover {
|
|
111
|
-
background-color: #cb272f;
|
|
112
110
|
background-color: var(--color-sentiment-negative);
|
|
113
|
-
color: #ffffff !important;
|
|
114
111
|
color: var(--color-contrast-overlay) !important;
|
|
115
112
|
}
|
|
116
113
|
.np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button:active {
|
|
117
|
-
background-color: rgba(22,51,0,0.18039);
|
|
118
114
|
background-color: var(--color-background-neutral-active);
|
|
119
115
|
}
|
|
120
116
|
.np-upload-input__item.is-interactive {
|
|
@@ -140,7 +136,7 @@
|
|
|
140
136
|
}
|
|
141
137
|
.np-upload-input__item.is-interactive .np-upload-input__item-link:hover,
|
|
142
138
|
.np-upload-input__item.is-interactive .np-upload-input__item-link:active {
|
|
143
|
-
background-color: rgba(
|
|
139
|
+
background-color: rgba(134,167,189,0.10196);
|
|
144
140
|
background-color: var(--color-background-neutral);
|
|
145
141
|
}
|
|
146
142
|
.np-upload-input__item.is-interactive:first-child .np-upload-input__item-link {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/drawer/Drawer.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAqB,MAAM,OAAO,CAAC;AAE1D,OAAO,EAAE,QAAQ,EAAc,MAAM,WAAW,CAAC;
|
|
1
|
+
{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/drawer/Drawer.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAqB,MAAM,OAAO,CAAC;AAE1D,OAAO,EAAE,QAAQ,EAAc,MAAM,WAAW,CAAC;AAYjD,MAAM,MAAM,WAAW,GAAG;IACxB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kDAAkD;IAClD,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,kDAAkD;IAClD,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,+CAA+C;IAC/C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,uGAAuG;IACvG,QAAQ,CAAC,EAAE,GAAG,QAAQ,CAAC,IAAI,GAAG,QAAQ,CAAC,KAAK,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC;IACjE,4CAA4C;IAC5C,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,GAAG,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5D,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,MAAM,GAAG,iBAAiB,CAAC,CAAC;AAErE,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC7B,QAAQ,EACR,SAAS,EACT,aAAa,EACb,WAAW,EACX,OAAO,EACP,SAAS,EACT,IAAY,EACZ,QAAkB,EAClB,IAAe,EACf,iBAAiB,EAAE,cAAc,GAClC,EAAE,WAAW,+BAuDb"}
|
package/build/types/mocks.d.ts
CHANGED
|
@@ -5,5 +5,6 @@ interface GlobalMockParams {
|
|
|
5
5
|
}
|
|
6
6
|
export declare function mockMatchMedia({ fn, stubGlobal }: GlobalMockParams): void;
|
|
7
7
|
export declare function mockResizeObserver({ fn, stubGlobal }: GlobalMockParams): void;
|
|
8
|
+
export declare function mockRequestAnimationFrame(): void;
|
|
8
9
|
export {};
|
|
9
10
|
//# sourceMappingURL=mocks.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mocks.d.ts","sourceRoot":"","sources":["../../src/mocks.ts"],"names":[],"mappings":"AAAA,KAAK,UAAU,GAAG,CAAC,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;AAE9D,UAAU,gBAAgB;IACxB,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,KAAK,EAAE,KAAK,OAAO,EAAE,cAAc,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;IACvE,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB;AAWD,wBAAgB,cAAc,CAAC,EAAE,EAAE,EAAE,UAA8B,EAAE,EAAE,gBAAgB,QAkBtF;AAED,wBAAgB,kBAAkB,CAAC,EAAE,EAAE,EAAE,UAA8B,EAAE,EAAE,gBAAgB,QAW1F"}
|
|
1
|
+
{"version":3,"file":"mocks.d.ts","sourceRoot":"","sources":["../../src/mocks.ts"],"names":[],"mappings":"AAAA,KAAK,UAAU,GAAG,CAAC,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;AAE9D,UAAU,gBAAgB;IACxB,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,KAAK,EAAE,KAAK,OAAO,EAAE,cAAc,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;IACvE,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB;AAWD,wBAAgB,cAAc,CAAC,EAAE,EAAE,EAAE,UAA8B,EAAE,EAAE,gBAAgB,QAkBtF;AAED,wBAAgB,kBAAkB,CAAC,EAAE,EAAE,EAAE,UAA8B,EAAE,EAAE,gBAAgB,QAW1F;AAED,wBAAgB,yBAAyB,SAKxC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/modal/Modal.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAA6B,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/modal/Modal.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAA6B,MAAM,OAAO,CAAC;AAI7D,OAAO,EAGL,WAAW,EACX,cAAc,EAEd,WAAW,EACX,SAAS,EACT,UAAU,EACV,SAAS,EACT,cAAc,EACd,aAAa,EACb,cAAc,EAEf,MAAM,WAAW,CAAC;AAYnB,MAAM,MAAM,UAAU,GAAG,WAAW,GAAG;IACrC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,IAAI,EAAE,SAAS,CAAC;IAChB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,cAAc,CAAC;IAC3D,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,CAAC,EAAE,aAAa,GAAG,cAAc,CAAC;IACxC,QAAQ,CAAC,EAAE,WAAW,GAAG,cAAc,CAAC;IACxC,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC,CAAC;AAEF,QAAA,MAAM,KAAK,GAAI,gIAaZ,UAAU,gCA+GZ,CAAC;AAEF,eAAe,KAAK,CAAC"}
|
|
@@ -59,6 +59,6 @@ export interface SelectProps {
|
|
|
59
59
|
/**
|
|
60
60
|
* @deprecated Use `SelectInput` instead (https://neptune.wise.design/blog/2023-11-28-adopting-our-new-selectinput)
|
|
61
61
|
*/
|
|
62
|
-
export default function Select({ placeholder, id, required, disabled, dropdownWidth, size, block, selected, search, onChange, onFocus, onBlur, options: defaultOptions, onSearchChange, searchValue: initSearchValue, searchPlaceholder, classNames: classNamesProp, dropdownUp, dropdownProps, buttonProps, }: SelectProps): import("react").JSX.Element;
|
|
62
|
+
export default function Select({ placeholder, id, required, disabled, inverse, dropdownWidth, size, block, selected, search, onChange, onFocus, onBlur, options: defaultOptions, onSearchChange, searchValue: initSearchValue, searchPlaceholder, classNames: classNamesProp, dropdownUp, dropdownProps, buttonProps, }: SelectProps): import("react").JSX.Element;
|
|
63
63
|
export {};
|
|
64
64
|
//# sourceMappingURL=Select.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/select/Select.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/select/Select.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { SentimentSurfaceComponent } from './SentimentSurface.types';
|
|
2
|
+
/**
|
|
3
|
+
* SentimentSurface is a polymorphic container component that applies contextual background colours
|
|
4
|
+
* and text styling based on sentiment types (negative, warning, neutral, success, proposition).
|
|
5
|
+
* It's designed to visually communicate the nature or importance of its content through colour.
|
|
6
|
+
*
|
|
7
|
+
* @param {ElementType} [as='div'] - Optional prop to override the HTML element rendered.
|
|
8
|
+
* @param {Sentiment} sentiment - Required prop to set the sentiment type (negative, warning, neutral, success, proposition).
|
|
9
|
+
* @param {Emphasis} [emphasis='base'] - Optional prop to specify the emphasis level (base or elevated).
|
|
10
|
+
* @param {ReactNode} [children] - Content to render inside the surface.
|
|
11
|
+
* @param {string} [className] - Additional CSS classes to apply.
|
|
12
|
+
* @param {CSSProperties} [style] - Inline styles to apply.
|
|
13
|
+
* @param {string} [id] - Unique identifier for the component.
|
|
14
|
+
* @param {string} [testId] - A unique string that appears as data attribute `data-testid` in the rendered code.
|
|
15
|
+
*
|
|
16
|
+
* @component
|
|
17
|
+
* @example
|
|
18
|
+
* ```tsx
|
|
19
|
+
* // Basic usage with negative sentiment
|
|
20
|
+
* <SentimentSurface sentiment="negative">
|
|
21
|
+
* Your payment has failed
|
|
22
|
+
* </SentimentSurface>
|
|
23
|
+
* ```
|
|
24
|
+
*
|
|
25
|
+
* @see {@link SentimentSurface} for further information.
|
|
26
|
+
* @see {@link https://storybook.wise.design/?path=/docs/sentiment-surface--docs|Storybook Wise Design}
|
|
27
|
+
*/
|
|
28
|
+
declare const SentimentSurface: SentimentSurfaceComponent;
|
|
29
|
+
export default SentimentSurface;
|
|
30
|
+
//# sourceMappingURL=SentimentSurface.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SentimentSurface.d.ts","sourceRoot":"","sources":["../../../src/sentimentSurface/SentimentSurface.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,yBAAyB,EAC1B,MAAM,0BAA0B,CAAC;AAGlC;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,QAAA,MAAM,gBAAgB,EAAE,yBA+BtB,CAAC;AAIH,eAAe,gBAAgB,CAAC"}
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
import { ReactNode, ElementType, CSSProperties, ComponentPropsWithoutRef, HTMLAttributes } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Sentiment types for the SentimentSurface component
|
|
4
|
+
*/
|
|
5
|
+
export type Sentiment = 'negative' | 'warning' | 'neutral' | 'success' | 'proposition';
|
|
6
|
+
/**
|
|
7
|
+
* Emphasis levels for the SentimentSurface component
|
|
8
|
+
*/
|
|
9
|
+
export type Emphasis = 'base' | 'elevated';
|
|
10
|
+
/**
|
|
11
|
+
* Common properties for the SentimentSurface component
|
|
12
|
+
*/
|
|
13
|
+
export interface CommonProps {
|
|
14
|
+
/**
|
|
15
|
+
* The sentiment type that determines the colour scheme
|
|
16
|
+
*/
|
|
17
|
+
sentiment: Sentiment;
|
|
18
|
+
/**
|
|
19
|
+
* The emphasis level affecting background and text contrast
|
|
20
|
+
* @default 'base'
|
|
21
|
+
*/
|
|
22
|
+
emphasis?: Emphasis;
|
|
23
|
+
/**
|
|
24
|
+
* Content to render inside the surface
|
|
25
|
+
*/
|
|
26
|
+
children?: ReactNode;
|
|
27
|
+
/**
|
|
28
|
+
* Additional CSS classes
|
|
29
|
+
*/
|
|
30
|
+
className?: string;
|
|
31
|
+
/**
|
|
32
|
+
* Inline styles
|
|
33
|
+
*/
|
|
34
|
+
style?: CSSProperties;
|
|
35
|
+
/**
|
|
36
|
+
* Unique identifier for the component
|
|
37
|
+
*/
|
|
38
|
+
id?: string;
|
|
39
|
+
/**
|
|
40
|
+
* A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests
|
|
41
|
+
*/
|
|
42
|
+
testId?: string;
|
|
43
|
+
/**
|
|
44
|
+
* `data-testid` is strictly controlled through the `testId` prop.
|
|
45
|
+
* This lets consumers know that this data attribute will not be applied.
|
|
46
|
+
*/
|
|
47
|
+
'data-testid'?: never;
|
|
48
|
+
}
|
|
49
|
+
/**
|
|
50
|
+
* Props when rendering as a div or custom element
|
|
51
|
+
*/
|
|
52
|
+
export type SentimentSurfaceDivProps<T extends ElementType = 'div'> = Omit<HTMLAttributes<HTMLDivElement>, keyof CommonProps> & CommonProps & {
|
|
53
|
+
/**
|
|
54
|
+
* The underlying HTML element to render
|
|
55
|
+
* @default 'div'
|
|
56
|
+
*/
|
|
57
|
+
as?: T;
|
|
58
|
+
};
|
|
59
|
+
/**
|
|
60
|
+
* All possible props for the SentimentSurface component
|
|
61
|
+
*/
|
|
62
|
+
export type SentimentSurfaceProps<T extends ElementType = 'div'> = SentimentSurfaceDivProps<T>;
|
|
63
|
+
/**
|
|
64
|
+
* Combines SentimentSurface props with all valid HTML attributes for the specified element type.
|
|
65
|
+
* Supports polymorphic rendering via the `as` prop while maintaining full type safety.
|
|
66
|
+
*
|
|
67
|
+
* @example
|
|
68
|
+
* <SentimentSurface sentiment="negative" role="alert" aria-live="polite">
|
|
69
|
+
* Error message
|
|
70
|
+
* </SentimentSurface>
|
|
71
|
+
*/
|
|
72
|
+
export type SentimentSurfaceComponentProps<T extends ElementType = 'div'> = SentimentSurfaceProps<T> & Omit<ComponentPropsWithoutRef<T>, keyof SentimentSurfaceProps<T>>;
|
|
73
|
+
/**
|
|
74
|
+
* The SentimentSurface component type signature
|
|
75
|
+
*/
|
|
76
|
+
export interface SentimentSurfaceComponent {
|
|
77
|
+
<T extends ElementType = 'div'>(props: SentimentSurfaceComponentProps<T>): ReactNode;
|
|
78
|
+
displayName?: string;
|
|
79
|
+
}
|
|
80
|
+
//# sourceMappingURL=SentimentSurface.types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SentimentSurface.types.d.ts","sourceRoot":"","sources":["../../../src/sentimentSurface/SentimentSurface.types.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,WAAW,EACX,aAAa,EACb,wBAAwB,EACxB,cAAc,EACf,MAAM,OAAO,CAAC;AAEf;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,aAAa,CAAC;AAEvF;;GAEG;AACH,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,UAAU,CAAC;AAE3C;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,SAAS,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAEpB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC;CACvB;AAED;;GAEG;AACH,MAAM,MAAM,wBAAwB,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IAAI,IAAI,CACxE,cAAc,CAAC,cAAc,CAAC,EAC9B,MAAM,WAAW,CAClB,GACC,WAAW,GAAG;IACZ;;;OAGG;IACH,EAAE,CAAC,EAAE,CAAC,CAAC;CACR,CAAC;AAEJ;;GAEG;AACH,MAAM,MAAM,qBAAqB,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IAAI,wBAAwB,CAAC,CAAC,CAAC,CAAC;AAE/F;;;;;;;;GAQG;AACH,MAAM,MAAM,8BAA8B,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IACtE,qBAAqB,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,MAAM,qBAAqB,CAAC,CAAC,CAAC,CAAC,CAAC;AAE/F;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACxC,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,EAAE,KAAK,EAAE,8BAA8B,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC;IACrF,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB"}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import type { Sentiment, Emphasis } from './SentimentSurface.types';
|
|
2
|
+
export declare const sentimentClassMap: Record<Sentiment, string>;
|
|
3
|
+
export declare const getSentimentSurfaceClassName: (sentiment: Sentiment, emphasis: Emphasis) => string;
|
|
4
|
+
//# sourceMappingURL=classMap.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"classMap.d.ts","sourceRoot":"","sources":["../../../src/sentimentSurface/classMap.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAIpE,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAMvD,CAAC;AAEF,eAAO,MAAM,4BAA4B,GAAI,WAAW,SAAS,EAAE,UAAU,QAAQ,KAAG,MAEvF,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/sentimentSurface/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,YAAY,EACV,yBAAyB,EACzB,qBAAqB,EACrB,WAAW,EACX,SAAS,EACT,QAAQ,GACT,MAAM,0BAA0B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StatusIcon.d.ts","sourceRoot":"","sources":["../../../src/statusIcon/StatusIcon.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAoB,MAAM,EAAE,MAAM,WAAW,CAAC;
|
|
1
|
+
{"version":3,"file":"StatusIcon.d.ts","sourceRoot":"","sources":["../../../src/statusIcon/StatusIcon.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAoB,MAAM,EAAE,MAAM,WAAW,CAAC;AAOlG;;GAEG;AACH,KAAK,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;AAEtD,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,MAAM,CAAC,OAAO,CAAC;AAE7D,MAAM,MAAM,eAAe,GAAG;IAC5B,SAAS,CAAC,EAAE,GAAG,mBAAmB,EAAE,CAAC;IACrC,IAAI,CAAC,EAAE,WAAW,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IACtD;;;;SAIK;IACL,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B,CAAC;AAQF,QAAA,MAAM,UAAU,GAAI,0CAA2D,eAAe,gCAsE7F,CAAC;AAEF,eAAe,UAAU,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"window-mock.d.ts","sourceRoot":"","sources":["../../../src/test-utils/window-mock.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"window-mock.d.ts","sourceRoot":"","sources":["../../../src/test-utils/window-mock.ts"],"names":[],"mappings":"AAMA,wBAAgB,cAAc,SAE7B;AAED,wBAAgB,kBAAkB,SAIjC;AAED,wBAAgB,yBAAyB,SAExC"}
|
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-2b5b7ab",
|
|
4
4
|
"description": "Neptune React components",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -83,15 +83,14 @@
|
|
|
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
|
-
"framer-motion": "^12.23.22",
|
|
87
86
|
"@transferwise/less-config": "3.1.2",
|
|
88
|
-
"@transferwise/neptune-css": "
|
|
89
|
-
"@wise/components-theming": "1.
|
|
87
|
+
"@transferwise/neptune-css": "14.25.2",
|
|
88
|
+
"@wise/components-theming": "1.9.0",
|
|
90
89
|
"@wise/wds-configs": "0.0.0"
|
|
91
90
|
},
|
|
92
91
|
"peerDependencies": {
|
|
93
92
|
"@transferwise/icons": "^3 || ^4",
|
|
94
|
-
"@transferwise/neptune-css": "
|
|
93
|
+
"@transferwise/neptune-css": "^14.24",
|
|
95
94
|
"@wise/art": "^2.24.4",
|
|
96
95
|
"@wise/components-theming": "^1.6.2",
|
|
97
96
|
"react": ">=18",
|
|
@@ -99,11 +98,6 @@
|
|
|
99
98
|
"react-intl": "^5.10.0 || ^6 || ^7",
|
|
100
99
|
"framer-motion": "^12.23.22"
|
|
101
100
|
},
|
|
102
|
-
"peerDependenciesMeta": {
|
|
103
|
-
"framer-motion": {
|
|
104
|
-
"optional": true
|
|
105
|
-
}
|
|
106
|
-
},
|
|
107
101
|
"dependencies": {
|
|
108
102
|
"@babel/runtime": "^7.28.3",
|
|
109
103
|
"@floating-ui/react": "^0.27.16",
|
|
@@ -117,6 +111,7 @@
|
|
|
117
111
|
"clsx": "^2.1.1",
|
|
118
112
|
"commonmark": "^0.31.2",
|
|
119
113
|
"core-js": "^3.45.1",
|
|
114
|
+
"framer-motion": "^12.23.22",
|
|
120
115
|
"lodash.clamp": "^4.0.3",
|
|
121
116
|
"lodash.debounce": "^4.0.8",
|
|
122
117
|
"merge-props": "^6.0.0",
|
|
@@ -8,10 +8,14 @@
|
|
|
8
8
|
.np-accordion-item .decision:not(.disabled):not(:disabled):hover {
|
|
9
9
|
background-color: transparent;
|
|
10
10
|
}
|
|
11
|
+
.np-accordion-item.np-accordion-item--dark .media-body,
|
|
12
|
+
.np-accordion-item.np-accordion-item--dark .np-text-title-body {
|
|
13
|
+
color: #ffffff;
|
|
14
|
+
}
|
|
11
15
|
.np-accordion-item__content {
|
|
12
16
|
padding: 0 12px 24px 12px;
|
|
13
17
|
padding: 0 var(--size-12) var(--size-24) var(--size-12);
|
|
14
|
-
border-bottom: 1px solid rgba(
|
|
18
|
+
border-bottom: 1px solid rgba(0,0,0,0.10196);
|
|
15
19
|
border-bottom: 1px solid var(--color-border-neutral);
|
|
16
20
|
}
|
|
17
21
|
@media (min-width: 480px) {
|
|
@@ -65,6 +69,6 @@
|
|
|
65
69
|
padding: 0 56px 16px 16px;
|
|
66
70
|
padding: 0 var(--size-56) var(--size-16) var(--size-16);
|
|
67
71
|
border-bottom: none;
|
|
68
|
-
color: #
|
|
72
|
+
color: #5d7079;
|
|
69
73
|
color: var(--color-content-secondary);
|
|
70
74
|
}
|
|
@@ -16,6 +16,13 @@
|
|
|
16
16
|
background-color: transparent;
|
|
17
17
|
}
|
|
18
18
|
|
|
19
|
+
&.np-accordion-item--dark {
|
|
20
|
+
.media-body,
|
|
21
|
+
.np-text-title-body {
|
|
22
|
+
color: @color-navy-content-primary;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
|
|
19
26
|
&__content {
|
|
20
27
|
padding: 0 var(--size-12) var(--size-24) var(--size-12);
|
|
21
28
|
border-bottom: 1px solid var(--color-border-neutral);
|