@transferwise/components 0.0.0-experimental-32cf8db → 0.0.0-experimental-68c810c
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 +31 -30
- package/build/index.esm.js.map +1 -1
- package/build/index.js +31 -30
- 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/common/polymorphicWithOverrides/PolymorphicWithOverrides.d.ts +3 -0
- package/build/types/common/polymorphicWithOverrides/PolymorphicWithOverrides.d.ts.map +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/instructionsList/InstructionsList.d.ts +10 -3
- package/build/types/instructionsList/InstructionsList.d.ts.map +1 -1
- package/package.json +4 -4
- package/src/common/polymorphicWithOverrides/PolymorphicWithOverrides.tsx +3 -0
- package/src/index.ts +3 -0
- package/src/inputs/SelectInput.tsx +3 -3
- 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
|
@@ -6,5 +6,8 @@ export interface PolymorphicWithOverridesProps {
|
|
|
6
6
|
};
|
|
7
7
|
[key: string]: unknown;
|
|
8
8
|
}
|
|
9
|
+
/**
|
|
10
|
+
* For overcoming the limitations of third-party components with an `as` prop.
|
|
11
|
+
*/
|
|
9
12
|
export declare const PolymorphicWithOverrides: import("react").ForwardRefExoticComponent<Omit<PolymorphicWithOverridesProps, "ref"> & import("react").RefAttributes<Element>>;
|
|
10
13
|
//# sourceMappingURL=PolymorphicWithOverrides.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PolymorphicWithOverrides.d.ts","sourceRoot":"","sources":["../../../../src/common/polymorphicWithOverrides/PolymorphicWithOverrides.tsx"],"names":[],"mappings":";AAEA,MAAM,WAAW,6BAA6B;IAC5C,WAAW,EAAE;QACX,EAAE,EAAE,KAAK,CAAC,WAAW,CAAC;QACtB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;KACxB,CAAC;IACF,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,wBAAwB,gIAKnC,CAAC"}
|
|
1
|
+
{"version":3,"file":"PolymorphicWithOverrides.d.ts","sourceRoot":"","sources":["../../../../src/common/polymorphicWithOverrides/PolymorphicWithOverrides.tsx"],"names":[],"mappings":";AAEA,MAAM,WAAW,6BAA6B;IAC5C,WAAW,EAAE;QACX,EAAE,EAAE,KAAK,CAAC,WAAW,CAAC;QACtB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;KACxB,CAAC;IACF,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED;;GAEG;AACH,eAAO,MAAM,wBAAwB,gIAKnC,CAAC"}
|
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,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-68c810c",
|
|
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": "0.0.0-experimental-68c810c",
|
|
82
|
+
"@wise/components-theming": "0.8.4"
|
|
83
83
|
},
|
|
84
84
|
"peerDependencies": {
|
|
85
85
|
"@transferwise/icons": "^3.7.0",
|
|
86
|
-
"@transferwise/neptune-css": "0.0.0-experimental-
|
|
86
|
+
"@transferwise/neptune-css": "0.0.0-experimental-68c810c",
|
|
87
87
|
"@wise/art": "^2.7.0",
|
|
88
88
|
"@wise/components-theming": "^0.8.4",
|
|
89
89
|
"currency-flags": "^4.0.2",
|
|
@@ -8,6 +8,9 @@ export interface PolymorphicWithOverridesProps {
|
|
|
8
8
|
[key: string]: unknown;
|
|
9
9
|
}
|
|
10
10
|
|
|
11
|
+
/**
|
|
12
|
+
* For overcoming the limitations of third-party components with an `as` prop.
|
|
13
|
+
*/
|
|
11
14
|
export const PolymorphicWithOverrides = forwardRef(function PolymorphicWithOverrides(
|
|
12
15
|
{ __overrides: { as: Element, ...restOverrides }, ...restProps }: PolymorphicWithOverridesProps,
|
|
13
16
|
ref: React.ForwardedRef<Element>,
|
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
|
|
|
@@ -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;
|