@ukhomeoffice/cop-react-form-renderer 5.67.0 → 5.68.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.
Files changed (7) hide show
  1. package/dist/components/CollectionSummary/RenderListView.js +8 -14
  2. package/dist/components/CollectionSummary/RenderListView.scss +5 -0
  3. package/dist/components/CollectionSummary/RenderListView.test.js +3 -1
  4. package/dist/components/CollectionSummary/SummaryCardDetails.js +67 -27
  5. package/dist/components/CollectionSummary/SummaryCardDetails.scss +43 -6
  6. package/dist/components/CollectionSummary/SummaryCardDetails.test.js +40 -20
  7. package/package.json +1 -1
package/dist/components/CollectionSummary/RenderListView.js CHANGED
@@ -50,21 +50,12 @@ var RenderListView = function RenderListView(_ref) {
50
50
  className: classes('actions')
51
51
  }, /*#__PURE__*/_react.default.createElement("li", {
52
52
  className: classes('action')
53
- }, config.changeAction && typeof onFullEdit === 'function' && /*#__PURE__*/_react.default.createElement("div", {
54
- className: "govuk-link",
53
+ }, config.changeAction && typeof onFullEdit === 'function' && /*#__PURE__*/_react.default.createElement("button", {
54
+ type: "button",
55
+ className: "govuk-link govuk-link-button",
55
56
  onClick: function onClick() {
56
57
  return onFullEdit(config.changeAction.page, entryData.id);
57
58
  },
58
- onKeyDown: function onKeyDown(e) {
59
- if (e.key === 'Enter' || e.key === ' ') {
60
- onFullEdit(config.changeAction.page, entryData.id);
61
- }
62
- },
63
- role: "button",
64
- tabIndex: 0,
65
- style: {
66
- cursor: 'pointer'
67
- },
68
59
  "aria-label": _copReactComponents.Utils.interpolateString("".concat(((_config$changeAction = config.changeAction) === null || _config$changeAction === void 0 ? void 0 : _config$changeAction.label) || DEFAULT_CHANGE_BUTTON_LABEL, " ").concat(config.title || DEFAULT_TITLE), _objectSpread(_objectSpread({}, entryData), {}, {
69
60
  index: entryData.index + 1
70
61
  }))
@@ -89,8 +80,11 @@ var RenderListView = function RenderListView(_ref) {
89
80
  return _utils.default.Component.elevateNested([component], entryData);
90
81
  }).flat().filter(Boolean);
91
82
  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) {
92
- if (section.fields) {
93
- return section.fields.flatMap(function (fieldId) {
83
+ var summaryFields = section.columns.flatMap(function (column) {
84
+ return column.fields || [];
85
+ });
86
+ if (summaryFields.length) {
87
+ return summaryFields.flatMap(function (fieldId) {
94
88
  var component = elevatedComponents.find(function (comp) {
95
89
  return comp.fieldId === fieldId;
96
90
  });
package/dist/components/CollectionSummary/RenderListView.scss CHANGED
@@ -275,3 +275,8 @@ $govuk-font-family: 'Roboto', arial, sans-serif;
275
275
  border-bottom: none;
276
276
  }
277
277
  }
278
+
279
+ .govuk-link-button {
280
+ background: none;
281
+ border: none;
282
+ }
package/dist/components/CollectionSummary/RenderListView.test.js CHANGED
@@ -25,7 +25,9 @@ describe('components.CollectionSummary.RenderListView', function () {
25
25
  childPages: [{
26
26
  summaryLayout: {
27
27
  sections: [{
28
- fields: ['item1', 'item2', 'item3']
28
+ columns: [{
29
+ fields: ['item1', 'item2', 'item3']
30
+ }]
29
31
  }]
30
32
  },
31
33
  components: [{
package/dist/components/CollectionSummary/SummaryCardDetails.js CHANGED
@@ -42,13 +42,75 @@ var SummaryCardDetails = function SummaryCardDetails(_ref) {
42
42
  return !!e;
43
43
  });
44
44
  }, [masterPage, childCollections]);
45
+ var getSectionContent = function getSectionContent(section, components, childPage) {
46
+ var columnIndex = 0;
47
+ return section.columns.flatMap(function (column, index) {
48
+ var _column$fields;
49
+ var rowIndex = 0;
50
+ var columnContent = (_column$fields = column.fields) === null || _column$fields === void 0 ? void 0 : _column$fields.flatMap(function (fieldId) {
51
+ var component = components.find(function (comp) {
52
+ return comp.fieldId === fieldId;
53
+ });
54
+ if (!component) {
55
+ return null;
56
+ }
57
+ if (component.type === _models.ComponentTypes.CONTAINER) {
58
+ var containerRows = (0, _getCYARowsForContainer.default)(childPage, component, entryData);
59
+ rowIndex += 1;
60
+ return /*#__PURE__*/_react.default.createElement("div", {
61
+ key: fieldId,
62
+ className: classes('field'),
63
+ style: {
64
+ '--column': columnIndex + 1,
65
+ '--row': rowIndex
66
+ }
67
+ }, containerRows.map(function (subComponent) {
68
+ var _entryData$component$;
69
+ // Put value for current subcomponent at top level
70
+ var modEntry = _objectSpread(_objectSpread({}, entryData), _defineProperty({}, subComponent.fieldId, (_entryData$component$ = entryData[component.fieldId]) === null || _entryData$component$ === void 0 ? void 0 : _entryData$component$[subComponent.fieldId]));
71
+ return (0, _getComponentRowForCYA.default)(childPage, _objectSpread(_objectSpread({}, subComponent), {
72
+ label: subComponent.key
73
+ }), classes, modEntry);
74
+ }));
75
+ }
76
+ rowIndex += 1;
77
+ return /*#__PURE__*/_react.default.createElement("div", {
78
+ key: fieldId,
79
+ className: classes('field'),
80
+ style: {
81
+ '--column': columnIndex + 1,
82
+ '--row': rowIndex
83
+ }
84
+ }, (0, _getComponentRowForCYA.default)(childPage, component, classes, entryData));
85
+ }).filter(function (e) {
86
+ return !!e;
87
+ });
88
+ // If the column that's just been generated has anything in it
89
+ // then we stick a divider on it's right side. The divider isn't
90
+ // passed rowIndex as it spans all rows. columnIndex is incremented
91
+ // twice to account for the divider column too.
92
+ var lastColumn = index === section.columns.length - 1;
93
+ if (!lastColumn && columnContent.length !== 0) {
94
+ columnIndex += 2;
95
+ return [].concat(columnContent, [/*#__PURE__*/_react.default.createElement("div", {
96
+ key: "divider".concat(columnIndex),
97
+ className: classes('divider'),
98
+ style: {
99
+ '--column': columnIndex
100
+ }
101
+ })]);
102
+ }
103
+ return columnContent;
104
+ }).filter(function (e) {
105
+ return !!e;
106
+ });
107
+ };
45
108
  return (masterPage === null || masterPage === void 0 || (_masterPage$childPage = masterPage.childPages) === null || _masterPage$childPage === void 0 ? void 0 : _masterPage$childPage.filter(function (p) {
46
109
  return _utils.default.FormPage.show(p, _objectSpread(_objectSpread({}, formData), entryData));
47
110
  }).map(function (childPage) {
48
111
  var _childPage$summaryLay;
49
112
  var allPageComponents = _utils.default.Component.elevateNested(childPage === null || childPage === void 0 ? void 0 : childPage.components, entryData);
50
113
  return (_childPage$summaryLay = childPage.summaryLayout) === null || _childPage$summaryLay === void 0 ? void 0 : _childPage$summaryLay.sections.map(function (section) {
51
- var _section$fields;
52
114
  if (section.show_when && !_utils.default.Condition.meetsAll(section.show_when, _objectSpread(_objectSpread({}, formData), entryData))) {
53
115
  return null;
54
116
  }
@@ -78,33 +140,11 @@ var SummaryCardDetails = function SummaryCardDetails(_ref) {
78
140
  }, !hideChildSectionTitles && /*#__PURE__*/_react.default.createElement("h3", {
79
141
  className: classes('section-title')
80
142
  }, section.title), /*#__PURE__*/_react.default.createElement("div", {
81
- className: classes('section-content', "columns-".concat(section.columns))
82
- }, (_section$fields = section.fields) === null || _section$fields === void 0 ? void 0 : _section$fields.map(function (fieldId) {
83
- var component = allPageComponents.find(function (comp) {
84
- return comp.fieldId === fieldId;
85
- });
86
- if (!component) {
87
- return null;
143
+ className: classes('section-content'),
144
+ style: {
145
+ '--dividers': section.columns.length - 1
88
146
  }
89
- if (component.type === _models.ComponentTypes.CONTAINER) {
90
- var containerRows = (0, _getCYARowsForContainer.default)(childPage, component, entryData);
91
- return /*#__PURE__*/_react.default.createElement("div", {
92
- key: fieldId,
93
- className: classes('field')
94
- }, containerRows.map(function (subComponent) {
95
- var _entryData$component$;
96
- // Put value for current subcomponent at top level
97
- var modEntry = _objectSpread(_objectSpread({}, entryData), _defineProperty({}, subComponent.fieldId, (_entryData$component$ = entryData[component.fieldId]) === null || _entryData$component$ === void 0 ? void 0 : _entryData$component$[subComponent.fieldId]));
98
- return (0, _getComponentRowForCYA.default)(childPage, _objectSpread(_objectSpread({}, subComponent), {
99
- label: subComponent.key
100
- }), classes, modEntry);
101
- }));
102
- }
103
- return /*#__PURE__*/_react.default.createElement("div", {
104
- key: fieldId,
105
- className: classes('field')
106
- }, (0, _getComponentRowForCYA.default)(childPage, component, classes, entryData));
107
- })));
147
+ }, getSectionContent(section, allPageComponents, childPage)));
108
148
  });
109
149
  }).filter(function (e) {
110
150
  return !!e;
package/dist/components/CollectionSummary/SummaryCardDetails.scss CHANGED
@@ -36,9 +36,12 @@ $govuk-font-family: 'Roboto', arial, sans-serif;
36
36
  border-bottom: 2px solid #E9EBED;
37
37
 
38
38
  &-content {
39
- display: flex;
40
- flex-wrap: wrap;
39
+ display: grid;
40
+ grid-template-columns: repeat(var(--dividers), 1fr 2px) 1fr;
41
+ grid-auto-rows: minmax(100px, 1fr);
41
42
  gap: govuk-spacing(2);
43
+ position: relative;
44
+ margin-bottom: govuk-spacing(1);
42
45
 
43
46
  .hods-form-summary-card__field {
44
47
  box-sizing: border-box;
@@ -61,6 +64,7 @@ $govuk-font-family: 'Roboto', arial, sans-serif;
61
64
  }
62
65
  }
63
66
 
67
+ /*
64
68
  &--columns-1,
65
69
  &--columns-2,
66
70
  &--columns-3 {
@@ -79,6 +83,9 @@ $govuk-font-family: 'Roboto', arial, sans-serif;
79
83
  }
80
84
 
81
85
  &--columns-2 {
86
+ display: grid;
87
+ grid-template-columns: repeat(2, 1fr);
88
+
82
89
  &::after {
83
90
  content: "";
84
91
  position: absolute;
@@ -89,12 +96,13 @@ $govuk-font-family: 'Roboto', arial, sans-serif;
89
96
  left: 50%;
90
97
  }
91
98
 
92
- .hods-form-summary-card-details__field {
93
- flex: 0 0 calc(50% - 10px);
94
- }
99
+
95
100
  }
96
101
 
97
102
  &--columns-3 {
103
+ display: grid;
104
+ grid-template-columns: repeat(2, 1fr);
105
+
98
106
  &::after {
99
107
  content: "";
100
108
  position: absolute;
@@ -106,7 +114,10 @@ $govuk-font-family: 'Roboto', arial, sans-serif;
106
114
  }
107
115
 
108
116
  .hods-form-summary-card-details__field {
109
- flex: 0 0 calc(33.333% - 10px);
117
+ grid-column-start: var("--column");
118
+ grid-column-end: var("--column");
119
+ grid-row-start: var("--row");
120
+ grid-row-end: var("--row");
110
121
 
111
122
  &:nth-child(2)::after {
112
123
  content: "";
@@ -119,6 +130,23 @@ $govuk-font-family: 'Roboto', arial, sans-serif;
119
130
  }
120
131
  }
121
132
  }
133
+ */
134
+
135
+ .hods-form-summary-card-details__field {
136
+ grid-column-start: var(--column);
137
+ grid-column-end: var(--column);
138
+ grid-row-start: var(--row);
139
+ grid-row-end: var(--row);
140
+ }
141
+
142
+ .hods-form-summary-card-details__divider {
143
+ position: absolute;
144
+ height: 100%;
145
+ width: 100%;
146
+ background-color: #E9EBED;
147
+ grid-column-start: var(--column);
148
+ grid-column-end: var(--column);
149
+ }
122
150
  }
123
151
  }
124
152
  }
@@ -137,6 +165,15 @@ $govuk-font-family: 'Roboto', arial, sans-serif;
137
165
  display: none;
138
166
  }
139
167
 
168
+ .hods-form-summary-card-details__divider {
169
+ position: absolute;
170
+ height: 0%;
171
+ width: 0%;
172
+ background-color: #E9EBED;
173
+ grid-column-start: var(--column);
174
+ grid-column-end: var(--column);
175
+ }
176
+
140
177
  &--columns-2,
141
178
  &--columns-3 {
142
179
  position: relative;
package/dist/components/CollectionSummary/SummaryCardDetails.test.js CHANGED
@@ -38,12 +38,16 @@ describe('components.CollectionSummary.SummaryCardDetails', function () {
38
38
  summaryLayout: {
39
39
  sections: [{
40
40
  title: 'Section 1',
41
- columns: 2,
42
- fields: ['fieldA', 'fieldB']
41
+ columns: [{
42
+ fields: ['fieldA']
43
+ }, {
44
+ fields: ['fieldB']
45
+ }]
43
46
  }, {
44
47
  title: 'Section 2',
45
- columns: 1,
46
- fields: ['fieldC']
48
+ columns: [{
49
+ fields: ['fieldC']
50
+ }]
47
51
  }]
48
52
  },
49
53
  components: [{
@@ -87,8 +91,9 @@ describe('components.CollectionSummary.SummaryCardDetails', function () {
87
91
  summaryLayout: {
88
92
  sections: [{
89
93
  title: 'Section 1',
90
- columns: 1,
91
- fields: ['containerComponent']
94
+ columns: [{
95
+ fields: ['containerComponent']
96
+ }]
92
97
  }]
93
98
  },
94
99
  components: [{
@@ -156,8 +161,11 @@ describe('components.CollectionSummary.SummaryCardDetails', function () {
156
161
  summaryLayout: {
157
162
  sections: [{
158
163
  title: 'Section 1',
159
- columns: 2,
160
- fields: ['fieldA', 'fieldB'],
164
+ columns: [{
165
+ fields: ['fieldA']
166
+ }, {
167
+ fields: ['fieldB']
168
+ }],
161
169
  show_when: [{
162
170
  field: 'showSection1',
163
171
  op: "=",
@@ -165,8 +173,9 @@ describe('components.CollectionSummary.SummaryCardDetails', function () {
165
173
  }]
166
174
  }, {
167
175
  title: 'Section 2',
168
- columns: 1,
169
- fields: ['fieldC']
176
+ columns: [{
177
+ fields: ['fieldC']
178
+ }]
170
179
  }]
171
180
  },
172
181
  components: [{
@@ -213,8 +222,11 @@ describe('components.CollectionSummary.SummaryCardDetails', function () {
213
222
  summaryLayout: {
214
223
  sections: [{
215
224
  title: 'Section 1',
216
- columns: 2,
217
- fields: ['fieldA', 'fieldB'],
225
+ columns: [{
226
+ fields: ['fieldA']
227
+ }, {
228
+ fields: ['fieldB']
229
+ }],
218
230
  show_when: [{
219
231
  field: 'showSection1',
220
232
  op: "=",
@@ -222,8 +234,9 @@ describe('components.CollectionSummary.SummaryCardDetails', function () {
222
234
  }]
223
235
  }, {
224
236
  title: 'Section 2',
225
- columns: 1,
226
- fields: ['fieldC']
237
+ columns: [{
238
+ fields: ['fieldC']
239
+ }]
227
240
  }]
228
241
  },
229
242
  components: [{
@@ -273,8 +286,11 @@ describe('components.CollectionSummary.SummaryCardDetails', function () {
273
286
  summaryLayout: {
274
287
  sections: [{
275
288
  title: 'Section 1',
276
- columns: 2,
277
- fields: ['fieldA', 'fieldB'],
289
+ columns: [{
290
+ fields: ['fieldA']
291
+ }, {
292
+ fields: ['fieldB']
293
+ }],
278
294
  show_when: [{
279
295
  field: 'showSection1',
280
296
  op: "=",
@@ -282,8 +298,9 @@ describe('components.CollectionSummary.SummaryCardDetails', function () {
282
298
  }]
283
299
  }, {
284
300
  title: 'Section 2',
285
- columns: 1,
286
- fields: ['fieldC']
301
+ columns: [{
302
+ fields: ['fieldC']
303
+ }]
287
304
  }]
288
305
  },
289
306
  components: [{
@@ -337,8 +354,11 @@ describe('components.CollectionSummary.SummaryCardDetails', function () {
337
354
  summaryLayout: {
338
355
  sections: [{
339
356
  title: 'Hidden Title',
340
- columns: 2,
341
- fields: ['childfield1', 'childfield2']
357
+ columns: [{
358
+ fields: ['childfield1']
359
+ }, {
360
+ fields: ['childfield2']
361
+ }]
342
362
  }]
343
363
  }
344
364
  }]
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ukhomeoffice/cop-react-form-renderer",
3
- "version": "5.67.0",
3
+ "version": "5.68.0",
4
4
  "private": false,
5
5
  "scripts": {
6
6
  "clean": "rimraf dist",