@ukhomeoffice/cop-react-form-renderer 1.0.0-beta → 1.0.0-delta

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -13,12 +13,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
13
13
 
14
14
  var _react = _interopRequireWildcard(require("react"));
15
15
 
16
- var _models = require("../../models");
17
-
18
16
  var _utils = _interopRequireDefault(require("../../utils"));
19
17
 
20
- var _PageActions = _interopRequireDefault(require("../PageActions"));
21
-
22
18
  var _SummaryList = _interopRequireDefault(require("../SummaryList"));
23
19
 
24
20
  var _Answer = _interopRequireDefault(require("./Answer"));
@@ -59,24 +55,17 @@ exports.DEFAULT_MARGIN_BOTTOM = DEFAULT_MARGIN_BOTTOM;
59
55
  var CheckYourAnswers = function CheckYourAnswers(_ref) {
60
56
  var title = _ref.title,
61
57
  _pages = _ref.pages,
62
- _onAction = _ref.onAction,
63
- onRowAction = _ref.onRowAction,
64
58
  hide_page_titles = _ref.hide_page_titles,
65
- hide_actions = _ref.hide_actions;
59
+ onAction = _ref.onAction;
66
60
 
67
61
  var _useState = (0, _react.useState)([]),
68
62
  _useState2 = _slicedToArray(_useState, 2),
69
63
  pages = _useState2[0],
70
64
  setPages = _useState2[1];
71
65
 
72
- var _useState3 = (0, _react.useState)([]),
73
- _useState4 = _slicedToArray(_useState3, 2),
74
- errors = _useState4[0],
75
- setErrors = _useState4[1];
76
-
77
66
  (0, _react.useEffect)(function () {
78
67
  var getRows = function getRows(page, pageIndex) {
79
- var rows = _utils.default.CheckYourAnswers.getRows(page, onRowAction);
68
+ var rows = _utils.default.CheckYourAnswers.getRows(page, onAction);
80
69
 
81
70
  return rows.map(function (row, index) {
82
71
  return _objectSpread(_objectSpread({}, row), {}, {
@@ -97,24 +86,18 @@ var CheckYourAnswers = function CheckYourAnswers(_ref) {
97
86
  }).filter(function (p) {
98
87
  return !!p;
99
88
  }));
100
- }, [_pages, onRowAction, setPages]);
89
+ }, [_pages, onAction, setPages]);
101
90
  var listMarginBottom = hide_page_titles ? 0 : DEFAULT_MARGIN_BOTTOM;
102
91
 
103
92
  var isLastPage = function isLastPage(index) {
104
93
  return index === pages.length - 1;
105
94
  };
106
95
 
107
- var onError = function onError(errors) {
108
- setErrors(errors);
109
- };
110
-
111
96
  return /*#__PURE__*/_react.default.createElement("div", {
112
97
  className: DEFAULT_CLASS
113
98
  }, title && /*#__PURE__*/_react.default.createElement(_copReactComponents.LargeHeading, {
114
99
  key: "heading"
115
- }, title), errors && errors.length > 0 && /*#__PURE__*/_react.default.createElement(_copReactComponents.ErrorSummary, {
116
- errors: errors
117
- }), pages && pages.map(function (page, pageIndex) {
100
+ }, title), pages && pages.map(function (page, pageIndex) {
118
101
  var pageMarginBottom = isLastPage(pageIndex) ? DEFAULT_MARGIN_BOTTOM : listMarginBottom;
119
102
  var className = "govuk-!-margin-bottom-".concat(pageMarginBottom);
120
103
  return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
@@ -123,26 +106,17 @@ var CheckYourAnswers = function CheckYourAnswers(_ref) {
123
106
  className: className,
124
107
  rows: page.rows
125
108
  }));
126
- }), !hide_actions && /*#__PURE__*/_react.default.createElement(_PageActions.default, {
127
- actions: [_models.PageAction.TYPES.SUBMIT],
128
- onAction: function onAction(action) {
129
- return _onAction(action, onError);
130
- }
131
109
  }));
132
110
  };
133
111
 
134
112
  CheckYourAnswers.propTypes = {
135
113
  title: _propTypes.default.string.isRequired,
136
114
  pages: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
137
- onAction: _propTypes.default.func.isRequired,
138
- onRowAction: _propTypes.default.func.isRequired,
139
- hide_page_titles: _propTypes.default.bool,
140
- hide_actions: _propTypes.default.bool
115
+ hide_page_titles: _propTypes.default.bool
141
116
  };
142
117
  CheckYourAnswers.defaultProps = {
143
118
  title: DEFAULT_TITLE,
144
- hide_page_titles: false,
145
- hide_actions: false
119
+ hide_page_titles: false
146
120
  };
147
121
  var _default = CheckYourAnswers;
148
122
  exports.default = _default;
@@ -24,19 +24,19 @@ Renders the **Check your answers** screen for a form.
24
24
  <Story name="Default" parameters={{
25
25
  mockData: [
26
26
  {
27
- url: `${USER_PROFILE_DATA.environmentContext.referenceDataUrl}/v2/entities/areYouACivilServant`,
27
+ url: `${USER_PROFILE_DATA.urls.refData}/areYouACivilServant`,
28
28
  method: 'GET',
29
29
  status: 200,
30
30
  response: CIVIL_SERVANT
31
31
  },
32
32
  {
33
- url: `${USER_PROFILE_DATA.environmentContext.referenceDataUrl}/v2/entities/grade`,
33
+ url: `${USER_PROFILE_DATA.urls.refData}/grade`,
34
34
  method: 'GET',
35
35
  status: 200,
36
36
  response: GRADE
37
37
  },
38
38
  {
39
- url: `${USER_PROFILE_DATA.environmentContext.referenceDataUrl}/v1/entities/team`,
39
+ url: `${USER_PROFILE_DATA.urls.refData}/team`,
40
40
  method: 'GET',
41
41
  status: 200,
42
42
  response: TEAMS
@@ -67,19 +67,19 @@ Renders the **Check your answers** screen for a form.
67
67
  <Story name="No page titles" parameters={{
68
68
  mockData: [
69
69
  {
70
- url: `${USER_PROFILE_DATA.environmentContext.referenceDataUrl}/v2/entities/areYouACivilServant`,
70
+ url: `${USER_PROFILE_DATA.urls.refData}/areYouACivilServant`,
71
71
  method: 'GET',
72
72
  status: 200,
73
73
  response: CIVIL_SERVANT
74
74
  },
75
75
  {
76
- url: `${USER_PROFILE_DATA.environmentContext.referenceDataUrl}/v2/entities/grade`,
76
+ url: `${USER_PROFILE_DATA.urls.refData}/grade`,
77
77
  method: 'GET',
78
78
  status: 200,
79
79
  response: GRADE
80
80
  },
81
81
  {
82
- url: `${USER_PROFILE_DATA.environmentContext.referenceDataUrl}/v1/entities/team`,
82
+ url: `${USER_PROFILE_DATA.urls.refData}/team`,
83
83
  method: 'GET',
84
84
  status: 200,
85
85
  response: TEAMS
@@ -62,36 +62,26 @@ describe('components', function () {
62
62
 
63
63
  var PAGES = _utils.default.FormPage.getAll(_userProfile.default.pages, _userProfile.default.components, _objectSpread({}, DATA));
64
64
 
65
- var ON_ROW_ACTION_CALLS = [];
66
-
67
- var ON_ROW_ACTION = function ON_ROW_ACTION(row) {
68
- ON_ROW_ACTION_CALLS.push(row);
69
- };
70
-
71
65
  var ON_ACTION_CALLS = [];
72
66
 
73
- var ON_ACTION = function ON_ACTION(action, onError) {
74
- ON_ACTION_CALLS.push({
75
- action: action,
76
- onError: onError
77
- });
67
+ var ON_ACTION = function ON_ACTION(row) {
68
+ ON_ACTION_CALLS.push(row);
78
69
  };
79
70
 
80
71
  var container = null;
81
72
 
82
73
  var refDataUrl = function refDataUrl(suffix) {
83
- return "".concat(_userProfileData.default.environmentContext.referenceDataUrl, "/").concat(suffix);
74
+ return "".concat(_userProfileData.default.urls.refData, "/").concat(suffix);
84
75
  };
85
76
 
86
77
  beforeEach(function () {
87
- ON_ROW_ACTION_CALLS.length = 0;
88
78
  ON_ACTION_CALLS.length = 0;
89
79
  container = document.createElement('div');
90
80
  document.body.appendChild(container);
91
81
  mockAxios.reset();
92
- mockAxios.onGet(refDataUrl('v2/entities/areYouACivilServant')).reply(200, _areYouACivilServant.default);
93
- mockAxios.onGet(refDataUrl('v2/entities/grade')).reply(200, _grade.default);
94
- mockAxios.onGet(refDataUrl('v1/entities/team')).reply(200, _team.default);
82
+ mockAxios.onGet(refDataUrl('areYouACivilServant')).reply(200, _areYouACivilServant.default);
83
+ mockAxios.onGet(refDataUrl('grade')).reply(200, _grade.default);
84
+ mockAxios.onGet(refDataUrl('team')).reply(200, _team.default);
95
85
  });
96
86
  afterEach(function () {
97
87
  (0, _reactDom.unmountComponentAtNode)(container);
@@ -131,7 +121,6 @@ describe('components', function () {
131
121
  case 0:
132
122
  (0, _reactDom.render)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
133
123
  pages: PAGES,
134
- onRowAction: ON_ROW_ACTION,
135
124
  onAction: ON_ACTION
136
125
  }), container);
137
126
 
@@ -172,7 +161,6 @@ describe('components', function () {
172
161
  (0, _reactDom.render)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
173
162
  title: TITLE,
174
163
  pages: PAGES,
175
- onRowAction: ON_ROW_ACTION,
176
164
  onAction: ON_ACTION
177
165
  }), container);
178
166
 
@@ -212,7 +200,6 @@ describe('components', function () {
212
200
  case 0:
213
201
  (0, _reactDom.render)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
214
202
  pages: PAGES,
215
- onRowAction: ON_ROW_ACTION,
216
203
  onAction: ON_ACTION
217
204
  }), container);
218
205
 
@@ -255,7 +242,6 @@ describe('components', function () {
255
242
  case 0:
256
243
  (0, _reactDom.render)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
257
244
  pages: PAGES,
258
- onRowAction: ON_ROW_ACTION,
259
245
  onAction: ON_ACTION
260
246
  }), container);
261
247
 
@@ -298,7 +284,6 @@ describe('components', function () {
298
284
  case 0:
299
285
  (0, _reactDom.render)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
300
286
  pages: PAGES,
301
- onRowAction: ON_ROW_ACTION,
302
287
  onAction: ON_ACTION,
303
288
  hide_page_titles: true
304
289
  }), container);
@@ -24,19 +24,19 @@ on the basis of a <Link href="/?path=/docs/f-json-component">JSON</Link> configu
24
24
  <Story name="Default" parameters={{
25
25
  mockData: [
26
26
  {
27
- url: `${USER_PROFILE_DATA.environmentContext.referenceDataUrl}/v2/entities/areYouACivilServant`,
27
+ url: `${USER_PROFILE_DATA.urls.refData}/areYouACivilServant`,
28
28
  method: 'GET',
29
29
  status: 200,
30
30
  response: CIVIL_SERVANT
31
31
  },
32
32
  {
33
- url: `${USER_PROFILE_DATA.environmentContext.referenceDataUrl}/v2/entities/grade`,
33
+ url: `${USER_PROFILE_DATA.urls.refData}/grade`,
34
34
  method: 'GET',
35
35
  status: 200,
36
36
  response: GRADE
37
37
  },
38
38
  {
39
- url: `${USER_PROFILE_DATA.environmentContext.referenceDataUrl}/v1/entities/team`,
39
+ url: `${USER_PROFILE_DATA.urls.refData}/team`,
40
40
  method: 'GET',
41
41
  status: 200,
42
42
  response: TEAMS
@@ -47,7 +47,7 @@ on the basis of a <Link href="/?path=/docs/f-json-component">JSON</Link> configu
47
47
  const COMPONENT = {
48
48
  ...USER_PROFILE.components.find(c => c.id === 'areYouACivilServant'),
49
49
  data: {
50
- url: `${USER_PROFILE_DATA.environmentContext.referenceDataUrl}/v2/entities/areYouACivilServant`
50
+ url: `${USER_PROFILE_DATA.urls.refData}/areYouACivilServant`
51
51
  }
52
52
  };
53
53
  const ON_CHANGE = ({ target }) => {
@@ -71,19 +71,19 @@ on the basis of a <Link href="/?path=/docs/f-json-component">JSON</Link> configu
71
71
  <Story name="Autocomplete" parameters={{
72
72
  mockData: [
73
73
  {
74
- url: `${USER_PROFILE_DATA.environmentContext.referenceDataUrl}/v2/entities/areYouACivilServant`,
74
+ url: `${USER_PROFILE_DATA.urls.refData}/areYouACivilServant`,
75
75
  method: 'GET',
76
76
  status: 200,
77
77
  response: CIVIL_SERVANT
78
78
  },
79
79
  {
80
- url: `${USER_PROFILE_DATA.environmentContext.referenceDataUrl}/v2/entities/grade`,
80
+ url: `${USER_PROFILE_DATA.urls.refData}/grade`,
81
81
  method: 'GET',
82
82
  status: 200,
83
83
  response: GRADE
84
84
  },
85
85
  {
86
- url: `${USER_PROFILE_DATA.environmentContext.referenceDataUrl}/v1/entities/team`,
86
+ url: `${USER_PROFILE_DATA.urls.refData}/team`,
87
87
  method: 'GET',
88
88
  status: 200,
89
89
  response: TEAMS
@@ -94,7 +94,7 @@ on the basis of a <Link href="/?path=/docs/f-json-component">JSON</Link> configu
94
94
  const COMPONENT = {
95
95
  ...USER_PROFILE.components.find(c => c.id === 'team'),
96
96
  data: {
97
- url: `${USER_PROFILE_DATA.environmentContext.referenceDataUrl}/v1/entities/team`
97
+ url: `${USER_PROFILE_DATA.urls.refData}/team`
98
98
  }
99
99
  };
100
100
  const ON_CHANGE = ({ target }) => {
@@ -128,19 +128,19 @@ on the basis of a <Link href="/?path=/docs/f-json-component">JSON</Link> configu
128
128
  <Story name="Unwrapped autocomplete" parameters={{
129
129
  mockData: [
130
130
  {
131
- url: `${USER_PROFILE_DATA.environmentContext.referenceDataUrl}/v2/entities/areYouACivilServant`,
131
+ url: `${USER_PROFILE_DATA.urls.refData}/areYouACivilServant`,
132
132
  method: 'GET',
133
133
  status: 200,
134
134
  response: CIVIL_SERVANT
135
135
  },
136
136
  {
137
- url: `${USER_PROFILE_DATA.environmentContext.referenceDataUrl}/v2/entities/grade`,
137
+ url: `${USER_PROFILE_DATA.urls.refData}/grade`,
138
138
  method: 'GET',
139
139
  status: 200,
140
140
  response: GRADE
141
141
  },
142
142
  {
143
- url: `${USER_PROFILE_DATA.environmentContext.referenceDataUrl}/v1/entities/team`,
143
+ url: `${USER_PROFILE_DATA.urls.refData}/team`,
144
144
  method: 'GET',
145
145
  status: 200,
146
146
  response: TEAMS
@@ -153,7 +153,7 @@ on the basis of a <Link href="/?path=/docs/f-json-component">JSON</Link> configu
153
153
  id: 'team2',
154
154
  fieldId: 'team2',
155
155
  data: {
156
- url: `${USER_PROFILE_DATA.environmentContext.referenceDataUrl}/v1/entities/team`
156
+ url: `${USER_PROFILE_DATA.urls.refData}/team`
157
157
  }
158
158
  };
159
159
  const ON_CHANGE = ({ target }) => {
@@ -25,19 +25,19 @@ on the basis of a <Link href="/?path=/docs/f-json-page">JSON</Link> configuratio
25
25
  <Story name="Default" parameters={{
26
26
  mockData: [
27
27
  {
28
- url: `${USER_PROFILE_DATA.environmentContext.referenceDataUrl}/v2/entities/areYouACivilServant`,
28
+ url: `${USER_PROFILE_DATA.urls.refData}/areYouACivilServant`,
29
29
  method: 'GET',
30
30
  status: 200,
31
31
  response: CIVIL_SERVANT
32
32
  },
33
33
  {
34
- url: `${USER_PROFILE_DATA.environmentContext.referenceDataUrl}/v2/entities/grade`,
34
+ url: `${USER_PROFILE_DATA.urls.refData}/grade`,
35
35
  method: 'GET',
36
36
  status: 200,
37
37
  response: GRADE
38
38
  },
39
39
  {
40
- url: `${USER_PROFILE_DATA.environmentContext.referenceDataUrl}/v1/entities/team`,
40
+ url: `${USER_PROFILE_DATA.urls.refData}/team`,
41
41
  method: 'GET',
42
42
  status: 200,
43
43
  response: TEAMS
@@ -68,19 +68,19 @@ on the basis of a <Link href="/?path=/docs/f-json-page">JSON</Link> configuratio
68
68
  <Story name="With autocomplete" parameters={{
69
69
  mockData: [
70
70
  {
71
- url: `${USER_PROFILE_DATA.environmentContext.referenceDataUrl}/v2/entities/areYouACivilServant`,
71
+ url: `${USER_PROFILE_DATA.urls.refData}/areYouACivilServant`,
72
72
  method: 'GET',
73
73
  status: 200,
74
74
  response: CIVIL_SERVANT
75
75
  },
76
76
  {
77
- url: `${USER_PROFILE_DATA.environmentContext.referenceDataUrl}/v2/entities/grade`,
77
+ url: `${USER_PROFILE_DATA.urls.refData}/grade`,
78
78
  method: 'GET',
79
79
  status: 200,
80
80
  response: GRADE
81
81
  },
82
82
  {
83
- url: `${USER_PROFILE_DATA.environmentContext.referenceDataUrl}/v1/entities/team`,
83
+ url: `${USER_PROFILE_DATA.urls.refData}/team`,
84
84
  method: 'GET',
85
85
  status: 200,
86
86
  response: TEAMS
@@ -154,12 +154,7 @@ var FormRenderer = function FormRenderer(_ref) {
154
154
  } // Now submit the data to the backend...
155
155
 
156
156
 
157
- hooks.onSubmit(action.type, submissionData, function (response) {
158
- // The backend response may well contain data we need so apply it.
159
- setData(function (prev) {
160
- return _objectSpread(_objectSpread({}, prev), response);
161
- });
162
-
157
+ hooks.onSubmit(action.type, submissionData, function () {
163
158
  var nextPageId = _helpers.default.getNextPageId(type, pages, pageId, action);
164
159
 
165
160
  onPageChange(nextPageId);
@@ -171,31 +166,8 @@ var FormRenderer = function FormRenderer(_ref) {
171
166
  }; // Handle navigation from "Check your answers".
172
167
 
173
168
 
174
- var onCYARowAction = function onCYARowAction(page) {
169
+ var onCYAAction = function onCYAAction(page) {
175
170
  _handlers.default.cyaAction(page, pageId, onPageChange);
176
- }; // Handle actions from "Check your answers".
177
-
178
-
179
- var onCYAAction = function onCYAAction(action, onError) {
180
- // Check to see whether the action is able to proceed, which in
181
- // in the case of a submission will validate the fields in the page.
182
- if (action.type === _models.PageAction.TYPES.SUBMIT) {
183
- if (_helpers.default.canCYASubmit(pages, onError)) {
184
- // Submit.
185
- var submissionData = _utils.default.Format.form({
186
- pages: pages,
187
- components: components
188
- }, _objectSpread({}, data), _models.EventTypes.SUBMIT);
189
-
190
- setData(submissionData); // Now submit the data to the backend...
191
-
192
- hooks.onSubmit(action.type, submissionData, function () {
193
- hooks.onFormComplete();
194
- }, function (errors) {
195
- _handlers.default.submissionError(errors, onError);
196
- });
197
- }
198
- }
199
171
  };
200
172
 
201
173
  var classes = _utils.default.classBuilder(classBlock, classModifiers, className);
@@ -205,8 +177,7 @@ var FormRenderer = function FormRenderer(_ref) {
205
177
  }, title && pageId === _models.FormPages.HUB && /*#__PURE__*/_react.default.createElement(_copReactComponents.LargeHeading, null, title), formState.cya && /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, _extends({
206
178
  pages: pages
207
179
  }, cya, formState.cya, {
208
- onAction: onCYAAction,
209
- onRowAction: onCYARowAction
180
+ onAction: onCYAAction
210
181
  })), formState.page && /*#__PURE__*/_react.default.createElement(_FormPage.default, {
211
182
  page: formState.page,
212
183
  onAction: onPageAction
@@ -1,7 +1,6 @@
1
1
  <!-- Global imports -->
2
2
  import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
3
- import { Button, Details, Heading, Link, Panel } from '@ukhomeoffice/cop-react-components';
4
- import { useState } from 'react';
3
+ import { Details, Heading, Link } from '@ukhomeoffice/cop-react-components';
5
4
  import withMock from 'storybook-addon-mock';
6
5
 
7
6
  <!-- Local imports -->
@@ -10,11 +9,11 @@ import FormRenderer from './FormRenderer';
10
9
 
11
10
  <!-- JSON documents -->
12
11
  import CIVIL_SERVANT from '../../json/areYouACivilServant.json';
13
- import FIRST_FORM from '../../json/firstForm.json';
14
12
  import GRADE from '../../json/grade.json';
15
13
  import TEAMS from '../../json/team.json';
16
14
  import USER_PROFILE_DATA from '../../json/userProfile.data.json';
17
15
  import USER_PROFILE from '../../json/userProfile.json';
16
+ import SAVE_AND_CONTINUE from '../../json/saveAndContinue.json';
18
17
 
19
18
  <Meta title="Components/Form renderer" id="D-FormRenderer" component={ FormRenderer } decorators={[withMock]} />
20
19
 
@@ -27,19 +26,19 @@ on the basis of a <Link href="/?path=/docs/f-json-form">JSON</Link> that describ
27
26
  <Story name="Default" parameters={{
28
27
  mockData: [
29
28
  {
30
- url: `${USER_PROFILE_DATA.environmentContext.referenceDataUrl}/v2/entities/areYouACivilServant`,
29
+ url: `${USER_PROFILE_DATA.urls.refData}/areYouACivilServant`,
31
30
  method: 'GET',
32
31
  status: 200,
33
32
  response: CIVIL_SERVANT
34
33
  },
35
34
  {
36
- url: `${USER_PROFILE_DATA.environmentContext.referenceDataUrl}/v2/entities/grade`,
35
+ url: `${USER_PROFILE_DATA.urls.refData}/grade`,
37
36
  method: 'GET',
38
37
  status: 200,
39
38
  response: GRADE
40
39
  },
41
40
  {
42
- url: `${USER_PROFILE_DATA.environmentContext.referenceDataUrl}/v1/entities/team`,
41
+ url: `${USER_PROFILE_DATA.urls.refData}/team`,
43
42
  method: 'GET',
44
43
  status: 200,
45
44
  response: TEAMS
@@ -58,13 +57,11 @@ on the basis of a <Link href="/?path=/docs/f-json-form">JSON</Link> that describ
58
57
  <ArgsTable of={ FormRenderer } />
59
58
  </Details>
60
59
 
61
- ## CYA type
60
+ ## Custom hooks
62
61
 
63
62
  <Canvas>
64
- <Story name="CYA">
63
+ <Story name="Save and continue">
65
64
  {() => {
66
- const [complete, setComplete] = useState(false);
67
- const [returnLater, setReturnLater] = useState(false);
68
65
  addHook('onRequest', (req) => {
69
66
  // Do whatever you need to do to the request in here, such as adding an Authorization header.
70
67
  console.log('onRequest hook called');
@@ -73,42 +70,20 @@ on the basis of a <Link href="/?path=/docs/f-json-form">JSON</Link> that describ
73
70
  addHook('onFormLoad', () => {
74
71
  console.log('onFormLoad called');
75
72
  });
76
- addHook('onFormComplete', () => {
77
- console.log('onFormComplete called');
78
- setComplete(true);
79
- });
80
73
  addHook('onPageChange', (pageId) => {
81
74
  console.log('onPageChange called', pageId);
82
- setReturnLater(!!pageId === false);
83
75
  });
76
+
77
+ /**
78
+ * In whatever consumes this, do it as:
79
+ * intercepts.add('onSubmit', (...) => { ... })
80
+ */
84
81
  addHook('onSubmit', (type, payload, onSuccess, onError) => {
85
82
  console.log('onSubmit called of type', type, 'called, with the payload', payload);
86
83
  onSuccess();
87
84
  });
88
- const reset = () => {
89
- setComplete(false);
90
- setReturnLater(false);
91
- };
92
85
  return (
93
- <>
94
- {!complete && !returnLater && <FormRenderer {...FIRST_FORM} data={{}} />}
95
- {complete &&
96
- <div>
97
- <Panel title="Submission successful">
98
- Your submission was successful.
99
- </Panel>
100
- <Button onClick={() => reset()}>Start again</Button>
101
- </div>
102
- }
103
- {!complete && returnLater &&
104
- <div>
105
- <Panel title="Saved to return later">
106
- You clicked on "Save and return later".
107
- </Panel>
108
- <Button onClick={() => reset()}>Start again</Button>
109
- </div>
110
- }
111
- </>
86
+ <FormRenderer {...SAVE_AND_CONTINUE} data={{}} />
112
87
  );
113
88
  }}
114
89
  </Story>
@@ -2,24 +2,18 @@
2
2
 
3
3
  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); }
4
4
 
5
- var _react = require("@testing-library/react");
6
-
7
5
  var _axios = _interopRequireDefault(require("axios"));
8
6
 
9
7
  var _axiosMockAdapter = _interopRequireDefault(require("axios-mock-adapter"));
10
8
 
11
- var _react2 = _interopRequireDefault(require("react"));
9
+ var _react = _interopRequireDefault(require("react"));
10
+
11
+ var _react2 = require("@testing-library/react");
12
12
 
13
13
  var _reactDom = require("react-dom");
14
14
 
15
15
  var _testUtils = require("react-dom/test-utils");
16
16
 
17
- var _models = require("../../models");
18
-
19
- var _CheckYourAnswers = require("../CheckYourAnswers/CheckYourAnswers");
20
-
21
- var _FormRenderer = _interopRequireWildcard(require("./FormRenderer"));
22
-
23
17
  var _areYouACivilServant = _interopRequireDefault(require("../../json/areYouACivilServant.json"));
24
18
 
25
19
  var _grade = _interopRequireDefault(require("../../json/grade.json"));
@@ -30,6 +24,10 @@ var _userProfileData = _interopRequireDefault(require("../../json/userProfile.da
30
24
 
31
25
  var _userProfile = _interopRequireDefault(require("../../json/userProfile.json"));
32
26
 
27
+ var _FormRenderer = _interopRequireWildcard(require("./FormRenderer"));
28
+
29
+ var _CheckYourAnswers = require("../CheckYourAnswers/CheckYourAnswers");
30
+
33
31
  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); }
34
32
 
35
33
  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; }
@@ -60,16 +58,16 @@ describe('components', function () {
60
58
  var container = null;
61
59
 
62
60
  var refDataUrl = function refDataUrl(suffix) {
63
- return "".concat(_userProfileData.default.environmentContext.referenceDataUrl, "/").concat(suffix);
61
+ return "".concat(_userProfileData.default.urls.refData, "/").concat(suffix);
64
62
  };
65
63
 
66
64
  beforeEach(function () {
67
65
  container = document.createElement('div');
68
66
  document.body.appendChild(container);
69
67
  mockAxios.reset();
70
- mockAxios.onGet(refDataUrl('v2/entities/areYouACivilServant')).reply(200, _areYouACivilServant.default);
71
- mockAxios.onGet(refDataUrl('v2/entities/grade')).reply(200, _grade.default);
72
- mockAxios.onGet(refDataUrl('v1/entities/team')).reply(200, _team.default);
68
+ mockAxios.onGet(refDataUrl('areYouACivilServant')).reply(200, _areYouACivilServant.default);
69
+ mockAxios.onGet(refDataUrl('grade')).reply(200, _grade.default);
70
+ mockAxios.onGet(refDataUrl('team')).reply(200, _team.default);
73
71
  });
74
72
  afterEach(function () {
75
73
  (0, _reactDom.unmountComponentAtNode)(container);
@@ -107,7 +105,7 @@ describe('components', function () {
107
105
  while (1) {
108
106
  switch (_context.prev = _context.next) {
109
107
  case 0:
110
- (0, _reactDom.render)( /*#__PURE__*/_react2.default.createElement(_FormRenderer.default, _extends({}, _userProfile.default, {
108
+ (0, _reactDom.render)( /*#__PURE__*/_react.default.createElement(_FormRenderer.default, _extends({}, _userProfile.default, {
111
109
  data: _userProfileData.default
112
110
  })), container);
113
111
 
@@ -158,7 +156,7 @@ describe('components', function () {
158
156
  while (1) {
159
157
  switch (_context3.prev = _context3.next) {
160
158
  case 0:
161
- (0, _reactDom.render)( /*#__PURE__*/_react2.default.createElement(_FormRenderer.default, _extends({}, _userProfile.default, {
159
+ (0, _reactDom.render)( /*#__PURE__*/_react.default.createElement(_FormRenderer.default, _extends({}, _userProfile.default, {
162
160
  data: _userProfileData.default,
163
161
  hooks: HOOKS
164
162
  })), container);
@@ -203,7 +201,7 @@ describe('components', function () {
203
201
  while (1) {
204
202
  switch (_context5.prev = _context5.next) {
205
203
  case 0:
206
- (0, _reactDom.render)( /*#__PURE__*/_react2.default.createElement(_FormRenderer.default, _extends({}, _userProfile.default, {
204
+ (0, _reactDom.render)( /*#__PURE__*/_react.default.createElement(_FormRenderer.default, _extends({}, _userProfile.default, {
207
205
  data: _userProfileData.default,
208
206
  hooks: HOOKS
209
207
  })), container);
@@ -224,7 +222,7 @@ describe('components', function () {
224
222
  link = getChangeLink(civilServantList);
225
223
  expect(ON_PAGE_CHANGE_CALLS.length).toEqual(0);
226
224
 
227
- _react.fireEvent.click(link, {});
225
+ _react2.fireEvent.click(link, {});
228
226
 
229
227
  expect(ON_PAGE_CHANGE_CALLS.length).toEqual(1);
230
228
  expect(ON_PAGE_CHANGE_CALLS[0]).toEqual(_userProfile.default.pages[1].id); // The form layout should have changed to the current page.
@@ -271,7 +269,7 @@ describe('components', function () {
271
269
  while (1) {
272
270
  switch (_context7.prev = _context7.next) {
273
271
  case 0:
274
- (0, _reactDom.render)( /*#__PURE__*/_react2.default.createElement(_FormRenderer.default, _extends({}, _userProfile.default, {
272
+ (0, _reactDom.render)( /*#__PURE__*/_react.default.createElement(_FormRenderer.default, _extends({}, _userProfile.default, {
275
273
  data: _userProfileData.default,
276
274
  hooks: HOOKS
277
275
  })), container);
@@ -292,17 +290,17 @@ describe('components', function () {
292
290
  _hub$childNodes2 = _slicedToArray(hub.childNodes, 3), civilServantList = _hub$childNodes2[2];
293
291
  link = getChangeLink(civilServantList);
294
292
 
295
- _react.fireEvent.click(link, {}); // Should already be answered "Yes", so simply click "Continue".
293
+ _react2.fireEvent.click(link, {}); // Should already be answered "Yes", so simply click "Continue".
296
294
 
297
295
 
298
296
  page = form.childNodes[0];
299
297
  continueButton = getContinueButton(page);
300
298
  expect(ON_SUBMIT_CALLS.length).toEqual(0);
301
299
 
302
- _react.fireEvent.click(continueButton, {});
300
+ _react2.fireEvent.click(continueButton, {});
303
301
 
304
302
  expect(ON_SUBMIT_CALLS.length).toEqual(1);
305
- expect(ON_SUBMIT_CALLS[0].type).toEqual(_models.PageAction.TYPES.SUBMIT);
303
+ expect(ON_SUBMIT_CALLS[0].type).toEqual('submit');
306
304
  expect(ON_SUBMIT_CALLS[0].payload.areYouACivilServant).toEqual('yes'); // And we should be back on the hub.
307
305
 
308
306
  expect(form.childNodes.length).toEqual(2); // Title + Hub page (= CYA)
@@ -349,7 +347,7 @@ describe('components', function () {
349
347
  while (1) {
350
348
  switch (_context9.prev = _context9.next) {
351
349
  case 0:
352
- (0, _reactDom.render)( /*#__PURE__*/_react2.default.createElement(_FormRenderer.default, _extends({}, _userProfile.default, {
350
+ (0, _reactDom.render)( /*#__PURE__*/_react.default.createElement(_FormRenderer.default, _extends({}, _userProfile.default, {
353
351
  data: _userProfileData.default,
354
352
  hooks: HOOKS
355
353
  })), container);
@@ -370,17 +368,17 @@ describe('components', function () {
370
368
  _hub$childNodes3 = _slicedToArray(hub.childNodes, 3), civilServantList = _hub$childNodes3[2];
371
369
  link = getChangeLink(civilServantList);
372
370
 
373
- _react.fireEvent.click(link, {}); // Should already be answered "Yes", so simply click "Continue".
371
+ _react2.fireEvent.click(link, {}); // Should already be answered "Yes", so simply click "Continue".
374
372
 
375
373
 
376
374
  page = form.childNodes[0];
377
375
  continueButton = getContinueButton(page);
378
376
  expect(ON_SUBMIT_CALLS.length).toEqual(0);
379
377
 
380
- _react.fireEvent.click(continueButton, {});
378
+ _react2.fireEvent.click(continueButton, {});
381
379
 
382
380
  expect(ON_SUBMIT_CALLS.length).toEqual(1);
383
- expect(ON_SUBMIT_CALLS[0].type).toEqual(_models.PageAction.TYPES.SUBMIT);
381
+ expect(ON_SUBMIT_CALLS[0].type).toEqual('submit');
384
382
  expect(ON_SUBMIT_CALLS[0].payload.areYouACivilServant).toEqual('yes'); // And we should be kept on the same page.
385
383
 
386
384
  expect(form.childNodes.length).toEqual(1); // Just the page.
@@ -418,7 +416,7 @@ describe('components', function () {
418
416
  while (1) {
419
417
  switch (_context11.prev = _context11.next) {
420
418
  case 0:
421
- (0, _reactDom.render)( /*#__PURE__*/_react2.default.createElement(_FormRenderer.default, _extends({}, _userProfile.default, {
419
+ (0, _reactDom.render)( /*#__PURE__*/_react.default.createElement(_FormRenderer.default, _extends({}, _userProfile.default, {
422
420
  data: _userProfileData.default,
423
421
  hooks: HOOKS
424
422
  })), container);
@@ -440,7 +438,7 @@ describe('components', function () {
440
438
  link = getChangeLink(lineManagerList);
441
439
  expect(ON_PAGE_CHANGE_CALLS.length).toEqual(0);
442
440
 
443
- _react.fireEvent.click(link, {});
441
+ _react2.fireEvent.click(link, {});
444
442
 
445
443
  expect(ON_PAGE_CHANGE_CALLS[0]).toEqual(_userProfile.default.pages[4].id); // Should be on the page explaining what changing the line manager means.
446
444
 
@@ -452,7 +450,7 @@ describe('components', function () {
452
450
  continueButton = getContinueButton(page);
453
451
  expect(ON_PAGE_CHANGE_CALLS.length).toEqual(1);
454
452
 
455
- _react.fireEvent.click(continueButton, {});
453
+ _react2.fireEvent.click(continueButton, {});
456
454
 
457
455
  expect(ON_PAGE_CHANGE_CALLS.length).toEqual(2);
458
456
  expect(ON_PAGE_CHANGE_CALLS[1]).toEqual(_userProfile.default.pages[5].id);
@@ -203,12 +203,12 @@ describe('utils', function () {
203
203
  // and data calculated for the fields, based on that source data.
204
204
 
205
205
  expect(RESULT).toEqual(_objectSpread(_objectSpread({}, _userProfileData.default), {}, {
206
- firstName: _userProfileData.default.keycloakContext.givenName,
207
- surname: _userProfileData.default.keycloakContext.familyName,
208
- team: _userProfileData.default.staffDetailsDataContext.defaultteam,
209
- staffGradeId: _userProfileData.default.staffDetailsDataContext.gradeid,
210
- linemanagerEmail: _userProfileData.default.extendedStaffDetailsContext.linemanagerEmail,
211
- delegateEmails: _userProfileData.default.extendedStaffDetailsContext.delegateEmails
206
+ firstName: _userProfileData.default.currentUser.givenName,
207
+ surname: _userProfileData.default.currentUser.familyName,
208
+ team: _userProfileData.default.userDetails.defaultteam,
209
+ staffGradeId: _userProfileData.default.userDetails.gradeid,
210
+ linemanagerEmail: _userProfileData.default.userDetails.linemanagerEmail,
211
+ delegateEmails: _userProfileData.default.userDetails.delegateEmails
212
212
  }));
213
213
  });
214
214
  });
@@ -9,7 +9,7 @@ describe('utils', function () {
9
9
  describe('Data', function () {
10
10
  describe('setupRefDataUrlForComponent', function () {
11
11
  var DATA = {
12
- environmentContext: {
12
+ urls: {
13
13
  refData: '/ref-data'
14
14
  }
15
15
  };
@@ -39,13 +39,13 @@ describe('utils', function () {
39
39
  id: 'component',
40
40
  // eslint-disable-next-line no-template-curly-in-string
41
41
  data: {
42
- url: '${environmentContext.refData}/v1/teams'
42
+ url: '${urls.refData}/v1/teams'
43
43
  }
44
44
  };
45
45
  expect((0, _setupRefDataUrlForComponent.default)(COMPONENT, DATA)).toEqual({
46
46
  id: COMPONENT.id,
47
47
  data: {
48
- url: "".concat(DATA.environmentContext.refData, "/v1/teams")
48
+ url: "".concat(DATA.urls.refData, "/v1/teams")
49
49
  }
50
50
  });
51
51
  });
@@ -68,7 +68,7 @@ describe('utils', function () {
68
68
  id: 'component',
69
69
  // eslint-disable-next-line no-template-curly-in-string
70
70
  data: {
71
- url: '${environmentContext.referenceData}/v1/teams'
71
+ url: '${urls.referenceData}/v1/teams'
72
72
  }
73
73
  };
74
74
  expect((0, _setupRefDataUrlForComponent.default)(COMPONENT, DATA)).toEqual({
@@ -44,7 +44,7 @@ var getFormPage = function getFormPage(pageOptions, formComponents, formData) {
44
44
  ret = _objectSpread({}, componentOptions);
45
45
  }
46
46
 
47
- return formData && formData.environmentContext ? _Data.default.refData.setupUrl(ret, formData) : ret;
47
+ return formData && formData.urls ? _Data.default.refData.setupUrl(ret, formData) : ret;
48
48
  });
49
49
  return _objectSpread(_objectSpread({}, pageOptions), {}, {
50
50
  formData: formData,
@@ -30,11 +30,11 @@ describe('utils', function () {
30
30
  label: 'Charlie',
31
31
  type: 'radios',
32
32
  data: {
33
- url: '${environmentContext.refData}/v3/charlies'
33
+ url: '${urls.refData}/v3/charlies'
34
34
  }
35
35
  }];
36
36
  var FORM_DATA = {
37
- environmentContext: {
37
+ urls: {
38
38
  refData: 'https://ho.gov.uk/ref-data/'
39
39
  }
40
40
  };
@@ -137,7 +137,7 @@ describe('utils', function () {
137
137
  }, C), {}, {
138
138
  cya_label: C.label,
139
139
  data: {
140
- url: "".concat(FORM_DATA.environmentContext.refData, "/v3/charlies")
140
+ url: "".concat(FORM_DATA.urls.refData, "/v3/charlies")
141
141
  }
142
142
  })],
143
143
  formData: FORM_DATA
@@ -30,11 +30,11 @@ describe('utils', function () {
30
30
  label: 'Charlie',
31
31
  type: 'radios',
32
32
  data: {
33
- url: '${environmentContext.refData}/v3/charlies'
33
+ url: '${urls.refData}/v3/charlies'
34
34
  }
35
35
  }];
36
36
  var FORM_DATA = {
37
- environmentContext: {
37
+ urls: {
38
38
  refData: 'https://ho.gov.uk/ref-data/'
39
39
  }
40
40
  };
@@ -84,7 +84,7 @@ describe('utils', function () {
84
84
  }, C), {}, {
85
85
  cya_label: C.label,
86
86
  data: {
87
- url: "".concat(FORM_DATA.environmentContext.refData, "/v3/charlies")
87
+ url: "".concat(FORM_DATA.urls.refData, "/v3/charlies")
88
88
  }
89
89
  })],
90
90
  formData: FORM_DATA
@@ -32,11 +32,11 @@ describe('utils', function () {
32
32
  label: 'Charlie',
33
33
  type: 'radios',
34
34
  data: {
35
- url: '${environmentContext.refData}/v3/charlies'
35
+ url: '${urls.refData}/v3/charlies'
36
36
  }
37
37
  }];
38
38
  var FORM_DATA = {
39
- environmentContext: {
39
+ urls: {
40
40
  refData: 'https://ho.gov.uk/ref-data/'
41
41
  }
42
42
  };
package/package.json CHANGED
@@ -1,21 +1,22 @@
1
1
  {
2
2
  "name": "@ukhomeoffice/cop-react-form-renderer",
3
- "version": "1.0.0-beta",
3
+ "version": "1.0.0-delta",
4
4
  "private": false,
5
5
  "scripts": {
6
6
  "clean": "rimraf dist",
7
7
  "test": "react-scripts test",
8
+ "test:coverage": "yarn test --coverage --watchAll=false",
8
9
  "lint": "eslint --ext .js,.jsx src",
9
- "storybook:start": "start-storybook --docs --no-manager-cache -p 6007",
10
+ "storybook:start": "start-storybook --docs -s src/assets --no-manager-cache -p 6007",
10
11
  "storybook:build": "build-storybook --docs -s src/assets",
11
12
  "storybook:deploy": "yarn deploy-storybook",
12
13
  "storybook": "yarn storybook:start",
13
14
  "deploy-storybook": "storybook-to-ghpages -e storybook-static",
14
15
  "compile": "yarn clean && cross-env NODE_ENV=production babel src --out-dir dist --copy-files && yarn post-compile",
15
- "post-compile": "rimraf dist/**/*.test.* dist/**/*.stories.* dist/json dist/assets"
16
+ "post-compile": "rimraf dist/*.test.* dist/**/*.test.* dist/**/*.stories.* dist/docs dist/json dist/assets"
16
17
  },
17
18
  "dependencies": {
18
- "@ukhomeoffice/cop-react-components": "^0.6.0",
19
+ "@ukhomeoffice/cop-react-components": "^0.6.1",
19
20
  "axios": "^0.21.1",
20
21
  "govuk-frontend": "^3.13.0",
21
22
  "web-vitals": "^1.0.1"
@@ -44,14 +45,14 @@
44
45
  "cross-env": "^7.0.3",
45
46
  "html-react-parser": "^0.10.5",
46
47
  "node-sass": "^6.0.1",
47
- "react": "^17.0.2",
48
- "react-dom": "^17.0.2",
48
+ "react": "^16.13.1",
49
+ "react-dom": "^16.13.1",
49
50
  "react-scripts": "4.0.3",
50
51
  "storybook-addon-mock": "^2.0.1"
51
52
  },
52
53
  "peerDependencies": {
53
- "react": "^17.0.2",
54
- "react-dom": "^17.0.2",
54
+ "react": "^16.13.1",
55
+ "react-dom": "^16.13.1",
55
56
  "react-scripts": "4.0.3"
56
57
  },
57
58
  "optionalDependencies": {
@@ -1,18 +0,0 @@
1
- "use strict";
2
-
3
- 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); }
4
-
5
- var _ = _interopRequireWildcard(require("."));
6
-
7
- 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); }
8
-
9
- 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; }
10
-
11
- // Local imports
12
- it('should have exported everything appropriately', function () {
13
- expect(_.default).toBeDefined();
14
- expect(_.FormTypes).toBeDefined();
15
- expect(_.HubFormats).toBeDefined();
16
- expect(_.intercepts).toBeDefined();
17
- expect(_.Utils).toBeDefined();
18
- });