@ukhomeoffice/cop-react-form-renderer 5.56.3 → 6.0.0-peter

package/dist/components/CollectionSummary/SummaryCardDetails.scss

@@ -0,0 +1,158 @@
+$govuk-font-family: 'Roboto', arial, sans-serif;
+
+@import "node_modules/govuk-frontend/govuk/_base";
+
+.govuk-grid-column-two-thirds:has(.hods-form-summary-card-details) {
+  width: 100% !important;
+}
+
+.hods-form-summary-card-details {
+  &__section {
+    border-bottom: 2px solid #E9EBED;
+
+    &-title {
+      font-weight: bold;
+      margin: govuk-spacing(2) 0 govuk-spacing(6) 0;
+    }
+
+    &-content {
+      display: flex;
+      flex-wrap: wrap;
+      gap: govuk-spacing(2);
+
+      .hods-form-summary-card-details__field {
+        box-sizing: border-box;
+        margin-bottom: govuk-spacing(4);
+
+        .govuk-label,
+        .govuk-fieldset__legend {
+          font-weight: bold;
+          margin-bottom: govuk-spacing(1) !important;
+
+          &::after {
+            content: " :";
+          }
+        }
+
+        div.govuk-form-group div:has(img){
+          display: flex;
+          flex-wrap: wrap;
+
+          .hods-readonly.hods-readonly--success {
+            font-size: 0;
+            line-height: 0;
+
+            .cop-upload-preview__thumb {
+              display: inline-block;
+              margin-right: govuk-spacing(1);
+            }
+          }
+
+        }
+      }
+
+      &--columns-1,
+      &--columns-2,
+      &--columns-3 {
+        position: relative;
+        margin-bottom: govuk-spacing(1);
+
+        &::before {
+          content: "";
+          position: absolute;
+          top: 0;
+          width: 2px;
+          height: 100%;
+          background-color: #E9EBED;
+          left: 0;
+        }
+      }
+
+      &--columns-2 {
+        &::after {
+          content: "";
+          position: absolute;
+          top: 0;
+          width: 2px;
+          height: 100%;
+          background-color: #E9EBED;
+          left: 50%;
+        }
+
+        .hods-form-summary-card-details__field {
+          flex: 0 0 calc(50% - 10px);
+        }
+      }
+
+      &--columns-3 {
+        &::after {
+          content: "";
+          position: absolute;
+          top: 0;
+          left: 33.333%;
+          width: 2px;
+          height: 100%;
+          background-color: #E9EBED;
+        }
+
+        .hods-form-summary-card-details__field {
+          flex: 0 0 calc(33.333% - 10px);
+
+          &:nth-child(2)::after {
+            content: "";
+            position: absolute;
+            top: 0;
+            right: 33.333%;
+            width: 2px;
+            height: 100%;
+            background-color: #E9EBED;
+          }
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: 640px) {
+  .hods-form-summary-card-details {
+    &__section {
+      &-content {
+        display: block;
+
+        .hods-form-summary-card-details__field {
+          width: 100%;
+        }
+
+        .hods-form-summary-card-details__field:nth-child(2)::after {
+          display: none;
+        }
+
+        &--columns-2,
+        &--columns-3 {
+          position: relative;
+          margin-bottom: govuk-spacing(1);
+
+          &::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            width: 2px;
+            height: 100%;
+            background-color: #A9A9A9;
+            left: 0;
+          }
+
+          &::after {
+            display: none;
+          }
+        }
+
+        &--columns-3 {
+          .hods-form-summary-card-details__field:nth-child(2)::after {
+            content: none;
+          }
+        }
+      }
+    }
+  }
+}

package/dist/components/CollectionSummary/SummaryCardDetails.test.js

@@ -0,0 +1,319 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+var _copReactComponents = require("@ukhomeoffice/cop-react-components");
+var _setupTests = require("../../setupTests");
+var _SummaryCardDetails = _interopRequireWildcard(require("./SummaryCardDetails"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } // Global imports.
+// Local imports.
+describe('components.CollectionSummary.SummaryCardDetails', function () {
+  var classes = _copReactComponents.Utils.classBuilder(_SummaryCardDetails.DEFAULT_CLASS, [], '');
+  var ENTRY = {
+    id: '001',
+    bannerText: 'A banner',
+    titleText: 'A title',
+    detailsText: 'Some details',
+    index: 0,
+    summaryText: 'Full details',
+    childCollection: [{
+      id: '001',
+      childField1: 'alpha',
+      childField2: 'bravo'
+    }, {
+      id: '002',
+      childField1: 'alpha',
+      childField2: 'bravo'
+    }]
+  };
+  it('should render sections and fields based on summaryLayout config', function () {
+    var CHILD_PAGES = [{
+      summaryLayout: {
+        sections: [{
+          title: 'Section 1',
+          columns: 2,
+          fields: ['fieldA', 'fieldB']
+        }, {
+          title: 'Section 2',
+          columns: 1,
+          fields: ['fieldC']
+        }]
+      },
+      components: [{
+        fieldId: 'fieldA'
+      }, {
+        fieldId: 'fieldB'
+      }, {
+        fieldId: 'fieldC'
+      }]
+    }];
+    var MASTER_PAGE = {
+      childPages: CHILD_PAGES
+    };
+    var _renderWithValidation = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_SummaryCardDetails.default, {
+        masterPage: MASTER_PAGE,
+        childMasterPages: [],
+        formData: {},
+        entryData: ENTRY
+      })),
+      container = _renderWithValidation.container;
+
+    // Function to find an element by its text content
+    function getByTextContent(parent, text) {
+      return Array.from(parent.getElementsByClassName(classes('section-title'))).find(function (el) {
+        return el.textContent === text;
+      });
+    }
+
+    // Check for section titles
+    var section1Title = getByTextContent(container, 'Section 1');
+    var section2Title = getByTextContent(container, 'Section 2');
+    expect(section1Title).not.toBeUndefined();
+    expect(section2Title).not.toBeUndefined();
+    var section1Content = section1Title.parentNode.querySelector(".".concat(classes('section-content')));
+    expect(section1Content.querySelectorAll(".".concat(classes('field'))).length).toEqual(2);
+    var section2Content = section2Title.parentNode.querySelector(".".concat(classes('section-content')));
+    expect(section2Content.querySelectorAll(".".concat(classes('field'))).length).toEqual(1);
+  });
+  it('should render sections if they have show_when checks and pass them', function () {
+    var CHILD_PAGES = [{
+      summaryLayout: {
+        sections: [{
+          title: 'Section 1',
+          columns: 2,
+          fields: ['fieldA', 'fieldB'],
+          show_when: [{
+            field: 'showSection1',
+            op: "=",
+            value: true
+          }]
+        }, {
+          title: 'Section 2',
+          columns: 1,
+          fields: ['fieldC']
+        }]
+      },
+      components: [{
+        fieldId: 'fieldA'
+      }, {
+        fieldId: 'fieldB'
+      }, {
+        fieldId: 'fieldC'
+      }]
+    }];
+    var MASTER_PAGE = {
+      childPages: CHILD_PAGES
+    };
+    var CUSTOM_ENTRY = _objectSpread(_objectSpread({}, ENTRY), {}, {
+      showSection1: true
+    });
+    var _renderWithValidation2 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_SummaryCardDetails.default, {
+        masterPage: MASTER_PAGE,
+        childMasterPages: [],
+        formData: {},
+        entryData: CUSTOM_ENTRY
+      })),
+      container = _renderWithValidation2.container;
+
+    // Function to find an element by its text content
+    function getByTextContent(parent, text) {
+      return Array.from(parent.getElementsByClassName(classes('section-title'))).find(function (el) {
+        return el.textContent === text;
+      });
+    }
+
+    // Check for section titles
+    var section1Title = getByTextContent(container, 'Section 1');
+    var section2Title = getByTextContent(container, 'Section 2');
+    expect(section1Title).not.toBeUndefined();
+    expect(section2Title).not.toBeUndefined();
+    var section1Content = section1Title.parentNode.querySelector(".".concat(classes('section-content')));
+    expect(section1Content.querySelectorAll(".".concat(classes('field'))).length).toEqual(2);
+    var section2Content = section2Title.parentNode.querySelector(".".concat(classes('section-content')));
+    expect(section2Content.querySelectorAll(".".concat(classes('field'))).length).toEqual(1);
+  });
+  it('should not render sections if they have show_when checks and fail them', function () {
+    var CHILD_PAGES = [{
+      summaryLayout: {
+        sections: [{
+          title: 'Section 1',
+          columns: 2,
+          fields: ['fieldA', 'fieldB'],
+          show_when: [{
+            field: 'showSection1',
+            op: "=",
+            value: true
+          }]
+        }, {
+          title: 'Section 2',
+          columns: 1,
+          fields: ['fieldC']
+        }]
+      },
+      components: [{
+        fieldId: 'fieldA'
+      }, {
+        fieldId: 'fieldB'
+      }, {
+        fieldId: 'fieldC'
+      }]
+    }];
+    var MASTER_PAGE = {
+      childPages: CHILD_PAGES
+    };
+    var CUSTOM_ENTRY = _objectSpread(_objectSpread({}, ENTRY), {}, {
+      showSection1: false
+    });
+    var _renderWithValidation3 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_SummaryCardDetails.default, {
+        masterPage: MASTER_PAGE,
+        childMasterPages: [],
+        formData: {},
+        entryData: CUSTOM_ENTRY
+      })),
+      container = _renderWithValidation3.container;
+
+    // Function to find an element by its text content
+    function getByTextContent(parent, text) {
+      return Array.from(parent.getElementsByClassName(classes('section-title'))).find(function (el) {
+        return el.textContent === text;
+      });
+    }
+
+    // Check for section titles
+    var section1Title = getByTextContent(container, 'Section 1');
+    var section2Title = getByTextContent(container, 'Section 2');
+    expect(section1Title).toBeUndefined();
+    expect(section2Title).not.toBeUndefined();
+    var section2Content = section2Title.parentNode.querySelector(".".concat(classes('section-content')));
+    expect(section2Content.querySelectorAll(".".concat(classes('field'))).length).toEqual(1);
+  });
+  it('should not render sections on pages that fail show_when checks', function () {
+    var CHILD_PAGES = [{
+      show_when: [{
+        field: 'testField',
+        op: '=',
+        value: true
+      }],
+      summaryLayout: {
+        sections: [{
+          title: 'Section 1',
+          columns: 2,
+          fields: ['fieldA', 'fieldB'],
+          show_when: [{
+            field: 'showSection1',
+            op: "=",
+            value: true
+          }]
+        }, {
+          title: 'Section 2',
+          columns: 1,
+          fields: ['fieldC']
+        }]
+      },
+      components: [{
+        fieldId: 'fieldA'
+      }, {
+        fieldId: 'fieldB'
+      }, {
+        fieldId: 'fieldC'
+      }]
+    }];
+    var MASTER_PAGE = {
+      childPages: CHILD_PAGES
+    };
+    var CUSTOM_ENTRY = _objectSpread(_objectSpread({}, ENTRY), {}, {
+      showSection1: false
+    });
+    var _renderWithValidation4 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_SummaryCardDetails.default, {
+        masterPage: MASTER_PAGE,
+        childMasterPages: [],
+        formData: {
+          testField: false
+        },
+        entryData: CUSTOM_ENTRY
+      })),
+      container = _renderWithValidation4.container;
+
+    // Function to find an element by its text content
+    function getByTextContent(parent, text) {
+      return Array.from(parent.getElementsByClassName(classes('section-title'))).find(function (el) {
+        return el.textContent === text;
+      });
+    }
+
+    // Check for section titles
+    var section1Title = getByTextContent(container, 'Section 1');
+    var section2Title = getByTextContent(container, 'Section 2');
+    expect(section1Title).toBeUndefined();
+    expect(section2Title).toBeUndefined();
+  });
+  it('should render child collections', function () {
+    var CHILD_MASTER_PAGES = [{
+      collection: {
+        name: 'childCollection'
+      },
+      childPages: [{
+        components: [{
+          fieldId: 'childField1'
+        }, {
+          fieldId: 'childField2'
+        }],
+        summaryLayout: {
+          sections: [{
+            title: 'Hidden Title',
+            columns: 2,
+            fields: ['childfield1', 'childfield2']
+          }]
+        }
+      }]
+    }];
+    var CHILD_PAGES = [{
+      summaryLayout: {
+        sections: [{
+          type: 'childCollection',
+          collectionName: 'childCollection',
+          title: 'Children'
+        }]
+      },
+      components: [{
+        fieldId: 'fieldA'
+      }, {
+        fieldId: 'fieldB'
+      }, {
+        fieldId: 'fieldC'
+      }]
+    }];
+    var MASTER_PAGE = {
+      childPages: [].concat(CHILD_PAGES, CHILD_MASTER_PAGES)
+    };
+    var CHILD_COLLECTIONS = ['childCollection'];
+    var _renderWithValidation5 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_SummaryCardDetails.default, {
+        masterPage: MASTER_PAGE,
+        childCollections: CHILD_COLLECTIONS,
+        formData: {},
+        entryData: ENTRY
+      })),
+      container = _renderWithValidation5.container;
+
+    // Function to find an element by its text content
+    function getByTextContent(parent, text) {
+      return Array.from(parent.getElementsByClassName(classes('section-title'))).find(function (el) {
+        return el.textContent === text;
+      });
+    }
+    var childCollectionSectionTitle = getByTextContent(container, 'Children');
+    expect(childCollectionSectionTitle).not.toBeUndefined();
+    var childSectionTitles = getByTextContent(container, 'Hidden Title');
+    expect(childSectionTitles).toBeUndefined(); // Individual section title for child collections should be hidden.
+
+    var childFields = container.querySelectorAll(".".concat(classes('field')));
+    expect(childFields.length).toEqual(4); // Two for each entry in the child collection.
+  });
+});

package/dist/components/FormRenderer/clear-uncompleted-routes/test-data/component-used-in-multiple-pages-data.json

@@ -0,0 +1,4 @@
+{
+  "componentA": "show",
+  "componentB": "hide"
+}

package/dist/components/FormRenderer/clear-uncompleted-routes/test-data/component-used-in-multiple-pages-form.json

@@ -0,0 +1,61 @@
+{
+  "components": [
+    {
+      "id": "componentA",
+      "type": "radios",
+      "label": "Field A",
+      "fieldId": "fieldA",
+      "required": true
+    },
+    {
+      "id": "componentB",
+      "type": "collection",
+      "label": "Component B",
+      "fieldId": "componentB"
+    }
+  ],
+  "pages": [
+    {
+      "id": "pageA",
+      "show_when": {
+        "op": "=",
+        "field": "componentA",
+        "value": "hide"
+      },
+      "components": [
+        {
+          "id": "componentB",
+          "use": "componentB"
+        }
+      ]
+    },
+    {
+      "id": "pageB",
+      "show_when": {
+        "op": "=",
+        "field": "componentA",
+        "value": "show"
+      },
+      "components": [
+        {
+          "id": "componentB",
+          "use": "componentB"
+        }
+      ]
+    },
+    {
+      "id": "pageC",
+      "show_when": {
+        "op": "=",
+        "field": "componentA",
+        "value": "hide"
+      },
+      "components": [
+        {
+          "id": "componentB",
+          "use": "componentB"
+        }
+      ]
+    }
+  ]
+}

package/dist/components/FormRenderer/clear-uncompleted-routes/test-data/data-with-collection-data-removed.json

@@ -0,0 +1,4 @@
+{
+  "componentA": "false",
+  "componentAs": [{}]
+}

package/dist/components/FormRenderer/clear-uncompleted-routes/test-data/data-with-collections.json

@@ -0,0 +1,8 @@
+{
+  "componentA": "false",
+  "componentAs": [
+    {
+      "itemCategory": "1111111111"
+    }
+  ]
+}

package/dist/components/FormRenderer/clear-uncompleted-routes/test-data/data-with-components-removed.json

@@ -0,0 +1,3 @@
+{
+  "componentA": "hide"
+}

package/dist/components/FormRenderer/clear-uncompleted-routes/test-data/data-with-components.json

@@ -0,0 +1,5 @@
+{
+  "componentA": "show",
+  "componentB": "hide if component A is anything other than show",
+  "componentC": "hide if component A is anything other than show"
+}

package/dist/components/FormRenderer/clear-uncompleted-routes/test-data/data-with-entire-collection-removed.json

@@ -0,0 +1,3 @@
+{
+  "componentA": "false"
+}

package/dist/components/FormRenderer/clear-uncompleted-routes/test-data/data-with-nested-component-removed.json

@@ -0,0 +1,10 @@
+{
+  "type": "Example form",
+  "alpha": "alpha",
+  "bravo": "bravo",
+  "person": {
+    "charlie": "Smith"
+  },
+  "gamma": "gamma",
+  "epsilon": "epsilon"
+}

package/dist/components/FormRenderer/clear-uncompleted-routes/test-data/data-with-nested-components.json

@@ -0,0 +1,11 @@
+{
+  "type": "Example form",
+  "alpha": "alpha",
+  "bravo": "bravo",
+  "person": {
+    "charlie": "Smith",
+    "delta":"Acme Inc"
+  },
+  "gamma": "gamma",
+  "epsilon": "epsilon"
+}

package/dist/components/FormRenderer/clear-uncompleted-routes/test-data/form-for-nested-components.json

@@ -0,0 +1,96 @@
+{
+  "id": "example-form",
+  "version": "0.0.1",
+  "name": "example-form",
+  "title": "Example form",
+  "type": "form",
+  "components": [
+    {
+      "id": "alpha",
+      "fieldId": "alpha",
+      "label": "Alpha",
+      "type": "text"
+    },
+    {
+      "id": "bravo",
+      "fieldId": "bravo",
+      "label": "Bravo",
+      "type": "text"
+    },
+    {
+      "id": "person",
+      "fieldId": "person",
+      "type": "container",
+      "components": [
+        {
+          "id": "charlie",
+          "fieldId": "charlie",
+          "label": "Charlie",
+          "type": "text",
+          "show_when": {
+            "op": "=",
+            "field": "bravo",
+            "value": "bravo"
+          }
+        },
+        {
+          "id": "delta",
+          "fieldId": "delta",
+          "label": "Delta",
+          "type": "text",
+          "show_when": {
+            "op": "=",
+            "field": "bravo",
+            "value": "another"
+          }
+        }
+      ]
+    },
+    {
+      "id": "gamma",
+      "fieldId": "gamma",
+      "label": "Gamma",
+      "type": "text"
+    },
+    {
+      "id": "epsilon",
+      "fieldId": "epsilon",
+      "label": "Epsilon",
+      "type": "text"
+    }
+  ],
+  "pages": [
+    {
+      "id": "general",
+      "name": "general",
+      "title": "General information",
+      "components": [
+        {
+          "use": "alpha"
+        },
+        {
+          "use": "bravo"
+        },
+        {
+          "use": "person"
+        },
+        {
+          "use": "gamma"
+        },
+        {
+          "use": "epsilon"
+        }
+      ],
+      "actions": [
+        "submit",
+        {
+          "type": "cancel",
+          "page": "",
+          "validate": false,
+          "classModifiers": "secondary",
+          "label": "Cancel"
+        }
+      ]
+    }
+  ]
+}