@transferwise/components 0.0.0-experimental-cc8c25a → 0.0.0-experimental-41d4ef2
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/definitionList/DefinitionList.js.map +1 -1
- package/build/definitionList/DefinitionList.mjs.map +1 -1
- package/build/types/definitionList/DefinitionList.d.ts +1 -2
- package/build/types/definitionList/DefinitionList.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/avatar/Avatar.story.tsx +4 -1
- package/src/avatarWrapper/AvatarWrapper.story.tsx +4 -0
- package/src/badge/Badge.story.tsx +4 -0
- package/src/definitionList/DefinitionList.story.tsx +49 -57
- package/src/definitionList/DefinitionList.tsx +1 -1
- package/src/moneyInput/MoneyInput.spec.tsx +99 -11
- package/src/definitionList/DefinitionList.spec.js +0 -91
- package/src/moneyInput/MoneyInput.rtl.spec.tsx +0 -149
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DefinitionList.js","sources":["../../src/definitionList/DefinitionList.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport ActionButton from '../actionButton';\nimport { Layout } from '../common';\n\nexport interface DefinitionListDefinition {\n action?: {\n label: string;\n onClick?: React.MouseEventHandler<HTMLButtonElement>;\n };\n title: React.ReactNode;\n value: React.ReactNode;\n key: string;\n}\n\
|
|
1
|
+
{"version":3,"file":"DefinitionList.js","sources":["../../src/definitionList/DefinitionList.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport ActionButton from '../actionButton';\nimport { Layout } from '../common';\n\nexport interface DefinitionListDefinition {\n action?: {\n label: string;\n onClick?: React.MouseEventHandler<HTMLButtonElement>;\n };\n title: React.ReactNode;\n value: React.ReactNode;\n key: string;\n}\n\nexport type DefinitionListLayout =\n `${Layout.VERTICAL_TWO_COLUMN | Layout.VERTICAL_ONE_COLUMN | Layout.HORIZONTAL_JUSTIFIED | Layout.HORIZONTAL_LEFT_ALIGNED | Layout.HORIZONTAL_RIGHT_ALIGNED}`;\n\nexport interface DefinitionListProps {\n definitions?: DefinitionListDefinition[];\n layout?: DefinitionListLayout;\n muted?: boolean;\n}\n\nconst isLayoutHorizontal = (layout: DefinitionListLayout) =>\n layout === Layout.HORIZONTAL_LEFT_ALIGNED ||\n layout === Layout.HORIZONTAL_RIGHT_ALIGNED ||\n layout === Layout.HORIZONTAL_JUSTIFIED;\n\nconst getAlignmentClasses = (\n layout: DefinitionListLayout,\n action: DefinitionListDefinition['action'],\n) => {\n const classes = ['d-flex'];\n\n if (action) {\n if (isLayoutHorizontal(layout)) {\n classes.push('align-items-center');\n } else {\n classes.push('align-items-start');\n }\n }\n\n if (layout === Layout.HORIZONTAL_RIGHT_ALIGNED) {\n classes.push('text-sm-right tw-definition-list--right-aligned-desktop');\n } else {\n classes.push('justify-content-between');\n }\n\n if (layout === Layout.HORIZONTAL_JUSTIFIED) {\n classes.push('text-sm-justify');\n }\n\n return classes;\n};\n\nconst defaultDefinitions = [] satisfies DefinitionListProps['definitions'];\n\nexport default function DefinitionList({\n definitions = defaultDefinitions,\n layout = 'VERTICAL_TWO_COLUMN',\n muted,\n}: DefinitionListProps) {\n return (\n <dl\n className={clsx('tw-definition-list d-flex ', {\n 'text-muted': muted,\n 'flex-column': layout === Layout.VERTICAL_ONE_COLUMN,\n 'tw-definition-list--columns flex-column flex-row--sm':\n layout === Layout.VERTICAL_TWO_COLUMN,\n 'tw-definition-list--horizontal flex-column': isLayoutHorizontal(layout),\n })}\n >\n {definitions\n .filter((definition) => definition)\n .map(({ action, title, value, key }) => (\n <div key={key} className=\"tw-definition-list__item\">\n <dt>{title}</dt>\n <dd className={clsx(...getAlignmentClasses(layout, action))}>\n <div>{value}</div>\n {action ? (\n <div\n className={clsx(\n isLayoutHorizontal(layout) ? 'p-l-2' : 'p-x-2',\n 'tw-definition-list__action',\n )}\n >\n <ActionButton className=\"tw-definition-list__button\" onClick={action.onClick}>\n {action.label}\n </ActionButton>\n </div>\n ) : null}\n </dd>\n </div>\n ))}\n </dl>\n );\n}\n"],"names":["isLayoutHorizontal","layout","Layout","HORIZONTAL_LEFT_ALIGNED","HORIZONTAL_RIGHT_ALIGNED","HORIZONTAL_JUSTIFIED","getAlignmentClasses","action","classes","push","defaultDefinitions","DefinitionList","definitions","muted","_jsx","className","clsx","VERTICAL_ONE_COLUMN","VERTICAL_TWO_COLUMN","children","filter","definition","map","title","value","key","_jsxs","ActionButton","onClick","label"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DefinitionList.mjs","sources":["../../src/definitionList/DefinitionList.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport ActionButton from '../actionButton';\nimport { Layout } from '../common';\n\nexport interface DefinitionListDefinition {\n action?: {\n label: string;\n onClick?: React.MouseEventHandler<HTMLButtonElement>;\n };\n title: React.ReactNode;\n value: React.ReactNode;\n key: string;\n}\n\
|
|
1
|
+
{"version":3,"file":"DefinitionList.mjs","sources":["../../src/definitionList/DefinitionList.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport ActionButton from '../actionButton';\nimport { Layout } from '../common';\n\nexport interface DefinitionListDefinition {\n action?: {\n label: string;\n onClick?: React.MouseEventHandler<HTMLButtonElement>;\n };\n title: React.ReactNode;\n value: React.ReactNode;\n key: string;\n}\n\nexport type DefinitionListLayout =\n `${Layout.VERTICAL_TWO_COLUMN | Layout.VERTICAL_ONE_COLUMN | Layout.HORIZONTAL_JUSTIFIED | Layout.HORIZONTAL_LEFT_ALIGNED | Layout.HORIZONTAL_RIGHT_ALIGNED}`;\n\nexport interface DefinitionListProps {\n definitions?: DefinitionListDefinition[];\n layout?: DefinitionListLayout;\n muted?: boolean;\n}\n\nconst isLayoutHorizontal = (layout: DefinitionListLayout) =>\n layout === Layout.HORIZONTAL_LEFT_ALIGNED ||\n layout === Layout.HORIZONTAL_RIGHT_ALIGNED ||\n layout === Layout.HORIZONTAL_JUSTIFIED;\n\nconst getAlignmentClasses = (\n layout: DefinitionListLayout,\n action: DefinitionListDefinition['action'],\n) => {\n const classes = ['d-flex'];\n\n if (action) {\n if (isLayoutHorizontal(layout)) {\n classes.push('align-items-center');\n } else {\n classes.push('align-items-start');\n }\n }\n\n if (layout === Layout.HORIZONTAL_RIGHT_ALIGNED) {\n classes.push('text-sm-right tw-definition-list--right-aligned-desktop');\n } else {\n classes.push('justify-content-between');\n }\n\n if (layout === Layout.HORIZONTAL_JUSTIFIED) {\n classes.push('text-sm-justify');\n }\n\n return classes;\n};\n\nconst defaultDefinitions = [] satisfies DefinitionListProps['definitions'];\n\nexport default function DefinitionList({\n definitions = defaultDefinitions,\n layout = 'VERTICAL_TWO_COLUMN',\n muted,\n}: DefinitionListProps) {\n return (\n <dl\n className={clsx('tw-definition-list d-flex ', {\n 'text-muted': muted,\n 'flex-column': layout === Layout.VERTICAL_ONE_COLUMN,\n 'tw-definition-list--columns flex-column flex-row--sm':\n layout === Layout.VERTICAL_TWO_COLUMN,\n 'tw-definition-list--horizontal flex-column': isLayoutHorizontal(layout),\n })}\n >\n {definitions\n .filter((definition) => definition)\n .map(({ action, title, value, key }) => (\n <div key={key} className=\"tw-definition-list__item\">\n <dt>{title}</dt>\n <dd className={clsx(...getAlignmentClasses(layout, action))}>\n <div>{value}</div>\n {action ? (\n <div\n className={clsx(\n isLayoutHorizontal(layout) ? 'p-l-2' : 'p-x-2',\n 'tw-definition-list__action',\n )}\n >\n <ActionButton className=\"tw-definition-list__button\" onClick={action.onClick}>\n {action.label}\n </ActionButton>\n </div>\n ) : null}\n </dd>\n </div>\n ))}\n </dl>\n );\n}\n"],"names":["isLayoutHorizontal","layout","Layout","HORIZONTAL_LEFT_ALIGNED","HORIZONTAL_RIGHT_ALIGNED","HORIZONTAL_JUSTIFIED","getAlignmentClasses","action","classes","push","defaultDefinitions","DefinitionList","definitions","muted","_jsx","className","clsx","VERTICAL_ONE_COLUMN","VERTICAL_TWO_COLUMN","children","filter","definition","map","title","value","key","_jsxs","ActionButton","onClick","label"],"mappings":"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"}
|
|
@@ -8,12 +8,11 @@ export interface DefinitionListDefinition {
|
|
|
8
8
|
value: React.ReactNode;
|
|
9
9
|
key: string;
|
|
10
10
|
}
|
|
11
|
-
type DefinitionListLayout = `${Layout.VERTICAL_TWO_COLUMN | Layout.VERTICAL_ONE_COLUMN | Layout.HORIZONTAL_JUSTIFIED | Layout.HORIZONTAL_LEFT_ALIGNED | Layout.HORIZONTAL_RIGHT_ALIGNED}`;
|
|
11
|
+
export type DefinitionListLayout = `${Layout.VERTICAL_TWO_COLUMN | Layout.VERTICAL_ONE_COLUMN | Layout.HORIZONTAL_JUSTIFIED | Layout.HORIZONTAL_LEFT_ALIGNED | Layout.HORIZONTAL_RIGHT_ALIGNED}`;
|
|
12
12
|
export interface DefinitionListProps {
|
|
13
13
|
definitions?: DefinitionListDefinition[];
|
|
14
14
|
layout?: DefinitionListLayout;
|
|
15
15
|
muted?: boolean;
|
|
16
16
|
}
|
|
17
17
|
export default function DefinitionList({ definitions, layout, muted, }: DefinitionListProps): import("react").JSX.Element;
|
|
18
|
-
export {};
|
|
19
18
|
//# sourceMappingURL=DefinitionList.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DefinitionList.d.ts","sourceRoot":"","sources":["../../../src/definitionList/DefinitionList.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAEnC,MAAM,WAAW,wBAAwB;IACvC,MAAM,CAAC,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;KACtD,CAAC;IACF,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,GAAG,EAAE,MAAM,CAAC;CACb;AAED,
|
|
1
|
+
{"version":3,"file":"DefinitionList.d.ts","sourceRoot":"","sources":["../../../src/definitionList/DefinitionList.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAEnC,MAAM,WAAW,wBAAwB;IACvC,MAAM,CAAC,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;KACtD,CAAC;IACF,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,GAAG,EAAE,MAAM,CAAC;CACb;AAED,MAAM,MAAM,oBAAoB,GAC9B,GAAG,MAAM,CAAC,mBAAmB,GAAG,MAAM,CAAC,mBAAmB,GAAG,MAAM,CAAC,oBAAoB,GAAG,MAAM,CAAC,uBAAuB,GAAG,MAAM,CAAC,wBAAwB,EAAE,CAAC;AAEhK,MAAM,WAAW,mBAAmB;IAClC,WAAW,CAAC,EAAE,wBAAwB,EAAE,CAAC;IACzC,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAC9B,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAoCD,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,WAAgC,EAChC,MAA8B,EAC9B,KAAK,GACN,EAAE,mBAAmB,+BAmCrB"}
|
package/package.json
CHANGED
|
@@ -7,6 +7,9 @@ import { storyConfig } from '../test-utils';
|
|
|
7
7
|
|
|
8
8
|
import Avatar, { AvatarType } from '.';
|
|
9
9
|
|
|
10
|
+
/**
|
|
11
|
+
* @deprecated use **`AvatarView`** components instead
|
|
12
|
+
*/
|
|
10
13
|
export default {
|
|
11
14
|
component: Avatar,
|
|
12
15
|
title: 'Content/Avatar',
|
|
@@ -45,7 +48,7 @@ export const Table: Story = storyConfig(
|
|
|
45
48
|
const backgroundColor = '#d6f5e3';
|
|
46
49
|
const emoji = '✈️';
|
|
47
50
|
const initials = 'GN';
|
|
48
|
-
const Icon = wiseIcons
|
|
51
|
+
const Icon = wiseIcons.Check;
|
|
49
52
|
|
|
50
53
|
return (
|
|
51
54
|
<div>
|
|
@@ -4,7 +4,11 @@ import { ProfileType, Sentiment } from '../common';
|
|
|
4
4
|
|
|
5
5
|
import AvatarWrapper from './AvatarWrapper';
|
|
6
6
|
|
|
7
|
+
/**
|
|
8
|
+
* @deprecated use **`AvatarView`** components instead
|
|
9
|
+
*/
|
|
7
10
|
export default {
|
|
11
|
+
tags: ['autodocs'],
|
|
8
12
|
component: AvatarWrapper,
|
|
9
13
|
title: 'Content/AvatarWrapper',
|
|
10
14
|
} satisfies Meta<typeof AvatarWrapper>;
|
|
@@ -5,7 +5,11 @@ import { Size, Theme } from '../common';
|
|
|
5
5
|
|
|
6
6
|
import Badge from './Badge';
|
|
7
7
|
|
|
8
|
+
/**
|
|
9
|
+
* @deprecated use **`<AvatarView badge={..} />`** components instead
|
|
10
|
+
*/
|
|
8
11
|
export default {
|
|
12
|
+
tags: ['autodocs'],
|
|
9
13
|
component: Badge,
|
|
10
14
|
title: 'Content/Badge',
|
|
11
15
|
excludeStories: ['ExampleBadgeCss'],
|
|
@@ -1,19 +1,27 @@
|
|
|
1
1
|
import { action } from '@storybook/addon-actions';
|
|
2
|
-
import { select, text, boolean } from '@storybook/addon-knobs';
|
|
3
2
|
|
|
4
3
|
import { Layout } from '../common';
|
|
5
4
|
|
|
6
|
-
import DefinitionList from './DefinitionList';
|
|
5
|
+
import DefinitionList, { type DefinitionListLayout } from './DefinitionList';
|
|
6
|
+
import { lorem10 } from '../test-utils';
|
|
7
7
|
|
|
8
8
|
export default {
|
|
9
9
|
component: DefinitionList,
|
|
10
10
|
title: 'Typography/DefinitionList',
|
|
11
11
|
};
|
|
12
12
|
|
|
13
|
+
const layouts: DefinitionListLayout[] = [
|
|
14
|
+
Layout.VERTICAL_TWO_COLUMN,
|
|
15
|
+
Layout.VERTICAL_ONE_COLUMN,
|
|
16
|
+
Layout.HORIZONTAL_JUSTIFIED,
|
|
17
|
+
Layout.HORIZONTAL_LEFT_ALIGNED,
|
|
18
|
+
Layout.HORIZONTAL_RIGHT_ALIGNED,
|
|
19
|
+
];
|
|
20
|
+
|
|
13
21
|
const definitions = [
|
|
14
22
|
{
|
|
15
|
-
title:
|
|
16
|
-
value:
|
|
23
|
+
title: 'Definition List title',
|
|
24
|
+
value: 'Definition List value',
|
|
17
25
|
key: 'first',
|
|
18
26
|
},
|
|
19
27
|
{
|
|
@@ -23,67 +31,51 @@ const definitions = [
|
|
|
23
31
|
},
|
|
24
32
|
{
|
|
25
33
|
title: 'Long strings will wrap',
|
|
26
|
-
value:
|
|
34
|
+
value: lorem10,
|
|
27
35
|
key: 'third',
|
|
28
36
|
},
|
|
29
37
|
];
|
|
30
38
|
|
|
31
39
|
export const Basic = () => {
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
[
|
|
36
|
-
Layout.VERTICAL_TWO_COLUMN,
|
|
37
|
-
Layout.VERTICAL_ONE_COLUMN,
|
|
38
|
-
Layout.HORIZONTAL_JUSTIFIED,
|
|
39
|
-
Layout.HORIZONTAL_LEFT_ALIGNED,
|
|
40
|
-
Layout.HORIZONTAL_RIGHT_ALIGNED,
|
|
41
|
-
],
|
|
42
|
-
Layout.HORIZONTAL_LEFT_ALIGNED,
|
|
43
|
-
);
|
|
44
|
-
|
|
45
|
-
return <DefinitionList layout={layout} muted={muted} definitions={definitions} />;
|
|
40
|
+
return layouts.map((layout) => (
|
|
41
|
+
<DefinitionList key={layout} layout={layout} definitions={definitions} />
|
|
42
|
+
));
|
|
46
43
|
};
|
|
47
44
|
|
|
48
45
|
export const WithActionButtons = () => {
|
|
49
|
-
const muted = boolean('muted', false);
|
|
50
|
-
const layout = select(
|
|
51
|
-
'layout',
|
|
52
|
-
[
|
|
53
|
-
Layout.VERTICAL_TWO_COLUMN,
|
|
54
|
-
Layout.VERTICAL_ONE_COLUMN,
|
|
55
|
-
Layout.HORIZONTAL_JUSTIFIED,
|
|
56
|
-
Layout.HORIZONTAL_LEFT_ALIGNED,
|
|
57
|
-
Layout.HORIZONTAL_RIGHT_ALIGNED,
|
|
58
|
-
],
|
|
59
|
-
Layout.HORIZONTAL_LEFT_ALIGNED,
|
|
60
|
-
);
|
|
61
|
-
|
|
62
46
|
return (
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
47
|
+
<>
|
|
48
|
+
{layouts.map((layout) => (
|
|
49
|
+
<DefinitionList
|
|
50
|
+
key={layout}
|
|
51
|
+
layout={layout}
|
|
52
|
+
definitions={[
|
|
53
|
+
...definitions,
|
|
54
|
+
{
|
|
55
|
+
title: 'Action buttons are useful',
|
|
56
|
+
value: lorem10,
|
|
57
|
+
key: 'fourth',
|
|
58
|
+
action: {
|
|
59
|
+
label: 'Epic button',
|
|
60
|
+
onClick: action(lorem10),
|
|
61
|
+
},
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
title: 'tiny',
|
|
65
|
+
value: 'tiny',
|
|
66
|
+
key: 'fifth',
|
|
67
|
+
action: {
|
|
68
|
+
label: 'Epic button',
|
|
69
|
+
onClick: action(lorem10),
|
|
70
|
+
},
|
|
71
|
+
},
|
|
72
|
+
]}
|
|
73
|
+
/>
|
|
74
|
+
))}
|
|
75
|
+
</>
|
|
88
76
|
);
|
|
89
77
|
};
|
|
78
|
+
|
|
79
|
+
export const Muted = () => {
|
|
80
|
+
return <DefinitionList muted definitions={definitions} />;
|
|
81
|
+
};
|
|
@@ -13,7 +13,7 @@ export interface DefinitionListDefinition {
|
|
|
13
13
|
key: string;
|
|
14
14
|
}
|
|
15
15
|
|
|
16
|
-
type DefinitionListLayout =
|
|
16
|
+
export type DefinitionListLayout =
|
|
17
17
|
`${Layout.VERTICAL_TWO_COLUMN | Layout.VERTICAL_ONE_COLUMN | Layout.HORIZONTAL_JUSTIFIED | Layout.HORIZONTAL_LEFT_ALIGNED | Layout.HORIZONTAL_RIGHT_ALIGNED}`;
|
|
18
18
|
|
|
19
19
|
export interface DefinitionListProps {
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { mockMatchMedia, mockResizeObserver, render, screen, userEvent } from '../test-utils';
|
|
2
2
|
|
|
3
|
-
import { MoneyInput, CurrencyItem, CurrencyOptionItem } from '..';
|
|
3
|
+
import { MoneyInput, CurrencyItem, CurrencyOptionItem, Field } from '..';
|
|
4
4
|
import { MoneyInputPropsWithInputAttributes } from './MoneyInput';
|
|
5
5
|
import { within } from '@testing-library/react';
|
|
6
|
+
import messages from './MoneyInput.messages';
|
|
6
7
|
|
|
7
8
|
mockMatchMedia();
|
|
8
9
|
mockResizeObserver();
|
|
@@ -96,11 +97,6 @@ describe('Money Input', () => {
|
|
|
96
97
|
});
|
|
97
98
|
});
|
|
98
99
|
|
|
99
|
-
it('renders Select component with generated id when id is not provided', () => {
|
|
100
|
-
customRender();
|
|
101
|
-
expect(getTrigger()).toHaveAttribute('id');
|
|
102
|
-
});
|
|
103
|
-
|
|
104
100
|
it('shows the currently active currency as active and hides its note', () => {
|
|
105
101
|
customRender({ selectedCurrency: popularCurrencies[0] });
|
|
106
102
|
expect(getTrigger()).toHaveTextContent(popularCurrencies[0].label);
|
|
@@ -247,11 +243,6 @@ describe('Money Input', () => {
|
|
|
247
243
|
expect(initialProps.onAmountChange).toHaveBeenCalledWith(null);
|
|
248
244
|
});
|
|
249
245
|
|
|
250
|
-
it('passes the id given to the input element', () => {
|
|
251
|
-
customRender({ id: 'some-id' });
|
|
252
|
-
expect(getInput()).toHaveAttribute('id', 'some-id');
|
|
253
|
-
});
|
|
254
|
-
|
|
255
246
|
it('renders addon when element is passed through props', () => {
|
|
256
247
|
const addonElement = <span data-testid="test-addon" />;
|
|
257
248
|
customRender({ addon: addonElement });
|
|
@@ -377,4 +368,101 @@ describe('Money Input', () => {
|
|
|
377
368
|
});
|
|
378
369
|
expect(screen.getAllByRole('group')[1]).toHaveClass('selectClassName');
|
|
379
370
|
});
|
|
371
|
+
|
|
372
|
+
describe('text input', () => {
|
|
373
|
+
it.each([
|
|
374
|
+
['asd', ''],
|
|
375
|
+
['1a2s3d', '123'],
|
|
376
|
+
['±!@#$^*_+?><', ''],
|
|
377
|
+
['1±!@#$^*,_+?><2', '1,2'],
|
|
378
|
+
['12,3', '12,3'],
|
|
379
|
+
['12.3', '12.3'],
|
|
380
|
+
])("ignores the letters when typed '%s' and shows '%s'", async (testValue, expectedValue) => {
|
|
381
|
+
customRender({ amount: null });
|
|
382
|
+
await userEvent.type(getInput(), testValue);
|
|
383
|
+
expect(getInput()).toHaveValue(expectedValue);
|
|
384
|
+
});
|
|
385
|
+
});
|
|
386
|
+
|
|
387
|
+
it('supports custom `aria-labelledby` attribute', () => {
|
|
388
|
+
render(
|
|
389
|
+
<>
|
|
390
|
+
{/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
|
|
391
|
+
<label id="prioritized-label">Prioritized label</label>
|
|
392
|
+
<MoneyInput {...initialProps} aria-labelledby="prioritized-label" />
|
|
393
|
+
</>,
|
|
394
|
+
);
|
|
395
|
+
|
|
396
|
+
expect(screen.getAllByLabelText('Prioritized label')[0]).toHaveClass('input-group');
|
|
397
|
+
});
|
|
398
|
+
|
|
399
|
+
it('supports `Field` for labeling', () => {
|
|
400
|
+
render(
|
|
401
|
+
<Field label="Recipient gets">
|
|
402
|
+
<MoneyInput {...initialProps} />
|
|
403
|
+
</Field>,
|
|
404
|
+
);
|
|
405
|
+
expect(screen.getAllByRole('group')[0]).toHaveAccessibleName(/^Recipient gets/);
|
|
406
|
+
});
|
|
407
|
+
|
|
408
|
+
describe('ids', () => {
|
|
409
|
+
it('renders Select component with generated id when id is not provided', () => {
|
|
410
|
+
customRender();
|
|
411
|
+
expect(getTrigger()).toHaveAttribute('id');
|
|
412
|
+
});
|
|
413
|
+
|
|
414
|
+
it('passes the id given to the input element', () => {
|
|
415
|
+
customRender({ id: 'some-id' });
|
|
416
|
+
expect(getInput()).toHaveAttribute('id', 'some-id');
|
|
417
|
+
});
|
|
418
|
+
|
|
419
|
+
it('should guarantee id and connect the input with the selected currency via withId HoC', () => {
|
|
420
|
+
customRender();
|
|
421
|
+
expect(getInput().getAttribute('id')).toBeTruthy();
|
|
422
|
+
expect(getInput()).toHaveAttribute('aria-describedby', getTrigger().getAttribute('id'));
|
|
423
|
+
});
|
|
424
|
+
|
|
425
|
+
it('should have unique id for the select filter with predefined id', async () => {
|
|
426
|
+
const fieldId = 'myFieldId';
|
|
427
|
+
const searchPlaceholder = 'Type a currency or country';
|
|
428
|
+
render(
|
|
429
|
+
<Field label="Multiple currencies" id={fieldId}>
|
|
430
|
+
<MoneyInput {...initialProps} searchPlaceholder={searchPlaceholder} />
|
|
431
|
+
</Field>,
|
|
432
|
+
);
|
|
433
|
+
await openDropdown();
|
|
434
|
+
expect(screen.getByLabelText(searchPlaceholder)).toHaveAttribute(
|
|
435
|
+
'id',
|
|
436
|
+
`${fieldId}SelectedCurrencySearch`,
|
|
437
|
+
);
|
|
438
|
+
});
|
|
439
|
+
|
|
440
|
+
it('should have unique id for the select filter without predefined id', async () => {
|
|
441
|
+
const searchPlaceholder = 'Type a currency or country';
|
|
442
|
+
render(
|
|
443
|
+
<Field label="Multiple currencies">
|
|
444
|
+
<MoneyInput {...initialProps} searchPlaceholder={searchPlaceholder} />
|
|
445
|
+
</Field>,
|
|
446
|
+
);
|
|
447
|
+
await openDropdown();
|
|
448
|
+
expect(screen.getByLabelText(searchPlaceholder)).toHaveAttribute(
|
|
449
|
+
'id',
|
|
450
|
+
expect.stringMatching(/^:.*?:SelectedCurrencySearch$/),
|
|
451
|
+
);
|
|
452
|
+
});
|
|
453
|
+
});
|
|
454
|
+
|
|
455
|
+
it('should have AT label for the currency dropdown', () => {
|
|
456
|
+
customRender();
|
|
457
|
+
expect(getTrigger()).toHaveAttribute('aria-label', messages.selectCurrencyLabel.defaultMessage);
|
|
458
|
+
});
|
|
459
|
+
|
|
460
|
+
it('should have a listbox label', async () => {
|
|
461
|
+
customRender();
|
|
462
|
+
const trigger = getTrigger();
|
|
463
|
+
await openDropdown();
|
|
464
|
+
const triggerLabel = trigger.getAttribute('aria-label');
|
|
465
|
+
expect(triggerLabel).toBeTruthy();
|
|
466
|
+
expect(screen.getByRole('listbox', { name: triggerLabel ?? '' })).toBeInTheDocument();
|
|
467
|
+
});
|
|
380
468
|
});
|
|
@@ -1,91 +0,0 @@
|
|
|
1
|
-
import { shallow, mount } from 'enzyme';
|
|
2
|
-
|
|
3
|
-
import { DefinitionList } from '..';
|
|
4
|
-
import { Layout } from '../common';
|
|
5
|
-
|
|
6
|
-
const {
|
|
7
|
-
VERTICAL_TWO_COLUMN,
|
|
8
|
-
VERTICAL_ONE_COLUMN,
|
|
9
|
-
HORIZONTAL_LEFT_ALIGNED,
|
|
10
|
-
HORIZONTAL_RIGHT_ALIGNED,
|
|
11
|
-
HORIZONTAL_JUSTIFIED,
|
|
12
|
-
} = Layout;
|
|
13
|
-
|
|
14
|
-
describe('DefinitionList', () => {
|
|
15
|
-
const someDefinitions = () => [{ title: 'First', value: 'first value', key: 'first' }, null];
|
|
16
|
-
|
|
17
|
-
const withLayout = (layout) =>
|
|
18
|
-
shallow(<DefinitionList layout={layout} definitions={someDefinitions()} />);
|
|
19
|
-
|
|
20
|
-
const listHasClass = (layout, className) =>
|
|
21
|
-
withLayout(layout).find('dl.tw-definition-list').hasClass(className);
|
|
22
|
-
|
|
23
|
-
const valueHasClass = (layout, className) =>
|
|
24
|
-
withLayout(layout).find('dl.tw-definition-list dd').hasClass(className);
|
|
25
|
-
|
|
26
|
-
it('applies correct flex class', () => {
|
|
27
|
-
const colClass = 'flex-column';
|
|
28
|
-
|
|
29
|
-
expect(listHasClass(VERTICAL_ONE_COLUMN, colClass)).toBe(true);
|
|
30
|
-
expect(listHasClass(VERTICAL_TWO_COLUMN, colClass)).toBe(true);
|
|
31
|
-
expect(listHasClass(HORIZONTAL_LEFT_ALIGNED, colClass)).toBe(true);
|
|
32
|
-
expect(listHasClass(HORIZONTAL_RIGHT_ALIGNED, colClass)).toBe(true);
|
|
33
|
-
expect(listHasClass(HORIZONTAL_JUSTIFIED, colClass)).toBe(true);
|
|
34
|
-
});
|
|
35
|
-
|
|
36
|
-
it('applies correct class for vertical two-column layout', () => {
|
|
37
|
-
const colClass = 'tw-definition-list--columns flex-column flex-row--sm';
|
|
38
|
-
|
|
39
|
-
expect(listHasClass(VERTICAL_TWO_COLUMN, colClass)).toBe(true);
|
|
40
|
-
expect(listHasClass(VERTICAL_ONE_COLUMN, colClass)).toBe(false);
|
|
41
|
-
expect(listHasClass(HORIZONTAL_LEFT_ALIGNED, colClass)).toBe(false);
|
|
42
|
-
expect(listHasClass(HORIZONTAL_RIGHT_ALIGNED, colClass)).toBe(false);
|
|
43
|
-
expect(listHasClass(HORIZONTAL_JUSTIFIED, colClass)).toBe(false);
|
|
44
|
-
});
|
|
45
|
-
|
|
46
|
-
it('applies correct class for horiztonal layouts', () => {
|
|
47
|
-
const rowClass = 'tw-definition-list--horizontal flex-column';
|
|
48
|
-
|
|
49
|
-
expect(listHasClass(VERTICAL_TWO_COLUMN, rowClass)).toBe(false);
|
|
50
|
-
expect(listHasClass(VERTICAL_ONE_COLUMN, rowClass)).toBe(false);
|
|
51
|
-
expect(listHasClass(HORIZONTAL_LEFT_ALIGNED, rowClass)).toBe(true);
|
|
52
|
-
expect(listHasClass(HORIZONTAL_RIGHT_ALIGNED, rowClass)).toBe(true);
|
|
53
|
-
expect(listHasClass(HORIZONTAL_JUSTIFIED, rowClass)).toBe(true);
|
|
54
|
-
});
|
|
55
|
-
|
|
56
|
-
it('applies correct class for alignment', () => {
|
|
57
|
-
expect(valueHasClass(VERTICAL_TWO_COLUMN, 'd-flex justify-content-between')).toBe(true);
|
|
58
|
-
expect(valueHasClass(VERTICAL_ONE_COLUMN, 'd-flex justify-content-between')).toBe(true);
|
|
59
|
-
expect(valueHasClass(HORIZONTAL_LEFT_ALIGNED, 'd-flex justify-content-between')).toBe(true);
|
|
60
|
-
expect(valueHasClass(HORIZONTAL_RIGHT_ALIGNED, 'text-sm-right')).toBe(true);
|
|
61
|
-
expect(valueHasClass(HORIZONTAL_JUSTIFIED, 'text-sm-justify')).toBe(true);
|
|
62
|
-
});
|
|
63
|
-
|
|
64
|
-
it('has muted text class on title and value when muted flag is passed', () => {
|
|
65
|
-
const muted = shallow(<DefinitionList muted definitions={someDefinitions()} />);
|
|
66
|
-
const notMuted = shallow(<DefinitionList definitions={someDefinitions()} />);
|
|
67
|
-
|
|
68
|
-
expect(muted.find('dl.tw-definition-list').hasClass('text-muted')).toBe(true);
|
|
69
|
-
expect(notMuted.find('dl.tw-definition-list').hasClass('text-muted')).toBe(false);
|
|
70
|
-
});
|
|
71
|
-
|
|
72
|
-
it('shows action button when one is passed in', () => {
|
|
73
|
-
const buttonSpy = jest.fn();
|
|
74
|
-
|
|
75
|
-
const definitionList = mount(
|
|
76
|
-
<DefinitionList
|
|
77
|
-
definitions={[
|
|
78
|
-
{
|
|
79
|
-
title: 'Name',
|
|
80
|
-
value: 'Jenkins',
|
|
81
|
-
key: '1',
|
|
82
|
-
action: { label: 'A button', onClick: buttonSpy },
|
|
83
|
-
},
|
|
84
|
-
]}
|
|
85
|
-
/>,
|
|
86
|
-
);
|
|
87
|
-
|
|
88
|
-
definitionList.find('button').simulate('click');
|
|
89
|
-
expect(buttonSpy).toHaveBeenCalledTimes(1);
|
|
90
|
-
});
|
|
91
|
-
});
|
|
@@ -1,149 +0,0 @@
|
|
|
1
|
-
import { Field } from '../field/Field';
|
|
2
|
-
import { mockMatchMedia, mockResizeObserver, render, screen, userEvent } from '../test-utils';
|
|
3
|
-
|
|
4
|
-
import MoneyInput from './MoneyInput';
|
|
5
|
-
import messages from './MoneyInput.messages';
|
|
6
|
-
|
|
7
|
-
mockMatchMedia();
|
|
8
|
-
mockResizeObserver();
|
|
9
|
-
|
|
10
|
-
describe('MoneyInput', () => {
|
|
11
|
-
const currencies = [
|
|
12
|
-
{
|
|
13
|
-
header: 'Popular currencies',
|
|
14
|
-
},
|
|
15
|
-
{
|
|
16
|
-
value: 'EUR',
|
|
17
|
-
label: 'EUR',
|
|
18
|
-
note: 'Euro',
|
|
19
|
-
currency: 'eur',
|
|
20
|
-
searchable: 'Spain, Germany, France, Austria, Estonia',
|
|
21
|
-
},
|
|
22
|
-
{
|
|
23
|
-
value: 'USD',
|
|
24
|
-
label: 'USD',
|
|
25
|
-
note: 'United States dollar',
|
|
26
|
-
currency: 'usd',
|
|
27
|
-
searchable: 'Hong Kong, Saudi Arabia',
|
|
28
|
-
},
|
|
29
|
-
{
|
|
30
|
-
value: 'GBP',
|
|
31
|
-
label: 'GBP',
|
|
32
|
-
note: 'British pound',
|
|
33
|
-
currency: 'gbp',
|
|
34
|
-
searchable: 'England, Scotland, Wales',
|
|
35
|
-
},
|
|
36
|
-
{
|
|
37
|
-
header: 'Some other currencies',
|
|
38
|
-
},
|
|
39
|
-
{
|
|
40
|
-
value: 'CAD',
|
|
41
|
-
label: 'CAD',
|
|
42
|
-
note: 'Canadian dollar',
|
|
43
|
-
currency: 'cad',
|
|
44
|
-
},
|
|
45
|
-
{
|
|
46
|
-
value: 'AUD',
|
|
47
|
-
label: 'AUD',
|
|
48
|
-
note: 'Australian dollar',
|
|
49
|
-
currency: 'aud',
|
|
50
|
-
},
|
|
51
|
-
] as const;
|
|
52
|
-
const props = {
|
|
53
|
-
currencies,
|
|
54
|
-
selectedCurrency: currencies[1],
|
|
55
|
-
searchPlaceholder: 'Type a currency / country',
|
|
56
|
-
amount: 1000,
|
|
57
|
-
onAmountChange: jest.fn(),
|
|
58
|
-
onCurrencyChange: jest.fn(),
|
|
59
|
-
};
|
|
60
|
-
it.each([
|
|
61
|
-
['asd', ''],
|
|
62
|
-
['1a2s3d', '123'],
|
|
63
|
-
['±!@#$^*_+?><', ''],
|
|
64
|
-
['1±!@#$^*,_+?><2', '1,2'],
|
|
65
|
-
['12,3', '12,3'],
|
|
66
|
-
['12.3', '12.3'],
|
|
67
|
-
])("ignores the letters when typed '%s' and shows '%s'", async (testValue, expectedValue) => {
|
|
68
|
-
render(<MoneyInput {...props} amount={null} />);
|
|
69
|
-
|
|
70
|
-
const input = screen.getByRole('textbox');
|
|
71
|
-
await userEvent.type(input, testValue);
|
|
72
|
-
expect(input).toHaveValue(expectedValue);
|
|
73
|
-
});
|
|
74
|
-
|
|
75
|
-
it('supports custom `aria-labelledby` attribute', () => {
|
|
76
|
-
render(
|
|
77
|
-
<>
|
|
78
|
-
{/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
|
|
79
|
-
<label id="prioritized-label">Prioritized label</label>
|
|
80
|
-
<MoneyInput {...props} aria-labelledby="prioritized-label" />
|
|
81
|
-
</>,
|
|
82
|
-
);
|
|
83
|
-
|
|
84
|
-
expect(screen.getAllByLabelText('Prioritized label')[0]).toHaveClass('input-group');
|
|
85
|
-
});
|
|
86
|
-
|
|
87
|
-
it('supports `Field` for labeling', () => {
|
|
88
|
-
render(
|
|
89
|
-
<Field label="Recipient gets">
|
|
90
|
-
<MoneyInput {...props} />
|
|
91
|
-
</Field>,
|
|
92
|
-
);
|
|
93
|
-
expect(screen.getAllByRole('group')[0]).toHaveAccessibleName(/^Recipient gets/);
|
|
94
|
-
});
|
|
95
|
-
|
|
96
|
-
describe('ids', () => {
|
|
97
|
-
it('should guarantee id and connect the input with the selected currency via withId HoC', () => {
|
|
98
|
-
render(<MoneyInput {...props} />);
|
|
99
|
-
const input = screen.getByRole('textbox');
|
|
100
|
-
const button = screen.getByRole('combobox');
|
|
101
|
-
expect(input.getAttribute('id')).toBeTruthy();
|
|
102
|
-
expect(input).toHaveAttribute('aria-describedby', button.getAttribute('id'));
|
|
103
|
-
});
|
|
104
|
-
|
|
105
|
-
it('should have unique id for the select filter with predefined id', async () => {
|
|
106
|
-
const fieldId = 'myFieldId';
|
|
107
|
-
render(
|
|
108
|
-
<Field label="Multiple currencies" id={fieldId}>
|
|
109
|
-
<MoneyInput {...props} />
|
|
110
|
-
</Field>,
|
|
111
|
-
);
|
|
112
|
-
await userEvent.click(screen.getByRole('combobox'));
|
|
113
|
-
expect(screen.getByLabelText(props.searchPlaceholder)).toHaveAttribute(
|
|
114
|
-
'id',
|
|
115
|
-
`${fieldId}SelectedCurrencySearch`,
|
|
116
|
-
);
|
|
117
|
-
});
|
|
118
|
-
|
|
119
|
-
it('should have unique id for the select filter without predefined id', async () => {
|
|
120
|
-
render(
|
|
121
|
-
<Field label="Multiple currencies">
|
|
122
|
-
<MoneyInput {...props} />
|
|
123
|
-
</Field>,
|
|
124
|
-
);
|
|
125
|
-
await userEvent.click(screen.getByRole('combobox'));
|
|
126
|
-
expect(screen.getByLabelText(props.searchPlaceholder)).toHaveAttribute(
|
|
127
|
-
'id',
|
|
128
|
-
expect.stringMatching(/^:.*?:SelectedCurrencySearch$/),
|
|
129
|
-
);
|
|
130
|
-
});
|
|
131
|
-
});
|
|
132
|
-
|
|
133
|
-
it('should have AT label for the currency dropdown', () => {
|
|
134
|
-
render(<MoneyInput {...props} />);
|
|
135
|
-
expect(screen.getByRole('combobox')).toHaveAttribute(
|
|
136
|
-
'aria-label',
|
|
137
|
-
messages.selectCurrencyLabel.defaultMessage,
|
|
138
|
-
);
|
|
139
|
-
});
|
|
140
|
-
|
|
141
|
-
it('should have a listbox label', async () => {
|
|
142
|
-
render(<MoneyInput {...props} />);
|
|
143
|
-
const trigger = screen.getByRole('combobox');
|
|
144
|
-
await userEvent.click(trigger);
|
|
145
|
-
const triggerLabel = trigger.getAttribute('aria-label');
|
|
146
|
-
expect(triggerLabel).toBeTruthy();
|
|
147
|
-
expect(screen.getByRole('listbox', { name: triggerLabel ?? '' })).toBeInTheDocument();
|
|
148
|
-
});
|
|
149
|
-
});
|