@transferwise/components 0.0.0-experimental-c099750 → 0.0.0-experimental-ff22dc3
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 +106 -98
- package/build/index.esm.js.map +1 -1
- package/build/index.js +106 -98
- package/build/index.js.map +1 -1
- package/build/main.css +1 -1
- package/build/styles/instructionsList/InstructionsList.css +1 -1
- package/build/styles/main.css +1 -1
- package/build/types/index.d.ts +1 -1
- package/build/types/index.d.ts.map +1 -1
- package/build/types/inputs/SelectInput.d.ts +3 -4
- package/build/types/inputs/SelectInput.d.ts.map +1 -1
- package/build/types/inputs/_BottomSheet.d.ts.map +1 -1
- package/build/types/inputs/_Popover.d.ts.map +1 -1
- package/build/types/instructionsList/InstructionsList.d.ts +10 -3
- package/build/types/instructionsList/InstructionsList.d.ts.map +1 -1
- package/package.json +4 -4
- package/src/index.ts +3 -0
- package/src/inputs/SelectInput.tsx +3 -3
- package/src/inputs/_BottomSheet.tsx +47 -37
- package/src/inputs/_Popover.tsx +30 -27
- package/src/instructionsList/InstructionList.story.tsx +39 -0
- package/src/instructionsList/InstructionsList.css +1 -1
- package/src/instructionsList/InstructionsList.less +3 -15
- package/src/instructionsList/InstructionsList.spec.tsx +35 -0
- package/src/instructionsList/InstructionsList.tsx +40 -25
- package/src/main.css +1 -1
- package/src/instructionsList/InstructionList.story.js +0 -27
- package/src/instructionsList/InstructionsList.spec.js +0 -29
package/build/types/index.d.ts
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
export type { InputProps } from './inputs/Input';
|
|
5
5
|
export type { InputGroupProps } from './inputs/InputGroup';
|
|
6
6
|
export type { SearchInputProps } from './inputs/SearchInput';
|
|
7
|
-
export type { SelectInputItem, SelectInputOptionContentProps, SelectInputProps, } from './inputs/SelectInput';
|
|
7
|
+
export type { SelectInputGroupItem, SelectInputItem, SelectInputOptionContentProps, SelectInputOptionItem, SelectInputProps, SelectInputSeparatorItem, } from './inputs/SelectInput';
|
|
8
8
|
export type { TextAreaProps } from './inputs/TextArea';
|
|
9
9
|
export type { UploadedFile, UploadError, UploadResponse } from './uploadInput/types';
|
|
10
10
|
export type { ModalProps } from './modal';
|
|
@@ -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,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,YAAY,EACV,eAAe,EACf,6BAA6B,EAC7B,gBAAgB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
interface SelectInputOptionItem<T = string> {
|
|
2
|
+
export interface SelectInputOptionItem<T = string> {
|
|
3
3
|
type: 'option';
|
|
4
4
|
value: T;
|
|
5
5
|
filterMatchers?: readonly string[];
|
|
6
6
|
disabled?: boolean;
|
|
7
7
|
}
|
|
8
|
-
interface SelectInputGroupItem<T = string> {
|
|
8
|
+
export interface SelectInputGroupItem<T = string> {
|
|
9
9
|
type: 'group';
|
|
10
10
|
label: string;
|
|
11
11
|
options: readonly SelectInputOptionItem<T>[];
|
|
12
12
|
}
|
|
13
|
-
interface SelectInputSeparatorItem {
|
|
13
|
+
export interface SelectInputSeparatorItem {
|
|
14
14
|
type: 'separator';
|
|
15
15
|
}
|
|
16
16
|
export type SelectInputItem<T = string> = SelectInputOptionItem<T> | SelectInputGroupItem<T> | SelectInputSeparatorItem;
|
|
@@ -48,5 +48,4 @@ export interface SelectInputOptionContentProps {
|
|
|
48
48
|
icon?: React.ReactNode;
|
|
49
49
|
}
|
|
50
50
|
export declare function SelectInputOptionContent({ title, note, description, icon, }: SelectInputOptionContentProps): import("react").JSX.Element;
|
|
51
|
-
export {};
|
|
52
51
|
//# sourceMappingURL=SelectInput.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectInput.d.ts","sourceRoot":"","sources":["../../../src/inputs/SelectInput.tsx"],"names":[],"mappings":";AAgDA,
|
|
1
|
+
{"version":3,"file":"SelectInput.d.ts","sourceRoot":"","sources":["../../../src/inputs/SelectInput.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"_BottomSheet.d.ts","sourceRoot":"","sources":["../../../src/inputs/_BottomSheet.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"_BottomSheet.d.ts","sourceRoot":"","sources":["../../../src/inputs/_BottomSheet.tsx"],"names":[],"mappings":";AAkBA,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE;QACrB,GAAG,EAAE,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QAChC,mBAAmB,EAAE,CAAC,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK;YACvE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;SACxB,CAAC;KACH,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAC/C,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,aAAa,EACb,KAAK,EACL,eAAe,EACf,OAAc,EACd,QAAQ,EACR,OAAO,GACR,EAAE,gBAAgB,+BAqGlB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"_Popover.d.ts","sourceRoot":"","sources":["../../../src/inputs/_Popover.tsx"],"names":[],"mappings":";AAAA,OAAO,EAOL,KAAK,IAAI,EAMV,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"_Popover.d.ts","sourceRoot":"","sources":["../../../src/inputs/_Popover.tsx"],"names":[],"mappings":";AAAA,OAAO,EAOL,KAAK,IAAI,EAMV,MAAM,oBAAoB,CAAC;AAS5B,MAAM,WAAW,YAAY;IAC3B,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,IAAI,EAAE,OAAO,CAAC;IACd,aAAa,EAAE,CAAC,IAAI,EAAE;QACpB,GAAG,EAAE,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QAChC,mBAAmB,EAAE,CAAC,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK;YACvE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;SACxB,CAAC;KACH,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAID,wBAAgB,OAAO,CAAC,EACtB,SAAS,EACT,IAAI,EACJ,aAAa,EACb,KAAK,EACL,OAAc,EACd,QAAQ,EACR,OAAO,GACR,EAAE,YAAY,+BAgFd"}
|
|
@@ -1,9 +1,16 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
2
|
import { CommonProps } from '../common';
|
|
3
|
-
type
|
|
3
|
+
type InstructionNode = {
|
|
4
|
+
content: ReactNode;
|
|
5
|
+
['aria-label']: string;
|
|
6
|
+
};
|
|
7
|
+
type Props = CommonProps & ({
|
|
4
8
|
dos?: ReactNode[];
|
|
5
9
|
donts?: ReactNode[];
|
|
6
|
-
}
|
|
7
|
-
|
|
10
|
+
} | {
|
|
11
|
+
dos?: InstructionNode[];
|
|
12
|
+
donts?: InstructionNode[];
|
|
13
|
+
});
|
|
14
|
+
declare const InstructionsList: ({ dos, donts }: Props) => import("react").JSX.Element;
|
|
8
15
|
export default InstructionsList;
|
|
9
16
|
//# sourceMappingURL=InstructionsList.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InstructionsList.d.ts","sourceRoot":"","sources":["../../../src/instructionsList/InstructionsList.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"InstructionsList.d.ts","sourceRoot":"","sources":["../../../src/instructionsList/InstructionsList.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAkB,MAAM,OAAO,CAAC;AAGlD,OAAO,EAAc,WAAW,EAAE,MAAM,WAAW,CAAC;AAEpD,KAAK,eAAe,GAAG;IACrB,OAAO,EAAE,SAAS,CAAC;IACnB,CAAC,YAAY,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,KAAK,KAAK,GAAG,WAAW,GACtB,CACI;IACE,GAAG,CAAC,EAAE,SAAS,EAAE,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;CACrB,GACD;IACE,GAAG,CAAC,EAAE,eAAe,EAAE,CAAC;IACxB,KAAK,CAAC,EAAE,eAAe,EAAE,CAAC;CAC3B,CACJ,CAAC;AAEJ,QAAA,MAAM,gBAAgB,mBAAoB,KAAK,gCAe9C,CAAC;AAsBF,eAAe,gBAAgB,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-ff22dc3",
|
|
4
4
|
"description": "Neptune React components",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -78,12 +78,12 @@
|
|
|
78
78
|
"rollup": "^3.28.1",
|
|
79
79
|
"storybook": "^7.4.5",
|
|
80
80
|
"@transferwise/less-config": "3.0.6",
|
|
81
|
-
"@
|
|
82
|
-
"@
|
|
81
|
+
"@transferwise/neptune-css": "14.6.2",
|
|
82
|
+
"@wise/components-theming": "0.8.4"
|
|
83
83
|
},
|
|
84
84
|
"peerDependencies": {
|
|
85
85
|
"@transferwise/icons": "^3.7.0",
|
|
86
|
-
"@transferwise/neptune-css": "
|
|
86
|
+
"@transferwise/neptune-css": "^14.6.2",
|
|
87
87
|
"@wise/art": "^2.7.0",
|
|
88
88
|
"@wise/components-theming": "^0.8.4",
|
|
89
89
|
"currency-flags": "^4.0.2",
|
package/src/index.ts
CHANGED
|
@@ -5,9 +5,12 @@ export type { InputProps } from './inputs/Input';
|
|
|
5
5
|
export type { InputGroupProps } from './inputs/InputGroup';
|
|
6
6
|
export type { SearchInputProps } from './inputs/SearchInput';
|
|
7
7
|
export type {
|
|
8
|
+
SelectInputGroupItem,
|
|
8
9
|
SelectInputItem,
|
|
9
10
|
SelectInputOptionContentProps,
|
|
11
|
+
SelectInputOptionItem,
|
|
10
12
|
SelectInputProps,
|
|
13
|
+
SelectInputSeparatorItem,
|
|
11
14
|
} from './inputs/SelectInput';
|
|
12
15
|
export type { TextAreaProps } from './inputs/TextArea';
|
|
13
16
|
export type { UploadedFile, UploadError, UploadResponse } from './uploadInput/types';
|
|
@@ -46,20 +46,20 @@ const SelectInputTriggerButtonPropsContext = createContext<{
|
|
|
46
46
|
}>({});
|
|
47
47
|
const SelectInputOptionContentWithinTriggerContext = createContext(false);
|
|
48
48
|
|
|
49
|
-
interface SelectInputOptionItem<T = string> {
|
|
49
|
+
export interface SelectInputOptionItem<T = string> {
|
|
50
50
|
type: 'option';
|
|
51
51
|
value: T;
|
|
52
52
|
filterMatchers?: readonly string[];
|
|
53
53
|
disabled?: boolean;
|
|
54
54
|
}
|
|
55
55
|
|
|
56
|
-
interface SelectInputGroupItem<T = string> {
|
|
56
|
+
export interface SelectInputGroupItem<T = string> {
|
|
57
57
|
type: 'group';
|
|
58
58
|
label: string;
|
|
59
59
|
options: readonly SelectInputOptionItem<T>[];
|
|
60
60
|
}
|
|
61
61
|
|
|
62
|
-
interface SelectInputSeparatorItem {
|
|
62
|
+
export interface SelectInputSeparatorItem {
|
|
63
63
|
type: 'separator';
|
|
64
64
|
}
|
|
65
65
|
|
|
@@ -12,6 +12,7 @@ import classNames from 'classnames';
|
|
|
12
12
|
import { useState } from 'react';
|
|
13
13
|
|
|
14
14
|
import { CloseButton } from '../common/closeButton';
|
|
15
|
+
import FocusBoundary from '../common/focusBoundary/FocusBoundary';
|
|
15
16
|
import { PreventScroll } from '../common/preventScroll/PreventScroll';
|
|
16
17
|
import { Size } from '../common/propsValues/size';
|
|
17
18
|
|
|
@@ -84,47 +85,56 @@ export function BottomSheet({
|
|
|
84
85
|
<div className="np-bottom-sheet-v2-backdrop" />
|
|
85
86
|
</Transition.Child>
|
|
86
87
|
|
|
87
|
-
<
|
|
88
|
-
<
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
88
|
+
<FocusBoundary>
|
|
89
|
+
<FloatingFocusManager
|
|
90
|
+
context={context}
|
|
91
|
+
initialFocus={initialFocusRef}
|
|
92
|
+
guards={false}
|
|
93
|
+
modal={false}
|
|
94
|
+
>
|
|
95
|
+
<div className="np-bottom-sheet-v2">
|
|
96
|
+
<Transition.Child
|
|
97
|
+
className="np-bottom-sheet-v2-content"
|
|
98
|
+
enter="np-bottom-sheet-v2-content--enter"
|
|
99
|
+
enterFrom="np-bottom-sheet-v2-content--enter-from"
|
|
100
|
+
leave="np-bottom-sheet-v2-content--leave"
|
|
101
|
+
leaveTo="np-bottom-sheet-v2-content--leave-to"
|
|
101
102
|
>
|
|
102
|
-
<div className="np-bottom-sheet-v2-header">
|
|
103
|
-
<CloseButton
|
|
104
|
-
size={Size.SMALL}
|
|
105
|
-
onClick={() => {
|
|
106
|
-
onClose?.();
|
|
107
|
-
}}
|
|
108
|
-
/>
|
|
109
|
-
</div>
|
|
110
103
|
<div
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
'np-bottom-sheet-v2-content-inner--padding-md': padding === 'md',
|
|
116
|
-
},
|
|
117
|
-
)}
|
|
104
|
+
key={floatingKey} // Force inner state invalidation on open
|
|
105
|
+
ref={refs.setFloating}
|
|
106
|
+
className="np-bottom-sheet-v2-content-inner-container"
|
|
107
|
+
{...getFloatingProps()}
|
|
118
108
|
>
|
|
119
|
-
|
|
120
|
-
<
|
|
121
|
-
|
|
122
|
-
|
|
109
|
+
<div className="np-bottom-sheet-v2-header">
|
|
110
|
+
<CloseButton
|
|
111
|
+
size={Size.SMALL}
|
|
112
|
+
onClick={() => {
|
|
113
|
+
onClose?.();
|
|
114
|
+
}}
|
|
115
|
+
/>
|
|
116
|
+
</div>
|
|
117
|
+
<div
|
|
118
|
+
className={classNames(
|
|
119
|
+
'np-bottom-sheet-v2-content-inner',
|
|
120
|
+
title && 'np-bottom-sheet-v2-content-inner--has-title',
|
|
121
|
+
{
|
|
122
|
+
'np-bottom-sheet-v2-content-inner--padding-md': padding === 'md',
|
|
123
|
+
},
|
|
124
|
+
)}
|
|
125
|
+
>
|
|
126
|
+
{title ? (
|
|
127
|
+
<h2 className="np-bottom-sheet-v2-title np-text-title-body">{title}</h2>
|
|
128
|
+
) : null}
|
|
129
|
+
<div className="np-bottom-sheet-v2-body np-text-body-default">
|
|
130
|
+
{children}
|
|
131
|
+
</div>
|
|
132
|
+
</div>
|
|
123
133
|
</div>
|
|
124
|
-
</
|
|
125
|
-
</
|
|
126
|
-
</
|
|
127
|
-
</
|
|
134
|
+
</Transition.Child>
|
|
135
|
+
</div>
|
|
136
|
+
</FloatingFocusManager>
|
|
137
|
+
</FocusBoundary>
|
|
128
138
|
</Transition>
|
|
129
139
|
</ThemeProvider>
|
|
130
140
|
</FloatingPortal>
|
package/src/inputs/_Popover.tsx
CHANGED
|
@@ -17,6 +17,7 @@ import { ThemeProvider, useTheme } from '@wise/components-theming';
|
|
|
17
17
|
import classNames from 'classnames';
|
|
18
18
|
import { useState } from 'react';
|
|
19
19
|
|
|
20
|
+
import FocusBoundary from '../common/focusBoundary/FocusBoundary';
|
|
20
21
|
import { PreventScroll } from '../common/preventScroll/PreventScroll';
|
|
21
22
|
|
|
22
23
|
export interface PopoverProps {
|
|
@@ -88,36 +89,38 @@ export function Popover({
|
|
|
88
89
|
|
|
89
90
|
<FloatingPortal>
|
|
90
91
|
<ThemeProvider theme={theme} screenMode={screenMode} isNotRootProvider>
|
|
91
|
-
<
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
>
|
|
100
|
-
<
|
|
101
|
-
key={floatingKey} // Force inner state invalidation on open
|
|
102
|
-
ref={refs.setFloating}
|
|
103
|
-
className="np-popover-v2-container"
|
|
104
|
-
// eslint-disable-next-line react/forbid-dom-props
|
|
105
|
-
style={floatingStyles}
|
|
106
|
-
{...getFloatingProps()}
|
|
107
|
-
>
|
|
92
|
+
<Transition
|
|
93
|
+
show={open}
|
|
94
|
+
leave="transition-opacity"
|
|
95
|
+
leaveTo="opacity-0"
|
|
96
|
+
beforeEnter={() => {
|
|
97
|
+
setFloatingKey((prev) => prev + 1);
|
|
98
|
+
}}
|
|
99
|
+
>
|
|
100
|
+
<FocusBoundary>
|
|
101
|
+
<FloatingFocusManager context={context} guards={false} modal={false}>
|
|
108
102
|
<div
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
103
|
+
key={floatingKey} // Force inner state invalidation on open
|
|
104
|
+
ref={refs.setFloating}
|
|
105
|
+
className="np-popover-v2-container"
|
|
106
|
+
// eslint-disable-next-line react/forbid-dom-props
|
|
107
|
+
style={floatingStyles}
|
|
108
|
+
{...getFloatingProps()}
|
|
112
109
|
>
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
110
|
+
<div
|
|
111
|
+
className={classNames('np-popover-v2', title && 'np-popover-v2--has-title', {
|
|
112
|
+
'np-popover-v2--padding-md': padding === 'md',
|
|
113
|
+
})}
|
|
114
|
+
>
|
|
115
|
+
{title ? (
|
|
116
|
+
<h2 className="np-popover-v2-title np-text-title-body">{title}</h2>
|
|
117
|
+
) : null}
|
|
118
|
+
<div className="np-popover-v2-content np-text-body-default">{children}</div>
|
|
119
|
+
</div>
|
|
117
120
|
</div>
|
|
118
|
-
</
|
|
119
|
-
</
|
|
120
|
-
</
|
|
121
|
+
</FloatingFocusManager>
|
|
122
|
+
</FocusBoundary>
|
|
123
|
+
</Transition>
|
|
121
124
|
</ThemeProvider>
|
|
122
125
|
</FloatingPortal>
|
|
123
126
|
</>
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import Link from '../link';
|
|
2
|
+
|
|
3
|
+
import InstructionsList from './InstructionsList';
|
|
4
|
+
|
|
5
|
+
export default {
|
|
6
|
+
component: InstructionsList,
|
|
7
|
+
title: 'Typography/InstructionsList',
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
export const Basic = () => {
|
|
11
|
+
return (
|
|
12
|
+
<>
|
|
13
|
+
<InstructionsList
|
|
14
|
+
dos={[
|
|
15
|
+
'Do an initial money transfer',
|
|
16
|
+
'Invite at least 3 friends',
|
|
17
|
+
<span key="12">
|
|
18
|
+
Paying extra{' '}
|
|
19
|
+
<Link href="" type="link-large">
|
|
20
|
+
hidden fees
|
|
21
|
+
</Link>{' '}
|
|
22
|
+
for transfers
|
|
23
|
+
</span>,
|
|
24
|
+
]}
|
|
25
|
+
donts={['Paying extra hidden fees for transfers', 'Use bad exchange rate']}
|
|
26
|
+
/>
|
|
27
|
+
<InstructionsList
|
|
28
|
+
dos={[
|
|
29
|
+
{ content: 'Multiple currencies', 'aria-label': 'Supports multiple currencies' },
|
|
30
|
+
{ content: 'Existing recipients', 'aria-label': 'Supports existing recipients' },
|
|
31
|
+
]}
|
|
32
|
+
donts={[
|
|
33
|
+
{ content: 'Create recipients', 'aria-label': "Doesn't support creating recipients" },
|
|
34
|
+
{ content: 'Edit recipients', 'aria-label': "Doesn't support editing recipients" },
|
|
35
|
+
]}
|
|
36
|
+
/>
|
|
37
|
+
</>
|
|
38
|
+
);
|
|
39
|
+
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.tw-instructions{display:flex;flex-direction:column}.tw-instructions .instruction{display:flex;margin-top:8px;margin-top:var(--padding-x-small)}.tw-instructions .instruction .do,.tw-instructions .instruction .dont{flex-shrink:0;margin-bottom:0;margin-right:
|
|
1
|
+
.tw-instructions{display:flex;flex-direction:column}.tw-instructions .instruction{display:flex;margin-top:8px;margin-top:var(--padding-x-small)}.tw-instructions .instruction .do,.tw-instructions .instruction .dont{flex-shrink:0;margin-bottom:0;margin-right:8px;margin-right:var(--padding-x-small)}.tw-instructions .instruction .do{color:var(--color-sentiment-positive)}.tw-instructions .instruction .dont{color:var(--color-sentiment-negative)}
|
|
@@ -9,28 +9,16 @@
|
|
|
9
9
|
.do,
|
|
10
10
|
.dont {
|
|
11
11
|
flex-shrink: 0;
|
|
12
|
-
margin-right: var(--padding-small);
|
|
12
|
+
margin-right: var(--padding-x-small);
|
|
13
13
|
margin-bottom: 0;
|
|
14
|
-
|
|
15
|
-
.np-theme-personal & {
|
|
16
|
-
margin-right: var(--padding-x-small);
|
|
17
|
-
}
|
|
18
14
|
}
|
|
19
15
|
|
|
20
16
|
.do {
|
|
21
|
-
color: var(--color-
|
|
22
|
-
|
|
23
|
-
.np-theme-personal & {
|
|
24
|
-
color: var(--color-sentiment-positive);
|
|
25
|
-
}
|
|
17
|
+
color: var(--color-sentiment-positive);
|
|
26
18
|
}
|
|
27
19
|
|
|
28
20
|
.dont {
|
|
29
|
-
color: var(--color-
|
|
30
|
-
|
|
31
|
-
.np-theme-personal & {
|
|
32
|
-
color: var(--color-sentiment-negative);
|
|
33
|
-
}
|
|
21
|
+
color: var(--color-sentiment-negative);
|
|
34
22
|
}
|
|
35
23
|
}
|
|
36
24
|
}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { render, screen } from '../test-utils';
|
|
2
|
+
|
|
3
|
+
import InstructionsList from '.';
|
|
4
|
+
|
|
5
|
+
describe('InstructionsList', () => {
|
|
6
|
+
it('should render dos list only', () => {
|
|
7
|
+
const dos = ['Test this component', 'With multiple dos'];
|
|
8
|
+
render(<InstructionsList dos={dos} />);
|
|
9
|
+
|
|
10
|
+
expect(screen.getByText(dos[0])).toBeInTheDocument();
|
|
11
|
+
expect(screen.getByText(dos[1])).toBeInTheDocument();
|
|
12
|
+
});
|
|
13
|
+
|
|
14
|
+
it('should render donts list only', () => {
|
|
15
|
+
const donts = ['Card validation', 'ID verification'];
|
|
16
|
+
|
|
17
|
+
render(<InstructionsList donts={donts} />);
|
|
18
|
+
expect(screen.getByText(donts[0])).toBeInTheDocument();
|
|
19
|
+
expect(screen.getByText(donts[1])).toBeInTheDocument();
|
|
20
|
+
});
|
|
21
|
+
|
|
22
|
+
it('should render do/dont lists with description for icons', () => {
|
|
23
|
+
const dos = [{ content: 'Card validation', 'aria-label': 'Provides card validation' }];
|
|
24
|
+
const donts = [{ content: 'ID verification', 'aria-label': 'No ID verification' }];
|
|
25
|
+
|
|
26
|
+
const { container } = render(<InstructionsList dos={dos} donts={donts} />);
|
|
27
|
+
expect(screen.getByText(dos[0].content)).toBeInTheDocument();
|
|
28
|
+
expect(screen.getByText(donts[0].content)).toBeInTheDocument();
|
|
29
|
+
|
|
30
|
+
const instructions = container.querySelectorAll('.instruction');
|
|
31
|
+
expect(instructions).toHaveLength(2);
|
|
32
|
+
expect(instructions[0]).toHaveAttribute('aria-label', dos[0]['aria-label']);
|
|
33
|
+
expect(instructions[1]).toHaveAttribute('aria-label', donts[0]['aria-label']);
|
|
34
|
+
});
|
|
35
|
+
});
|
|
@@ -1,46 +1,61 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import { ReactNode } from 'react';
|
|
1
|
+
import { CrossCircleFill as DontIcon, CheckCircleFill as DoIcon } from '@transferwise/icons';
|
|
2
|
+
import { ReactNode, isValidElement } from 'react';
|
|
4
3
|
|
|
5
4
|
import Body from '../body/Body';
|
|
6
|
-
import { CommonProps } from '../common';
|
|
7
|
-
import { Typography } from '../common/propsValues/typography';
|
|
5
|
+
import { Typography, CommonProps } from '../common';
|
|
8
6
|
|
|
9
|
-
type
|
|
10
|
-
|
|
11
|
-
|
|
7
|
+
type InstructionNode = {
|
|
8
|
+
content: ReactNode;
|
|
9
|
+
['aria-label']: string;
|
|
12
10
|
};
|
|
13
11
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
12
|
+
type Props = CommonProps &
|
|
13
|
+
(
|
|
14
|
+
| {
|
|
15
|
+
dos?: ReactNode[];
|
|
16
|
+
donts?: ReactNode[];
|
|
17
|
+
}
|
|
18
|
+
| {
|
|
19
|
+
dos?: InstructionNode[];
|
|
20
|
+
donts?: InstructionNode[];
|
|
21
|
+
}
|
|
22
|
+
);
|
|
19
23
|
|
|
24
|
+
const InstructionsList = ({ dos, donts }: Props) => {
|
|
20
25
|
return (
|
|
21
26
|
<div className="tw-instructions">
|
|
22
27
|
{dos &&
|
|
23
28
|
dos.map((doThis, index) => (
|
|
24
29
|
// eslint-disable-next-line react/no-array-index-key
|
|
25
|
-
<
|
|
26
|
-
<DoIcon size={24} className="do" />
|
|
27
|
-
<Body className="text-primary" type={Typography.BODY_LARGE}>
|
|
28
|
-
{doThis}
|
|
29
|
-
</Body>
|
|
30
|
-
</div>
|
|
30
|
+
<Instruction key={index} item={doThis} type="do" />
|
|
31
31
|
))}
|
|
32
32
|
{donts &&
|
|
33
33
|
donts.map((dont, index) => (
|
|
34
34
|
// eslint-disable-next-line react/no-array-index-key
|
|
35
|
-
<
|
|
36
|
-
<DontIcon size={24} className="dont" />
|
|
37
|
-
<Body className="text-primary" type={Typography.BODY_LARGE}>
|
|
38
|
-
{dont}
|
|
39
|
-
</Body>
|
|
40
|
-
</div>
|
|
35
|
+
<Instruction key={index} item={dont} type="dont" />
|
|
41
36
|
))}
|
|
42
37
|
</div>
|
|
43
38
|
);
|
|
44
39
|
};
|
|
45
40
|
|
|
41
|
+
function Instruction({ item, type }: { item: ReactNode | InstructionNode; type: 'do' | 'dont' }) {
|
|
42
|
+
const isInstructionNode =
|
|
43
|
+
typeof item === 'object' && item !== null && 'content' in item && 'aria-label' in item;
|
|
44
|
+
return (
|
|
45
|
+
<div
|
|
46
|
+
className="instruction"
|
|
47
|
+
aria-label={isInstructionNode ? (item['aria-label'] as string) : undefined}
|
|
48
|
+
>
|
|
49
|
+
{type === 'do' ? (
|
|
50
|
+
<DoIcon size={24} className={type} />
|
|
51
|
+
) : (
|
|
52
|
+
<DontIcon size={24} className={type} />
|
|
53
|
+
)}
|
|
54
|
+
<Body className="text-primary" type={Typography.BODY_LARGE}>
|
|
55
|
+
{isInstructionNode ? item.content : item}
|
|
56
|
+
</Body>
|
|
57
|
+
</div>
|
|
58
|
+
);
|
|
59
|
+
}
|
|
60
|
+
|
|
46
61
|
export default InstructionsList;
|