@ons/design-system 67.0.6 → 67.2.0

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.
@@ -2,13 +2,17 @@
2
2
  {% set className = "ons-summary" %}
3
3
  {% set titleSize = "2" %}
4
4
 
5
- {% if params.classes %}
6
- {% set className = className + " " + params.classes %}
5
+ {% if params.variant == "hub" %}
6
+ {% set variantHub = true %}
7
+ {% set className = className + " ons-summary--hub" %}
8
+ {% elif params.variant %}
9
+ {% set variantClasses = " ons-summary__group--" + params.variant %}
7
10
  {% endif %}
8
11
 
9
- {% if params.hub %}
10
- {% set className = className + " ons-summary--hub" %}
12
+ {% if params.classes %}
13
+ {% set className = className + " " + params.classes %}
11
14
  {% endif %}
15
+
12
16
  <div class="{{ className }}">
13
17
  {% for summary in params.summaries %}
14
18
  {% if summary.summaryTitle %}
@@ -16,7 +20,7 @@
16
20
  {% set titleSize = "3" %}
17
21
  {% endif %}
18
22
  {% for group in summary.groups %}
19
- <div {% if group.id %}id="{{ group.id }}" {% endif %} class="ons-summary__group">
23
+ <div {% if group.id %}id="{{ group.id }}" {% endif %} class="ons-summary__group{{ variantClasses }}">
20
24
  {% if group.groupTitle %}
21
25
  <h{{ titleSize }} class="ons-summary__group-title">{{ group.groupTitle }}</h{{ titleSize }}>
22
26
  {% endif %}
@@ -27,7 +31,6 @@
27
31
  {% set itemClass = "" %}
28
32
  {% if row.error %} {% set itemClass = " ons-summary__item--error" %}{% endif %}
29
33
  {% if row.total %} {% set itemClass = itemClass + " ons-summary__item--total" %}{% endif %}
30
-
31
34
  <div {% if row.id %}id="{{ row.id }}" {% endif %}class="ons-summary__item{{ itemClass }}">
32
35
  {% if row.errorMessage %}
33
36
  <div class="ons-summary__row-title--error ons-u-fs-r">{{ row.errorMessage }}</div>
@@ -57,7 +60,7 @@
57
60
  </div>
58
61
 
59
62
  {# Render section status for mobile if is hub #}
60
- {% if params.hub and rowItem.valueList %}
63
+ {% if variantHub and rowItem.valueList %}
61
64
  <span class="ons-u-d-no@m ons-u-fs-r"> — {{ rowItem.valueList[0].text | safe }}</span>
62
65
  {% endif %}
63
66
  </dt>
@@ -111,8 +114,10 @@
111
114
  {% endif %}
112
115
 
113
116
  {% if group.summaryLink %}
114
- <div class="ons-summary__link{% if group.placeholderText or group.rows %} ons-u-pt-s{% endif %}{% if group.placeholderText is not defined and group.rows | length > 1 %} ons-u-bt{% endif %}{% if not group.last %} ons-u-mb-xl{% endif %}">
115
- <a {% if group.summaryLink.attributes %}{% for attribute, value in (group.summaryLink.attributes.items() if group.summaryLink.attributes is mapping and group.summaryLink.attributes.items else group.summaryLink.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %} href="{{ group.summaryLink.url }}">{{ group.summaryLink.text }}</a>
117
+ <div class="ons-summary__link{% if group.placeholderText or group.rows %} ons-u-pt-s{% endif %}{% if group.placeholderText is not defined and group.rows | length > 1 and params.variant != 'card' %} ons-u-bt{% endif %}{% if not group.last %} ons-u-mb-xl{% endif %}">
118
+ {% if params.variant == 'card' %}<div>{% endif %}
119
+ <a {% if group.summaryLink.attributes %}{% for attribute, value in (group.summaryLink.attributes.items() if group.summaryLink.attributes is mapping and group.summaryLink.attributes.items else group.summaryLink.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %} href="{{ group.summaryLink.url }}">{{ group.summaryLink.text }}</a>
120
+ {% if params.variant == 'card' %}</div>{% endif %}
116
121
  </div>
117
122
  {% endif %}
118
123
  </div>
@@ -533,7 +533,7 @@ describe('macro: summary', () => {
533
533
  const $ = cheerio.load(
534
534
  renderComponent('summary', {
535
535
  ...EXAMPLE_SUMMARY_BASIC,
536
- hub: true,
536
+ variant: 'hub',
537
537
  }),
538
538
  );
539
539
 
@@ -545,7 +545,7 @@ describe('macro: summary', () => {
545
545
  const $ = cheerio.load(
546
546
  renderComponent('summary', {
547
547
  ...EXAMPLE_SUMMARY_BASIC,
548
- hub: true,
548
+ variant: 'hub',
549
549
  }),
550
550
  );
551
551
 
@@ -556,7 +556,7 @@ describe('macro: summary', () => {
556
556
  const $ = cheerio.load(
557
557
  renderComponent('summary', {
558
558
  ...EXAMPLE_SUMMARY_BASIC,
559
- hub: true,
559
+ variant: 'hub',
560
560
  }),
561
561
  );
562
562
 
@@ -605,3 +605,23 @@ describe('macro: summary', () => {
605
605
  });
606
606
  });
607
607
  });
608
+
609
+ describe('mode: card', () => {
610
+ it('passes jest-axe checks', async () => {
611
+ const $ = cheerio.load(renderComponent('summary', { ...EXAMPLE_SUMMARY_BASIC, variant: 'card' }));
612
+
613
+ const results = await axe($.html());
614
+ expect(results).toHaveNoViolations();
615
+ });
616
+
617
+ it('has the correct classes applied', () => {
618
+ const $ = cheerio.load(
619
+ renderComponent('summary', {
620
+ ...EXAMPLE_SUMMARY_MULTIPLE_GROUPS,
621
+ variant: 'card',
622
+ }),
623
+ );
624
+
625
+ expect($('.ons-summary__group').hasClass('ons-summary__group--card')).toBe(true);
626
+ });
627
+ });
@@ -27,7 +27,7 @@ $hub-row-spacing: 1.3rem;
27
27
  line-height: 1.4;
28
28
 
29
29
  &:not(:last-child),
30
- &:nth-of-type(1) {
30
+ &:not(.ons-summary__group--card .ons-summary__item):nth-of-type(1) {
31
31
  border-bottom: 1px solid var(--ons-color-borders);
32
32
  }
33
33
 
@@ -178,10 +178,10 @@ $hub-row-spacing: 1.3rem;
178
178
  &__item-title,
179
179
  &__values,
180
180
  &__actions {
181
+ overflow: auto;
181
182
  flex: 5 1 33%;
182
183
  padding-top: $summary-row-spacing;
183
184
  vertical-align: top;
184
-
185
185
  &:not(:last-child) {
186
186
  padding-right: $summary-col-spacing;
187
187
  }
@@ -208,4 +208,36 @@ $hub-row-spacing: 1.3rem;
208
208
  }
209
209
  }
210
210
  }
211
+
212
+ &__group {
213
+ &--card {
214
+ border: 1px solid var(--ons-color-borders-light);
215
+ .ons-summary__items {
216
+ padding: 0 1.25rem;
217
+ .ons-summary__item:not(:last-child) {
218
+ border-bottom: 1px solid var(--ons-color-borders-light);
219
+ }
220
+ }
221
+ .ons-summary__group-title {
222
+ background-color: var(--ons-color-grey-5);
223
+ padding: 1rem 1.25rem;
224
+ }
225
+ .ons-summary__link {
226
+ padding: 0 1.25rem;
227
+ div {
228
+ padding: 1rem 0;
229
+ border-top: 1px solid var(--ons-color-borders-light);
230
+ }
231
+ }
232
+ .ons-summary__placeholder {
233
+ display: block;
234
+ padding: 0.5rem 1.25rem 0;
235
+ }
236
+ .ons-summary__placeholder + .ons-summary__link {
237
+ div {
238
+ border-top: none;
239
+ }
240
+ }
241
+ }
242
+ }
211
243
  }
@@ -0,0 +1,352 @@
1
+ {% from "components/summary/_macro.njk" import onsSummary %}
2
+
3
+ {{
4
+ onsSummary({
5
+ "variant": "card",
6
+ "summaries": [
7
+ {
8
+ "summaryTitle": "John Doe",
9
+ "groups": [
10
+ {
11
+ "groupTitle": "Personal details",
12
+ "rows": [
13
+ {
14
+ "rowTitle": "Are you John Doe?",
15
+ "rowItems": [
16
+ {
17
+ "valueList": [
18
+ {
19
+ "text": "Yes I am"
20
+ }
21
+ ],
22
+ "actions": [
23
+ {
24
+ "text": "Change",
25
+ "visuallyHiddenText": "Change answer",
26
+ "url": "#0"
27
+ }
28
+ ]
29
+ }
30
+ ]
31
+ },
32
+ {
33
+ "rowTitle": "What's your date of birth?",
34
+ "rowItems": [
35
+ {
36
+ "valueList": [
37
+ {
38
+ "text": "1 January 1981"
39
+ }
40
+ ],
41
+ "actions": [
42
+ {
43
+ "text": "Change",
44
+ "visuallyHiddenText": "Change answer",
45
+ "url": "#0"
46
+ }
47
+ ]
48
+ }
49
+ ]
50
+ },
51
+ {
52
+ "rowTitle": "What is your sex?",
53
+ "rowItems": [
54
+ {
55
+ "valueList": [
56
+ {
57
+ "text": "Male"
58
+ }
59
+ ],
60
+ "actions": [
61
+ {
62
+ "text": "Change",
63
+ "visuallyHiddenText": "Change answer",
64
+ "url": "#0"
65
+ }
66
+ ]
67
+ }
68
+ ]
69
+ }
70
+ ]
71
+ },
72
+ {
73
+ "groupTitle": "Identity and health",
74
+ "rows": [
75
+ {
76
+ "rowTitle": "What is your country of birth?",
77
+ "rowItems": [
78
+ {
79
+ "valueList": [
80
+ {
81
+ "text": "England"
82
+ }
83
+ ],
84
+ "actions": [
85
+ {
86
+ "text": "Change",
87
+ "visuallyHiddenText": "Change answer",
88
+ "url": "#0"
89
+ }
90
+ ]
91
+ }
92
+ ]
93
+ },
94
+ {
95
+ "rowTitle": "What passports do you hold?",
96
+ "rowItems": [
97
+ {
98
+ "valueList": [
99
+ {
100
+ "text": "United Kingdom"
101
+ }
102
+ ],
103
+ "actions": [
104
+ {
105
+ "text": "Change",
106
+ "visuallyHiddenText": "Change answer",
107
+ "url": "#0"
108
+ }
109
+ ]
110
+ }
111
+ ]
112
+ }
113
+ ]
114
+ },
115
+ {
116
+ "groupTitle": "Qualifications",
117
+ "rows": [
118
+ {
119
+ "rowTitle": "Have you completed an apprenticeship?",
120
+ "rowItems": [
121
+ {
122
+ "valueList": [
123
+ {
124
+ "text": "Yes"
125
+ }
126
+ ],
127
+ "actions": [
128
+ {
129
+ "text": "Change",
130
+ "visuallyHiddenText": "Change answer",
131
+ "url": "#0"
132
+ }
133
+ ]
134
+ }
135
+ ]
136
+ },
137
+ {
138
+ "rowTitle": "Have you achieved a GCSE or equivalent qualification?",
139
+ "rowItems": [
140
+ {
141
+ "valueList": [
142
+ {
143
+ "text": "5 GCSEs grades A* to C or 9 to 4"
144
+ }
145
+ ],
146
+ "actions": [
147
+ {
148
+ "text": "Change",
149
+ "visuallyHiddenText": "Change answer",
150
+ "url": "#0"
151
+ }
152
+ ]
153
+ }
154
+ ]
155
+ }
156
+ ]
157
+ },
158
+ {
159
+ "groupTitle": "Employment history",
160
+ "rows": [
161
+ {
162
+ "rowItems": [
163
+ {
164
+ "rowTitle": "Name of UK company",
165
+ "valueList": [
166
+ {
167
+ "text": "Company A"
168
+ }
169
+ ],
170
+ "actions": [
171
+ {
172
+ "text": "Change",
173
+ "visuallyHiddenText": "Change answer",
174
+ "url": "#0"
175
+ },
176
+ {
177
+ "text": "Remove",
178
+ "visuallyHiddenText": "Remove company",
179
+ "url": "#0"
180
+ }
181
+ ]
182
+ },
183
+ {
184
+ "rowTitle": "Head office location",
185
+ "valueList": [
186
+ {
187
+ "text": "Cardiff"
188
+ }
189
+ ],
190
+ "actions": [
191
+ {
192
+ "text": "Change",
193
+ "visuallyHiddenText": "Change answer",
194
+ "url": "#0"
195
+ }
196
+ ]
197
+ },
198
+ {
199
+ "rowTitle": "Is this UK company your current employer?",
200
+ "valueList": [
201
+ {
202
+ "text": "No"
203
+ }
204
+ ],
205
+ "actions": [
206
+ {
207
+ "text": "Change",
208
+ "visuallyHiddenText": "Change answer",
209
+ "url": "#0"
210
+ }
211
+ ]
212
+ }
213
+ ]
214
+ },
215
+ {
216
+ "rowItems": [
217
+ {
218
+ "rowTitle": "Name of UK company",
219
+ "valueList": [
220
+ {
221
+ "text": "Company A"
222
+ }
223
+ ],
224
+ "actions": [
225
+ {
226
+ "text": "Change",
227
+ "visuallyHiddenText": "Change answer",
228
+ "url": "#0"
229
+ },
230
+ {
231
+ "text": "Remove",
232
+ "visuallyHiddenText": "Remove company",
233
+ "url": "#0"
234
+ }
235
+ ]
236
+ },
237
+ {
238
+ "rowTitle": "Head office location",
239
+ "valueList": [
240
+ {
241
+ "text": "Newport"
242
+ }
243
+ ],
244
+ "actions": [
245
+ {
246
+ "text": "Change",
247
+ "visuallyHiddenText": "Change answer",
248
+ "url": "#0"
249
+ }
250
+ ]
251
+ },
252
+ {
253
+ "rowTitle": "Is this UK company your current employer?",
254
+ "valueList": [
255
+ {
256
+ "text": "Yes"
257
+ }
258
+ ],
259
+ "actions": [
260
+ {
261
+ "text": "Change",
262
+ "visuallyHiddenText": "Change answer",
263
+ "url": "#0"
264
+ }
265
+ ]
266
+ }
267
+ ]
268
+ }
269
+ ],
270
+ "summaryLink": {
271
+ "text": "Add a UK company or branch",
272
+ "url": "#0",
273
+ "attributes": {
274
+ "data-qa": "add-item-link"
275
+ }
276
+ }
277
+ },
278
+ {
279
+ "groupTitle": "Spending",
280
+ "rows": [
281
+ {
282
+ "rowTitle": "What are your monthly household expenses?",
283
+ "rowItems": [
284
+ {
285
+ "rowTitle": "Food",
286
+ "valueList": [
287
+ {
288
+ "text": "£50.00"
289
+ }
290
+ ],
291
+ "actions": [
292
+ {
293
+ "text": "Change",
294
+ "visuallyHiddenText": "Change answer",
295
+ "url": "#0"
296
+ }
297
+ ]
298
+ },
299
+ {
300
+ "rowTitle": "Utilities",
301
+ "valueList": [
302
+ {
303
+ "text": "£65.00"
304
+ }
305
+ ],
306
+ "actions": [
307
+ {
308
+ "text": "Change",
309
+ "visuallyHiddenText": "Change answer",
310
+ "url": "#0"
311
+ }
312
+ ]
313
+ },
314
+ {
315
+ "rowTitle": "Transport",
316
+ "valueList": [
317
+ {
318
+ "text": "£70.00"
319
+ }
320
+ ],
321
+ "actions": [
322
+ {
323
+ "text": "Change",
324
+ "visuallyHiddenText": "Change answer",
325
+ "url": "#0"
326
+ }
327
+ ]
328
+ },
329
+ {
330
+ "rowTitle": "Other",
331
+ "valueList": [
332
+ {
333
+ "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
334
+ }
335
+ ],
336
+ "actions": [
337
+ {
338
+ "text": "Change",
339
+ "visuallyHiddenText": "Change answer",
340
+ "url": "#0"
341
+ }
342
+ ]
343
+ }
344
+ ]
345
+ }
346
+ ]
347
+ }
348
+ ]
349
+ }
350
+ ]
351
+ })
352
+ }}
@@ -1,7 +1,7 @@
1
1
  {% from "components/summary/_macro.njk" import onsSummary %}
2
2
 
3
3
  {{ onsSummary({
4
- "hub": true,
4
+ "variant": "hub",
5
5
  "summaries": [
6
6
  {
7
7
  "groups": [