@ukhomeoffice/cop-react-form-renderer 5.52.2 → 6.0.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/dist/components/CheckYourAnswers/CheckYourAnswers.scss +2 -2
- package/dist/components/CollectionSummary/BannerStrip.scss +2 -2
- package/dist/components/CollectionSummary/CollectionSummary.scss +1 -1
- package/dist/components/CollectionSummary/Confirmation.scss +1 -1
- package/dist/components/CollectionSummary/RenderListView.scss +1 -1
- package/dist/components/CollectionSummary/SummaryCard.js +5 -0
- package/dist/components/CollectionSummary/SummaryCard.scss +1 -1
- package/dist/components/CollectionSummary/SummaryCard.test.js +129 -11
- package/dist/components/FormPage/FormPage.scss +1 -1
- package/dist/components/FormRenderer/FormRenderer.scss +1 -1
- package/dist/components/SummaryList/SummaryList.scss +2 -2
- package/dist/components/TaskList/TaskList.scss +1 -1
- package/package.json +4 -4
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
@import "
|
|
2
|
-
@import "
|
|
1
|
+
@import "govuk-frontend/dist/govuk/_base";
|
|
2
|
+
@import "govuk-frontend/dist/govuk/overrides/spacing";
|
|
3
3
|
|
|
4
4
|
.govuk-link {
|
|
5
5
|
@include govuk-font($size: 19);
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
@import "
|
|
2
|
-
@import "
|
|
1
|
+
@import "govuk-frontend/dist/govuk/_base";
|
|
2
|
+
@import "govuk-frontend/dist/govuk/components/tag/_index";
|
|
3
3
|
|
|
4
4
|
.hods-form-banner-strip {
|
|
5
5
|
display: block;
|
|
@@ -208,6 +208,9 @@ var SummaryCard = function SummaryCard(_ref) {
|
|
|
208
208
|
var allPageComponents = _utils.default.Component.elevateNested(childPage === null || childPage === void 0 ? void 0 : childPage.components, entryData);
|
|
209
209
|
return (_childPage$summaryLay = childPage.summaryLayout) === null || _childPage$summaryLay === void 0 ? void 0 : _childPage$summaryLay.sections.map(function (section) {
|
|
210
210
|
var _section$fields;
|
|
211
|
+
if (section.show_when && !_utils.default.Condition.meetsAll(section.show_when, _objectSpread(_objectSpread({}, formData), entryData))) {
|
|
212
|
+
return null;
|
|
213
|
+
}
|
|
211
214
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
212
215
|
key: section.title,
|
|
213
216
|
className: classes('section')
|
|
@@ -233,6 +236,8 @@ var SummaryCard = function SummaryCard(_ref) {
|
|
|
233
236
|
}));
|
|
234
237
|
})));
|
|
235
238
|
});
|
|
239
|
+
}).filter(function (e) {
|
|
240
|
+
return !!e;
|
|
236
241
|
}))));
|
|
237
242
|
};
|
|
238
243
|
SummaryCard.propTypes = {
|
|
@@ -1328,7 +1328,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
|
|
|
1328
1328
|
});
|
|
1329
1329
|
describe('SummaryLayout config behavior', function () {
|
|
1330
1330
|
it('should render sections and fields based on summaryLayout config', function () {
|
|
1331
|
-
var
|
|
1331
|
+
var CHILD_PAGES = [{
|
|
1332
1332
|
summaryLayout: {
|
|
1333
1333
|
sections: [{
|
|
1334
1334
|
title: 'Section 1',
|
|
@@ -1356,10 +1356,10 @@ describe('components.CollectionSummary.SummaryCard', function () {
|
|
|
1356
1356
|
entryData: ENTRY,
|
|
1357
1357
|
config: CONFIG,
|
|
1358
1358
|
parentCollectionName: "parent",
|
|
1359
|
-
pages:
|
|
1359
|
+
pages: CHILD_PAGES,
|
|
1360
1360
|
formData: {},
|
|
1361
1361
|
masterPage: {
|
|
1362
|
-
childPages:
|
|
1362
|
+
childPages: CHILD_PAGES
|
|
1363
1363
|
}
|
|
1364
1364
|
})),
|
|
1365
1365
|
container = _renderWithValidation35.container;
|
|
@@ -1374,16 +1374,134 @@ describe('components.CollectionSummary.SummaryCard', function () {
|
|
|
1374
1374
|
// Check for section titles
|
|
1375
1375
|
var section1Title = getByTextContent(container, 'Section 1');
|
|
1376
1376
|
var section2Title = getByTextContent(container, 'Section 2');
|
|
1377
|
-
expect(section1Title).not.
|
|
1378
|
-
expect(section2Title).not.
|
|
1379
|
-
|
|
1380
|
-
|
|
1381
|
-
|
|
1377
|
+
expect(section1Title).not.toBeUndefined();
|
|
1378
|
+
expect(section2Title).not.toBeUndefined();
|
|
1379
|
+
var section1Content = section1Title.parentNode.querySelector(".".concat(classes('section-content')));
|
|
1380
|
+
expect(section1Content.querySelectorAll(".".concat(classes('field'))).length).toEqual(2);
|
|
1381
|
+
var section2Content = section2Title.parentNode.querySelector(".".concat(classes('section-content')));
|
|
1382
|
+
expect(section2Content.querySelectorAll(".".concat(classes('field'))).length).toEqual(1);
|
|
1383
|
+
});
|
|
1384
|
+
it('should render sections if they have show_when checks and pass them', function () {
|
|
1385
|
+
var CHILD_PAGES = [{
|
|
1386
|
+
summaryLayout: {
|
|
1387
|
+
sections: [{
|
|
1388
|
+
title: 'Section 1',
|
|
1389
|
+
columns: 2,
|
|
1390
|
+
fields: ['fieldA', 'fieldB'],
|
|
1391
|
+
show_when: [{
|
|
1392
|
+
field: 'showSection1',
|
|
1393
|
+
op: "=",
|
|
1394
|
+
value: true
|
|
1395
|
+
}]
|
|
1396
|
+
}, {
|
|
1397
|
+
title: 'Section 2',
|
|
1398
|
+
columns: 1,
|
|
1399
|
+
fields: ['fieldC']
|
|
1400
|
+
}]
|
|
1401
|
+
},
|
|
1402
|
+
components: [{
|
|
1403
|
+
fieldId: 'fieldA'
|
|
1404
|
+
}, {
|
|
1405
|
+
fieldId: 'fieldB'
|
|
1406
|
+
}, {
|
|
1407
|
+
fieldId: 'fieldC'
|
|
1408
|
+
}]
|
|
1409
|
+
}];
|
|
1410
|
+
var CONFIG = {
|
|
1411
|
+
title: 'Title'
|
|
1412
|
+
};
|
|
1413
|
+
var CUSTOM_ENTRY = _objectSpread(_objectSpread({}, ENTRY), {}, {
|
|
1414
|
+
showSection1: true
|
|
1415
|
+
});
|
|
1416
|
+
var _renderWithValidation36 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCard.default, {
|
|
1417
|
+
id: ID,
|
|
1418
|
+
entryData: CUSTOM_ENTRY,
|
|
1419
|
+
config: CONFIG,
|
|
1420
|
+
parentCollectionName: "parent",
|
|
1421
|
+
pages: CHILD_PAGES,
|
|
1422
|
+
formData: {},
|
|
1423
|
+
masterPage: {
|
|
1424
|
+
childPages: CHILD_PAGES
|
|
1425
|
+
}
|
|
1426
|
+
})),
|
|
1427
|
+
container = _renderWithValidation36.container;
|
|
1428
|
+
|
|
1429
|
+
// Function to find an element by its text content
|
|
1430
|
+
function getByTextContent(parent, text) {
|
|
1431
|
+
return Array.from(parent.getElementsByClassName(classes('section-title'))).find(function (el) {
|
|
1432
|
+
return el.textContent === text;
|
|
1433
|
+
});
|
|
1382
1434
|
}
|
|
1383
|
-
|
|
1384
|
-
|
|
1385
|
-
|
|
1435
|
+
|
|
1436
|
+
// Check for section titles
|
|
1437
|
+
var section1Title = getByTextContent(container, 'Section 1');
|
|
1438
|
+
var section2Title = getByTextContent(container, 'Section 2');
|
|
1439
|
+
expect(section1Title).not.toBeUndefined();
|
|
1440
|
+
expect(section2Title).not.toBeUndefined();
|
|
1441
|
+
var section1Content = section1Title.parentNode.querySelector(".".concat(classes('section-content')));
|
|
1442
|
+
expect(section1Content.querySelectorAll(".".concat(classes('field'))).length).toEqual(2);
|
|
1443
|
+
var section2Content = section2Title.parentNode.querySelector(".".concat(classes('section-content')));
|
|
1444
|
+
expect(section2Content.querySelectorAll(".".concat(classes('field'))).length).toEqual(1);
|
|
1445
|
+
});
|
|
1446
|
+
it('should not render sections if they have show_when checks and fail them', function () {
|
|
1447
|
+
var CHILD_PAGES = [{
|
|
1448
|
+
summaryLayout: {
|
|
1449
|
+
sections: [{
|
|
1450
|
+
title: 'Section 1',
|
|
1451
|
+
columns: 2,
|
|
1452
|
+
fields: ['fieldA', 'fieldB'],
|
|
1453
|
+
show_when: [{
|
|
1454
|
+
field: 'showSection1',
|
|
1455
|
+
op: "=",
|
|
1456
|
+
value: true
|
|
1457
|
+
}]
|
|
1458
|
+
}, {
|
|
1459
|
+
title: 'Section 2',
|
|
1460
|
+
columns: 1,
|
|
1461
|
+
fields: ['fieldC']
|
|
1462
|
+
}]
|
|
1463
|
+
},
|
|
1464
|
+
components: [{
|
|
1465
|
+
fieldId: 'fieldA'
|
|
1466
|
+
}, {
|
|
1467
|
+
fieldId: 'fieldB'
|
|
1468
|
+
}, {
|
|
1469
|
+
fieldId: 'fieldC'
|
|
1470
|
+
}]
|
|
1471
|
+
}];
|
|
1472
|
+
var CONFIG = {
|
|
1473
|
+
title: 'Title'
|
|
1474
|
+
};
|
|
1475
|
+
var CUSTOM_ENTRY = _objectSpread(_objectSpread({}, ENTRY), {}, {
|
|
1476
|
+
showSection1: false
|
|
1477
|
+
});
|
|
1478
|
+
var _renderWithValidation37 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCard.default, {
|
|
1479
|
+
id: ID,
|
|
1480
|
+
entryData: CUSTOM_ENTRY,
|
|
1481
|
+
config: CONFIG,
|
|
1482
|
+
parentCollectionName: "parent",
|
|
1483
|
+
pages: CHILD_PAGES,
|
|
1484
|
+
formData: {},
|
|
1485
|
+
masterPage: {
|
|
1486
|
+
childPages: CHILD_PAGES
|
|
1487
|
+
}
|
|
1488
|
+
})),
|
|
1489
|
+
container = _renderWithValidation37.container;
|
|
1490
|
+
|
|
1491
|
+
// Function to find an element by its text content
|
|
1492
|
+
function getByTextContent(parent, text) {
|
|
1493
|
+
return Array.from(parent.getElementsByClassName(classes('section-title'))).find(function (el) {
|
|
1494
|
+
return el.textContent === text;
|
|
1495
|
+
});
|
|
1386
1496
|
}
|
|
1497
|
+
|
|
1498
|
+
// Check for section titles
|
|
1499
|
+
var section1Title = getByTextContent(container, 'Section 1');
|
|
1500
|
+
var section2Title = getByTextContent(container, 'Section 2');
|
|
1501
|
+
expect(section1Title).toBeUndefined();
|
|
1502
|
+
expect(section2Title).not.toBeUndefined();
|
|
1503
|
+
var section2Content = section2Title.parentNode.querySelector(".".concat(classes('section-content')));
|
|
1504
|
+
expect(section2Content.querySelectorAll(".".concat(classes('field'))).length).toEqual(1);
|
|
1387
1505
|
});
|
|
1388
1506
|
});
|
|
1389
1507
|
});
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
@import '
|
|
2
|
-
@import '
|
|
1
|
+
@import 'govuk-frontend/dist/govuk/_base';
|
|
2
|
+
@import 'govuk-frontend/dist/govuk/components/summary-list/_summary-list';
|
|
3
3
|
|
|
4
4
|
.govuk-summary-list__title {
|
|
5
5
|
width: 100%;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ukhomeoffice/cop-react-form-renderer",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "6.0.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"scripts": {
|
|
6
6
|
"clean": "rimraf dist",
|
|
@@ -16,10 +16,11 @@
|
|
|
16
16
|
"post-compile": "rimraf dist/*.test.* dist/**/*.test.* dist/**/*.stories.* dist/docs dist/assets"
|
|
17
17
|
},
|
|
18
18
|
"dependencies": {
|
|
19
|
-
"@ukhomeoffice/cop-react-components": "^
|
|
19
|
+
"@ukhomeoffice/cop-react-components": "^4.0.0",
|
|
20
20
|
"axios": "^0.23.0",
|
|
21
21
|
"dayjs": "^1.11.0",
|
|
22
|
-
"govuk-frontend": "^
|
|
22
|
+
"govuk-frontend": "^5.0.0",
|
|
23
|
+
"sass": "^1.69.5",
|
|
23
24
|
"web-vitals": "^1.0.1"
|
|
24
25
|
},
|
|
25
26
|
"devDependencies": {
|
|
@@ -48,7 +49,6 @@
|
|
|
48
49
|
"eslint-config-airbnb": "^19.0.4",
|
|
49
50
|
"eslint-config-prettier": "^8.6.0",
|
|
50
51
|
"html-react-parser": "^0.10.5",
|
|
51
|
-
"node-sass": "^6.0.1",
|
|
52
52
|
"prop-types": "^15.8.1",
|
|
53
53
|
"react": "^16.13.1",
|
|
54
54
|
"react-dom": "^16.13.1",
|