@transferwise/components 0.0.0-experimental-e95c8a5 → 0.0.0-experimental-39ab3ec
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/index.esm.js +65 -688
- package/build/index.esm.js.map +1 -1
- package/build/index.js +65 -691
- package/build/index.js.map +1 -1
- package/build/main.css +1 -1
- package/build/styles/common/closeButton/CloseButton.css +1 -1
- package/build/styles/inputs/Input.css +1 -1
- package/build/styles/inputs/InputGroup.css +1 -1
- package/build/styles/inputs/TextArea.css +1 -1
- package/build/styles/main.css +1 -1
- package/build/styles/promoCard/PromoCard.css +1 -1
- package/build/types/common/card/index.d.ts +1 -0
- package/build/types/common/card/index.d.ts.map +1 -1
- package/build/types/dateLookup/dateTrigger/DateTrigger.messages.d.ts +7 -7
- package/build/types/dateLookup/dateTrigger/DateTrigger.messages.d.ts.map +1 -1
- package/build/types/index.d.ts +0 -4
- package/build/types/index.d.ts.map +1 -1
- package/build/types/inputs/Input.d.ts +0 -1
- package/build/types/inputs/Input.d.ts.map +1 -1
- package/build/types/inputs/_common.d.ts.map +1 -1
- package/build/types/promoCard/PromoCard.d.ts +9 -3
- package/build/types/promoCard/PromoCard.d.ts.map +1 -1
- package/build/types/promoCard/PromoCardIndicator.d.ts +5 -3
- package/build/types/promoCard/PromoCardIndicator.d.ts.map +1 -1
- package/package.json +22 -28
- package/src/avatar/Avatar.story.tsx +16 -14
- package/src/common/card/Card.tsx +1 -1
- package/src/common/card/index.ts +1 -0
- package/src/common/closeButton/CloseButton.css +1 -1
- package/src/index.ts +0 -8
- package/src/inputs/Input.css +1 -1
- package/src/inputs/Input.less +0 -14
- package/src/inputs/Input.tsx +2 -6
- package/src/inputs/InputGroup.css +1 -1
- package/src/inputs/InputGroup.less +0 -5
- package/src/inputs/TextArea.css +1 -1
- package/src/inputs/TextArea.less +0 -5
- package/src/inputs/_common.less +4 -0
- package/src/inputs/_common.ts +1 -0
- package/src/main.css +1 -1
- package/src/main.less +0 -4
- package/src/navigationOption/NavigationOption.story.js +3 -5
- package/src/promoCard/PromoCard.css +1 -1
- package/src/promoCard/PromoCard.less +9 -9
- package/src/promoCard/PromoCard.spec.tsx +1 -0
- package/src/promoCard/PromoCard.story.tsx +86 -29
- package/src/promoCard/PromoCard.tsx +69 -22
- package/src/promoCard/PromoCardIndicator.tsx +20 -8
- package/src/radio/Radio.story.js +3 -2
- package/src/radioGroup/RadioGroup.story.js +2 -1
- package/src/select/searchBox/__snapshots__/SearchBox.spec.js.snap +1 -1
- package/src/ssr.spec.js +0 -7
- package/build/styles/inputs/SelectInput.css +0 -1
- package/build/types/common/hooks/useMedia.d.ts +0 -2
- package/build/types/common/hooks/useMedia.d.ts.map +0 -1
- package/build/types/common/hooks/useScreenSize.d.ts +0 -3
- package/build/types/common/hooks/useScreenSize.d.ts.map +0 -1
- package/build/types/common/preventScroll/PreventScroll.d.ts +0 -2
- package/build/types/common/preventScroll/PreventScroll.d.ts.map +0 -1
- package/build/types/inputs/SearchInput.d.ts +0 -10
- package/build/types/inputs/SearchInput.d.ts.map +0 -1
- package/build/types/inputs/SelectInput.d.ts +0 -41
- package/build/types/inputs/SelectInput.d.ts.map +0 -1
- package/build/types/inputs/_BottomSheet.d.ts +0 -17
- package/build/types/inputs/_BottomSheet.d.ts.map +0 -1
- package/build/types/inputs/_ButtonInput.d.ts +0 -6
- package/build/types/inputs/_ButtonInput.d.ts.map +0 -1
- package/build/types/inputs/_Popover.d.ts +0 -18
- package/build/types/inputs/_Popover.d.ts.map +0 -1
- package/build/types/utilities/wrapInFragment.d.ts +0 -3
- package/build/types/utilities/wrapInFragment.d.ts.map +0 -1
- package/src/common/hooks/useMedia.spec.ts +0 -39
- package/src/common/hooks/useMedia.ts +0 -15
- package/src/common/hooks/useScreenSize.ts +0 -7
- package/src/common/preventScroll/PreventScroll.tsx +0 -6
- package/src/inputs/SearchInput.story.tsx +0 -40
- package/src/inputs/SearchInput.tsx +0 -35
- package/src/inputs/SelectInput.css +0 -1
- package/src/inputs/SelectInput.less +0 -183
- package/src/inputs/SelectInput.spec.tsx +0 -120
- package/src/inputs/SelectInput.story.tsx +0 -259
- package/src/inputs/SelectInput.tsx +0 -565
- package/src/inputs/_BottomSheet.less +0 -107
- package/src/inputs/_BottomSheet.tsx +0 -128
- package/src/inputs/_ButtonInput.less +0 -7
- package/src/inputs/_ButtonInput.tsx +0 -27
- package/src/inputs/_Popover.less +0 -38
- package/src/inputs/_Popover.tsx +0 -118
- package/src/utilities/wrapInFragment.tsx +0 -3
- /package/src/dateLookup/dateTrigger/{DateTrigger.messages.ts → DateTrigger.messages.js} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
.np-Card{--Card-image-scale:1;--Card-image-translate:0;--Card-indicator-text-background-color:var(--color-background-neutral);--Card-indicator-icon-background-color:var(--color-interactive-accent);--Card-indicator-icon-color:var(--color-interactive-control);--Card-check-background-color:var(--color-interactive-primary);--Card-check-color:var(--color-interactive-control)}.np-Card--promoCard{--Card-max-width:358px}.np-Card--promoCard.is-disabled{filter:grayscale(1);opacity:.45}.np-Card-image{height:auto;left:-24px;left:calc(var(--size-24)*-1);margin:0 auto;position:relative;transform:scale(var(--Card-image-scale)) translateY(var(--Card-image-translate));transition:transform .5s ease-in-out;width:100%;width:calc(100% + 48px);width:calc(100% + var(--size-48))}[dir=rtl] .np-Card-image{left:auto;right:-24px;right:calc(var(--size-24)*-1)}.np-Card-indicator{bottom:8px;bottom:var(--size-8);display:flex;gap:4px;gap:var(--size-4);position:absolute;right:8px;right:var(--size-8)}[dir=rtl] .np-Card-indicator{left:8px;left:var(--size-8);right:auto}.np-Card-indicatorText{background:var(--Card-indicator-text-background-color);border-radius:100px;display:inline-block;padding:16px;padding:var(--size-16);text-align:left;vertical-align:middle}.np-Card-indicatorIcon
|
|
1
|
+
.np-Card{--Card-image-scale:1;--Card-image-translate:0;--Card-indicator-text-background-color:var(--color-background-neutral);--Card-indicator-icon-background-color:var(--color-interactive-accent);--Card-indicator-icon-color:var(--color-interactive-control);--Card-check-background-color:var(--color-interactive-primary);--Card-check-color:var(--color-interactive-control)}.np-Card--promoCard{--Card-max-width:358px}.np-Card--promoCard.is-disabled{filter:grayscale(1);opacity:.45}.np-Card-image{height:auto;left:-24px;left:calc(var(--size-24)*-1);margin:0 auto;position:relative;transform:scale(var(--Card-image-scale)) translateY(var(--Card-image-translate));transition:transform .5s ease-in-out;width:100%;width:calc(100% + 48px);width:calc(100% + var(--size-48))}[dir=rtl] .np-Card-image{left:auto;right:-24px;right:calc(var(--size-24)*-1)}.np-Card-description{color:#5d7079;color:var(--color-content-secondary)}.np-Card-indicator{bottom:8px;bottom:var(--size-8);display:flex;gap:4px;gap:var(--size-4);position:absolute;right:8px;right:var(--size-8)}[dir=rtl] .np-Card-indicator{left:8px;left:var(--size-8);right:auto}.np-Card-indicatorText{background:var(--Card-indicator-text-background-color);border-radius:100px;display:inline-block;padding:16px;padding:var(--size-16);text-align:left;vertical-align:middle}.np-Card-indicatorIcon .tw-icon{color:var(--Card-indicator-icon-color)}[dir=rtl] .np-Card-indicatorIcon .tw-icon{transform:scaleX(-1)}.np-Card--checked,.np-Card--link{box-shadow:none;color:currentColor;cursor:pointer;transform:scale(1);transition:box-shadow .2s ease-in-out,transform .5s ease-in-out}.np-theme-personal:not(.np-theme-personal--dark,.np-theme-personal--bright-green,.np-theme-personal--forest-green) .np-Card--checked,.np-theme-personal:not(.np-theme-personal--dark,.np-theme-personal--bright-green,.np-theme-personal--forest-green) .np-Card--link{--Card-box-shadow:0px 20px var(--size-40) 0px var(--color-background-neutral);--Card-check-color:var(--color-interactive-accent)}.np-Card--checked.is-disabled,.np-Card--link.is-disabled{cursor:not-allowed}@media (prefers-reduced-motion:reduce){.np-Card--checked,.np-Card--link{transition:none}}.np-Card--checked:hover:not(.is-disabled,:disabled,.is-checked,:focus-within),.np-Card--link:hover:not(.is-disabled,:disabled,.is-checked,:focus-within){--Card-image-scale:1.1;box-shadow:var(--Card-box-shadow)}.np-Card--checked:active:not(.is-disabled,:disabled,.is-checked),.np-Card--link:active:not(.is-disabled,:disabled,.is-checked){--Card-background-color:var(--color-background-neutral-active);--Card-image-scale:1.1;--Card-image-translate:var(--size-8);box-shadow:var(--Card-box-shadow);transform:scale(98%)}.np-theme-personal--bright-green .np-Card--checked:active:not(.is-disabled,:disabled,.is-checked),.np-theme-personal--bright-green .np-Card--link:active:not(.is-disabled,:disabled,.is-checked){--Card-background-color:var(--color-background-neutral)}.np-Card--checked:focus-visible:not(.is-disabled,:disabled),.np-Card--checked:has(:focus-visible):not(.np-Card--checked),.np-Card--link:focus-visible:not(.is-disabled,:disabled),.np-Card--link:has(:focus-visible):not(.np-Card--checked){--Card-image-scale:1.1;box-shadow:var(--Card-box-shadow);outline:var(--ring-outline-color) solid 4px;outline:var(--ring-outline-color) solid var(--size-4);outline-offset:4px;outline-offset:var(--size-4)}.np-Card--checked:has(.np-Card-closeButton:focus-visible),.np-Card--link:has(.np-Card-closeButton:focus-visible){outline:none}.np-Card--link .np-Card-titleLink{color:#37517e;color:var(--color-content-primary);text-decoration:none}.np-Card--link .np-Card-titleLink:focus-visible{outline:none}.np-Card--link .np-Card-titleLink:after{content:"";display:block;height:100%;left:0;position:absolute;top:0;width:100%;z-index:10}.np-Card--checked.is-checked{box-shadow:0 0 0 4px var(--color-interactive-primary);box-shadow:0 0 0 var(--size-4) var(--color-interactive-primary)}.np-Card--checked.is-checked .np-Card-check{align-items:center;background:var(--Card-check-background-color);border-radius:50%;border-radius:var(--radius-full);color:var(--Card-check-color);display:flex;height:40px;height:var(--size-40);justify-content:center;position:absolute;right:8px;right:var(--size-8);top:8px;top:var(--size-8);width:40px;width:var(--size-40)}[dir=rtl] .np-Card--checked.is-checked .np-Card-check{left:8px;left:var(--size-8);right:auto}.np-Card--checked.is-checked:focus-visible:not(.is-disabled,:disabled){box-shadow:none}.np-CardGroup{display:flex;flex-direction:column;gap:24px;gap:var(--size-24);width:100%}@media (min-width:768px){.np-CardGroup{flex-direction:row}}.np-CardGroup .np-Card.np-Card--promoCard{max-width:100%}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/common/card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/common/card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACjC,cAAc,QAAQ,CAAC"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
declare
|
|
2
|
-
ariaLabel
|
|
3
|
-
id: string;
|
|
4
|
-
defaultMessage: string;
|
|
5
|
-
description: string;
|
|
6
|
-
}
|
|
7
|
-
}
|
|
1
|
+
declare namespace _default {
|
|
2
|
+
namespace ariaLabel {
|
|
3
|
+
const id: string;
|
|
4
|
+
const defaultMessage: string;
|
|
5
|
+
const description: string;
|
|
6
|
+
}
|
|
7
|
+
}
|
|
8
8
|
export default _default;
|
|
9
9
|
//# sourceMappingURL=DateTrigger.messages.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateTrigger.messages.d.ts","sourceRoot":"","sources":["../../../../src/dateLookup/dateTrigger/DateTrigger.messages.
|
|
1
|
+
{"version":3,"file":"DateTrigger.messages.d.ts","sourceRoot":"","sources":["../../../../src/dateLookup/dateTrigger/DateTrigger.messages.js"],"names":[],"mappings":""}
|
package/build/types/index.d.ts
CHANGED
|
@@ -3,8 +3,6 @@
|
|
|
3
3
|
*/
|
|
4
4
|
export type { InputProps } from './inputs/Input';
|
|
5
5
|
export type { InputGroupProps } from './inputs/InputGroup';
|
|
6
|
-
export type { SearchInputProps } from './inputs/SearchInput';
|
|
7
|
-
export type { SelectInputItem, SelectInputOptionContentProps, SelectInputProps, } from './inputs/SelectInput';
|
|
8
6
|
export type { TextAreaProps } from './inputs/TextArea';
|
|
9
7
|
export type { UploadedFile, UploadError, UploadResponse } from './uploadInput/types';
|
|
10
8
|
export type { ModalProps } from './modal';
|
|
@@ -48,8 +46,6 @@ export { default as Info } from './info';
|
|
|
48
46
|
export { default as InlineAlert } from './inlineAlert';
|
|
49
47
|
export { Input } from './inputs/Input';
|
|
50
48
|
export { InputGroup } from './inputs/InputGroup';
|
|
51
|
-
export { SearchInput } from './inputs/SearchInput';
|
|
52
|
-
export { SelectInput, SelectInputOptionContent } from './inputs/SelectInput';
|
|
53
49
|
export { TextArea } from './inputs/TextArea';
|
|
54
50
|
export { default as InputWithDisplayFormat } from './inputWithDisplayFormat';
|
|
55
51
|
export { default as InstructionsList } from './instructionsList';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,YAAY,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACjD,YAAY,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC3D,YAAY,EAAE,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,YAAY,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACjD,YAAY,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC3D,YAAY,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AACvD,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrF,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,YAAY,EACV,eAAe,EACf,eAAe,EACf,UAAU,EACV,SAAS,EACT,SAAS,EACT,YAAY,GACb,MAAM,UAAU,CAAC;AAElB;;GAEG;AACH,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AACrF,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AACtF,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AACnF,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC/E,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEjD;;GAEG;AACH,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAChE,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAEzD;;GAEG;AACH,OAAO,EACL,SAAS,EACT,IAAI,EACJ,KAAK,EACL,SAAS,EACT,QAAQ,EACR,WAAW,EACX,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,MAAM,EACN,WAAW,EACX,UAAU,EACV,MAAM,EACN,MAAM,EACN,gBAAgB,EAChB,UAAU,EACV,OAAO,GACR,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,QAAQ,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,oBAAoB,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAChE,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEpC;;GAEG;AACH,OAAO,EACL,YAAY,EACZ,YAAY,EACZ,cAAc,EACd,oBAAoB,EACpB,sBAAsB,EACtB,iBAAiB,EACjB,SAAS,EACT,YAAY,EACZ,aAAa,EACb,mBAAmB,GACpB,MAAM,UAAU,CAAC;AAElB;;GAEG;AACH,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,QAAQ,CAAC"}
|
|
@@ -3,7 +3,6 @@ import { SizeLarge, SizeMedium, SizeSmall } from '../common';
|
|
|
3
3
|
import { Merge } from '../utils';
|
|
4
4
|
export interface InputProps extends Merge<React.ComponentPropsWithRef<'input'>, {
|
|
5
5
|
size?: 'auto' | SizeSmall | SizeMedium | SizeLarge;
|
|
6
|
-
shape?: 'rectangle' | 'pill';
|
|
7
6
|
'aria-invalid'?: boolean;
|
|
8
7
|
}> {
|
|
9
8
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/inputs/Input.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAC7D,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAKjC,MAAM,WAAW,UACf,SAAQ,KAAK,CACX,KAAK,CAAC,qBAAqB,CAAC,OAAO,CAAC,EACpC;IACE,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IACnD,
|
|
1
|
+
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/inputs/Input.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAC7D,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAKjC,MAAM,WAAW,UACf,SAAQ,KAAK,CACX,KAAK,CAAC,qBAAqB,CAAC,OAAO,CAAC,EACpC;IACE,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IACnD,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CACF;CAAG;AAEN,eAAO,MAAM,KAAK,sHAehB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"_common.d.ts","sourceRoot":"","sources":["../../../src/inputs/_common.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAE7D,MAAM,MAAM,oBAAoB,GAAG;IACjC,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;CACpD,CAAC;AAEF,wBAAgB,wBAAwB,CAAC,EAAE,IAAa,EAAE,GAAE,oBAAyB,
|
|
1
|
+
{"version":3,"file":"_common.d.ts","sourceRoot":"","sources":["../../../src/inputs/_common.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAE7D,MAAM,MAAM,oBAAoB,GAAG;IACjC,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;CACpD,CAAC;AAEF,wBAAgB,wBAAwB,CAAC,EAAE,IAAa,EAAE,GAAE,oBAAyB,UAYpF"}
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import { CardProps } from '../common/card';
|
|
3
|
+
import { PromoCardIndicatorProps } from './PromoCardIndicator';
|
|
2
4
|
export type ReferenceType = React.Ref<HTMLInputElement>;
|
|
3
5
|
export type LinkTarget = '_blank' | '_parent' | '_self' | '_top';
|
|
4
6
|
export type RelatedTypes = '' | 'alternate' | 'author' | 'bookmark' | 'external' | 'help' | 'license' | 'next' | 'nofollow' | 'noreferrer' | 'noopener' | 'prev' | 'search' | 'tag';
|
|
@@ -17,12 +19,14 @@ export interface PromoCardCommonProps {
|
|
|
17
19
|
headingLevel?: 'h3' | 'h4' | 'h5' | 'h6';
|
|
18
20
|
/** Optional prop to specify text for the indicator label of the PromoCard */
|
|
19
21
|
indicatorLabel?: string;
|
|
22
|
+
/** Optional prop to specify the icon for the indicator icon of the PromoCard */
|
|
23
|
+
indicatorIcon?: PromoCardIndicatorProps['icon'];
|
|
20
24
|
/** Optional prop to specify an image alt text */
|
|
21
25
|
imageAlt?: string;
|
|
22
26
|
/** Optional prop to specify an image class */
|
|
23
27
|
imageClass?: string;
|
|
24
28
|
/** Optional prop to specify an image source url */
|
|
25
|
-
imageSource
|
|
29
|
+
imageSource?: string;
|
|
26
30
|
/** Specify whether the PromoCard is disabled, or not */
|
|
27
31
|
isDisabled?: boolean;
|
|
28
32
|
/** Specify an onClick event handler */
|
|
@@ -31,8 +35,10 @@ export interface PromoCardCommonProps {
|
|
|
31
35
|
testId?: string;
|
|
32
36
|
/** Required prop to specify the title text of the PromoCard */
|
|
33
37
|
title: string;
|
|
38
|
+
/** Set to false to use body font style for the title */
|
|
39
|
+
useDisplayFont?: boolean;
|
|
34
40
|
}
|
|
35
|
-
export interface PromoCardLinkProps extends PromoCardCommonProps {
|
|
41
|
+
export interface PromoCardLinkProps extends PromoCardCommonProps, Omit<CardProps, 'children'> {
|
|
36
42
|
/**
|
|
37
43
|
* Optional prop to prompts a user to save the linked URL instead of
|
|
38
44
|
* navigating to it
|
|
@@ -57,7 +63,7 @@ export interface PromoCardLinkProps extends PromoCardCommonProps {
|
|
|
57
63
|
reference?: never;
|
|
58
64
|
value?: never;
|
|
59
65
|
}
|
|
60
|
-
export interface PromoCardCheckedProps extends PromoCardCommonProps {
|
|
66
|
+
export interface PromoCardCheckedProps extends PromoCardCommonProps, Omit<CardProps, 'children'> {
|
|
61
67
|
/** Specify the initial checked attribute of the PromoCard */
|
|
62
68
|
defaultChecked?: boolean;
|
|
63
69
|
/** Specify whether the PromoCard is checked, or not */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PromoCard.d.ts","sourceRoot":"","sources":["../../../src/promoCard/PromoCard.tsx"],"names":[],"mappings":"AAEA,OAAO,
|
|
1
|
+
{"version":3,"file":"PromoCard.d.ts","sourceRoot":"","sources":["../../../src/promoCard/PromoCard.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,11 +1,13 @@
|
|
|
1
|
-
import { ReactNode } from 'react';
|
|
1
|
+
import { ReactElement, ReactNode } from 'react';
|
|
2
2
|
export type PromoCardIndicatorProps = {
|
|
3
3
|
/** Optional class name(s) to add to the indicator container. */
|
|
4
4
|
className?: string;
|
|
5
5
|
/** Optional label to display next to the indicator. */
|
|
6
6
|
label?: string;
|
|
7
7
|
/** Optional icon to display in the indicator. */
|
|
8
|
-
icon?: 'check' | 'arrow' | 'download';
|
|
8
|
+
icon?: 'check' | 'arrow' | 'download' | ReactElement;
|
|
9
|
+
/** Optional prop to specify whether the indicator is sized small or not. */
|
|
10
|
+
isSmall?: boolean;
|
|
9
11
|
/** Optional ID to add to the indicator container for testing purposes. */
|
|
10
12
|
testid?: string;
|
|
11
13
|
/** Optional children to display inside the indicator. */
|
|
@@ -20,7 +22,7 @@ export type PromoCardIndicatorProps = {
|
|
|
20
22
|
*
|
|
21
23
|
* @param {string} className - Optional class name(s) to add to the indicator container.
|
|
22
24
|
* @param {string} label - Optional label to display next to the indicator.
|
|
23
|
-
* @param {string} icon - Optional icon to display in the indicator.
|
|
25
|
+
* @param {string | ReactElement} icon - Optional icon to display in the indicator.
|
|
24
26
|
* @param {string} testid - Optional ID to add to the indicator container for testing purposes.
|
|
25
27
|
* @param {ReactNode} children - Optional children to display inside the indicator.
|
|
26
28
|
* @returns {JSX.Element} - The PromoCardIndicator component.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PromoCardIndicator.d.ts","sourceRoot":"","sources":["../../../src/promoCard/PromoCardIndicator.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"PromoCardIndicator.d.ts","sourceRoot":"","sources":["../../../src/promoCard/PromoCardIndicator.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMhD,MAAM,MAAM,uBAAuB,GAAG;IACpC,gEAAgE;IAChE,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,iDAAiD;IACjD,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,UAAU,GAAG,YAAY,CAAC;IAErD,4EAA4E;IAC5E,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,0EAA0E;IAC1E,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,QAAA,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAuCzD,CAAC;AAEF,eAAe,kBAAkB,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-39ab3ec",
|
|
4
4
|
"description": "Neptune React components",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -32,28 +32,28 @@
|
|
|
32
32
|
"@rollup/plugin-json": "^6.0.0",
|
|
33
33
|
"@rollup/plugin-node-resolve": "^15.2.1",
|
|
34
34
|
"@rollup/plugin-typescript": "^11.1.3",
|
|
35
|
-
"@storybook/addon-a11y": "^7.
|
|
36
|
-
"@storybook/addon-actions": "^7.
|
|
37
|
-
"@storybook/addon-essentials": "^7.
|
|
38
|
-
"@storybook/addon-interactions": "^7.
|
|
39
|
-
"@storybook/addon-knobs": "^7.0.
|
|
40
|
-
"@storybook/addon-viewport": "^7.
|
|
41
|
-
"@storybook/addons": "^7.
|
|
42
|
-
"@storybook/api": "^7.
|
|
43
|
-
"@storybook/components": "^7.
|
|
44
|
-
"@storybook/core-events": "^7.
|
|
45
|
-
"@storybook/react": "^7.
|
|
46
|
-
"@storybook/react-webpack5": "^7.
|
|
35
|
+
"@storybook/addon-a11y": "^7.0.6",
|
|
36
|
+
"@storybook/addon-actions": "^7.0.6",
|
|
37
|
+
"@storybook/addon-essentials": "^7.0.6",
|
|
38
|
+
"@storybook/addon-interactions": "^7.0.6",
|
|
39
|
+
"@storybook/addon-knobs": "^7.0.0",
|
|
40
|
+
"@storybook/addon-viewport": "^7.0.6",
|
|
41
|
+
"@storybook/addons": "^7.0.0",
|
|
42
|
+
"@storybook/api": "^7.0.0",
|
|
43
|
+
"@storybook/components": "^7.0.0",
|
|
44
|
+
"@storybook/core-events": "^7.0.0",
|
|
45
|
+
"@storybook/react": "^7.0.6",
|
|
46
|
+
"@storybook/react-webpack5": "^7.0.6",
|
|
47
47
|
"@storybook/testing-library": "^0.1.0",
|
|
48
|
-
"@storybook/theming": "^7.
|
|
49
|
-
"@storybook/types": "^7.
|
|
48
|
+
"@storybook/theming": "^7.0.0",
|
|
49
|
+
"@storybook/types": "^7.0.6",
|
|
50
50
|
"@testing-library/dom": "^7.21.4",
|
|
51
51
|
"@testing-library/jest-dom": "^5.14.1",
|
|
52
52
|
"@testing-library/react": "^12.0.0",
|
|
53
53
|
"@testing-library/react-hooks": "^8.0.0",
|
|
54
54
|
"@testing-library/user-event": "^13.2.1",
|
|
55
55
|
"@transferwise/icons": "^3.7.0",
|
|
56
|
-
"@transferwise/neptune-tokens": "^8.5.
|
|
56
|
+
"@transferwise/neptune-tokens": "^8.5.0",
|
|
57
57
|
"@tsconfig/recommended": "^1.0.2",
|
|
58
58
|
"@types/babel__core": "^7.20.1",
|
|
59
59
|
"@types/jest": "^26.0.20",
|
|
@@ -62,7 +62,6 @@
|
|
|
62
62
|
"@types/react-dom": "^17.0.20",
|
|
63
63
|
"@types/react-transition-group": "4.4.5",
|
|
64
64
|
"@types/testing-library__jest-dom": "^5.14.5",
|
|
65
|
-
"@types/use-sync-external-store": "^0.0.4",
|
|
66
65
|
"@wise/art": "^2.7.0",
|
|
67
66
|
"@wojtekmaj/enzyme-adapter-react-17": "^0.6.3",
|
|
68
67
|
"babel-plugin-formatjs": "^10.5.3",
|
|
@@ -76,15 +75,15 @@
|
|
|
76
75
|
"npm-watch": "^0.11.0",
|
|
77
76
|
"react-intl": "^5.10.0",
|
|
78
77
|
"rollup": "^3.28.1",
|
|
79
|
-
"storybook": "^7.
|
|
78
|
+
"storybook": "^7.0.6",
|
|
80
79
|
"@transferwise/less-config": "3.0.6",
|
|
81
|
-
"@
|
|
82
|
-
"@
|
|
80
|
+
"@transferwise/neptune-css": "14.5.2",
|
|
81
|
+
"@wise/components-theming": "0.8.4"
|
|
83
82
|
},
|
|
84
83
|
"peerDependencies": {
|
|
85
84
|
"@transferwise/icons": "^3.7.0",
|
|
86
85
|
"@transferwise/neptune-css": "^14.5.2",
|
|
87
|
-
"@wise/art": "^2
|
|
86
|
+
"@wise/art": "^2",
|
|
88
87
|
"@wise/components-theming": "^0.8.4",
|
|
89
88
|
"currency-flags": "^4.0.2",
|
|
90
89
|
"react": ">=16.14",
|
|
@@ -98,12 +97,8 @@
|
|
|
98
97
|
},
|
|
99
98
|
"dependencies": {
|
|
100
99
|
"@babel/runtime": "^7.22.15",
|
|
101
|
-
"@floating-ui/react": "^0.25.4",
|
|
102
100
|
"@formatjs/intl-locale": "^2.4.14",
|
|
103
|
-
"@headlessui/react": "^1.7.17",
|
|
104
101
|
"@popperjs/core": "^2.6.0",
|
|
105
|
-
"@radix-ui/react-id": "^1.0.0",
|
|
106
|
-
"@react-aria/overlays": "^3.17.0",
|
|
107
102
|
"@react-spring/web": "~9.6.1",
|
|
108
103
|
"@transferwise/formatting": "^2.1.0",
|
|
109
104
|
"@transferwise/neptune-validation": "^3.1.0",
|
|
@@ -120,8 +115,7 @@
|
|
|
120
115
|
"react-merge-refs": "^1.1.0",
|
|
121
116
|
"react-popper": "^2.2.4",
|
|
122
117
|
"react-required-if": "^1.0.3",
|
|
123
|
-
"react-transition-group": "^4.4.2"
|
|
124
|
-
"use-sync-external-store": "^1.2.0"
|
|
118
|
+
"react-transition-group": "^4.4.2"
|
|
125
119
|
},
|
|
126
120
|
"watch": {
|
|
127
121
|
"build:crowdin-source-file": "src/**/*.messages.js"
|
|
@@ -145,7 +139,7 @@
|
|
|
145
139
|
"build:clean": "rm -rf lib build",
|
|
146
140
|
"build:crowdin-source-file": "formatjs extract 'src/**/*.messages.+(js|ts|tsx)' --out-file src/i18n/en.json --format simple && prettier --find-config-path --write src/i18n/*.json",
|
|
147
141
|
"build:js": "rollup --config --sourcemap",
|
|
148
|
-
"build:generate-types": "node ./scripts/generate-type-declarations.js",
|
|
142
|
+
"build:generate-types": "tsc && node ./scripts/generate-type-declarations.js",
|
|
149
143
|
"build:copy-files": "cpx 'src/**/!(db)/*.{json,svg}' build",
|
|
150
144
|
"build:copy-css": "cpx 'src/main.css' build/ & cpx 'src/**/*.css' build/styles/",
|
|
151
145
|
"build:copy-lang": "cpx 'src/i18n/*.json' build/i18n && cpx 'src/i18n/index.js' build/i18n",
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { Meta, StoryObj } from '@storybook/react';
|
|
2
2
|
import * as wiseIcons from '@transferwise/icons';
|
|
3
|
+
import { Flag } from '@wise/art';
|
|
3
4
|
|
|
4
5
|
import { Size } from '../common';
|
|
5
6
|
import { storyConfig } from '../test-utils';
|
|
@@ -22,10 +23,11 @@ export const Emoji: Story = {
|
|
|
22
23
|
},
|
|
23
24
|
};
|
|
24
25
|
|
|
25
|
-
export const
|
|
26
|
+
export const FlagStory: Story = {
|
|
27
|
+
name: 'Flag',
|
|
26
28
|
render: (args) => (
|
|
27
29
|
<Avatar {...args}>
|
|
28
|
-
<
|
|
30
|
+
<Flag code="GBP" />
|
|
29
31
|
</Avatar>
|
|
30
32
|
),
|
|
31
33
|
args: {
|
|
@@ -38,8 +40,8 @@ export const Flag: Story = {
|
|
|
38
40
|
export const Table: Story = storyConfig(
|
|
39
41
|
{
|
|
40
42
|
render: () => {
|
|
41
|
-
const
|
|
42
|
-
const
|
|
43
|
+
const flagJPY = <Flag code="JPY" />;
|
|
44
|
+
const flagGBP = <Flag code="GBP" />;
|
|
43
45
|
const backgroundColor = '#d6f5e3';
|
|
44
46
|
const emoji = '✈️';
|
|
45
47
|
const initials = 'GN';
|
|
@@ -52,27 +54,27 @@ export const Table: Story = storyConfig(
|
|
|
52
54
|
<tr>
|
|
53
55
|
<td>
|
|
54
56
|
<Avatar size={Size.LARGE} type={AvatarType.THUMBNAIL} outlined>
|
|
55
|
-
|
|
57
|
+
{flagJPY}
|
|
56
58
|
</Avatar>
|
|
57
59
|
</td>
|
|
58
60
|
<td>
|
|
59
61
|
<Avatar size={56} type={AvatarType.THUMBNAIL} outlined>
|
|
60
|
-
|
|
62
|
+
{flagJPY}
|
|
61
63
|
</Avatar>
|
|
62
64
|
</td>
|
|
63
65
|
<td>
|
|
64
66
|
<Avatar size={Size.MEDIUM} type={AvatarType.THUMBNAIL} outlined>
|
|
65
|
-
|
|
67
|
+
{flagJPY}
|
|
66
68
|
</Avatar>
|
|
67
69
|
</td>
|
|
68
70
|
<td>
|
|
69
71
|
<Avatar size={40} type={AvatarType.THUMBNAIL} outlined>
|
|
70
|
-
|
|
72
|
+
{flagJPY}
|
|
71
73
|
</Avatar>
|
|
72
74
|
</td>
|
|
73
75
|
<td>
|
|
74
76
|
<Avatar size={Size.SMALL} type={AvatarType.THUMBNAIL} outlined>
|
|
75
|
-
|
|
77
|
+
{flagJPY}
|
|
76
78
|
</Avatar>
|
|
77
79
|
</td>
|
|
78
80
|
</tr>
|
|
@@ -80,27 +82,27 @@ export const Table: Story = storyConfig(
|
|
|
80
82
|
<tr>
|
|
81
83
|
<td>
|
|
82
84
|
<Avatar size={Size.LARGE} type={AvatarType.THUMBNAIL}>
|
|
83
|
-
|
|
85
|
+
{flagGBP}
|
|
84
86
|
</Avatar>
|
|
85
87
|
</td>
|
|
86
88
|
<td>
|
|
87
89
|
<Avatar size={56} type={AvatarType.THUMBNAIL}>
|
|
88
|
-
|
|
90
|
+
{flagGBP}
|
|
89
91
|
</Avatar>
|
|
90
92
|
</td>
|
|
91
93
|
<td>
|
|
92
94
|
<Avatar size={Size.MEDIUM} type={AvatarType.THUMBNAIL}>
|
|
93
|
-
|
|
95
|
+
{flagGBP}
|
|
94
96
|
</Avatar>
|
|
95
97
|
</td>
|
|
96
98
|
<td>
|
|
97
99
|
<Avatar size={40} type={AvatarType.THUMBNAIL}>
|
|
98
|
-
|
|
100
|
+
{flagGBP}
|
|
99
101
|
</Avatar>
|
|
100
102
|
</td>
|
|
101
103
|
<td>
|
|
102
104
|
<Avatar size={Size.SMALL} type={AvatarType.THUMBNAIL}>
|
|
103
|
-
|
|
105
|
+
{flagGBP}
|
|
104
106
|
</Avatar>
|
|
105
107
|
</td>
|
|
106
108
|
</tr>
|
package/src/common/card/Card.tsx
CHANGED
package/src/common/card/index.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.np-close-button{--ring-outline-offset:0;background:none;border:none;color:#00a2dd;color:var(--color-interactive-accent);height:16px;height:var(--size-16);padding:0;transition:color .15s ease-in-out}.np-close-button--large,.np-close-button--x-large{height:24px;height:var(--size-24)}.np-close-button:hover{color:#008fc9;color:var(--color-interactive-accent-hover)}.np-theme-personal .np-close-button{align-items:center;border-radius:
|
|
1
|
+
.np-close-button{--ring-outline-offset:0;background:none;border:none;color:#00a2dd;color:var(--color-interactive-accent);height:16px;height:var(--size-16);padding:0;transition:color .15s ease-in-out}.np-close-button--large,.np-close-button--x-large{height:24px;height:var(--size-24)}.np-close-button:hover{color:#008fc9;color:var(--color-interactive-accent-hover)}.np-theme-personal .np-close-button{align-items:center;border-radius:50%;border-radius:var(--radius-full);color:var(--color-interactive-primary);display:inline-flex;height:32px;height:var(--size-32);justify-content:center;transition:background-color .1s ease;width:32px;width:var(--size-32)}.np-theme-personal .np-close-button--large{flex-shrink:0;height:40px;height:var(--size-40);width:40px;width:var(--size-40)}.np-theme-personal .np-close-button--x-large{flex-shrink:0;height:48px;height:var(--size-48);width:48px;width:var(--size-48)}.np-theme-personal .np-close-button:not(.disabled,:disabled):hover{background-color:var(--color-background-neutral-hover);color:var(--color-interactive-primary-hover)}.np-theme-personal .np-close-button:not(.disabled,:disabled):active{background-color:var(--color-background-neutral-active);color:var(--color-interactive-primary-active)}
|
package/src/index.ts
CHANGED
|
@@ -3,12 +3,6 @@
|
|
|
3
3
|
*/
|
|
4
4
|
export type { InputProps } from './inputs/Input';
|
|
5
5
|
export type { InputGroupProps } from './inputs/InputGroup';
|
|
6
|
-
export type { SearchInputProps } from './inputs/SearchInput';
|
|
7
|
-
export type {
|
|
8
|
-
SelectInputItem,
|
|
9
|
-
SelectInputOptionContentProps,
|
|
10
|
-
SelectInputProps,
|
|
11
|
-
} from './inputs/SelectInput';
|
|
12
6
|
export type { TextAreaProps } from './inputs/TextArea';
|
|
13
7
|
export type { UploadedFile, UploadError, UploadResponse } from './uploadInput/types';
|
|
14
8
|
export type { ModalProps } from './modal';
|
|
@@ -60,8 +54,6 @@ export { default as Info } from './info';
|
|
|
60
54
|
export { default as InlineAlert } from './inlineAlert';
|
|
61
55
|
export { Input } from './inputs/Input';
|
|
62
56
|
export { InputGroup } from './inputs/InputGroup';
|
|
63
|
-
export { SearchInput } from './inputs/SearchInput';
|
|
64
|
-
export { SelectInput, SelectInputOptionContent } from './inputs/SelectInput';
|
|
65
57
|
export { TextArea } from './inputs/TextArea';
|
|
66
58
|
export { default as InputWithDisplayFormat } from './inputWithDisplayFormat';
|
|
67
59
|
export { default as InstructionsList } from './instructionsList';
|
package/src/inputs/Input.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.np-form-control{--ring-width:1px;--ring-color:var(--color-interactive-secondary);background-color:transparent;border:none;box-shadow:inset 0 0 0 var(--ring-width) var(--ring-color);color:#37517e;color:var(--color-content-primary);min-height:0;padding-left:16px;padding-left:var(--size-16);padding-right:16px;padding-right:var(--size-16);transition-duration:.3s;transition-property:color,opacity,box-shadow;transition-timing-function:ease-in-out}.np-form-control:focus-visible{outline:none}.np-form-control[aria-invalid=true]{--ring-width:2px;--ring-color:var(--color-sentiment-negative)!important}.np-form-control:hover:enabled{--ring-width:2px;--ring-color:var(--color-interactive-secondary-hover)}.np-form-control:focus:enabled{--ring-width:3px;--ring-color:var(--color-interactive-primary)}.np-form-control--size-auto{padding-bottom:12px;padding-bottom:var(--size-12);padding-top:12px;padding-top:var(--size-12)}.np-form-control--size-lg,.np-form-control--size-md,.np-form-control--size-sm{padding-bottom:0!important;padding-top:0!important}.np-form-control--size-sm{height:32px!important;height:var(--size-32)!important}.np-form-control--size-md{height:48px!important;height:var(--size-48)!important}.np-form-control--size-lg{height:72px!important;height:var(--size-72)!important}.np-
|
|
1
|
+
.np-form-control{--ring-width:1px;--ring-color:var(--color-interactive-secondary);background-color:transparent;border:none;box-shadow:inset 0 0 0 var(--ring-width) var(--ring-color);color:#37517e;color:var(--color-content-primary);min-height:0;padding-left:16px;padding-left:var(--size-16);padding-right:16px;padding-right:var(--size-16);transition-duration:.3s;transition-property:color,opacity,box-shadow;transition-timing-function:ease-in-out}.np-form-control:focus-visible{outline:none}.np-form-control[aria-invalid=true]{--ring-width:2px;--ring-color:var(--color-sentiment-negative)!important}.np-form-control:hover:enabled{--ring-width:2px;--ring-color:var(--color-interactive-secondary-hover)}.np-form-control:focus:enabled{--ring-width:3px;--ring-color:var(--color-interactive-primary)}.np-form-control--size-auto{padding-bottom:12px;padding-bottom:var(--size-12);padding-top:12px;padding-top:var(--size-12)}.np-form-control--size-lg,.np-form-control--size-md,.np-form-control--size-sm{padding-bottom:0!important;padding-top:0!important}.np-form-control--size-sm{height:32px!important;height:var(--size-32)!important}.np-form-control--size-md{height:48px!important;height:var(--size-48)!important}.np-form-control--size-lg{height:72px!important;height:var(--size-72)!important}.np-form-control--shape-rectangle{border-radius:10px;border-radius:var(--radius-small)}
|
package/src/inputs/Input.less
CHANGED
|
@@ -1,15 +1 @@
|
|
|
1
1
|
@import "./_common.less";
|
|
2
|
-
|
|
3
|
-
.np-input {
|
|
4
|
-
&::placeholder {
|
|
5
|
-
color: var(--color-content-tertiary);
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
&--shape-rectangle {
|
|
9
|
-
border-radius: var(--radius-small) !important;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
&--shape-pill {
|
|
13
|
-
border-radius: var(--radius-full) !important;
|
|
14
|
-
}
|
|
15
|
-
}
|
package/src/inputs/Input.tsx
CHANGED
|
@@ -12,13 +12,12 @@ export interface InputProps
|
|
|
12
12
|
React.ComponentPropsWithRef<'input'>,
|
|
13
13
|
{
|
|
14
14
|
size?: 'auto' | SizeSmall | SizeMedium | SizeLarge;
|
|
15
|
-
shape?: 'rectangle' | 'pill';
|
|
16
15
|
'aria-invalid'?: boolean;
|
|
17
16
|
}
|
|
18
17
|
> {}
|
|
19
18
|
|
|
20
19
|
export const Input = forwardRef(function Input(
|
|
21
|
-
{ size = 'auto',
|
|
20
|
+
{ size = 'auto', className, ...restProps }: InputProps,
|
|
22
21
|
reference: React.ForwardedRef<HTMLInputElement>,
|
|
23
22
|
) {
|
|
24
23
|
const inputPaddings = useInputPaddings();
|
|
@@ -26,10 +25,7 @@ export const Input = forwardRef(function Input(
|
|
|
26
25
|
return (
|
|
27
26
|
<input
|
|
28
27
|
ref={reference}
|
|
29
|
-
className={classNames(className, formControlClassNameBase({ size })
|
|
30
|
-
'np-input--shape-rectangle': shape === 'rectangle',
|
|
31
|
-
'np-input--shape-pill': shape === 'pill',
|
|
32
|
-
})}
|
|
28
|
+
className={classNames(className, formControlClassNameBase({ size }))}
|
|
33
29
|
// eslint-disable-next-line react/forbid-dom-props
|
|
34
30
|
style={inputPaddings}
|
|
35
31
|
{...restProps}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.np-input-group{border-radius:
|
|
1
|
+
.np-input-group{border-radius:50%;border-radius:var(--radius-full);display:inline-grid;grid-auto-columns:minmax(0,1fr)}.np-input-group>*{grid-column-start:1;grid-row-start:1}.np-input-addon{align-items:center;color:#c9cbce;color:var(--color-interactive-secondary);display:inline-flex;pointer-events:none;transition-duration:.15s;transition-property:color,opacity;transition-timing-function:ease-out;z-index:10}.np-input-group:has(>:is(input,button,select):focus-visible) .np-input-addon{color:var(--color-interactive-primary)}.np-input-group:has(>:is(input,button,select):hover) .np-input-addon{color:#b5b7ba;color:var(--color-interactive-secondary-hover)}.np-input-addon--placement-start{justify-self:start}.np-input-addon--placement-end{justify-self:end}.np-input-addon--interactive>*{pointer-events:auto}.np-input-addon--padding-sm{padding-left:8px;padding-left:var(--size-8);padding-right:8px;padding-right:var(--size-8)}.np-input-addon--padding-md{padding-left:16px;padding-left:var(--size-16);padding-right:16px;padding-right:var(--size-16)}.np-input-addon--padding-md.np-input-addon--placement-start{padding-inline-end:8px;padding-inline-end:var(--size-8)}.np-input-addon--padding-md.np-input-addon--placement-end{padding-inline-start:8px;padding-inline-start:var(--size-8)}
|
|
@@ -21,11 +21,6 @@
|
|
|
21
21
|
transition-timing-function: ease-out;
|
|
22
22
|
transition-duration: 150ms;
|
|
23
23
|
|
|
24
|
-
.np-input-group:disabled &:not(&--interactive) {
|
|
25
|
-
opacity: 0.45;
|
|
26
|
-
mix-blend-mode: luminosity;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
24
|
.np-input-group:has(>:is(input,button,select):focus-visible) & {
|
|
30
25
|
color: var(--color-interactive-primary);
|
|
31
26
|
}
|
package/src/inputs/TextArea.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.np-form-control{--ring-width:1px;--ring-color:var(--color-interactive-secondary);background-color:transparent;border:none;box-shadow:inset 0 0 0 var(--ring-width) var(--ring-color);color:#37517e;color:var(--color-content-primary);min-height:0;padding-left:16px;padding-left:var(--size-16);padding-right:16px;padding-right:var(--size-16);transition-duration:.3s;transition-property:color,opacity,box-shadow;transition-timing-function:ease-in-out}.np-form-control:focus-visible{outline:none}.np-form-control[aria-invalid=true]{--ring-width:2px;--ring-color:var(--color-sentiment-negative)!important}.np-form-control:hover:enabled{--ring-width:2px;--ring-color:var(--color-interactive-secondary-hover)}.np-form-control:focus:enabled{--ring-width:3px;--ring-color:var(--color-interactive-primary)}.np-form-control--size-auto{padding-bottom:12px;padding-bottom:var(--size-12);padding-top:12px;padding-top:var(--size-12)}.np-form-control--size-lg,.np-form-control--size-md,.np-form-control--size-sm{padding-bottom:0!important;padding-top:0!important}.np-form-control--size-sm{height:32px!important;height:var(--size-32)!important}.np-form-control--size-md{height:48px!important;height:var(--size-48)!important}.np-form-control--size-lg{height:72px!important;height:var(--size-72)!important}.np-
|
|
1
|
+
.np-form-control{--ring-width:1px;--ring-color:var(--color-interactive-secondary);background-color:transparent;border:none;box-shadow:inset 0 0 0 var(--ring-width) var(--ring-color);color:#37517e;color:var(--color-content-primary);min-height:0;padding-left:16px;padding-left:var(--size-16);padding-right:16px;padding-right:var(--size-16);transition-duration:.3s;transition-property:color,opacity,box-shadow;transition-timing-function:ease-in-out}.np-form-control:focus-visible{outline:none}.np-form-control[aria-invalid=true]{--ring-width:2px;--ring-color:var(--color-sentiment-negative)!important}.np-form-control:hover:enabled{--ring-width:2px;--ring-color:var(--color-interactive-secondary-hover)}.np-form-control:focus:enabled{--ring-width:3px;--ring-color:var(--color-interactive-primary)}.np-form-control--size-auto{padding-bottom:12px;padding-bottom:var(--size-12);padding-top:12px;padding-top:var(--size-12)}.np-form-control--size-lg,.np-form-control--size-md,.np-form-control--size-sm{padding-bottom:0!important;padding-top:0!important}.np-form-control--size-sm{height:32px!important;height:var(--size-32)!important}.np-form-control--size-md{height:48px!important;height:var(--size-48)!important}.np-form-control--size-lg{height:72px!important;height:var(--size-72)!important}.np-form-control--shape-rectangle{border-radius:10px;border-radius:var(--radius-small)}.np-text-area{min-height:72px;min-height:var(--size-72);overscroll-behavior:none;scroll-padding-bottom:8px;scroll-padding-bottom:var(--size-8);scroll-padding-top:8px;scroll-padding-top:var(--size-8)}
|
package/src/inputs/TextArea.less
CHANGED
package/src/inputs/_common.less
CHANGED
package/src/inputs/_common.ts
CHANGED
|
@@ -16,5 +16,6 @@ export function formControlClassNameBase({ size = 'auto' }: FormControlPropsBase
|
|
|
16
16
|
'np-form-control--size-md np-text-body-large': size === 'md',
|
|
17
17
|
'np-form-control--size-lg np-text-title-subsection': size === 'lg',
|
|
18
18
|
},
|
|
19
|
+
'np-form-control--shape-rectangle',
|
|
19
20
|
);
|
|
20
21
|
}
|