@transferwise/components 46.95.1 → 46.95.2
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/select/option/Option.js +3 -1
- package/build/select/option/Option.js.map +1 -1
- package/build/select/option/Option.mjs +3 -1
- package/build/select/option/Option.mjs.map +1 -1
- package/build/types/select/option/Option.d.ts +2 -1
- package/build/types/select/option/Option.d.ts.map +1 -1
- package/package.json +4 -4
- package/src/select/option/Option.spec.tsx +51 -0
- package/src/select/option/Option.tsx +3 -1
- package/src/select/option/Option.spec.js +0 -43
|
@@ -36,7 +36,8 @@ function Option({
|
|
|
36
36
|
note = '',
|
|
37
37
|
secondary = '',
|
|
38
38
|
icon,
|
|
39
|
-
selected = false
|
|
39
|
+
selected = false,
|
|
40
|
+
testId
|
|
40
41
|
}) {
|
|
41
42
|
const iconElement = icon ? /*#__PURE__*/React.cloneElement(icon, {
|
|
42
43
|
size: 24,
|
|
@@ -61,6 +62,7 @@ function Option({
|
|
|
61
62
|
});
|
|
62
63
|
return iconElement ? /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
63
64
|
className: "d-flex np-option-content",
|
|
65
|
+
"data-testid": testId,
|
|
64
66
|
children: [/*#__PURE__*/jsxRuntime.jsx("div", {
|
|
65
67
|
className: `d-flex flex-column${selected ? ' justify-content-center' : ''}`,
|
|
66
68
|
children: iconElement
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Option.js","sources":["../../../src/select/option/Option.tsx"],"sourcesContent":["import { IdIconProps } from '@transferwise/icons';\nimport { Flag } from '@wise/art';\nimport { clsx } from 'clsx';\nimport { cloneElement, ReactElement, ReactNode } from 'react';\n\nimport Body from '../../body';\nimport { Typography } from '../../common';\n\nexport type Props<T> = {\n label: ReactNode;\n value: T;\n currency?: string;\n note?: ReactNode;\n secondary?: ReactNode;\n icon?: ReactNode;\n /** @deprecated */\n classNames?: Record<string, string>;\n selected?: boolean;\n};\n\nfunction Option<T>({\n label,\n currency = '',\n note = '',\n secondary = '',\n icon,\n selected = false,\n}: Props<T>) {\n const iconElement = icon\n ? cloneElement(icon as ReactElement<IdIconProps>, {\n size: 24,\n className: 'tw-icon',\n })\n : currency && <Flag code={currency.toLowerCase()} intrinsicSize={24} />;\n\n const titleAndNoteElement = (\n <Body as=\"span\" type={Typography.BODY_LARGE} className={selected ? 'text-ellipsis' : undefined}>\n {label}\n {note && (\n <Body as=\"span\" className=\"m-l-1\">\n {note}\n </Body>\n )}\n </Body>\n );\n\n const secondaryElement = secondary && (\n <Body className={clsx(selected && 'text-ellipsis')}>{secondary}</Body>\n );\n\n return iconElement ? (\n <div className=\"d-flex np-option-content\">\n <div className={`d-flex flex-column${selected ? ' justify-content-center' : ''}`}>\n {iconElement}\n </div>\n <div className=\"d-flex flex-column justify-content-center\">\n {titleAndNoteElement}\n {secondaryElement}\n </div>\n </div>\n ) : (\n <>\n {iconElement}\n {titleAndNoteElement}\n {secondaryElement}\n </>\n );\n}\n\nexport default Option;\n"],"names":["Option","label","currency","note","secondary","icon","selected","iconElement","cloneElement","size","className","_jsx","Flag","code","toLowerCase","intrinsicSize","titleAndNoteElement","_jsxs","Body","as","type","Typography","BODY_LARGE","undefined","children","secondaryElement","clsx","_Fragment"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"Option.js","sources":["../../../src/select/option/Option.tsx"],"sourcesContent":["import { IdIconProps } from '@transferwise/icons';\nimport { Flag } from '@wise/art';\nimport { clsx } from 'clsx';\nimport { cloneElement, ReactElement, ReactNode } from 'react';\n\nimport Body from '../../body';\nimport { Typography } from '../../common';\n\nexport type Props<T> = {\n label: ReactNode;\n value: T;\n currency?: string;\n note?: ReactNode;\n secondary?: ReactNode;\n icon?: ReactNode;\n /** @deprecated */\n classNames?: Record<string, string>;\n selected?: boolean;\n testId?: string;\n};\n\nfunction Option<T>({\n label,\n currency = '',\n note = '',\n secondary = '',\n icon,\n selected = false,\n testId,\n}: Props<T>) {\n const iconElement = icon\n ? cloneElement(icon as ReactElement<IdIconProps>, {\n size: 24,\n className: 'tw-icon',\n })\n : currency && <Flag code={currency.toLowerCase()} intrinsicSize={24} />;\n\n const titleAndNoteElement = (\n <Body as=\"span\" type={Typography.BODY_LARGE} className={selected ? 'text-ellipsis' : undefined}>\n {label}\n {note && (\n <Body as=\"span\" className=\"m-l-1\">\n {note}\n </Body>\n )}\n </Body>\n );\n\n const secondaryElement = secondary && (\n <Body className={clsx(selected && 'text-ellipsis')}>{secondary}</Body>\n );\n\n return iconElement ? (\n <div className=\"d-flex np-option-content\" data-testid={testId}>\n <div className={`d-flex flex-column${selected ? ' justify-content-center' : ''}`}>\n {iconElement}\n </div>\n <div className=\"d-flex flex-column justify-content-center\">\n {titleAndNoteElement}\n {secondaryElement}\n </div>\n </div>\n ) : (\n <>\n {iconElement}\n {titleAndNoteElement}\n {secondaryElement}\n </>\n );\n}\n\nexport default Option;\n"],"names":["Option","label","currency","note","secondary","icon","selected","testId","iconElement","cloneElement","size","className","_jsx","Flag","code","toLowerCase","intrinsicSize","titleAndNoteElement","_jsxs","Body","as","type","Typography","BODY_LARGE","undefined","children","secondaryElement","clsx","_Fragment"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,SAASA,MAAMA,CAAI;EACjBC,KAAK;AACLC,EAAAA,QAAQ,GAAG,EAAE;AACbC,EAAAA,IAAI,GAAG,EAAE;AACTC,EAAAA,SAAS,GAAG,EAAE;EACdC,IAAI;AACJC,EAAAA,QAAQ,GAAG,KAAK;AAChBC,EAAAA,MAAAA;AACS,CAAA,EAAA;AACT,EAAA,MAAMC,WAAW,GAAGH,IAAI,gBACpBI,kBAAY,CAACJ,IAAiC,EAAE;AAC9CK,IAAAA,IAAI,EAAE,EAAE;AACRC,IAAAA,SAAS,EAAE,SAAA;GACZ,CAAC,GACFT,QAAQ,iBAAIU,cAAA,CAACC,QAAI,EAAA;AAACC,IAAAA,IAAI,EAAEZ,QAAQ,CAACa,WAAW,EAAG;AAACC,IAAAA,aAAa,EAAE,EAAA;AAAG,GAAA,CAAG,CAAA;AAEzE,EAAA,MAAMC,mBAAmB,gBACvBC,eAAA,CAACC,YAAI,EAAA;AAACC,IAAAA,EAAE,EAAC,MAAM;IAACC,IAAI,EAAEC,qBAAU,CAACC,UAAW;AAACZ,IAAAA,SAAS,EAAEL,QAAQ,GAAG,eAAe,GAAGkB,SAAU;AAAAC,IAAAA,QAAA,GAC5FxB,KAAK,EACLE,IAAI,iBACHS,cAAA,CAACO,YAAI,EAAA;AAACC,MAAAA,EAAE,EAAC,MAAM;AAACT,MAAAA,SAAS,EAAC,OAAO;AAAAc,MAAAA,QAAA,EAC9BtB,IAAAA;AAAI,KACD,CACP,CAAA;AAAA,GACG,CACP,CAAA;AAED,EAAA,MAAMuB,gBAAgB,GAAGtB,SAAS,iBAChCQ,cAAA,CAACO,YAAI,EAAA;AAACR,IAAAA,SAAS,EAAEgB,SAAI,CAACrB,QAAQ,IAAI,eAAe,CAAE;AAAAmB,IAAAA,QAAA,EAAErB,SAAAA;AAAS,GAAO,CACtE,CAAA;EAED,OAAOI,WAAW,gBAChBU,eAAA,CAAA,KAAA,EAAA;AAAKP,IAAAA,SAAS,EAAC,0BAA0B;AAAC,IAAA,aAAA,EAAaJ,MAAO;AAAAkB,IAAAA,QAAA,gBAC5Db,cAAA,CAAA,KAAA,EAAA;AAAKD,MAAAA,SAAS,EAAE,CAAqBL,kBAAAA,EAAAA,QAAQ,GAAG,yBAAyB,GAAG,EAAE,CAAG,CAAA;AAAAmB,MAAAA,QAAA,EAC9EjB,WAAAA;KACE,CACL,eAAAU,eAAA,CAAA,KAAA,EAAA;AAAKP,MAAAA,SAAS,EAAC,2CAA2C;MAAAc,QAAA,EAAA,CACvDR,mBAAmB,EACnBS,gBAAgB,CAAA;AAAA,KACd,CACP,CAAA;AAAA,GAAK,CAAC,gBAENR,eAAA,CAAAU,mBAAA,EAAA;AAAAH,IAAAA,QAAA,EACGjB,CAAAA,WAAW,EACXS,mBAAmB,EACnBS,gBAAgB,CAAA;AAAA,GACnB,CACD,CAAA;AACH;;;;"}
|
|
@@ -32,7 +32,8 @@ function Option({
|
|
|
32
32
|
note = '',
|
|
33
33
|
secondary = '',
|
|
34
34
|
icon,
|
|
35
|
-
selected = false
|
|
35
|
+
selected = false,
|
|
36
|
+
testId
|
|
36
37
|
}) {
|
|
37
38
|
const iconElement = icon ? /*#__PURE__*/cloneElement(icon, {
|
|
38
39
|
size: 24,
|
|
@@ -57,6 +58,7 @@ function Option({
|
|
|
57
58
|
});
|
|
58
59
|
return iconElement ? /*#__PURE__*/jsxs("div", {
|
|
59
60
|
className: "d-flex np-option-content",
|
|
61
|
+
"data-testid": testId,
|
|
60
62
|
children: [/*#__PURE__*/jsx("div", {
|
|
61
63
|
className: `d-flex flex-column${selected ? ' justify-content-center' : ''}`,
|
|
62
64
|
children: iconElement
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Option.mjs","sources":["../../../src/select/option/Option.tsx"],"sourcesContent":["import { IdIconProps } from '@transferwise/icons';\nimport { Flag } from '@wise/art';\nimport { clsx } from 'clsx';\nimport { cloneElement, ReactElement, ReactNode } from 'react';\n\nimport Body from '../../body';\nimport { Typography } from '../../common';\n\nexport type Props<T> = {\n label: ReactNode;\n value: T;\n currency?: string;\n note?: ReactNode;\n secondary?: ReactNode;\n icon?: ReactNode;\n /** @deprecated */\n classNames?: Record<string, string>;\n selected?: boolean;\n};\n\nfunction Option<T>({\n label,\n currency = '',\n note = '',\n secondary = '',\n icon,\n selected = false,\n}: Props<T>) {\n const iconElement = icon\n ? cloneElement(icon as ReactElement<IdIconProps>, {\n size: 24,\n className: 'tw-icon',\n })\n : currency && <Flag code={currency.toLowerCase()} intrinsicSize={24} />;\n\n const titleAndNoteElement = (\n <Body as=\"span\" type={Typography.BODY_LARGE} className={selected ? 'text-ellipsis' : undefined}>\n {label}\n {note && (\n <Body as=\"span\" className=\"m-l-1\">\n {note}\n </Body>\n )}\n </Body>\n );\n\n const secondaryElement = secondary && (\n <Body className={clsx(selected && 'text-ellipsis')}>{secondary}</Body>\n );\n\n return iconElement ? (\n <div className=\"d-flex np-option-content\">\n <div className={`d-flex flex-column${selected ? ' justify-content-center' : ''}`}>\n {iconElement}\n </div>\n <div className=\"d-flex flex-column justify-content-center\">\n {titleAndNoteElement}\n {secondaryElement}\n </div>\n </div>\n ) : (\n <>\n {iconElement}\n {titleAndNoteElement}\n {secondaryElement}\n </>\n );\n}\n\nexport default Option;\n"],"names":["Option","label","currency","note","secondary","icon","selected","iconElement","cloneElement","size","className","_jsx","Flag","code","toLowerCase","intrinsicSize","titleAndNoteElement","_jsxs","Body","as","type","Typography","BODY_LARGE","undefined","children","secondaryElement","clsx","_Fragment"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"Option.mjs","sources":["../../../src/select/option/Option.tsx"],"sourcesContent":["import { IdIconProps } from '@transferwise/icons';\nimport { Flag } from '@wise/art';\nimport { clsx } from 'clsx';\nimport { cloneElement, ReactElement, ReactNode } from 'react';\n\nimport Body from '../../body';\nimport { Typography } from '../../common';\n\nexport type Props<T> = {\n label: ReactNode;\n value: T;\n currency?: string;\n note?: ReactNode;\n secondary?: ReactNode;\n icon?: ReactNode;\n /** @deprecated */\n classNames?: Record<string, string>;\n selected?: boolean;\n testId?: string;\n};\n\nfunction Option<T>({\n label,\n currency = '',\n note = '',\n secondary = '',\n icon,\n selected = false,\n testId,\n}: Props<T>) {\n const iconElement = icon\n ? cloneElement(icon as ReactElement<IdIconProps>, {\n size: 24,\n className: 'tw-icon',\n })\n : currency && <Flag code={currency.toLowerCase()} intrinsicSize={24} />;\n\n const titleAndNoteElement = (\n <Body as=\"span\" type={Typography.BODY_LARGE} className={selected ? 'text-ellipsis' : undefined}>\n {label}\n {note && (\n <Body as=\"span\" className=\"m-l-1\">\n {note}\n </Body>\n )}\n </Body>\n );\n\n const secondaryElement = secondary && (\n <Body className={clsx(selected && 'text-ellipsis')}>{secondary}</Body>\n );\n\n return iconElement ? (\n <div className=\"d-flex np-option-content\" data-testid={testId}>\n <div className={`d-flex flex-column${selected ? ' justify-content-center' : ''}`}>\n {iconElement}\n </div>\n <div className=\"d-flex flex-column justify-content-center\">\n {titleAndNoteElement}\n {secondaryElement}\n </div>\n </div>\n ) : (\n <>\n {iconElement}\n {titleAndNoteElement}\n {secondaryElement}\n </>\n );\n}\n\nexport default Option;\n"],"names":["Option","label","currency","note","secondary","icon","selected","testId","iconElement","cloneElement","size","className","_jsx","Flag","code","toLowerCase","intrinsicSize","titleAndNoteElement","_jsxs","Body","as","type","Typography","BODY_LARGE","undefined","children","secondaryElement","clsx","_Fragment"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,SAASA,MAAMA,CAAI;EACjBC,KAAK;AACLC,EAAAA,QAAQ,GAAG,EAAE;AACbC,EAAAA,IAAI,GAAG,EAAE;AACTC,EAAAA,SAAS,GAAG,EAAE;EACdC,IAAI;AACJC,EAAAA,QAAQ,GAAG,KAAK;AAChBC,EAAAA,MAAAA;AACS,CAAA,EAAA;AACT,EAAA,MAAMC,WAAW,GAAGH,IAAI,gBACpBI,YAAY,CAACJ,IAAiC,EAAE;AAC9CK,IAAAA,IAAI,EAAE,EAAE;AACRC,IAAAA,SAAS,EAAE,SAAA;GACZ,CAAC,GACFT,QAAQ,iBAAIU,GAAA,CAACC,IAAI,EAAA;AAACC,IAAAA,IAAI,EAAEZ,QAAQ,CAACa,WAAW,EAAG;AAACC,IAAAA,aAAa,EAAE,EAAA;AAAG,GAAA,CAAG,CAAA;AAEzE,EAAA,MAAMC,mBAAmB,gBACvBC,IAAA,CAACC,IAAI,EAAA;AAACC,IAAAA,EAAE,EAAC,MAAM;IAACC,IAAI,EAAEC,UAAU,CAACC,UAAW;AAACZ,IAAAA,SAAS,EAAEL,QAAQ,GAAG,eAAe,GAAGkB,SAAU;AAAAC,IAAAA,QAAA,GAC5FxB,KAAK,EACLE,IAAI,iBACHS,GAAA,CAACO,IAAI,EAAA;AAACC,MAAAA,EAAE,EAAC,MAAM;AAACT,MAAAA,SAAS,EAAC,OAAO;AAAAc,MAAAA,QAAA,EAC9BtB,IAAAA;AAAI,KACD,CACP,CAAA;AAAA,GACG,CACP,CAAA;AAED,EAAA,MAAMuB,gBAAgB,GAAGtB,SAAS,iBAChCQ,GAAA,CAACO,IAAI,EAAA;AAACR,IAAAA,SAAS,EAAEgB,IAAI,CAACrB,QAAQ,IAAI,eAAe,CAAE;AAAAmB,IAAAA,QAAA,EAAErB,SAAAA;AAAS,GAAO,CACtE,CAAA;EAED,OAAOI,WAAW,gBAChBU,IAAA,CAAA,KAAA,EAAA;AAAKP,IAAAA,SAAS,EAAC,0BAA0B;AAAC,IAAA,aAAA,EAAaJ,MAAO;AAAAkB,IAAAA,QAAA,gBAC5Db,GAAA,CAAA,KAAA,EAAA;AAAKD,MAAAA,SAAS,EAAE,CAAqBL,kBAAAA,EAAAA,QAAQ,GAAG,yBAAyB,GAAG,EAAE,CAAG,CAAA;AAAAmB,MAAAA,QAAA,EAC9EjB,WAAAA;KACE,CACL,eAAAU,IAAA,CAAA,KAAA,EAAA;AAAKP,MAAAA,SAAS,EAAC,2CAA2C;MAAAc,QAAA,EAAA,CACvDR,mBAAmB,EACnBS,gBAAgB,CAAA;AAAA,KACd,CACP,CAAA;AAAA,GAAK,CAAC,gBAENR,IAAA,CAAAU,QAAA,EAAA;AAAAH,IAAAA,QAAA,EACGjB,CAAAA,WAAW,EACXS,mBAAmB,EACnBS,gBAAgB,CAAA;AAAA,GACnB,CACD,CAAA;AACH;;;;"}
|
|
@@ -9,7 +9,8 @@ export type Props<T> = {
|
|
|
9
9
|
/** @deprecated */
|
|
10
10
|
classNames?: Record<string, string>;
|
|
11
11
|
selected?: boolean;
|
|
12
|
+
testId?: string;
|
|
12
13
|
};
|
|
13
|
-
declare function Option<T>({ label, currency, note, secondary, icon, selected, }: Props<T>): import("react").JSX.Element;
|
|
14
|
+
declare function Option<T>({ label, currency, note, secondary, icon, selected, testId, }: Props<T>): import("react").JSX.Element;
|
|
14
15
|
export default Option;
|
|
15
16
|
//# sourceMappingURL=Option.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Option.d.ts","sourceRoot":"","sources":["../../../../src/select/option/Option.tsx"],"names":[],"mappings":"AAGA,OAAO,EAA8B,SAAS,EAAE,MAAM,OAAO,CAAC;AAK9D,MAAM,MAAM,KAAK,CAAC,CAAC,IAAI;IACrB,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,CAAC,CAAC;IACT,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,kBAAkB;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Option.d.ts","sourceRoot":"","sources":["../../../../src/select/option/Option.tsx"],"names":[],"mappings":"AAGA,OAAO,EAA8B,SAAS,EAAE,MAAM,OAAO,CAAC;AAK9D,MAAM,MAAM,KAAK,CAAC,CAAC,IAAI;IACrB,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,CAAC,CAAC;IACT,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,kBAAkB;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,iBAAS,MAAM,CAAC,CAAC,EAAE,EACjB,KAAK,EACL,QAAa,EACb,IAAS,EACT,SAAc,EACd,IAAI,EACJ,QAAgB,EAChB,MAAM,GACP,EAAE,KAAK,CAAC,CAAC,CAAC,+BAwCV;AAED,eAAe,MAAM,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@transferwise/components",
|
|
3
|
-
"version": "46.95.
|
|
3
|
+
"version": "46.95.2",
|
|
4
4
|
"description": "Neptune React components",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -68,7 +68,7 @@
|
|
|
68
68
|
"@testing-library/jest-dom": "^6.4.6",
|
|
69
69
|
"@testing-library/react": "^16.0.0",
|
|
70
70
|
"@testing-library/user-event": "^14.5.2",
|
|
71
|
-
"@transferwise/icons": "^3.
|
|
71
|
+
"@transferwise/icons": "^3.20.0",
|
|
72
72
|
"@tsconfig/recommended": "^1.0.7",
|
|
73
73
|
"@types/babel__core": "^7.20.5",
|
|
74
74
|
"@types/commonmark": "^0.27.9",
|
|
@@ -95,12 +95,12 @@
|
|
|
95
95
|
"rollup-preserve-directives": "^1.1.1",
|
|
96
96
|
"storybook": "^8.2.2",
|
|
97
97
|
"@transferwise/less-config": "3.1.1",
|
|
98
|
-
"@transferwise/neptune-css": "14.24.
|
|
98
|
+
"@transferwise/neptune-css": "14.24.1",
|
|
99
99
|
"@wise/components-theming": "1.6.2",
|
|
100
100
|
"@wise/wds-configs": "0.0.0"
|
|
101
101
|
},
|
|
102
102
|
"peerDependencies": {
|
|
103
|
-
"@transferwise/icons": "^3.
|
|
103
|
+
"@transferwise/icons": "^3.20.0",
|
|
104
104
|
"@transferwise/neptune-css": "^14.9.6",
|
|
105
105
|
"@wise/art": "^2.16",
|
|
106
106
|
"@wise/components-theming": "^1.0.0",
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { render, screen } from '@testing-library/react';
|
|
3
|
+
import { Person as ProfileIcon } from '@transferwise/icons';
|
|
4
|
+
|
|
5
|
+
import Option, { Props as OptionProps } from './Option';
|
|
6
|
+
|
|
7
|
+
describe('Option', () => {
|
|
8
|
+
const defaultProps: OptionProps<string> = {
|
|
9
|
+
testId: 'test-option',
|
|
10
|
+
label: 'Option Label',
|
|
11
|
+
value: 'option-value',
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
const renderOption = (props: Partial<OptionProps<string>> = {}) => {
|
|
15
|
+
return render(<Option {...defaultProps} {...props} />);
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
it('should render the Option component', () => {
|
|
19
|
+
renderOption();
|
|
20
|
+
expect(screen.getByText('Option Label')).toBeInTheDocument();
|
|
21
|
+
});
|
|
22
|
+
|
|
23
|
+
it('should render the given note', () => {
|
|
24
|
+
renderOption({ note: 'Note Text' });
|
|
25
|
+
expect(screen.getByText('Note Text')).toBeInTheDocument();
|
|
26
|
+
});
|
|
27
|
+
|
|
28
|
+
it('should render the given secondary text', () => {
|
|
29
|
+
renderOption({ secondary: 'Secondary Text' });
|
|
30
|
+
expect(screen.getByText('Secondary Text')).toBeInTheDocument();
|
|
31
|
+
});
|
|
32
|
+
|
|
33
|
+
it('should render the given icon', () => {
|
|
34
|
+
renderOption({ icon: <ProfileIcon /> });
|
|
35
|
+
const optionElement = screen.getByTestId('test-option');
|
|
36
|
+
expect(optionElement.querySelector('svg')).toBeInTheDocument();
|
|
37
|
+
});
|
|
38
|
+
|
|
39
|
+
it('should render the given currency flag for a given currency', () => {
|
|
40
|
+
renderOption({ currency: 'USD' });
|
|
41
|
+
const optionElement = screen.getByTestId('test-option');
|
|
42
|
+
expect(optionElement.querySelector('img')).toBeInTheDocument();
|
|
43
|
+
});
|
|
44
|
+
|
|
45
|
+
it('should override the currency flag with the given icon', () => {
|
|
46
|
+
renderOption({ currency: 'USD', icon: <ProfileIcon /> });
|
|
47
|
+
const optionElement = screen.getByTestId('test-option');
|
|
48
|
+
expect(optionElement.querySelector('svg')).toBeInTheDocument();
|
|
49
|
+
expect(optionElement.querySelectorAll('svg')).toHaveLength(1);
|
|
50
|
+
});
|
|
51
|
+
});
|
|
@@ -16,6 +16,7 @@ export type Props<T> = {
|
|
|
16
16
|
/** @deprecated */
|
|
17
17
|
classNames?: Record<string, string>;
|
|
18
18
|
selected?: boolean;
|
|
19
|
+
testId?: string;
|
|
19
20
|
};
|
|
20
21
|
|
|
21
22
|
function Option<T>({
|
|
@@ -25,6 +26,7 @@ function Option<T>({
|
|
|
25
26
|
secondary = '',
|
|
26
27
|
icon,
|
|
27
28
|
selected = false,
|
|
29
|
+
testId,
|
|
28
30
|
}: Props<T>) {
|
|
29
31
|
const iconElement = icon
|
|
30
32
|
? cloneElement(icon as ReactElement<IdIconProps>, {
|
|
@@ -49,7 +51,7 @@ function Option<T>({
|
|
|
49
51
|
);
|
|
50
52
|
|
|
51
53
|
return iconElement ? (
|
|
52
|
-
<div className="d-flex np-option-content">
|
|
54
|
+
<div className="d-flex np-option-content" data-testid={testId}>
|
|
53
55
|
<div className={`d-flex flex-column${selected ? ' justify-content-center' : ''}`}>
|
|
54
56
|
{iconElement}
|
|
55
57
|
</div>
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
import { Person as ProfileIcon } from '@transferwise/icons';
|
|
2
|
-
import { Flag } from '@wise/art';
|
|
3
|
-
import { shallow } from 'enzyme';
|
|
4
|
-
|
|
5
|
-
import Body from '../../body';
|
|
6
|
-
|
|
7
|
-
import Option from './Option';
|
|
8
|
-
|
|
9
|
-
describe('option', () => {
|
|
10
|
-
let component;
|
|
11
|
-
let props;
|
|
12
|
-
|
|
13
|
-
beforeEach(() => {
|
|
14
|
-
props = { label: 'hello' };
|
|
15
|
-
component = shallow(<Option {...props} />);
|
|
16
|
-
});
|
|
17
|
-
|
|
18
|
-
it('renders the given small note', () => {
|
|
19
|
-
component.setProps({ note: 'whadup' });
|
|
20
|
-
expect(component.find(Body).last().props().children).toBe('whadup');
|
|
21
|
-
});
|
|
22
|
-
|
|
23
|
-
it('renders the given secondary text in a separate line', () => {
|
|
24
|
-
component.setProps({ secondary: 'secondary text' });
|
|
25
|
-
expect(component.find(Body).last().props().children).toBe('secondary text');
|
|
26
|
-
});
|
|
27
|
-
|
|
28
|
-
it('renders a given icon', () => {
|
|
29
|
-
component.setProps({ icon: <ProfileIcon /> });
|
|
30
|
-
expect(component.find(ProfileIcon)).toHaveLength(1);
|
|
31
|
-
});
|
|
32
|
-
|
|
33
|
-
it('renders the given currency flag for a given currency', () => {
|
|
34
|
-
component.setProps({ currency: 'hustle' });
|
|
35
|
-
expect(component.find(Flag)).toHaveLength(1);
|
|
36
|
-
});
|
|
37
|
-
|
|
38
|
-
it('overrides currency flag with icon', () => {
|
|
39
|
-
component.setProps({ currency: 'hustle', icon: <ProfileIcon /> });
|
|
40
|
-
expect(component.find(ProfileIcon)).toHaveLength(1);
|
|
41
|
-
expect(component.find(Flag)).toHaveLength(0);
|
|
42
|
-
});
|
|
43
|
-
});
|