@ons/design-system 65.2.1 → 65.2.2

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.
@@ -5,7 +5,7 @@
5
5
  <ol class="ons-breadcrumbs__items ons-u-fs-s">
6
6
  {% for item in params.itemsList %}
7
7
  <li class="ons-breadcrumbs__item{{ ' ' + item.itemClasses if item.itemClasses else '' }}" id="breadcrumb-{{ loop.index }}">
8
- <a class="ons-breadcrumbs__link{{ ' ' + item.linkClasses if item.linkClasses else '' }}" href="{{ item.url }}"{% if item.id %} id="{{ item.id }}"{% endif %}
8
+ <a class="ons-breadcrumbs__link{{ ' ' + item.linkClasses if item.linkClasses else '' }}" href={% if not isDesignSystemExample %}"{{ item.url }}"{% else %}"#0"{% endif %}{% if item.id %} id="{{ item.id }}"{% endif %}
9
9
  {% if item.attributes %}{% for attribute, value in (item.attributes.items() if item.attributes is mapping and item.attributes.items else item.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}
10
10
  >{{ item.text }}</a>
11
11
  {{
@@ -97,23 +97,23 @@ describe('macro: breadcrumbs', () => {
97
97
  it('has provided `url` on `link` elements', () => {
98
98
  const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
99
99
 
100
- const urls = mapAll($('.ons-breadcrumbs__link'), node => node.attr('href'));
100
+ const urls = mapAll($('.ons-breadcrumbs__link'), (node) => node.attr('href'));
101
101
  expect(urls).toEqual(['https://example.com/', 'https://example.com/guide/']);
102
102
  });
103
103
 
104
104
  it('has provided `text` on `link` elements', () => {
105
105
  const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
106
106
 
107
- const labels = mapAll($('.ons-breadcrumbs__link'), node => node.text().trim());
107
+ const labels = mapAll($('.ons-breadcrumbs__link'), (node) => node.text().trim());
108
108
  expect(labels).toEqual(['Home', 'Guide']);
109
109
  });
110
110
 
111
111
  it('has provided `attributes` on `link` elements', () => {
112
112
  const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
113
113
 
114
- const testValuesA = mapAll($('.ons-breadcrumbs__link'), node => node.attr('data-a'));
114
+ const testValuesA = mapAll($('.ons-breadcrumbs__link'), (node) => node.attr('data-a'));
115
115
  expect(testValuesA).toEqual(['123', '789']);
116
- const testValuesB = mapAll($('.ons-breadcrumbs__link'), node => node.attr('data-b'));
116
+ const testValuesB = mapAll($('.ons-breadcrumbs__link'), (node) => node.attr('data-b'));
117
117
  expect(testValuesB).toEqual(['456', 'ABC']);
118
118
  });
119
119
 
@@ -123,7 +123,7 @@ describe('macro: breadcrumbs', () => {
123
123
 
124
124
  faker.renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_MINIMAL);
125
125
 
126
- const iconTypes = iconsSpy.occurrences.map(occurrence => occurrence.iconType);
126
+ const iconTypes = iconsSpy.occurrences.map((occurrence) => occurrence.iconType);
127
127
  expect(iconTypes).toEqual(['chevron', 'chevron']);
128
128
  });
129
129
  });
@@ -1,35 +1,50 @@
1
1
  {% macro onsCookiesBanner(params) %}
2
+ {% from "components/button/_macro.njk" import onsButton %}
3
+
2
4
  {% if params.lang == 'cy' %}
3
5
  {% set ariaLabel = 'Cwcis' %}
4
6
  {% set serviceName = 'ons.gov.uk' %}
7
+ {% set defaultCookiesLink = '/cwics' %}
5
8
  {% set statementTitle = 'Cwcis ar' %}
6
9
  {% set settingsLinkText = 'Gweld cwcis' %}
7
- {% set settingsLinkURL = params.settingsLinkTextURL | default('/cwics') %}
8
- {% set statementText = '<p>Ffeiliau bach a gaiff eu storio ar eich dyfais pan fyddwch yn mynd ar wefan yw cwcis. Rydym ni’n defnyddio rhai cwcis hanfodol i wneud i’r wefan hon weithio.</p><p>Hoffem osod <a href="' + settingsLinkURL + '">cwcis ychwanegol</a> er mwyn cofio eich gosodiadau a deall sut rydych chi’n defnyddio’r wefan. Mae hyn yn ein helpu ni i wella ein gwasanaethau.</p>' %}
9
10
  {% set acceptButtonText = 'Derbyn cwcis ychwanegol' %}
10
11
  {% set rejectButtonText = 'Gwrthod cwcis ychwanegol' %}
11
12
  {% set acceptedText = 'Rydych chi wedi derbyn yr holl gwcis ychwanegol.' %}
12
- {% set rejectedText = 'Rydych chi wedi gwrthod yr holl gwcis ychwanegol. ' %}
13
- {% set preferencesText = 'Gallwch chi <a href="' + settingsLinkURL + '">newid eich dewisiadau o ran cwcis</a> ar unrhyw adeg.' %}
13
+ {% set rejectedText = 'Rydych chi wedi gwrthod yr holl gwcis ychwanegol.' %}
14
14
  {% set confirmationButtonText = 'Cuddio' %}
15
- {% set confirmationButtonTextAria = 'neges hon' %}
15
+ {% set contextSuffix = 'neges hon' %}
16
+ {% set beforeLinkPreferencesURL = 'Gallwch chi' %}
17
+ {% set afterLinkPreferencesURL = '"newid eich dewisiadau o ran cwcis</a> ar unrhyw adeg.' %}
18
+ {% set beforeLinkStatementText = '<p>Ffeiliau bach a gaiff eu storio ar eich dyfais pan fyddwch yn mynd ar wefan yw cwcis. Rydym ni’n defnyddio rhai cwcis hanfodol i wneud i’r wefan hon weithio.</p><p>Hoffem osod' %}
19
+ {% set afterLinkStatementText = 'cwcis ychwanegol</a> er mwyn cofio eich gosodiadau a deall sut rydych chi’n defnyddio’r wefan. Mae hyn yn ein helpu ni i wella ein gwasanaethau.</p>' %}
16
20
  {% else %}
17
21
  {% set ariaLabel = 'Cookies banner' %}
18
22
  {% set serviceName = 'ons.gov.uk' %}
23
+ {% set defaultCookiesLink = '/cookies' %}
19
24
  {% set statementTitle = 'Cookies on' %}
20
25
  {% set settingsLinkText = 'View cookies' %}
21
- {% set settingsLinkURL = params.settingsLinkTextURL | default('/cookies') %}
22
- {% set statementText = '<p>Cookies are small files stored on your device when you visit a website. We use some essential cookies to make this website work.</p><p>We would like to set <a href="' + settingsLinkURL + '">additional cookies</a> to remember your settings and understand how you use the site. This helps us to improve our services. </p>' %}
23
26
  {% set acceptButtonText = 'Accept additional cookies' %}
24
27
  {% set rejectButtonText = 'Reject additional cookies' %}
25
28
  {% set acceptedText = 'You have accepted all additional cookies.' %}
26
- {% set rejectedText = 'You have rejected all additional cookies.' %}
27
- {% set preferencesText = 'You can <a href="' + settingsLinkURL + '">change your cookie preferences</a> at any time.' %}
29
+ {% set rejectedText = 'You have rejected all additional cookies.' %}
28
30
  {% set confirmationButtonText = 'Hide' %}
29
31
  {% set contextSuffix = 'this message' %}
32
+ {% set beforeLinkPreferencesURL = 'You can' %}
33
+ {% set afterLinkPreferencesURL = 'change your cookie preferences</a> at any time.' %}
34
+ {% set beforeLinkStatementText = '<p>Cookies are small files stored on your device when you visit a website. We use some essential cookies to make this website work.</p><p>We would like to set' %}
35
+ {% set afterLinkStatementText = 'additional cookies</a> to remember your settings and understand how you use the site. This helps us to improve our services. </p>' %}
30
36
  {% endif %}
31
37
 
32
- <div class="ons-cookies-banner" role="region" aria-label="{{ params.ariaLabel | default(ariaLabel)}}">
38
+ {% if not isDesignSystemExample %}
39
+ {% set settingsLinkURL = params.settingsLinkTextURL | default(defaultCookiesLink) %}
40
+ {% else %}
41
+ {% set settingsLinkURL = '#0' %}
42
+ {% endif %}
43
+
44
+ {% set statementText = beforeLinkStatementText + ' <a href="' + settingsLinkURL + '">' + afterLinkStatementText %}
45
+ {% set preferencesText = beforeLinkPreferencesURL + ' <a href="' + settingsLinkURL + '">' + afterLinkPreferencesURL %}
46
+
47
+ <div class="ons-cookies-banner" role="region" aria-label="{{ params.ariaLabel | default(ariaLabel) }}">
33
48
  <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }} ons-cookies-banner__primary">
34
49
  <div class="ons-grid">
35
50
  <div class="ons-grid__col ons-col-8@m">
@@ -39,50 +54,49 @@
39
54
  </div>
40
55
  <div class="ons-grid ons-grid--flex ons-u-mt-s">
41
56
  <div class="ons-grid__col">
42
- {% from "components/button/_macro.njk" import onsButton %}
43
57
  {{
44
- onsButton({
45
- "type": 'button',
46
- "attributes": {
47
- "data-button": 'accept'
48
- },
49
- "text": params.acceptButtonText | default(acceptButtonText),
50
- "classes": 'ons-btn--small ons-js-accept-cookies ons-cookies-banner__btn'
51
- })
58
+ onsButton({
59
+ "type": 'button',
60
+ "attributes": {
61
+ "data-button": 'accept'
62
+ },
63
+ "text": params.acceptButtonText | default(acceptButtonText),
64
+ "classes": 'ons-btn--small ons-js-accept-cookies ons-cookies-banner__btn'
65
+ })
52
66
  }}
53
67
  </div>
54
68
  <div class="ons-grid__col">
55
69
  {{
56
- onsButton({
57
- "type": 'button',
58
- "attributes": {
59
- "data-button": 'reject'
60
- },
61
- "text": params.rejectButtonText | default(rejectButtonText),
62
- "classes": 'ons-btn--small ons-js-reject-cookies ons-cookies-banner__btn'
63
- })
70
+ onsButton({
71
+ "type": 'button',
72
+ "attributes": {
73
+ "data-button": 'reject'
74
+ },
75
+ "text": params.rejectButtonText | default(rejectButtonText),
76
+ "classes": 'ons-btn--small ons-js-reject-cookies ons-cookies-banner__btn'
77
+ })
64
78
  }}
65
79
  </div>
66
80
  <div class="ons-grid__col">
67
- <a class="ons-cookies-banner__link" href="{{ params.settingsLinkURL | default(settingsLinkURL) }}">{{ params.settingsLinkText | default(settingsLinkText) }}</a>
81
+ <a class="ons-cookies-banner__link" href="{{ settingsLinkURL }}">{{ params.settingsLinkText | default(settingsLinkText) }}</a>
68
82
  </div>
69
83
  </div>
70
84
  </div>
71
85
  <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }} ons-cookies-banner__confirmation ons-u-d-no">
72
86
  <div class="ons-grid ons-grid--flex ons-grid--between ons-grid--gutterless ons-grid--no-wrap@s ons-grid--vertical-center">
73
- <div class="ons-grid__col ons-grid__col--flex ons-col-auto ons-u-flex-shrink@s">
74
- <p class="ons-cookies-banner__desc ons-u-mb-no@s ons-u-mr-s@s"><span class="ons-js-accepted-text ons-u-d-no">{{ params.acceptedText | default(acceptedText) | safe }} </span><span class="ons-js-rejected-text ons-u-d-no">{{ params.rejectedText | default(rejectedText) | safe }} </span><span class="ons-cookies-banner__preferences-text">{{ params.preferencesText | default(preferencesText) | safe }}</span></p>
75
- </div>
76
- <div class="ons-grid__col">
77
- {{
78
- onsButton({
79
- "type": 'button',
80
- "text": params.confirmationButtonText | default(confirmationButtonText),
81
- "buttonContext": params.contextSuffix | default(contextSuffix),
82
- "classes": 'ons-btn--secondary ons-btn--small ons-js-hide-button'
83
- })
84
- }}
85
- </div>
87
+ <div class="ons-grid__col ons-grid__col--flex ons-col-auto ons-u-flex-shrink@s">
88
+ <p class="ons-cookies-banner__desc ons-u-mb-no@s ons-u-mr-s@s"><span class="ons-js-accepted-text ons-u-d-no">{{ params.acceptedText | default(acceptedText) | safe }} </span><span class="ons-js-rejected-text ons-u-d-no">{{ params.rejectedText | default(rejectedText) | safe }} </span><span class="ons-cookies-banner__preferences-text">{{ params.preferencesText | default(preferencesText) | safe }}</span></p>
89
+ </div>
90
+ <div class="ons-grid__col">
91
+ {{
92
+ onsButton({
93
+ "type": 'button',
94
+ "text": params.confirmationButtonText | default(confirmationButtonText),
95
+ "buttonContext": params.contextSuffix | default(contextSuffix),
96
+ "classes": 'ons-btn--secondary ons-btn--small ons-js-hide-button'
97
+ })
98
+ }}
99
+ </div>
86
100
  </div>
87
101
  </div>
88
102
  </div>
@@ -43,18 +43,14 @@ describe('macro: cookies-banner', () => {
43
43
  it('has `statementTitle` title text', () => {
44
44
  const $ = cheerio.load(renderComponent('cookies-banner', EXAMPLE_COOKIES_BANNER_PARAMS));
45
45
 
46
- const statementTitle = $('.ons-cookies-banner__title')
47
- .text()
48
- .trim();
46
+ const statementTitle = $('.ons-cookies-banner__title').text().trim();
49
47
  expect(statementTitle).toBe('Cookies on override ons.gov.uk override');
50
48
  });
51
49
 
52
50
  it('has `statementText` text', () => {
53
51
  const $ = cheerio.load(renderComponent('cookies-banner', EXAMPLE_COOKIES_BANNER_PARAMS));
54
52
 
55
- const statementText = $('.ons-cookies-banner__primary .ons-cookies-banner__statement')
56
- .html()
57
- .trim();
53
+ const statementText = $('.ons-cookies-banner__primary .ons-cookies-banner__statement').html().trim();
58
54
  expect(statementText).toBe('Statement override');
59
55
  });
60
56
 
@@ -79,9 +75,7 @@ describe('macro: cookies-banner', () => {
79
75
  it('Renders a link with text', () => {
80
76
  const $ = cheerio.load(renderComponent('cookies-banner', EXAMPLE_COOKIES_BANNER_PARAMS));
81
77
 
82
- const linkText = $('.ons-cookies-banner__link')
83
- .text()
84
- .trim();
78
+ const linkText = $('.ons-cookies-banner__link').text().trim();
85
79
  expect(linkText).toBe('Cookie settings override');
86
80
  });
87
81
 
@@ -97,9 +91,7 @@ describe('macro: cookies-banner', () => {
97
91
  it('has `preferencesText` text', () => {
98
92
  const $ = cheerio.load(renderComponent('cookies-banner', EXAMPLE_COOKIES_BANNER_PARAMS));
99
93
 
100
- const preferencesText = $('.ons-cookies-banner__confirmation .ons-cookies-banner__preferences-text')
101
- .html()
102
- .trim();
94
+ const preferencesText = $('.ons-cookies-banner__confirmation .ons-cookies-banner__preferences-text').html().trim();
103
95
  expect(preferencesText).toBe('Text override');
104
96
  });
105
97
 
@@ -134,18 +126,14 @@ describe('macro: cookies-banner', () => {
134
126
  it('has `statementTitle` title text', () => {
135
127
  const $ = cheerio.load(renderComponent('cookies-banner', {}));
136
128
 
137
- const statementTitle = $('.ons-cookies-banner__title')
138
- .text()
139
- .trim();
129
+ const statementTitle = $('.ons-cookies-banner__title').text().trim();
140
130
  expect(statementTitle).toBe('Cookies on ons.gov.uk');
141
131
  });
142
132
 
143
133
  it('has `statementText` text', () => {
144
134
  const $ = cheerio.load(renderComponent('cookies-banner', {}));
145
135
 
146
- const statementText = $('.ons-cookies-banner__primary .ons-cookies-banner__statement')
147
- .html()
148
- .trim();
136
+ const statementText = $('.ons-cookies-banner__primary .ons-cookies-banner__statement').html().trim();
149
137
  expect(statementText).toBe(
150
138
  '<p>Cookies are small files stored on your device when you visit a website. We use some essential cookies to make this website work.</p><p>We would like to set <a href="/cookies">additional cookies</a> to remember your settings and understand how you use the site. This helps us to improve our services. </p>',
151
139
  );
@@ -172,9 +160,7 @@ describe('macro: cookies-banner', () => {
172
160
  it('Renders a link with text', () => {
173
161
  const $ = cheerio.load(renderComponent('cookies-banner', {}));
174
162
 
175
- const linkText = $('.ons-cookies-banner__link')
176
- .text()
177
- .trim();
163
+ const linkText = $('.ons-cookies-banner__link').text().trim();
178
164
  expect(linkText).toBe('View cookies');
179
165
  });
180
166
 
@@ -210,9 +196,7 @@ describe('macro: cookies-banner', () => {
210
196
  it('has `preferencesText` text', () => {
211
197
  const $ = cheerio.load(renderComponent('cookies-banner', {}));
212
198
 
213
- const preferencesText = $('.ons-cookies-banner__confirmation .ons-cookies-banner__preferences-text')
214
- .html()
215
- .trim();
199
+ const preferencesText = $('.ons-cookies-banner__confirmation .ons-cookies-banner__preferences-text').html().trim();
216
200
  expect(preferencesText).toBe('You can <a href="/cookies">change your cookie preferences</a> at any time.');
217
201
  });
218
202
 
@@ -260,9 +244,7 @@ describe('macro: cookies-banner', () => {
260
244
  it('has the welsh version of default values', () => {
261
245
  const $ = cheerio.load(renderComponent('cookies-banner', { lang: 'cy' }));
262
246
 
263
- const statementTitle = $('.ons-cookies-banner__title')
264
- .text()
265
- .trim();
247
+ const statementTitle = $('.ons-cookies-banner__title').text().trim();
266
248
  expect(statementTitle).toBe('Cwcis ar ons.gov.uk');
267
249
  });
268
250
  });
@@ -51,19 +51,13 @@ describe('macro: panel', () => {
51
51
  }),
52
52
  );
53
53
 
54
- expect(
55
- $('.ons-panel__body')
56
- .text()
57
- .trim(),
58
- ).toBe('Some panel text');
54
+ expect($('.ons-panel__body').text().trim()).toBe('Some panel text');
59
55
  });
60
56
 
61
57
  it('calls with content', () => {
62
58
  const $ = cheerio.load(renderComponent('panel', { EXAMPLE_PANEL_BASIC, type: panelType }, 'Example content...'));
63
59
 
64
- const content = $('.ons-panel__body')
65
- .text()
66
- .trim();
60
+ const content = $('.ons-panel__body').text().trim();
67
61
  expect(content).toBe('Example content...');
68
62
  });
69
63
 
@@ -124,11 +118,7 @@ describe('macro: panel', () => {
124
118
  }),
125
119
  );
126
120
 
127
- expect(
128
- $('.ons-panel__assistive-text')
129
- .text()
130
- .trim(),
131
- ).toBe(accessibleText);
121
+ expect($('.ons-panel__assistive-text').text().trim()).toBe(accessibleText);
132
122
  });
133
123
 
134
124
  it('has the provided visually hidden accessible text', () => {
@@ -140,11 +130,7 @@ describe('macro: panel', () => {
140
130
  }),
141
131
  );
142
132
 
143
- expect(
144
- $('.ons-panel__assistive-text')
145
- .text()
146
- .trim(),
147
- ).toBe('Some helpful text:');
133
+ expect($('.ons-panel__assistive-text').text().trim()).toBe('Some helpful text:');
148
134
  });
149
135
  });
150
136
 
@@ -333,11 +319,7 @@ describe('macro: panel', () => {
333
319
  }),
334
320
  );
335
321
 
336
- expect(
337
- $('.ons-panel__icon')
338
- .text()
339
- .trim(),
340
- ).toBe('!');
322
+ expect($('.ons-panel__icon').text().trim()).toBe('!');
341
323
  });
342
324
  });
343
325
 
@@ -362,11 +344,7 @@ describe('macro: panel', () => {
362
344
  }),
363
345
  );
364
346
 
365
- expect(
366
- $('.ons-panel__icon')
367
- .text()
368
- .trim(),
369
- ).toBe('!');
347
+ expect($('.ons-panel__icon').text().trim()).toBe('!');
370
348
  });
371
349
  });
372
350
 
@@ -406,7 +384,7 @@ describe('macro: panel', () => {
406
384
  expect($('.ons-panel__icon').hasClass('ons-u-fs-r')).toBe(true);
407
385
  });
408
386
 
409
- it.each(['r', 'm', 'l', 'xl'])('has the correct class for the provided `iconSize` override (%s)', customIconSize => {
387
+ it.each(['r', 'm', 'l', 'xl'])('has the correct class for the provided `iconSize` override (%s)', (customIconSize) => {
410
388
  const $ = cheerio.load(
411
389
  renderComponent('panel', {
412
390
  ...EXAMPLE_PANEL_BASIC,
@@ -4,7 +4,7 @@
4
4
  <div class="ons-grid ons-grid--flex ons-grid--gutterless ons-grid--vertical-top ons-grid--no-wrap">
5
5
  {% if not params.hideBadge %}
6
6
  <div class="ons-grid__col ons-col-auto ons-u-flex-no-grow ons-u-flex-no-shrink">
7
- <h3 class="ons-phase-banner__badge">{{ params.badge | default("Beta") }}</h3>
7
+ <strong class="ons-phase-banner__badge">{{ params.badge | default("Beta") }}</strong>
8
8
  </div>
9
9
  {% endif %}
10
10
  <div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
@@ -96,8 +96,8 @@
96
96
  <a
97
97
  href="{{ action.url }}"
98
98
  class="ons-summary__button"
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 %}
100
- >{{ action.text }}<span class="ons-u-vh">answer for {{ row.rowTitle }}</span></a>
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 %}
100
+ ><span class="ons-summary__button-text" aria-hidden="true">{{ action.text }}</span><span class="ons-u-vh">{{ action.visuallyHiddenText }}</span></a>
101
101
  {% endfor %}
102
102
  </dd>
103
103
  {% endif %}
@@ -49,6 +49,7 @@ const EXAMPLE_SUMMARY_ROWS = {
49
49
  actions: [
50
50
  {
51
51
  text: 'Action 1',
52
+ visuallyHiddenText: 'action 1 for row title 2',
52
53
  attributes: {
53
54
  a: 'abc',
54
55
  b: 'def',
@@ -57,6 +58,7 @@ const EXAMPLE_SUMMARY_ROWS = {
57
58
  },
58
59
  {
59
60
  text: 'Action 2',
61
+ visuallyHiddenText: 'action 2 for row title 2',
60
62
  url: '#2',
61
63
  },
62
64
  ],
@@ -147,10 +149,12 @@ const EXAMPLE_SUMMARY_HOUSEHOLD_GROUP = {
147
149
  actions: [
148
150
  {
149
151
  text: 'Change',
152
+ visuallyHiddenText: 'change list item',
150
153
  url: '#0',
151
154
  },
152
155
  {
153
156
  text: 'Remove',
157
+ visuallyHiddenText: 'remove list item',
154
158
  url: '#0',
155
159
  },
156
160
  ],
@@ -165,6 +169,7 @@ const EXAMPLE_SUMMARY_HOUSEHOLD_GROUP = {
165
169
  actions: [
166
170
  {
167
171
  text: 'Change',
172
+ visuallyHiddenText: 'change list item',
168
173
  url: '#0',
169
174
  },
170
175
  ],
@@ -179,6 +184,7 @@ const EXAMPLE_SUMMARY_HOUSEHOLD_GROUP = {
179
184
  actions: [
180
185
  {
181
186
  text: 'Change',
187
+ visuallyHiddenText: 'change list item',
182
188
  url: '#0',
183
189
  },
184
190
  ],
@@ -197,10 +203,12 @@ const EXAMPLE_SUMMARY_HOUSEHOLD_GROUP = {
197
203
  actions: [
198
204
  {
199
205
  text: 'Change',
206
+ visuallyHiddenText: 'change answer',
200
207
  url: '#0',
201
208
  },
202
209
  {
203
210
  text: 'Remove',
211
+ visuallyHiddenText: 'remove list item',
204
212
  url: '#0',
205
213
  },
206
214
  ],
@@ -215,6 +223,7 @@ const EXAMPLE_SUMMARY_HOUSEHOLD_GROUP = {
215
223
  actions: [
216
224
  {
217
225
  text: 'Change',
226
+ visuallyHiddenText: 'change list item',
218
227
  url: '#0',
219
228
  },
220
229
  ],
@@ -229,6 +238,7 @@ const EXAMPLE_SUMMARY_HOUSEHOLD_GROUP = {
229
238
  actions: [
230
239
  {
231
240
  text: 'Change',
241
+ visuallyHiddenText: 'change list item',
232
242
  url: '#0',
233
243
  },
234
244
  ],
@@ -390,11 +400,7 @@ describe('macro: summary', () => {
390
400
  it('displays the `rowTitle` text', () => {
391
401
  const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC));
392
402
 
393
- expect(
394
- $('.ons-summary__items .ons-summary__item:nth-of-type(1) .ons-summary__item--text')
395
- .text()
396
- .trim(),
397
- ).toBe('row title 1');
403
+ expect($('.ons-summary__items .ons-summary__item:nth-of-type(1) .ons-summary__item--text').text().trim()).toBe('row title 1');
398
404
  });
399
405
 
400
406
  it('has a custom icon `iconType`', () => {
@@ -430,21 +436,15 @@ describe('macro: summary', () => {
430
436
  it('displays the `valueList` text', () => {
431
437
  const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC));
432
438
 
433
- expect(
434
- $('.ons-summary__items .ons-summary__item:nth-of-type(1) dl .ons-summary__values .ons-summary__text')
435
- .text()
436
- .trim(),
437
- ).toBe('row value 1');
439
+ expect($('.ons-summary__items .ons-summary__item:nth-of-type(1) dl .ons-summary__values .ons-summary__text').text().trim()).toBe(
440
+ 'row value 1',
441
+ );
438
442
  });
439
443
 
440
444
  it('displays the `other` text', () => {
441
445
  const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC));
442
446
 
443
- expect(
444
- $('.ons-summary__items .ons-summary__item:nth-of-type(1) dl .ons-summary__values ul li')
445
- .text()
446
- .trim(),
447
- ).toBe('other value');
447
+ expect($('.ons-summary__items .ons-summary__item:nth-of-type(1) dl .ons-summary__values ul li').text().trim()).toBe('other value');
448
448
  });
449
449
 
450
450
  it('wraps the `valueList` in a ul if multiple values provided', () => {
@@ -476,11 +476,15 @@ describe('macro: summary', () => {
476
476
  const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC));
477
477
 
478
478
  expect(
479
- $('.ons-summary__items .ons-summary__item:nth-of-type(2) .ons-summary__actions .ons-summary__button:first-child').text(),
480
- ).toBe('Action 1answer for row title 2');
479
+ $(
480
+ '.ons-summary__items .ons-summary__item:nth-of-type(2) .ons-summary__actions .ons-summary__button:first-child .ons-summary__button-text',
481
+ ).text(),
482
+ ).toBe('Action 1');
481
483
  expect(
482
- $('.ons-summary__items .ons-summary__item:nth-of-type(2) .ons-summary__actions .ons-summary__button:last-child').text(),
483
- ).toBe('Action 2answer for row title 2');
484
+ $(
485
+ '.ons-summary__items .ons-summary__item:nth-of-type(2) .ons-summary__actions .ons-summary__button:last-child .ons-summary__button-text',
486
+ ).text(),
487
+ ).toBe('Action 2');
484
488
  });
485
489
 
486
490
  it('has the correct visually hidden <span> text', () => {
@@ -490,7 +494,10 @@ describe('macro: summary', () => {
490
494
  $(
491
495
  '.ons-summary__items .ons-summary__item:nth-of-type(2) .ons-summary__actions .ons-summary__button:first-child .ons-u-vh',
492
496
  ).text(),
493
- ).toBe('answer for row title 2');
497
+ ).toBe('action 1 for row title 2');
498
+ expect(
499
+ $('.ons-summary__items .ons-summary__item:nth-of-type(2) .ons-summary__actions .ons-summary__button:last-child .ons-u-vh').text(),
500
+ ).toBe('action 2 for row title 2');
494
501
  });
495
502
 
496
503
  it('has custom `attributes`', () => {
@@ -588,11 +595,7 @@ describe('macro: summary', () => {
588
595
  it('has the correct link `text`', () => {
589
596
  const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_WITH_NO_ROWS));
590
597
 
591
- expect(
592
- $('.ons-summary__group .ons-summary__link a')
593
- .text()
594
- .trim(),
595
- ).toBe('Summary link');
598
+ expect($('.ons-summary__group .ons-summary__link a').text().trim()).toBe('Summary link');
596
599
  });
597
600
 
598
601
  it('has the correct link `url`', () => {
@@ -19,6 +19,7 @@
19
19
  "actions": [
20
20
  {
21
21
  "text": "Change",
22
+ "visuallyHiddenText": "Change answer",
22
23
  "url": "#0"
23
24
  }
24
25
  ]
@@ -37,6 +38,7 @@
37
38
  "actions": [
38
39
  {
39
40
  "text": "Change",
41
+ "visuallyHiddenText": "Change answer",
40
42
  "url": "#0"
41
43
  }
42
44
  ]
@@ -19,6 +19,7 @@
19
19
  "actions": [
20
20
  {
21
21
  "text": "Change",
22
+ "visuallyHiddenText": "Change answer",
22
23
  "url": "#0"
23
24
  }
24
25
  ]
@@ -39,6 +40,7 @@
39
40
  "actions": [
40
41
  {
41
42
  "text": "Change",
43
+ "visuallyHiddenText": "Change answer",
42
44
  "url": "#0"
43
45
  }
44
46
  ]
@@ -58,6 +60,7 @@
58
60
  "actions": [
59
61
  {
60
62
  "text": "Change",
63
+ "visuallyHiddenText": "Change answer",
61
64
  "url": "#0"
62
65
  }
63
66
  ]
@@ -77,6 +80,7 @@
77
80
  "actions": [
78
81
  {
79
82
  "text": "Change",
83
+ "visuallyHiddenText": "Change answer",
80
84
  "url": "#0"
81
85
  }
82
86
  ]
@@ -23,6 +23,7 @@
23
23
  "actions": [
24
24
  {
25
25
  "text": "Change",
26
+ "visuallyHiddenText": "Change answer",
26
27
  "url": "#0"
27
28
  }
28
29
  ]
@@ -41,6 +42,7 @@
41
42
  "actions": [
42
43
  {
43
44
  "text": "Change",
45
+ "visuallyHiddenText": "Change answer",
44
46
  "url": "#0"
45
47
  }
46
48
  ]
@@ -59,6 +61,7 @@
59
61
  "actions": [
60
62
  {
61
63
  "text": "Change",
64
+ "visuallyHiddenText": "Change answer",
62
65
  "url": "#0"
63
66
  }
64
67
  ]
@@ -82,6 +85,7 @@
82
85
  "actions": [
83
86
  {
84
87
  "text": "Change",
88
+ "visuallyHiddenText": "Change answer",
85
89
  "url": "#0"
86
90
  }
87
91
  ]
@@ -100,6 +104,7 @@
100
104
  "actions": [
101
105
  {
102
106
  "text": "Change",
107
+ "visuallyHiddenText": "Change answer",
103
108
  "url": "#0"
104
109
  }
105
110
  ]
@@ -123,6 +128,7 @@
123
128
  "actions": [
124
129
  {
125
130
  "text": "Change",
131
+ "visuallyHiddenText": "Change answer",
126
132
  "url": "#0"
127
133
  }
128
134
  ]
@@ -141,6 +147,7 @@
141
147
  "actions": [
142
148
  {
143
149
  "text": "Change",
150
+ "visuallyHiddenText": "Change answer",
144
151
  "url": "#0"
145
152
  }
146
153
  ]
@@ -164,10 +171,12 @@
164
171
  "actions": [
165
172
  {
166
173
  "text": "Change",
174
+ "visuallyHiddenText": "Change answer",
167
175
  "url": "#0"
168
176
  },
169
177
  {
170
178
  "text": "Remove",
179
+ "visuallyHiddenText": "Remove company",
171
180
  "url": "#0"
172
181
  }
173
182
  ]
@@ -182,6 +191,7 @@
182
191
  "actions": [
183
192
  {
184
193
  "text": "Change",
194
+ "visuallyHiddenText": "Change answer",
185
195
  "url": "#0"
186
196
  }
187
197
  ]
@@ -196,6 +206,7 @@
196
206
  "actions": [
197
207
  {
198
208
  "text": "Change",
209
+ "visuallyHiddenText": "Change answer",
199
210
  "url": "#0"
200
211
  }
201
212
  ]
@@ -214,10 +225,12 @@
214
225
  "actions": [
215
226
  {
216
227
  "text": "Change",
228
+ "visuallyHiddenText": "Change answer",
217
229
  "url": "#0"
218
230
  },
219
231
  {
220
232
  "text": "Remove",
233
+ "visuallyHiddenText": "Remove company",
221
234
  "url": "#0"
222
235
  }
223
236
  ]
@@ -232,6 +245,7 @@
232
245
  "actions": [
233
246
  {
234
247
  "text": "Change",
248
+ "visuallyHiddenText": "Change answer",
235
249
  "url": "#0"
236
250
  }
237
251
  ]
@@ -246,6 +260,7 @@
246
260
  "actions": [
247
261
  {
248
262
  "text": "Change",
263
+ "visuallyHiddenText": "Change answer",
249
264
  "url": "#0"
250
265
  }
251
266
  ]
@@ -277,6 +292,7 @@
277
292
  "actions": [
278
293
  {
279
294
  "text": "Change",
295
+ "visuallyHiddenText": "Change answer",
280
296
  "url": "#0"
281
297
  }
282
298
  ]
@@ -291,6 +307,7 @@
291
307
  "actions": [
292
308
  {
293
309
  "text": "Change",
310
+ "visuallyHiddenText": "Change answer",
294
311
  "url": "#0"
295
312
  }
296
313
  ]
@@ -305,6 +322,7 @@
305
322
  "actions": [
306
323
  {
307
324
  "text": "Change",
325
+ "visuallyHiddenText": "Change answer",
308
326
  "url": "#0"
309
327
  }
310
328
  ]
@@ -319,6 +337,7 @@
319
337
  "actions": [
320
338
  {
321
339
  "text": "Change",
340
+ "visuallyHiddenText": "Change answer",
322
341
  "url": "#0"
323
342
  }
324
343
  ]
@@ -15,6 +15,7 @@
15
15
  "actions": [
16
16
  {
17
17
  "text": "Change",
18
+ "visuallyHiddenText": "Change details for Joe Bloggs",
18
19
  "url": "#0"
19
20
  }
20
21
  ]
@@ -29,10 +30,12 @@
29
30
  "actions": [
30
31
  {
31
32
  "text": "Change",
33
+ "visuallyHiddenText": "Change details for Barry Scott",
32
34
  "url": "#0"
33
35
  },
34
36
  {
35
37
  "text": "Remove",
38
+ "visuallyHiddenText": "Remove Barry Scott",
36
39
  "url": "#0"
37
40
  }
38
41
  ]
@@ -47,10 +50,12 @@
47
50
  "actions": [
48
51
  {
49
52
  "text": "Change",
53
+ "visuallyHiddenText": "Change details for Susan Gill",
50
54
  "url": "#0"
51
55
  },
52
56
  {
53
57
  "text": "Remove",
58
+ "visuallyHiddenText": "Remove Susan Gill",
54
59
  "url": "#0"
55
60
  }
56
61
  ]
@@ -20,6 +20,7 @@
20
20
  "actions": [
21
21
  {
22
22
  "text": "View answers",
23
+ "visuallyHiddenText": "View answers for People who live here",
23
24
  "url": "#0"
24
25
  }
25
26
  ]
@@ -39,6 +40,7 @@
39
40
  "actions": [
40
41
  {
41
42
  "text": "View answers",
43
+ "visuallyHiddenText": "View answers for Accommodation",
42
44
  "url": "#0"
43
45
  }
44
46
  ]
@@ -58,6 +60,7 @@
58
60
  "actions": [
59
61
  {
60
62
  "text": "View answers",
63
+ "visuallyHiddenText": "View answers for Mary Smith",
61
64
  "url": "#0"
62
65
  }
63
66
  ]
@@ -76,6 +79,7 @@
76
79
  "actions": [
77
80
  {
78
81
  "text": "Continue with section",
82
+ "visuallyHiddenText": "Continue with John Smith's section",
79
83
  "url": "#0"
80
84
  }
81
85
  ]
@@ -94,6 +98,7 @@
94
98
  "actions": [
95
99
  {
96
100
  "text": "Start section",
101
+ "visuallyHiddenText": "Start Billy Smith's section",
97
102
  "url": "#0"
98
103
  }
99
104
  ]
@@ -112,6 +117,7 @@
112
117
  "actions": [
113
118
  {
114
119
  "text": "Start section",
120
+ "visuallyHiddenText": "Start Sally Smith's section",
115
121
  "url": "#0"
116
122
  }
117
123
  ]
@@ -130,6 +136,7 @@
130
136
  "actions": [
131
137
  {
132
138
  "text": "Start section",
139
+ "visuallyHiddenText": "Start Wilhelmina Susannah Clementine-Smith's section",
133
140
  "url": "#0"
134
141
  }
135
142
  ]
@@ -148,6 +155,7 @@
148
155
  "actions": [
149
156
  {
150
157
  "text": "Start section",
158
+ "visuallyHiddenText": "Start Vera Jones's section",
151
159
  "url": "#0"
152
160
  }
153
161
  ]
@@ -20,6 +20,7 @@
20
20
  "actions": [
21
21
  {
22
22
  "text": "Change",
23
+ "visuallyHiddenText": "Change answer",
23
24
  "url": "#0"
24
25
  }
25
26
  ]
@@ -34,6 +35,7 @@
34
35
  "actions": [
35
36
  {
36
37
  "text": "Change",
38
+ "visuallyHiddenText": "Change answer",
37
39
  "url": "#0"
38
40
  }
39
41
  ]
@@ -48,6 +50,7 @@
48
50
  "actions": [
49
51
  {
50
52
  "text": "Change",
53
+ "visuallyHiddenText": "Change answer",
51
54
  "url": "#0"
52
55
  }
53
56
  ]
@@ -62,6 +65,7 @@
62
65
  "actions": [
63
66
  {
64
67
  "text": "Change",
68
+ "visuallyHiddenText": "Change answer",
65
69
  "url": "#0"
66
70
  }
67
71
  ]
@@ -24,6 +24,7 @@
24
24
  "actions": [
25
25
  {
26
26
  "text": "Change",
27
+ "visuallyHiddenText": "Change answer",
27
28
  "url": "#0"
28
29
  }
29
30
  ]
@@ -44,6 +45,7 @@
44
45
  "actions": [
45
46
  {
46
47
  "text": "Change",
48
+ "visuallyHiddenText": "Change answer",
47
49
  "url": "#0"
48
50
  }
49
51
  ]
@@ -68,6 +70,7 @@
68
70
  "actions": [
69
71
  {
70
72
  "text": "Change",
73
+ "visuallyHiddenText": "Change answer",
71
74
  "url": "#0"
72
75
  }
73
76
  ]
@@ -88,6 +91,7 @@
88
91
  "actions": [
89
92
  {
90
93
  "text": "Change",
94
+ "visuallyHiddenText": "Change answer",
91
95
  "url": "#0"
92
96
  }
93
97
  ]
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@ons/design-system",
3
3
  "description": "ONS Design System built CSS, JS, and Nunjucks templates",
4
- "version": "65.2.1",
4
+ "version": "65.2.2",
5
5
  "main": "index.js",
6
6
  "license": "MIT",
7
7
  "author": {
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes