@ukhomeoffice/cop-react-form-renderer 2.0.0 → 2.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -36,3 +36,15 @@ Runs Storybook on [http://localhost:6007](http://localhost:6007), which showcase
 ### `yarn storybook:build`
 
 Builds Storybook for production to the `storybook-static` folder.
+
+# Using the Service
+## Versioning
+For versioning this project uses SemVer.
+
+## Authors
+This project is authored by the Home Office.
+
+## License
+This project is licensed under the MIT license. For details please see [License](./LICENSE).
+
+This project contains public sector information licensed under the Open Government Licence v3.0. (http://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/)

package/dist/components/CheckYourAnswers/CheckYourAnswers.js

@@ -61,7 +61,10 @@ var CheckYourAnswers = function CheckYourAnswers(_ref) {
       _onAction = _ref.onAction,
       onRowAction = _ref.onRowAction,
       hide_page_titles = _ref.hide_page_titles,
-      hide_actions = _ref.hide_actions;
+      hide_actions = _ref.hide_actions,
+      hide_title = _ref.hide_title,
+      summaryListClassModifiers = _ref.summaryListClassModifiers,
+      noChangeAction = _ref.noChangeAction;
 
   var _useState = (0, _react.useState)([]),
       _useState2 = _slicedToArray(_useState, 2),
@@ -109,7 +112,7 @@ var CheckYourAnswers = function CheckYourAnswers(_ref) {
 
   return /*#__PURE__*/_react.default.createElement("div", {
     className: DEFAULT_CLASS
-  }, title && /*#__PURE__*/_react.default.createElement(_copReactComponents.LargeHeading, {
+  }, title && !hide_title && /*#__PURE__*/_react.default.createElement(_copReactComponents.LargeHeading, {
     key: "heading"
   }, title), errors && errors.length > 0 && /*#__PURE__*/_react.default.createElement(_copReactComponents.ErrorSummary, {
     errors: errors
@@ -120,7 +123,9 @@ var CheckYourAnswers = function CheckYourAnswers(_ref) {
       key: pageIndex
     }, !hide_page_titles && page.title && /*#__PURE__*/_react.default.createElement(_copReactComponents.MediumHeading, null, page.title), /*#__PURE__*/_react.default.createElement(_SummaryList.default, {
       className: className,
-      rows: page.rows
+      rows: page.rows,
+      classModifiers: summaryListClassModifiers,
+      noChangeAction: noChangeAction
     }));
   }), !hide_actions && /*#__PURE__*/_react.default.createElement(_PageActions.default, {
     actions: actions,
@@ -137,12 +142,18 @@ CheckYourAnswers.propTypes = {
   onAction: _propTypes.default.func.isRequired,
   onRowAction: _propTypes.default.func.isRequired,
   hide_page_titles: _propTypes.default.bool,
-  hide_actions: _propTypes.default.bool
+  hide_actions: _propTypes.default.bool,
+  hide_title: _propTypes.default.bool,
+  summaryListClassModifiers: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
+  noChangeAction: _propTypes.default.bool
 };
 CheckYourAnswers.defaultProps = {
   title: DEFAULT_TITLE,
   hide_page_titles: false,
-  hide_actions: false
+  hide_actions: false,
+  hide_title: false,
+  summaryListClassModifiers: null,
+  noChangeAction: false
 };
 var _default = CheckYourAnswers;
 exports.default = _default;

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

@@ -1,13 +1,21 @@
 <!-- Global imports -->
+
 import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
-import { Details, Heading, Link, Tag } from '@ukhomeoffice/cop-react-components';
+import {
+  Details,
+  Heading,
+  Link,
+  Tag,
+} from '@ukhomeoffice/cop-react-components';
 import withMock from 'storybook-addon-mock';
 
 <!-- Local imports -->
+
 import Utils from '../../utils';
 import CheckYourAnswers from './CheckYourAnswers';
 
 <!-- JSON documents -->
+
 import CIVIL_SERVANT from '../../json/areYouACivilServant.json';
 import GRADE from '../../json/grade.json';
 import TEAMS from '../../json/team.json';
@@ -15,38 +23,56 @@ 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]} />
+<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.
 
 <Canvas withToolbar>
-  <Story name="Default" 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
-      }
-    ]
-  }}>
+  <Story
+    name='Default'
+    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 = 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 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);
       };
@@ -54,45 +80,61 @@ Renders the **Check your answers** screen for a form.
         console.log('row action invoked', page);
       };
       return (
-        <CheckYourAnswers pages={PAGES} onAction={ON_ACTION} onRowAction={ON_ROW_ACTION} />
+        <CheckYourAnswers
+          pages={PAGES}
+          onAction={ON_ACTION}
+          onRowAction={ON_ROW_ACTION}
+        />
       );
     }}
   </Story>
 </Canvas>
 
-<Details summary="Properties" className="no-indent">
-  <ArgsTable of={ CheckYourAnswers } />
+<Details summary='Properties' className='no-indent'>
+  <ArgsTable of={CheckYourAnswers} />
 </Details>
 
 ## Variant
+
 ### Without page titles
 
 <Canvas>
-  <Story name="No page titles" 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
-      }
-    ]
-  }}>
+  <Story
+    name='No page titles'
+    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 = 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 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);
       };
@@ -100,7 +142,12 @@ Renders the **Check your answers** screen for a form.
         console.log('row action invoked', page);
       };
       return (
-        <CheckYourAnswers pages={PAGES} hide_page_titles={true} onAction={ON_ACTION} onRowAction={ON_ROW_ACTION} />
+        <CheckYourAnswers
+          pages={PAGES}
+          hide_page_titles={true}
+          onAction={ON_ACTION}
+          onRowAction={ON_ROW_ACTION}
+        />
       );
     }}
   </Story>
@@ -109,31 +156,38 @@ Renders the **Check your answers** screen for a form.
 ### 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
-      }
-    ]
-  }}>
+  <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 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);
@@ -142,7 +196,73 @@ Renders the **Check your answers** screen for a form.
         console.log('row action invoked', page);
       };
       return (
-        <CheckYourAnswers pages={PAGES} hide_page_titles={true} actions={ACTIONS} onAction={ON_ACTION} onRowAction={ON_ROW_ACTION} />
+        <CheckYourAnswers
+          pages={PAGES}
+          hide_page_titles={true}
+          actions={ACTIONS}
+          onAction={ON_ACTION}
+          onRowAction={ON_ROW_ACTION}
+        />
+      );
+    }}
+  </Story>
+</Canvas>
+
+### Read-only style
+
+<Canvas>
+  <Story
+    name='Read-only style'
+    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 = 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}
+          hide_title={true}
+          summaryListClassModifiers='no-border'
+          noChangeAction={true}
+        />
       );
     }}
   </Story>

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

@@ -328,5 +328,49 @@ describe('components', function () {
         }
       }, _callee10);
     })));
+    it('should show no title if is set to hidden', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee12() {
+      var cya, _cya$childNodes4, names, _names$childNodes2, firstName, surname;
+
+      return regeneratorRuntime.wrap(function _callee12$(_context12) {
+        while (1) {
+          switch (_context12.prev = _context12.next) {
+            case 0:
+              _context12.next = 2;
+              return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee11() {
+                return regeneratorRuntime.wrap(function _callee11$(_context11) {
+                  while (1) {
+                    switch (_context11.prev = _context11.next) {
+                      case 0:
+                        (0, _reactDom.render)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
+                          pages: PAGES,
+                          onRowAction: ON_ROW_ACTION,
+                          onAction: ON_ACTION,
+                          hide_title: true
+                        }), container);
+
+                      case 1:
+                      case "end":
+                        return _context11.stop();
+                    }
+                  }
+                }, _callee11);
+              })));
+
+            case 2:
+              cya = checkCYA(container);
+              _cya$childNodes4 = _slicedToArray(cya.childNodes, 1), names = _cya$childNodes4[0];
+              expect(names.tagName).toEqual('DL');
+              expect(names.classList).toContain("govuk-!-margin-bottom-".concat(_CheckYourAnswers.DEFAULT_MARGIN_BOTTOM));
+              _names$childNodes2 = _slicedToArray(names.childNodes, 2), firstName = _names$childNodes2[0], surname = _names$childNodes2[1];
+              checkRow(firstName, 'First name', 'John', false);
+              checkRow(surname, 'Last name', 'Smith', false);
+
+            case 9:
+            case "end":
+              return _context12.stop();
+          }
+        }
+      }, _callee12);
+    })));
   });
 });

package/dist/components/FormRenderer/FormRenderer.js

@@ -69,7 +69,10 @@ var FormRenderer = function FormRenderer(_ref) {
       _hooks = _ref.hooks,
       classBlock = _ref.classBlock,
       classModifiers = _ref.classModifiers,
-      className = _ref.className;
+      className = _ref.className,
+      hide_title = _ref.hide_title,
+      summaryListClassModifiers = _ref.summaryListClassModifiers,
+      noChangeAction = _ref.noChangeAction;
 
   // Set up the initial states.
   var _useState = (0, _react.useState)({}),
@@ -218,11 +221,14 @@ var FormRenderer = function FormRenderer(_ref) {
 
   return /*#__PURE__*/_react.default.createElement("div", {
     className: classes()
-  }, title && pageId === _models.FormPages.HUB && /*#__PURE__*/_react.default.createElement(_copReactComponents.LargeHeading, null, title), formState.cya && /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, _extends({
+  }, title && !hide_title && pageId === _models.FormPages.HUB && /*#__PURE__*/_react.default.createElement(_copReactComponents.LargeHeading, null, title), formState.cya && /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, _extends({
     pages: pages
   }, cya, formState.cya, {
     onAction: onCYAAction,
-    onRowAction: onCYARowAction
+    onRowAction: onCYARowAction,
+    summaryListClassModifiers: summaryListClassModifiers,
+    hide_title: hide_title,
+    noChangeAction: noChangeAction
   })), formState.page && /*#__PURE__*/_react.default.createElement(_FormPage.default, {
     page: formState.page,
     onAction: onPageAction
@@ -247,14 +253,20 @@ FormRenderer.propTypes = {
   }),
   classBlock: _propTypes.default.string,
   classModifiers: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
-  className: _propTypes.default.string
+  className: _propTypes.default.string,
+  hide_title: _propTypes.default.bool,
+  summaryListClassModifiers: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
+  noChangeAction: _propTypes.default.bool
 };
 FormRenderer.defaultProps = {
   type: _models.FormTypes.HUB,
   components: [],
   pages: [],
   classBlock: DEFAULT_CLASS,
-  classModifiers: []
+  classModifiers: [],
+  hide_title: false,
+  summaryListClassModifiers: [],
+  noChangeAction: false
 };
 var _default = FormRenderer;
 exports.default = _default;

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

@@ -1,14 +1,23 @@
 <!-- Global imports -->
+
 import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
-import { Button, Details, Heading, Link, Panel } from '@ukhomeoffice/cop-react-components';
+import {
+  Button,
+  Details,
+  Heading,
+  Link,
+  Panel,
+} from '@ukhomeoffice/cop-react-components';
 import { useState } from 'react';
 import withMock from 'storybook-addon-mock';
 
 <!-- Local imports -->
+
 import { addHook } from '../../hooks/useHooks';
 import FormRenderer from './FormRenderer';
 
 <!-- JSON documents -->
+
 import CIVIL_SERVANT from '../../json/areYouACivilServant.json';
 import FIRST_FORM from '../../json/firstForm.json';
 import GRADE from '../../json/grade.json';
@@ -16,52 +25,60 @@ 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]} />
+<Meta
+  title='Components/Form renderer'
+  id='D-FormRenderer'
+  component={FormRenderer}
+  decorators={[withMock]}
+/>
 
-<Heading size="xl" caption="Components">Form renderer</Heading>
+<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.
 
 <Canvas withToolbar>
-  <Story name="Default" 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
-      }
-    ]
-  }}>
+  <Story
+    name='Default'
+    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,
+        },
+      ],
+    }}
+  >
     {() => {
-      return (
-        <FormRenderer {...USER_PROFILE} data={USER_PROFILE_DATA} />
-      );
+      return <FormRenderer {...USER_PROFILE} data={USER_PROFILE_DATA} />;
     }}
   </Story>
 </Canvas>
 
-<Details summary="Properties" className="no-indent">
-  <ArgsTable of={ FormRenderer } />
+<Details summary='Properties' className='no-indent'>
+  <ArgsTable of={FormRenderer} />
 </Details>
 
 ## CYA type
 
 <Canvas>
-  <Story name="CYA">
+  <Story name='CYA'>
     {() => {
       const [complete, setComplete] = useState(false);
       const [returnLater, setReturnLater] = useState(false);
@@ -82,7 +99,12 @@ on the basis of a <Link href="/?path=/docs/f-json-form">JSON</Link> that describ
         setReturnLater(!!pageId === false);
       });
       addHook('onSubmit', (type, payload, onSuccess, onError) => {
-        console.log('onSubmit called of type', type, 'called, with the payload', payload);
+        console.log(
+          'onSubmit called of type',
+          type,
+          'called, with the payload',
+          payload
+        );
         onSuccess();
       });
       const reset = () => {
@@ -91,25 +113,69 @@ on the basis of a <Link href="/?path=/docs/f-json-form">JSON</Link> that describ
       };
       return (
         <>
-        {!complete && !returnLater && <FormRenderer {...FIRST_FORM} data={{}} />}
-        {complete &&
-          <div>
-            <Panel title="Submission successful">
-              Your submission was successful.
-            </Panel>
-            <Button onClick={() => reset()}>Start again</Button>
-          </div>
-        }
-        {!complete && returnLater &&
-          <div>
-            <Panel title="Saved to return later">
-              You clicked on "Save and return later".
-            </Panel>
-            <Button onClick={() => reset()}>Start again</Button>
-          </div>
-        }
+          {!complete && !returnLater && (
+            <FormRenderer {...FIRST_FORM} data={{}} />
+          )}
+          {complete && (
+            <div>
+              <Panel title='Submission successful'>
+                Your submission was successful.
+              </Panel>
+              <Button onClick={() => reset()}>Start again</Button>
+            </div>
+          )}
+          {!complete && returnLater && (
+            <div>
+              <Panel title='Saved to return later'>
+                You clicked on "Save and return later".
+              </Panel>
+              <Button onClick={() => reset()}>Start again</Button>
+            </div>
+          )}
         </>
       );
     }}
   </Story>
 </Canvas>
+
+## Read-only style
+
+<Canvas>
+  <Story
+    name='Read-only style'
+    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,
+        },
+      ],
+    }}
+  >
+    {() => {
+      return (
+        <FormRenderer
+          {...USER_PROFILE}
+          data={USER_PROFILE_DATA}
+          summaryListClassModifiers='no-border'
+          hide_title={true}
+          noChangeAction={true}
+        />
+      );
+    }}
+  </Story>
+</Canvas>

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

@@ -467,5 +467,45 @@ describe('components', function () {
         }
       }, _callee12);
     })));
+    it('should show no title when hide_title is set to true', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee14() {
+      var form, hub;
+      return regeneratorRuntime.wrap(function _callee14$(_context14) {
+        while (1) {
+          switch (_context14.prev = _context14.next) {
+            case 0:
+              _context14.next = 2;
+              return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee13() {
+                return regeneratorRuntime.wrap(function _callee13$(_context13) {
+                  while (1) {
+                    switch (_context13.prev = _context13.next) {
+                      case 0:
+                        (0, _reactDom.render)( /*#__PURE__*/_react2.default.createElement(_FormRenderer.default, _extends({}, _userProfile.default, {
+                          data: _userProfileData.default,
+                          hide_title: true
+                        })), container);
+
+                      case 1:
+                      case "end":
+                        return _context13.stop();
+                    }
+                  }
+                }, _callee13);
+              })));
+
+            case 2:
+              form = checkForm(container);
+              expect(form.childNodes.length).toEqual(1); //Hub page (= CYA)
+
+              hub = form.childNodes[0];
+              expect(hub.tagName).toEqual('DIV');
+              expect(hub.classList).toContain(_CheckYourAnswers.DEFAULT_CLASS);
+
+            case 7:
+            case "end":
+              return _context14.stop();
+          }
+        }
+      }, _callee14);
+    })));
   });
 });

package/dist/components/SummaryList/SummaryList.js

@@ -15,7 +15,7 @@ var _RowAction = _interopRequireDefault(require("./RowAction"));
 
 require("./SummaryList.scss");
 
-var _excluded = ["rows", "classBlock", "classModifiers", "className"];
+var _excluded = ["rows", "noChangeAction", "classBlock", "classModifiers", "className"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -30,6 +30,7 @@ exports.DEFAULT_CLASS = DEFAULT_CLASS;
 
 var SummaryList = function SummaryList(_ref) {
   var rows = _ref.rows,
+      noChangeAction = _ref.noChangeAction,
       classBlock = _ref.classBlock,
       classModifiers = _ref.classModifiers,
       className = _ref.className,
@@ -47,7 +48,7 @@ var SummaryList = function SummaryList(_ref) {
       className: classes('key')
     }, row.key), /*#__PURE__*/_react.default.createElement("dd", {
       className: classes('value')
-    }, row.value), /*#__PURE__*/_react.default.createElement("dd", {
+    }, row.value), !noChangeAction && /*#__PURE__*/_react.default.createElement("dd", {
       className: classes('actions')
     }, row.action && /*#__PURE__*/_react.default.createElement(_RowAction.default, {
       row: row
@@ -70,10 +71,12 @@ SummaryList.propTypes = {
   })).isRequired,
   classBlock: _propTypes.default.string,
   classModifiers: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
-  className: _propTypes.default.string
+  className: _propTypes.default.string,
+  noChangeAction: _propTypes.default.bool
 };
 SummaryList.defaultProps = {
-  classBlock: DEFAULT_CLASS
+  classBlock: DEFAULT_CLASS,
+  noChangeAction: false
 };
 var _default = SummaryList;
 exports.default = _default;

package/dist/components/SummaryList/SummaryList.scss

@@ -1,5 +1,5 @@
-@import "node_modules/govuk-frontend/govuk/_base";
-@import "node_modules/govuk-frontend/govuk/components/summary-list/_summary-list";
+@import 'node_modules/govuk-frontend/govuk/_base';
+@import 'node_modules/govuk-frontend/govuk/components/summary-list/_summary-list';
 
 .govuk-summary-list__actions {
   .govuk-link {
@@ -7,3 +7,11 @@
     cursor: pointer;
   }
 }
+
+.caseview__key {
+  font-weight: normal;
+}
+
+.caseview__value {
+  @include govuk-typography-weight-bold;
+}

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

@@ -1,36 +1,90 @@
 <!-- Global imports -->
+
 import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
 import { Details, Heading } from '@ukhomeoffice/cop-react-components';
 
 <!-- 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.
 
 <Canvas withToolbar>
-  <Story name="Default">
+  <Story name='Default'>
     {() => {
       const onAction = (row) => {
         console.log('action clicked', row);
       };
       const ROWS = [
-        { pageId: 'p1', fieldId: 'forename', key: 'Forename(s)', value: 'John' },
+        {
+          pageId: 'p1',
+          fieldId: 'forename',
+          key: 'Forename(s)',
+          value: 'John',
+        },
         { pageId: 'p1', fieldId: 'surname', key: 'Surname', value: 'Smith' },
-        { pageId: 'p2', fieldId: 'dob', key: 'Date of birth', value: '29/08/1993', action: { label: 'Change', onAction } },
+        {
+          pageId: 'p2',
+          fieldId: 'dob',
+          key: 'Date of birth',
+          value: '29/08/1993',
+          action: { label: 'Change', onAction },
+        },
       ];
-      return (
-        <SummaryList rows={ROWS} />
-      );
+      return <SummaryList rows={ROWS} />;
     }}
   </Story>
 </Canvas>
 
-<Details summary="Properties" className="no-indent">
-  <ArgsTable of={ SummaryList } />
+<Details summary='Properties' className='no-indent'>
+  <ArgsTable of={SummaryList} />
 </Details>
+
+## Variant
+
+### Read-only style
+
+<Canvas>
+  <Story name='Read-only style'>
+    {() => {
+      const onAction = (row) => {
+        console.log('action clicked', row);
+      };
+      const ROWS = [
+        {
+          pageId: 'p1',
+          fieldId: 'forename',
+          key: 'Forename(s)',
+          value: 'John',
+        },
+        { pageId: 'p1', fieldId: 'surname', key: 'Surname', value: 'Smith' },
+        {
+          pageId: 'p2',
+          fieldId: 'dob',
+          key: 'Date of birth',
+          value: '29/08/1993',
+          action: { label: 'Change', onAction },
+        },
+      ];
+      return (
+        <SummaryList
+          classModifiers='no-border'
+          rows={ROWS}
+          noChangeAction={true}
+        />
+      );
+    }}
+  </Story>
+</Canvas>

package/dist/components/SummaryList/SummaryList.test.js

@@ -54,6 +54,23 @@ describe('components', function () {
       return [key, value, actions];
     };
 
+    var checkRowNoChangeActions = function checkRowNoChangeActions(summaryList, index) {
+      var row = summaryList.childNodes[index];
+      expect(row.tagName).toEqual('DIV');
+      expect(row.classList).toContain("".concat(_SummaryList.DEFAULT_CLASS, "__row"));
+
+      var _row$childNodes2 = _slicedToArray(row.childNodes, 2),
+          key = _row$childNodes2[0],
+          value = _row$childNodes2[1];
+
+      expect(key.tagName).toEqual('DT');
+      expect(key.classList).toContain("".concat(_SummaryList.DEFAULT_CLASS, "__key"));
+      expect(value.tagName).toEqual('DD');
+      expect(value.classList).toContain("".concat(_SummaryList.DEFAULT_CLASS, "__value"));
+      expect(row.childNodes.length).toEqual(2);
+      return [key, value];
+    };
+
     it('should handle an empty rows array', function () {
       var ID = 'test-id';
       var ROWS = [];
@@ -193,5 +210,42 @@ describe('components', function () {
         expect(ON_ACTION_CALLS[index]).toEqual(row);
       });
     });
+    it('should handle rows with component values and actions set to hidden', function () {
+      var ID = 'test-id';
+      var VALUES = ['Alpha component value', 'Bravo component value'];
+      var ROWS = [{
+        pageId: 'p1',
+        fieldId: 'a',
+        key: 'Alpha',
+        value: /*#__PURE__*/_react2.default.createElement("div", null, VALUES[0])
+      }, {
+        pageId: 'p2',
+        fieldId: 'b',
+        key: 'Bravo',
+        value: /*#__PURE__*/_react2.default.createElement("div", null, VALUES[1])
+      }];
+
+      var _render5 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_SummaryList.default, {
+        "data-testid": ID,
+        rows: ROWS,
+        noChangeAction: true
+      })),
+          container = _render5.container;
+
+      var summaryList = checkSummaryList(container, ID);
+      expect(summaryList.childNodes.length).toEqual(ROWS.length);
+      ROWS.forEach(function (row, index) {
+        var _checkRowNoChangeActi = checkRowNoChangeActions(summaryList, index),
+            _checkRowNoChangeActi2 = _slicedToArray(_checkRowNoChangeActi, 2),
+            key = _checkRowNoChangeActi2[0],
+            value = _checkRowNoChangeActi2[1];
+
+        expect(key.textContent).toEqual(row.key);
+        expect(value.childNodes.length).toEqual(1);
+        var valueDiv = value.childNodes[0];
+        expect(valueDiv.tagName).toEqual('DIV');
+        expect(valueDiv.textContent).toEqual(VALUES[index]);
+      });
+    });
   });
 });

package/dist/index.js

@@ -21,6 +21,12 @@ Object.defineProperty(exports, "HubFormats", {
     return _models.HubFormats;
   }
 });
+Object.defineProperty(exports, "SummaryList", {
+  enumerable: true,
+  get: function get() {
+    return _SummaryList.default;
+  }
+});
 Object.defineProperty(exports, "Utils", {
   enumerable: true,
   get: function get() {
@@ -31,6 +37,8 @@ exports.intercepts = exports.default = void 0;
 
 var _FormRenderer = _interopRequireDefault(require("./components/FormRenderer"));
 
+var _SummaryList = _interopRequireDefault(require("./components/SummaryList"));
+
 var _useHooks = require("./hooks/useHooks");
 
 var _models = require("./models");

package/dist/utils/Validate/validateComponent.js

@@ -31,7 +31,7 @@ var validateComponent = function validateComponent(component, formData) {
     var value = data[component.fieldId];
 
     if (component.required) {
-      error = (0, _validateRequired.default)(value, component.label);
+      error = (0, _validateRequired.default)(value, component.label, component.custom_errors);
     }
 
     if (!error && component.type === _models.ComponentTypes.EMAIL) {

package/dist/utils/Validate/validateRequired.js

@@ -14,6 +14,7 @@ exports.default = void 0;
  */
 var validateRequired = function validateRequired(value) {
   var label = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  var customErrors = arguments.length > 2 ? arguments[2] : undefined;
   var hasValue = false;
 
   if (!!value || value === false || value === 0) {
@@ -27,6 +28,16 @@ var validateRequired = function validateRequired(value) {
   }
 
   if (!hasValue) {
+    if (Array.isArray(customErrors)) {
+      var result = customErrors.filter(function (error) {
+        return error.type === 'required';
+      });
+
+      if (result && result.length > 0 && result[0].message) {
+        return result[0].message;
+      }
+    }
+
     var name = label ? label : 'Field';
     return "".concat(name, " is required");
   }

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

@@ -45,6 +45,18 @@ describe('utils', function () {
       it('should use a default label when none is specified', function () {
         expect((0, _validateRequired.default)(undefined, undefined)).toEqual('Field is required');
       });
+      it('should use a custom error when one is provided', function () {
+        expect((0, _validateRequired.default)(undefined, undefined, [{
+          type: 'required',
+          message: 'custom error message'
+        }])).toEqual('custom error message');
+      });
+      it('should ignore a custom error when not of type required', function () {
+        expect((0, _validateRequired.default)(undefined, undefined, [{
+          type: 'genericError',
+          message: 'generic error message'
+        }])).toEqual('Field is required');
+      });
     });
   });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ukhomeoffice/cop-react-form-renderer",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "private": false,
   "scripts": {
     "clean": "rimraf dist",