@ukhomeoffice/cop-react-form-renderer 2.8.4 → 2.10.0

package/dist/components/FormRenderer/helpers/canCYASubmit.js

@@ -5,37 +5,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _utils = _interopRequireDefault(require("../../../utils"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
 /**
  * Assesses whether the CYA screen can submit.
  * Presently, this will validate all of the form pages and, only if all pages are
  * valid will it proceed.
  * @param {Array} pages All of the pages contained within the form.
- * @param {Function} onError A function to call with any validation errors.
+ * @param {Function} pagesValidator A function to validate the page.
  * @returns A boolean where `true` means the CYA can submit and `false` means it cannot.
  */
-var canCYASubmit = function canCYASubmit(pages, onError) {
-  var errors = [];
-  pages.forEach(function (p) {
-    errors.push.apply(errors, _toConsumableArray(_utils.default.Validate.page(p)));
-  });
-  onError(errors);
-  return errors.length === 0;
+var canCYASubmit = function canCYASubmit(pages, pagesValidator) {
+  return pagesValidator(pages).length === 0;
 };
 
 var _default = canCYASubmit;

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

@@ -1,155 +1,82 @@
 "use strict";
 
+var _Validate = _interopRequireDefault(require("../../../utils/Validate"));
+
 var _canCYASubmit = _interopRequireDefault(require("./canCYASubmit"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-describe('components', function () {
-  describe('FormRenderer', function () {
-    describe('helpers', function () {
-      describe('canCYASubmit', function () {
-        it('should return true when all pages are valid', function () {
-          var PAGE_1 = {
-            components: [{
-              id: 'a',
-              fieldId: 'a',
-              label: 'Alpha',
-              required: true
-            }],
-            formData: {
-              a: 'Bravo'
-            }
-          };
-          var PAGE_2 = {
-            components: [{
-              id: 'c',
-              fieldId: 'c',
-              label: 'Charlie',
-              required: true
-            }],
-            formData: {
-              c: 'Delta'
-            }
-          };
-          expect((0, _canCYASubmit.default)([PAGE_1, PAGE_2], function () {})).toBeTruthy();
-        });
-        it('should return false when the first page is invalid and should have called the onErrors method appropriately', function () {
-          var PAGE_1 = {
-            components: [{
-              id: 'a',
-              fieldId: 'a',
-              label: 'Alpha',
-              required: true
-            }],
-            formData: {}
-          };
-          var PAGE_2 = {
-            components: [{
-              id: 'c',
-              fieldId: 'c',
-              label: 'Charlie',
-              required: true
-            }],
-            formData: {
-              c: 'Delta'
-            }
-          };
-          var ERRORS = [];
-
-          var ON_ERROR = function ON_ERROR(errors) {
-            ERRORS.push.apply(ERRORS, _toConsumableArray(errors));
-          };
+// Local imports
+describe('components.FormRenderer.helpers.canCYASubmit', function () {
+  var ALPHA = {
+    id: 'a',
+    fieldId: 'a',
+    label: 'Alpha',
+    required: true
+  };
+  var CHARLIE = {
+    id: 'c',
+    fieldId: 'c',
+    label: 'Charlie',
+    required: true
+  };
 
-          expect((0, _canCYASubmit.default)([PAGE_1, PAGE_2], ON_ERROR)).toBeFalsy();
-          expect(ERRORS.length).toEqual(1);
-          expect(ERRORS[0]).toEqual({
-            id: 'a',
-            error: 'Alpha is required'
-          });
-        });
-        it('should return false when the second page is invalid and should have called the onErrors method appropriately', function () {
-          var PAGE_1 = {
-            components: [{
-              id: 'a',
-              fieldId: 'a',
-              label: 'Alpha',
-              required: true
-            }],
-            formData: {
-              a: 'Bravo'
-            }
-          };
-          var PAGE_2 = {
-            components: [{
-              id: 'c',
-              fieldId: 'c',
-              label: 'Charlie',
-              required: true
-            }],
-            formData: {}
-          };
-          var ERRORS = [];
-
-          var ON_ERROR = function ON_ERROR(errors) {
-            ERRORS.push.apply(ERRORS, _toConsumableArray(errors));
-          };
-
-          expect((0, _canCYASubmit.default)([PAGE_1, PAGE_2], ON_ERROR)).toBeFalsy();
-          expect(ERRORS.length).toEqual(1);
-          expect(ERRORS[0]).toEqual({
-            id: 'c',
-            error: 'Charlie is required'
-          });
-        });
-        it('should return false when the both pages are invalid and should have called the onErrors method appropriately', function () {
-          var PAGE_1 = {
-            components: [{
-              id: 'a',
-              fieldId: 'a',
-              label: 'Alpha',
-              required: true
-            }],
-            formData: {}
-          };
-          var PAGE_2 = {
-            components: [{
-              id: 'c',
-              fieldId: 'c',
-              label: 'Charlie',
-              required: true
-            }],
-            formData: {}
-          };
-          var ERRORS = [];
-
-          var ON_ERROR = function ON_ERROR(errors) {
-            ERRORS.push.apply(ERRORS, _toConsumableArray(errors));
-          };
-
-          expect((0, _canCYASubmit.default)([PAGE_1, PAGE_2], ON_ERROR)).toBeFalsy();
-          expect(ERRORS.length).toEqual(2);
-          expect(ERRORS[0]).toEqual({
-            id: 'a',
-            error: 'Alpha is required'
-          });
-          expect(ERRORS[1]).toEqual({
-            id: 'c',
-            error: 'Charlie is required'
-          });
-        });
-      });
+  var validatePages = function validatePages(pages) {
+    return pages.flatMap(function (page) {
+      return _Validate.default.page(page);
     });
+  };
+
+  it('should return true when all pages are valid', function () {
+    var PAGE_1 = {
+      components: [ALPHA],
+      formData: {
+        a: 'Bravo'
+      }
+    };
+    var PAGE_2 = {
+      components: [CHARLIE],
+      formData: {
+        c: 'Delta'
+      }
+    };
+    expect((0, _canCYASubmit.default)([PAGE_1, PAGE_2], validatePages)).toBeTruthy();
+  });
+  it('should return false when the first page is invalid', function () {
+    var PAGE_1 = {
+      components: [ALPHA],
+      formData: {}
+    };
+    var PAGE_2 = {
+      components: [CHARLIE],
+      formData: {
+        c: 'Delta'
+      }
+    };
+    expect((0, _canCYASubmit.default)([PAGE_1, PAGE_2], validatePages)).toBeFalsy();
+  });
+  it('should return false when the second page is invalid', function () {
+    var PAGE_1 = {
+      components: [ALPHA],
+      formData: {
+        a: 'Bravo'
+      }
+    };
+    var PAGE_2 = {
+      components: [CHARLIE],
+      formData: {}
+    };
+    expect((0, _canCYASubmit.default)([PAGE_1, PAGE_2], validatePages)).toBeFalsy();
+  });
+  it('should return false when the both pages are invalid', function () {
+    var PAGE_1 = {
+      components: [ALPHA],
+      formData: {}
+    };
+    var PAGE_2 = {
+      components: [CHARLIE],
+      formData: {}
+    };
+    expect((0, _canCYASubmit.default)([PAGE_1, PAGE_2], validatePages)).toBeFalsy();
   });
 });

package/dist/components/SummaryList/GroupAction.js

@@ -21,6 +21,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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; }
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -45,11 +47,13 @@ var GroupAction = function GroupAction(_ref) {
     setAttrs((0, _getGroupActionAttributes.default)(group));
   }, [group, setAttrs]);
 
-  if (!group.action) {
+  if (!(group !== null && group !== void 0 && group.action)) {
     return null;
   }
 
-  return /*#__PURE__*/_react.default.createElement(_copReactComponents.Link, attrs, group.action.label, group.action.aria_suffix && /*#__PURE__*/_react.default.createElement("span", {
+  return /*#__PURE__*/_react.default.createElement(_copReactComponents.Link, _extends({}, attrs, {
+    "aria-label": "".concat(group.action.label, " ").concat(group.action.aria_suffix)
+  }), group.action.label, group.action.aria_suffix && /*#__PURE__*/_react.default.createElement("span", {
     className: "mobile-text govuk-link"
   }, ' ', "".concat(group.action.aria_suffix)));
 };

package/dist/components/SummaryList/SummaryList.js

@@ -13,7 +13,9 @@ var _react = _interopRequireDefault(require("react"));
 
 var _GroupAction = _interopRequireDefault(require("./GroupAction"));
 
-var _RowAction = _interopRequireDefault(require("./RowAction"));
+var _SummaryListRow = _interopRequireDefault(require("./SummaryListRow"));
+
+var _SummaryListTitleRow = _interopRequireDefault(require("./SummaryListTitleRow"));
 
 require("./SummaryList.scss");
 
@@ -41,29 +43,40 @@ var SummaryList = function SummaryList(_ref) {
 
   var classes = _copReactComponents.Utils.classBuilder(classBlock, classModifiers, className);
 
+  var groupActionRow = null;
+
+  if (isGroup) {
+    var rowActions = rows.filter(function (r) {
+      return !!r.action;
+    });
+    groupActionRow = rowActions.length > 0 ? rowActions[0] : null;
+  }
+
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "group-of-rows"
   }, /*#__PURE__*/_react.default.createElement("dl", _extends({}, attrs, {
     className: classes()
   }), rows.map(function (row) {
-    var _row$component;
-
-    return /*#__PURE__*/_react.default.createElement("div", {
-      key: "".concat(row.pageId, "_").concat(row.fieldId),
-      className: classes('row')
-    }, /*#__PURE__*/_react.default.createElement("dt", {
-      className: classes('key')
-    }, row.key, !((_row$component = row.component) !== null && _row$component !== void 0 && _row$component.required) && " (optional)"), /*#__PURE__*/_react.default.createElement("dd", {
-      className: classes('value')
-    }, row.value), !noChangeAction && /*#__PURE__*/_react.default.createElement("dd", {
-      className: classes('actions')
-    }, row.action && /*#__PURE__*/_react.default.createElement(_RowAction.default, {
-      row: row
-    })));
+    var key = "".concat(row.pageId, "_").concat(row.full_path || row.fieldId);
+
+    if (row.type === 'title') {
+      return /*#__PURE__*/_react.default.createElement(_SummaryListTitleRow.default, {
+        key: key,
+        title: row.key,
+        classes: classes
+      });
+    }
+
+    return /*#__PURE__*/_react.default.createElement(_SummaryListRow.default, {
+      key: key,
+      row: row,
+      classes: classes,
+      showAction: !noChangeAction
+    });
   }), isGroup && /*#__PURE__*/_react.default.createElement("div", {
     className: "change-group-button"
   }, /*#__PURE__*/_react.default.createElement(_GroupAction.default, {
-    group: rows[0]
+    group: groupActionRow
   }))));
 };
 
@@ -71,6 +84,7 @@ SummaryList.propTypes = {
   rows: _propTypes.default.arrayOf(_propTypes.default.shape({
     pageId: _propTypes.default.string.isRequired,
     fieldId: _propTypes.default.string.isRequired,
+    full_path: _propTypes.default.string,
     key: _propTypes.default.string.isRequired,
     value: _propTypes.default.any,
     action: _propTypes.default.shape({
@@ -80,10 +94,11 @@ SummaryList.propTypes = {
       onAction: _propTypes.default.func
     })
   })).isRequired,
+  noChangeAction: _propTypes.default.bool,
+  isGroup: _propTypes.default.bool,
   classBlock: _propTypes.default.string,
   classModifiers: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
-  className: _propTypes.default.string,
-  noChangeAction: _propTypes.default.bool
+  className: _propTypes.default.string
 };
 SummaryList.defaultProps = {
   classBlock: DEFAULT_CLASS,

package/dist/components/SummaryList/SummaryList.scss

@@ -1,13 +1,18 @@
 @import 'node_modules/govuk-frontend/govuk/_base';
 @import 'node_modules/govuk-frontend/govuk/components/summary-list/_summary-list';
 
-// .govuk-summary-list__actions {
-//   .govuk-link {
-//     float: right;
-//     color: govuk-colour('blue');
-//     cursor: pointer;
-//   }
-// }
+.govuk-summary-list__title {
+  width: 100%;
+  white-space: nowrap;
+  .govuk-heading-s {
+    margin-bottom: 10px;
+  }
+  &:not(:first-child) {
+    .govuk-heading-s {
+      margin-top: 20px;
+    }
+  }
+}
 
 .changeRow {
   .govuk-link {
@@ -38,4 +43,3 @@
 
 
 }
-

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

@@ -35,15 +35,29 @@ describe('components', function () {
       return summaryList;
     };
 
+    var checkTitleRow = function checkTitleRow(summaryList, index) {
+      var row = summaryList.childNodes[index];
+      expect(row.tagName).toEqual('DIV');
+      expect(row.classList).toContain("".concat(_SummaryList.DEFAULT_CLASS, "__row"));
+      expect(row.classList).toContain("".concat(_SummaryList.DEFAULT_CLASS, "__title"));
+
+      var _row$childNodes = _slicedToArray(row.childNodes, 1),
+          heading = _row$childNodes[0];
+
+      expect(heading.tagName).toEqual('H3');
+      expect(heading.classList).toContain('govuk-heading-s');
+      return heading;
+    };
+
     var checkRow = function checkRow(summaryList, index) {
       var row = summaryList.childNodes[index];
       expect(row.tagName).toEqual('DIV');
       expect(row.classList).toContain("".concat(_SummaryList.DEFAULT_CLASS, "__row"));
 
-      var _row$childNodes = _slicedToArray(row.childNodes, 3),
-          key = _row$childNodes[0],
-          value = _row$childNodes[1],
-          actions = _row$childNodes[2];
+      var _row$childNodes2 = _slicedToArray(row.childNodes, 3),
+          key = _row$childNodes2[0],
+          value = _row$childNodes2[1],
+          actions = _row$childNodes2[2];
 
       expect(key.tagName).toEqual('DT');
       expect(key.classList).toContain("".concat(_SummaryList.DEFAULT_CLASS, "__key"));
@@ -59,9 +73,9 @@ describe('components', function () {
       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];
+      var _row$childNodes3 = _slicedToArray(row.childNodes, 2),
+          key = _row$childNodes3[0],
+          value = _row$childNodes3[1];
 
       expect(key.tagName).toEqual('DT');
       expect(key.classList).toContain("".concat(_SummaryList.DEFAULT_CLASS, "__key"));
@@ -118,19 +132,23 @@ describe('components', function () {
         expect(actions.childNodes.length).toEqual(0);
       });
     });
-    it('should handle rows with no actions and component values', function () {
+    it('should handle title rows', function () {
       var ID = 'test-id';
-      var VALUES = ['Alpha component value', 'Bravo component value'];
       var ROWS = [{
+        pageId: 'p1',
+        fieldId: 'a',
+        type: 'title',
+        key: 'Title'
+      }, {
         pageId: 'p1',
         fieldId: 'a',
         key: 'Alpha',
-        value: /*#__PURE__*/_react2.default.createElement("div", null, VALUES[0])
+        value: 'Alpha value'
       }, {
         pageId: 'p2',
         fieldId: 'b',
         key: 'Bravo',
-        value: /*#__PURE__*/_react2.default.createElement("div", null, VALUES[1])
+        value: 'Bravo value'
       }];
 
       var _render3 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_SummaryList.default, {
@@ -141,13 +159,62 @@ describe('components', function () {
 
       var summaryList = checkSummaryList(container, ID);
       expect(summaryList.childNodes.length).toEqual(ROWS.length);
-      ROWS.forEach(function (row, index) {
+
+      var assessTitleRow = function assessTitleRow(row, index) {
+        var heading = checkTitleRow(summaryList, index);
+        expect(heading.textContent).toEqual(row.key);
+      };
+
+      var assessRow = function assessRow(row, index) {
         var _checkRow3 = checkRow(summaryList, index),
             _checkRow4 = _slicedToArray(_checkRow3, 3),
             key = _checkRow4[0],
             value = _checkRow4[1],
             actions = _checkRow4[2];
 
+        expect(key.textContent).toEqual("".concat(row.key, " (optional)"));
+        expect(value.textContent).toEqual(row.value);
+        expect(actions.childNodes.length).toEqual(0);
+      };
+
+      ROWS.forEach(function (row, index) {
+        if (row.type === 'title') {
+          assessTitleRow(row, index);
+        } else {
+          assessRow(row, index);
+        }
+      });
+    });
+    it('should handle rows with no actions and component values', 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 _render4 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_SummaryList.default, {
+        "data-testid": ID,
+        rows: ROWS
+      })),
+          container = _render4.container;
+
+      var summaryList = checkSummaryList(container, ID);
+      expect(summaryList.childNodes.length).toEqual(ROWS.length);
+      ROWS.forEach(function (row, index) {
+        var _checkRow5 = checkRow(summaryList, index),
+            _checkRow6 = _slicedToArray(_checkRow5, 3),
+            key = _checkRow6[0],
+            value = _checkRow6[1],
+            actions = _checkRow6[2];
+
         expect(key.textContent).toEqual("".concat(row.key, " (optional)"));
         expect(value.childNodes.length).toEqual(1);
         var valueDiv = value.childNodes[0];
@@ -184,20 +251,20 @@ describe('components', function () {
         }
       }];
 
-      var _render4 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_SummaryList.default, {
+      var _render5 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_SummaryList.default, {
         "data-testid": ID,
         rows: ROWS
       })),
-          container = _render4.container;
+          container = _render5.container;
 
       var summaryList = checkSummaryList(container, ID);
       expect(summaryList.childNodes.length).toEqual(ROWS.length);
       ROWS.forEach(function (row, index) {
-        var _checkRow5 = checkRow(summaryList, index),
-            _checkRow6 = _slicedToArray(_checkRow5, 3),
-            key = _checkRow6[0],
-            value = _checkRow6[1],
-            actions = _checkRow6[2];
+        var _checkRow7 = checkRow(summaryList, index),
+            _checkRow8 = _slicedToArray(_checkRow7, 3),
+            key = _checkRow8[0],
+            value = _checkRow8[1],
+            actions = _checkRow8[2];
 
         expect(key.textContent).toEqual("".concat(row.key, " (optional)"));
         expect(value.textContent).toEqual(row.value);
@@ -225,12 +292,12 @@ describe('components', function () {
         value: /*#__PURE__*/_react2.default.createElement("div", null, VALUES[1])
       }];
 
-      var _render5 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_SummaryList.default, {
+      var _render6 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_SummaryList.default, {
         "data-testid": ID,
         rows: ROWS,
         noChangeAction: true
       })),
-          container = _render5.container;
+          container = _render6.container;
 
       var summaryList = checkSummaryList(container, ID);
       expect(summaryList.childNodes.length).toEqual(ROWS.length);
@@ -268,20 +335,20 @@ describe('components', function () {
         value: /*#__PURE__*/_react2.default.createElement("div", null, VALUES[2])
       }];
 
-      var _render6 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_SummaryList.default, {
+      var _render7 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_SummaryList.default, {
         "data-testid": ID,
         rows: ROWS,
         isGroup: ISGROUP
       })),
-          container = _render6.container;
+          container = _render7.container;
 
       var summaryList = checkSummaryList(container, ID);
       expect(summaryList.childNodes.length).toEqual(ROWS.length + 1);
       ROWS.forEach(function (row, index) {
-        var _checkRow7 = checkRow(summaryList, index),
-            _checkRow8 = _slicedToArray(_checkRow7, 2),
-            key = _checkRow8[0],
-            value = _checkRow8[1];
+        var _checkRow9 = checkRow(summaryList, index),
+            _checkRow10 = _slicedToArray(_checkRow9, 2),
+            key = _checkRow10[0],
+            value = _checkRow10[1];
 
         expect(key.textContent).toEqual("".concat(row.key, " (optional)"));
         expect(value.childNodes.length).toEqual(1);

package/dist/components/SummaryList/SummaryListRow.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _RowAction = _interopRequireDefault(require("./RowAction"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// Global imports
+// Local imports
+var SummaryListRow = function SummaryListRow(_ref) {
+  var row = _ref.row,
+      classes = _ref.classes,
+      showAction = _ref.showAction;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: classes('row')
+  }, /*#__PURE__*/_react.default.createElement("dt", {
+    className: classes('key')
+  }, row.key, !row.required && " (optional)"), /*#__PURE__*/_react.default.createElement("dd", {
+    className: classes('value')
+  }, row.value), showAction && /*#__PURE__*/_react.default.createElement("dd", {
+    className: classes('actions')
+  }, row.action && /*#__PURE__*/_react.default.createElement(_RowAction.default, {
+    row: row
+  })));
+};
+
+SummaryListRow.propTypes = {
+  row: _propTypes.default.shape({
+    key: _propTypes.default.string.isRequired,
+    required: _propTypes.default.bool,
+    value: _propTypes.default.any,
+    action: _propTypes.default.shape({
+      page: _propTypes.default.string,
+      label: _propTypes.default.string,
+      aria_suffix: _propTypes.default.string,
+      onAction: _propTypes.default.func
+    })
+  }).isRequired,
+  classes: _propTypes.default.func.isRequired,
+  showAction: _propTypes.default.bool
+};
+var _default = SummaryListRow;
+exports.default = _default;