@ukhomeoffice/cop-react-form-renderer 5.49.2 → 5.49.3-alpha
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/dist/components/CollectionSummary/RenderListView.js +40 -41
- package/dist/components/CollectionSummary/RenderListView.scss +261 -4
- package/dist/components/CollectionSummary/RenderListView.test.js +50 -91
- package/dist/components/CollectionSummary/SummaryCard.js +2 -2
- package/package.json +1 -1
|
@@ -3,12 +3,12 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.default = exports.DEFAULT_TITLE = exports.
|
|
6
|
+
exports.default = exports.DEFAULT_TITLE = exports.DEFAULT_LIST_CLASS = exports.DEFAULT_DELETE_BUTTON_LABEL = exports.DEFAULT_DELETE_BUTTON_CLASS = exports.DEFAULT_CLASS = exports.DEFAULT_CHANGE_BUTTON_LABEL = exports.DEFAULT_CHANGE_BUTTON_CLASS = void 0;
|
|
7
7
|
var _copReactComponents = require("@ukhomeoffice/cop-react-components");
|
|
8
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
9
|
var _react = _interopRequireDefault(require("react"));
|
|
10
|
-
var _SummaryListRow = _interopRequireDefault(require("../SummaryList/SummaryListRow"));
|
|
11
10
|
var _utils = _interopRequireDefault(require("../../utils"));
|
|
11
|
+
var _SummaryListRow = _interopRequireDefault(require("../SummaryList/SummaryListRow"));
|
|
12
12
|
require("./RenderListView.scss");
|
|
13
13
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
14
14
|
// Global imports.
|
|
@@ -17,71 +17,76 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
17
17
|
|
|
18
18
|
// Styles.
|
|
19
19
|
|
|
20
|
-
var DEFAULT_CLASS = exports.DEFAULT_CLASS = '
|
|
20
|
+
var DEFAULT_CLASS = exports.DEFAULT_CLASS = 'govuk-summary-card';
|
|
21
|
+
var DEFAULT_LIST_CLASS = exports.DEFAULT_LIST_CLASS = 'govuk-summary-list';
|
|
21
22
|
var DEFAULT_TITLE = exports.DEFAULT_TITLE = 'Item';
|
|
22
23
|
var DEFAULT_CHANGE_BUTTON_LABEL = exports.DEFAULT_CHANGE_BUTTON_LABEL = 'Change';
|
|
23
24
|
var DEFAULT_DELETE_BUTTON_LABEL = exports.DEFAULT_DELETE_BUTTON_LABEL = 'Delete';
|
|
24
|
-
var DEFAULT_EDIT_LABEL = exports.DEFAULT_EDIT_LABEL = 'Quick Edit';
|
|
25
|
-
var DEFAULT_DUPLICATE_BUTTON_LABEL = exports.DEFAULT_DUPLICATE_BUTTON_LABEL = 'Duplicate';
|
|
26
|
-
var DEFAULT_DETAILS_TITLE = exports.DEFAULT_DETAILS_TITLE = 'Full details';
|
|
27
25
|
var DEFAULT_CHANGE_BUTTON_CLASS = exports.DEFAULT_CHANGE_BUTTON_CLASS = 'secondary';
|
|
26
|
+
var DEFAULT_DELETE_BUTTON_CLASS = exports.DEFAULT_DELETE_BUTTON_CLASS = 'warning';
|
|
28
27
|
var RenderListView = function RenderListView(_ref) {
|
|
29
|
-
var
|
|
28
|
+
var _masterPage$childPage;
|
|
30
29
|
var id = _ref.id,
|
|
31
30
|
entryData = _ref.entryData,
|
|
32
31
|
config = _ref.config,
|
|
33
32
|
onChange = _ref.onChange,
|
|
34
33
|
onDelete = _ref.onDelete,
|
|
35
|
-
masterPage = _ref.masterPage
|
|
34
|
+
masterPage = _ref.masterPage,
|
|
35
|
+
classModifiers = _ref.classModifiers;
|
|
36
|
+
var classes = _copReactComponents.Utils.classBuilder(DEFAULT_CLASS, classModifiers);
|
|
37
|
+
var listClass = _copReactComponents.Utils.classBuilder(DEFAULT_LIST_CLASS);
|
|
36
38
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
37
|
-
className:
|
|
39
|
+
className: classes(),
|
|
38
40
|
id: id
|
|
39
41
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
40
|
-
className:
|
|
42
|
+
className: classes('title-wrapper', [], 'dark')
|
|
41
43
|
}, /*#__PURE__*/_react.default.createElement("h2", {
|
|
42
|
-
className:
|
|
44
|
+
className: classes('title')
|
|
43
45
|
}, _copReactComponents.Utils.interpolateString(config.title || DEFAULT_TITLE, entryData)), /*#__PURE__*/_react.default.createElement("ul", {
|
|
44
|
-
className:
|
|
46
|
+
className: classes('actions')
|
|
45
47
|
}, /*#__PURE__*/_react.default.createElement("li", {
|
|
46
|
-
className:
|
|
48
|
+
className: classes('action')
|
|
47
49
|
}, config.changeAction && typeof onChange === 'function' && /*#__PURE__*/_react.default.createElement(_copReactComponents.Button, {
|
|
48
50
|
id: "".concat(id, ".changeButton"),
|
|
49
51
|
onClick: function onClick() {
|
|
50
|
-
|
|
51
|
-
return onChange((_config$changeAction = config.changeAction) === null || _config$changeAction === void 0 ? void 0 : _config$changeAction.page, entryData.id);
|
|
52
|
+
return onChange(config.changeAction.page, entryData.id);
|
|
52
53
|
},
|
|
53
|
-
classModifiers:
|
|
54
|
-
},
|
|
55
|
-
className:
|
|
54
|
+
classModifiers: config.changeAction.classModifiers || DEFAULT_CHANGE_BUTTON_CLASS
|
|
55
|
+
}, config.changeAction.label || DEFAULT_CHANGE_BUTTON_LABEL)), /*#__PURE__*/_react.default.createElement("li", {
|
|
56
|
+
className: classes('action')
|
|
56
57
|
}, config.deleteAction && typeof onDelete === 'function' && /*#__PURE__*/_react.default.createElement(_copReactComponents.Button, {
|
|
57
58
|
id: "".concat(id, ".deleteButton"),
|
|
58
59
|
onClick: function onClick() {
|
|
59
60
|
return onDelete(entryData);
|
|
60
61
|
},
|
|
61
|
-
classModifiers:
|
|
62
|
-
},
|
|
63
|
-
className:
|
|
62
|
+
classModifiers: config.deleteAction.classModifiers || DEFAULT_DELETE_BUTTON_CLASS
|
|
63
|
+
}, config.deleteAction.label || DEFAULT_DELETE_BUTTON_LABEL)))), /*#__PURE__*/_react.default.createElement("div", {
|
|
64
|
+
className: classes('content')
|
|
64
65
|
}, /*#__PURE__*/_react.default.createElement("dl", {
|
|
65
|
-
className:
|
|
66
|
+
className: listClass()
|
|
66
67
|
}, masterPage === null || masterPage === void 0 || (_masterPage$childPage = masterPage.childPages) === null || _masterPage$childPage === void 0 ? void 0 : _masterPage$childPage.flatMap(function (childPage) {
|
|
67
68
|
var _childPage$summaryLay;
|
|
68
|
-
return (_childPage$summaryLay = childPage.summaryLayout) === null || _childPage$summaryLay === void 0 ? void 0 : _childPage$summaryLay.
|
|
69
|
+
return (_childPage$summaryLay = childPage.summaryLayout) === null || _childPage$summaryLay === void 0 || (_childPage$summaryLay = _childPage$summaryLay.sections) === null || _childPage$summaryLay === void 0 ? void 0 : _childPage$summaryLay.flatMap(function (section) {
|
|
69
70
|
var _section$fields;
|
|
70
71
|
return (_section$fields = section.fields) === null || _section$fields === void 0 ? void 0 : _section$fields.map(function (fieldId) {
|
|
71
|
-
var
|
|
72
|
+
var _FrUtils$Component$el;
|
|
73
|
+
var component = (_FrUtils$Component$el = _utils.default.Component.elevateNested(childPage.components, entryData)) === null || _FrUtils$Component$el === void 0 ? void 0 : _FrUtils$Component$el.find(function (comp) {
|
|
72
74
|
return comp.fieldId === fieldId;
|
|
73
75
|
});
|
|
74
|
-
|
|
76
|
+
if (!component) {
|
|
77
|
+
return null;
|
|
78
|
+
}
|
|
79
|
+
return /*#__PURE__*/_react.default.createElement(_SummaryListRow.default, {
|
|
75
80
|
key: fieldId,
|
|
76
81
|
row: {
|
|
77
82
|
key: component.label,
|
|
78
|
-
value: _copReactComponents.Utils.interpolateString(entryData[component
|
|
83
|
+
value: _copReactComponents.Utils.interpolateString(entryData[component.fieldId], entryData),
|
|
79
84
|
required: component.required
|
|
80
85
|
},
|
|
81
86
|
classes: function classes(element) {
|
|
82
|
-
return
|
|
87
|
+
return listClass(element);
|
|
83
88
|
}
|
|
84
|
-
})
|
|
89
|
+
});
|
|
85
90
|
});
|
|
86
91
|
});
|
|
87
92
|
}))));
|
|
@@ -93,26 +98,16 @@ RenderListView.propTypes = {
|
|
|
93
98
|
index: _propTypes.default.number.isRequired
|
|
94
99
|
}).isRequired,
|
|
95
100
|
config: _propTypes.default.shape({
|
|
96
|
-
banners: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.shape({})])),
|
|
97
101
|
title: _propTypes.default.string,
|
|
98
|
-
details: _propTypes.default.string,
|
|
99
102
|
changeAction: _propTypes.default.shape({
|
|
100
103
|
label: _propTypes.default.string,
|
|
101
104
|
page: _propTypes.default.string.isRequired,
|
|
102
105
|
classModifiers: _propTypes.default.string
|
|
103
106
|
}),
|
|
104
107
|
deleteAction: _propTypes.default.shape({
|
|
105
|
-
label: _propTypes.default.string
|
|
106
|
-
|
|
107
|
-
duplicateAction: _propTypes.default.shape({
|
|
108
|
-
label: _propTypes.default.string
|
|
109
|
-
}),
|
|
110
|
-
quickEdit: _propTypes.default.shape({
|
|
111
|
-
components: _propTypes.default.arrayOf(_propTypes.default.shape({
|
|
112
|
-
use: _propTypes.default.string
|
|
113
|
-
}))
|
|
108
|
+
label: _propTypes.default.string,
|
|
109
|
+
classModifiers: _propTypes.default.string
|
|
114
110
|
}),
|
|
115
|
-
detailsTitle: _propTypes.default.string,
|
|
116
111
|
listView: _propTypes.default.bool
|
|
117
112
|
}).isRequired,
|
|
118
113
|
onChange: _propTypes.default.func.isRequired,
|
|
@@ -121,6 +116,10 @@ RenderListView.propTypes = {
|
|
|
121
116
|
childPages: _propTypes.default.arrayOf(_propTypes.default.shape({
|
|
122
117
|
components: _propTypes.default.arrayOf(_propTypes.default.shape())
|
|
123
118
|
})).isRequired
|
|
124
|
-
}).isRequired
|
|
119
|
+
}).isRequired,
|
|
120
|
+
classModifiers: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)])
|
|
121
|
+
};
|
|
122
|
+
RenderListView.defaultProps = {
|
|
123
|
+
classModifiers: null
|
|
125
124
|
};
|
|
126
125
|
var _default = exports.default = RenderListView;
|
|
@@ -1,8 +1,265 @@
|
|
|
1
1
|
$govuk-font-family: 'Roboto', arial, sans-serif;
|
|
2
2
|
|
|
3
3
|
@import "node_modules/govuk-frontend/govuk/_base";
|
|
4
|
-
@import "node_modules/govuk-frontend/govuk/components/summary-list/_index";
|
|
5
4
|
|
|
6
|
-
.govuk-summary-
|
|
7
|
-
|
|
8
|
-
|
|
5
|
+
.govuk-summary-list {
|
|
6
|
+
@include govuk-font($size: 19);
|
|
7
|
+
@include govuk-text-colour;
|
|
8
|
+
@include govuk-media-query($from: tablet) {
|
|
9
|
+
display: table;
|
|
10
|
+
width: 100%;
|
|
11
|
+
table-layout: fixed; // Required to allow us to wrap words that overflow.
|
|
12
|
+
border-collapse: collapse;
|
|
13
|
+
}
|
|
14
|
+
margin: 0; // Reset default user agent styles
|
|
15
|
+
@include govuk-responsive-margin(6, "bottom");
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.govuk-summary-list__row {
|
|
19
|
+
border-bottom: 1px solid $govuk-border-colour;
|
|
20
|
+
|
|
21
|
+
@include govuk-media-query($until: tablet) {
|
|
22
|
+
margin-bottom: govuk-spacing(3);
|
|
23
|
+
}
|
|
24
|
+
@include govuk-media-query($from: tablet) {
|
|
25
|
+
display: table-row;
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
// Remove right padding from the last column in the row
|
|
30
|
+
.govuk-summary-list__row:not(.govuk-summary-list__row--no-actions) > :last-child {
|
|
31
|
+
padding-right: 0;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
// Provide an empty 'cell' for rows that don't have actions – otherwise the
|
|
35
|
+
// bottom border is not drawn for that part of the row in some browsers.
|
|
36
|
+
.govuk-summary-list__row--no-actions {
|
|
37
|
+
@include govuk-media-query($from: tablet) {
|
|
38
|
+
&::after {
|
|
39
|
+
content: "";
|
|
40
|
+
display: table-cell;
|
|
41
|
+
width: 20%;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.govuk-summary-list__key,
|
|
47
|
+
.govuk-summary-list__value,
|
|
48
|
+
.govuk-summary-list__actions {
|
|
49
|
+
margin: 0; // Reset default user agent styles
|
|
50
|
+
|
|
51
|
+
@include govuk-media-query($from: tablet) {
|
|
52
|
+
display: table-cell;
|
|
53
|
+
padding-top: govuk-spacing(2);
|
|
54
|
+
padding-right: govuk-spacing(4);
|
|
55
|
+
padding-bottom: govuk-spacing(2);
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.govuk-summary-list__actions {
|
|
60
|
+
margin-bottom: govuk-spacing(3);
|
|
61
|
+
@include govuk-media-query($from: tablet) {
|
|
62
|
+
width: 20%;
|
|
63
|
+
text-align: right;
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.govuk-summary-list__key,
|
|
68
|
+
.govuk-summary-list__value {
|
|
69
|
+
// Automatic wrapping for unbreakable text (e.g. URLs)
|
|
70
|
+
word-wrap: break-word; // Fallback for older browsers only
|
|
71
|
+
overflow-wrap: break-word;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.govuk-summary-list__key {
|
|
75
|
+
margin-bottom: govuk-spacing(1);
|
|
76
|
+
@include govuk-typography-weight-bold;
|
|
77
|
+
@include govuk-media-query($from: tablet) {
|
|
78
|
+
width: 30%;
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.govuk-summary-list__value {
|
|
83
|
+
@include govuk-media-query($until: tablet) {
|
|
84
|
+
margin-bottom: govuk-spacing(3);
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.govuk-summary-list__value > p {
|
|
89
|
+
margin-bottom: govuk-spacing(2);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.govuk-summary-list__value > :last-child {
|
|
93
|
+
margin-bottom: 0;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.govuk-summary-list__actions-list {
|
|
97
|
+
width: 100%;
|
|
98
|
+
margin: 0; // Reset default user agent styles
|
|
99
|
+
padding: 0; // Reset default user agent styles
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.govuk-summary-list__actions-list-item {
|
|
103
|
+
display: inline-block;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
@include govuk-media-query($until: tablet) {
|
|
107
|
+
.govuk-summary-list__actions-list-item {
|
|
108
|
+
margin-right: govuk-spacing(2);
|
|
109
|
+
padding-right: govuk-spacing(2);
|
|
110
|
+
border-right: 1px solid $govuk-border-colour;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.govuk-summary-list__actions-list-item:last-child {
|
|
114
|
+
margin-right: 0;
|
|
115
|
+
padding-right: 0;
|
|
116
|
+
border: 0;
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
@include govuk-media-query($from: tablet) {
|
|
121
|
+
.govuk-summary-list__actions-list-item {
|
|
122
|
+
margin-left: govuk-spacing(2);
|
|
123
|
+
padding-left: govuk-spacing(2);
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.govuk-summary-list__actions-list-item:not(:first-child) {
|
|
127
|
+
border-left: 1px solid $govuk-border-colour;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.govuk-summary-list__actions-list-item:first-child {
|
|
131
|
+
margin-left: 0;
|
|
132
|
+
padding-left: 0;
|
|
133
|
+
border: 0;
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.govuk-summary-list__actions-list-item .govuk-link:focus {
|
|
138
|
+
isolation: isolate;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
// No border on entire summary list
|
|
142
|
+
.govuk-summary-list--no-border {
|
|
143
|
+
.govuk-summary-list__row {
|
|
144
|
+
border: 0;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
// Increase padding by 1px to compensate for 'missing' border
|
|
148
|
+
@include govuk-media-query($from: tablet) {
|
|
149
|
+
.govuk-summary-list__key,
|
|
150
|
+
.govuk-summary-list__value,
|
|
151
|
+
.govuk-summary-list__actions {
|
|
152
|
+
padding-bottom: govuk-spacing(2) + 1px;
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
// No border on specific rows
|
|
158
|
+
.govuk-summary-list__row--no-border {
|
|
159
|
+
border: 0;
|
|
160
|
+
|
|
161
|
+
// Increase padding by 1px to compensate for 'missing' border
|
|
162
|
+
@include govuk-media-query($from: tablet) {
|
|
163
|
+
.govuk-summary-list__key,
|
|
164
|
+
.govuk-summary-list__value,
|
|
165
|
+
.govuk-summary-list__actions {
|
|
166
|
+
padding-bottom: govuk-spacing(2) + 1px;
|
|
167
|
+
}
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
// Additional block for the summary card
|
|
172
|
+
.govuk-summary-card {
|
|
173
|
+
@include govuk-responsive-margin(6, "bottom");
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
.govuk-summary-card__title-wrapper {
|
|
177
|
+
padding: govuk-spacing(3);
|
|
178
|
+
|
|
179
|
+
// Ensures the card header appears separate to the summary list in forced colours mode
|
|
180
|
+
border-bottom: 1px solid transparent;
|
|
181
|
+
background-color: govuk-colour("mid-grey");
|
|
182
|
+
|
|
183
|
+
@include govuk-media-query($from: "tablet") {
|
|
184
|
+
display: flex;
|
|
185
|
+
justify-content: space-between;
|
|
186
|
+
flex-wrap: nowrap;
|
|
187
|
+
padding: govuk-spacing(3) govuk-spacing(4);
|
|
188
|
+
}
|
|
189
|
+
&.dark {
|
|
190
|
+
background-color: #D1D1D1;
|
|
191
|
+
}
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
.govuk-summary-card__title {
|
|
195
|
+
@include govuk-font($size: 19, $weight: bold);
|
|
196
|
+
@include govuk-text-colour;
|
|
197
|
+
margin: govuk-spacing(1) govuk-spacing(4) govuk-spacing(2) 0;
|
|
198
|
+
|
|
199
|
+
@include govuk-media-query($from: "tablet") {
|
|
200
|
+
margin-bottom: govuk-spacing(1);
|
|
201
|
+
}
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
.govuk-summary-card__actions {
|
|
205
|
+
@include govuk-typography-responsive($size: 19);
|
|
206
|
+
@include govuk-typography-weight-bold;
|
|
207
|
+
display: flex;
|
|
208
|
+
flex-wrap: wrap;
|
|
209
|
+
row-gap: 10px;
|
|
210
|
+
margin: govuk-spacing(1) 0;
|
|
211
|
+
padding: 0;
|
|
212
|
+
list-style: none;
|
|
213
|
+
|
|
214
|
+
@include govuk-media-query($from: "tablet") {
|
|
215
|
+
justify-content: right;
|
|
216
|
+
text-align: right;
|
|
217
|
+
}
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
.govuk-summary-card__action {
|
|
221
|
+
display: inline;
|
|
222
|
+
margin: 0 govuk-spacing(2) 0 0;
|
|
223
|
+
padding-right: govuk-spacing(2);
|
|
224
|
+
border-right: 1px solid $govuk-border-colour;
|
|
225
|
+
|
|
226
|
+
@include govuk-media-query($from: "tablet") {
|
|
227
|
+
margin-right: 0;
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
|
|
231
|
+
margin-bottom: govuk-spacing(1);
|
|
232
|
+
}
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
.govuk-summary-card__action:last-child {
|
|
236
|
+
margin: 0;
|
|
237
|
+
padding-right: 0;
|
|
238
|
+
border-right: none;
|
|
239
|
+
|
|
240
|
+
@include govuk-media-query($from: "tablet") {
|
|
241
|
+
padding-left: govuk-spacing(2);
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
// See above comment for why this is here
|
|
245
|
+
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
|
|
246
|
+
margin-bottom: 0;
|
|
247
|
+
}
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
.govuk-summary-card__content {
|
|
251
|
+
padding: govuk-spacing(3) govuk-spacing(3) 0;
|
|
252
|
+
|
|
253
|
+
@include govuk-media-query($from: "tablet") {
|
|
254
|
+
padding: govuk-spacing(3) govuk-spacing(4);
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
.govuk-summary-list {
|
|
258
|
+
margin-bottom: 0;
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
.govuk-summary-list__row:last-of-type {
|
|
262
|
+
margin-bottom: 0;
|
|
263
|
+
border-bottom: none;
|
|
264
|
+
}
|
|
265
|
+
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _react =
|
|
4
|
-
var _react2 = require("
|
|
3
|
+
var _react = require("@testing-library/react");
|
|
4
|
+
var _react2 = _interopRequireDefault(require("react"));
|
|
5
5
|
var _setupTests = require("../../setupTests");
|
|
6
6
|
var _RenderListView = _interopRequireDefault(require("./RenderListView"));
|
|
7
7
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
@@ -35,24 +35,33 @@ describe('components.CollectionSummary.RenderListView', function () {
|
|
|
35
35
|
};
|
|
36
36
|
var CONFIG = {
|
|
37
37
|
title: 'Title text',
|
|
38
|
-
listView: true
|
|
39
|
-
|
|
38
|
+
listView: true,
|
|
39
|
+
changeAction: {
|
|
40
|
+
label: 'Change label',
|
|
41
|
+
page: 'testPage'
|
|
42
|
+
},
|
|
43
|
+
deleteAction: {
|
|
44
|
+
label: 'Delete label'
|
|
45
|
+
}
|
|
40
46
|
};
|
|
41
|
-
|
|
42
47
|
var ID = 'testListView';
|
|
43
48
|
var onChangeArgs = [];
|
|
49
|
+
var onChangeCalls = 0;
|
|
44
50
|
var ON_CHANGE = function ON_CHANGE(page, id) {
|
|
45
51
|
onChangeArgs.push({
|
|
46
52
|
page: page,
|
|
47
53
|
id: id
|
|
48
54
|
});
|
|
55
|
+
onChangeCalls += 1;
|
|
49
56
|
};
|
|
50
57
|
beforeEach(function () {
|
|
51
58
|
onChangeArgs = [];
|
|
52
59
|
});
|
|
53
60
|
var onDeleteArgs = [];
|
|
61
|
+
var onDeleteCalls = 0;
|
|
54
62
|
var ON_DELETE = function ON_DELETE(entry) {
|
|
55
63
|
onDeleteArgs.push(entry);
|
|
64
|
+
onDeleteCalls += 1;
|
|
56
65
|
};
|
|
57
66
|
beforeEach(function () {
|
|
58
67
|
onDeleteArgs = [];
|
|
@@ -66,7 +75,7 @@ describe('components.CollectionSummary.RenderListView', function () {
|
|
|
66
75
|
return listViewDiv;
|
|
67
76
|
};
|
|
68
77
|
it('should correctly render RenderListView component', function () {
|
|
69
|
-
var _renderWithValidation = (0, _setupTests.renderWithValidation)( /*#__PURE__*/
|
|
78
|
+
var _renderWithValidation = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_RenderListView.default, {
|
|
70
79
|
id: ID,
|
|
71
80
|
entryData: ENTRY,
|
|
72
81
|
config: CONFIG,
|
|
@@ -85,7 +94,7 @@ describe('components.CollectionSummary.RenderListView', function () {
|
|
|
85
94
|
|
|
86
95
|
// Logic to check the rendered rows
|
|
87
96
|
var rows = container.querySelectorAll('.govuk-summary-list__row');
|
|
88
|
-
expect(rows.length).toEqual(2);
|
|
97
|
+
expect(rows.length).toEqual(2);
|
|
89
98
|
|
|
90
99
|
// Check the first row
|
|
91
100
|
var firstRowKey = rows[0].querySelector('.govuk-summary-list__key');
|
|
@@ -99,92 +108,42 @@ describe('components.CollectionSummary.RenderListView', function () {
|
|
|
99
108
|
expect(secondRowKey.textContent).toEqual('Item 2 (optional)');
|
|
100
109
|
expect(secondRowValue.textContent).toEqual(ENTRY.item2);
|
|
101
110
|
});
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
onChangeArgs.push({
|
|
109
|
-
page: page,
|
|
110
|
-
id: id
|
|
111
|
+
describe('Action buttons in RenderListView', function () {
|
|
112
|
+
beforeEach(function () {
|
|
113
|
+
onChangeArgs = [];
|
|
114
|
+
onChangeCalls = 0;
|
|
115
|
+
onDeleteArgs = [];
|
|
116
|
+
onDeleteCalls = 0;
|
|
111
117
|
});
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
onDeleteCalls = 0;
|
|
125
|
-
});
|
|
126
|
-
var ENTRY = {
|
|
127
|
-
id: '001',
|
|
128
|
-
item1: 'Value 1',
|
|
129
|
-
item2: 'Value 2',
|
|
130
|
-
index: 0
|
|
131
|
-
};
|
|
132
|
-
var MASTER_PAGE = {
|
|
133
|
-
childPages: [{
|
|
134
|
-
summaryLayout: {
|
|
135
|
-
sections: [{
|
|
136
|
-
fields: ['item1', 'item2']
|
|
137
|
-
}]
|
|
138
|
-
},
|
|
139
|
-
components: [{
|
|
140
|
-
fieldId: 'item1',
|
|
141
|
-
label: 'Item 1',
|
|
142
|
-
required: true
|
|
143
|
-
}, {
|
|
144
|
-
fieldId: 'item2',
|
|
145
|
-
label: 'Item 2'
|
|
146
|
-
}]
|
|
147
|
-
}]
|
|
148
|
-
};
|
|
149
|
-
var CONFIG = {
|
|
150
|
-
title: 'Title text',
|
|
151
|
-
listView: true,
|
|
152
|
-
changeAction: {
|
|
153
|
-
label: 'Change label',
|
|
154
|
-
page: 'testPage'
|
|
155
|
-
},
|
|
156
|
-
deleteAction: {
|
|
157
|
-
label: 'Delete label'
|
|
158
|
-
}
|
|
159
|
-
};
|
|
160
|
-
it('should render and handle action buttons correctly', function () {
|
|
161
|
-
var _renderWithValidation2 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_RenderListView.default, {
|
|
162
|
-
id: ID,
|
|
163
|
-
entryData: ENTRY,
|
|
164
|
-
config: CONFIG,
|
|
165
|
-
onChange: ON_CHANGE,
|
|
166
|
-
onDelete: ON_DELETE,
|
|
167
|
-
masterPage: MASTER_PAGE
|
|
168
|
-
})),
|
|
169
|
-
container = _renderWithValidation2.container;
|
|
170
|
-
var listViewDiv = container.querySelector('.govuk-summary-card');
|
|
171
|
-
expect(listViewDiv).not.toBeNull();
|
|
118
|
+
it('should render and handle action buttons correctly', function () {
|
|
119
|
+
var _renderWithValidation2 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_RenderListView.default, {
|
|
120
|
+
id: ID,
|
|
121
|
+
entryData: ENTRY,
|
|
122
|
+
config: CONFIG,
|
|
123
|
+
onChange: ON_CHANGE,
|
|
124
|
+
onDelete: ON_DELETE,
|
|
125
|
+
masterPage: MASTER_PAGE
|
|
126
|
+
})),
|
|
127
|
+
container = _renderWithValidation2.container;
|
|
128
|
+
var listViewDiv = container.querySelector('.govuk-summary-card');
|
|
129
|
+
expect(listViewDiv).not.toBeNull();
|
|
172
130
|
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
131
|
+
// Check for change button
|
|
132
|
+
var changeButton = listViewDiv.querySelector('[id$=".changeButton"]');
|
|
133
|
+
expect(changeButton.textContent).toEqual(CONFIG.changeAction.label);
|
|
134
|
+
_react.fireEvent.click(changeButton, {});
|
|
135
|
+
expect(onChangeCalls).toEqual(1);
|
|
136
|
+
expect(onChangeArgs[0]).toMatchObject({
|
|
137
|
+
page: CONFIG.changeAction.page,
|
|
138
|
+
id: ENTRY.id
|
|
139
|
+
});
|
|
182
140
|
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
141
|
+
// Check for delete button
|
|
142
|
+
var deleteButton = listViewDiv.querySelector('[id$=".deleteButton"]');
|
|
143
|
+
expect(deleteButton.textContent).toEqual(CONFIG.deleteAction.label);
|
|
144
|
+
_react.fireEvent.click(deleteButton, {});
|
|
145
|
+
expect(onDeleteCalls).toEqual(1);
|
|
146
|
+
expect(onDeleteArgs[0]).toEqual(ENTRY);
|
|
147
|
+
});
|
|
189
148
|
});
|
|
190
149
|
});
|
|
@@ -8,11 +8,11 @@ exports.default = exports.DEFAULT_TITLE = exports.DEFAULT_EDIT_LABEL = exports.D
|
|
|
8
8
|
var _copReactComponents = require("@ukhomeoffice/cop-react-components");
|
|
9
9
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
10
10
|
var _react = _interopRequireWildcard(require("react"));
|
|
11
|
-
var _getQuickEditPage = _interopRequireDefault(require("../../utils/CollectionPage/getQuickEditPage"));
|
|
12
11
|
var _utils = _interopRequireDefault(require("../../utils"));
|
|
12
|
+
var _getQuickEditPage = _interopRequireDefault(require("../../utils/CollectionPage/getQuickEditPage"));
|
|
13
13
|
var _hooks = require("../../hooks");
|
|
14
|
-
var _FormPage = _interopRequireDefault(require("../FormPage"));
|
|
15
14
|
var _FormComponent = _interopRequireDefault(require("../FormComponent"));
|
|
15
|
+
var _FormPage = _interopRequireDefault(require("../FormPage"));
|
|
16
16
|
var _BannerStrip = _interopRequireDefault(require("./BannerStrip"));
|
|
17
17
|
var _RenderListView = _interopRequireDefault(require("./RenderListView"));
|
|
18
18
|
require("./SummaryCard.scss");
|