@arbor-education/design-system.components 0.13.1 → 0.14.0
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/CHANGELOG.md +8 -0
- package/dist/components/articleCard/ArticleCard.d.ts +30 -0
- package/dist/components/articleCard/ArticleCard.d.ts.map +1 -0
- package/dist/components/articleCard/ArticleCard.js +24 -0
- package/dist/components/articleCard/ArticleCard.js.map +1 -0
- package/dist/components/articleCard/ArticleCard.stories.d.ts +18 -0
- package/dist/components/articleCard/ArticleCard.stories.d.ts.map +1 -0
- package/dist/components/articleCard/ArticleCard.stories.js +112 -0
- package/dist/components/articleCard/ArticleCard.stories.js.map +1 -0
- package/dist/components/articleCard/ArticleCard.test.d.ts +2 -0
- package/dist/components/articleCard/ArticleCard.test.d.ts.map +1 -0
- package/dist/components/articleCard/ArticleCard.test.js +49 -0
- package/dist/components/articleCard/ArticleCard.test.js.map +1 -0
- package/dist/components/card/Card.d.ts +41 -12
- package/dist/components/card/Card.d.ts.map +1 -1
- package/dist/components/card/Card.js +46 -17
- package/dist/components/card/Card.js.map +1 -1
- package/dist/components/card/Card.stories.d.ts +9 -84
- package/dist/components/card/Card.stories.d.ts.map +1 -1
- package/dist/components/card/Card.stories.js +15 -73
- package/dist/components/card/Card.stories.js.map +1 -1
- package/dist/components/card/Card.test.js +50 -152
- package/dist/components/card/Card.test.js.map +1 -1
- package/dist/components/formField/inputs/time/TimeInput.d.ts +1 -1
- package/dist/components/formField/inputs/time/TimeInput.stories.d.ts +1 -1
- package/dist/components/icoText/IcoText.d.ts +37 -0
- package/dist/components/icoText/IcoText.d.ts.map +1 -0
- package/dist/components/icoText/IcoText.js +29 -0
- package/dist/components/icoText/IcoText.js.map +1 -0
- package/dist/components/icoText/IcoText.stories.d.ts +34 -0
- package/dist/components/icoText/IcoText.stories.d.ts.map +1 -0
- package/dist/components/icoText/IcoText.stories.js +24 -0
- package/dist/components/icoText/IcoText.stories.js.map +1 -0
- package/dist/components/icoText/IcoText.test.d.ts +2 -0
- package/dist/components/icoText/IcoText.test.d.ts.map +1 -0
- package/dist/components/icoText/IcoText.test.js +27 -0
- package/dist/components/icoText/IcoText.test.js.map +1 -0
- package/dist/components/kpiCard/KPICard.d.ts +13 -0
- package/dist/components/kpiCard/KPICard.d.ts.map +1 -0
- package/dist/components/kpiCard/KPICard.js +8 -0
- package/dist/components/kpiCard/KPICard.js.map +1 -0
- package/dist/components/kpiCard/KPICard.stories.d.ts +9 -0
- package/dist/components/kpiCard/KPICard.stories.d.ts.map +1 -0
- package/dist/components/kpiCard/KPICard.stories.js +18 -0
- package/dist/components/kpiCard/KPICard.stories.js.map +1 -0
- package/dist/components/kpiCard/KPICard.test.d.ts +2 -0
- package/dist/components/kpiCard/KPICard.test.d.ts.map +1 -0
- package/dist/components/kpiCard/KPICard.test.js +37 -0
- package/dist/components/kpiCard/KPICard.test.js.map +1 -0
- package/dist/components/kvpList/KVPList.d.ts +34 -0
- package/dist/components/kvpList/KVPList.d.ts.map +1 -0
- package/dist/components/kvpList/KVPList.js +20 -0
- package/dist/components/kvpList/KVPList.js.map +1 -0
- package/dist/components/kvpList/KVPList.stories.d.ts +27 -0
- package/dist/components/kvpList/KVPList.stories.d.ts.map +1 -0
- package/dist/components/kvpList/KVPList.stories.js +18 -0
- package/dist/components/kvpList/KVPList.stories.js.map +1 -0
- package/dist/components/kvpList/KVPList.test.d.ts +2 -0
- package/dist/components/kvpList/KVPList.test.d.ts.map +1 -0
- package/dist/components/kvpList/KVPList.test.js +29 -0
- package/dist/components/kvpList/KVPList.test.js.map +1 -0
- package/dist/components/singleUser/SingleUser.d.ts +1 -1
- package/dist/components/tabs/TabsItem.stories.d.ts +2 -2
- package/dist/index.css +186 -22
- package/dist/index.css.map +1 -1
- package/dist/index.d.ts +13 -4
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +12 -3
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/articleCard/ArticleCard.stories.tsx +132 -0
- package/src/components/articleCard/ArticleCard.test.tsx +121 -0
- package/src/components/articleCard/ArticleCard.tsx +100 -0
- package/src/components/articleCard/articleCard.scss +39 -0
- package/src/components/card/Card.stories.tsx +35 -79
- package/src/components/card/Card.test.tsx +72 -190
- package/src/components/card/Card.tsx +117 -58
- package/src/components/card/card.scss +18 -31
- package/src/components/icoText/IcoText.stories.tsx +47 -0
- package/src/components/icoText/IcoText.test.tsx +41 -0
- package/src/components/icoText/IcoText.tsx +93 -0
- package/src/components/icoText/icoText.scss +34 -0
- package/src/components/kpiCard/KPICard.stories.tsx +47 -0
- package/src/components/kpiCard/KPICard.test.tsx +60 -0
- package/src/components/kpiCard/KPICard.tsx +45 -0
- package/src/components/kpiCard/kpiCard.scss +35 -0
- package/src/components/kvpList/KVPList.stories.tsx +51 -0
- package/src/components/kvpList/KVPList.test.tsx +66 -0
- package/src/components/kvpList/KVPList.tsx +109 -0
- package/src/components/kvpList/kvpList.scss +64 -0
- package/src/index.scss +4 -0
- package/src/index.ts +13 -4
- package/src/tokens.scss +6 -0
- package/tokens/json/Arbor.json +30 -0
|
@@ -1,89 +1,31 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { fn } from 'storybook/test';
|
|
3
|
+
import { Card } from './Card';
|
|
3
4
|
const meta = {
|
|
4
5
|
title: 'Components/Card',
|
|
5
6
|
component: Card,
|
|
6
7
|
};
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
title: 'Title of Card',
|
|
10
|
-
paragraph: 'Lorem ipsum dolor sit amet consectetur adipiscing elit.',
|
|
11
|
-
disabled: false,
|
|
12
|
-
onClick: fn(),
|
|
13
|
-
onKeyDown: fn(),
|
|
14
|
-
},
|
|
15
|
-
};
|
|
16
|
-
export const CardWithTitleParagraphAndIcon = {
|
|
17
|
-
args: {
|
|
18
|
-
title: 'Title of Card',
|
|
19
|
-
paragraph: 'Lorem ipsum dolor sit amet consectetur adipiscing elit.',
|
|
20
|
-
icon: 'eye',
|
|
21
|
-
disabled: false,
|
|
22
|
-
onClick: fn(),
|
|
23
|
-
onKeyDown: fn(),
|
|
24
|
-
},
|
|
25
|
-
};
|
|
26
|
-
export const TheEverythingCard = {
|
|
27
|
-
args: {
|
|
28
|
-
title: 'Title of Card',
|
|
29
|
-
paragraph: 'Lorem ipsum dolor sit amet consectetur adipiscing elit.',
|
|
30
|
-
icon: 'eye',
|
|
31
|
-
disabled: false,
|
|
32
|
-
pillText: 'argle bargle',
|
|
33
|
-
pillColor: 'orange',
|
|
34
|
-
onClick: fn(),
|
|
35
|
-
onKeyDown: fn(),
|
|
36
|
-
},
|
|
37
|
-
};
|
|
38
|
-
export const CardWithTitleParagraphAndPill = {
|
|
39
|
-
args: {
|
|
40
|
-
title: 'Title of Card',
|
|
41
|
-
paragraph: 'Lorem ipsum dolor sit amet consectetur adipiscing elit.',
|
|
42
|
-
disabled: false,
|
|
43
|
-
pillText: 'argle bargle',
|
|
44
|
-
pillColor: 'orange',
|
|
45
|
-
onClick: fn(),
|
|
46
|
-
onKeyDown: fn(),
|
|
47
|
-
},
|
|
48
|
-
};
|
|
49
|
-
export const CardWithTitleAndIcon = {
|
|
50
|
-
args: {
|
|
51
|
-
title: 'Title of Card',
|
|
52
|
-
icon: 'eye',
|
|
53
|
-
disabled: false,
|
|
54
|
-
onClick: fn(),
|
|
55
|
-
onKeyDown: fn(),
|
|
56
|
-
},
|
|
57
|
-
};
|
|
58
|
-
export const CardWithParagraph = {
|
|
8
|
+
const sampleCardContent = (_jsxs(_Fragment, { children: [_jsx("h3", { children: "Attendance summary" }), _jsx("p", { children: "View the latest attendance and behaviour insights for this cohort." })] }));
|
|
9
|
+
export const StaticCard = {
|
|
59
10
|
args: {
|
|
60
|
-
|
|
61
|
-
disabled: false,
|
|
62
|
-
onClick: fn(),
|
|
63
|
-
onKeyDown: fn(),
|
|
11
|
+
'aria-label': 'Static summary card',
|
|
64
12
|
},
|
|
13
|
+
render: args => (_jsx(Card, { ...args, children: sampleCardContent })),
|
|
65
14
|
};
|
|
66
|
-
export const
|
|
15
|
+
export const ClickableCard = {
|
|
67
16
|
args: {
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
disabled: true,
|
|
72
|
-
pillText: 'argle bargle',
|
|
73
|
-
pillColor: 'orange',
|
|
74
|
-
onClick: fn(),
|
|
75
|
-
onKeyDown: fn(),
|
|
17
|
+
'onClick': fn(),
|
|
18
|
+
'onKeyDown': fn(),
|
|
19
|
+
'aria-label': 'Clickable card',
|
|
76
20
|
},
|
|
21
|
+
render: args => (_jsx(Card, { ...args, children: sampleCardContent })),
|
|
77
22
|
};
|
|
78
|
-
export const
|
|
23
|
+
export const DenseCard = {
|
|
79
24
|
args: {
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
icon: 'eye',
|
|
83
|
-
disabled: true,
|
|
84
|
-
pillText: 'argle bargle',
|
|
85
|
-
pillColor: 'orange',
|
|
25
|
+
'aria-label': 'Dense card',
|
|
26
|
+
'spacing': 'dense',
|
|
86
27
|
},
|
|
28
|
+
render: args => (_jsx(Card, { ...args, children: sampleCardContent })),
|
|
87
29
|
};
|
|
88
30
|
export default meta;
|
|
89
31
|
//# sourceMappingURL=Card.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.stories.js","sourceRoot":"","sources":["../../../src/components/card/Card.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"Card.stories.js","sourceRoot":"","sources":["../../../src/components/card/Card.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,MAAM,gBAAgB,CAAC;AACpC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,IAAI;CACY,CAAC;AAI9B,MAAM,iBAAiB,GAAG,CACxB,8BACE,8CAA2B,EAC3B,6FAAyE,IACxE,CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAU;IAC/B,IAAI,EAAE;QACJ,YAAY,EAAE,qBAAqB;KACpC;IACD,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,CACd,KAAC,IAAI,OAAK,IAAI,YACX,iBAAiB,GACb,CACR;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAU;IAClC,IAAI,EAAE;QACJ,SAAS,EAAE,EAAE,EAAE;QACf,WAAW,EAAE,EAAE,EAAE;QACjB,YAAY,EAAE,gBAAgB;KAC/B;IACD,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,CACd,KAAC,IAAI,OAAK,IAAI,YACX,iBAAiB,GACb,CACR;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU;IAC9B,IAAI,EAAE;QACJ,YAAY,EAAE,YAAY;QAC1B,SAAS,EAAE,OAAO;KACnB;IACD,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,CACd,KAAC,IAAI,OAAK,IAAI,YACX,iBAAiB,GACb,CACR;CACF,CAAC;AAEF,eAAe,IAAI,CAAC"}
|
|
@@ -1,164 +1,62 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { expect, test, describe, vi } from 'vitest';
|
|
4
4
|
import { render, screen, fireEvent } from '@testing-library/react';
|
|
5
5
|
import { Card } from './Card';
|
|
6
6
|
import '@testing-library/jest-dom/vitest';
|
|
7
|
-
describe('Card
|
|
8
|
-
test('renders
|
|
9
|
-
render(_jsx(Card, {}));
|
|
10
|
-
const card =
|
|
7
|
+
describe('Card', () => {
|
|
8
|
+
test('renders children inside the card shell', () => {
|
|
9
|
+
const { container } = render(_jsx(Card, { "aria-label": "Summary card", children: _jsx("div", { children: "Custom content" }) }));
|
|
10
|
+
const card = container.querySelector('figure');
|
|
11
11
|
expect(card).toBeInTheDocument();
|
|
12
|
-
expect(card).toHaveAttribute('aria-label', '
|
|
12
|
+
expect(card).toHaveAttribute('aria-label', 'Summary card');
|
|
13
|
+
expect(screen.getByText('Custom content')).toBeInTheDocument();
|
|
13
14
|
});
|
|
14
|
-
test('renders
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
expect(
|
|
22
|
-
expect(
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
expect(
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
expect(
|
|
36
|
-
|
|
37
|
-
|
|
15
|
+
test('renders clickable affordances when interactive', () => {
|
|
16
|
+
const mockClick = vi.fn();
|
|
17
|
+
const { container } = render(_jsx(Card, { onClick: mockClick, "aria-label": "Clickable card", children: _jsx("div", { children: "Clickable content" }) }));
|
|
18
|
+
const card = screen.getByRole('button', { name: 'Clickable card' });
|
|
19
|
+
fireEvent.click(card);
|
|
20
|
+
expect(mockClick).toHaveBeenCalledTimes(1);
|
|
21
|
+
expect(card).toHaveClass('ds-card__container--clickable');
|
|
22
|
+
expect(card).toHaveAttribute('tabIndex', '0');
|
|
23
|
+
expect(container.querySelector('.ds-icon-chevron-right')).toBeInTheDocument();
|
|
24
|
+
expect(container.querySelector('.ds-icon-arrow-right')).toBeInTheDocument();
|
|
25
|
+
});
|
|
26
|
+
test('does not render clickable affordances when disabled', () => {
|
|
27
|
+
const mockClick = vi.fn();
|
|
28
|
+
const { container } = render(_jsx(Card, { disabled: true, onClick: mockClick, "aria-label": "Disabled card", children: _jsx("div", { children: "Disabled content" }) }));
|
|
29
|
+
const card = screen.getByRole('button', { name: 'Disabled card' });
|
|
30
|
+
expect(card).toHaveClass('ds-card__container--disabled');
|
|
31
|
+
expect(card).toHaveAttribute('aria-disabled', 'true');
|
|
32
|
+
expect(card).toHaveAttribute('role', 'button');
|
|
33
|
+
expect(card).toHaveAttribute('tabIndex', '0');
|
|
34
|
+
expect(container.querySelector('.ds-icon-chevron-right')).not.toBeInTheDocument();
|
|
35
|
+
card.focus();
|
|
36
|
+
expect(card).toHaveFocus();
|
|
37
|
+
fireEvent.click(card);
|
|
38
|
+
fireEvent.keyDown(card, { key: 'Enter' });
|
|
39
|
+
fireEvent.keyDown(card, { key: ' ' });
|
|
40
|
+
expect(mockClick).not.toHaveBeenCalled();
|
|
41
|
+
});
|
|
42
|
+
test('calls onKeyDown and keyboard-activates the card on Enter', () => {
|
|
38
43
|
const mockClick = vi.fn();
|
|
39
44
|
const mockKeyDown = vi.fn();
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
expect(
|
|
44
|
-
expect(
|
|
45
|
-
});
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
const mockClick = vi.fn();
|
|
56
|
-
render(_jsx(Card, { title: "Disabled Card", onClick: mockClick, disabled: true }));
|
|
57
|
-
const card = screen.getByRole('article');
|
|
58
|
-
fireEvent.click(card);
|
|
59
|
-
expect(mockClick).not.toHaveBeenCalled();
|
|
60
|
-
});
|
|
61
|
-
test('shows click arrow icon when card is clickable', () => {
|
|
62
|
-
const mockClick = vi.fn();
|
|
63
|
-
const { container } = render(_jsx(Card, { title: "Clickable Card", onClick: mockClick }));
|
|
64
|
-
expect(container.querySelector('.ds-icon-chevron-right')).toBeInTheDocument();
|
|
65
|
-
});
|
|
66
|
-
test('does not show click arrow icon when card is not clickable', () => {
|
|
67
|
-
const { container } = render(_jsx(Card, { title: "Non-clickable Card" }));
|
|
68
|
-
expect(container.querySelector('.ds-icon-chevron-right')).not.toBeInTheDocument();
|
|
69
|
-
});
|
|
70
|
-
test('does not show click arrow icon when card is disabled', () => {
|
|
71
|
-
const mockClick = vi.fn();
|
|
72
|
-
const { container } = render(_jsx(Card, { title: "Disabled Card", onClick: mockClick, disabled: true }));
|
|
73
|
-
expect(container.querySelector('.ds-icon-chevron-right')).not.toBeInTheDocument();
|
|
74
|
-
});
|
|
75
|
-
});
|
|
76
|
-
describe('Keyboard interactions', () => {
|
|
77
|
-
test('calls onKeyDown handler when key is pressed on clickable card', () => {
|
|
78
|
-
const mockKeyDown = vi.fn();
|
|
79
|
-
render(_jsx(Card, { title: "Keyboard Card", onClick: vi.fn(), onKeyDown: mockKeyDown }));
|
|
80
|
-
const card = screen.getByRole('article');
|
|
81
|
-
fireEvent.keyDown(card, { key: 'Enter' });
|
|
82
|
-
expect(mockKeyDown).toHaveBeenCalledTimes(1);
|
|
83
|
-
});
|
|
84
|
-
test('does not call onKeyDown when card is disabled', () => {
|
|
85
|
-
const mockKeyDown = vi.fn();
|
|
86
|
-
render(_jsx(Card, { title: "Disabled Card", onClick: vi.fn(), onKeyDown: mockKeyDown, disabled: true }));
|
|
87
|
-
const card = screen.getByRole('article');
|
|
88
|
-
fireEvent.keyDown(card, { key: 'Enter' });
|
|
89
|
-
expect(mockKeyDown).not.toHaveBeenCalled();
|
|
90
|
-
});
|
|
91
|
-
test('does not call onKeyDown when card is not clickable', () => {
|
|
92
|
-
const mockKeyDown = vi.fn();
|
|
93
|
-
render(_jsx(Card, { title: "Non-clickable Card", onKeyDown: mockKeyDown }));
|
|
94
|
-
const card = screen.getByRole('article');
|
|
95
|
-
fireEvent.keyDown(card, { key: 'Enter' });
|
|
96
|
-
expect(mockKeyDown).not.toHaveBeenCalled();
|
|
97
|
-
});
|
|
98
|
-
});
|
|
99
|
-
describe('CSS classes and accessibility', () => {
|
|
100
|
-
test('applies clickable class when onClick is provided and not disabled', () => {
|
|
101
|
-
const mockClick = vi.fn();
|
|
102
|
-
render(_jsx(Card, { onClick: mockClick }));
|
|
103
|
-
const card = screen.getByRole('article');
|
|
104
|
-
expect(card).toHaveClass('ds-card__container--clickable');
|
|
105
|
-
});
|
|
106
|
-
test('applies disabled class when disabled', () => {
|
|
107
|
-
render(_jsx(Card, { disabled: true }));
|
|
108
|
-
const card = screen.getByRole('article');
|
|
109
|
-
expect(card).toHaveClass('ds-card__container--disabled');
|
|
110
|
-
});
|
|
111
|
-
test('does not apply clickable class when disabled', () => {
|
|
112
|
-
const mockClick = vi.fn();
|
|
113
|
-
render(_jsx(Card, { onClick: mockClick, disabled: true }));
|
|
114
|
-
const card = screen.getByRole('article');
|
|
115
|
-
expect(card).not.toHaveClass('ds-card__container--clickable');
|
|
116
|
-
expect(card).toHaveClass('ds-card__container--disabled');
|
|
117
|
-
});
|
|
118
|
-
test('sets correct tabIndex for clickable card', () => {
|
|
119
|
-
const mockClick = vi.fn();
|
|
120
|
-
render(_jsx(Card, { onClick: mockClick }));
|
|
121
|
-
const card = screen.getByRole('article');
|
|
122
|
-
expect(card).toHaveAttribute('tabIndex', '0');
|
|
123
|
-
});
|
|
124
|
-
test('sets correct tabIndex for non-clickable card', () => {
|
|
125
|
-
render(_jsx(Card, {}));
|
|
126
|
-
const card = screen.getByRole('article');
|
|
127
|
-
expect(card).toHaveAttribute('tabIndex', '-1');
|
|
128
|
-
});
|
|
129
|
-
test('sets correct tabIndex for disabled card', () => {
|
|
130
|
-
const mockClick = vi.fn();
|
|
131
|
-
render(_jsx(Card, { onClick: mockClick, disabled: true }));
|
|
132
|
-
const card = screen.getByRole('article');
|
|
133
|
-
expect(card).toHaveAttribute('tabIndex', '-1');
|
|
134
|
-
});
|
|
135
|
-
test('has correct aria-label', () => {
|
|
136
|
-
render(_jsx(Card, {}));
|
|
137
|
-
const card = screen.getByRole('article');
|
|
138
|
-
expect(card).toHaveAttribute('aria-label', 'Card');
|
|
139
|
-
});
|
|
140
|
-
});
|
|
141
|
-
describe('Event handler edge cases', () => {
|
|
142
|
-
test('handles onClick without onKeyDown', () => {
|
|
143
|
-
const mockClick = vi.fn();
|
|
144
|
-
render(_jsx(Card, { title: "Click only", onClick: mockClick }));
|
|
145
|
-
const card = screen.getByRole('article');
|
|
146
|
-
fireEvent.click(card);
|
|
147
|
-
expect(mockClick).toHaveBeenCalledTimes(1);
|
|
148
|
-
});
|
|
149
|
-
test('handles onKeyDown without onClick', () => {
|
|
150
|
-
const mockKeyDown = vi.fn();
|
|
151
|
-
render(_jsx(Card, { title: "KeyDown only", onKeyDown: mockKeyDown }));
|
|
152
|
-
const card = screen.getByRole('article');
|
|
153
|
-
fireEvent.keyDown(card, { key: 'Enter' });
|
|
154
|
-
// Should not be called because card is not clickable (no onClick)
|
|
155
|
-
expect(mockKeyDown).not.toHaveBeenCalled();
|
|
156
|
-
});
|
|
157
|
-
test('does not throw error when clicking card without handlers', () => {
|
|
158
|
-
render(_jsx(Card, { title: "No handlers" }));
|
|
159
|
-
const card = screen.getByRole('article');
|
|
160
|
-
expect(() => fireEvent.click(card)).not.toThrow();
|
|
161
|
-
});
|
|
45
|
+
render(_jsx(Card, { onClick: mockClick, onKeyDown: mockKeyDown, "aria-label": "Keyboard card", children: _jsx("div", { children: "Keyboard content" }) }));
|
|
46
|
+
const card = screen.getByRole('button', { name: 'Keyboard card' });
|
|
47
|
+
fireEvent.keyDown(card, { key: 'Enter' });
|
|
48
|
+
expect(mockKeyDown).toHaveBeenCalledTimes(1);
|
|
49
|
+
expect(mockClick).toHaveBeenCalledTimes(1);
|
|
50
|
+
});
|
|
51
|
+
test('passes through aria-labelledby', () => {
|
|
52
|
+
const { container } = render(_jsxs(_Fragment, { children: [_jsx("h2", { id: "card-heading", children: "Linked heading" }), _jsx(Card, { "aria-labelledby": "card-heading", children: _jsx("div", { children: "Linked content" }) })] }));
|
|
53
|
+
const card = container.querySelector('figure');
|
|
54
|
+
expect(card).toHaveAttribute('aria-labelledby', 'card-heading');
|
|
55
|
+
});
|
|
56
|
+
test('applies dense spacing when requested', () => {
|
|
57
|
+
const { container } = render(_jsx(Card, { spacing: "dense", children: _jsx("div", { children: "Dense content" }) }));
|
|
58
|
+
const card = container.querySelector('figure');
|
|
59
|
+
expect(card).toHaveClass('ds-card__container--dense');
|
|
162
60
|
});
|
|
163
61
|
});
|
|
164
62
|
//# sourceMappingURL=Card.test.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.test.js","sourceRoot":"","sources":["../../../src/components/card/Card.test.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnE,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,kCAAkC,CAAC;AAE1C,QAAQ,CAAC,
|
|
1
|
+
{"version":3,"file":"Card.test.js","sourceRoot":"","sources":["../../../src/components/card/Card.test.tsx"],"names":[],"mappings":"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"}
|
|
@@ -22,7 +22,7 @@ export declare const TimeInput: import("react").ForwardRefExoticComponent<{
|
|
|
22
22
|
onValueChange?: (value: string) => void;
|
|
23
23
|
searchType?: ComboboxSearchType;
|
|
24
24
|
highlightStringMatches?: boolean;
|
|
25
|
-
} & Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "
|
|
25
|
+
} & Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type" | "defaultValue" | "value"> & {
|
|
26
26
|
value?: TimeValue | "";
|
|
27
27
|
defaultValue?: TimeValue | "";
|
|
28
28
|
} & import("react").RefAttributes<HTMLInputElement>>;
|
|
@@ -9,7 +9,7 @@ declare const meta: {
|
|
|
9
9
|
onValueChange?: (value: string) => void;
|
|
10
10
|
searchType?: import("../../../combobox/types").ComboboxSearchType;
|
|
11
11
|
highlightStringMatches?: boolean;
|
|
12
|
-
} & Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "size" | "
|
|
12
|
+
} & Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "size" | "type" | "defaultValue" | "value"> & {
|
|
13
13
|
value?: TimeValue | "";
|
|
14
14
|
defaultValue?: TimeValue | "";
|
|
15
15
|
} & import("react").RefAttributes<HTMLInputElement>>;
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import type { IconName } from '../icon/allowedIcons';
|
|
2
|
+
import { Icon } from '../icon/Icon';
|
|
3
|
+
export type IcoTextProps = {
|
|
4
|
+
children?: React.ReactNode;
|
|
5
|
+
className?: string;
|
|
6
|
+
};
|
|
7
|
+
export type IcoTextHeadingProps = React.HTMLAttributes<HTMLHeadingElement> & {
|
|
8
|
+
children: React.ReactNode;
|
|
9
|
+
};
|
|
10
|
+
export type IcoTextParagraphProps = React.HTMLAttributes<HTMLParagraphElement> & {
|
|
11
|
+
children: React.ReactNode;
|
|
12
|
+
};
|
|
13
|
+
export type IcoTextIconProps = {
|
|
14
|
+
className?: string;
|
|
15
|
+
color?: Icon.Props['color'];
|
|
16
|
+
name: IconName;
|
|
17
|
+
screenReaderText?: string;
|
|
18
|
+
size?: 12 | 16 | 24;
|
|
19
|
+
};
|
|
20
|
+
export declare const IcoText: {
|
|
21
|
+
({ children, className }: IcoTextProps): React.JSX.Element;
|
|
22
|
+
displayName: string;
|
|
23
|
+
} & {
|
|
24
|
+
Heading: {
|
|
25
|
+
({ children, className, ...rest }: IcoTextHeadingProps): React.JSX.Element;
|
|
26
|
+
displayName: string;
|
|
27
|
+
};
|
|
28
|
+
Paragraph: {
|
|
29
|
+
({ children, className, ...rest }: IcoTextParagraphProps): React.JSX.Element;
|
|
30
|
+
displayName: string;
|
|
31
|
+
};
|
|
32
|
+
Icon: {
|
|
33
|
+
({ className, color, name, screenReaderText, size, }: IcoTextIconProps): React.JSX.Element;
|
|
34
|
+
displayName: string;
|
|
35
|
+
};
|
|
36
|
+
};
|
|
37
|
+
//# sourceMappingURL=IcoText.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"IcoText.d.ts","sourceRoot":"","sources":["../../../src/components/icoText/IcoText.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAG5C,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC,GAAG;IAC3E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC,GAAG;IAC/E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAC5B,IAAI,EAAE,QAAQ,CAAC;IACf,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,IAAI,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;CACrB,CAAC;AAgEF,eAAO,MAAM,OAAO;8BA1B0B,YAAY,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;;;2CAhC3E,mBAAmB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;;;2CAUvC,qBAAqB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;;;8DAYzC,gBAAgB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;;CAwCrC,CAAC"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import classNames from 'classnames';
|
|
3
|
+
import { Icon } from '../icon/Icon';
|
|
4
|
+
import { Children, isValidElement } from 'react';
|
|
5
|
+
const IcoTextHeading = ({ children, className, ...rest }) => (_jsx("h4", { className: classNames('ds-ico-text__heading', className), ...rest, children: children }));
|
|
6
|
+
const IcoTextParagraph = ({ children, className, ...rest }) => (_jsx("p", { className: classNames('ds-ico-text__paragraph', className), ...rest, children: children }));
|
|
7
|
+
const IcoTextIcon = ({ className, color, name, screenReaderText, size = 24, }) => (_jsx(Icon, { name: name, className: classNames('ds-ico-text__icon', className), color: color, screenReaderText: screenReaderText, size: size }));
|
|
8
|
+
const IcoTextRoot = ({ children, className }) => {
|
|
9
|
+
const iconChildren = [];
|
|
10
|
+
const contentChildren = [];
|
|
11
|
+
Children.forEach(children, (child) => {
|
|
12
|
+
if (isValidElement(child) && child.type === IcoTextIcon) {
|
|
13
|
+
iconChildren.push(child);
|
|
14
|
+
return;
|
|
15
|
+
}
|
|
16
|
+
contentChildren.push(child);
|
|
17
|
+
});
|
|
18
|
+
return (_jsxs("div", { className: classNames('ds-ico-text', className), children: [iconChildren, _jsx("div", { className: "ds-ico-text__content", children: contentChildren })] }));
|
|
19
|
+
};
|
|
20
|
+
IcoTextHeading.displayName = 'IcoText.Heading';
|
|
21
|
+
IcoTextParagraph.displayName = 'IcoText.Paragraph';
|
|
22
|
+
IcoTextIcon.displayName = 'IcoText.Icon';
|
|
23
|
+
IcoTextRoot.displayName = 'IcoText';
|
|
24
|
+
export const IcoText = Object.assign(IcoTextRoot, {
|
|
25
|
+
Heading: IcoTextHeading,
|
|
26
|
+
Paragraph: IcoTextParagraph,
|
|
27
|
+
Icon: IcoTextIcon,
|
|
28
|
+
});
|
|
29
|
+
//# sourceMappingURL=IcoText.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"IcoText.js","sourceRoot":"","sources":["../../../src/components/icoText/IcoText.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAuBjD,MAAM,cAAc,GAAG,CAAC,EACtB,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACa,EAAqB,EAAE,CAAC,CAC5C,aAAI,SAAS,EAAE,UAAU,CAAC,sBAAsB,EAAE,SAAS,CAAC,KAAM,IAAI,YACnE,QAAQ,GACN,CACN,CAAC;AAEF,MAAM,gBAAgB,GAAG,CAAC,EACxB,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACe,EAAqB,EAAE,CAAC,CAC9C,YAAG,SAAS,EAAE,UAAU,CAAC,wBAAwB,EAAE,SAAS,CAAC,KAAM,IAAI,YACpE,QAAQ,GACP,CACL,CAAC;AAEF,MAAM,WAAW,GAAG,CAAC,EACnB,SAAS,EACT,KAAK,EACL,IAAI,EACJ,gBAAgB,EAChB,IAAI,GAAG,EAAE,GACQ,EAAqB,EAAE,CAAC,CACzC,KAAC,IAAI,IACH,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,UAAU,CAAC,mBAAmB,EAAE,SAAS,CAAC,EACrD,KAAK,EAAE,KAAK,EACZ,gBAAgB,EAAE,gBAAgB,EAClC,IAAI,EAAE,IAAI,GACV,CACH,CAAC;AAEF,MAAM,WAAW,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAgB,EAAqB,EAAE;IAC/E,MAAM,YAAY,GAAsB,EAAE,CAAC;IAC3C,MAAM,eAAe,GAAsB,EAAE,CAAC;IAE9C,QAAQ,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;QACnC,IAAI,cAAc,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAK,WAAW,EAAE,CAAC;YACxD,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACzB,OAAO;QACT,CAAC;QAED,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC9B,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,eAAK,SAAS,EAAE,UAAU,CAAC,aAAa,EAAE,SAAS,CAAC,aACjD,YAAY,EACb,cAAK,SAAS,EAAC,sBAAsB,YAAE,eAAe,GAAO,IACzD,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,cAAc,CAAC,WAAW,GAAG,iBAAiB,CAAC;AAC/C,gBAAgB,CAAC,WAAW,GAAG,mBAAmB,CAAC;AACnD,WAAW,CAAC,WAAW,GAAG,cAAc,CAAC;AACzC,WAAW,CAAC,WAAW,GAAG,SAAS,CAAC;AAEpC,MAAM,CAAC,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,WAAW,EAAE;IAChD,OAAO,EAAE,cAAc;IACvB,SAAS,EAAE,gBAAgB;IAC3B,IAAI,EAAE,WAAW;CAClB,CAAC,CAAC"}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import type { StoryObj } from '@storybook/react-vite';
|
|
2
|
+
declare const meta: {
|
|
3
|
+
title: string;
|
|
4
|
+
component: {
|
|
5
|
+
({ children, className }: import("./IcoText").IcoTextProps): React.JSX.Element;
|
|
6
|
+
displayName: string;
|
|
7
|
+
} & {
|
|
8
|
+
Heading: {
|
|
9
|
+
({ children, className, ...rest }: import("./IcoText").IcoTextHeadingProps): React.JSX.Element;
|
|
10
|
+
displayName: string;
|
|
11
|
+
};
|
|
12
|
+
Paragraph: {
|
|
13
|
+
({ children, className, ...rest }: import("./IcoText").IcoTextParagraphProps): React.JSX.Element;
|
|
14
|
+
displayName: string;
|
|
15
|
+
};
|
|
16
|
+
Icon: {
|
|
17
|
+
({ className, color, name, screenReaderText, size, }: import("./IcoText").IcoTextIconProps): React.JSX.Element;
|
|
18
|
+
displayName: string;
|
|
19
|
+
};
|
|
20
|
+
};
|
|
21
|
+
parameters: {
|
|
22
|
+
docs: {
|
|
23
|
+
description: {
|
|
24
|
+
component: string;
|
|
25
|
+
};
|
|
26
|
+
};
|
|
27
|
+
};
|
|
28
|
+
};
|
|
29
|
+
type Story = StoryObj<typeof meta>;
|
|
30
|
+
export declare const WithIconAndParagraph: Story;
|
|
31
|
+
export declare const TextOnly: Story;
|
|
32
|
+
export declare const HeadingWithIcon: Story;
|
|
33
|
+
export default meta;
|
|
34
|
+
//# sourceMappingURL=IcoText.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"IcoText.stories.d.ts","sourceRoot":"","sources":["../../../src/components/icoText/IcoText.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAG5D,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;CAWsB,CAAC;AAEjC,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,oBAAoB,EAAE,KAQlC,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAOtB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAO7B,CAAC;AAEF,eAAe,IAAI,CAAC"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { IcoText } from './IcoText';
|
|
3
|
+
const meta = {
|
|
4
|
+
title: 'Components/IcoText',
|
|
5
|
+
component: IcoText,
|
|
6
|
+
parameters: {
|
|
7
|
+
docs: {
|
|
8
|
+
description: {
|
|
9
|
+
component: 'Use `IcoText.Icon` as a direct child of `IcoText` so it is hoisted into the leading icon rail.',
|
|
10
|
+
},
|
|
11
|
+
},
|
|
12
|
+
},
|
|
13
|
+
};
|
|
14
|
+
export const WithIconAndParagraph = {
|
|
15
|
+
render: args => (_jsxs(IcoText, { ...args, children: [_jsx(IcoText.Icon, { name: "eye" }), _jsx(IcoText.Heading, { children: "Article heading" }), _jsx(IcoText.Paragraph, { children: "Supporting text for an article card layout." })] })),
|
|
16
|
+
};
|
|
17
|
+
export const TextOnly = {
|
|
18
|
+
render: args => (_jsxs(IcoText, { ...args, children: [_jsx(IcoText.Heading, { children: "Article heading" }), _jsx(IcoText.Paragraph, { children: "Supporting text with no leading icon." })] })),
|
|
19
|
+
};
|
|
20
|
+
export const HeadingWithIcon = {
|
|
21
|
+
render: args => (_jsxs(IcoText, { ...args, children: [_jsx(IcoText.Icon, { name: "eye" }), _jsx(IcoText.Heading, { children: "Heading only" })] })),
|
|
22
|
+
};
|
|
23
|
+
export default meta;
|
|
24
|
+
//# sourceMappingURL=IcoText.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"IcoText.stories.js","sourceRoot":"","sources":["../../../src/components/icoText/IcoText.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,OAAO;IAClB,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,SAAS,EACP,gGAAgG;aACnG;SACF;KACF;CAC6B,CAAC;AAIjC,MAAM,CAAC,MAAM,oBAAoB,GAAU;IACzC,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,CACd,MAAC,OAAO,OAAK,IAAI,aACf,KAAC,OAAO,CAAC,IAAI,IAAC,IAAI,EAAC,KAAK,GAAG,EAC3B,KAAC,OAAO,CAAC,OAAO,kCAAkC,EAClD,KAAC,OAAO,CAAC,SAAS,8DAAgE,IAC1E,CACX;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,CACd,MAAC,OAAO,OAAK,IAAI,aACf,KAAC,OAAO,CAAC,OAAO,kCAAkC,EAClD,KAAC,OAAO,CAAC,SAAS,wDAA0D,IACpE,CACX;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAU;IACpC,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,CACd,MAAC,OAAO,OAAK,IAAI,aACf,KAAC,OAAO,CAAC,IAAI,IAAC,IAAI,EAAC,KAAK,GAAG,EAC3B,KAAC,OAAO,CAAC,OAAO,+BAA+B,IACvC,CACX;CACF,CAAC;AAEF,eAAe,IAAI,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"IcoText.test.d.ts","sourceRoot":"","sources":["../../../src/components/icoText/IcoText.test.tsx"],"names":[],"mappings":"AACA,OAAO,kCAAkC,CAAC"}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { render, screen, within } from '@testing-library/react';
|
|
3
|
+
import '@testing-library/jest-dom/vitest';
|
|
4
|
+
import { describe, expect, test } from 'vitest';
|
|
5
|
+
import { IcoText } from './IcoText';
|
|
6
|
+
describe('IcoText', () => {
|
|
7
|
+
test('renders icon children before content children and keeps content in the content wrapper', () => {
|
|
8
|
+
const { container } = render(_jsxs(IcoText, { children: [_jsx(IcoText.Heading, { children: "Article title" }), _jsx(IcoText.Icon, { name: "eye", screenReaderText: "Views" }), _jsx(IcoText.Paragraph, { children: "Helpful supporting copy" }), _jsx("span", { children: "Metadata" }), _jsx(IcoText.Icon, { name: "eye", screenReaderText: "More views" })] }));
|
|
9
|
+
const root = container.querySelector('.ds-ico-text');
|
|
10
|
+
const content = container.querySelector('.ds-ico-text__content');
|
|
11
|
+
if (!content) {
|
|
12
|
+
throw new Error('Expected IcoText content wrapper to exist');
|
|
13
|
+
}
|
|
14
|
+
const iconElements = Array.from(root?.querySelectorAll(':scope > .ds-ico-text__icon') ?? []);
|
|
15
|
+
expect(iconElements).toHaveLength(2);
|
|
16
|
+
expect(root?.lastElementChild).toBe(content);
|
|
17
|
+
expect(content.querySelectorAll('.ds-ico-text__icon')).toHaveLength(0);
|
|
18
|
+
iconElements.forEach((iconElement) => {
|
|
19
|
+
expect(iconElement.compareDocumentPosition(content) & Node.DOCUMENT_POSITION_FOLLOWING).not.toBe(0);
|
|
20
|
+
});
|
|
21
|
+
expect(within(content).getByRole('heading', { level: 4 })).toHaveTextContent('Article title');
|
|
22
|
+
expect(within(content).getByText('Helpful supporting copy')).toBeInTheDocument();
|
|
23
|
+
expect(within(content).getByText('Metadata')).toBeInTheDocument();
|
|
24
|
+
expect(screen.getAllByRole('img', { hidden: true })).toHaveLength(2);
|
|
25
|
+
});
|
|
26
|
+
});
|
|
27
|
+
//# sourceMappingURL=IcoText.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"IcoText.test.js","sourceRoot":"","sources":["../../../src/components/icoText/IcoText.test.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChE,OAAO,kCAAkC,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,QAAQ,CAAC,SAAS,EAAE,GAAG,EAAE;IACvB,IAAI,CAAC,wFAAwF,EAAE,GAAG,EAAE;QAClG,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAC1B,MAAC,OAAO,eACN,KAAC,OAAO,CAAC,OAAO,gCAAgC,EAChD,KAAC,OAAO,CAAC,IAAI,IAAC,IAAI,EAAC,KAAK,EAAC,gBAAgB,EAAC,OAAO,GAAG,EACpD,KAAC,OAAO,CAAC,SAAS,0CAA4C,EAC9D,sCAAqB,EACrB,KAAC,OAAO,CAAC,IAAI,IAAC,IAAI,EAAC,KAAK,EAAC,gBAAgB,EAAC,YAAY,GAAG,IACjD,CACX,CAAC;QAEF,MAAM,IAAI,GAAG,SAAS,CAAC,aAAa,CAAiB,cAAc,CAAC,CAAC;QACrE,MAAM,OAAO,GAAG,SAAS,CAAC,aAAa,CAAiB,uBAAuB,CAAC,CAAC;QAEjF,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,MAAM,IAAI,KAAK,CAAC,2CAA2C,CAAC,CAAC;QAC/D,CAAC;QAED,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,EAAE,gBAAgB,CAAC,6BAA6B,CAAC,IAAI,EAAE,CAAC,CAAC;QAE7F,MAAM,CAAC,YAAY,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;QACrC,MAAM,CAAC,IAAI,EAAE,gBAAgB,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAC7C,MAAM,CAAC,OAAO,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;QACvE,YAAY,CAAC,OAAO,CAAC,CAAC,WAAW,EAAE,EAAE;YACnC,MAAM,CACJ,WAAW,CAAC,uBAAuB,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC,2BAA2B,CAChF,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;QAChB,CAAC,CAAC,CAAC;QAEH,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,SAAS,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,iBAAiB,CAAC,eAAe,CAAC,CAAC;QAC9F,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,yBAAyB,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QACjF,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QAClE,MAAM,CAAC,MAAM,CAAC,YAAY,CAAC,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;IACvE,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { Card } from '../card/Card';
|
|
2
|
+
type KPICardBaseProps = {
|
|
3
|
+
children?: React.ReactNode;
|
|
4
|
+
className?: string;
|
|
5
|
+
label: React.ReactNode;
|
|
6
|
+
value: React.ReactNode;
|
|
7
|
+
isPercentage?: boolean;
|
|
8
|
+
disabled?: boolean;
|
|
9
|
+
};
|
|
10
|
+
export type KPICardProps = KPICardBaseProps & Card.InteractionProps;
|
|
11
|
+
export declare const KPICard: (props: KPICardProps) => React.JSX.Element;
|
|
12
|
+
export {};
|
|
13
|
+
//# sourceMappingURL=KPICard.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"KPICard.d.ts","sourceRoot":"","sources":["../../../src/components/kpiCard/KPICard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAA2B,MAAM,sBAAsB,CAAC;AAErE,KAAK,gBAAgB,GAAG;IACtB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC;AAEpE,eAAO,MAAM,OAAO,GAAI,OAAO,YAAY,KAAG,KAAK,CAAC,GAAG,CAAC,OA+BvD,CAAC"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Card, getCardInteractionProps } from '../card/Card';
|
|
3
|
+
export const KPICard = (props) => {
|
|
4
|
+
const { children, className, label, value, isPercentage = false, disabled = false, } = props;
|
|
5
|
+
const content = (_jsxs("div", { className: "ds-kpi-card", children: [_jsx("p", { className: "ds-kpi-card__label", children: label }), _jsxs("p", { className: "ds-kpi-card__value", children: [value, isPercentage && _jsx("span", { className: "ds-kpi-card__suffix", children: "%" })] }), children] }));
|
|
6
|
+
return (_jsx(Card, { ...getCardInteractionProps(props), className: className, disabled: disabled, spacing: "dense", children: content }));
|
|
7
|
+
};
|
|
8
|
+
//# sourceMappingURL=KPICard.js.map
|