@transferwise/components 0.0.0-experimental-1597e95 → 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/definitionList/DefinitionList.story.tsx +49 -57
- package/src/definitionList/DefinitionList.tsx +1 -1
- package/src/definitionList/DefinitionList.spec.js +0 -91
|
@@ -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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBA,MAAMA,kBAAkB,GAAIC,MAA4B,IACtDA,MAAM,KAAKC,cAAM,CAACC,uBAAuB,IACzCF,MAAM,KAAKC,cAAM,CAACE,wBAAwB,IAC1CH,MAAM,KAAKC,cAAM,CAACG,oBAAoB,CAAA;AAExC,MAAMC,mBAAmB,GAAGA,CAC1BL,MAA4B,EAC5BM,MAA0C,KACxC;AACF,EAAA,MAAMC,OAAO,GAAG,CAAC,QAAQ,CAAC,CAAA;AAE1B,EAAA,IAAID,MAAM,EAAE;AACV,IAAA,IAAIP,kBAAkB,CAACC,MAAM,CAAC,EAAE;AAC9BO,MAAAA,OAAO,CAACC,IAAI,CAAC,oBAAoB,CAAC,CAAA;AACpC,KAAC,MAAM;AACLD,MAAAA,OAAO,CAACC,IAAI,CAAC,mBAAmB,CAAC,CAAA;AACnC,KAAA;AACF,GAAA;AAEA,EAAA,IAAIR,MAAM,KAAKC,cAAM,CAACE,wBAAwB,EAAE;AAC9CI,IAAAA,OAAO,CAACC,IAAI,CAAC,yDAAyD,CAAC,CAAA;AACzE,GAAC,MAAM;AACLD,IAAAA,OAAO,CAACC,IAAI,CAAC,yBAAyB,CAAC,CAAA;AACzC,GAAA;AAEA,EAAA,IAAIR,MAAM,KAAKC,cAAM,CAACG,oBAAoB,EAAE;AAC1CG,IAAAA,OAAO,CAACC,IAAI,CAAC,iBAAiB,CAAC,CAAA;AACjC,GAAA;AAEA,EAAA,OAAOD,OAAO,CAAA;AAChB,CAAC,CAAA;AAED,MAAME,kBAAkB,GAAG,EAA+C,CAAA;AAElD,SAAAC,cAAcA,CAAC;AACrCC,EAAAA,WAAW,GAAGF,kBAAkB;AAChCT,EAAAA,MAAM,GAAG,qBAAqB;AAC9BY,EAAAA,KAAAA;AACoB,CAAA,EAAA;AACpB,EAAA,oBACEC,cAAA,CAAA,IAAA,EAAA;AACEC,IAAAA,SAAS,EAAEC,SAAI,CAAC,4BAA4B,EAAE;AAC5C,MAAA,YAAY,EAAEH,KAAK;AACnB,MAAA,aAAa,EAAEZ,MAAM,KAAKC,cAAM,CAACe,mBAAmB;AACpD,MAAA,sDAAsD,EACpDhB,MAAM,KAAKC,cAAM,CAACgB,mBAAmB;MACvC,4CAA4C,EAAElB,kBAAkB,CAACC,MAAM,CAAA;AACxE,KAAA,CAAE;AAAAkB,IAAAA,QAAA,EAEFP,WAAW,CACTQ,MAAM,CAAEC,UAAU,IAAKA,UAAU,CAAC,CAClCC,GAAG,CAAC,CAAC;MAAEf,MAAM;MAAEgB,KAAK;MAAEC,KAAK;AAAEC,MAAAA,GAAAA;AAAG,KAAE,kBACjCC,eAAA,CAAA,KAAA,EAAA;AAAeX,MAAAA,SAAS,EAAC,0BAA0B;AAAAI,MAAAA,QAAA,gBACjDL,cAAA,CAAA,IAAA,EAAA;AAAAK,QAAAA,QAAA,EAAKI,KAAAA;OAAU,CACf,eAAAG,eAAA,CAAA,IAAA,EAAA;QAAIX,SAAS,EAAEC,SAAI,CAAC,GAAGV,mBAAmB,CAACL,MAAM,EAAEM,MAAM,CAAC,CAAE;AAAAY,QAAAA,QAAA,gBAC1DL,cAAA,CAAA,KAAA,EAAA;AAAAK,UAAAA,QAAA,EAAMK,KAAAA;AAAK,SAAM,CACjB,EAACjB,MAAM,gBACLO,cAAA,CAAA,KAAA,EAAA;AACEC,UAAAA,SAAS,EAAEC,SAAI,CACbhB,kBAAkB,CAACC,MAAM,CAAC,GAAG,OAAO,GAAG,OAAO,EAC9C,4BAA4B,CAC5B;UAAAkB,QAAA,eAEFL,cAAA,CAACa,YAAY,EAAA;AAACZ,YAAAA,SAAS,EAAC,4BAA4B;YAACa,OAAO,EAAErB,MAAM,CAACqB,OAAQ;YAAAT,QAAA,EAC1EZ,MAAM,CAACsB,KAAAA;WACI,CAAA;SACX,CAAC,GACJ,IAAI,CAAA;AAAA,OACN,CACN,CAAA;AAAA,KAAA,EAjBUJ,GAiBL,CACN,CAAA;AAAC,GACF,CAAC,CAAA;AAET;;;;"}
|
|
@@ -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
|
@@ -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,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
|
-
});
|