@ukhomeoffice/cop-react-form-renderer 2.7.3 → 2.8.3

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.
Files changed (21) hide show
  1. package/dist/components/CheckYourAnswers/CheckYourAnswers.stories.mdx +392 -331
  2. package/dist/components/CheckYourAnswers/CheckYourAnswers.test.js +66 -7
  3. package/dist/components/FormRenderer/FormRenderer.js +29 -9
  4. package/dist/components/FormRenderer/FormRenderer.test.js +11 -10
  5. package/dist/components/FormRenderer/helpers/getSubmissionStatus.js +3 -3
  6. package/dist/components/FormRenderer/helpers/getSubmissionStatus.test.js +4 -4
  7. package/dist/components/PageActions/ActionButton.js +2 -1
  8. package/dist/components/TaskList/Task.js +7 -1
  9. package/dist/components/TaskList/TaskList.js +3 -3
  10. package/dist/components/TaskList/TaskList.scss +5 -6
  11. package/dist/json/group.data.json +21 -0
  12. package/dist/json/group.json +418 -0
  13. package/dist/json/taskList.json +33 -6
  14. package/dist/json/userProfile.data.json +6 -0
  15. package/dist/utils/CheckYourAnswers/getCYARow.js +1 -0
  16. package/dist/utils/CheckYourAnswers/getCYARow.test.js +2 -0
  17. package/dist/utils/CheckYourAnswers/getCYARowForGroup.js +82 -0
  18. package/dist/utils/CheckYourAnswers/getCYARowForGroup.test.js +78 -0
  19. package/dist/utils/CheckYourAnswers/getCYARowsForPage.js +29 -3
  20. package/dist/utils/CheckYourAnswers/getCYARowsForPage.test.js +61 -0
  21. package/package.json +1 -1
package/dist/components/CheckYourAnswers/CheckYourAnswers.stories.mdx CHANGED
@@ -1,331 +1,392 @@
1
- <!-- Global imports -->
2
-
3
- import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
4
- import {
5
- Details,
6
- Heading,
7
- Link,
8
- Tag,
9
- } from '@ukhomeoffice/cop-react-components';
10
- import withMock from 'storybook-addon-mock';
11
-
12
- <!-- Local imports -->
13
-
14
- import Utils from '../../utils';
15
- import CheckYourAnswers from './CheckYourAnswers';
16
-
17
- <!-- JSON documents -->
18
-
19
- import CIVIL_SERVANT from '../../json/areYouACivilServant.json';
20
- import GRADE from '../../json/grade.json';
21
- import TEAMS from '../../json/team.json';
22
- import USER_PROFILE_DATA from '../../json/userProfile.data.json';
23
- import USER_PROFILE from '../../json/userProfile.json';
24
- import FIRST_FORM from '../../json/firstForm.json';
25
- import GROUP_OF_ROW from '../../json/groupOfRow.json';
26
- import GROUP_OF_ROW_DATA from '../../json/groupOfRowData.json';
27
-
28
- <Meta
29
- title='Components/Check your answers'
30
- id='D-CheckYourAnswers'
31
- component={CheckYourAnswers}
32
- decorators={[withMock]}
33
- />
34
-
35
- <Heading size='xl' caption='Components'>
36
- Check your answers
37
- </Heading>
38
-
39
- Renders the **Check your answers** screen for a form.
40
-
41
- <Canvas withToolbar>
42
- <Story
43
- name='Default'
44
- parameters={{
45
- mockData: [
46
- {
47
- url: `${USER_PROFILE_DATA.urls.refData}/areYouACivilServant`,
48
- method: 'GET',
49
- status: 200,
50
- response: CIVIL_SERVANT,
51
- },
52
- {
53
- url: `${USER_PROFILE_DATA.urls.refData}/grade`,
54
- method: 'GET',
55
- status: 200,
56
- response: GRADE,
57
- },
58
- {
59
- url: `${USER_PROFILE_DATA.urls.refData}/team`,
60
- method: 'GET',
61
- status: 200,
62
- response: TEAMS,
63
- },
64
- ],
65
- }}
66
- >
67
- {() => {
68
- const DATA = Utils.Data.setupForm(
69
- USER_PROFILE.pages,
70
- USER_PROFILE.components,
71
- USER_PROFILE_DATA
72
- );
73
- const PAGES = Utils.FormPage.getAll(
74
- USER_PROFILE.pages,
75
- USER_PROFILE.components,
76
- { ...DATA }
77
- );
78
- const ON_ACTION = (action, patch, onError) => {
79
- console.log('action invoked', action, patch);
80
- };
81
- const ON_ROW_ACTION = (page) => {
82
- console.log('row action invoked', page);
83
- };
84
- return (
85
- <CheckYourAnswers
86
- pages={PAGES}
87
- onAction={ON_ACTION}
88
- onRowAction={ON_ROW_ACTION}
89
- />
90
- );
91
- }}
92
- </Story>
93
- </Canvas>
94
-
95
- <Details summary='Properties' className='no-indent'>
96
- <ArgsTable of={CheckYourAnswers} />
97
- </Details>
98
-
99
- ## Variant
100
-
101
- ### Without page titles
102
-
103
- <Canvas>
104
- <Story
105
- name='No page titles'
106
- parameters={{
107
- mockData: [
108
- {
109
- url: `${USER_PROFILE_DATA.urls.refData}/areYouACivilServant`,
110
- method: 'GET',
111
- status: 200,
112
- response: CIVIL_SERVANT,
113
- },
114
- {
115
- url: `${USER_PROFILE_DATA.urls.refData}/grade`,
116
- method: 'GET',
117
- status: 200,
118
- response: GRADE,
119
- },
120
- {
121
- url: `${USER_PROFILE_DATA.urls.refData}/team`,
122
- method: 'GET',
123
- status: 200,
124
- response: TEAMS,
125
- },
126
- ],
127
- }}
128
- >
129
- {() => {
130
- const DATA = Utils.Data.setupForm(
131
- USER_PROFILE.pages,
132
- USER_PROFILE.components,
133
- USER_PROFILE_DATA
134
- );
135
- const PAGES = Utils.FormPage.getAll(
136
- USER_PROFILE.pages,
137
- USER_PROFILE.components,
138
- { ...DATA }
139
- );
140
- const ON_ACTION = (action, patch, onError) => {
141
- console.log('action invoked', action, patch);
142
- };
143
- const ON_ROW_ACTION = (page) => {
144
- console.log('row action invoked', page);
145
- };
146
- return (
147
- <CheckYourAnswers
148
- pages={PAGES}
149
- hide_page_titles={true}
150
- onAction={ON_ACTION}
151
- onRowAction={ON_ROW_ACTION}
152
- />
153
- );
154
- }}
155
- </Story>
156
- </Canvas>
157
-
158
- ### With actions
159
-
160
- <Canvas>
161
- <Story
162
- name='With actions'
163
- parameters={{
164
- mockData: [
165
- {
166
- url: `${USER_PROFILE_DATA.urls.refData}/areYouACivilServant`,
167
- method: 'GET',
168
- status: 200,
169
- response: CIVIL_SERVANT,
170
- },
171
- {
172
- url: `${USER_PROFILE_DATA.urls.refData}/grade`,
173
- method: 'GET',
174
- status: 200,
175
- response: GRADE,
176
- },
177
- {
178
- url: `${USER_PROFILE_DATA.urls.refData}/team`,
179
- method: 'GET',
180
- status: 200,
181
- response: TEAMS,
182
- },
183
- ],
184
- }}
185
- >
186
- {() => {
187
- const DATA = { firstName: 'John', surname: 'Smith', age: 41 };
188
- const PAGES = Utils.FormPage.getAll(
189
- FIRST_FORM.pages,
190
- FIRST_FORM.components,
191
- { ...DATA }
192
- );
193
- const ACTIONS = FIRST_FORM.cya.actions;
194
- const ON_ACTION = (action, patch, onError) => {
195
- console.log('action invoked', action, patch);
196
- };
197
- const ON_ROW_ACTION = (page) => {
198
- console.log('row action invoked', page);
199
- };
200
- return (
201
- <CheckYourAnswers
202
- pages={PAGES}
203
- hide_page_titles={true}
204
- actions={ACTIONS}
205
- onAction={ON_ACTION}
206
- onRowAction={ON_ROW_ACTION}
207
- />
208
- );
209
- }}
210
- </Story>
211
- </Canvas>
212
-
213
- ### Read-only style
214
-
215
- <Canvas>
216
- <Story
217
- name='Read-only style'
218
- parameters={{
219
- mockData: [
220
- {
221
- url: `${USER_PROFILE_DATA.urls.refData}/areYouACivilServant`,
222
- method: 'GET',
223
- status: 200,
224
- response: CIVIL_SERVANT,
225
- },
226
- {
227
- url: `${USER_PROFILE_DATA.urls.refData}/grade`,
228
- method: 'GET',
229
- status: 200,
230
- response: GRADE,
231
- },
232
- {
233
- url: `${USER_PROFILE_DATA.urls.refData}/team`,
234
- method: 'GET',
235
- status: 200,
236
- response: TEAMS,
237
- },
238
- ],
239
- }}
240
- >
241
- {() => {
242
- const DATA = Utils.Data.setupForm(
243
- USER_PROFILE.pages,
244
- USER_PROFILE.components,
245
- USER_PROFILE_DATA
246
- );
247
- const PAGES = Utils.FormPage.getAll(
248
- USER_PROFILE.pages,
249
- USER_PROFILE.components,
250
- { ...DATA }
251
- );
252
- const ON_ACTION = (action, patch, onError) => {
253
- console.log('action invoked', action, patch);
254
- };
255
- const ON_ROW_ACTION = (page) => {
256
- console.log('row action invoked', page);
257
- };
258
- return (
259
- <CheckYourAnswers
260
- pages={PAGES}
261
- hide_page_titles={true}
262
- onAction={ON_ACTION}
263
- onRowAction={ON_ROW_ACTION}
264
- hide_title={true}
265
- summaryListClassModifiers='no-border'
266
- noChangeAction={true}
267
- />
268
- );
269
- }}
270
- </Story>
271
- </Canvas>
272
-
273
-
274
- ### Group of rows
275
-
276
- <Canvas>
277
- <Story
278
- name='Group of rows'
279
- parameters={{
280
- mockData: [
281
- {
282
- url: `${USER_PROFILE_DATA.urls.refData}/areYouACivilServant`,
283
- method: 'GET',
284
- status: 200,
285
- response: CIVIL_SERVANT,
286
- },
287
- {
288
- url: `${USER_PROFILE_DATA.urls.refData}/grade`,
289
- method: 'GET',
290
- status: 200,
291
- response: GRADE,
292
- },
293
- {
294
- url: `${USER_PROFILE_DATA.urls.refData}/team`,
295
- method: 'GET',
296
- status: 200,
297
- response: TEAMS,
298
- },
299
- ],
300
- }}
301
- >
302
- {() => {
303
- const DATA = Utils.Data.setupForm(
304
- GROUP_OF_ROW.pages,
305
- GROUP_OF_ROW.components,
306
- GROUP_OF_ROW_DATA
307
- );
308
- const PAGES = Utils.FormPage.getAll(
309
- GROUP_OF_ROW.pages,
310
- GROUP_OF_ROW.components,
311
- { ...DATA }
312
- );
313
- const CYA = GROUP_OF_ROW.cya;
314
- const ON_ACTION = (action, patch, onError) => {
315
- console.log('action invoked', action, patch);
316
- };
317
- const ON_ROW_ACTION = (page) => {
318
- console.log('row action invoked', page);
319
- };
320
- return (
321
- <CheckYourAnswers
322
- pages={PAGES}
323
- hide_page_titles={false}
324
- onAction={ON_ACTION}
325
- onRowAction={ON_ROW_ACTION}
326
- groups={CYA.groups}
327
- />
328
- );
329
- }}
330
- </Story>
331
- </Canvas>
1
+ <!-- Global imports -->
2
+
3
+ import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
4
+ import {
5
+ Details,
6
+ Heading,
7
+ Link,
8
+ Tag,
9
+ } from '@ukhomeoffice/cop-react-components';
10
+ import withMock from 'storybook-addon-mock';
11
+
12
+ <!-- Local imports -->
13
+
14
+ import Utils from '../../utils';
15
+ import CheckYourAnswers from './CheckYourAnswers';
16
+
17
+ <!-- JSON documents -->
18
+
19
+ import CIVIL_SERVANT from '../../json/areYouACivilServant.json';
20
+ import GRADE from '../../json/grade.json';
21
+ import TEAMS from '../../json/team.json';
22
+ import USER_PROFILE_DATA from '../../json/userProfile.data.json';
23
+ import USER_PROFILE from '../../json/userProfile.json';
24
+ import FIRST_FORM from '../../json/firstForm.json';
25
+ import GROUP_OF_ROW from '../../json/groupOfRow.json';
26
+ import GROUP_OF_ROW_DATA from '../../json/groupOfRowData.json';
27
+ import GROUP from'../../json/group.json';
28
+ import GROUP_DATA from '../../json/group.data.json';
29
+
30
+ <Meta
31
+ title='Components/Check your answers'
32
+ id='D-CheckYourAnswers'
33
+ component={CheckYourAnswers}
34
+ decorators={[withMock]}
35
+ />
36
+
37
+ <Heading size='xl' caption='Components'>
38
+ Check your answers
39
+ </Heading>
40
+
41
+ Renders the **Check your answers** screen for a form.
42
+
43
+ <Canvas withToolbar>
44
+ <Story
45
+ name='Default'
46
+ parameters={{
47
+ mockData: [
48
+ {
49
+ url: `${USER_PROFILE_DATA.urls.refData}/areYouACivilServant`,
50
+ method: 'GET',
51
+ status: 200,
52
+ response: CIVIL_SERVANT,
53
+ },
54
+ {
55
+ url: `${USER_PROFILE_DATA.urls.refData}/grade`,
56
+ method: 'GET',
57
+ status: 200,
58
+ response: GRADE,
59
+ },
60
+ {
61
+ url: `${USER_PROFILE_DATA.urls.refData}/team`,
62
+ method: 'GET',
63
+ status: 200,
64
+ response: TEAMS,
65
+ },
66
+ ],
67
+ }}
68
+ >
69
+ {() => {
70
+ const DATA = Utils.Data.setupForm(
71
+ USER_PROFILE.pages,
72
+ USER_PROFILE.components,
73
+ USER_PROFILE_DATA
74
+ );
75
+ const PAGES = Utils.FormPage.getAll(
76
+ USER_PROFILE.pages,
77
+ USER_PROFILE.components,
78
+ { ...DATA }
79
+ );
80
+ const ON_ACTION = (action, patch, onError) => {
81
+ console.log('action invoked', action, patch);
82
+ };
83
+ const ON_ROW_ACTION = (page) => {
84
+ console.log('row action invoked', page);
85
+ };
86
+ return (
87
+ <CheckYourAnswers
88
+ pages={PAGES}
89
+ onAction={ON_ACTION}
90
+ onRowAction={ON_ROW_ACTION}
91
+ />
92
+ );
93
+ }}
94
+ </Story>
95
+ </Canvas>
96
+
97
+ <Details summary='Properties' className='no-indent'>
98
+ <ArgsTable of={CheckYourAnswers} />
99
+ </Details>
100
+
101
+ ## Variant
102
+
103
+ ### Without page titles
104
+
105
+ <Canvas>
106
+ <Story
107
+ name='No page titles'
108
+ parameters={{
109
+ mockData: [
110
+ {
111
+ url: `${USER_PROFILE_DATA.urls.refData}/areYouACivilServant`,
112
+ method: 'GET',
113
+ status: 200,
114
+ response: CIVIL_SERVANT,
115
+ },
116
+ {
117
+ url: `${USER_PROFILE_DATA.urls.refData}/grade`,
118
+ method: 'GET',
119
+ status: 200,
120
+ response: GRADE,
121
+ },
122
+ {
123
+ url: `${USER_PROFILE_DATA.urls.refData}/team`,
124
+ method: 'GET',
125
+ status: 200,
126
+ response: TEAMS,
127
+ },
128
+ ],
129
+ }}
130
+ >
131
+ {() => {
132
+ const DATA = Utils.Data.setupForm(
133
+ USER_PROFILE.pages,
134
+ USER_PROFILE.components,
135
+ USER_PROFILE_DATA
136
+ );
137
+ const PAGES = Utils.FormPage.getAll(
138
+ USER_PROFILE.pages,
139
+ USER_PROFILE.components,
140
+ { ...DATA }
141
+ );
142
+ const ON_ACTION = (action, patch, onError) => {
143
+ console.log('action invoked', action, patch);
144
+ };
145
+ const ON_ROW_ACTION = (page) => {
146
+ console.log('row action invoked', page);
147
+ };
148
+ return (
149
+ <CheckYourAnswers
150
+ pages={PAGES}
151
+ hide_page_titles={true}
152
+ onAction={ON_ACTION}
153
+ onRowAction={ON_ROW_ACTION}
154
+ />
155
+ );
156
+ }}
157
+ </Story>
158
+ </Canvas>
159
+
160
+ ### With actions
161
+
162
+ <Canvas>
163
+ <Story
164
+ name='With actions'
165
+ parameters={{
166
+ mockData: [
167
+ {
168
+ url: `${USER_PROFILE_DATA.urls.refData}/areYouACivilServant`,
169
+ method: 'GET',
170
+ status: 200,
171
+ response: CIVIL_SERVANT,
172
+ },
173
+ {
174
+ url: `${USER_PROFILE_DATA.urls.refData}/grade`,
175
+ method: 'GET',
176
+ status: 200,
177
+ response: GRADE,
178
+ },
179
+ {
180
+ url: `${USER_PROFILE_DATA.urls.refData}/team`,
181
+ method: 'GET',
182
+ status: 200,
183
+ response: TEAMS,
184
+ },
185
+ ],
186
+ }}
187
+ >
188
+ {() => {
189
+ const DATA = { firstName: 'John', surname: 'Smith', age: 41 };
190
+ const PAGES = Utils.FormPage.getAll(
191
+ FIRST_FORM.pages,
192
+ FIRST_FORM.components,
193
+ { ...DATA }
194
+ );
195
+ const ACTIONS = FIRST_FORM.cya.actions;
196
+ const ON_ACTION = (action, patch, onError) => {
197
+ console.log('action invoked', action, patch);
198
+ };
199
+ const ON_ROW_ACTION = (page) => {
200
+ console.log('row action invoked', page);
201
+ };
202
+ return (
203
+ <CheckYourAnswers
204
+ pages={PAGES}
205
+ hide_page_titles={true}
206
+ actions={ACTIONS}
207
+ onAction={ON_ACTION}
208
+ onRowAction={ON_ROW_ACTION}
209
+ />
210
+ );
211
+ }}
212
+ </Story>
213
+ </Canvas>
214
+
215
+ ### Read-only style
216
+
217
+ <Canvas>
218
+ <Story
219
+ name='Read-only style'
220
+ parameters={{
221
+ mockData: [
222
+ {
223
+ url: `${USER_PROFILE_DATA.urls.refData}/areYouACivilServant`,
224
+ method: 'GET',
225
+ status: 200,
226
+ response: CIVIL_SERVANT,
227
+ },
228
+ {
229
+ url: `${USER_PROFILE_DATA.urls.refData}/grade`,
230
+ method: 'GET',
231
+ status: 200,
232
+ response: GRADE,
233
+ },
234
+ {
235
+ url: `${USER_PROFILE_DATA.urls.refData}/team`,
236
+ method: 'GET',
237
+ status: 200,
238
+ response: TEAMS,
239
+ },
240
+ ],
241
+ }}
242
+ >
243
+ {() => {
244
+ const DATA = Utils.Data.setupForm(
245
+ USER_PROFILE.pages,
246
+ USER_PROFILE.components,
247
+ USER_PROFILE_DATA
248
+ );
249
+ const PAGES = Utils.FormPage.getAll(
250
+ USER_PROFILE.pages,
251
+ USER_PROFILE.components,
252
+ { ...DATA }
253
+ );
254
+ const ON_ACTION = (action, patch, onError) => {
255
+ console.log('action invoked', action, patch);
256
+ };
257
+ const ON_ROW_ACTION = (page) => {
258
+ console.log('row action invoked', page);
259
+ };
260
+ return (
261
+ <CheckYourAnswers
262
+ pages={PAGES}
263
+ hide_page_titles={true}
264
+ onAction={ON_ACTION}
265
+ onRowAction={ON_ROW_ACTION}
266
+ hide_title={true}
267
+ summaryListClassModifiers='no-border'
268
+ noChangeAction={true}
269
+ />
270
+ );
271
+ }}
272
+ </Story>
273
+ </Canvas>
274
+
275
+
276
+ ### Group of rows
277
+
278
+ <Canvas>
279
+ <Story
280
+ name='Group of rows'
281
+ parameters={{
282
+ mockData: [
283
+ {
284
+ url: `${USER_PROFILE_DATA.urls.refData}/areYouACivilServant`,
285
+ method: 'GET',
286
+ status: 200,
287
+ response: CIVIL_SERVANT,
288
+ },
289
+ {
290
+ url: `${USER_PROFILE_DATA.urls.refData}/grade`,
291
+ method: 'GET',
292
+ status: 200,
293
+ response: GRADE,
294
+ },
295
+ {
296
+ url: `${USER_PROFILE_DATA.urls.refData}/team`,
297
+ method: 'GET',
298
+ status: 200,
299
+ response: TEAMS,
300
+ },
301
+ ],
302
+ }}
303
+ >
304
+ {() => {
305
+ const DATA = Utils.Data.setupForm(
306
+ GROUP_OF_ROW.pages,
307
+ GROUP_OF_ROW.components,
308
+ GROUP_OF_ROW_DATA
309
+ );
310
+ const PAGES = Utils.FormPage.getAll(
311
+ GROUP_OF_ROW.pages,
312
+ GROUP_OF_ROW.components,
313
+ { ...DATA }
314
+ );
315
+ const CYA = GROUP_OF_ROW.cya;
316
+ const ON_ACTION = (action, patch, onError) => {
317
+ console.log('action invoked', action, patch);
318
+ };
319
+ const ON_ROW_ACTION = (page) => {
320
+ console.log('row action invoked', page);
321
+ };
322
+ return (
323
+ <CheckYourAnswers
324
+ pages={PAGES}
325
+ hide_page_titles={false}
326
+ onAction={ON_ACTION}
327
+ onRowAction={ON_ROW_ACTION}
328
+ groups={CYA.groups}
329
+ />
330
+ );
331
+ }}
332
+ </Story>
333
+ </Canvas>
334
+
335
+
336
+ ### Group of address rows
337
+ <Canvas>
338
+ <Story name='Group of address rows'
339
+ parameters={{
340
+ mockData: [
341
+ {
342
+ url: `${USER_PROFILE_DATA.urls.refData}/areYouACivilServant`,
343
+ method: 'GET',
344
+ status: 200,
345
+ response: CIVIL_SERVANT,
346
+ },
347
+ {
348
+ url: `${USER_PROFILE_DATA.urls.refData}/grade`,
349
+ method: 'GET',
350
+ status: 200,
351
+ response: GRADE,
352
+ },
353
+ {
354
+ url: `${USER_PROFILE_DATA.urls.refData}/team`,
355
+ method: 'GET',
356
+ status: 200,
357
+ response: TEAMS,
358
+ },
359
+ ],
360
+ }}>
361
+ {() => {
362
+ const DATA = Utils.Data.setupForm(
363
+ GROUP.pages,
364
+ GROUP.components,
365
+ GROUP_DATA
366
+ );
367
+ const PAGES = Utils.FormPage.getAll(
368
+ GROUP.pages,
369
+ GROUP.components,
370
+ { ...DATA }
371
+ );
372
+ const ACTIONS = GROUP.cya.actions;
373
+ const ON_ACTION = (action, patch, onError) => {
374
+ console.log('action invoked', action, patch);
375
+ };
376
+ const ON_ROW_ACTION = (page) => {
377
+ console.log('row action invoked', page);
378
+ };
379
+ return (
380
+ <CheckYourAnswers
381
+ pages={PAGES}
382
+ hide_page_titles={true}
383
+ actions={ACTIONS}
384
+ onAction={ON_ACTION}
385
+ onRowAction={ON_ROW_ACTION}
386
+ />
387
+ );
388
+ }}
389
+ </Story>
390
+ </Canvas>
391
+
392
+