@navikt/ds-react 5.9.2 → 5.10.1
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/_docs.json +231 -0
- package/cjs/index.js +1 -0
- package/cjs/layout/page/Page.js +86 -0
- package/cjs/layout/page/index.js +8 -0
- package/cjs/layout/page/package.json +6 -0
- package/cjs/layout/page/parts/PageBlock.js +76 -0
- package/cjs/table/ExpandableRow.js +10 -5
- package/esm/index.d.ts +1 -0
- package/esm/index.js +1 -0
- package/esm/index.js.map +1 -1
- package/esm/layout/page/Page.d.ts +63 -0
- package/esm/layout/page/Page.js +58 -0
- package/esm/layout/page/Page.js.map +1 -0
- package/esm/layout/page/index.d.ts +2 -0
- package/esm/layout/page/index.js +2 -0
- package/esm/layout/page/index.js.map +1 -0
- package/esm/layout/page/parts/PageBlock.d.ts +52 -0
- package/esm/layout/page/parts/PageBlock.js +48 -0
- package/esm/layout/page/parts/PageBlock.js.map +1 -0
- package/esm/table/ExpandableRow.js +10 -5
- package/esm/table/ExpandableRow.js.map +1 -1
- package/package.json +3 -3
- package/src/index.ts +1 -0
- package/src/layout/page/Page.stories.tsx +271 -0
- package/src/layout/page/Page.tsx +115 -0
- package/src/layout/page/index.ts +2 -0
- package/src/layout/page/parts/PageBlock.tsx +72 -0
- package/src/table/ExpandableRow.tsx +17 -5
- package/src/table/stories/tests/table.stories.tsx +100 -0
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
import { expect, jest } from "@storybook/jest";
|
|
2
|
+
import { userEvent, within } from "@storybook/testing-library";
|
|
3
|
+
import React from "react";
|
|
4
|
+
import { Table } from "../..";
|
|
5
|
+
|
|
6
|
+
export default {
|
|
7
|
+
title: "ds-react/Table/Tests",
|
|
8
|
+
component: Table,
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
export const ClickableRowTest = {
|
|
12
|
+
render: ({ onOpenChange }) => {
|
|
13
|
+
return (
|
|
14
|
+
<>
|
|
15
|
+
<Table zebraStripes>
|
|
16
|
+
<Table.Header>
|
|
17
|
+
<Table.Row>
|
|
18
|
+
<Table.HeaderCell aria-hidden />
|
|
19
|
+
<Table.HeaderCell aria-hidden />
|
|
20
|
+
<Table.HeaderCell aria-hidden />
|
|
21
|
+
<Table.HeaderCell aria-hidden />
|
|
22
|
+
<Table.HeaderCell aria-hidden />
|
|
23
|
+
<Table.HeaderCell aria-hidden />
|
|
24
|
+
</Table.Row>
|
|
25
|
+
</Table.Header>
|
|
26
|
+
<Table.Body>
|
|
27
|
+
<Table.ExpandableRow
|
|
28
|
+
content={<div>placeholder row 2</div>}
|
|
29
|
+
togglePlacement="right"
|
|
30
|
+
data-testid="row1"
|
|
31
|
+
expandOnRowClick
|
|
32
|
+
onOpenChange={onOpenChange}
|
|
33
|
+
>
|
|
34
|
+
<Table.DataCell>
|
|
35
|
+
<div data-testid="cell1">Should be clickable</div>
|
|
36
|
+
</Table.DataCell>
|
|
37
|
+
<Table.DataCell data-testid="cell2">
|
|
38
|
+
Should also be clickable
|
|
39
|
+
</Table.DataCell>
|
|
40
|
+
|
|
41
|
+
<Table.DataCell>
|
|
42
|
+
<button data-testid="cell3">Should not be clickable</button>
|
|
43
|
+
</Table.DataCell>
|
|
44
|
+
<Table.DataCell>
|
|
45
|
+
<div>
|
|
46
|
+
<div>
|
|
47
|
+
<button data-testid="cell4">
|
|
48
|
+
Nested should not be clickable
|
|
49
|
+
</button>
|
|
50
|
+
</div>
|
|
51
|
+
</div>
|
|
52
|
+
</Table.DataCell>
|
|
53
|
+
<Table.DataCell>
|
|
54
|
+
<div>
|
|
55
|
+
<div>
|
|
56
|
+
<button data-testid="cell4">
|
|
57
|
+
<span>2x nested should not be clickable</span>
|
|
58
|
+
</button>
|
|
59
|
+
</div>
|
|
60
|
+
</div>
|
|
61
|
+
</Table.DataCell>
|
|
62
|
+
</Table.ExpandableRow>
|
|
63
|
+
</Table.Body>
|
|
64
|
+
</Table>
|
|
65
|
+
</>
|
|
66
|
+
);
|
|
67
|
+
},
|
|
68
|
+
args: {
|
|
69
|
+
onOpenChange: jest.fn(),
|
|
70
|
+
},
|
|
71
|
+
play: async ({ canvasElement, args }) => {
|
|
72
|
+
args.onOpenChange.mockClear();
|
|
73
|
+
const canvas = within(canvasElement);
|
|
74
|
+
|
|
75
|
+
const cell1 = canvas.getByText("Should be clickable");
|
|
76
|
+
const cell2 = canvas.getByText("Should also be clickable");
|
|
77
|
+
const cell3 = canvas.getByText("Should not be clickable");
|
|
78
|
+
const cell4 = canvas.getByText("Nested should not be clickable");
|
|
79
|
+
const cell5 = canvas.getByText("2x nested should not be clickable");
|
|
80
|
+
|
|
81
|
+
await userEvent.click(cell1);
|
|
82
|
+
expect(args.onOpenChange.mock.calls).toHaveLength(1);
|
|
83
|
+
await userEvent.click(cell1);
|
|
84
|
+
expect(args.onOpenChange.mock.calls).toHaveLength(2);
|
|
85
|
+
|
|
86
|
+
await userEvent.click(cell2);
|
|
87
|
+
expect(args.onOpenChange.mock.calls).toHaveLength(3);
|
|
88
|
+
await userEvent.click(cell2);
|
|
89
|
+
expect(args.onOpenChange.mock.calls).toHaveLength(4);
|
|
90
|
+
|
|
91
|
+
await userEvent.click(cell3);
|
|
92
|
+
expect(args.onOpenChange.mock.calls).toHaveLength(4);
|
|
93
|
+
|
|
94
|
+
await userEvent.click(cell4);
|
|
95
|
+
expect(args.onOpenChange.mock.calls).toHaveLength(4);
|
|
96
|
+
|
|
97
|
+
await userEvent.click(cell5);
|
|
98
|
+
expect(args.onOpenChange.mock.calls).toHaveLength(4);
|
|
99
|
+
},
|
|
100
|
+
};
|