@transferwise/components 37.0.1-beta.11 → 37.0.1-beta.25
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/CHANGELOG.md +175 -0
- package/build/es/no-polyfill/dateInput/DateInput.js +3 -3
- package/build/es/no-polyfill/dateInput/DateInput.messages.js +1 -0
- package/build/es/no-polyfill/dimmer/Dimmer.js +2 -2
- package/build/es/no-polyfill/drawer/Drawer.js +1 -1
- package/build/es/no-polyfill/i18n/en.json +3 -2
- package/build/es/no-polyfill/link/Link.js +3 -9
- package/build/es/no-polyfill/link/Link.spec.js +1 -0
- package/build/es/no-polyfill/link/Link.story.js +1 -0
- package/build/es/no-polyfill/modal/Modal.js +1 -1
- package/build/es/no-polyfill/nudge/Nudge.js +1 -1
- package/build/es/no-polyfill/stepper/deviceDetection.js +2 -1
- package/build/es/no-polyfill/switch/Switch.js +1 -1
- package/build/es/no-polyfill/switch/Switch.story.js +1 -1
- package/build/es/no-polyfill/tabs/Tabs.js +1 -1
- package/build/es/no-polyfill/upload/Upload.js +1 -1
- package/build/es/no-polyfill/upload/steps/completeStep/completeStep.js +1 -1
- package/build/es/no-polyfill/upload/steps/processingStep/processingStep.js +1 -1
- package/build/es/no-polyfill/upload/utils/index.js +1 -1
- package/build/es/no-polyfill/withNextPortal/withNextPortal.js +1 -1
- package/build/es/polyfill/dateInput/DateInput.js +3 -3
- package/build/es/polyfill/dateInput/DateInput.messages.js +1 -0
- package/build/es/polyfill/dimmer/Dimmer.js +2 -2
- package/build/es/polyfill/drawer/Drawer.js +1 -1
- package/build/es/polyfill/i18n/en.json +3 -2
- package/build/es/polyfill/link/Link.js +3 -9
- package/build/es/polyfill/link/Link.spec.js +1 -0
- package/build/es/polyfill/link/Link.story.js +1 -0
- package/build/es/polyfill/modal/Modal.js +1 -1
- package/build/es/polyfill/nudge/Nudge.js +1 -1
- package/build/es/polyfill/stepper/deviceDetection.js +2 -1
- package/build/es/polyfill/switch/Switch.js +1 -1
- package/build/es/polyfill/switch/Switch.story.js +1 -1
- package/build/es/polyfill/tabs/Tabs.js +1 -1
- package/build/es/polyfill/upload/Upload.js +1 -1
- package/build/es/polyfill/upload/steps/completeStep/completeStep.js +1 -1
- package/build/es/polyfill/upload/steps/processingStep/processingStep.js +1 -1
- package/build/es/polyfill/upload/utils/index.js +1 -1
- package/build/es/polyfill/withNextPortal/withNextPortal.js +1 -1
- package/build/i18n/en.json +3 -2
- package/build/main.css +1 -2929
- package/build/styles/accordion/Accordion.css +1 -40
- package/build/styles/actionOption/ActionOption.css +1 -3
- package/build/styles/avatar/Avatar.css +1 -166
- package/build/styles/badge/Badge.css +1 -59
- package/build/styles/button/Button.css +1 -14
- package/build/styles/card/Card.css +1 -33
- package/build/styles/checkboxButton/CheckboxButton.css +1 -19
- package/build/styles/chip/Chip.css +1 -23
- package/build/styles/circularButton/CircularButton.css +1 -124
- package/build/styles/common/Option/Option.css +1 -11
- package/build/styles/common/RadioButton/RadioButton.css +1 -8
- package/build/styles/common/bottomSheet/BottomSheet.css +1 -31
- package/build/styles/common/closeButton/CloseButton.css +1 -18
- package/build/styles/common/panel/Panel.css +1 -52
- package/build/styles/dateInput/DateInput.css +1 -3
- package/build/styles/dateLookup/DateLookup.css +1 -36
- package/build/styles/dateLookup/dateTrigger/DateTrigger.css +1 -23
- package/build/styles/decision/Decision.css +1 -33
- package/build/styles/definitionList/DefinitionList.css +1 -26
- package/build/styles/dimmer/Dimmer.css +1 -43
- package/build/styles/drawer/Drawer.css +1 -65
- package/build/styles/dynamicFieldDefinitionList/FormattedValue/FormattedValue.css +1 -5
- package/build/styles/emphasis/Emphasis.css +1 -21
- package/build/styles/flowNavigation/FlowNavigation.css +1 -75
- package/build/styles/flowNavigation/animatedLabel/AnimatedLabel.css +1 -27
- package/build/styles/flowNavigation/backButton/BackButton.css +1 -9
- package/build/styles/image/Image.css +1 -13
- package/build/styles/info/Info.css +1 -29
- package/build/styles/instructionsList/InstructionsList.css +1 -19
- package/build/styles/lab/mobileNav/MobileNav.css +1 -164
- package/build/styles/lab/pagination/Pagination.css +1 -51
- package/build/styles/link/Link.css +1 -4
- package/build/styles/loader/Loader.css +1 -580
- package/build/styles/logo/Logo.css +1 -4
- package/build/styles/main.css +1 -2929
- package/build/styles/modal/Modal.css +1 -159
- package/build/styles/moneyInput/MoneyInput.css +1 -50
- package/build/styles/navigationOption/NavigationOption.css +1 -23
- package/build/styles/navigationOptionsList/NavigationOptionsList.css +1 -8
- package/build/styles/nudge/Nudge.css +1 -16
- package/build/styles/overlayHeader/OverlayHeader.css +1 -12
- package/build/styles/phoneNumberInput/PhoneNumberInput.css +1 -23
- package/build/styles/popover/Popover.css +1 -62
- package/build/styles/slidingPanel/SlidingPanel.css +1 -58
- package/build/styles/snackbar/Snackbar.css +1 -75
- package/build/styles/stepper/Stepper.css +1 -93
- package/build/styles/summary/Summary.css +1 -46
- package/build/styles/switch/Switch.css +1 -45
- package/build/styles/tabs/Tabs.css +1 -80
- package/build/styles/tile/Tile.css +1 -53
- package/build/styles/tooltip/Tooltip.css +1 -28
- package/build/styles/typeahead/Typeahead.css +1 -142
- package/build/styles/typeahead/typeaheadOption/TypeaheadOption.css +1 -11
- package/build/styles/upload/Upload.css +1 -15
- package/build/styles/uploadInput/UploadInput.css +1 -6
- package/build/styles/uploadInput/uploadButton/UploadButton.css +1 -45
- package/build/styles/uploadInput/uploadItem/UploadItem.css +1 -48
- package/build/types/{link/Link.messages.d.ts → dateInput/DateInput.messages.d.ts} +8 -5
- package/build/types/link/Link.d.ts +1 -7
- package/build/types/link/Link.spec.d.ts +1 -0
- package/build/types/link/Link.story.d.ts +9 -0
- package/build/types/modal/Modal.d.ts +0 -1
- package/build/types/nudge/Nudge.d.ts +1 -0
- package/build/types/switch/Switch.story.d.ts +1 -0
- package/build/types/test-utils/index.d.ts +6 -4
- package/build/types/upload/Upload.d.ts +1 -1
- package/build/types/upload/utils/index.d.ts +0 -1
- package/build/types/withNextPortal/withNextPortal.d.ts +1 -2
- package/build/umd/no-polyfill/main.js +1 -1
- package/build/umd/polyfill/main.js +1 -1
- package/package.json +5 -5
- package/build/es/no-polyfill/link/Link.messages.js +0 -1
- package/build/es/no-polyfill/upload/utils/generateErrorMessage/generateErrorMessage.js +0 -1
- package/build/es/no-polyfill/upload/utils/generateErrorMessage/index.js +0 -1
- package/build/es/polyfill/link/Link.messages.js +0 -1
- package/build/es/polyfill/upload/utils/generateErrorMessage/generateErrorMessage.js +0 -1
- package/build/es/polyfill/upload/utils/generateErrorMessage/index.js +0 -1
- package/build/types/upload/utils/generateErrorMessage/generateErrorMessage.d.ts +0 -1
- package/build/types/upload/utils/generateErrorMessage/index.d.ts +0 -1
|
@@ -1,45 +1 @@
|
|
|
1
|
-
.np-switch {
|
|
2
|
-
display: inline-flex;
|
|
3
|
-
overflow: hidden;
|
|
4
|
-
width: 50px;
|
|
5
|
-
padding: 2px;
|
|
6
|
-
border: 1px solid #d3d5d8;
|
|
7
|
-
border-radius: 16px;
|
|
8
|
-
}
|
|
9
|
-
.np-switch--thumb {
|
|
10
|
-
display: flex;
|
|
11
|
-
transition: transform cubic-bezier(0, 0.94, 0.62, 1) 350ms;
|
|
12
|
-
}
|
|
13
|
-
.np-switch--thumb .tw-icon {
|
|
14
|
-
color: #ffffff;
|
|
15
|
-
color: var(--color-background-screen, #ffffff);
|
|
16
|
-
}
|
|
17
|
-
.np-switch--unchecked {
|
|
18
|
-
background: #d3d5d8;
|
|
19
|
-
}
|
|
20
|
-
.np-switch--unchecked .switch--thumb {
|
|
21
|
-
transform: translateX(0);
|
|
22
|
-
}
|
|
23
|
-
.np-switch--checked {
|
|
24
|
-
border: 1px solid #00a2dd;
|
|
25
|
-
border: 1px solid var(--color-interactive-accent, #00a2dd);
|
|
26
|
-
background: #00a2dd;
|
|
27
|
-
background: var(--color-interactive-accent, #00a2dd);
|
|
28
|
-
}
|
|
29
|
-
.np-switch--checked .np-switch--thumb {
|
|
30
|
-
transform: translateX(20px);
|
|
31
|
-
}
|
|
32
|
-
.np-switch--rtl.np-switch--checked .np-switch--thumb {
|
|
33
|
-
transform: translateX(-20px);
|
|
34
|
-
}
|
|
35
|
-
.np-switch input {
|
|
36
|
-
position: absolute;
|
|
37
|
-
left: -100%;
|
|
38
|
-
display: none;
|
|
39
|
-
width: 0;
|
|
40
|
-
height: 0;
|
|
41
|
-
opacity: 0;
|
|
42
|
-
}
|
|
43
|
-
.np-switch:not([aria-disabled]) {
|
|
44
|
-
cursor: pointer;
|
|
45
|
-
}
|
|
1
|
+
.np-switch{display:inline-flex;overflow:hidden;width:50px;padding:2px;border-radius:16px}.np-switch--thumb{display:flex;transition:transform .35s cubic-bezier(0,.94,.62,1)}.np-switch--thumb .tw-icon{color:#fff;color:var(--color-base-white-light,#fff)}.np-switch--unchecked{background:#c9cbce;background:var(--color-interactive-secondary,#c9cbce)}.np-switch--unchecked .switch--thumb{transform:translateX(0)}.np-switch--checked{background:#00a2dd;background:var(--color-interactive-accent,#00a2dd)}.np-switch--checked .np-switch--thumb{transform:translateX(20px)}.np-switch--rtl.np-switch--checked .np-switch--thumb{transform:translateX(-20px)}.np-switch--disabled{background:#a8aaac;background:var(--color-interactive-disabled,#a8aaac);cursor:not-allowed;border-color:#a8aaac;border-color:var(--color-interactive-disabled,#a8aaac)}.np-switch input{position:absolute;left:-100%;display:none;width:0;height:0;opacity:0}.np-switch:not([aria-disabled]){cursor:pointer}
|
|
@@ -1,80 +1 @@
|
|
|
1
|
-
.tabs {
|
|
2
|
-
position: relative;
|
|
3
|
-
}
|
|
4
|
-
.tabs__tab {
|
|
5
|
-
display: inline-block;
|
|
6
|
-
cursor: pointer;
|
|
7
|
-
outline: none;
|
|
8
|
-
text-align: center;
|
|
9
|
-
padding: 8px;
|
|
10
|
-
padding: var(--size-8, 8px);
|
|
11
|
-
margin-bottom: -3px;
|
|
12
|
-
color: #86a7bd1a;
|
|
13
|
-
color: var(--color-background-neutral, #86a7bd1a);
|
|
14
|
-
font-weight: 600;
|
|
15
|
-
transition: color 0.15s ease-in-out;
|
|
16
|
-
}
|
|
17
|
-
.tabs__tab--selected {
|
|
18
|
-
color: #0097c7;
|
|
19
|
-
color: var(--color-content-accent, #0097c7);
|
|
20
|
-
}
|
|
21
|
-
.tabs__tab--disabled {
|
|
22
|
-
color: #a8aaac !important;
|
|
23
|
-
cursor: not-allowed;
|
|
24
|
-
}
|
|
25
|
-
.tabs__tab:focus {
|
|
26
|
-
color: #0084b3;
|
|
27
|
-
color: var(--color-content-accent-hover, #0084b3);
|
|
28
|
-
}
|
|
29
|
-
@media (min-width: 992px) {
|
|
30
|
-
.tabs__tab:hover {
|
|
31
|
-
color: #0084b3;
|
|
32
|
-
color: var(--color-content-accent-hover, #0084b3);
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
@media (hover: hover) {
|
|
36
|
-
.tabs__tab:hover {
|
|
37
|
-
color: #0084b3;
|
|
38
|
-
color: var(--color-content-accent-hover, #0084b3);
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
.tabs__tab-list {
|
|
42
|
-
list-style: none;
|
|
43
|
-
padding: 0;
|
|
44
|
-
margin: 0;
|
|
45
|
-
border-bottom: 1px solid #0000001a;
|
|
46
|
-
border-bottom: 1px solid var(--color-border-neutral, #0000001a);
|
|
47
|
-
}
|
|
48
|
-
.tabs__line {
|
|
49
|
-
height: 3px;
|
|
50
|
-
background-color: #00a2dd;
|
|
51
|
-
background-color: var(--color-interactive-accent, #00a2dd);
|
|
52
|
-
transition: transform cubic-bezier(0, 0.94, 0.62, 1) 350ms;
|
|
53
|
-
}
|
|
54
|
-
.tabs__panel-container {
|
|
55
|
-
width: 100%;
|
|
56
|
-
}
|
|
57
|
-
.tabs__slider {
|
|
58
|
-
display: flex;
|
|
59
|
-
}
|
|
60
|
-
.tabs__panel--selected {
|
|
61
|
-
padding: 8px;
|
|
62
|
-
padding: var(--size-8, 8px);
|
|
63
|
-
border: 1px solid #37517e;
|
|
64
|
-
}
|
|
65
|
-
.tabs__panel.enter {
|
|
66
|
-
opacity: 0;
|
|
67
|
-
}
|
|
68
|
-
.tabs__panel.enter-active {
|
|
69
|
-
opacity: 1;
|
|
70
|
-
}
|
|
71
|
-
.tabs__panel.exit {
|
|
72
|
-
opacity: 0;
|
|
73
|
-
}
|
|
74
|
-
.tabs--inverse .tabs__tab-list {
|
|
75
|
-
border-bottom-color: #0000001a;
|
|
76
|
-
border-bottom-color: var(--color-border-neutral, #0000001a);
|
|
77
|
-
}
|
|
78
|
-
.tabs--inverse .tabs__tab:not(.tabs__tab--selected) {
|
|
79
|
-
color: #fff;
|
|
80
|
-
}
|
|
1
|
+
.tabs{position:relative}.tabs__tab{display:inline-block;cursor:pointer;outline:none;text-align:center;padding:8px;padding:var(--size-8,8px);margin-bottom:-3px;color:#37517e;color:var(--color-content-primary,#37517e);font-weight:600;transition:color .15s ease-in-out}.tabs__tab--selected{color:#0097c7;color:var(--color-content-accent,#0097c7)}.tabs__tab--disabled{color:#a8aaac;color:var(--color-content-disabled,#a8aaac);cursor:not-allowed}.tabs__tab:focus{color:#0084b3;color:var(--color-content-accent-hover,#0084b3)}@media (min-width:992px){.tabs__tab:hover{color:#0084b3;color:var(--color-content-accent-hover,#0084b3)}}@media (hover:hover){.tabs__tab:hover{color:#0084b3;color:var(--color-content-accent-hover,#0084b3)}}.tabs__tab-list{list-style:none;padding:0;margin:0;border-bottom:1px solid rgba(0,0,0,.10196078431372549);border-bottom:1px solid var(--color-border-neutral,rgba(0,0,0,.10196078431372549))}.tabs__line{height:3px;background-color:#00a2dd;background-color:var(--color-interactive-accent,#00a2dd);transition:transform .35s cubic-bezier(0,.94,.62,1)}.tabs__panel-container{width:100%}.tabs__slider{display:flex}.tabs__panel--selected{padding:8px;padding:var(--size-8,8px);border:1px solid #37517e}.tabs__panel.enter{opacity:0}.tabs__panel.enter-active{opacity:1}.tabs__panel.exit{opacity:0}.tabs--inverse .tabs__tab-list{border-bottom-color:rgba(0,0,0,.10196078431372549);border-bottom-color:var(--color-border-neutral,rgba(0,0,0,.10196078431372549))}.tabs--inverse .tabs__tab:not(.tabs__tab--selected){color:#fff}.tabs.tabs--auto-width .tabs__tab{display:inline-flex;height:40px;height:var(--size-40,40px);padding:0 24px;padding:0 var(--size-24,24px);justify-content:center;align-items:center}
|
|
@@ -1,53 +1 @@
|
|
|
1
|
-
.np-tile {
|
|
2
|
-
min-width: 120px;
|
|
3
|
-
border-radius: 3px;
|
|
4
|
-
border-radius: var(--radius-small, 3px);
|
|
5
|
-
width: 100%;
|
|
6
|
-
}
|
|
7
|
-
.np-tile.decision {
|
|
8
|
-
margin-top: 0;
|
|
9
|
-
border: 1px solid #0000001a;
|
|
10
|
-
border: 1px solid var(--color-border-neutral, #0000001a);
|
|
11
|
-
}
|
|
12
|
-
.np-tile.np-decision__tile--fixed-width {
|
|
13
|
-
width: 300px;
|
|
14
|
-
}
|
|
15
|
-
.np-tile__media {
|
|
16
|
-
width: 100%;
|
|
17
|
-
}
|
|
18
|
-
.np-tile__title {
|
|
19
|
-
margin-top: 16px;
|
|
20
|
-
margin-top: var(--size-16, 16px);
|
|
21
|
-
font-size: 1.333333rem;
|
|
22
|
-
line-height: calc(24 / 20);
|
|
23
|
-
color: #37517e;
|
|
24
|
-
color: var(--color-content-primary, #37517e);
|
|
25
|
-
}
|
|
26
|
-
.np-tile__description {
|
|
27
|
-
margin-top: 12px;
|
|
28
|
-
margin-top: var(--size-12, 12px);
|
|
29
|
-
line-height: calc(22 / 16);
|
|
30
|
-
color: #5d7079;
|
|
31
|
-
color: var(--color-content-secondary, #5d7079);
|
|
32
|
-
font-weight: 500;
|
|
33
|
-
}
|
|
34
|
-
.np-tile--small.np-decision__tile--fixed-width {
|
|
35
|
-
width: 260px;
|
|
36
|
-
}
|
|
37
|
-
.np-tile--small .np-tile__title {
|
|
38
|
-
margin-top: 12px;
|
|
39
|
-
margin-top: var(--size-12, 12px);
|
|
40
|
-
font-size: 1rem;
|
|
41
|
-
line-height: calc(22 / 16);
|
|
42
|
-
}
|
|
43
|
-
.np-tile--small .np-tile__description {
|
|
44
|
-
margin-top: 4px;
|
|
45
|
-
margin-top: var(--size-4, 4px);
|
|
46
|
-
}
|
|
47
|
-
.np-tile:hover .tw-avatar {
|
|
48
|
-
pointer-events: none;
|
|
49
|
-
}
|
|
50
|
-
.np-tile:hover .tw-avatar .tw-avatar__content {
|
|
51
|
-
background-color: #ffffff;
|
|
52
|
-
background-color: var(--color-background-screen, #ffffff);
|
|
53
|
-
}
|
|
1
|
+
.np-tile{min-width:120px;border-radius:3px;border-radius:var(--radius-small,3px);width:100%}.np-tile.decision{margin-top:0;border:1px solid rgba(0,0,0,.10196078431372549);border:1px solid var(--color-border-neutral,rgba(0,0,0,.10196078431372549))}.np-tile.np-decision__tile--fixed-width{width:300px}.np-tile__media{width:100%}.np-tile__title{margin-top:16px;margin-top:var(--size-16,16px);font-size:1.333333rem;line-height:1.2;color:#37517e;color:var(--color-content-primary,#37517e)}.np-tile__description{margin-top:12px;margin-top:var(--size-12,12px);line-height:1.375;color:#5d7079;color:var(--color-content-secondary,#5d7079);font-weight:500}.np-tile--small.np-decision__tile--fixed-width{width:260px}.np-tile--small .np-tile__title{margin-top:12px;margin-top:var(--size-12,12px);font-size:1rem;line-height:1.375}.np-tile--small .np-tile__description{margin-top:4px;margin-top:var(--size-4,4px)}.np-tile:hover .tw-avatar{pointer-events:none}.np-tile:hover .tw-avatar .tw-avatar__content{background-color:#fff;background-color:var(--color-background-screen,#fff)}
|
|
@@ -1,28 +1 @@
|
|
|
1
|
-
.tw-tooltip-container {
|
|
2
|
-
display: inline-block;
|
|
3
|
-
/*
|
|
4
|
-
What we do is we wait 0.15s so the fade out animation is seen and then we run our own animation to hide it with visibility.
|
|
5
|
-
This isn't actually animating, but it just turns visibility to hidden with a delay.
|
|
6
|
-
*/
|
|
7
|
-
}
|
|
8
|
-
.tw-tooltip-container .tooltip {
|
|
9
|
-
visibility: visible;
|
|
10
|
-
-webkit-user-select: none;
|
|
11
|
-
-ms-user-select: none;
|
|
12
|
-
user-select: none;
|
|
13
|
-
}
|
|
14
|
-
.tw-tooltip-container .tooltip:not(.in) {
|
|
15
|
-
pointer-events: none;
|
|
16
|
-
animation: tw-tooltip-disappear;
|
|
17
|
-
animation-duration: 0s;
|
|
18
|
-
animation-delay: 0.15s;
|
|
19
|
-
animation-fill-mode: both;
|
|
20
|
-
}
|
|
21
|
-
@keyframes tw-tooltip-disappear {
|
|
22
|
-
from {
|
|
23
|
-
visibility: visible;
|
|
24
|
-
}
|
|
25
|
-
to {
|
|
26
|
-
visibility: hidden;
|
|
27
|
-
}
|
|
28
|
-
}
|
|
1
|
+
.tw-tooltip-container{display:inline-block}.tw-tooltip-container .tooltip{visibility:visible;-webkit-user-select:none;-ms-user-select:none;user-select:none}.tw-tooltip-container .tooltip:not(.in){pointer-events:none;animation:tw-tooltip-disappear;animation-duration:0s;animation-delay:.15s;animation-fill-mode:both}@keyframes tw-tooltip-disappear{0%{visibility:visible}to{visibility:hidden}}
|
|
@@ -1,142 +1 @@
|
|
|
1
|
-
.typeahead.open .input-group {
|
|
2
|
-
z-index: 1060;
|
|
3
|
-
}
|
|
4
|
-
.typeahead .dropdown.btn-block {
|
|
5
|
-
display: block;
|
|
6
|
-
}
|
|
7
|
-
.typeahead .dropdown-menu {
|
|
8
|
-
max-width: 100%;
|
|
9
|
-
width: 100%;
|
|
10
|
-
}
|
|
11
|
-
.typeahead--multiple .chip {
|
|
12
|
-
margin-bottom: auto;
|
|
13
|
-
animation-name: slide;
|
|
14
|
-
animation-duration: 0.03s;
|
|
15
|
-
animation-timing-function: ease-in-out;
|
|
16
|
-
}
|
|
17
|
-
.typeahead--multiple .chip:first-child {
|
|
18
|
-
animation-name: slideFirst;
|
|
19
|
-
}
|
|
20
|
-
.typeahead--multiple .chip-remove {
|
|
21
|
-
animation-name: fadeIn;
|
|
22
|
-
animation-duration: 0.03s;
|
|
23
|
-
animation-timing-function: ease-in-out;
|
|
24
|
-
}
|
|
25
|
-
.typeahead--multiple .form-control {
|
|
26
|
-
height: auto;
|
|
27
|
-
min-height: auto;
|
|
28
|
-
padding-top: 0;
|
|
29
|
-
padding-bottom: 0;
|
|
30
|
-
overflow: auto;
|
|
31
|
-
}
|
|
32
|
-
.typeahead--multiple .typeahead__input {
|
|
33
|
-
border: none;
|
|
34
|
-
outline: none;
|
|
35
|
-
float: none;
|
|
36
|
-
font-size: inherit;
|
|
37
|
-
line-height: inherit;
|
|
38
|
-
align-self: stretch;
|
|
39
|
-
padding: 2px 0 0;
|
|
40
|
-
}
|
|
41
|
-
.typeahead--multiple .typeahead__input-aligner {
|
|
42
|
-
height: 40px;
|
|
43
|
-
display: inline-block;
|
|
44
|
-
width: 0;
|
|
45
|
-
}
|
|
46
|
-
.typeahead--multiple .typeahead__input-container {
|
|
47
|
-
cursor: text;
|
|
48
|
-
display: flex;
|
|
49
|
-
}
|
|
50
|
-
.typeahead--multiple .sizer {
|
|
51
|
-
white-space: pre;
|
|
52
|
-
position: absolute;
|
|
53
|
-
visibility: hidden;
|
|
54
|
-
width: auto;
|
|
55
|
-
}
|
|
56
|
-
.typeahead--multiple.typeahead--has-value .typeahead__input-container {
|
|
57
|
-
padding-left: 8px;
|
|
58
|
-
padding-left: var(--size-8, 8px);
|
|
59
|
-
}
|
|
60
|
-
.typeahead--multiple.typeahead--has-value .typeahead__input {
|
|
61
|
-
margin-bottom: calc(-1 * 8px + 1px);
|
|
62
|
-
margin-bottom: calc(-1 * var(--size-8, 8px) + 1px);
|
|
63
|
-
margin-left: 4px;
|
|
64
|
-
margin-left: var(--size-4, 4px);
|
|
65
|
-
}
|
|
66
|
-
.typeahead--multiple.typeahead--has-value .typeahead__input-wrapper::after {
|
|
67
|
-
content: '';
|
|
68
|
-
height: calc(8px - 1);
|
|
69
|
-
height: calc(var(--size-8, 8px) - 1);
|
|
70
|
-
width: 100%;
|
|
71
|
-
}
|
|
72
|
-
.typeahead__input-wrapper {
|
|
73
|
-
width: 100%;
|
|
74
|
-
margin-top: -1px;
|
|
75
|
-
display: flex;
|
|
76
|
-
flex-wrap: wrap;
|
|
77
|
-
flex: 1;
|
|
78
|
-
align-items: center;
|
|
79
|
-
}
|
|
80
|
-
.typeahead--empty.typeahead--multiple .typeahead__input-wrapper {
|
|
81
|
-
padding: 0;
|
|
82
|
-
margin: 0;
|
|
83
|
-
}
|
|
84
|
-
.typeahead-sm.typeahead--multiple .typeahead__input-container {
|
|
85
|
-
min-height: 32px;
|
|
86
|
-
}
|
|
87
|
-
.typeahead-sm.typeahead--multiple .typeahead__input {
|
|
88
|
-
padding-top: 0;
|
|
89
|
-
}
|
|
90
|
-
.typeahead-md.typeahead--multiple .typeahead__input-container {
|
|
91
|
-
min-height: 48px;
|
|
92
|
-
}
|
|
93
|
-
.typeahead-lg.typeahead--multiple .typeahead__input-container {
|
|
94
|
-
min-height: 72px;
|
|
95
|
-
}
|
|
96
|
-
.typeahead-lg.typeahead--multiple .typeahead__input {
|
|
97
|
-
padding-top: calc(8px - 1);
|
|
98
|
-
padding-top: calc(var(--size-8, 8px) - 1);
|
|
99
|
-
}
|
|
100
|
-
.typeahead-lg.typeahead--multiple .typeahead__input-wrapper {
|
|
101
|
-
padding-bottom: 8px;
|
|
102
|
-
padding-bottom: var(--size-8, 8px);
|
|
103
|
-
margin: 0;
|
|
104
|
-
}
|
|
105
|
-
.typeahead-lg.typeahead--multiple .typeahead__input-wrapper::after {
|
|
106
|
-
content: none;
|
|
107
|
-
}
|
|
108
|
-
.typeahead-lg.typeahead--multiple .chip {
|
|
109
|
-
margin-bottom: 0;
|
|
110
|
-
line-height: 0;
|
|
111
|
-
}
|
|
112
|
-
@keyframes slide {
|
|
113
|
-
from {
|
|
114
|
-
transform: translateX(-12px);
|
|
115
|
-
}
|
|
116
|
-
to {
|
|
117
|
-
transform: none;
|
|
118
|
-
}
|
|
119
|
-
}
|
|
120
|
-
@keyframes slideFirst {
|
|
121
|
-
from {
|
|
122
|
-
transform: translateX(-4px);
|
|
123
|
-
}
|
|
124
|
-
to {
|
|
125
|
-
transform: none;
|
|
126
|
-
}
|
|
127
|
-
}
|
|
128
|
-
@keyframes fadeIn {
|
|
129
|
-
from {
|
|
130
|
-
opacity: 0;
|
|
131
|
-
}
|
|
132
|
-
to {
|
|
133
|
-
opacity: 0.6;
|
|
134
|
-
}
|
|
135
|
-
}
|
|
136
|
-
@media (max-width: 575px) {
|
|
137
|
-
.typeahead .dropdown.open .dropdown-menu {
|
|
138
|
-
position: absolute;
|
|
139
|
-
bottom: auto;
|
|
140
|
-
overflow: scroll;
|
|
141
|
-
}
|
|
142
|
-
}
|
|
1
|
+
.typeahead.open .input-group{z-index:1060}.typeahead .dropdown.btn-block{display:block}.typeahead .dropdown-menu{max-width:100%;width:100%}.typeahead--multiple .chip{margin-bottom:auto;animation-name:slide;animation-duration:.03s;animation-timing-function:ease-in-out}.typeahead--multiple .chip:first-child{animation-name:slideFirst}.typeahead--multiple .chip-remove{animation-name:fadeIn;animation-duration:.03s;animation-timing-function:ease-in-out}.typeahead--multiple .form-control{height:auto;min-height:auto;padding-top:0;padding-bottom:0;overflow:auto}.typeahead--multiple .typeahead__input{border:none;outline:none;float:none;font-size:inherit;line-height:inherit;align-self:stretch;padding:2px 0 0}.typeahead--multiple .typeahead__input-aligner{height:40px;display:inline-block;width:0}.typeahead--multiple .typeahead__input-container{cursor:text;display:flex}.typeahead--multiple .sizer{white-space:pre;position:absolute;visibility:hidden;width:auto}.typeahead--multiple.typeahead--has-value .typeahead__input-container{padding-left:8px;padding-left:var(--size-8,8px)}.typeahead--multiple.typeahead--has-value .typeahead__input{margin-bottom:-7px;margin-bottom:calc(var(--size-8, 8px)*-1 + 1px);margin-left:4px;margin-left:var(--size-4,4px)}.typeahead--multiple.typeahead--has-value .typeahead__input-wrapper:after{content:"";height:calc(8px - 1);height:calc(var(--size-8, 8px) - 1);width:100%}.typeahead__input-wrapper{width:100%;margin-top:-1px;display:flex;flex-wrap:wrap;flex:1;align-items:center}.typeahead--empty.typeahead--multiple .typeahead__input-wrapper{padding:0;margin:0}.typeahead-sm.typeahead--multiple .typeahead__input-container{min-height:32px}.typeahead-sm.typeahead--multiple .typeahead__input{padding-top:0}.typeahead-md.typeahead--multiple .typeahead__input-container{min-height:48px}.typeahead-lg.typeahead--multiple .typeahead__input-container{min-height:72px}.typeahead-lg.typeahead--multiple .typeahead__input{padding-top:calc(8px - 1);padding-top:calc(var(--size-8, 8px) - 1)}.typeahead-lg.typeahead--multiple .typeahead__input-wrapper{padding-bottom:8px;padding-bottom:var(--size-8,8px);margin:0}.typeahead-lg.typeahead--multiple .typeahead__input-wrapper:after{content:none}.typeahead-lg.typeahead--multiple .chip{margin-bottom:0;line-height:0}@keyframes slide{0%{transform:translateX(-12px)}to{transform:none}}@keyframes slideFirst{0%{transform:translateX(-4px)}to{transform:none}}@keyframes fadeIn{0%{opacity:0}to{opacity:.6}}@media (max-width:575px){.typeahead .dropdown.open .dropdown-menu{position:absolute;bottom:auto;overflow:scroll}}
|
|
@@ -1,11 +1 @@
|
|
|
1
|
-
.typeahead__option.tw-dropdown-item .dropdown-item:active strong
|
|
2
|
-
color: #ffffff;
|
|
3
|
-
color: var(--color-base-white-light, #ffffff);
|
|
4
|
-
}
|
|
5
|
-
.typeahead__option.tw-dropdown-item--clickable {
|
|
6
|
-
cursor: pointer;
|
|
7
|
-
}
|
|
8
|
-
.typeahead__option.tw-dropdown-item--focused {
|
|
9
|
-
background-color: #86a7bd1a;
|
|
10
|
-
background-color: var(--color-background-neutral, #86a7bd1a);
|
|
11
|
-
}
|
|
1
|
+
.typeahead__option.tw-dropdown-item .dropdown-item:active strong{color:#fff;color:var(--color-base-white-light,#fff)}.typeahead__option.tw-dropdown-item--clickable{cursor:pointer}.typeahead__option.tw-dropdown-item--focused{background-color:rgba(134,167,189,.10196078431372549);background-color:var(--color-background-neutral,rgba(134,167,189,.10196078431372549))}
|
|
@@ -1,15 +1 @@
|
|
|
1
|
-
.tw-droppable-lg {
|
|
2
|
-
min-height: 346px;
|
|
3
|
-
}
|
|
4
|
-
.tw-droppable-lg .thumbnail {
|
|
5
|
-
max-height: 72px;
|
|
6
|
-
}
|
|
7
|
-
.tw-droppable-md {
|
|
8
|
-
min-height: 315px;
|
|
9
|
-
}
|
|
10
|
-
.tw-droppable-md .thumbnail {
|
|
11
|
-
max-height: 72px;
|
|
12
|
-
}
|
|
13
|
-
.tw-droppable-sm {
|
|
14
|
-
min-height: 245px;
|
|
15
|
-
}
|
|
1
|
+
.tw-droppable-lg{min-height:346px}.tw-droppable-lg .thumbnail{max-height:72px}.tw-droppable-md{min-height:315px}.tw-droppable-md .thumbnail{max-height:72px}.tw-droppable-sm{min-height:245px}
|
|
@@ -1,6 +1 @@
|
|
|
1
|
-
.np-upload-input
|
|
2
|
-
border: 1px solid #0000001a;
|
|
3
|
-
border: 1px solid var(--color-border-neutral, #0000001a);
|
|
4
|
-
border-radius: 3px;
|
|
5
|
-
border-radius: var(--radius-small, 3px);
|
|
6
|
-
}
|
|
1
|
+
.np-upload-input{border:1px solid rgba(0,0,0,.10196078431372549);border:1px solid var(--color-border-neutral,rgba(0,0,0,.10196078431372549));border-radius:3px;border-radius:var(--radius-small,3px)}
|
|
@@ -1,45 +1 @@
|
|
|
1
|
-
.np-upload-button {
|
|
2
|
-
width: 100%;
|
|
3
|
-
text-decoration: none !important;
|
|
4
|
-
border: 0 !important;
|
|
5
|
-
letter-spacing: normal !important;
|
|
6
|
-
padding: 12px 16px;
|
|
7
|
-
padding: var(--size-12, 12px) var(--size-16, 16px);
|
|
8
|
-
}
|
|
9
|
-
.np-upload-button.np-upload-accent {
|
|
10
|
-
color: #00a2dd;
|
|
11
|
-
color: var(--color-interactive-accent, #00a2dd);
|
|
12
|
-
}
|
|
13
|
-
label.np-upload-button:not(.disabled):hover,
|
|
14
|
-
label.np-upload-button:not(.disabled):focus,
|
|
15
|
-
label.np-upload-button:not(.disabled):active {
|
|
16
|
-
background-color: #86a7bd1a;
|
|
17
|
-
background-color: var(--color-background-neutral, #86a7bd1a);
|
|
18
|
-
}
|
|
19
|
-
label.np-upload-button.disabled {
|
|
20
|
-
color: #a8aaac;
|
|
21
|
-
color: var(--color-content-disabled, #a8aaac);
|
|
22
|
-
}
|
|
23
|
-
.np-upload-button .np-upload-icon {
|
|
24
|
-
display: flex;
|
|
25
|
-
align-items: center;
|
|
26
|
-
}
|
|
27
|
-
.np-upload-button .np-upload-description {
|
|
28
|
-
font-weight: normal;
|
|
29
|
-
white-space: normal;
|
|
30
|
-
}
|
|
31
|
-
.np-upload-button-container.droppable {
|
|
32
|
-
border: 0;
|
|
33
|
-
}
|
|
34
|
-
.np-upload-button-container .droppable-card-content {
|
|
35
|
-
display: flex;
|
|
36
|
-
}
|
|
37
|
-
.np-upload-button-container input[type='file'] {
|
|
38
|
-
opacity: 0;
|
|
39
|
-
z-index: -1;
|
|
40
|
-
position: absolute;
|
|
41
|
-
}
|
|
42
|
-
.np-upload-button-container input[type='file']:focus + label {
|
|
43
|
-
background-color: #86a7bd1a;
|
|
44
|
-
background-color: var(--color-background-neutral, #86a7bd1a);
|
|
45
|
-
}
|
|
1
|
+
.np-upload-button{width:100%;text-decoration:none!important;border:0!important;letter-spacing:normal!important;padding:12px 16px;padding:var(--size-12,12px) var(--size-16,16px)}.np-upload-button.np-upload-accent{color:#00a2dd;color:var(--color-interactive-accent,#00a2dd)}label.np-upload-button:not(.disabled):active,label.np-upload-button:not(.disabled):focus,label.np-upload-button:not(.disabled):hover{background-color:rgba(134,167,189,.10196078431372549);background-color:var(--color-background-neutral,rgba(134,167,189,.10196078431372549))}label.np-upload-button.disabled{color:#a8aaac;color:var(--color-content-disabled,#a8aaac)}.np-upload-button .np-upload-icon{display:flex;align-items:center}.np-upload-button .np-upload-description{font-weight:400;white-space:normal}.np-upload-button-container.droppable{border:0}.np-upload-button-container .droppable-card-content{display:flex}.np-upload-button-container input[type=file]{opacity:0;z-index:-1;position:absolute}.np-upload-button-container input[type=file]:focus+label{background-color:rgba(134,167,189,.10196078431372549);background-color:var(--color-background-neutral,rgba(134,167,189,.10196078431372549))}
|
|
@@ -1,48 +1 @@
|
|
|
1
|
-
.np-upload-item:not(:last-child)
|
|
2
|
-
display: block;
|
|
3
|
-
position: relative;
|
|
4
|
-
border-bottom: 1px solid #0000001a;
|
|
5
|
-
border-bottom: 1px solid var(--color-border-neutral, #0000001a);
|
|
6
|
-
content: ' ';
|
|
7
|
-
margin: 0 16px;
|
|
8
|
-
margin: 0 var(--size-16, 16px);
|
|
9
|
-
}
|
|
10
|
-
.np-upload-item__link a {
|
|
11
|
-
flex: 1;
|
|
12
|
-
text-decoration: none;
|
|
13
|
-
outline: none;
|
|
14
|
-
font-weight: 500;
|
|
15
|
-
font-weight: var(--font-weight-regular, 500);
|
|
16
|
-
}
|
|
17
|
-
.np-upload-item__link a:hover,
|
|
18
|
-
.np-upload-item__link a:focus,
|
|
19
|
-
.np-upload-item__link a:active {
|
|
20
|
-
text-decoration: none;
|
|
21
|
-
background-color: #86a7bd1a;
|
|
22
|
-
background-color: var(--color-background-neutral, #86a7bd1a);
|
|
23
|
-
}
|
|
24
|
-
.np-upload-item__link a:hover ~ .np-upload-item__remove-button,
|
|
25
|
-
.np-upload-item__link a:focus ~ .np-upload-item__remove-button,
|
|
26
|
-
.np-upload-item__link a:active ~ .np-upload-item__remove-button {
|
|
27
|
-
background-color: #86a7bd1a;
|
|
28
|
-
background-color: var(--color-background-neutral, #86a7bd1a);
|
|
29
|
-
}
|
|
30
|
-
.np-upload-item__body {
|
|
31
|
-
display: flex;
|
|
32
|
-
align-items: center;
|
|
33
|
-
justify-content: space-between;
|
|
34
|
-
}
|
|
35
|
-
.np-upload-item__remove-button {
|
|
36
|
-
flex-shrink: 0;
|
|
37
|
-
align-self: stretch;
|
|
38
|
-
padding: 12px 16px;
|
|
39
|
-
padding: var(--size-12, 12px) var(--size-16, 16px);
|
|
40
|
-
color: #a8aaac;
|
|
41
|
-
color: var(--color-content-disabled, #a8aaac);
|
|
42
|
-
background: transparent;
|
|
43
|
-
}
|
|
44
|
-
.np-upload-item__remove-button:hover,
|
|
45
|
-
.np-upload-item__remove-button:focus {
|
|
46
|
-
color: #cf2929 !important;
|
|
47
|
-
color: var(--color-content-negative, #cf2929) !important;
|
|
48
|
-
}
|
|
1
|
+
.np-upload-item:not(:last-child):after{display:block;position:relative;border-bottom:1px solid rgba(0,0,0,.10196078431372549);border-bottom:1px solid var(--color-border-neutral,rgba(0,0,0,.10196078431372549));content:" ";margin:0 16px;margin:0 var(--size-16,16px)}.np-upload-item__link a{flex:1;text-decoration:none;outline:none;font-weight:500;font-weight:var(--font-weight-regular,500)}.np-upload-item__link a:active,.np-upload-item__link a:focus,.np-upload-item__link a:hover{text-decoration:none}.np-upload-item__link a:active,.np-upload-item__link a:active~.np-upload-item__remove-button,.np-upload-item__link a:focus,.np-upload-item__link a:focus~.np-upload-item__remove-button,.np-upload-item__link a:hover,.np-upload-item__link a:hover~.np-upload-item__remove-button{background-color:rgba(134,167,189,.10196078431372549);background-color:var(--color-background-neutral,rgba(134,167,189,.10196078431372549))}.np-upload-item__body{display:flex;align-items:center;justify-content:space-between}.np-upload-item__remove-button{flex-shrink:0;align-self:stretch;padding:12px 16px;padding:var(--size-12,12px) var(--size-16,16px);color:#a8aaac;color:var(--color-content-disabled,#a8aaac);background:transparent}.np-upload-item__remove-button:focus,.np-upload-item__remove-button:hover{color:#d03238!important;color:var(--color-interactive-negative-hover,#d03238)!important}
|
|
@@ -1,16 +1,19 @@
|
|
|
1
1
|
declare namespace _default {
|
|
2
|
-
namespace
|
|
2
|
+
namespace monthLabel {
|
|
3
3
|
const id: string;
|
|
4
4
|
const defaultMessage: string;
|
|
5
|
-
const description: string;
|
|
6
5
|
}
|
|
7
|
-
namespace
|
|
6
|
+
namespace dayLabel {
|
|
8
7
|
const id_1: string;
|
|
9
8
|
export { id_1 as id };
|
|
10
9
|
const defaultMessage_1: string;
|
|
11
10
|
export { defaultMessage_1 as defaultMessage };
|
|
12
|
-
|
|
13
|
-
|
|
11
|
+
}
|
|
12
|
+
namespace yearLabel {
|
|
13
|
+
const id_2: string;
|
|
14
|
+
export { id_2 as id };
|
|
15
|
+
const defaultMessage_2: string;
|
|
16
|
+
export { defaultMessage_2 as defaultMessage };
|
|
14
17
|
}
|
|
15
18
|
}
|
|
16
19
|
export default _default;
|
|
@@ -4,14 +4,8 @@ declare type Props = PropsWithChildren<CommonProps & AriaLabelProperty & LinkPro
|
|
|
4
4
|
/**
|
|
5
5
|
* Standard Link component with navigate away icon
|
|
6
6
|
*
|
|
7
|
-
*
|
|
7
|
+
* Documentation: https://transferwise.github.io/neptune-web/components/content/Link
|
|
8
8
|
*
|
|
9
|
-
* @param root0
|
|
10
|
-
* @param root0.className
|
|
11
|
-
* @param root0.children
|
|
12
|
-
* @param root0.href
|
|
13
|
-
* @param root0.target
|
|
14
|
-
* @param root0.'aria-label'
|
|
15
9
|
*/
|
|
16
10
|
declare const Link: ({ className, children, href, target, "aria-label": ariaLabel }: Props) => JSX.Element;
|
|
17
11
|
export default Link;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import '@testing-library/jest-dom';
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
declare const _default: {
|
|
3
|
+
component: ({ className, children, href, target, "aria-label": ariaLabel }: import("../common").CommonProps & import("../common").AriaLabelProperty & import("../common").LinkProps & {
|
|
4
|
+
children?: import("react").ReactNode;
|
|
5
|
+
}) => JSX.Element;
|
|
6
|
+
title: string;
|
|
7
|
+
};
|
|
8
|
+
export default _default;
|
|
9
|
+
export declare const Basic: () => JSX.Element;
|
|
@@ -14,8 +14,9 @@ declare function customRender(ui: any, { locale, messages, ...renderOptions }?:
|
|
|
14
14
|
messages?: {
|
|
15
15
|
"neptune.ClearButton.ariaLabel": string;
|
|
16
16
|
"neptune.CloseButton.ariaLabel": string;
|
|
17
|
-
"neptune.
|
|
18
|
-
"neptune.
|
|
17
|
+
"neptune.DateInput.day.label": string;
|
|
18
|
+
"neptune.DateInput.month.label": string;
|
|
19
|
+
"neptune.DateInput.year.label": string;
|
|
19
20
|
"neptune.MoneyInput.Select.placeholder": string;
|
|
20
21
|
"neptune.Pagination.ariaLabel": string;
|
|
21
22
|
"neptune.PaginationLink.ariaLabel.active": string;
|
|
@@ -66,8 +67,9 @@ declare function customRenderHook(callback: any, { locale, messages }?: {
|
|
|
66
67
|
messages?: {
|
|
67
68
|
"neptune.ClearButton.ariaLabel": string;
|
|
68
69
|
"neptune.CloseButton.ariaLabel": string;
|
|
69
|
-
"neptune.
|
|
70
|
-
"neptune.
|
|
70
|
+
"neptune.DateInput.day.label": string;
|
|
71
|
+
"neptune.DateInput.month.label": string;
|
|
72
|
+
"neptune.DateInput.year.label": string;
|
|
71
73
|
"neptune.MoneyInput.Select.placeholder": string;
|
|
72
74
|
"neptune.Pagination.ariaLabel": string;
|
|
73
75
|
"neptune.PaginationLink.ariaLabel.active": string;
|
|
@@ -3,6 +3,5 @@ export { asyncFileRead } from "./asyncFileRead";
|
|
|
3
3
|
export { isSizeValid } from "./isSizeValid";
|
|
4
4
|
export { isTypeValid } from "./isTypeValid";
|
|
5
5
|
export { getFileType } from "./getFileType";
|
|
6
|
-
export { generateErrorMessage } from "./generateErrorMessage";
|
|
7
6
|
export { getSupportedSpotMimeTypes } from "./getSupportedSpotMimeTypes";
|
|
8
7
|
export { requestMedia } from "./requestMedia";
|
|
@@ -1,2 +1 @@
|
|
|
1
|
-
export default withNextPortalWrapper;
|
|
2
|
-
declare function withNextPortalWrapper(Component: any): (props: any) => import("react").ReactPortal | null;
|
|
1
|
+
export default function withNextPortalWrapper(Component: any): (props: any) => import("react").ReactPortal | null;
|