@ukhomeoffice/cop-react-form-renderer 7.0.0-echo → 7.1.0-alpha

package/README.md

@@ -28,7 +28,7 @@ Runs `eslint` against the project to check for coding issues.
 ### `yarn test`
 
 Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+See the section about [running tests](https://jestjs.io/docs/cli) for more information.
 
 ### `yarn compile`
 
@@ -41,7 +41,7 @@ The build is minified and the filenames include the hashes.
 
 Runs Storybook on [http://localhost:6007](http://localhost:6007), which showcases the components within this library.
 
-### `yarn storybook:build`
+### `yarn build-storybook`
 
 Builds Storybook for production to the `storybook-static` folder.
 

package/dist/components/CheckYourAnswers/CheckYourAnswers.js

@@ -139,12 +139,16 @@ const CheckYourAnswers = _ref => {
       })]
     });
   };
+  const getDedupedErrors = () => {
+    const dedupedErrors = Array.from(new Set(errors.map(a => a.id))).map(id => errors.find(b => b.id === id));
+    return dedupedErrors;
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: DEFAULT_CLASS,
     children: [title && !hide_title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_copReactComponents.LargeHeading, {
       children: title
     }, 'heading'), errors && errors.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_copReactComponents.ErrorSummary, {
-      errors: errors
+      errors: getDedupedErrors()
     }), type === _models.FormTypes.TASK_CYA && pages.length > 0 && sections && sections.map(section => section.tasks.filter(task => task.state !== _models.TaskStates.TYPES.SKIPPED).map((task, taskIndex) => {
       const filterPages = pages.filter(page => task.pages.some(p => p === page.name));
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {

package/dist/components/CheckYourAnswers/CheckYourAnswers.stories.mdx

@@ -1,15 +1,15 @@
-<!-- Global imports -->
+{/* Global imports */}
 
 import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
 import { Details, Heading, Link, Tag } from '@ukhomeoffice/cop-react-components';
 import withMock from 'storybook-addon-mock';
 
-<!-- Local imports -->
+{/* Local imports */}
 import { HooksContextProvider, ValidationContextProvider } from '../../context';
 import Utils from '../../utils';
 import CheckYourAnswers from './CheckYourAnswers';
 
-<!-- JSON documents -->
+{/* JSON documents */}
 import CIVIL_SERVANT from '../../json/areYouACivilServant.json';
 import GRADE from '../../json/grade.json';
 import TEAMS from '../../json/team.json';
@@ -21,16 +21,15 @@ import GROUP_OF_ROW_DATA from '../../json/groupOfRowData.json';
 import GROUP from'../../json/group.json';
 import GROUP_DATA from '../../json/group.data.json';
 
+export const decorators = [withMock]; 
+
 <Meta
   title='Components/Check your answers'
   id='D-CheckYourAnswers'
   component={CheckYourAnswers}
-  decorators={[withMock]}
 />
 
-<Heading size='xl' caption='Components'>
-  Check your answers
-</Heading>
+<Heading size='xl' caption='Components'> Check your answers </Heading>
 
 Renders the **Check your answers** screen for a form.
 

package/dist/components/FormComponent/FormComponent.stories.mdx

@@ -1,20 +1,22 @@
-<!-- Global imports -->
+{/* Global imports */}
 import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
 import { Details, Heading, Link } from '@ukhomeoffice/cop-react-components';
 import withMock from 'storybook-addon-mock';
 
-<!-- Local imports -->
+{/* Local imports */}
 import { HooksContextProvider, ValidationContextProvider } from '../../context';
 import FormComponent from './FormComponent';
 
-<!-- JSON documents -->
+{/* JSON documents */}
 import CIVIL_SERVANT from '../../json/areYouACivilServant.json';
 import GRADE from '../../json/grade.json';
 import TEAMS from '../../json/team.json';
 import USER_PROFILE_DATA from '../../json/userProfile.data.json';
 import USER_PROFILE from '../../json/userProfile.json';
 
-<Meta title="Components/Form component" id="D-FormComponent" component={ FormComponent } decorators={[withMock]} />
+export const decorators = [withMock]; 
+
+<Meta title="Components/Form component" id="D-FormComponent" component={ FormComponent } />
 
 <Heading size="xl" caption="Components">Form component</Heading>
 

package/dist/components/FormPage/FormPage.stories.mdx

@@ -1,14 +1,14 @@
-<!-- Global imports -->
+{/* Global imports */}
 import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
 import { Details, Heading, Link } from '@ukhomeoffice/cop-react-components';
 import withMock from 'storybook-addon-mock';
 
-<!-- Local imports -->
+{/* Local imports */}
 import { HooksContextProvider, ValidationContextProvider } from '../../context';
 import Utils from '../../utils';
 import FormPage from './FormPage';
 
-<!-- JSON documents -->
+{/* JSON documents */}
 import ADDRESS from '../../json/addressDetails.json'
 import CIVIL_SERVANT from '../../json/areYouACivilServant.json';
 import GRADE from '../../json/grade.json';
@@ -16,7 +16,9 @@ import TEAMS from '../../json/team.json';
 import USER_PROFILE_DATA from '../../json/userProfile.data.json';
 import USER_PROFILE from '../../json/userProfile.json';
 
-<Meta title="Components/Form page" id="D-FormPage" component={ FormPage } decorators={[withMock]} />
+export const decorators = [withMock]; 
+
+<Meta title="Components/Form page" id="D-FormPage" component={ FormPage } />
 
 <Heading size="xl" caption="Components">Form page</Heading>
 

package/dist/components/FormRenderer/FormRenderer.stories.mdx

@@ -1,4 +1,4 @@
-<!-- Global imports -->
+{/* Global imports */}
 
 import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
 import {
@@ -11,10 +11,10 @@ import {
 import { useState } from 'react';
 import withMock from 'storybook-addon-mock';
 
-<!-- Local imports -->
+{/* Local imports */}
 import FormRenderer from './FormRenderer';
 
-<!-- JSON documents -->
+{/* JSON documents */}
 import CIVIL_SERVANT from '../../json/areYouACivilServant.json';
 import FIRST_FORM from '../../json/firstForm.json';
 import GRADE from '../../json/grade.json';
@@ -22,16 +22,11 @@ import TEAMS from '../../json/team.json';
 import USER_PROFILE_DATA from '../../json/userProfile.data.json';
 import USER_PROFILE from '../../json/userProfile.json';
 
-<Meta
-  title='Components/Form renderer'
-  id='D-FormRenderer'
-  component={FormRenderer}
-  decorators={[withMock]}
-/>
+export const decorators = [withMock]; 
 
-<Heading size='xl' caption='Components'>
-  Form renderer
-</Heading>
+<Meta title='Components/Form renderer' id='D-FormRenderer' component={FormRenderer}/>
+
+<Heading size='xl' caption='Components'>Form renderer</Heading>
 
 Renders a form with <Link href="https://ukhomeoffice.github.io/cop-react-components/?path=/docs/d-alert--default-story">COP React components</Link>,
 on the basis of a <Link href="/?path=/docs/f-json-form">JSON</Link> that describes which elements are required.

package/dist/components/FormRenderer/onPageAction.js

@@ -72,6 +72,13 @@ const onPageAction = (action, patch, patchLabel, hooks, data, formState, validat
           break;
         case _models.PageAction.TYPES.COLLECTION_ADD:
           _utils.default.CollectionPage.addEntry(action.collection, form.page.formData);
+
+          // We need to delete the collection entry fields from formData as it will be holding previous values.
+          if (form.page.formData["".concat(action.collection)] && form.page.formData["".concat(action.collection)].length > 0) {
+            const lastIndex = form.page.formData["".concat(action.collection)].length - 1;
+            const fieldsToDelete = Object.keys(form.page.formData["".concat(action.collection)][lastIndex]).filter(k => k in form.page.formData && k !== 'id');
+            fieldsToDelete.forEach(i => delete form.page.formData[i]);
+          }
           pageUpdate = () => _handlers.default.navigate(action, pageId, onPageChange);
           break;
         case _models.PageAction.TYPES.COLLECTION_DUPLICATE:
@@ -86,6 +93,35 @@ const onPageAction = (action, patch, patchLabel, hooks, data, formState, validat
           if (action.recordRemoval) {
             form.page.formData["".concat(action.collection.split('.').pop(), "LastRemoved")] = _objectSpread({}, removedEntry);
           }
+
+          // The formData needs to be tidied up after removing the collection entry:
+
+          // 1. Retrieve the formData ID as it will be overwritten by a field with the same name in the collection entry.
+          const formDataId = form.page.formData.id;
+
+          // 2. Build the list of field names to delete and delete them from formData.
+          if (removedEntry !== null) {
+            const removedEntryFieldsToDelete = Object.keys(removedEntry).filter(k => k in form.page.formData);
+            removedEntryFieldsToDelete.forEach(i => delete form.page.formData[i]);
+          }
+
+          // 3. Retrieve the collection array from formData.
+          const collectionArray = form.page.formData[action.collection];
+
+          // 4. Assign the fields in the last collection entry to formData.
+          Object.assign(form.page.formData, collectionArray[collectionArray.length - 1]);
+
+          // 5. Assign the formData ID back to the formData.
+          form.page.formData.id = formDataId;
+
+          // 6. If the collection array has entries set the correct ActiveId 
+          // otherwise delete it as well as the collection array.
+          if (collectionArray.length > 0) {
+            form.page.formData["".concat(action.collection, "ActiveId")] = collectionArray[collectionArray.length - 1].id;
+          } else {
+            delete form.page.formData["".concat(action.collection, "ActiveId")];
+            delete form.page.formData[action.collection];
+          }
           break;
         default:
           break;

package/dist/components/FormRenderer/onPageAction.test.js

@@ -380,6 +380,35 @@ describe('components.FormRenderer.onPageAction', () => {
     // that's called as part of the onSubmit hook's onSuccess callback.
     expect(_handlers.default.navigateCalls).toEqual(1);
   });
+  it("should clean previous collection entry fields at top level of formData", () => {
+    const FORM_STATE = {
+      page: {
+        formData: {
+          'testCollection': [{
+            'flightNumber': '1'
+          }],
+          'flightNumber': '1'
+        }
+      }
+    };
+    const ACTION = {
+      type: _models.PageAction.TYPES.COLLECTION_ADD,
+      collection: 'testCollection'
+    };
+    const CUSTOM_ARGS = _objectSpread(_objectSpread({}, ARGS), {}, {
+      action: ACTION,
+      formState: FORM_STATE
+    });
+    _onPageAction.default.apply(void 0, Object.values(CUSTOM_ARGS));
+    preActionChecks();
+    expect(FORM_STATE.page.formData["".concat(ACTION.collection, "ActiveId")]).toBeDefined();
+    expect(FORM_STATE.page.formData.flightNumber).toBeUndefined();
+    postActionChecks(CUSTOM_ARGS);
+
+    // This action type also sets up a call to handlers.navigate
+    // that's called as part of the onSubmit hook's onSuccess callback.
+    expect(_handlers.default.navigateCalls).toEqual(1);
+  });
   describe("should handle the ".concat(_models.PageAction.TYPES.COLLECTION_DUPLICATE, " Page Action type"), () => {
     it("calling handlers.navigate if the duplication was successful", () => {
       const FORM_STATE = {
@@ -533,6 +562,90 @@ describe('components.FormRenderer.onPageAction', () => {
       expect(FORM_STATE.page.formData.testCollectionLastRemoved).toBeUndefined();
       postActionChecks(CUSTOM_ARGS);
 
+      // This action type uses the default onPageChange.
+      expect(onPageChangeCalls).toEqual(1);
+    });
+    it("should clean collection fields at top level of formData when entries remain", () => {
+      // After removing the active entry, the collection data is assigned to the
+      // top level of formData and the activeId is reset.
+      const FORM_STATE = {
+        page: {
+          formData: {
+            testCollectionActiveId: 'removeMe',
+            testCollection: [{
+              id: 'leaveMeAlone',
+              flightNumber: '1'
+            }, {
+              id: 'removeMe',
+              flightNumber: '2'
+            }],
+            flightNumber: '2',
+            testCollectionLastRemoved: 'previousOne'
+          }
+        }
+      };
+      const ACTION = {
+        type: _models.PageAction.TYPES.COLLECTION_REMOVE,
+        collection: 'testCollection',
+        recordRemoval: true
+      };
+      const CUSTOM_ARGS = _objectSpread(_objectSpread({}, ARGS), {}, {
+        action: ACTION,
+        formState: FORM_STATE
+      });
+      _onPageAction.default.apply(void 0, Object.values(CUSTOM_ARGS));
+      preActionChecks();
+      expect(FORM_STATE.page.formData.testCollection).toEqual([{
+        id: 'leaveMeAlone',
+        flightNumber: '1'
+      }]);
+      expect(FORM_STATE.page.formData.testCollectionLastRemoved).toEqual({
+        id: 'removeMe',
+        flightNumber: '2'
+      });
+      expect(FORM_STATE.page.formData.flightNumber).toEqual('1');
+      expect(FORM_STATE.page.formData.testCollectionActiveId).toEqual('leaveMeAlone');
+      postActionChecks(CUSTOM_ARGS);
+
+      // This action type uses the default onPageChange.
+      expect(onPageChangeCalls).toEqual(1);
+    });
+    it("should clean collection fields at top level of formData after last entry removed", () => {
+      // After removing the last active entry, the collection array and activeID are deleted, 
+      // and the collection data is removed from top level of formData.
+      const FORM_STATE = {
+        page: {
+          formData: {
+            testCollectionActiveId: 'removeMe',
+            testCollection: [{
+              id: 'removeMe',
+              flightNumber: '1'
+            }],
+            flightNumber: '1',
+            testCollectionLastRemoved: 'previousOne'
+          }
+        }
+      };
+      const ACTION = {
+        type: _models.PageAction.TYPES.COLLECTION_REMOVE,
+        collection: 'testCollection',
+        recordRemoval: true
+      };
+      const CUSTOM_ARGS = _objectSpread(_objectSpread({}, ARGS), {}, {
+        action: ACTION,
+        formState: FORM_STATE
+      });
+      _onPageAction.default.apply(void 0, Object.values(CUSTOM_ARGS));
+      preActionChecks();
+      expect(FORM_STATE.page.formData.testCollection).toBeUndefined();
+      expect(FORM_STATE.page.formData.testCollectionLastRemoved).toEqual({
+        id: 'removeMe',
+        flightNumber: '1'
+      });
+      expect(FORM_STATE.page.formData.flightNumber).toBeUndefined();
+      expect(FORM_STATE.page.formData.testCollectionActiveId).toBeUndefined();
+      postActionChecks(CUSTOM_ARGS);
+
       // This action type uses the default onPageChange.
       expect(onPageChangeCalls).toEqual(1);
     });

package/dist/components/PageActions/PageActions.stories.mdx

@@ -1,12 +1,12 @@
-<!-- Global imports -->
+{/* Global imports */}
 import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
 import { Details, Heading, Link } from '@ukhomeoffice/cop-react-components';
 
-<!-- Local imports -->
+{/* Local imports */}
 import Utils from '../../utils';
 import PageActions from './PageActions';
 
-<!-- JSON documents -->
+{/* JSON documents */}
 import CIVIL_SERVANT from '../../json/areYouACivilServant.json';
 import GRADE from '../../json/grade.json';
 import TEAMS from '../../json/team.json';

package/dist/components/SummaryList/SummaryList.stories.mdx

@@ -1,22 +1,16 @@
-<!-- Global imports -->
+{/* Global imports */}
 
 import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
 import { Details, Heading } from '@ukhomeoffice/cop-react-components';
 
-<!-- Local imports -->
+{/* Local imports */}
 
 import Utils from '../../utils';
 import SummaryList from './SummaryList';
 
-<Meta
-  title='Components/Summary list'
-  id='D-SummaryList'
-  component={SummaryList}
-/>
+<Meta title='Components/Summary list' id='D-SummaryList' component={SummaryList} />
 
-<Heading size='xl' caption='Components'>
-  Summary list
-</Heading>
+<Heading size='xl' caption='Components'> Summary list </Heading>
 
 Renders a list of key-value pairs, most commonly on the **Check your answers** screen, and optionally
 display action links.

package/dist/components/TaskList/TaskList.stories.mdx

@@ -1,8 +1,8 @@
-<!-- Global imports -->
+{/* Global imports */}
 import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
 import { Details, Heading } from '@ukhomeoffice/cop-react-components';
 
-<!-- Local imports -->
+{/* Local imports */}
 import Utils from '../../utils';
 import TaskList from './TaskList';
 

package/dist/utils/Container/setupNesting.js

@@ -15,6 +15,7 @@ const nestComponents = container => {
   return container.components.map(component => {
     // eslint-disable-next-line camelcase
     const full_path = containerPath ? "".concat(containerPath, ".").concat(component.fieldId) : component.fieldId;
+    // eslint-disable-next-line camelcase
     const ret = _objectSpread(_objectSpread({}, component), {}, {
       full_path
     });

package/dist/utils/Validate/validateComponent.js

@@ -18,6 +18,7 @@ var _validateRegex = _interopRequireDefault(require("./validateRegex"));
 var _validateRequired = _interopRequireDefault(require("./validateRequired"));
 var _validateTextArea = _interopRequireDefault(require("./validateTextArea"));
 var _validateTime = _interopRequireDefault(require("./validateTime"));
+var _canOverrideFieldRequired = _interopRequireDefault(require("../canOverrideFieldRequired"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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; }
@@ -47,7 +48,9 @@ const validateComponent = (component, outerData, formData) => {
     value = (0, _getCollectionPageData.default)(component.collectionName, fd);
   }
   if (component.required) {
-    error = (0, _validateRequired.default)(value, component.label, component.custom_errors);
+    if (!component.requiredOverrideConditions || !(0, _canOverrideFieldRequired.default)(component.requiredOverrideConditions, fd)) {
+      error = (0, _validateRequired.default)(value, component.label, component.custom_errors);
+    }
   }
   if (!error) {
     switch (component.type) {
@@ -91,7 +94,7 @@ const validateComponent = (component, outerData, formData) => {
         error = (0, _validateMultifile.default)(value, component.custom_errors);
         break;
       case _models.ComponentTypes.TEXT_AREA:
-        error = (0, _validateTextArea.default)(component.label, value, component.showCharacterCount, component.custom_errors, component.maxLength);
+        error = (0, _validateTextArea.default)(component.label, value, component.showCharacterCount, component.custom_errors, component.required, component.maxLength);
         break;
       default:
         break;

package/dist/utils/Validate/validateTextArea.js

@@ -11,15 +11,16 @@ exports.default = void 0;
  * @param {*} value The value to validate.
  * @param {string} showCharacterCount The flag to enable character count validation.
  * @param {array} customErrors An array of custom errors for the component.
+ * @param {boolean} required If the component is required.
  * @param {number} maxLength The maximum allowable number of characters (by default, this is 1000 characters).
  * @returns An error if the value exceeds the maximum allowable number of characters.
  */
-const validateTextArea = function (label, value, showCharacterCount, customErrors) {
-  let maxLength = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1000;
-  if (!showCharacterCount) {
+const validateTextArea = function (label, value, showCharacterCount, customErrors, required) {
+  let maxLength = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 1000;
+  if (!showCharacterCount || !required && !value) {
     return undefined;
   }
-  const hasError = value.length > maxLength;
+  const hasError = required && !value || value.length > maxLength;
   if (hasError) {
     if (Array.isArray(customErrors)) {
       const result = customErrors.filter(error => error.type === 'length');

package/dist/utils/Validate/validateTextArea.test.js

@@ -15,25 +15,53 @@ describe('utils', () => {
       }];
       it('should return no error when the character count flag is disabled', () => {
         const VALUE = 'ALPHA BRAVO';
-        expect((0, _validateTextArea.default)(LABEL, VALUE, false, CUSTOM_ERRORS, MAX_LENGTH)).toBeUndefined();
+        expect((0, _validateTextArea.default)(LABEL, VALUE, false, CUSTOM_ERRORS, true, MAX_LENGTH)).toBeUndefined();
       });
       it('should return no error when value length has not exceeded the maximum allowable character length', () => {
         const VALUE = 'ALPHA BRA';
-        expect((0, _validateTextArea.default)(LABEL, VALUE, true, CUSTOM_ERRORS, MAX_LENGTH)).toBeUndefined();
+        expect((0, _validateTextArea.default)(LABEL, VALUE, true, CUSTOM_ERRORS, true, MAX_LENGTH)).toBeUndefined();
       });
       it('should return no error when value length has not exceeded the default maximum allowable character length', () => {
         const VALUE = 'ALPHA BRAVO';
-        expect((0, _validateTextArea.default)(LABEL, VALUE, true, undefined)).toBeUndefined();
+        expect((0, _validateTextArea.default)(LABEL, VALUE, true, undefined, true)).toBeUndefined();
       });
       it('should return an error when value length has exceeded the maximum allowable character length', () => {
         const VALUE = 'ALPHA BRAVO';
-        const error = (0, _validateTextArea.default)(LABEL, VALUE, true, undefined, MAX_LENGTH);
+        const error = (0, _validateTextArea.default)(LABEL, VALUE, true, undefined, true, MAX_LENGTH);
         expect(error).toBeDefined();
         expect(error).toEqual(ERROR_MSG);
       });
       it('should return a custom error when one is provided', () => {
         const VALUE = 'ALPHA BRAVO CHARLIE';
-        const error = (0, _validateTextArea.default)(LABEL, VALUE, true, CUSTOM_ERRORS, MAX_LENGTH);
+        const error = (0, _validateTextArea.default)(LABEL, VALUE, true, CUSTOM_ERRORS, true, MAX_LENGTH);
+        expect(error).toBeDefined();
+        expect(error).toEqual(CUSTOM_ERROR);
+      });
+      it('Should return a custom error when one is provided and the value is undefined', () => {
+        const VALUE = undefined;
+        const error = (0, _validateTextArea.default)(LABEL, VALUE, true, CUSTOM_ERRORS, true, MAX_LENGTH);
+        expect(error).toBeDefined();
+        expect(error).toEqual(CUSTOM_ERROR);
+      });
+      it('Should return undefined when the component is not required and value is undefined', () => {
+        const VALUE = undefined;
+        const error = (0, _validateTextArea.default)(LABEL, VALUE, true, CUSTOM_ERRORS, false, MAX_LENGTH);
+        expect(error).toBeUndefined();
+      });
+      it('Should return undefined when component required is undefined and value is undefined', () => {
+        const VALUE = undefined;
+        const error = (0, _validateTextArea.default)(LABEL, VALUE, true, CUSTOM_ERRORS, undefined, MAX_LENGTH);
+        expect(error).toBeUndefined();
+      });
+      it('Should return error when component required is false and value is over max length', () => {
+        const VALUE = 'ALPHA BRAVO CHARLIE';
+        const error = (0, _validateTextArea.default)(LABEL, VALUE, true, CUSTOM_ERRORS, false, MAX_LENGTH);
+        expect(error).toBeDefined();
+        expect(error).toEqual(CUSTOM_ERROR);
+      });
+      it('Should return error when component is required and value is undefined', () => {
+        const VALUE = undefined;
+        const error = (0, _validateTextArea.default)(LABEL, VALUE, true, CUSTOM_ERRORS, true, MAX_LENGTH);
         expect(error).toBeDefined();
         expect(error).toEqual(CUSTOM_ERROR);
       });

package/dist/utils/canOverrideFieldRequired.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _Condition = _interopRequireDefault(require("./Condition"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * Check to see if the field required status can be overridden.
+ * All conditions need to be met in order for the override to be permitted.
+ * @param {array} requiredOverrideConditions The conditions to evaluate.
+ * @param {object} data The form data to check.
+ * @returns true or false.
+ */
+const canOverrideFieldRequired = (requiredOverrideConditions, data) => {
+  if ((requiredOverrideConditions === null || requiredOverrideConditions === void 0 ? void 0 : requiredOverrideConditions.type) === "or") {
+    return _Condition.default.meetsOne(requiredOverrideConditions.conditions, data);
+  }
+  return _Condition.default.meetsAll(requiredOverrideConditions.conditions, data);
+};
+var _default = exports.default = canOverrideFieldRequired;

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@ukhomeoffice/cop-react-form-renderer",
-  "version": "7.0.0-echo",
+  "version": "7.1.0-alpha",
   "private": false,
   "scripts": {
+    "build-storybook": "storybook build",
     "clean": "rimraf dist",
     "compile": "yarn clean && cross-env NODE_ENV=production babel src --out-dir dist --copy-files && yarn post-compile",
     "compile-with-maps": "yarn clean && cross-env NODE_ENV=production babel src --out-dir dist --source-maps true --copy-files && yarn post-compile",
@@ -10,16 +11,14 @@
     "lint": "eslint --ext .js,.jsx src",
     "lint-fix": "eslint --ext .js,.jsx src --fix",
     "post-compile": "rimraf dist/*.test.* dist/**/*.test.* dist/**/*.stories.* dist/docs dist/assets",
-    "storybook": "yarn storybook:start",
-    "storybook:build": "build-storybook --docs -s src/assets",
-    "storybook:start": "start-storybook --docs -s src/assets --no-manager-cache -p 6007",
+    "storybook": "storybook dev -p 6007",
     "test": "jest --silent=false --noStackTrace",
     "test-coverage": "jest --coverage --watchAll=false",
     "test-coverage-watch": "jest --coverage --watchAll=true",
     "yalc-publish": "yarn compile-with-maps && cp -r src dist/src && yalc publish --push"
   },
   "dependencies": {
-    "@ukhomeoffice/cop-react-components": "5.0.0-foxtrot",
+    "@ukhomeoffice/cop-react-components": "5.0.0",
     "axios": "^0.23.0",
     "dayjs": "^1.11.0",
     "govuk-frontend": "5.10.2",
@@ -29,20 +28,23 @@
   "devDependencies": {
     "@babel/cli": "7.27.2",
     "@babel/core": "7.27.4",
-    "@babel/eslint-parser": "7.19.1",
+    "@babel/eslint-parser": "7.27.0",
     "@babel/preset-env": "7.27.2",
     "@babel/preset-react": "7.27.1",
     "@monaco-editor/react": "4.7.0",
-    "@storybook/addon-a11y": "^6.3.8",
-    "@storybook/addon-actions": "^6.3.8",
-    "@storybook/addon-docs": "^6.3.8",
-    "@storybook/addon-essentials": "^6.3.8",
-    "@storybook/addon-knobs": "^6.3.1",
-    "@storybook/addon-links": "^6.3.8",
-    "@storybook/node-logger": "^6.3.8",
-    "@storybook/react": "^6.3.8",
+    "@storybook/addon-a11y": "7.6.17",
+    "@storybook/addon-actions": "7.6.17",
+    "@storybook/addon-docs": "7.6.17",
+    "@storybook/addon-essentials": "7.6.17",
+    "@storybook/addon-interactions": "7.6.17",
+    "@storybook/addon-links": "7.6.17",
+    "@storybook/addons": "7.6.17",
+    "@storybook/builder-vite": "7.6.17",
+    "@storybook/node-logger": "7.6.17",
+    "@storybook/react": "7.6.17",
+    "@storybook/react-vite": "7.6.17",
     "@storybook/storybook-deployer": "2.8.16",
-    "@storybook/theming": "^6.3.8",
+    "@storybook/theming": "7.6.17",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/react-hooks": "^7.0.2",
@@ -51,8 +53,12 @@
     "axios-mock-adapter": "^1.18.1",
     "babel-jest": "29.7.0",
     "cross-env": "7.0.3",
+    "eslint": "8.57.1",
     "eslint-config-airbnb": "19.0.4",
-    "eslint-config-prettier": "^8.6.0",
+    "eslint-config-prettier": "10.1.2",
+    "eslint-plugin-import": "2.31.0",
+    "eslint-plugin-jsx-a11y": "6.10.2",
+    "eslint-plugin-react": "7.37.5",
     "html-react-parser": "^0.10.5",
     "identity-obj-proxy": "3.0.0",
     "jest": "29.7.0",
@@ -64,7 +70,8 @@
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "sass": "1.89.1",
-    "storybook-addon-mock": "^2.0.1",
+    "storybook": "7.6.17",
+    "storybook-addon-mock": "5.0.0",
     "vite": "6.3.5",
     "vite-plugin-static-copy": "^2.3.1",
     "vite-plugin-svgr": "4.3.0"
@@ -77,6 +84,13 @@
     "babel-loader": "8.3.0",
     "webpack": "4.44.2"
   },
+  "resolutions": {
+    "braces": "3.0.3",
+    "esbuild": "0.25.0",
+    "micromatch": "4.0.8",
+    "parse-url": "8.1.0",
+    "pbkdf2": "3.1.3"
+  },
   "main": "dist/index.js",
   "files": [
     "dist",