@ukhomeoffice/cop-react-form-renderer 4.91.0 → 5.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.
Files changed (28) hide show
  1. package/dist/components/CollectionPage/CollectionPage.test.js +9 -9
  2. package/dist/components/FormComponent/Collection.test.js +34 -34
  3. package/dist/components/FormComponent/Container.test.js +14 -14
  4. package/dist/components/FormComponent/FormComponent.js +1 -0
  5. package/dist/components/FormComponent/FormComponent.test.js +6 -6
  6. package/dist/components/FormComponent/helpers/getComponentFieldSet.js +16 -0
  7. package/dist/components/FormComponent/helpers/getComponentFieldSet.test.js +29 -0
  8. package/dist/components/FormComponent/helpers/index.js +8 -1
  9. package/dist/components/FormPage/FormPage.js +23 -8
  10. package/dist/components/FormPage/FormPage.stories.mdx +24 -0
  11. package/dist/components/FormPage/FormPage.test.js +8 -8
  12. package/dist/components/FormRenderer/FormRenderer.test.js +9 -9
  13. package/dist/json/addressDetails.json +149 -0
  14. package/dist/utils/Component/getComponentTests/getComponent.autocomplete.test.js +3 -4
  15. package/dist/utils/Component/getComponentTests/getComponent.calculation.test.js +2 -2
  16. package/dist/utils/Component/getComponentTests/getComponent.checkboxes.test.js +6 -8
  17. package/dist/utils/Component/getComponentTests/getComponent.date.test.js +7 -7
  18. package/dist/utils/Component/getComponentTests/getComponent.email.test.js +3 -3
  19. package/dist/utils/Component/getComponentTests/getComponent.file.test.js +3 -3
  20. package/dist/utils/Component/getComponentTests/getComponent.multifile.test.js +3 -3
  21. package/dist/utils/Component/getComponentTests/getComponent.nested.test.js +9 -9
  22. package/dist/utils/Component/getComponentTests/getComponent.phoneNumber.test.js +3 -3
  23. package/dist/utils/Component/getComponentTests/getComponent.radios.test.js +3 -3
  24. package/dist/utils/Component/getComponentTests/getComponent.select.test.js +1 -1
  25. package/dist/utils/Component/getComponentTests/getComponent.text.test.js +3 -3
  26. package/dist/utils/Component/getComponentTests/getComponent.textArea.test.js +3 -3
  27. package/dist/utils/Component/getComponentTests/getComponent.time.test.js +4 -4
  28. package/package.json +2 -2
package/dist/components/CollectionPage/CollectionPage.test.js CHANGED
@@ -137,16 +137,16 @@ describe('components.CollectionPage', function () {
137
137
  var checkInputField = function checkInputField(formGroup, fieldId, lbl, hnt, val) {
138
138
  expect(formGroup.tagName).toEqual('DIV');
139
139
  expect(formGroup.classList).toContain('govuk-form-group');
140
- var label = formGroup.childNodes[0].childNodes[0].childNodes[0];
140
+ var label = formGroup.childNodes[0];
141
141
  expect(label.tagName).toEqual('LABEL');
142
142
  expect(label.classList).toContain('govuk-label');
143
143
  expect(label.textContent).toEqual(lbl);
144
144
  expect(label.getAttribute('for')).toEqual(fieldId);
145
- var hint = formGroup.childNodes[0].childNodes[1];
145
+ var hint = formGroup.childNodes[1];
146
146
  expect(hint.tagName).toEqual('DIV');
147
147
  expect(hint.classList).toContain('govuk-hint');
148
148
  expect(hint.textContent).toEqual(hnt);
149
- var input = formGroup.childNodes[0].childNodes[2];
149
+ var input = formGroup.childNodes[2];
150
150
  expect(input.tagName).toEqual('INPUT');
151
151
  expect(input.classList).toContain('govuk-input');
152
152
  expect(input.id).toEqual(fieldId);
@@ -156,16 +156,16 @@ describe('components.CollectionPage', function () {
156
156
  var checkAutoCompleteField = function checkAutoCompleteField(formGroup, fieldId, lbl, hnt, val) {
157
157
  expect(formGroup.tagName).toEqual('DIV');
158
158
  expect(formGroup.classList).toContain('govuk-form-group');
159
- var label = formGroup.childNodes[0].childNodes[0].childNodes[0];
159
+ var label = formGroup.childNodes[0];
160
160
  expect(label.tagName).toEqual('LABEL');
161
161
  expect(label.classList).toContain('govuk-label');
162
162
  expect(label.textContent).toEqual(lbl);
163
163
  expect(label.getAttribute('for')).toEqual(fieldId);
164
- var hint = formGroup.childNodes[0].childNodes[1];
164
+ var hint = formGroup.childNodes[1];
165
165
  expect(hint.tagName).toEqual('DIV');
166
166
  expect(hint.classList).toContain('govuk-hint');
167
167
  expect(hint.textContent).toEqual(hnt);
168
- var outerWrapper = formGroup.childNodes[0].childNodes[2];
168
+ var outerWrapper = formGroup.childNodes[2];
169
169
  expect(outerWrapper.classList).toContain('hods-autocomplete__outer-wrapper');
170
170
  var autocomplete = outerWrapper.childNodes[0];
171
171
  expect(autocomplete.classList).toContain('hods-autocomplete__wrapper');
@@ -268,7 +268,7 @@ describe('components.CollectionPage', function () {
268
268
  expect(page.tagName).toEqual('DIV');
269
269
 
270
270
  // Change the input.
271
- input = page.childNodes[1].childNodes[0].childNodes[2];
271
+ input = page.childNodes[1].childNodes[2];
272
272
  NEW_VALUE = "".concat(VALUE, ".");
273
273
  EVENT = {
274
274
  target: {
@@ -296,7 +296,7 @@ describe('components.CollectionPage', function () {
296
296
  onAction: ON_ACTION
297
297
  })), container = _renderWithValidation4.container;
298
298
  page = container.childNodes[0]; // Change the input.
299
- input = page.childNodes[1].childNodes[0].childNodes[2];
299
+ input = page.childNodes[1].childNodes[2];
300
300
  NEW_VALUE = "".concat(VALUE, ".");
301
301
  CHANGE_EVENT = {
302
302
  target: {
@@ -336,7 +336,7 @@ describe('components.CollectionPage', function () {
336
336
  onAction: ON_ACTION
337
337
  })), container = _renderWithValidation5.container;
338
338
  page = container.childNodes[0]; // Change the input.
339
- input = page.childNodes[1].childNodes[0].childNodes[2];
339
+ input = page.childNodes[1].childNodes[2];
340
340
  NEW_VALUE = "".concat(VALUE, ".");
341
341
  CHANGE_EVENT = {
342
342
  target: {
package/dist/components/FormComponent/Collection.test.js CHANGED
@@ -71,16 +71,16 @@ describe('components.FormComponent.Collection', function () {
71
71
  formGroup = itemContainer.childNodes[0];
72
72
  expect(formGroup.tagName).toEqual('DIV');
73
73
  expect(formGroup.classList).toContain('govuk-form-group');
74
- label = formGroup.childNodes[0].childNodes[0].childNodes[0];
74
+ label = formGroup.childNodes[0];
75
75
  expect(label.tagName).toEqual('LABEL');
76
76
  expect(label.classList).toContain('govuk-label');
77
77
  expect(label.textContent).toEqual("".concat(TEXT_COMPONENT.label, " (optional)"));
78
78
  expect(label.getAttribute('for')).toEqual("".concat(ID, "[0].").concat(TEXT_ID));
79
- hint = formGroup.childNodes[0].childNodes[1];
79
+ hint = formGroup.childNodes[1];
80
80
  expect(hint.tagName).toEqual('DIV');
81
81
  expect(hint.classList).toContain('govuk-hint');
82
82
  expect(hint.textContent).toEqual(TEXT_COMPONENT.hint);
83
- input = formGroup.childNodes[0].childNodes[2];
83
+ input = formGroup.childNodes[2];
84
84
  expect(input.tagName).toEqual('INPUT');
85
85
  expect(input.classList).toContain('govuk-input');
86
86
  expect(input.id).toEqual("".concat(ID, "[0].").concat(TEXT_ID));
@@ -120,7 +120,7 @@ describe('components.FormComponent.Collection', function () {
120
120
  c = container.childNodes[0];
121
121
  item = c.childNodes[0];
122
122
  formGroup = item.childNodes[1].childNodes[0];
123
- input = formGroup.childNodes[0].childNodes[2];
123
+ input = formGroup.childNodes[2];
124
124
  NEW_TEXT_VALUE = 'bravo';
125
125
  EVENT = {
126
126
  target: {
@@ -380,16 +380,16 @@ describe('components.FormComponent.Collection', function () {
380
380
  formGroup = itemContainer.childNodes[0];
381
381
  expect(formGroup.tagName).toEqual('DIV');
382
382
  expect(formGroup.classList).toContain('govuk-form-group');
383
- label = formGroup.childNodes[0].childNodes[0].childNodes[0];
383
+ label = formGroup.childNodes[0];
384
384
  expect(label.tagName).toEqual('LABEL');
385
385
  expect(label.classList).toContain('govuk-label');
386
386
  expect(label.textContent).toEqual("".concat(TEXT_COMPONENT.label, " (optional)"));
387
387
  expect(label.getAttribute('for')).toEqual("".concat(ID, "[0].").concat(TEXT_ID));
388
- hint = formGroup.childNodes[0].childNodes[1];
388
+ hint = formGroup.childNodes[1];
389
389
  expect(hint.tagName).toEqual('DIV');
390
390
  expect(hint.classList).toContain('govuk-hint');
391
391
  expect(hint.textContent).toEqual(TEXT_COMPONENT.hint);
392
- input = formGroup.childNodes[0].childNodes[2];
392
+ input = formGroup.childNodes[2];
393
393
  expect(input.tagName).toEqual('DIV'); // Now readonly, so a DIV.
394
394
  expect(input.classList).toContain('hods-readonly'); // Now readonly, so hods-readonly
395
395
  expect(input.id).toEqual("".concat(ID, "[0].").concat(TEXT_ID));
@@ -433,16 +433,16 @@ describe('components.FormComponent.Collection', function () {
433
433
  formGroup = itemContainer.childNodes[0];
434
434
  expect(formGroup.tagName).toEqual('DIV');
435
435
  expect(formGroup.classList).toContain('govuk-form-group');
436
- label = formGroup.childNodes[0].childNodes[0].childNodes[0];
436
+ label = formGroup.childNodes[0];
437
437
  expect(label.tagName).toEqual('LABEL');
438
438
  expect(label.classList).toContain('govuk-label');
439
439
  expect(label.textContent).toEqual("".concat(TEXT_COMPONENT.label, " (optional)"));
440
440
  expect(label.getAttribute('for')).toEqual("".concat(ID, "[0].").concat(TEXT_ID));
441
- hint = formGroup.childNodes[0].childNodes[1];
441
+ hint = formGroup.childNodes[1];
442
442
  expect(hint.tagName).toEqual('DIV');
443
443
  expect(hint.classList).toContain('govuk-hint');
444
444
  expect(hint.textContent).toEqual(TEXT_COMPONENT.hint);
445
- input = formGroup.childNodes[0].childNodes[2];
445
+ input = formGroup.childNodes[2];
446
446
  expect(input.tagName).toEqual('INPUT');
447
447
  expect(input.classList).toContain('govuk-input');
448
448
  expect(input.id).toEqual("".concat(ID, "[0].").concat(TEXT_ID));
@@ -505,16 +505,16 @@ describe('components.FormComponent.Collection', function () {
505
505
  formGroup = itemContainer.childNodes[0];
506
506
  expect(formGroup.tagName).toEqual('DIV');
507
507
  expect(formGroup.classList).toContain('govuk-form-group');
508
- label = formGroup.childNodes[0].childNodes[0].childNodes[0];
508
+ label = formGroup.childNodes[0];
509
509
  expect(label.tagName).toEqual('LABEL');
510
510
  expect(label.classList).toContain('govuk-label');
511
511
  expect(label.textContent).toEqual("".concat(TEXT_COMPONENT.label, " (optional)"));
512
512
  expect(label.getAttribute('for')).toEqual("".concat(ID, "[0].").concat(TEXT_ID));
513
- hint = formGroup.childNodes[0].childNodes[1];
513
+ hint = formGroup.childNodes[1];
514
514
  expect(hint.tagName).toEqual('DIV');
515
515
  expect(hint.classList).toContain('govuk-hint');
516
516
  expect(hint.textContent).toEqual(TEXT_COMPONENT.hint);
517
- input = formGroup.childNodes[0].childNodes[2];
517
+ input = formGroup.childNodes[2];
518
518
  expect(input.tagName).toEqual('INPUT');
519
519
  expect(input.classList).toContain('govuk-input');
520
520
  expect(input.id).toEqual("".concat(ID, "[0].").concat(TEXT_ID));
@@ -524,16 +524,16 @@ describe('components.FormComponent.Collection', function () {
524
524
  formGroup = itemContainer.childNodes[1];
525
525
  expect(formGroup.tagName).toEqual('DIV');
526
526
  expect(formGroup.classList).toContain('govuk-form-group');
527
- label = formGroup.childNodes[0].childNodes[0].childNodes[0];
527
+ label = formGroup.childNodes[0];
528
528
  expect(label.tagName).toEqual('LABEL');
529
529
  expect(label.classList).toContain('govuk-label');
530
530
  expect(label.textContent).toEqual('Text component two (optional)');
531
531
  expect(label.getAttribute('for')).toEqual("".concat(ID, "[0].textTwo"));
532
- hint = formGroup.childNodes[0].childNodes[1];
532
+ hint = formGroup.childNodes[1];
533
533
  expect(hint.tagName).toEqual('DIV');
534
534
  expect(hint.classList).toContain('govuk-hint');
535
535
  expect(hint.textContent).toEqual('Text hint two');
536
- input = formGroup.childNodes[0].childNodes[2];
536
+ input = formGroup.childNodes[2];
537
537
  expect(input.tagName).toEqual('INPUT');
538
538
  expect(input.classList).toContain('govuk-input');
539
539
  expect(input.id).toEqual("".concat(ID, "[0].textTwo"));
@@ -553,14 +553,14 @@ describe('components.FormComponent.Collection', function () {
553
553
  formGroupTwo = itemContainerTwo.childNodes[0];
554
554
  expect(formGroupTwo.tagName).toEqual('DIV');
555
555
  expect(formGroupTwo.classList).toContain('govuk-form-group');
556
- labelTwo = formGroupTwo.childNodes[0].childNodes[0].childNodes[0];
556
+ labelTwo = formGroupTwo.childNodes[0];
557
557
  expect(labelTwo.tagName).toEqual('LABEL');
558
558
  expect(labelTwo.classList).toContain('govuk-label');
559
559
  expect(labelTwo.textContent).toEqual("".concat(TEXT_COMPONENT.label, " (optional)"));
560
560
  expect(labelTwo.getAttribute('for')).toEqual("".concat(ID, "[1].").concat(TEXT_ID));
561
- hintTwo = formGroupTwo.childNodes[0].childNodes[1];
561
+ hintTwo = formGroupTwo.childNodes[1];
562
562
  expect(hintTwo.tagName).toEqual(undefined);
563
- inputTwo = formGroupTwo.childNodes[0].childNodes[2];
563
+ inputTwo = formGroupTwo.childNodes[2];
564
564
  expect(inputTwo.tagName).toEqual('INPUT');
565
565
  expect(inputTwo.classList).toContain('govuk-input');
566
566
  expect(inputTwo.id).toEqual("".concat(ID, "[1].").concat(TEXT_ID));
@@ -570,14 +570,14 @@ describe('components.FormComponent.Collection', function () {
570
570
  formGroupTwo = itemContainerTwo.childNodes[1];
571
571
  expect(formGroupTwo.tagName).toEqual('DIV');
572
572
  expect(formGroupTwo.classList).toContain('govuk-form-group');
573
- labelTwo = formGroupTwo.childNodes[0].childNodes[0].childNodes[0];
573
+ labelTwo = formGroupTwo.childNodes[0];
574
574
  expect(labelTwo.tagName).toEqual('LABEL');
575
575
  expect(labelTwo.classList).toContain('govuk-label');
576
576
  expect(labelTwo.textContent).toEqual('Text component two (optional)');
577
577
  expect(labelTwo.getAttribute('for')).toEqual("".concat(ID, "[1].textTwo"));
578
- hintTwo = formGroupTwo.childNodes[0].childNodes[1];
578
+ hintTwo = formGroupTwo.childNodes[1];
579
579
  expect(hintTwo.tagName).toEqual(undefined);
580
- inputTwo = formGroupTwo.childNodes[0].childNodes[2];
580
+ inputTwo = formGroupTwo.childNodes[2];
581
581
  expect(inputTwo.tagName).toEqual('INPUT');
582
582
  expect(inputTwo.classList).toContain('govuk-input');
583
583
  expect(inputTwo.id).toEqual("".concat(ID, "[1].textTwo"));
@@ -645,16 +645,16 @@ describe('components.FormComponent.Collection', function () {
645
645
  formGroup = itemContainer.childNodes[0];
646
646
  expect(formGroup.tagName).toEqual('DIV');
647
647
  expect(formGroup.classList).toContain('govuk-form-group');
648
- label = formGroup.childNodes[0].childNodes[0].childNodes[0];
648
+ label = formGroup.childNodes[0];
649
649
  expect(label.tagName).toEqual('LABEL');
650
650
  expect(label.classList).toContain('govuk-label');
651
651
  expect(label.textContent).toEqual("".concat(UNIQUE_FIRST_LABEL_ONE, " (optional)"));
652
652
  expect(label.getAttribute('for')).toEqual("".concat(ID, "[0].").concat(TEXT_ID));
653
- hint = formGroup.childNodes[0].childNodes[1];
653
+ hint = formGroup.childNodes[1];
654
654
  expect(hint.tagName).toEqual('DIV');
655
655
  expect(hint.classList).toContain('govuk-hint');
656
656
  expect(hint.textContent).toEqual(TEXT_COMPONENT.hint);
657
- input = formGroup.childNodes[0].childNodes[2];
657
+ input = formGroup.childNodes[2];
658
658
  expect(input.tagName).toEqual('INPUT');
659
659
  expect(input.classList).toContain('govuk-input');
660
660
  expect(input.id).toEqual("".concat(ID, "[0].").concat(TEXT_ID));
@@ -664,16 +664,16 @@ describe('components.FormComponent.Collection', function () {
664
664
  formGroup = itemContainer.childNodes[1];
665
665
  expect(formGroup.tagName).toEqual('DIV');
666
666
  expect(formGroup.classList).toContain('govuk-form-group');
667
- label = formGroup.childNodes[0].childNodes[0].childNodes[0];
667
+ label = formGroup.childNodes[0];
668
668
  expect(label.tagName).toEqual('LABEL');
669
669
  expect(label.classList).toContain('govuk-label');
670
670
  expect(label.textContent).toEqual("".concat(UNIQUE_FIRST_LABEL_TWO, " (optional)"));
671
671
  expect(label.getAttribute('for')).toEqual("".concat(ID, "[0].textTwo"));
672
- hint = formGroup.childNodes[0].childNodes[1];
672
+ hint = formGroup.childNodes[1];
673
673
  expect(hint.tagName).toEqual('DIV');
674
674
  expect(hint.classList).toContain('govuk-hint');
675
675
  expect(hint.textContent).toEqual('Text hint two');
676
- input = formGroup.childNodes[0].childNodes[2];
676
+ input = formGroup.childNodes[2];
677
677
  expect(input.tagName).toEqual('INPUT');
678
678
  expect(input.classList).toContain('govuk-input');
679
679
  expect(input.id).toEqual("".concat(ID, "[0].textTwo"));
@@ -693,14 +693,14 @@ describe('components.FormComponent.Collection', function () {
693
693
  formGroupTwo = itemContainerTwo.childNodes[0];
694
694
  expect(formGroupTwo.tagName).toEqual('DIV');
695
695
  expect(formGroupTwo.classList).toContain('govuk-form-group');
696
- labelTwo = formGroupTwo.childNodes[0].childNodes[0].childNodes[0];
696
+ labelTwo = formGroupTwo.childNodes[0];
697
697
  expect(labelTwo.tagName).toEqual('LABEL');
698
698
  expect(labelTwo.classList).toContain('govuk-label');
699
699
  expect(labelTwo.textContent).toEqual("".concat(TEXT_COMPONENT.label, " (optional)"));
700
700
  expect(labelTwo.getAttribute('for')).toEqual("".concat(ID, "[1].").concat(TEXT_ID));
701
- hintTwo = formGroupTwo.childNodes[0].childNodes[1];
701
+ hintTwo = formGroupTwo.childNodes[1];
702
702
  expect(hintTwo.tagName).toEqual(undefined);
703
- inputTwo = formGroupTwo.childNodes[0].childNodes[2];
703
+ inputTwo = formGroupTwo.childNodes[2];
704
704
  expect(inputTwo.tagName).toEqual('INPUT');
705
705
  expect(inputTwo.classList).toContain('govuk-input');
706
706
  expect(inputTwo.id).toEqual("".concat(ID, "[1].").concat(TEXT_ID));
@@ -710,14 +710,14 @@ describe('components.FormComponent.Collection', function () {
710
710
  formGroupTwo = itemContainerTwo.childNodes[1];
711
711
  expect(formGroupTwo.tagName).toEqual('DIV');
712
712
  expect(formGroupTwo.classList).toContain('govuk-form-group');
713
- labelTwo = formGroupTwo.childNodes[0].childNodes[0].childNodes[0];
713
+ labelTwo = formGroupTwo.childNodes[0];
714
714
  expect(labelTwo.tagName).toEqual('LABEL');
715
715
  expect(labelTwo.classList).toContain('govuk-label');
716
716
  expect(labelTwo.textContent).toEqual('Text component two (optional)');
717
717
  expect(labelTwo.getAttribute('for')).toEqual("".concat(ID, "[1].textTwo"));
718
- hintTwo = formGroupTwo.childNodes[0].childNodes[1];
718
+ hintTwo = formGroupTwo.childNodes[1];
719
719
  expect(hintTwo.tagName).toEqual(undefined);
720
- inputTwo = formGroupTwo.childNodes[0].childNodes[2];
720
+ inputTwo = formGroupTwo.childNodes[2];
721
721
  expect(inputTwo.tagName).toEqual('INPUT');
722
722
  expect(inputTwo.classList).toContain('govuk-input');
723
723
  expect(inputTwo.id).toEqual("".concat(ID, "[1].textTwo"));
package/dist/components/FormComponent/Container.test.js CHANGED
@@ -63,16 +63,16 @@ describe('components.FormComponent.Container', function () {
63
63
  formGroup = c.childNodes[0];
64
64
  expect(formGroup.tagName).toEqual('DIV');
65
65
  expect(formGroup.classList).toContain('govuk-form-group');
66
- label = formGroup.childNodes[0].childNodes[0].childNodes[0];
66
+ label = formGroup.childNodes[0];
67
67
  expect(label.tagName).toEqual('LABEL');
68
68
  expect(label.classList).toContain('govuk-label');
69
69
  expect(label.textContent).toEqual("".concat(TEXT_COMPONENT.label, " (optional)"));
70
70
  expect(label.getAttribute('for')).toEqual("".concat(ID, ".").concat(TEXT_ID));
71
- hint = formGroup.childNodes[0].childNodes[1];
71
+ hint = formGroup.childNodes[1];
72
72
  expect(hint.tagName).toEqual('DIV');
73
73
  expect(hint.classList).toContain('govuk-hint');
74
74
  expect(hint.textContent).toEqual(TEXT_COMPONENT.hint);
75
- input = formGroup.childNodes[0].childNodes[2];
75
+ input = formGroup.childNodes[2];
76
76
  expect(input.tagName).toEqual('INPUT');
77
77
  expect(input.classList).toContain('govuk-input');
78
78
  expect(input.id).toEqual("".concat(ID, ".").concat(TEXT_ID));
@@ -117,16 +117,16 @@ describe('components.FormComponent.Container', function () {
117
117
  formGroup = nested.childNodes[0];
118
118
  expect(formGroup.tagName).toEqual('DIV');
119
119
  expect(formGroup.classList).toContain('govuk-form-group');
120
- label = formGroup.childNodes[0].childNodes[0].childNodes[0];
120
+ label = formGroup.childNodes[0];
121
121
  expect(label.tagName).toEqual('LABEL');
122
122
  expect(label.classList).toContain('govuk-label');
123
123
  expect(label.textContent).toEqual("".concat(TEXT_COMPONENT.label, " (optional)"));
124
124
  expect(label.getAttribute('for')).toEqual("".concat(ID, ".").concat(NESTED_ID, ".").concat(TEXT_ID));
125
- hint = formGroup.childNodes[0].childNodes[1];
125
+ hint = formGroup.childNodes[1];
126
126
  expect(hint.tagName).toEqual('DIV');
127
127
  expect(hint.classList).toContain('govuk-hint');
128
128
  expect(hint.textContent).toEqual(TEXT_COMPONENT.hint);
129
- input = formGroup.childNodes[0].childNodes[2];
129
+ input = formGroup.childNodes[2];
130
130
  expect(input.tagName).toEqual('INPUT');
131
131
  expect(input.classList).toContain('govuk-input');
132
132
  expect(input.id).toEqual("".concat(ID, ".").concat(NESTED_ID, ".").concat(TEXT_ID));
@@ -165,7 +165,7 @@ describe('components.FormComponent.Container', function () {
165
165
  })), container = _renderWithValidation3.container; // Get hold of the text input.
166
166
  c = container.childNodes[0];
167
167
  formGroup = c.childNodes[0];
168
- input = formGroup.childNodes[0].childNodes[2];
168
+ input = formGroup.childNodes[2];
169
169
  NEW_TEXT_VALUE = 'bravo';
170
170
  EVENT = {
171
171
  target: {
@@ -220,7 +220,7 @@ describe('components.FormComponent.Container', function () {
220
220
  })), container = _renderWithValidation4.container; // Get hold of the text input.
221
221
  c = container.childNodes[0];
222
222
  formGroup = c.childNodes[0];
223
- input = formGroup.childNodes[0].childNodes[2].childNodes[0];
223
+ input = formGroup.childNodes[2].childNodes[0];
224
224
  FILE_EXTENSION = 'json';
225
225
  FILE_NAME = "test.".concat(FILE_EXTENSION);
226
226
  FILE_TYPE = 'application/JSON';
@@ -274,16 +274,16 @@ describe('components.FormComponent.Container', function () {
274
274
  formGroup = c.childNodes[0];
275
275
  expect(formGroup.tagName).toEqual('DIV');
276
276
  expect(formGroup.classList).toContain('govuk-form-group');
277
- label = formGroup.childNodes[0].childNodes[0].childNodes[0];
277
+ label = formGroup.childNodes[0];
278
278
  expect(label.tagName).toEqual('LABEL');
279
279
  expect(label.classList).toContain('govuk-label');
280
280
  expect(label.textContent).toEqual("".concat(TEXT_COMPONENT.label, " (optional)"));
281
281
  expect(label.getAttribute('for')).toEqual("".concat(ID, ".").concat(TEXT_ID));
282
- hint = formGroup.childNodes[0].childNodes[1];
282
+ hint = formGroup.childNodes[1];
283
283
  expect(hint.tagName).toEqual('DIV');
284
284
  expect(hint.classList).toContain('govuk-hint');
285
285
  expect(hint.textContent).toEqual(TEXT_COMPONENT.hint);
286
- input = formGroup.childNodes[0].childNodes[2];
286
+ input = formGroup.childNodes[2];
287
287
  expect(input.tagName).toEqual('INPUT');
288
288
  expect(input.classList).toContain('govuk-input');
289
289
  expect(input.id).toEqual("".concat(ID, ".").concat(TEXT_ID));
@@ -347,16 +347,16 @@ describe('components.FormComponent.Container', function () {
347
347
  formGroup = c.childNodes[0];
348
348
  expect(formGroup.tagName).toEqual('DIV');
349
349
  expect(formGroup.classList).toContain('govuk-form-group');
350
- label = formGroup.childNodes[0].childNodes[0].childNodes[0];
350
+ label = formGroup.childNodes[0];
351
351
  expect(label.tagName).toEqual('LABEL');
352
352
  expect(label.classList).toContain('govuk-label');
353
353
  expect(label.textContent).toEqual("".concat(TEXT_COMPONENT.label, " (optional)"));
354
354
  expect(label.getAttribute('for')).toEqual("".concat(ID, ".").concat(TEXT_ID));
355
- hint = formGroup.childNodes[0].childNodes[1];
355
+ hint = formGroup.childNodes[1];
356
356
  expect(hint.tagName).toEqual('DIV');
357
357
  expect(hint.classList).toContain('govuk-hint');
358
358
  expect(hint.textContent).toEqual(TEXT_COMPONENT.hint);
359
- input = formGroup.childNodes[0].childNodes[2];
359
+ input = formGroup.childNodes[2];
360
360
  expect(input.tagName).toEqual('DIV'); // Now readonly, so a DIV.
361
361
  expect(input.classList).toContain('hods-readonly'); // Now readonly, so hods-readonly
362
362
  expect(input.id).toEqual("".concat(ID, ".").concat(TEXT_ID));
package/dist/components/FormComponent/FormComponent.js CHANGED
@@ -118,6 +118,7 @@ var FormComponent = function FormComponent(_ref) {
118
118
  return _utils.default.Component.get(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, attrs), component), {}, {
119
119
  id: component.full_path || component.id
120
120
  }, (0, _helpers.getComponentError)(component, validation === null || validation === void 0 ? void 0 : validation.errors)), {}, {
121
+ fieldset: (0, _helpers.getComponentFieldSet)(component),
121
122
  disabled: (0, _helpers.getComponentDisabled)(component.disabled, formData),
122
123
  label: _utils.default.interpolateString(component.label, formData),
123
124
  content: _utils.default.interpolateString(component.content, formData),
package/dist/components/FormComponent/FormComponent.test.js CHANGED
@@ -34,16 +34,16 @@ describe('components', function () {
34
34
  formGroup = container.childNodes[0];
35
35
  expect(formGroup.tagName).toEqual('DIV');
36
36
  expect(formGroup.classList).toContain('govuk-form-group');
37
- label = formGroup.childNodes[0].childNodes[0].childNodes[0];
37
+ label = formGroup.childNodes[0];
38
38
  expect(label.tagName).toEqual('LABEL');
39
39
  expect(label.classList).toContain('govuk-label');
40
40
  expect(label.textContent).toEqual("".concat(COMPONENT.label, " (optional)"));
41
41
  expect(label.getAttribute('for')).toEqual(ID);
42
- hint = formGroup.childNodes[0].childNodes[1];
42
+ hint = formGroup.childNodes[1];
43
43
  expect(hint.tagName).toEqual('DIV');
44
44
  expect(hint.classList).toContain('govuk-hint');
45
45
  expect(hint.textContent).toEqual(COMPONENT.hint);
46
- input = formGroup.childNodes[0].childNodes[2];
46
+ input = formGroup.childNodes[2];
47
47
  expect(input.tagName).toEqual('INPUT');
48
48
  expect(input.classList).toContain('govuk-input');
49
49
  expect(input.id).toEqual(ID);
@@ -202,16 +202,16 @@ describe('components', function () {
202
202
  formGroup = container.childNodes[0];
203
203
  expect(formGroup.tagName).toEqual('DIV');
204
204
  expect(formGroup.classList).toContain('govuk-form-group');
205
- label = formGroup.childNodes[0].childNodes[0].childNodes[0];
205
+ label = formGroup.childNodes[0];
206
206
  expect(label.tagName).toEqual('LABEL');
207
207
  expect(label.classList).toContain('govuk-label');
208
208
  expect(label.textContent).toEqual('Interpolated Text component (optional)');
209
209
  expect(label.getAttribute('for')).toEqual(ID);
210
- hint = formGroup.childNodes[0].childNodes[1];
210
+ hint = formGroup.childNodes[1];
211
211
  expect(hint.tagName).toEqual('DIV');
212
212
  expect(hint.classList).toContain('govuk-hint');
213
213
  expect(hint.textContent).toEqual(COMPONENT.hint);
214
- input = formGroup.childNodes[0].childNodes[2];
214
+ input = formGroup.childNodes[2];
215
215
  expect(input.tagName).toEqual('INPUT');
216
216
  expect(input.classList).toContain('govuk-input');
217
217
  expect(input.id).toEqual(ID);
package/dist/components/FormComponent/helpers/getComponentFieldSet.js ADDED
@@ -0,0 +1,16 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ var _models = require("../../../models");
8
+ var SHOULD_HAVE_FIELDSET = [_models.ComponentTypes.RADIOS, _models.ComponentTypes.CHECKBOXES, _models.ComponentTypes.DATE];
9
+ var _default = function _default(component) {
10
+ // Check to see if this is explicitly set first, as this is efficient.
11
+ if (component.fieldset === true) {
12
+ return true;
13
+ }
14
+ return SHOULD_HAVE_FIELDSET.includes(component.type);
15
+ };
16
+ exports.default = _default;
package/dist/components/FormComponent/helpers/getComponentFieldSet.test.js ADDED
@@ -0,0 +1,29 @@
1
+ "use strict";
2
+
3
+ var _getComponentFieldSet = _interopRequireDefault(require("./getComponentFieldSet"));
4
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
5
+ describe('components.FormComponent.helpers.getComponentFieldSet', function () {
6
+ it('should return true for component type radios', function () {
7
+ expect((0, _getComponentFieldSet.default)({
8
+ type: 'radios'
9
+ })).toEqual(true);
10
+ });
11
+ it('should return true for component type checkboxes', function () {
12
+ expect((0, _getComponentFieldSet.default)({
13
+ type: 'checkboxes'
14
+ })).toEqual(true);
15
+ });
16
+ it('should return true for component type date', function () {
17
+ expect((0, _getComponentFieldSet.default)({
18
+ type: 'date'
19
+ })).toEqual(true);
20
+ });
21
+ it('should return false for component type text', function () {
22
+ expect((0, _getComponentFieldSet.default)({
23
+ type: 'text'
24
+ })).toEqual(false);
25
+ });
26
+ it('should return false when component type missing', function () {
27
+ expect((0, _getComponentFieldSet.default)({})).toEqual(false);
28
+ });
29
+ });
package/dist/components/FormComponent/helpers/index.js CHANGED
@@ -21,7 +21,14 @@ Object.defineProperty(exports, "getComponentError", {
21
21
  return _getComponentError.default;
22
22
  }
23
23
  });
24
+ Object.defineProperty(exports, "getComponentFieldSet", {
25
+ enumerable: true,
26
+ get: function get() {
27
+ return _getComponentFieldSet.default;
28
+ }
29
+ });
30
+ var _addLabel = _interopRequireDefault(require("./addLabel"));
24
31
  var _getComponentDisabled = _interopRequireDefault(require("./getComponentDisabled"));
25
32
  var _getComponentError = _interopRequireDefault(require("./getComponentError"));
26
- var _addLabel = _interopRequireDefault(require("./addLabel"));
33
+ var _getComponentFieldSet = _interopRequireDefault(require("./getComponentFieldSet"));
27
34
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
package/dist/components/FormPage/FormPage.js CHANGED
@@ -84,13 +84,12 @@ var FormPage = function FormPage(_ref) {
84
84
  }) : action;
85
85
  });
86
86
  formPage.formData = _utils.default.Operate.runPageOperations(formPage, _objectSpread(_objectSpread({}, formPage.formData), patch), onWrapperChange || onPageChange);
87
- return /*#__PURE__*/_react.default.createElement("div", {
88
- className: classes(),
89
- key: page.id
90
- }, (errors === null || errors === void 0 ? void 0 : errors.length) > 0 && /*#__PURE__*/_react.default.createElement(_copReactComponents.ErrorSummary, {
91
- errors: errors,
92
- hashLink: hashLink
93
- }), page.title && /*#__PURE__*/_react.default.createElement(_copReactComponents.LargeHeading, null, _utils.default.interpolateString(page.title, page.formData)), page.components.filter(function (c) {
87
+ var headingContent = page.title ? /*#__PURE__*/_react.default.createElement(_copReactComponents.LargeHeading, null, _utils.default.interpolateString(page.title, page.formData)) : /*#__PURE__*/_react.default.createElement(_copReactComponents.Label, {
88
+ id: page.id,
89
+ required: page.required,
90
+ hideOptionalSuffix: page.hideOptionalSuffix
91
+ }, page.label);
92
+ var formComponentContent = page.components.filter(function (c) {
94
93
  return _utils.default.Component.show(c, page.formData);
95
94
  }).map(function (component, index) {
96
95
  return /*#__PURE__*/_react.default.createElement(_FormComponent.default, {
@@ -101,7 +100,18 @@ var FormPage = function FormPage(_ref) {
101
100
  value: page.formData[component.fieldId] || patch[component.fieldId],
102
101
  formData: page.formData
103
102
  });
104
- }), /*#__PURE__*/_react.default.createElement(_PageActions.default, {
103
+ });
104
+ return /*#__PURE__*/_react.default.createElement("div", {
105
+ className: classes(),
106
+ key: page.id
107
+ }, (errors === null || errors === void 0 ? void 0 : errors.length) > 0 && /*#__PURE__*/_react.default.createElement(_copReactComponents.ErrorSummary, {
108
+ errors: errors,
109
+ hashLink: hashLink
110
+ }), page.fieldset && /*#__PURE__*/_react.default.createElement("fieldset", {
111
+ className: "govuk-fieldset"
112
+ }, /*#__PURE__*/_react.default.createElement("legend", {
113
+ className: "govuk-fieldset__legend"
114
+ }, headingContent), formComponentContent), !page.fieldset && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, headingContent, formComponentContent), /*#__PURE__*/_react.default.createElement(_PageActions.default, {
105
115
  actions: (_page$actions = page.actions) === null || _page$actions === void 0 ? void 0 : _page$actions.filter(function (action) {
106
116
  return _utils.default.Component.show(action, page.formData);
107
117
  }),
@@ -122,10 +132,15 @@ FormPage.propTypes = {
122
132
  onWrapperChange: _propTypes.default.func,
123
133
  onChange: _propTypes.default.func,
124
134
  onTopLevelChange: _propTypes.default.func,
135
+ // eslint-disable-next-line react/require-default-props
125
136
  page: _propTypes.default.shape({
126
137
  id: _propTypes.default.string.isRequired,
127
138
  title: _propTypes.default.string,
128
139
  components: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.shape({})])).isRequired,
140
+ fieldset: _propTypes.default.bool,
141
+ hideOptionalSuffix: _propTypes.default.bool,
142
+ label: _propTypes.default.string,
143
+ required: _propTypes.default.bool,
129
144
  actions: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.shape({}), _propTypes.default.string])),
130
145
  formData: _propTypes.default.shape({}).isRequired
131
146
  }).isRequired
package/dist/components/FormPage/FormPage.stories.mdx CHANGED
@@ -9,6 +9,7 @@ import Utils from '../../utils';
9
9
  import FormPage from './FormPage';
10
10
 
11
11
  <!-- JSON documents -->
12
+ import ADDRESS from '../../json/addressDetails.json'
12
13
  import CIVIL_SERVANT from '../../json/areYouACivilServant.json';
13
14
  import GRADE from '../../json/grade.json';
14
15
  import TEAMS from '../../json/team.json';
@@ -129,3 +130,26 @@ on the basis of a <Link href="/?path=/docs/f-json-page">JSON</Link> configuratio
129
130
  }}
130
131
  </Story>
131
132
  </Canvas>
133
+
134
+ ### Grouping fields together in a `<fieldset />`
135
+
136
+ Fieldset tags can be used to group related fields together in a way that makes forms more accesible for users of screen readers. This can be achieved by passing a `fieldSet` prop to the `<FormPage />` component.
137
+
138
+ <Canvas>
139
+ <Story name="With fieldSet">
140
+ {() => {
141
+ const PAGE_JSON = ADDRESS.pages.find(p => p.id === 'address-details');
142
+ const PAGE = Utils.FormPage.get(PAGE_JSON, ADDRESS.components, { ...USER_PROFILE_DATA });
143
+ const ON_ACTION = (action, patch) => {
144
+ console.log('action invoked', action, patch);
145
+ };
146
+ return (
147
+ <HooksContextProvider>
148
+ <ValidationContextProvider>
149
+ <FormPage page={PAGE} onAction={ON_ACTION} />
150
+ </ValidationContextProvider>
151
+ </HooksContextProvider>
152
+ );
153
+ }}
154
+ </Story>
155
+ </Canvas>
package/dist/components/FormPage/FormPage.test.js CHANGED
@@ -125,16 +125,16 @@ describe('components.FormPage', function () {
125
125
  var checkInputField = function checkInputField(formGroup, fieldId, lbl, hnt, val) {
126
126
  expect(formGroup.tagName).toEqual('DIV');
127
127
  expect(formGroup.classList).toContain('govuk-form-group');
128
- var label = formGroup.childNodes[0].childNodes[0].childNodes[0];
128
+ var label = formGroup.childNodes[0];
129
129
  expect(label.tagName).toEqual('LABEL');
130
130
  expect(label.classList).toContain('govuk-label');
131
131
  expect(label.textContent).toEqual(lbl);
132
132
  expect(label.getAttribute('for')).toEqual(fieldId);
133
- var hint = formGroup.childNodes[0].childNodes[1];
133
+ var hint = formGroup.childNodes[1];
134
134
  expect(hint.tagName).toEqual('DIV');
135
135
  expect(hint.classList).toContain('govuk-hint');
136
136
  expect(hint.textContent).toEqual(hnt);
137
- var input = formGroup.childNodes[0].childNodes[2];
137
+ var input = formGroup.childNodes[2];
138
138
  expect(input.tagName).toEqual('INPUT');
139
139
  expect(input.classList).toContain('govuk-input');
140
140
  expect(input.id).toEqual(fieldId);
@@ -144,16 +144,16 @@ describe('components.FormPage', function () {
144
144
  var checkAutoCompleteField = function checkAutoCompleteField(formGroup, fieldId, lbl, hnt, val) {
145
145
  expect(formGroup.tagName).toEqual('DIV');
146
146
  expect(formGroup.classList).toContain('govuk-form-group');
147
- var label = formGroup.childNodes[0].childNodes[0].childNodes[0];
147
+ var label = formGroup.childNodes[0];
148
148
  expect(label.tagName).toEqual('LABEL');
149
149
  expect(label.classList).toContain('govuk-label');
150
150
  expect(label.textContent).toEqual(lbl);
151
151
  expect(label.getAttribute('for')).toEqual(fieldId);
152
- var hint = formGroup.childNodes[0].childNodes[1];
152
+ var hint = formGroup.childNodes[1];
153
153
  expect(hint.tagName).toEqual('DIV');
154
154
  expect(hint.classList).toContain('govuk-hint');
155
155
  expect(hint.textContent).toEqual(hnt);
156
- var outerWrapper = formGroup.childNodes[0].childNodes[2];
156
+ var outerWrapper = formGroup.childNodes[2];
157
157
  expect(outerWrapper.classList).toContain('hods-autocomplete__outer-wrapper');
158
158
  var autocomplete = outerWrapper.childNodes[0];
159
159
  expect(autocomplete.classList).toContain('hods-autocomplete__wrapper');
@@ -254,7 +254,7 @@ describe('components.FormPage', function () {
254
254
  expect(page.tagName).toEqual('DIV');
255
255
 
256
256
  // Change the input.
257
- input = page.childNodes[1].childNodes[0].childNodes[2];
257
+ input = page.childNodes[1].childNodes[2];
258
258
  NEW_VALUE = "".concat(VALUE, ".");
259
259
  EVENT = {
260
260
  target: {
@@ -282,7 +282,7 @@ describe('components.FormPage', function () {
282
282
  onAction: ON_ACTION
283
283
  })), container = _renderWithValidation4.container;
284
284
  page = container.childNodes[0]; // Change the input.
285
- input = page.childNodes[1].childNodes[0].childNodes[2];
285
+ input = page.childNodes[1].childNodes[2];
286
286
  NEW_VALUE = "".concat(VALUE, ".");
287
287
  CHANGE_EVENT = {
288
288
  target: {
package/dist/components/FormRenderer/FormRenderer.test.js CHANGED
@@ -606,19 +606,19 @@ describe('components', function () {
606
606
  // Fill first page and navigate
607
607
  newPage = container.childNodes[0].childNodes[0];
608
608
  expect(newPage.childNodes[0].textContent).toEqual('Event Date');
609
- _react.fireEvent.change(newPage.childNodes[1].childNodes[0].childNodes[2].childNodes[0].childNodes[0].childNodes[1], {
609
+ _react.fireEvent.change(newPage.childNodes[1].childNodes[0].childNodes[2].childNodes[0].childNodes[1], {
610
610
  target: {
611
611
  name: 'date-day',
612
612
  value: '7'
613
613
  }
614
614
  });
615
- _react.fireEvent.change(newPage.childNodes[1].childNodes[0].childNodes[2].childNodes[1].childNodes[0].childNodes[1], {
615
+ _react.fireEvent.change(newPage.childNodes[1].childNodes[0].childNodes[2].childNodes[1].childNodes[1], {
616
616
  target: {
617
617
  name: 'date-month',
618
618
  value: '7'
619
619
  }
620
620
  });
621
- _react.fireEvent.change(newPage.childNodes[1].childNodes[0].childNodes[2].childNodes[2].childNodes[0].childNodes[1], {
621
+ _react.fireEvent.change(newPage.childNodes[1].childNodes[0].childNodes[2].childNodes[2].childNodes[1], {
622
622
  target: {
623
623
  name: 'date-year',
624
624
  value: '2022'
@@ -711,19 +711,19 @@ describe('components', function () {
711
711
 
712
712
  // Fill first page and navigate
713
713
  newPage = container.childNodes[0].childNodes[0];
714
- _react.fireEvent.change(newPage.childNodes[1].childNodes[0].childNodes[2].childNodes[0].childNodes[0].childNodes[1], {
714
+ _react.fireEvent.change(newPage.childNodes[1].childNodes[0].childNodes[2].childNodes[0].childNodes[1], {
715
715
  target: {
716
716
  name: 'date-day',
717
717
  value: '7'
718
718
  }
719
719
  });
720
- _react.fireEvent.change(newPage.childNodes[1].childNodes[0].childNodes[2].childNodes[1].childNodes[0].childNodes[1], {
720
+ _react.fireEvent.change(newPage.childNodes[1].childNodes[0].childNodes[2].childNodes[1].childNodes[1], {
721
721
  target: {
722
722
  name: 'date-month',
723
723
  value: '7'
724
724
  }
725
725
  });
726
- _react.fireEvent.change(newPage.childNodes[1].childNodes[0].childNodes[2].childNodes[2].childNodes[0].childNodes[1], {
726
+ _react.fireEvent.change(newPage.childNodes[1].childNodes[0].childNodes[2].childNodes[2].childNodes[1], {
727
727
  target: {
728
728
  name: 'date-year',
729
729
  value: '2022'
@@ -837,19 +837,19 @@ describe('components', function () {
837
837
 
838
838
  // Fill first page and navigate
839
839
  newPage = container.childNodes[0].childNodes[0];
840
- _react.fireEvent.change(newPage.childNodes[1].childNodes[0].childNodes[2].childNodes[0].childNodes[0].childNodes[1], {
840
+ _react.fireEvent.change(newPage.childNodes[1].childNodes[0].childNodes[2].childNodes[0].childNodes[1], {
841
841
  target: {
842
842
  name: 'date-day',
843
843
  value: '7'
844
844
  }
845
845
  });
846
- _react.fireEvent.change(newPage.childNodes[1].childNodes[0].childNodes[2].childNodes[1].childNodes[0].childNodes[1], {
846
+ _react.fireEvent.change(newPage.childNodes[1].childNodes[0].childNodes[2].childNodes[1].childNodes[1], {
847
847
  target: {
848
848
  name: 'date-month',
849
849
  value: '7'
850
850
  }
851
851
  });
852
- _react.fireEvent.change(newPage.childNodes[1].childNodes[0].childNodes[2].childNodes[2].childNodes[0].childNodes[1], {
852
+ _react.fireEvent.change(newPage.childNodes[1].childNodes[0].childNodes[2].childNodes[2].childNodes[1], {
853
853
  target: {
854
854
  name: 'date-year',
855
855
  value: '2022'
package/dist/json/addressDetails.json ADDED
@@ -0,0 +1,149 @@
1
+ {
2
+ "cya": {
3
+ "actions": [
4
+ {
5
+ "type": "submit",
6
+ "label": "Submit",
7
+ "validate": true
8
+ }
9
+ ]
10
+ },
11
+ "name": "address-details",
12
+ "type": "cya",
13
+ "pages": [
14
+ {
15
+ "id": "address-details",
16
+ "name": "UK address4",
17
+ "title": "Enter UK address",
18
+ "groups": [
19
+ {
20
+ "id": "address",
21
+ "label": "UK address",
22
+ "required": false,
23
+ "components": [
24
+ "firstLineOfTheAddress",
25
+ "town",
26
+ "city",
27
+ "postCode"
28
+ ]
29
+ }
30
+ ],
31
+ "actions": [
32
+ "saveAndContinue",
33
+ "saveAndReturn"
34
+ ],
35
+ "fieldId": "UK address2",
36
+ "cya_link": {
37
+ "url": "/address-details",
38
+ "aria_suffix": "address details"
39
+ },
40
+ "fieldset": true,
41
+ "components": [
42
+ {
43
+ "use": "addressDetails",
44
+ "label": "Address"
45
+ }
46
+ ],
47
+ "groupLabel": "UK address1"
48
+ }
49
+ ],
50
+ "title": "Address Details",
51
+ "components": [
52
+ {
53
+ "id": "firstName",
54
+ "type": "text",
55
+ "label": "First name",
56
+ "fieldId": "firstName",
57
+ "required": true
58
+ },
59
+ {
60
+ "id": "surname",
61
+ "type": "text",
62
+ "label": "Last name",
63
+ "fieldId": "surname",
64
+ "required": true
65
+ },
66
+ {
67
+ "id": "age",
68
+ "type": "text",
69
+ "label": "Your age",
70
+ "fieldId": "age",
71
+ "required": true
72
+ },
73
+ {
74
+ "id": "addressDetails",
75
+ "type": "container",
76
+ "fieldId": "addressDetails",
77
+ "components": [
78
+ {
79
+ "id": "firstLineOfTheAddress",
80
+ "type": "text",
81
+ "label": "Address",
82
+ "source": {
83
+ "field": "addressDetails.firstLineOfTheAddress"
84
+ },
85
+ "fieldId": "firstLineOfTheAddress",
86
+ "groupId": "addressDetails",
87
+ "required": false,
88
+ "custom_errors": [
89
+ {
90
+ "type": "required",
91
+ "message": "Please enter first line of the the address"
92
+ }
93
+ ]
94
+ },
95
+ {
96
+ "id": "city",
97
+ "type": "text",
98
+ "label": "City",
99
+ "source": {
100
+ "field": "addressDetails.city"
101
+ },
102
+ "fieldId": "city",
103
+ "groupId": "addressDetails",
104
+ "required": false,
105
+ "custom_errors": [
106
+ {
107
+ "type": "required",
108
+ "message": "Please enter city"
109
+ }
110
+ ]
111
+ },
112
+ {
113
+ "id": "town",
114
+ "type": "text",
115
+ "label": "Town",
116
+ "source": {
117
+ "field": "addressDetails.town"
118
+ },
119
+ "fieldId": "town",
120
+ "required": false,
121
+ "custom_errors": [
122
+ {
123
+ "type": "required",
124
+ "message": "Please enter Town"
125
+ }
126
+ ]
127
+ },
128
+ {
129
+ "id": "postCode",
130
+ "type": "text",
131
+ "label": "Postcode",
132
+ "source": {
133
+ "field": "addressDetails.postCode"
134
+ },
135
+ "fieldId": "postCode",
136
+ "groupId": "addressDetails",
137
+ "required": false,
138
+ "custom_errors": [
139
+ {
140
+ "type": "required",
141
+ "message": "Please enter postcode"
142
+ }
143
+ ]
144
+ }
145
+ ]
146
+ }
147
+ ],
148
+ "version": "Version1"
149
+ }
package/dist/utils/Component/getComponentTests/getComponent.autocomplete.test.js CHANGED
@@ -33,12 +33,11 @@ describe('utils.Component.get', function () {
33
33
  var autocompleteWrapper;
34
34
  var autocomplete;
35
35
  var autocompleteInput;
36
- var fieldSet = formGroup.childNodes[0];
37
- fieldSet.childNodes.forEach(function (node) {
36
+ formGroup.childNodes.forEach(function (node) {
38
37
  // Check if it's an element.
39
38
  if (node instanceof Element) {
40
- if (node.tagName === 'LEGEND') {
41
- label = node.childNodes[0];
39
+ if (node.tagName === 'LABEL') {
40
+ label = node;
42
41
  } else if (node.classList.contains('hods-autocomplete__outer-wrapper')) {
43
42
  autocompleteWrapper = node;
44
43
  var autocompleteInner = node.childNodes[0];
package/dist/utils/Component/getComponentTests/getComponent.calculation.test.js CHANGED
@@ -141,7 +141,7 @@ describe('utils.Component.get', function () {
141
141
  _getAllByTestId = (0, _react.getAllByTestId)(container, ID), _getAllByTestId2 = _slicedToArray(_getAllByTestId, 2), formGroup = _getAllByTestId2[0], input = _getAllByTestId2[1];
142
142
  expect(formGroup.tagName).toEqual('DIV');
143
143
  expect(formGroup.classList).toContain('govuk-form-group');
144
- label = formGroup.childNodes[0].childNodes[0].childNodes[0];
144
+ label = formGroup.childNodes[0];
145
145
  expect(label.tagName).toEqual('LABEL');
146
146
  expect(label.classList).toContain('govuk-label');
147
147
  expect(label.textContent).toContain(LABEL);
@@ -251,7 +251,7 @@ describe('utils.Component.get', function () {
251
251
  input = _getAllByTestId4[1];
252
252
  expect(formGroup.tagName).toEqual('DIV');
253
253
  expect(formGroup.classList).toContain('govuk-form-group');
254
- var label = formGroup.childNodes[0].childNodes[0].childNodes[0];
254
+ var label = formGroup.childNodes[0];
255
255
  expect(label.tagName).toEqual('LABEL');
256
256
  expect(label.classList).toContain('govuk-label');
257
257
  expect(label.textContent).toContain(LABEL);
package/dist/utils/Component/getComponentTests/getComponent.checkboxes.test.js CHANGED
@@ -46,13 +46,12 @@ describe('utils.Component.get', function () {
46
46
  checkboxes = _getAllByTestId2[1];
47
47
  expect(formGroup.tagName).toEqual('DIV');
48
48
  expect(formGroup.classList).toContain('govuk-form-group');
49
- var fieldSet = formGroup.childNodes[0];
50
49
  var label;
51
- fieldSet.childNodes.forEach(function (node) {
50
+ formGroup.childNodes.forEach(function (node) {
52
51
  // Check if it's an element.
53
52
  if (node instanceof Element) {
54
- if (node.tagName === 'LEGEND') {
55
- label = node.childNodes[0];
53
+ if (node.tagName === 'LABEL') {
54
+ label = node;
56
55
  }
57
56
  }
58
57
  });
@@ -142,13 +141,12 @@ describe('utils.Component.get', function () {
142
141
  checkboxes = _getAllByTestId4[1];
143
142
  expect(formGroup.tagName).toEqual('DIV');
144
143
  expect(formGroup.classList).toContain('govuk-form-group');
145
- var fieldSet = formGroup.childNodes[0];
146
144
  var label;
147
- fieldSet.childNodes.forEach(function (node) {
145
+ formGroup.childNodes.forEach(function (node) {
148
146
  // Check if it's an element.
149
147
  if (node instanceof Element) {
150
- if (node.tagName === 'LEGEND') {
151
- label = node.childNodes[0];
148
+ if (node.tagName === 'LABEL') {
149
+ label = node;
152
150
  }
153
151
  }
154
152
  });
package/dist/utils/Component/getComponentTests/getComponent.date.test.js CHANGED
@@ -35,7 +35,7 @@ describe('utils.Component.get', function () {
35
35
  dateinput = _getAllByTestId2[1];
36
36
  expect(formGroup.tagName).toEqual('DIV');
37
37
  expect(formGroup.classList).toContain('govuk-form-group');
38
- var label = formGroup.childNodes[0].childNodes[0].childNodes[0];
38
+ var label = formGroup.childNodes[0];
39
39
  expect(label.innerHTML).toContain(LABEL);
40
40
  expect(label.getAttribute('for')).toEqual(ID);
41
41
  expect(dateinput.tagName).toEqual('DIV');
@@ -44,31 +44,31 @@ describe('utils.Component.get', function () {
44
44
  var dayitem = dateinput.childNodes[0];
45
45
  expect(dayitem.tagName).toEqual('DIV');
46
46
  expect(dayitem.classList).toContain('govuk-date-input__item');
47
- var daylabel = dayitem.childNodes[0].childNodes[0].childNodes[0];
47
+ var daylabel = dayitem.childNodes[0];
48
48
  expect(daylabel.tagName).toEqual('LABEL');
49
49
  expect(daylabel.classList).toContain('govuk-label');
50
50
  expect(daylabel.textContent).toEqual('Day');
51
- var dayinput = dayitem.childNodes[0].childNodes[1];
51
+ var dayinput = dayitem.childNodes[1];
52
52
  expect(dayinput.tagName).toEqual('INPUT');
53
53
  expect(dayinput.id).toEqual("".concat(ID, "-day"));
54
54
  var monthitem = dateinput.childNodes[1];
55
55
  expect(monthitem.tagName).toEqual('DIV');
56
56
  expect(monthitem.classList).toContain('govuk-date-input__item');
57
- var monthlabel = monthitem.childNodes[0].childNodes[0].childNodes[0];
57
+ var monthlabel = monthitem.childNodes[0];
58
58
  expect(monthlabel.tagName).toEqual('LABEL');
59
59
  expect(monthlabel.classList).toContain('govuk-label');
60
60
  expect(monthlabel.textContent).toEqual('Month');
61
- var monthinput = monthitem.childNodes[0].childNodes[1];
61
+ var monthinput = monthitem.childNodes[1];
62
62
  expect(monthinput.tagName).toEqual('INPUT');
63
63
  expect(monthinput.id).toEqual("".concat(ID, "-month"));
64
64
  var yearitem = dateinput.childNodes[2];
65
65
  expect(yearitem.tagName).toEqual('DIV');
66
66
  expect(yearitem.classList).toContain('govuk-date-input__item');
67
- var yearlabel = yearitem.childNodes[0].childNodes[0].childNodes[0];
67
+ var yearlabel = yearitem.childNodes[0];
68
68
  expect(yearlabel.tagName).toEqual('LABEL');
69
69
  expect(yearlabel.classList).toContain('govuk-label');
70
70
  expect(yearlabel.textContent).toEqual('Year');
71
- var yearinput = yearitem.childNodes[0].childNodes[1];
71
+ var yearinput = yearitem.childNodes[1];
72
72
  expect(yearinput.tagName).toEqual('INPUT');
73
73
  expect(yearinput.id).toEqual("".concat(ID, "-year"));
74
74
 
package/dist/utils/Component/getComponentTests/getComponent.email.test.js CHANGED
@@ -36,10 +36,10 @@ describe('utils.Component.get', function () {
36
36
  expect(formGroup.tagName).toEqual('DIV');
37
37
  expect(formGroup.classList).toContain('govuk-form-group');
38
38
  var label;
39
- formGroup.childNodes[0].childNodes.forEach(function (node) {
39
+ formGroup.childNodes.forEach(function (node) {
40
40
  // Check if it's an element.
41
- if (node instanceof Element && node.tagName === 'LEGEND') {
42
- label = node.childNodes[0];
41
+ if (node instanceof Element && node.tagName === 'LABEL') {
42
+ label = node;
43
43
  }
44
44
  });
45
45
  expect(label).toBeDefined();
package/dist/utils/Component/getComponentTests/getComponent.file.test.js CHANGED
@@ -37,10 +37,10 @@ describe('utils.Component.get', function () {
37
37
  expect(formGroup.tagName).toEqual('DIV');
38
38
  expect(formGroup.classList).toContain('govuk-form-group');
39
39
  var label;
40
- formGroup.childNodes[0].childNodes.forEach(function (node) {
40
+ formGroup.childNodes.forEach(function (node) {
41
41
  // Check if it's an element.
42
- if (node instanceof Element && node.tagName === 'LEGEND') {
43
- label = node.childNodes[0];
42
+ if (node instanceof Element && node.tagName === 'LABEL') {
43
+ label = node;
44
44
  }
45
45
  });
46
46
  expect(label).toBeDefined();
package/dist/utils/Component/getComponentTests/getComponent.multifile.test.js CHANGED
@@ -40,10 +40,10 @@ describe('utils.Component.get', function () {
40
40
  expect(wrapper.id).toEqual(ID);
41
41
  var input = wrapper.children[1].children[0];
42
42
  var label;
43
- formGroup.childNodes[0].childNodes.forEach(function (node) {
43
+ formGroup.childNodes.forEach(function (node) {
44
44
  // Check if it's an element.
45
- if (node instanceof Element && node.tagName === 'LEGEND') {
46
- label = node.childNodes[0];
45
+ if (node instanceof Element && node.tagName === 'LABEL') {
46
+ label = node;
47
47
  }
48
48
  });
49
49
  expect(label).toBeDefined();
package/dist/utils/Component/getComponentTests/getComponent.nested.test.js CHANGED
@@ -42,12 +42,12 @@ describe('utils.Component.get', function () {
42
42
  }];
43
43
  _renderWithValidation = (0, _setupTests.renderWithValidation)((0, _getComponent.getChildrenJsx)(PARENT_CONFIG, NESTED_CONFIG)), container = _renderWithValidation.container;
44
44
  child = container.childNodes[0];
45
- expect(child.childNodes[0].childNodes.length).toEqual(3);
45
+ expect(child.childNodes[0].childNodes.length).toEqual(2);
46
46
  expect(child.classList).toContain('govuk-form-group');
47
47
  label = child.childNodes[0];
48
48
  expect(label).toBeDefined();
49
49
  expect(label.innerHTML).toContain(LABEL);
50
- input = child.childNodes[0].childNodes[2];
50
+ input = child.childNodes[2];
51
51
  expect(input.tagName).toEqual('INPUT');
52
52
  expect(input.classList).toContain('govuk-input');
53
53
  expect(input.id).toEqual(ID);
@@ -62,9 +62,9 @@ describe('utils.Component.get', function () {
62
62
  expect(input2.tagName).toEqual('DIV');
63
63
  expect(input2.classList).toContain('govuk-date-input');
64
64
  expect(input2.id).toEqual(ID2);
65
- expect(input2.childNodes[0].childNodes[0].childNodes[1].value).toEqual('1');
66
- expect(input2.childNodes[1].childNodes[0].childNodes[1].value).toEqual('2');
67
- expect(input2.childNodes[2].childNodes[0].childNodes[1].value).toEqual('2022');
65
+ expect(input2.childNodes[0].childNodes[1].value).toEqual('1');
66
+ expect(input2.childNodes[1].childNodes[1].value).toEqual('2');
67
+ expect(input2.childNodes[2].childNodes[1].value).toEqual('2022');
68
68
  case 35:
69
69
  case "end":
70
70
  return _context.stop();
@@ -124,12 +124,12 @@ describe('utils.Component.get', function () {
124
124
  }];
125
125
  _renderWithValidation2 = (0, _setupTests.renderWithValidation)((0, _getComponent.getChildrenJsx)(PARENT_CONFIG, NESTED_CONFIG)), container = _renderWithValidation2.container;
126
126
  child = container.childNodes[0];
127
- expect(child.childNodes[0].childNodes.length).toEqual(3);
127
+ expect(child.childNodes[0].childNodes.length).toEqual(2);
128
128
  expect(child.classList).toContain('govuk-form-group');
129
129
  label = child.childNodes[0];
130
130
  expect(label).toBeDefined();
131
131
  expect(label.innerHTML).toContain(LABEL);
132
- input = child.childNodes[0].childNodes[2];
132
+ input = child.childNodes[2];
133
133
  expect(input.tagName).toEqual('INPUT');
134
134
  expect(input.classList).toContain('govuk-input');
135
135
  expect(input.id).toEqual("".concat(CONTAINER_ID, ".").concat(FIELD_ID));
@@ -163,12 +163,12 @@ describe('utils.Component.get', function () {
163
163
  }];
164
164
  _renderWithValidation3 = (0, _setupTests.renderWithValidation)((0, _getComponent.getChildrenJsx)(PARENT_CONFIG, NESTED_CONFIG)), container = _renderWithValidation3.container;
165
165
  child = container.childNodes[0];
166
- expect(child.childNodes[0].childNodes.length).toEqual(3);
166
+ expect(child.childNodes[0].childNodes.length).toEqual(2);
167
167
  expect(child.classList).toContain('govuk-form-group');
168
168
  label = child.childNodes[0];
169
169
  expect(label).toBeDefined();
170
170
  expect(label.innerHTML).toContain(LABEL);
171
- input = child.childNodes[0].childNodes[2];
171
+ input = child.childNodes[2];
172
172
  expect(input.tagName).toEqual('INPUT');
173
173
  expect(input.classList).toContain('govuk-input');
174
174
  expect(input.id).toEqual("".concat(COLLECTION_ID, "[0].").concat(FIELD_ID));
package/dist/utils/Component/getComponentTests/getComponent.phoneNumber.test.js CHANGED
@@ -36,10 +36,10 @@ describe('utils.Component.get', function () {
36
36
  expect(formGroup.tagName).toEqual('DIV');
37
37
  expect(formGroup.classList).toContain('govuk-form-group');
38
38
  var label;
39
- formGroup.childNodes[0].childNodes.forEach(function (node) {
39
+ formGroup.childNodes.forEach(function (node) {
40
40
  // Check if it's an element.
41
- if (node instanceof Element && node.tagName === 'LEGEND') {
42
- label = node.childNodes[0];
41
+ if (node instanceof Element && node.tagName === 'LABEL') {
42
+ label = node;
43
43
  }
44
44
  });
45
45
  expect(label).toBeDefined();
package/dist/utils/Component/getComponentTests/getComponent.radios.test.js CHANGED
@@ -47,11 +47,11 @@ describe('utils.Component.get', function () {
47
47
  expect(formGroup.tagName).toEqual('DIV');
48
48
  expect(formGroup.classList).toContain('govuk-form-group');
49
49
  var label;
50
- formGroup.childNodes[0].childNodes.forEach(function (node) {
50
+ formGroup.childNodes.forEach(function (node) {
51
51
  // Check if it's an element.
52
52
  if (node instanceof Element) {
53
- if (node.tagName === 'LEGEND') {
54
- label = node.childNodes[0];
53
+ if (node.tagName === 'LABEL') {
54
+ label = node;
55
55
  }
56
56
  }
57
57
  });
package/dist/utils/Component/getComponentTests/getComponent.select.test.js CHANGED
@@ -43,7 +43,7 @@ describe('utils.Component.get', function () {
43
43
  select = _getAllByTestId2[1];
44
44
  expect(formGroup.tagName).toEqual('DIV');
45
45
  expect(formGroup.classList).toContain('govuk-form-group');
46
- var label = formGroup.childNodes[0].childNodes[0].childNodes[0];
46
+ var label = formGroup.childNodes[0];
47
47
  expect(label).toBeDefined();
48
48
  expect(label.innerHTML).toContain(LABEL);
49
49
  expect(label.getAttribute('for')).toEqual(ID);
package/dist/utils/Component/getComponentTests/getComponent.text.test.js CHANGED
@@ -36,10 +36,10 @@ describe('utils.Component.get', function () {
36
36
  expect(formGroup.tagName).toEqual('DIV');
37
37
  expect(formGroup.classList).toContain('govuk-form-group');
38
38
  var label;
39
- formGroup.childNodes[0].childNodes.forEach(function (node) {
39
+ formGroup.childNodes.forEach(function (node) {
40
40
  // Check if it's an element.
41
- if (node instanceof Element && node.tagName === 'LEGEND') {
42
- label = node.childNodes[0];
41
+ if (node instanceof Element && node.tagName === 'LABEL') {
42
+ label = node;
43
43
  }
44
44
  });
45
45
  expect(label).toBeDefined();
package/dist/utils/Component/getComponentTests/getComponent.textArea.test.js CHANGED
@@ -37,7 +37,7 @@ describe('utils.Component.get', function () {
37
37
  textarea = _getAllByTestId2[1];
38
38
  expect(formGroup.tagName).toEqual('DIV');
39
39
  expect(formGroup.classList).toContain('govuk-form-group');
40
- var label = formGroup.childNodes[0].childNodes[0].childNodes[0];
40
+ var label = formGroup.childNodes[0];
41
41
  expect(label.innerHTML).toContain(LABEL);
42
42
  expect(label.getAttribute('for')).toEqual(ID);
43
43
  expect(textarea.tagName).toEqual('TEXTAREA');
@@ -83,7 +83,7 @@ describe('utils.Component.get', function () {
83
83
  textarea = _getAllByTestId4[1];
84
84
  expect(formGroup.tagName).toEqual('DIV');
85
85
  expect(formGroup.classList).toContain('govuk-form-group');
86
- var label = formGroup.childNodes[0].childNodes[0].childNodes[0];
86
+ var label = formGroup.childNodes[0];
87
87
  expect(label.innerHTML).toContain(LABEL);
88
88
  expect(label.getAttribute('for')).toEqual(ID);
89
89
  expect(textarea.tagName).toEqual('TEXTAREA');
@@ -101,7 +101,7 @@ describe('utils.Component.get', function () {
101
101
  name: FIELD_ID,
102
102
  value: 'Some text'
103
103
  });
104
- var characterCount = formGroup.childNodes[0].childNodes[2];
104
+ var characterCount = formGroup.childNodes[2];
105
105
  expect(characterCount.tagName).toEqual('DIV');
106
106
  expect(characterCount.classList).toContain('govuk-hint');
107
107
  expect(characterCount.textContent).toEqual('You have 1000 characters remaining');
package/dist/utils/Component/getComponentTests/getComponent.time.test.js CHANGED
@@ -35,7 +35,7 @@ describe('utils.Component.get', function () {
35
35
  timeInput = _getAllByTestId2[1];
36
36
  expect(formGroup.tagName).toEqual('DIV');
37
37
  expect(formGroup.classList).toContain('govuk-form-group');
38
- var label = formGroup.childNodes[0].childNodes[0].childNodes[0];
38
+ var label = formGroup.childNodes[0];
39
39
  expect(label.innerHTML).toContain(LABEL);
40
40
  expect(label.getAttribute('for')).toEqual(ID);
41
41
  expect(timeInput.tagName).toEqual('DIV');
@@ -60,11 +60,11 @@ describe('utils.Component.get', function () {
60
60
  }].forEach(function (part) {
61
61
  expect(part.item.tagName).toEqual('DIV');
62
62
  expect(part.item.classList).toContain('govuk-date-input__item');
63
- var _part$item$childNodes = _slicedToArray(part.item.childNodes[0].childNodes, 2),
63
+ var _part$item$childNodes = _slicedToArray(part.item.childNodes, 2),
64
64
  inputLabel = _part$item$childNodes[0],
65
65
  input = _part$item$childNodes[1];
66
- expect(inputLabel.childNodes[0].tagName).toEqual('LABEL');
67
- expect(inputLabel.childNodes[0].classList).toContain('govuk-label');
66
+ expect(inputLabel.tagName).toEqual('LABEL');
67
+ expect(inputLabel.classList).toContain('govuk-label');
68
68
  expect(inputLabel.textContent).toEqual(part.label);
69
69
  expect(input.tagName).toEqual('INPUT');
70
70
  expect(input.id).toEqual("".concat(ID, "-").concat(part.id));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ukhomeoffice/cop-react-form-renderer",
3
- "version": "4.91.0",
3
+ "version": "5.0.0",
4
4
  "private": false,
5
5
  "scripts": {
6
6
  "clean": "rimraf dist",
@@ -16,7 +16,7 @@
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": "^2.14.5",
19
+ "@ukhomeoffice/cop-react-components": "^3.0.0",
20
20
  "axios": "^0.23.0",
21
21
  "dayjs": "^1.11.0",
22
22
  "govuk-frontend": "^4.3.1",