@ukhomeoffice/cop-react-form-renderer 1.0.0-alpha → 1.0.0

package/dist/components/CheckYourAnswers/CheckYourAnswers.js

@@ -13,8 +13,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _models = require("../../models");
-
 var _utils = _interopRequireDefault(require("../../utils"));
 
 var _PageActions = _interopRequireDefault(require("../PageActions"));
@@ -59,6 +57,7 @@ exports.DEFAULT_MARGIN_BOTTOM = DEFAULT_MARGIN_BOTTOM;
 var CheckYourAnswers = function CheckYourAnswers(_ref) {
   var title = _ref.title,
       _pages = _ref.pages,
+      actions = _ref.actions,
       _onAction = _ref.onAction,
       onRowAction = _ref.onRowAction,
       hide_page_titles = _ref.hide_page_titles,
@@ -124,7 +123,7 @@ var CheckYourAnswers = function CheckYourAnswers(_ref) {
       rows: page.rows
     }));
   }), !hide_actions && /*#__PURE__*/_react.default.createElement(_PageActions.default, {
-    actions: [_models.PageAction.TYPES.SUBMIT],
+    actions: actions,
     onAction: function onAction(action) {
       return _onAction(action, onError);
     }
@@ -134,6 +133,7 @@ var CheckYourAnswers = function CheckYourAnswers(_ref) {
 CheckYourAnswers.propTypes = {
   title: _propTypes.default.string.isRequired,
   pages: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
+  actions: _propTypes.default.arrayOf(_propTypes.default.object),
   onAction: _propTypes.default.func.isRequired,
   onRowAction: _propTypes.default.func.isRequired,
   hide_page_titles: _propTypes.default.bool,

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

@@ -13,6 +13,7 @@ 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';
+import FIRST_FORM from '../../json/firstForm.json';
 
 <Meta title="Components/Check your answers" id="D-CheckYourAnswers" component={ CheckYourAnswers } decorators={[withMock]} />
 
@@ -24,19 +25,19 @@ Renders the **Check your answers** screen for a form.
   <Story name="Default" parameters={{
     mockData: [
       {
-        url: `${USER_PROFILE_DATA.environmentContext.referenceDataUrl}/v2/entities/areYouACivilServant`,
+        url: `${USER_PROFILE_DATA.urls.refData}/areYouACivilServant`,
         method: 'GET',
         status: 200,
         response: CIVIL_SERVANT
       },
       {
-        url: `${USER_PROFILE_DATA.environmentContext.referenceDataUrl}/v2/entities/grade`,
+        url: `${USER_PROFILE_DATA.urls.refData}/grade`,
         method: 'GET',
         status: 200,
         response: GRADE
       },
       {
-        url: `${USER_PROFILE_DATA.environmentContext.referenceDataUrl}/v1/entities/team`,
+        url: `${USER_PROFILE_DATA.urls.refData}/team`,
         method: 'GET',
         status: 200,
         response: TEAMS
@@ -44,13 +45,16 @@ Renders the **Check your answers** screen for a form.
     ]
   }}>
     {() => {
-      const DATA = Utils.Data.setupForm(USER_PROFILE.pages, USER_PROFILE.components, USER_PROFILE_DATA)
+      const DATA = Utils.Data.setupForm(USER_PROFILE.pages, USER_PROFILE.components, USER_PROFILE_DATA);
       const PAGES = Utils.FormPage.getAll(USER_PROFILE.pages, USER_PROFILE.components, { ...DATA });
       const ON_ACTION = (action, patch, onError) => {
         console.log('action invoked', action, patch);
       };
+      const ON_ROW_ACTION = (page) => {
+        console.log('row action invoked', page);
+      };
       return (
-        <CheckYourAnswers pages={PAGES} onAction={ON_ACTION} />
+        <CheckYourAnswers pages={PAGES} onAction={ON_ACTION} onRowAction={ON_ROW_ACTION} />
       );
     }}
   </Story>
@@ -67,19 +71,19 @@ Renders the **Check your answers** screen for a form.
   <Story name="No page titles" parameters={{
     mockData: [
       {
-        url: `${USER_PROFILE_DATA.environmentContext.referenceDataUrl}/v2/entities/areYouACivilServant`,
+        url: `${USER_PROFILE_DATA.urls.refData}/areYouACivilServant`,
         method: 'GET',
         status: 200,
         response: CIVIL_SERVANT
       },
       {
-        url: `${USER_PROFILE_DATA.environmentContext.referenceDataUrl}/v2/entities/grade`,
+        url: `${USER_PROFILE_DATA.urls.refData}/grade`,
         method: 'GET',
         status: 200,
         response: GRADE
       },
       {
-        url: `${USER_PROFILE_DATA.environmentContext.referenceDataUrl}/v1/entities/team`,
+        url: `${USER_PROFILE_DATA.urls.refData}/team`,
         method: 'GET',
         status: 200,
         response: TEAMS
@@ -87,13 +91,58 @@ Renders the **Check your answers** screen for a form.
     ]
   }}>
     {() => {
-      const DATA = Utils.Data.setupForm(USER_PROFILE.pages, USER_PROFILE.components, USER_PROFILE_DATA)
+      const DATA = Utils.Data.setupForm(USER_PROFILE.pages, USER_PROFILE.components, USER_PROFILE_DATA);
       const PAGES = Utils.FormPage.getAll(USER_PROFILE.pages, USER_PROFILE.components, { ...DATA });
       const ON_ACTION = (action, patch, onError) => {
         console.log('action invoked', action, patch);
       };
+      const ON_ROW_ACTION = (page) => {
+        console.log('row action invoked', page);
+      };
+      return (
+        <CheckYourAnswers pages={PAGES} hide_page_titles={true} onAction={ON_ACTION} onRowAction={ON_ROW_ACTION} />
+      );
+    }}
+  </Story>
+</Canvas>
+
+### With actions
+
+<Canvas>
+  <Story name="With actions" parameters={{
+    mockData: [
+      {
+        url: `${USER_PROFILE_DATA.urls.refData}/areYouACivilServant`,
+        method: 'GET',
+        status: 200,
+        response: CIVIL_SERVANT
+      },
+      {
+        url: `${USER_PROFILE_DATA.urls.refData}/grade`,
+        method: 'GET',
+        status: 200,
+        response: GRADE
+      },
+      {
+        url: `${USER_PROFILE_DATA.urls.refData}/team`,
+        method: 'GET',
+        status: 200,
+        response: TEAMS
+      }
+    ]
+  }}>
+    {() => {
+      const DATA = { firstName: 'John', surname: 'Smith', age: 41 };
+      const PAGES = Utils.FormPage.getAll(FIRST_FORM.pages, FIRST_FORM.components, { ...DATA });
+      const ACTIONS = FIRST_FORM.cya.actions;
+      const ON_ACTION = (action, patch, onError) => {
+        console.log('action invoked', action, patch);
+      };
+      const ON_ROW_ACTION = (page) => {
+        console.log('row action invoked', page);
+      };
       return (
-        <CheckYourAnswers pages={PAGES} hide_page_titles={true} onAction={ON_ACTION} />
+        <CheckYourAnswers pages={PAGES} hide_page_titles={true} actions={ACTIONS} onAction={ON_ACTION} onRowAction={ON_ROW_ACTION} />
       );
     }}
   </Story>

package/dist/components/CheckYourAnswers/CheckYourAnswers.test.js

@@ -80,7 +80,7 @@ describe('components', function () {
     var container = null;
 
     var refDataUrl = function refDataUrl(suffix) {
-      return "".concat(_userProfileData.default.environmentContext.referenceDataUrl, "/").concat(suffix);
+      return "".concat(_userProfileData.default.urls.refData, "/").concat(suffix);
     };
 
     beforeEach(function () {
@@ -89,9 +89,9 @@ describe('components', function () {
       container = document.createElement('div');
       document.body.appendChild(container);
       mockAxios.reset();
-      mockAxios.onGet(refDataUrl('v2/entities/areYouACivilServant')).reply(200, _areYouACivilServant.default);
-      mockAxios.onGet(refDataUrl('v2/entities/grade')).reply(200, _grade.default);
-      mockAxios.onGet(refDataUrl('v1/entities/team')).reply(200, _team.default);
+      mockAxios.onGet(refDataUrl('areYouACivilServant')).reply(200, _areYouACivilServant.default);
+      mockAxios.onGet(refDataUrl('grade')).reply(200, _grade.default);
+      mockAxios.onGet(refDataUrl('team')).reply(200, _team.default);
     });
     afterEach(function () {
       (0, _reactDom.unmountComponentAtNode)(container);

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

@@ -24,19 +24,19 @@ on the basis of a <Link href="/?path=/docs/f-json-component">JSON</Link> configu
   <Story name="Default" parameters={{
     mockData: [
       {
-        url: `${USER_PROFILE_DATA.environmentContext.referenceDataUrl}/v2/entities/areYouACivilServant`,
+        url: `${USER_PROFILE_DATA.urls.refData}/areYouACivilServant`,
         method: 'GET',
         status: 200,
         response: CIVIL_SERVANT
       },
       {
-        url: `${USER_PROFILE_DATA.environmentContext.referenceDataUrl}/v2/entities/grade`,
+        url: `${USER_PROFILE_DATA.urls.refData}/grade`,
         method: 'GET',
         status: 200,
         response: GRADE
       },
       {
-        url: `${USER_PROFILE_DATA.environmentContext.referenceDataUrl}/v1/entities/team`,
+        url: `${USER_PROFILE_DATA.urls.refData}/team`,
         method: 'GET',
         status: 200,
         response: TEAMS
@@ -47,7 +47,7 @@ on the basis of a <Link href="/?path=/docs/f-json-component">JSON</Link> configu
       const COMPONENT = {
         ...USER_PROFILE.components.find(c => c.id === 'areYouACivilServant'),
         data: {
-          url: `${USER_PROFILE_DATA.environmentContext.referenceDataUrl}/v2/entities/areYouACivilServant`
+          url: `${USER_PROFILE_DATA.urls.refData}/areYouACivilServant`
         }
       };
       const ON_CHANGE = ({ target }) => {
@@ -71,19 +71,19 @@ on the basis of a <Link href="/?path=/docs/f-json-component">JSON</Link> configu
   <Story name="Autocomplete" parameters={{
     mockData: [
       {
-        url: `${USER_PROFILE_DATA.environmentContext.referenceDataUrl}/v2/entities/areYouACivilServant`,
+        url: `${USER_PROFILE_DATA.urls.refData}/areYouACivilServant`,
         method: 'GET',
         status: 200,
         response: CIVIL_SERVANT
       },
       {
-        url: `${USER_PROFILE_DATA.environmentContext.referenceDataUrl}/v2/entities/grade`,
+        url: `${USER_PROFILE_DATA.urls.refData}/grade`,
         method: 'GET',
         status: 200,
         response: GRADE
       },
       {
-        url: `${USER_PROFILE_DATA.environmentContext.referenceDataUrl}/v1/entities/team`,
+        url: `${USER_PROFILE_DATA.urls.refData}/team`,
         method: 'GET',
         status: 200,
         response: TEAMS
@@ -94,7 +94,7 @@ on the basis of a <Link href="/?path=/docs/f-json-component">JSON</Link> configu
       const COMPONENT = {
         ...USER_PROFILE.components.find(c => c.id === 'team'),
         data: {
-          url: `${USER_PROFILE_DATA.environmentContext.referenceDataUrl}/v1/entities/team`
+          url: `${USER_PROFILE_DATA.urls.refData}/team`
         }
       };
       const ON_CHANGE = ({ target }) => {
@@ -128,19 +128,19 @@ on the basis of a <Link href="/?path=/docs/f-json-component">JSON</Link> configu
   <Story name="Unwrapped autocomplete" parameters={{
     mockData: [
       {
-        url: `${USER_PROFILE_DATA.environmentContext.referenceDataUrl}/v2/entities/areYouACivilServant`,
+        url: `${USER_PROFILE_DATA.urls.refData}/areYouACivilServant`,
         method: 'GET',
         status: 200,
         response: CIVIL_SERVANT
       },
       {
-        url: `${USER_PROFILE_DATA.environmentContext.referenceDataUrl}/v2/entities/grade`,
+        url: `${USER_PROFILE_DATA.urls.refData}/grade`,
         method: 'GET',
         status: 200,
         response: GRADE
       },
       {
-        url: `${USER_PROFILE_DATA.environmentContext.referenceDataUrl}/v1/entities/team`,
+        url: `${USER_PROFILE_DATA.urls.refData}/team`,
         method: 'GET',
         status: 200,
         response: TEAMS
@@ -153,7 +153,7 @@ on the basis of a <Link href="/?path=/docs/f-json-component">JSON</Link> configu
         id: 'team2',
         fieldId: 'team2',
         data: {
-          url: `${USER_PROFILE_DATA.environmentContext.referenceDataUrl}/v1/entities/team`
+          url: `${USER_PROFILE_DATA.urls.refData}/team`
         }
       };
       const ON_CHANGE = ({ target }) => {

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

@@ -25,19 +25,19 @@ on the basis of a <Link href="/?path=/docs/f-json-page">JSON</Link> configuratio
   <Story name="Default" parameters={{
     mockData: [
       {
-        url: `${USER_PROFILE_DATA.environmentContext.referenceDataUrl}/v2/entities/areYouACivilServant`,
+        url: `${USER_PROFILE_DATA.urls.refData}/areYouACivilServant`,
         method: 'GET',
         status: 200,
         response: CIVIL_SERVANT
       },
       {
-        url: `${USER_PROFILE_DATA.environmentContext.referenceDataUrl}/v2/entities/grade`,
+        url: `${USER_PROFILE_DATA.urls.refData}/grade`,
         method: 'GET',
         status: 200,
         response: GRADE
       },
       {
-        url: `${USER_PROFILE_DATA.environmentContext.referenceDataUrl}/v1/entities/team`,
+        url: `${USER_PROFILE_DATA.urls.refData}/team`,
         method: 'GET',
         status: 200,
         response: TEAMS
@@ -68,19 +68,19 @@ on the basis of a <Link href="/?path=/docs/f-json-page">JSON</Link> configuratio
   <Story name="With autocomplete" parameters={{
     mockData: [
       {
-        url: `${USER_PROFILE_DATA.environmentContext.referenceDataUrl}/v2/entities/areYouACivilServant`,
+        url: `${USER_PROFILE_DATA.urls.refData}/areYouACivilServant`,
         method: 'GET',
         status: 200,
         response: CIVIL_SERVANT
       },
       {
-        url: `${USER_PROFILE_DATA.environmentContext.referenceDataUrl}/v2/entities/grade`,
+        url: `${USER_PROFILE_DATA.urls.refData}/grade`,
         method: 'GET',
         status: 200,
         response: GRADE
       },
       {
-        url: `${USER_PROFILE_DATA.environmentContext.referenceDataUrl}/v1/entities/team`,
+        url: `${USER_PROFILE_DATA.urls.refData}/team`,
         method: 'GET',
         status: 200,
         response: TEAMS

package/dist/components/FormPage/FormPage.test.js

@@ -36,7 +36,7 @@ describe('components', function () {
       id: 'pageId',
       title: 'Page 1',
       components: [TEXT],
-      actions: ['submit'],
+      actions: [_models.PageAction.TYPES.SUBMIT],
       formData: {
         text: VALUE
       }

package/dist/components/FormRenderer/FormRenderer.js

@@ -140,7 +140,7 @@ var FormRenderer = function FormRenderer(_ref) {
     // Check to see whether the action is able to proceed, which in
     // in the case of a submission will validate the fields in the page.
     if (_helpers.default.canActionProceed(action, formState.page, onError)) {
-      if (action.type === 'navigate') {
+      if (action.type === _models.PageAction.TYPES.NAVIGATE) {
         _handlers.default.navigate(action, pageId, onPageChange);
       } else {
         // Submit.
@@ -154,7 +154,12 @@ var FormRenderer = function FormRenderer(_ref) {
         } // Now submit the data to the backend...
 
 
-        hooks.onSubmit(action.type, submissionData, function () {
+        hooks.onSubmit(action.type, submissionData, function (response) {
+          // The backend response may well contain data we need so apply it.
+          setData(function (prev) {
+            return _objectSpread(_objectSpread({}, prev), response);
+          });
+
           var nextPageId = _helpers.default.getNextPageId(type, pages, pageId, action);
 
           onPageChange(nextPageId);

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

@@ -27,19 +27,19 @@ on the basis of a <Link href="/?path=/docs/f-json-form">JSON</Link> that describ
   <Story name="Default" parameters={{
     mockData: [
       {
-        url: `${USER_PROFILE_DATA.environmentContext.referenceDataUrl}/v2/entities/areYouACivilServant`,
+        url: `${USER_PROFILE_DATA.urls.refData}/areYouACivilServant`,
         method: 'GET',
         status: 200,
         response: CIVIL_SERVANT
       },
       {
-        url: `${USER_PROFILE_DATA.environmentContext.referenceDataUrl}/v2/entities/grade`,
+        url: `${USER_PROFILE_DATA.urls.refData}/grade`,
         method: 'GET',
         status: 200,
         response: GRADE
       },
       {
-        url: `${USER_PROFILE_DATA.environmentContext.referenceDataUrl}/v1/entities/team`,
+        url: `${USER_PROFILE_DATA.urls.refData}/team`,
         method: 'GET',
         status: 200,
         response: TEAMS

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

@@ -60,16 +60,16 @@ describe('components', function () {
     var container = null;
 
     var refDataUrl = function refDataUrl(suffix) {
-      return "".concat(_userProfileData.default.environmentContext.referenceDataUrl, "/").concat(suffix);
+      return "".concat(_userProfileData.default.urls.refData, "/").concat(suffix);
     };
 
     beforeEach(function () {
       container = document.createElement('div');
       document.body.appendChild(container);
       mockAxios.reset();
-      mockAxios.onGet(refDataUrl('v2/entities/areYouACivilServant')).reply(200, _areYouACivilServant.default);
-      mockAxios.onGet(refDataUrl('v2/entities/grade')).reply(200, _grade.default);
-      mockAxios.onGet(refDataUrl('v1/entities/team')).reply(200, _team.default);
+      mockAxios.onGet(refDataUrl('areYouACivilServant')).reply(200, _areYouACivilServant.default);
+      mockAxios.onGet(refDataUrl('grade')).reply(200, _grade.default);
+      mockAxios.onGet(refDataUrl('team')).reply(200, _team.default);
     });
     afterEach(function () {
       (0, _reactDom.unmountComponentAtNode)(container);

package/dist/components/PageActions/ActionButton.test.js

@@ -59,7 +59,7 @@ describe('components', function () {
         while (1) {
           switch (_context2.prev = _context2.next) {
             case 0:
-              ACTION = 'submit';
+              ACTION = _models.PageAction.TYPES.SUBMIT;
               _render2 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_ActionButton.default, {
                 action: ACTION,
                 onAction: ON_ACTION

package/dist/components/PageActions/PageActions.test.js

@@ -55,7 +55,7 @@ describe('components', function () {
         while (1) {
           switch (_context2.prev = _context2.next) {
             case 0:
-              ACTIONS = ['submit'];
+              ACTIONS = [_models.PageAction.TYPES.SUBMIT];
               _render2 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_PageActions.default, {
                 actions: ACTIONS,
                 onAction: ON_ACTION
@@ -120,11 +120,11 @@ describe('components', function () {
           switch (_context4.prev = _context4.next) {
             case 0:
               NAVIGATE = {
-                type: 'navigate',
+                type: _models.PageAction.TYPES.NAVIGATE,
                 url: '/alpha',
                 label: 'Alpha'
               };
-              ACTIONS = [NAVIGATE, 'submit'];
+              ACTIONS = [NAVIGATE, _models.PageAction.TYPES.SUBMIT];
               _render4 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_PageActions.default, {
                 actions: ACTIONS,
                 onAction: ON_ACTION

package/dist/components/index.js

@@ -27,6 +27,12 @@ Object.defineProperty(exports, "FormRenderer", {
     return _FormRenderer.default;
   }
 });
+Object.defineProperty(exports, "SummaryList", {
+  enumerable: true,
+  get: function get() {
+    return _SummaryList.default;
+  }
+});
 
 var _CheckYourAnswers = _interopRequireDefault(require("./CheckYourAnswers"));
 
@@ -36,4 +42,6 @@ var _FormPage = _interopRequireDefault(require("./FormPage"));
 
 var _FormRenderer = _interopRequireDefault(require("./FormRenderer"));
 
+var _SummaryList = _interopRequireDefault(require("./SummaryList"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/models/ComponentTypes.js

@@ -12,6 +12,7 @@ var TYPE_INSET_TEXT = 'inset-text';
 var TYPE_PHONE_NUMBER = 'phone-number';
 var TYPE_RADIOS = 'radios';
 var TYPE_TEXT = 'text';
+var TYPE_TEXT_AREA = 'textarea';
 var ComponentTypes = {
   AUTOCOMPLETE: TYPE_AUTOCOMPLETE,
   EMAIL: TYPE_EMAIL,
@@ -20,7 +21,8 @@ var ComponentTypes = {
   INSET_TEXT: TYPE_INSET_TEXT,
   PHONE_NUMBER: TYPE_PHONE_NUMBER,
   RADIOS: TYPE_RADIOS,
-  TEXT: TYPE_TEXT
+  TEXT: TYPE_TEXT,
+  TEXT_AREA: TYPE_TEXT_AREA
 };
 var _default = ComponentTypes;
 exports.default = _default;

package/dist/models/PageAction.js

@@ -9,19 +9,18 @@ var _DefaultPageActions;
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-var TYPE_SUBMIT = 'submit';
+var TYPE_NAVIGATE = 'navigate';
 var TYPE_SAVE_AND_CONTINUE = 'saveAndContinue';
 var TYPE_SAVE_AND_RETURN = 'saveAndReturn';
+var TYPE_SUBMIT = 'submit';
 var PageActionTypes = {
-  SUBMIT: TYPE_SUBMIT,
+  NAVIGATE: TYPE_NAVIGATE,
   SAVE_AND_CONTINUE: TYPE_SAVE_AND_CONTINUE,
-  SAVE_AND_RETURN: TYPE_SAVE_AND_RETURN
+  SAVE_AND_RETURN: TYPE_SAVE_AND_RETURN,
+  SUBMIT: TYPE_SUBMIT
 };
 exports.PageActionTypes = PageActionTypes;
-var DefaultPageActions = (_DefaultPageActions = {}, _defineProperty(_DefaultPageActions, TYPE_SUBMIT, {
-  type: TYPE_SUBMIT,
-  validate: true
-}), _defineProperty(_DefaultPageActions, TYPE_SAVE_AND_CONTINUE, {
+var DefaultPageActions = (_DefaultPageActions = {}, _defineProperty(_DefaultPageActions, TYPE_NAVIGATE, undefined), _defineProperty(_DefaultPageActions, TYPE_SAVE_AND_CONTINUE, {
   type: TYPE_SAVE_AND_CONTINUE,
   validate: true,
   label: 'Save and continue'
@@ -30,6 +29,9 @@ var DefaultPageActions = (_DefaultPageActions = {}, _defineProperty(_DefaultPage
   validate: false,
   label: 'Save and return later',
   classModifiers: 'secondary'
+}), _defineProperty(_DefaultPageActions, TYPE_SUBMIT, {
+  type: TYPE_SUBMIT,
+  validate: true
 }), _DefaultPageActions);
 exports.DefaultPageActions = DefaultPageActions;
 var PageAction = {

package/dist/utils/Component/getComponent.js

@@ -67,6 +67,11 @@ var getRadios = function getRadios(config) {
   }));
 };
 
+var getTextArea = function getTextArea(config) {
+  var attrs = (0, _cleanAttributes.default)(config);
+  return /*#__PURE__*/_react.default.createElement(_copReactComponents.TextArea, attrs);
+};
+
 var getTextInput = function getTextInput(config) {
   var attrs = (0, _cleanAttributes.default)(config);
   return /*#__PURE__*/_react.default.createElement(_copReactComponents.TextInput, attrs);
@@ -88,6 +93,9 @@ var getComponentByType = function getComponentByType(config) {
     case _models.ComponentTypes.PHONE_NUMBER:
       return getTextInput(config);
 
+    case _models.ComponentTypes.TEXT_AREA:
+      return getTextArea(config);
+
     case _models.ComponentTypes.AUTOCOMPLETE:
       return getAutocomplete(config);
 

package/dist/utils/Component/getComponent.test.js

@@ -325,5 +325,37 @@ describe('utils', function () {
         });
       });
     });
+    it('should return an appropriately rendered textarea component', function () {
+      var ID = 'test-id';
+      var FIELD_ID = 'field-id';
+      var LABEL = 'label';
+      var ROWS = 13;
+      var COMPONENT = {
+        type: _models.ComponentTypes.TEXT_AREA,
+        id: ID,
+        fieldId: FIELD_ID,
+        label: LABEL,
+        rows: ROWS,
+        'data-testid': ID
+      };
+
+      var _render10 = (0, _react.render)((0, _getComponent.default)(COMPONENT)),
+          container = _render10.container;
+
+      var _getAllByTestId9 = (0, _react.getAllByTestId)(container, ID),
+          _getAllByTestId10 = _slicedToArray(_getAllByTestId9, 2),
+          formGroup = _getAllByTestId10[0],
+          textarea = _getAllByTestId10[1];
+
+      expect(formGroup.tagName).toEqual('DIV');
+      expect(formGroup.classList).toContain('govuk-form-group');
+      var label = formGroup.childNodes[0];
+      expect(label.innerHTML).toContain(LABEL);
+      expect(label.getAttribute('for')).toEqual(ID);
+      expect(textarea.tagName).toEqual('TEXTAREA');
+      expect(textarea.classList).toContain('govuk-textarea');
+      expect(textarea.getAttribute('rows')).toEqual("".concat(ROWS));
+      expect(textarea.id).toEqual(ID);
+    });
   });
 });

package/dist/utils/Component/isEditable.js

@@ -8,7 +8,7 @@ exports.default = exports.EDITABLE_TYPES = void 0;
 var _models = require("../../models");
 
 // Local imports
-var EDITABLE_TYPES = [_models.ComponentTypes.AUTOCOMPLETE, _models.ComponentTypes.EMAIL, _models.ComponentTypes.PHONE_NUMBER, _models.ComponentTypes.RADIOS, _models.ComponentTypes.TEXT];
+var EDITABLE_TYPES = [_models.ComponentTypes.AUTOCOMPLETE, _models.ComponentTypes.EMAIL, _models.ComponentTypes.PHONE_NUMBER, _models.ComponentTypes.RADIOS, _models.ComponentTypes.TEXT, _models.ComponentTypes.TEXT_AREA];
 exports.EDITABLE_TYPES = EDITABLE_TYPES;
 
 var isEditable = function isEditable(options) {

package/dist/utils/Data/setupFormData.test.js

@@ -203,12 +203,12 @@ describe('utils', function () {
         // and data calculated for the fields, based on that source data.
 
         expect(RESULT).toEqual(_objectSpread(_objectSpread({}, _userProfileData.default), {}, {
-          firstName: _userProfileData.default.keycloakContext.givenName,
-          surname: _userProfileData.default.keycloakContext.familyName,
-          team: _userProfileData.default.staffDetailsDataContext.defaultteam,
-          staffGradeId: _userProfileData.default.staffDetailsDataContext.gradeid,
-          linemanagerEmail: _userProfileData.default.extendedStaffDetailsContext.linemanagerEmail,
-          delegateEmails: _userProfileData.default.extendedStaffDetailsContext.delegateEmails
+          firstName: _userProfileData.default.currentUser.givenName,
+          surname: _userProfileData.default.currentUser.familyName,
+          team: _userProfileData.default.userDetails.defaultteam,
+          staffGradeId: _userProfileData.default.userDetails.gradeid,
+          linemanagerEmail: _userProfileData.default.userDetails.linemanagerEmail,
+          delegateEmails: _userProfileData.default.userDetails.delegateEmails
         }));
       });
     });

package/dist/utils/Data/setupRefDataUrlForComponent.test.js

@@ -9,7 +9,7 @@ describe('utils', function () {
   describe('Data', function () {
     describe('setupRefDataUrlForComponent', function () {
       var DATA = {
-        environmentContext: {
+        urls: {
           refData: '/ref-data'
         }
       };
@@ -39,13 +39,13 @@ describe('utils', function () {
           id: 'component',
           // eslint-disable-next-line no-template-curly-in-string
           data: {
-            url: '${environmentContext.refData}/v1/teams'
+            url: '${urls.refData}/v1/teams'
           }
         };
         expect((0, _setupRefDataUrlForComponent.default)(COMPONENT, DATA)).toEqual({
           id: COMPONENT.id,
           data: {
-            url: "".concat(DATA.environmentContext.refData, "/v1/teams")
+            url: "".concat(DATA.urls.refData, "/v1/teams")
           }
         });
       });
@@ -68,7 +68,7 @@ describe('utils', function () {
           id: 'component',
           // eslint-disable-next-line no-template-curly-in-string
           data: {
-            url: '${environmentContext.referenceData}/v1/teams'
+            url: '${urls.referenceData}/v1/teams'
           }
         };
         expect((0, _setupRefDataUrlForComponent.default)(COMPONENT, DATA)).toEqual({

package/dist/utils/FormPage/getFormPage.js

@@ -44,7 +44,7 @@ var getFormPage = function getFormPage(pageOptions, formComponents, formData) {
       ret = _objectSpread({}, componentOptions);
     }
 
-    return formData && formData.environmentContext ? _Data.default.refData.setupUrl(ret, formData) : ret;
+    return formData && formData.urls ? _Data.default.refData.setupUrl(ret, formData) : ret;
   });
   return _objectSpread(_objectSpread({}, pageOptions), {}, {
     formData: formData,

package/dist/utils/FormPage/getFormPage.test.js

@@ -30,11 +30,11 @@ describe('utils', function () {
         label: 'Charlie',
         type: 'radios',
         data: {
-          url: '${environmentContext.refData}/v3/charlies'
+          url: '${urls.refData}/v3/charlies'
         }
       }];
       var FORM_DATA = {
-        environmentContext: {
+        urls: {
           refData: 'https://ho.gov.uk/ref-data/'
         }
       };
@@ -137,7 +137,7 @@ describe('utils', function () {
           }, C), {}, {
             cya_label: C.label,
             data: {
-              url: "".concat(FORM_DATA.environmentContext.refData, "/v3/charlies")
+              url: "".concat(FORM_DATA.urls.refData, "/v3/charlies")
             }
           })],
           formData: FORM_DATA

package/dist/utils/FormPage/getFormPages.test.js

@@ -30,11 +30,11 @@ describe('utils', function () {
         label: 'Charlie',
         type: 'radios',
         data: {
-          url: '${environmentContext.refData}/v3/charlies'
+          url: '${urls.refData}/v3/charlies'
         }
       }];
       var FORM_DATA = {
-        environmentContext: {
+        urls: {
           refData: 'https://ho.gov.uk/ref-data/'
         }
       };
@@ -84,7 +84,7 @@ describe('utils', function () {
           }, C), {}, {
             cya_label: C.label,
             data: {
-              url: "".concat(FORM_DATA.environmentContext.refData, "/v3/charlies")
+              url: "".concat(FORM_DATA.urls.refData, "/v3/charlies")
             }
           })],
           formData: FORM_DATA

package/dist/utils/Hub/getFormHub.test.js

@@ -32,11 +32,11 @@ describe('utils', function () {
         label: 'Charlie',
         type: 'radios',
         data: {
-          url: '${environmentContext.refData}/v3/charlies'
+          url: '${urls.refData}/v3/charlies'
         }
       }];
       var FORM_DATA = {
-        environmentContext: {
+        urls: {
           refData: 'https://ho.gov.uk/ref-data/'
         }
       };

package/package.json

@@ -1,21 +1,22 @@
 {
   "name": "@ukhomeoffice/cop-react-form-renderer",
-  "version": "1.0.0-alpha",
+  "version": "1.0.0",
   "private": false,
   "scripts": {
     "clean": "rimraf dist",
     "test": "react-scripts test",
+    "test:coverage": "yarn test --coverage --watchAll=false",
     "lint": "eslint --ext .js,.jsx src",
-    "storybook:start": "start-storybook --docs --no-manager-cache -p 6007",
+    "storybook:start": "start-storybook --docs -s src/assets --no-manager-cache -p 6007",
     "storybook:build": "build-storybook --docs -s src/assets",
     "storybook:deploy": "yarn deploy-storybook",
     "storybook": "yarn storybook:start",
     "deploy-storybook": "storybook-to-ghpages -e storybook-static",
     "compile": "yarn clean && cross-env NODE_ENV=production babel src --out-dir dist --copy-files && yarn post-compile",
-    "post-compile": "rimraf dist/**/*.test.* dist/**/*.stories.* dist/json dist/assets"
+    "post-compile": "rimraf dist/*.test.* dist/**/*.test.* dist/**/*.stories.* dist/docs dist/json dist/assets"
   },
   "dependencies": {
-    "@ukhomeoffice/cop-react-components": "^0.6.0",
+    "@ukhomeoffice/cop-react-components": "^0.7.0",
     "axios": "^0.21.1",
     "govuk-frontend": "^3.13.0",
     "web-vitals": "^1.0.1"
@@ -44,14 +45,14 @@
     "cross-env": "^7.0.3",
     "html-react-parser": "^0.10.5",
     "node-sass": "^6.0.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
     "react-scripts": "4.0.3",
     "storybook-addon-mock": "^2.0.1"
   },
   "peerDependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
     "react-scripts": "4.0.3"
   },
   "optionalDependencies": {

package/dist/index.test.js

@@ -1,18 +0,0 @@
-"use strict";
-
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
-var _ = _interopRequireWildcard(require("."));
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-// Local imports
-it('should have exported everything appropriately', function () {
-  expect(_.default).toBeDefined();
-  expect(_.FormTypes).toBeDefined();
-  expect(_.HubFormats).toBeDefined();
-  expect(_.intercepts).toBeDefined();
-  expect(_.Utils).toBeDefined();
-});