This repository has been archived by the owner on Mar 2, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
SummaryList.tsx
114 lines (103 loc) · 2.91 KB
/
SummaryList.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
import classNames from "classnames";
import PropTypes from "prop-types";
import React from "react";
import { Attributes, DataAttributes } from "../helpers/Attributes";
import "./SummaryList.scss";
/**
* A unit of information to display in a row of a {@link SummaryList}.
*/
export interface SummaryListRow {
/**
* The description or label of the piece of information summarised by this
* row.
*/
key: string;
/**
* The piece of information itself.
*/
value: React.ReactNode;
/**
* A set of actions ({@link Link|Links}) that the user can take on this information.
*/
actions?: React.ReactNode[] | null;
}
/**
* The proptypes for {@link SummaryList}.
*
* This also supports all `aria-*` and `data-*` attributes.
*
* @noInheritDoc
*/
export interface SummaryListProps extends React.AriaAttributes, DataAttributes {
id?: string;
className?: string;
/**
* An array describing the items to display.
*/
rows: SummaryListRow[];
}
/**
* A component for summarising information.
*
* It is intended to be used to present pairs of linked information in a list.
*/
export const SummaryList: React.FunctionComponent<SummaryListProps> = (
props: SummaryListProps
): React.ReactElement => {
const { id, className, rows } = props;
const extraAttributes = Attributes.ariaAndData(props);
const anyRowHasActions = rows.some(
(row) => row.actions && row.actions.length > 0
);
return (
<dl
id={id}
className={classNames("govuk-summary-list lbh-summary-list", className)}
{...extraAttributes}
>
{rows.map((row, index) => (
<div
key={index}
className="govuk-summary-list__row lbh-summary-list__row"
>
<dt className="govuk-summary-list__key lbh-summary-list__key">
{row.key}
</dt>
<dd className="govuk-summary-list__value lbh-summary-list__value">
{row.value}
</dd>
{anyRowHasActions && (
<dd className="govuk-summary-list__actions">
{row.actions &&
(row.actions?.length == 1 ? (
row.actions[0]
) : (
<ul className="govuk-summary-list__actions-list">
{row.actions.map((action, index) => (
<li
key={index}
className="govuk-summary-list__actions-list-item"
>
{action}
</li>
))}
</ul>
))}
</dd>
)}
</div>
))}
</dl>
);
};
SummaryList.propTypes = {
id: PropTypes.string,
className: PropTypes.string,
rows: PropTypes.arrayOf(
PropTypes.exact({
key: PropTypes.string.isRequired,
value: PropTypes.string.isRequired,
actions: PropTypes.arrayOf(PropTypes.node.isRequired),
}).isRequired
).isRequired,
};