@ons/design-system 62.2.4 → 64.0.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.
Files changed (104) hide show
  1. package/components/access-code/example-access-code-error.njk +1 -1
  2. package/components/accordion/_macro.njk +1 -1
  3. package/components/breadcrumbs/_macro.njk +2 -2
  4. package/components/breadcrumbs/_macro.spec.js +1 -1
  5. package/components/button/_macro.njk +1 -1
  6. package/components/button/_macro.spec.js +6 -6
  7. package/components/card/_macro.njk +1 -1
  8. package/components/card/_macro.spec.js +1 -1
  9. package/components/char-check-limit/_macro.njk +1 -1
  10. package/components/char-check-limit/_macro.spec.js +1 -1
  11. package/components/char-check-limit/character-check.spec.js +16 -16
  12. package/components/checkboxes/_macro.njk +3 -1
  13. package/components/checkboxes/example-checkboxes-with-descriptions.njk +1 -0
  14. package/components/collapsible/_macro.spec.js +1 -1
  15. package/components/content-pagination/_macro.njk +2 -2
  16. package/components/content-pagination/_macro.spec.js +2 -2
  17. package/components/cookies-banner/_macro.njk +2 -2
  18. package/components/cookies-banner/_macro.spec.js +2 -2
  19. package/components/details/_macro.njk +1 -1
  20. package/components/details/_macro.spec.js +1 -1
  21. package/components/document-list/_macro.njk +1 -1
  22. package/components/footer/_macro.njk +2 -2
  23. package/components/footer/_macro.spec.js +7 -7
  24. package/components/header/_macro.njk +3 -3
  25. package/components/header/_macro.spec.js +5 -6
  26. package/components/{icons → icon}/_macro.spec.js +7 -7
  27. package/components/{images → image}/_macro.spec.js +13 -13
  28. package/components/{images/example-images-for-regular-screens.njk → image/example-image-for-regular-screens.njk} +1 -1
  29. package/components/{images/example-images-for-retina-screens.njk → image/example-image-for-retina-screens.njk} +1 -1
  30. package/components/input/_input.scss +6 -0
  31. package/components/input/_macro.njk +20 -13
  32. package/components/input/_macro.spec.js +2 -22
  33. package/components/{search/example-search-with-character-check.njk → input/example-input-search-with-character-check.njk} +1 -2
  34. package/components/{search/example-search-with-placeholder.njk → input/example-input-search-with-placeholder.njk} +1 -2
  35. package/components/{search/example-search.njk → input/example-input-search.njk} +1 -2
  36. package/components/{lists → list}/_macro.njk +3 -3
  37. package/components/{lists → list}/_macro.spec.js +42 -42
  38. package/components/message/_macro.njk +2 -2
  39. package/components/message/_macro.spec.js +0 -1
  40. package/components/metadata/_macro.njk +1 -1
  41. package/components/mutually-exclusive/mutually-exclusive.textarea.spec.js +1 -1
  42. package/components/navigation/_macro.njk +3 -3
  43. package/components/pagination/_macro.njk +65 -69
  44. package/components/pagination/_macro.spec.js +18 -16
  45. package/components/pagination/example-pagination-first.njk +5 -5
  46. package/components/pagination/example-pagination-last.njk +5 -5
  47. package/components/pagination/example-pagination-with-no-range-indicator.njk +11 -11
  48. package/components/pagination/example-pagination.njk +2 -2
  49. package/components/panel/_macro.njk +2 -2
  50. package/components/panel/_macro.spec.js +2 -2
  51. package/components/panel/example-panel-with-error-summary.njk +1 -1
  52. package/components/phase-banner/_phase-banner.scss +2 -1
  53. package/components/question/_macro.njk +1 -1
  54. package/components/question/_macro.spec.js +1 -1
  55. package/components/quote/_macro.njk +1 -1
  56. package/components/quote/_macro.spec.js +1 -1
  57. package/components/related-content/_macro.njk +1 -1
  58. package/components/related-content/_macro.spec.js +1 -1
  59. package/components/related-content/example-related-content-general.njk +1 -1
  60. package/components/relationships/example-relationships-error.njk +1 -1
  61. package/components/section-navigation/_macro.njk +2 -2
  62. package/components/select/_macro.njk +1 -2
  63. package/components/share-page/_macro.njk +1 -1
  64. package/components/share-page/_macro.spec.js +5 -5
  65. package/components/summary/_macro.njk +5 -6
  66. package/components/summary/_macro.spec.js +8 -23
  67. package/components/summary/example-summary-grouped-total.njk +0 -2
  68. package/components/summary/example-summary-grouped-with-errors.njk +0 -4
  69. package/components/summary/example-summary-grouped.njk +0 -19
  70. package/components/summary/example-summary-household.njk +0 -5
  71. package/components/summary/example-summary-hub.njk +0 -8
  72. package/components/summary/example-summary-multiple.njk +0 -4
  73. package/components/summary/example-summary.njk +0 -4
  74. package/components/table/_macro.njk +4 -4
  75. package/components/table/_macro.spec.js +17 -1
  76. package/components/table/example-table-basic.njk +1 -2
  77. package/components/table/example-table-numeric.njk +6 -3
  78. package/components/table-of-contents/_macro.njk +1 -1
  79. package/components/table-of-contents/_macro.spec.js +2 -2
  80. package/components/tabs/_macro.njk +6 -5
  81. package/components/tabs/_macro.spec.js +25 -2
  82. package/components/tabs/_tabs.scss +11 -15
  83. package/components/tabs/example-tabs.njk +6 -6
  84. package/components/tabs/tabs.js +24 -8
  85. package/components/tabs/tabs.spec.js +40 -2
  86. package/components/textarea/_macro.njk +2 -2
  87. package/components/textarea/_macro.spec.js +2 -2
  88. package/components/textarea/textarea.spec.js +6 -10
  89. package/components/timeline/_macro.njk +1 -1
  90. package/components/timeline/_macro.spec.js +1 -1
  91. package/css/main.css +3 -3
  92. package/css/print.css +1 -1
  93. package/package.json +1 -1
  94. package/scripts/main.es5.js +1 -1
  95. package/scripts/main.js +1 -1
  96. package/scss/main.scss +3 -4
  97. package/components/search/_macro.njk +0 -30
  98. package/components/search/_macro.spec.js +0 -69
  99. package/components/search/_search.scss +0 -9
  100. /package/components/{icons/_icons.scss → icon/_icon.scss} +0 -0
  101. /package/components/{icons → icon}/_macro.njk +0 -0
  102. /package/components/{images/_images.scss → image/_image.scss} +0 -0
  103. /package/components/{images → image}/_macro.njk +0 -0
  104. /package/components/{lists → list}/_list.scss +0 -0
package/components/share-page/_macro.spec.js CHANGED
@@ -48,7 +48,7 @@ describe('macro: share-page', () => {
48
48
 
49
49
  it('uses the provided icon size', () => {
50
50
  const faker = templateFaker();
51
- const listsSpy = faker.spy('lists');
51
+ const listsSpy = faker.spy('list');
52
52
 
53
53
  faker.renderComponent('share-page', {
54
54
  ...EXAMPLE_SHARE_PAGE,
@@ -61,7 +61,7 @@ describe('macro: share-page', () => {
61
61
  describe('Share on Twitter', () => {
62
62
  it('has a link with the expected url', () => {
63
63
  const faker = templateFaker();
64
- const listsSpy = faker.spy('lists');
64
+ const listsSpy = faker.spy('list');
65
65
 
66
66
  faker.renderComponent('share-page', EXAMPLE_SHARE_PAGE);
67
67
 
@@ -73,7 +73,7 @@ describe('macro: share-page', () => {
73
73
 
74
74
  it('has a link which opens in a new tab', () => {
75
75
  const faker = templateFaker();
76
- const listsSpy = faker.spy('lists');
76
+ const listsSpy = faker.spy('list');
77
77
 
78
78
  faker.renderComponent('share-page', EXAMPLE_SHARE_PAGE);
79
79
 
@@ -87,7 +87,7 @@ describe('macro: share-page', () => {
87
87
  describe('Share on Facebook', () => {
88
88
  it('has a link with the expected url', () => {
89
89
  const faker = templateFaker();
90
- const listsSpy = faker.spy('lists');
90
+ const listsSpy = faker.spy('list');
91
91
 
92
92
  faker.renderComponent('share-page', EXAMPLE_SHARE_PAGE);
93
93
 
@@ -97,7 +97,7 @@ describe('macro: share-page', () => {
97
97
 
98
98
  it('has a link which opens in a new tab', () => {
99
99
  const faker = templateFaker();
100
- const listsSpy = faker.spy('lists');
100
+ const listsSpy = faker.spy('list');
101
101
 
102
102
  faker.renderComponent('share-page', EXAMPLE_SHARE_PAGE);
103
103
 
package/components/summary/_macro.njk CHANGED
@@ -23,7 +23,7 @@
23
23
  {% if group.rows %}
24
24
  <div class="ons-summary__items">
25
25
 
26
- {% for row in (group.rows if group.rows is iterable else group.rows.items()) %}
26
+ {% for row in group.rows %}
27
27
  {% set itemClass = "" %}
28
28
  {% if row.error %} {% set itemClass = " ons-summary__item--error" %}{% endif %}
29
29
  {% if row.total %} {% set itemClass = itemClass + " ons-summary__item--total" %}{% endif %}
@@ -42,7 +42,7 @@
42
42
  {% if rowItem.rowTitleAttributes %}{% for attribute, value in (rowItem.rowTitleAttributes.items() if rowItem.rowTitleAttributes is mapping and rowItem.rowTitleAttributes.items else rowItem.rowTitleAttributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}
43
43
  >
44
44
  {% if rowItem.iconType %}
45
- {% from "components/icons/_macro.njk" import onsIcon %}
45
+ {% from "components/icon/_macro.njk" import onsIcon %}
46
46
  <span class="ons-summary__item-title-icon{% if rowItem.iconType == 'check' %} ons-summary__item-title-icon--check{% endif %}">
47
47
  {{
48
48
  onsIcon({
@@ -75,7 +75,7 @@
75
75
  {% endif %}
76
76
  {% else %}
77
77
  <ul class="ons-u-mb-no">
78
- {% for value in (rowItem.valueList if rowItem.valueList is iterable else rowItem.valueList.items()) %}
78
+ {% for value in rowItem.valueList %}
79
79
  <li>
80
80
  <span class="ons-summary__text">{{ value.text | safe }}</span>
81
81
  {% if value.other or value.other == 0 %}
@@ -91,14 +91,13 @@
91
91
  {% endif %}
92
92
  {% if rowItem.actions %}
93
93
  <dd class="ons-summary__actions">
94
- {% for action in (rowItem.actions if rowItem.actions is iterable else rowItem.actions.items()) %}
94
+ {% for action in rowItem.actions %}
95
95
  {% if loop.index > 1 %}<span class="ons-summary__spacer"></span>{% endif %}
96
96
  <a
97
97
  href="{{ action.url }}"
98
98
  class="ons-summary__button"
99
- {% if action.ariaLabel %} aria-label="{{ action.ariaLabel }}"{% endif %}
100
99
  {% if action.attributes %}{% for attribute, value in (action.attributes.items() if action.attributes is mapping and action.attributes.items else action.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}
101
- >{{ action.text }}</a>
100
+ >{{ action.text }}<span class="ons-u-vh">answer for {{ row.rowTitle }}</span></a>
102
101
  {% endfor %}
103
102
  </dd>
104
103
  {% endif %}
package/components/summary/_macro.spec.js CHANGED
@@ -49,7 +49,6 @@ const EXAMPLE_SUMMARY_ROWS = {
49
49
  actions: [
50
50
  {
51
51
  text: 'Action 1',
52
- ariaLabel: 'action aria label 1',
53
52
  attributes: {
54
53
  a: 'abc',
55
54
  b: 'def',
@@ -58,7 +57,6 @@ const EXAMPLE_SUMMARY_ROWS = {
58
57
  },
59
58
  {
60
59
  text: 'Action 2',
61
- ariaLabel: 'action aria label 2',
62
60
  url: '#2',
63
61
  },
64
62
  ],
@@ -149,12 +147,10 @@ const EXAMPLE_SUMMARY_HOUSEHOLD_GROUP = {
149
147
  actions: [
150
148
  {
151
149
  text: 'Change',
152
- ariaLabel: 'Change list item',
153
150
  url: '#0',
154
151
  },
155
152
  {
156
153
  text: 'Remove',
157
- ariaLabel: 'Remove list item',
158
154
  url: '#0',
159
155
  },
160
156
  ],
@@ -169,7 +165,6 @@ const EXAMPLE_SUMMARY_HOUSEHOLD_GROUP = {
169
165
  actions: [
170
166
  {
171
167
  text: 'Change',
172
- ariaLabel: 'Remove list item',
173
168
  url: '#0',
174
169
  },
175
170
  ],
@@ -184,7 +179,6 @@ const EXAMPLE_SUMMARY_HOUSEHOLD_GROUP = {
184
179
  actions: [
185
180
  {
186
181
  text: 'Change',
187
- ariaLabel: 'Change list item',
188
182
  url: '#0',
189
183
  },
190
184
  ],
@@ -203,12 +197,10 @@ const EXAMPLE_SUMMARY_HOUSEHOLD_GROUP = {
203
197
  actions: [
204
198
  {
205
199
  text: 'Change',
206
- ariaLabel: 'Change answer',
207
200
  url: '#0',
208
201
  },
209
202
  {
210
203
  text: 'Remove',
211
- ariaLabel: 'Change list item',
212
204
  url: '#0',
213
205
  },
214
206
  ],
@@ -223,7 +215,6 @@ const EXAMPLE_SUMMARY_HOUSEHOLD_GROUP = {
223
215
  actions: [
224
216
  {
225
217
  text: 'Change',
226
- ariaLabel: 'Change list item',
227
218
  url: '#0',
228
219
  },
229
220
  ],
@@ -238,7 +229,6 @@ const EXAMPLE_SUMMARY_HOUSEHOLD_GROUP = {
238
229
  actions: [
239
230
  {
240
231
  text: 'Change',
241
- ariaLabel: 'Change list item',
242
232
  url: '#0',
243
233
  },
244
234
  ],
@@ -409,7 +399,7 @@ describe('macro: summary', () => {
409
399
 
410
400
  it('has a custom icon `iconType`', () => {
411
401
  const faker = templateFaker();
412
- const iconsSpy = faker.spy('icons');
402
+ const iconsSpy = faker.spy('icon');
413
403
 
414
404
  faker.renderComponent('summary', EXAMPLE_SUMMARY_BASIC);
415
405
 
@@ -487,25 +477,20 @@ describe('macro: summary', () => {
487
477
 
488
478
  expect(
489
479
  $('.ons-summary__items .ons-summary__item:nth-of-type(2) .ons-summary__actions .ons-summary__button:first-child').text(),
490
- ).toBe('Action 1');
480
+ ).toBe('Action 1answer for row title 2');
491
481
  expect(
492
482
  $('.ons-summary__items .ons-summary__item:nth-of-type(2) .ons-summary__actions .ons-summary__button:last-child').text(),
493
- ).toBe('Action 2');
483
+ ).toBe('Action 2answer for row title 2');
494
484
  });
495
485
 
496
- it('has the `aria-label` provided', () => {
486
+ it('has the correct visually hidden <span> text', () => {
497
487
  const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC));
498
488
 
499
489
  expect(
500
- $('.ons-summary__items .ons-summary__item:nth-of-type(2) .ons-summary__actions .ons-summary__button:first-child').attr(
501
- 'aria-label',
502
- ),
503
- ).toBe('action aria label 1');
504
- expect(
505
- $('.ons-summary__items .ons-summary__item:nth-of-type(2) .ons-summary__actions .ons-summary__button:last-child').attr(
506
- 'aria-label',
507
- ),
508
- ).toBe('action aria label 2');
490
+ $(
491
+ '.ons-summary__items .ons-summary__item:nth-of-type(2) .ons-summary__actions .ons-summary__button:first-child .ons-u-vh',
492
+ ).text(),
493
+ ).toBe('answer for row title 2');
509
494
  });
510
495
 
511
496
  it('has custom `attributes`', () => {
package/components/summary/example-summary-grouped-total.njk CHANGED
@@ -19,7 +19,6 @@
19
19
  "actions": [
20
20
  {
21
21
  "text": "Change",
22
- "ariaLabel": "Change answer",
23
22
  "url": "#0"
24
23
  }
25
24
  ]
@@ -38,7 +37,6 @@
38
37
  "actions": [
39
38
  {
40
39
  "text": "Change",
41
- "ariaLabel": "Change answer",
42
40
  "url": "#0"
43
41
  }
44
42
  ]
package/components/summary/example-summary-grouped-with-errors.njk CHANGED
@@ -19,7 +19,6 @@
19
19
  "actions": [
20
20
  {
21
21
  "text": "Change",
22
- "ariaLabel": "Change answer",
23
22
  "url": "#0"
24
23
  }
25
24
  ]
@@ -40,7 +39,6 @@
40
39
  "actions": [
41
40
  {
42
41
  "text": "Change",
43
- "ariaLabel": "Change answer",
44
42
  "url": "#0"
45
43
  }
46
44
  ]
@@ -60,7 +58,6 @@
60
58
  "actions": [
61
59
  {
62
60
  "text": "Change",
63
- "ariaLabel": "Change answer",
64
61
  "url": "#0"
65
62
  }
66
63
  ]
@@ -80,7 +77,6 @@
80
77
  "actions": [
81
78
  {
82
79
  "text": "Change",
83
- "ariaLabel": "Change answer",
84
80
  "url": "#0"
85
81
  }
86
82
  ]
package/components/summary/example-summary-grouped.njk CHANGED
@@ -23,7 +23,6 @@
23
23
  "actions": [
24
24
  {
25
25
  "text": "Change",
26
- "ariaLabel": "Change answer",
27
26
  "url": "#0"
28
27
  }
29
28
  ]
@@ -42,7 +41,6 @@
42
41
  "actions": [
43
42
  {
44
43
  "text": "Change",
45
- "ariaLabel": "Change answer",
46
44
  "url": "#0"
47
45
  }
48
46
  ]
@@ -61,7 +59,6 @@
61
59
  "actions": [
62
60
  {
63
61
  "text": "Change",
64
- "ariaLabel": "Change answer",
65
62
  "url": "#0"
66
63
  }
67
64
  ]
@@ -85,7 +82,6 @@
85
82
  "actions": [
86
83
  {
87
84
  "text": "Change",
88
- "ariaLabel": "Change answer",
89
85
  "url": "#0"
90
86
  }
91
87
  ]
@@ -104,7 +100,6 @@
104
100
  "actions": [
105
101
  {
106
102
  "text": "Change",
107
- "ariaLabel": "Change answer",
108
103
  "url": "#0"
109
104
  }
110
105
  ]
@@ -128,7 +123,6 @@
128
123
  "actions": [
129
124
  {
130
125
  "text": "Change",
131
- "ariaLabel": "Change answer",
132
126
  "url": "#0"
133
127
  }
134
128
  ]
@@ -147,7 +141,6 @@
147
141
  "actions": [
148
142
  {
149
143
  "text": "Change",
150
- "ariaLabel": "Change answer",
151
144
  "url": "#0"
152
145
  }
153
146
  ]
@@ -171,12 +164,10 @@
171
164
  "actions": [
172
165
  {
173
166
  "text": "Change",
174
- "ariaLabel": "Change answer",
175
167
  "url": "#0"
176
168
  },
177
169
  {
178
170
  "text": "Remove",
179
- "ariaLabel": "Remove company",
180
171
  "url": "#0"
181
172
  }
182
173
  ]
@@ -191,7 +182,6 @@
191
182
  "actions": [
192
183
  {
193
184
  "text": "Change",
194
- "ariaLabel": "Change answer",
195
185
  "url": "#0"
196
186
  }
197
187
  ]
@@ -206,7 +196,6 @@
206
196
  "actions": [
207
197
  {
208
198
  "text": "Change",
209
- "ariaLabel": "Change answer",
210
199
  "url": "#0"
211
200
  }
212
201
  ]
@@ -225,12 +214,10 @@
225
214
  "actions": [
226
215
  {
227
216
  "text": "Change",
228
- "ariaLabel": "Change answer",
229
217
  "url": "#0"
230
218
  },
231
219
  {
232
220
  "text": "Remove",
233
- "ariaLabel": "Remove company",
234
221
  "url": "#0"
235
222
  }
236
223
  ]
@@ -245,7 +232,6 @@
245
232
  "actions": [
246
233
  {
247
234
  "text": "Change",
248
- "ariaLabel": "Change answer",
249
235
  "url": "#0"
250
236
  }
251
237
  ]
@@ -260,7 +246,6 @@
260
246
  "actions": [
261
247
  {
262
248
  "text": "Change",
263
- "ariaLabel": "Change answer",
264
249
  "url": "#0"
265
250
  }
266
251
  ]
@@ -292,7 +277,6 @@
292
277
  "actions": [
293
278
  {
294
279
  "text": "Change",
295
- "ariaLabel": "Change answer",
296
280
  "url": "#0"
297
281
  }
298
282
  ]
@@ -307,7 +291,6 @@
307
291
  "actions": [
308
292
  {
309
293
  "text": "Change",
310
- "ariaLabel": "Change answer",
311
294
  "url": "#0"
312
295
  }
313
296
  ]
@@ -322,7 +305,6 @@
322
305
  "actions": [
323
306
  {
324
307
  "text": "Change",
325
- "ariaLabel": "Change answer",
326
308
  "url": "#0"
327
309
  }
328
310
  ]
@@ -337,7 +319,6 @@
337
319
  "actions": [
338
320
  {
339
321
  "text": "Change",
340
- "ariaLabel": "Change answer",
341
322
  "url": "#0"
342
323
  }
343
324
  ]
package/components/summary/example-summary-household.njk CHANGED
@@ -15,7 +15,6 @@
15
15
  "actions": [
16
16
  {
17
17
  "text": "Change",
18
- "ariaLabel": "Change details for Joe Bloggs",
19
18
  "url": "#0"
20
19
  }
21
20
  ]
@@ -30,12 +29,10 @@
30
29
  "actions": [
31
30
  {
32
31
  "text": "Change",
33
- "ariaLabel": "Change details for Barry Scott",
34
32
  "url": "#0"
35
33
  },
36
34
  {
37
35
  "text": "Remove",
38
- "ariaLabel": "Remove Barry Scott",
39
36
  "url": "#0"
40
37
  }
41
38
  ]
@@ -50,12 +47,10 @@
50
47
  "actions": [
51
48
  {
52
49
  "text": "Change",
53
- "ariaLabel": "Change details for Susan Gill",
54
50
  "url": "#0"
55
51
  },
56
52
  {
57
53
  "text": "Remove",
58
- "ariaLabel": "Remove Susan Gill",
59
54
  "url": "#0"
60
55
  }
61
56
  ]
package/components/summary/example-summary-hub.njk CHANGED
@@ -20,7 +20,6 @@
20
20
  "actions": [
21
21
  {
22
22
  "text": "View answers",
23
- "ariaLabel": "View answers for People who live here",
24
23
  "url": "#0"
25
24
  }
26
25
  ]
@@ -40,7 +39,6 @@
40
39
  "actions": [
41
40
  {
42
41
  "text": "View answers",
43
- "ariaLabel": "View answers for Accommodation",
44
42
  "url": "#0"
45
43
  }
46
44
  ]
@@ -60,7 +58,6 @@
60
58
  "actions": [
61
59
  {
62
60
  "text": "View answers",
63
- "ariaLabel": "View answers for Mary Smith",
64
61
  "url": "#0"
65
62
  }
66
63
  ]
@@ -79,7 +76,6 @@
79
76
  "actions": [
80
77
  {
81
78
  "text": "Continue with section",
82
- "ariaLabel": "Continue with John Smith's section",
83
79
  "url": "#0"
84
80
  }
85
81
  ]
@@ -98,7 +94,6 @@
98
94
  "actions": [
99
95
  {
100
96
  "text": "Start section",
101
- "ariaLabel": "Start Billy Smith's section",
102
97
  "url": "#0"
103
98
  }
104
99
  ]
@@ -117,7 +112,6 @@
117
112
  "actions": [
118
113
  {
119
114
  "text": "Start section",
120
- "ariaLabel": "Start Sally Smith's section",
121
115
  "url": "#0"
122
116
  }
123
117
  ]
@@ -136,7 +130,6 @@
136
130
  "actions": [
137
131
  {
138
132
  "text": "Start section",
139
- "ariaLabel": "Start Wilhelmina Susannah Clementine-Smith's section",
140
133
  "url": "#0"
141
134
  }
142
135
  ]
@@ -155,7 +148,6 @@
155
148
  "actions": [
156
149
  {
157
150
  "text": "Start section",
158
- "ariaLabel": "Start Vera Jones's section",
159
151
  "url": "#0"
160
152
  }
161
153
  ]
package/components/summary/example-summary-multiple.njk CHANGED
@@ -20,7 +20,6 @@
20
20
  "actions": [
21
21
  {
22
22
  "text": "Change",
23
- "ariaLabel": "Change answer",
24
23
  "url": "#0"
25
24
  }
26
25
  ]
@@ -35,7 +34,6 @@
35
34
  "actions": [
36
35
  {
37
36
  "text": "Change",
38
- "ariaLabel": "Change answer",
39
37
  "url": "#0"
40
38
  }
41
39
  ]
@@ -50,7 +48,6 @@
50
48
  "actions": [
51
49
  {
52
50
  "text": "Change",
53
- "ariaLabel": "Change answer",
54
51
  "url": "#0"
55
52
  }
56
53
  ]
@@ -65,7 +62,6 @@
65
62
  "actions": [
66
63
  {
67
64
  "text": "Change",
68
- "ariaLabel": "Change answer",
69
65
  "url": "#0"
70
66
  }
71
67
  ]
package/components/summary/example-summary.njk CHANGED
@@ -24,7 +24,6 @@
24
24
  "actions": [
25
25
  {
26
26
  "text": "Change",
27
- "ariaLabel": "Change answer",
28
27
  "url": "#0"
29
28
  }
30
29
  ]
@@ -45,7 +44,6 @@
45
44
  "actions": [
46
45
  {
47
46
  "text": "Change",
48
- "ariaLabel": "Change answer",
49
47
  "url": "#0"
50
48
  }
51
49
  ]
@@ -70,7 +68,6 @@
70
68
  "actions": [
71
69
  {
72
70
  "text": "Change",
73
- "ariaLabel": "Change answer",
74
71
  "url": "#0"
75
72
  }
76
73
  ]
@@ -91,7 +88,6 @@
91
88
  "actions": [
92
89
  {
93
90
  "text": "Change",
94
- "ariaLabel": "Change answer",
95
91
  "url": "#0"
96
92
  }
97
93
  ]
package/components/table/_macro.njk CHANGED
@@ -1,6 +1,6 @@
1
1
  {% macro onsTable(params) %}
2
2
  {% from "components/button/_macro.njk" import onsButton %}
3
- {% from "components/icons/_macro.njk" import onsIcon %}
3
+ {% from "components/icon/_macro.njk" import onsIcon %}
4
4
 
5
5
  {% set variants = params.variants if params.variants else '' %}
6
6
 
@@ -15,7 +15,7 @@
15
15
  <thead class="ons-table__head">
16
16
  <tr class="ons-table__row">
17
17
  {% for th in params.ths %}
18
- <th scope="col" class="ons-table__header{{ ' ' + th.thClasses if th.thClasses }}{{ " ons-table__header--numeric" if th.numeric }}"{% if 'sortable' in variants %} aria-sort="{{- th.ariaSort | default('none') -}}"{% endif %}>
18
+ <th scope="col" class="ons-table__header{{ ' ' + th.thClasses if th.thClasses }}{{ " ons-table__header--numeric" if th.numeric }}"{% if 'sortable' in variants %} aria-sort="{{- th.ariaSort | default('none') -}}"{% endif %}{% if th.widthPercentage %} width="{{ th.widthPercentage }}%"{% endif %}>
19
19
  <span class="ons-table__header-text">{{- th.value -}}</span>
20
20
  {% if 'sortable' in variants %}
21
21
  {{
@@ -32,9 +32,9 @@
32
32
  </thead>
33
33
  <tbody class="ons-table__body">
34
34
  {% for tr in params.trs %}
35
- <tr class="ons-table__row{{ " ons-table__row--highlight" if tr.highlight }}" {% if tr.name %} name="{{ tr.name }}"{% endif %} {% if tr.id %} id="{{ tr.id }}"{% endif %}>
35
+ <tr class="ons-table__row{{ " ons-table__row--highlight" if tr.highlight }}" {% if tr.id %} id="{{ tr.id }}"{% endif %}>
36
36
  {% for td in tr.tds %}
37
- <td class="ons-table__cell{{ ' ' + td.tdClasses if td.tdClasses }}{{ " ons-table__cell--numeric" if td.numeric }}" {% if td.id %} id="{{ td.id }}"{% endif %} {% if td.name %} name="{{ td.name }}"{% endif %} {% if td.data %} data-th="{{ td.data }}"{% endif %} {% if td.dataSort %} data-sort-value="{{ td.dataSort }}"{% endif %}>
37
+ <td class="ons-table__cell{{ ' ' + td.tdClasses if td.tdClasses }}{{ " ons-table__cell--numeric" if td.numeric }}" {% if td.id %} id="{{ td.id }}"{% endif %} {% if td.data %} data-th="{{ td.data }}"{% endif %} {% if td.dataSort %} data-sort-value="{{ td.dataSort }}"{% endif %}>
38
38
  {% if td.form %}
39
39
  <form action="{{ td.form.action }}" method="{{ td.form.method | default('POST')}}">
40
40
  {{
package/components/table/_macro.spec.js CHANGED
@@ -80,6 +80,22 @@ describe('macro: table', () => {
80
80
  expect($('.ons-table__header').hasClass('another-extra-column-class')).toBe(true);
81
81
  });
82
82
 
83
+ it('adds additional width attribute to column header', () => {
84
+ const $ = cheerio.load(
85
+ renderComponent('table', {
86
+ ...EXAMPLE_TABLE,
87
+ ths: [
88
+ {
89
+ value: 'Column 1',
90
+ widthPercentage: 50,
91
+ },
92
+ ],
93
+ }),
94
+ );
95
+
96
+ expect($('.ons-table__header').attr('width')).toBe('50%');
97
+ });
98
+
83
99
  it('does not add "numeric" modifier class to column header when `td.numeric` is not provided', () => {
84
100
  const $ = cheerio.load(renderComponent('table', EXAMPLE_TABLE));
85
101
 
@@ -111,7 +127,7 @@ describe('macro: table', () => {
111
127
 
112
128
  it('does not render "sort-sprite" icon', () => {
113
129
  const faker = templateFaker();
114
- const iconsSpy = faker.spy('icons');
130
+ const iconsSpy = faker.spy('icon');
115
131
 
116
132
  faker.renderComponent('table', EXAMPLE_TABLE);
117
133
 
package/components/table/example-table-basic.njk CHANGED
@@ -18,8 +18,7 @@
18
18
  {
19
19
  "tds": [
20
20
  {
21
- "value": "Cell A1",
22
- "name": "cell-name"
21
+ "value": "Cell A1"
23
22
  },
24
23
  {
25
24
  "value": "Cell B1"
package/components/table/example-table-numeric.njk CHANGED
@@ -4,15 +4,18 @@
4
4
  "caption": "A basic table with numeric values",
5
5
  "ths": [
6
6
  {
7
- "value": "Country"
7
+ "value": "Country",
8
+ "widthPercentage": 50
8
9
  },
9
10
  {
10
11
  "value": "Population mid-2020",
11
- "numeric": true
12
+ "numeric": true,
13
+ "widthPercentage": 25
12
14
  },
13
15
  {
14
16
  "value": "% change 2019 to 2020",
15
- "numeric": true
17
+ "numeric": true,
18
+ "widthPercentage": 25
16
19
  }
17
20
  ],
18
21
  "trs": [