@ons/design-system 72.10.4 → 72.10.6

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 (39) hide show
  1. package/components/button/_button.scss +8 -6
  2. package/components/chart/_chart.scss +2 -14
  3. package/components/chart/_macro.njk +15 -3
  4. package/components/chart/_macro.spec.js +163 -1
  5. package/components/chart/boxplot.js +3 -0
  6. package/components/chart/columnrange-chart.js +3 -0
  7. package/components/chart/example-area-chart-with-axis-min-and-max-values.njk +72 -0
  8. package/components/chart/example-bar-chart-with-axis-min-and-max-values.njk +59 -0
  9. package/components/chart/example-column-chart-with-axis-min-and-max-values.njk +59 -0
  10. package/components/chart/example-line-chart-with-axis-min-and-max-values.njk +227 -0
  11. package/components/chart/example-scatter-chart-with-axis-min-and-max-values.njk +98 -0
  12. package/components/chart/specific-chart-options.js +29 -6
  13. package/components/details-panel/_details-panel.scss +4 -0
  14. package/components/details-panel/_macro.njk +17 -13
  15. package/components/details-panel/_macro.spec.js +17 -0
  16. package/components/details-panel/example-details-panel-open.njk +2 -1
  17. package/components/details-panel/example-details-panel.njk +2 -1
  18. package/components/header/_header.scss +40 -24
  19. package/components/header/_macro.njk +103 -89
  20. package/components/header/_macro.spec.js +131 -3
  21. package/components/header/example-header-basic-with-search-and-language.njk +207 -0
  22. package/components/header/{example-header-with-search-button.njk → example-header-basic-with-search-button.njk} +1 -0
  23. package/components/header/example-header-basic.njk +1 -0
  24. package/components/hero/_macro.njk +9 -2
  25. package/components/hero/_macro.spec.js +22 -0
  26. package/components/hero/example-hero-grey.njk +2 -1
  27. package/components/language-selector/_macro.njk +1 -1
  28. package/components/language-selector/_macro.spec.js +49 -3
  29. package/components/navigation/navigation.js +24 -17
  30. package/components/pagination/_macro.njk +17 -7
  31. package/components/pagination/_macro.spec.js +191 -17
  32. package/components/table/_macro.njk +83 -44
  33. package/components/table/_macro.spec.js +90 -0
  34. package/components/table/_table.scss +15 -3
  35. package/components/table/example-table-merge-cells.njk +139 -0
  36. package/css/main.css +1 -1
  37. package/package.json +1 -1
  38. package/scripts/main.es5.js +1 -1
  39. package/scripts/main.js +1 -1
package/components/header/_macro.njk CHANGED
@@ -7,6 +7,7 @@
7
7
  {% set openingTag = "<" + titleTag %}
8
8
  {% set closingTag = "</" + titleTag + ">" %}
9
9
  {% set currentLanguageIsoCode = "en" %}
10
+ {% set logoAltText = params.mastheadLogoAltText or params.mastheadLogo.altText %}
10
11
 
11
12
  {% if params.language and params.language.languages %}
12
13
  {% set currentLanguage = params.language.languages | selectattr("current") | first %}
@@ -42,7 +43,6 @@
42
43
  >
43
44
  <div class="ons-grid__col ons-col-auto">
44
45
  {%- if not params.mastheadLogo.multipleLogos -%}
45
-
46
46
  {% set mastheadLogo %}
47
47
  <div class="ons-header__org-logo ons-header__org-logo--large">
48
48
  {% if params.mastheadLogo.large %}
@@ -51,7 +51,7 @@
51
51
  {{-
52
52
  onsIcon({
53
53
  "iconType": 'ons-logo-' + currentLanguageIsoCode,
54
- "altText": 'Office for National Statistics homepage'
54
+ "altText": logoAltText | default('Office for National Statistics logo')
55
55
  })
56
56
  -}}
57
57
  {% endif %}
@@ -65,7 +65,7 @@
65
65
  {{-
66
66
  onsIcon({
67
67
  "iconType": 'ons-logo-stacked-' + currentLanguageIsoCode,
68
- "altText": 'Office for National Statistics logo'
68
+ "altText": logoAltText | default('Office for National Statistics logo')
69
69
  })
70
70
  -}}
71
71
  {% endif %}
@@ -88,7 +88,7 @@
88
88
  {{-
89
89
  onsIcon({
90
90
  "iconType": 'ons-logo-stacked-' + currentLanguageIsoCode,
91
- "altText": 'Office for National Statistics logo'
91
+ "altText": logoAltText | default('Office for National Statistics logo')
92
92
  })
93
93
  -}}
94
94
  {% endif %}
@@ -102,86 +102,9 @@
102
102
  </div>
103
103
  {%- endif -%}
104
104
  </div>
105
- {% if params.language or params.serviceLinks %}
106
- <div class="ons-header__links ons-grid__col ons-u-ml-auto">
107
- {% if params.language %}
108
- <div class="ons-grid__col ons-col-auto{{ ' ons-u-mr-s ons-u-d-no@2xs@xs' if params.serviceLinks }}">
109
- {% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
110
- {{ onsLanguageSelector(params.language) }}
111
- </div>
112
- {% endif %}
113
- {% if params.serviceLinks %}
114
- {% if params.serviceLinks.itemsList | length == 1 and params.language %}
115
- {% set breakpoint = 'xs' %}
116
- {% set controlVisibility = true %}
117
- {% elif params.serviceLinks.itemsList | length > 1 %}
118
- {% set breakpoint = 'm' %}
119
- {% set controlVisibility = true %}
120
- {% else %}
121
- {% set controlVisibility = false %}
122
- {% endif %}
123
- <div
124
- class="ons-grid__col ons-col-auto{% if controlVisibility == true %}{{ ' ' }}ons-u-d-no@2xs@{{ breakpoint }}{% endif %}"
125
- >
126
- <nav
127
- class="ons-header-service-nav ons-header-service-nav--main{{ ' ' + params.serviceLinks.classes if params.serviceLinks.classes else '' }}"
128
- aria-label="{{ params.serviceLinks.ariaLabel | default('Service links navigation') }}"
129
- >
130
- <ul class="ons-header-service-nav__list">
131
- {% for item in params.serviceLinks.itemsList %}
132
- <li class="ons-header-service-nav__item">
133
- {% if item.iconType %}
134
- {{-
135
- onsIcon({
136
- "iconType": item.iconType
137
- })
138
- -}}
139
- {% endif %}
140
- {% if item.url %}
141
- <a
142
- href="{{ item.url }}"
143
- class="ons-header-service-nav__link"
144
- {% if item.id %}id="{{ item.id }}"{% endif %}
145
- >{% if item.title %}{{ item.title }}{% elif item.text %}{{ item.text }}{% endif %}</a
146
- >
147
- {% else %}
148
- {% if item.title %}{{ item.title }}{% elif item.text %}{{ item.text }}{% endif %}
149
- {% endif %}
150
- </li>
151
- {% endfor %}
152
- </ul>
153
- </nav>
154
- </div>
155
- {% if params.serviceLinks.itemsList | length > 1 or params.language %}
156
- {% if params.variants == 'internal' %}
157
- {% set buttonVariant = ["mobile", "text-link", "text-link-inverse"] %}
158
- {% elif params.variants == 'neutral' %}
159
- {% set buttonVariant = ["mobile", "neutral"] %}
160
- {% else %}
161
- {% set buttonVariant = ["mobile", "text-link"] %}
162
- {% endif %}
163
- <div class="ons-grid__col ons-col-auto ons-u-d-no@{{ breakpoint }}">
164
- {{
165
- onsButton({
166
- "text": params.serviceLinks.toggleServicesButton.text | default("Account"),
167
- "classes": "ons-u-d-no ons-js-toggle-services",
168
- "type": "button",
169
- "variants": buttonVariant,
170
- "attributes": {
171
- "aria-label": params.serviceLinks.toggleServicesButton.ariaLabel | default("Toggle menu"),
172
- "aria-controls": params.serviceLinks.id,
173
- "aria-expanded": "false"
174
- }
175
- })
176
- }}
177
- </div>
178
- {% endif %}
179
- {% endif %}
180
- </div>
181
- {% endif %}
182
105
 
183
106
  {% if params.variants == "basic" %}
184
- <div class="ons-grid__col ons-col-auto ons-header__menu-links">
107
+ <div class="ons-grid__col ons-col-auto ons-header__menu-links ons-u-ml-auto">
185
108
  {% if params.menuLinks %}
186
109
  <div class="ons-header__links ons-grid__col">
187
110
  {{
@@ -203,6 +126,15 @@
203
126
  </div>
204
127
  {% endif %}
205
128
 
129
+ {% if params.language %}
130
+ <div class="ons-grid__col ons-col-auto{{ ' ons-u-mr-s ons-u-d-no@2xs@xs' if params.serviceLinks }}">
131
+ <div class="ons-header__language">
132
+ {% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
133
+ {{ onsLanguageSelector(params.language) }}
134
+ </div>
135
+ </div>
136
+ {% endif %}
137
+
206
138
  {% if params.variants == "basic" and params.menuLinks %}
207
139
  <nav
208
140
  class="ons-js-nav-menu ons-header-nav-menu ons-u-pt-2xl"
@@ -318,15 +250,14 @@
318
250
  "id": 'search-field',
319
251
  "width": 'full',
320
252
  "label": {
321
- "text": 'Search the ONS',
253
+ "text": params.searchLinks.searchNavigationInputLabel | default('Search the ONS'),
322
254
  "id": "header-search-input-label"
323
255
  },
324
256
  "searchButton": {
325
257
  "visuallyHideButtonText": true,
326
- "text": 'Search',
258
+ "text": params.searchLinks.searchNavigationButtonText | default('Search'),
327
259
  "iconType": 'search',
328
260
  'variant': 'header'
329
-
330
261
  }
331
262
  })
332
263
  }}
@@ -361,6 +292,87 @@
361
292
  {% endif %}
362
293
  </div>
363
294
  {% endif %}
295
+ {% if params.language or params.serviceLinks %}
296
+ <div
297
+ class="ons-header__links ons-grid__col{{ ' ons-u-ml-auto' if not params.searchLinks and not params.menuLinks }}"
298
+ >
299
+ {% if params.language %}
300
+ <div class="ons-grid__col ons-col-auto{{ ' ons-u-mr-s ons-u-d-no@2xs@xs' if params.serviceLinks }}">
301
+ <div class="ons-header__language">
302
+ {% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
303
+ {{ onsLanguageSelector(params.language) }}
304
+ </div>
305
+ </div>
306
+ {% endif %}
307
+ {% if params.serviceLinks %}
308
+ {% if params.serviceLinks.itemsList | length == 1 and params.language %}
309
+ {% set breakpoint = 'xs' %}
310
+ {% set controlVisibility = true %}
311
+ {% elif params.serviceLinks.itemsList | length > 1 %}
312
+ {% set breakpoint = 'm' %}
313
+ {% set controlVisibility = true %}
314
+ {% else %}
315
+ {% set controlVisibility = false %}
316
+ {% endif %}
317
+ <div
318
+ class="ons-grid__col ons-col-auto{% if controlVisibility == true %}{{ ' ' }}ons-u-d-no@2xs@{{ breakpoint }}{% endif %}"
319
+ >
320
+ <nav
321
+ class="ons-header-service-nav ons-header-service-nav--main{{ ' ' + params.serviceLinks.classes if params.serviceLinks.classes else '' }}"
322
+ aria-label="{{ params.serviceLinks.ariaLabel | default('Service links navigation') }}"
323
+ >
324
+ <ul class="ons-header-service-nav__list">
325
+ {% for item in params.serviceLinks.itemsList %}
326
+ <li class="ons-header-service-nav__item">
327
+ {% if item.iconType %}
328
+ {{-
329
+ onsIcon({
330
+ "iconType": item.iconType
331
+ })
332
+ -}}
333
+ {% endif %}
334
+ {% if item.url %}
335
+ <a
336
+ href="{{ item.url }}"
337
+ class="ons-header-service-nav__link"
338
+ {% if item.id %}id="{{ item.id }}"{% endif %}
339
+ >{% if item.title %}{{ item.title }}{% elif item.text %}{{ item.text }}{% endif %}</a
340
+ >
341
+ {% else %}
342
+ {% if item.title %}{{ item.title }}{% elif item.text %}{{ item.text }}{% endif %}
343
+ {% endif %}
344
+ </li>
345
+ {% endfor %}
346
+ </ul>
347
+ </nav>
348
+ </div>
349
+ {% if params.serviceLinks.itemsList | length > 1 or params.language %}
350
+ {% if params.variants == 'internal' %}
351
+ {% set buttonVariant = ["mobile", "text-link", "text-link-inverse"] %}
352
+ {% elif params.variants == 'neutral' %}
353
+ {% set buttonVariant = ["mobile", "neutral"] %}
354
+ {% else %}
355
+ {% set buttonVariant = ["mobile", "text-link"] %}
356
+ {% endif %}
357
+ <div class="ons-grid__col ons-col-auto ons-u-d-no@{{ breakpoint }}">
358
+ {{
359
+ onsButton({
360
+ "text": params.serviceLinks.toggleServicesButton.text | default("Account"),
361
+ "classes": "ons-u-d-no ons-js-toggle-services",
362
+ "type": "button",
363
+ "variants": buttonVariant,
364
+ "attributes": {
365
+ "aria-label": params.serviceLinks.toggleServicesButton.ariaLabel | default("Toggle menu"),
366
+ "aria-controls": params.serviceLinks.id,
367
+ "aria-expanded": "false"
368
+ }
369
+ })
370
+ }}
371
+ </div>
372
+ {% endif %}
373
+ {% endif %}
374
+ </div>
375
+ {% endif %}
364
376
  </div>
365
377
  </div>
366
378
  {% if params.serviceLinks %}
@@ -393,8 +405,10 @@
393
405
  {% endfor %}
394
406
  </ul>
395
407
  {% if params.language %}
396
- {% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
397
- {{ onsLanguageSelector(params.language) }}
408
+ <div class="ons-header__language">
409
+ {% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
410
+ {{ onsLanguageSelector(params.language) }}
411
+ </div>
398
412
  {% endif %}
399
413
  </nav>
400
414
  {% endif %}
@@ -478,13 +492,13 @@
478
492
  <span class="ons-grid ons-u-d-no@2xs@xs ons-u-ml-no ons-u-d-no@l">
479
493
  {{
480
494
  onsButton({
481
- "text": "Search",
495
+ "text": params.searchLinks.searchNavigationButtonText | default('Search'),
482
496
  "classes": "ons-btn--search ons-u-ml-2xs ons-u-d-no ons-js-toggle-search",
483
497
  "variants": buttonVariant,
484
498
  "iconType": "search",
485
499
  "iconPosition": "only",
486
500
  "attributes": {
487
- "aria-label": "Toggle search" ,
501
+ "aria-label": params.searchLinks.searchNavigationButtonAriaLabel | default('Toggle search'),
488
502
  "aria-controls": "ons-site-search",
489
503
  "aria-expanded": "false"
490
504
  }
package/components/header/_macro.spec.js CHANGED
@@ -106,7 +106,7 @@ describe('FOR: Macro: Header', () => {
106
106
  expect(iconsSpy.occurrences[0].iconType).toBe('ons-logo-en');
107
107
  });
108
108
  test('THEN: renders logo with correct default alt-text on large screen', () => {
109
- expect(iconsSpy.occurrences[0].altText).toBe('Office for National Statistics homepage');
109
+ expect(iconsSpy.occurrences[0].altText).toBe('Office for National Statistics logo');
110
110
  });
111
111
  test('THEN: renders default small logo on small screen', () => {
112
112
  expect(iconsSpy.occurrences[1].iconType).toBe('ons-logo-stacked-en');
@@ -153,6 +153,30 @@ describe('FOR: Macro: Header', () => {
153
153
  });
154
154
  });
155
155
  });
156
+ describe('GIVEN: Params: mastheadLogoAltText', () => {
157
+ describe('WHEN: mastheadLogoAltText is provided', () => {
158
+ const faker = templateFaker();
159
+ const iconsSpy = faker.spy('icon');
160
+ faker.renderComponent('header', {
161
+ ...EXAMPLE_HEADER_BASIC,
162
+ mastheadLogoAltText: 'Custom alt text for logo',
163
+ });
164
+ test('THEN: renders logo with provided alt text', () => {
165
+ expect(iconsSpy.occurrences[0].altText).toBe('Custom alt text for logo');
166
+ });
167
+ });
168
+ describe('WHEN: mastheadLogoAltText is not provided', () => {
169
+ const faker = templateFaker();
170
+ const iconsSpy = faker.spy('icon');
171
+ faker.renderComponent('header', {
172
+ ...EXAMPLE_HEADER_BASIC,
173
+ mastheadLogoAltText: undefined,
174
+ });
175
+ test('THEN: renders logo with default alt text', () => {
176
+ expect(iconsSpy.occurrences[0].altText).toBe('Office for National Statistics logo');
177
+ });
178
+ });
179
+ });
156
180
  describe('GIVEN: Params: multipleLogos', () => {
157
181
  describe('WHEN: image parameter is set to "ONS Logo"', () => {
158
182
  const faker = templateFaker();
@@ -803,7 +827,7 @@ describe('FOR: Macro: Header', () => {
803
827
  attributes: {
804
828
  'aria-controls': 'search-links-id',
805
829
  'aria-expanded': 'true',
806
- 'aria-label': 'Example aria label',
830
+ 'aria-label': 'Custom search button aria label',
807
831
  'aria-disabled': 'true',
808
832
  },
809
833
  });
@@ -857,7 +881,7 @@ describe('FOR: Macro: Header', () => {
857
881
  const $ = cheerio.load(renderComponent('header', { ...EXAMPLE_HEADER_SEARCH_LINKS, variants: 'basic' }));
858
882
 
859
883
  test('THEN: it renders heading with provided text', () => {
860
- expect($('.ons-header-nav-search__heading').text()).toBe('Header Search');
884
+ expect($('.ons-header-nav-search__heading').text().trim()).toBe('Header Search');
861
885
  });
862
886
  });
863
887
 
@@ -901,6 +925,110 @@ describe('FOR: Macro: Header', () => {
901
925
  expect($searchBtn.attr('aria-disabled')).toBe('true');
902
926
  });
903
927
  });
928
+
929
+ describe('WHEN: searchLinks are provided with all custom properties', () => {
930
+ const faker = templateFaker();
931
+ const buttonSpy = faker.spy('button', { suppressOutput: true });
932
+ faker.renderComponent('header', { ...EXAMPLE_HEADER_SEARCH_LINKS, variants: 'basic' });
933
+ test('THEN: renders search icon button with custom aria-label', () => {
934
+ expect(buttonSpy.occurrences[0]).toBeDefined();
935
+ expect(buttonSpy.occurrences[0].attributes['aria-label']).toBe('Custom search button aria label');
936
+ });
937
+ });
938
+ describe('WHEN: searchButtonAriaLabel is not provided', () => {
939
+ const faker = templateFaker();
940
+ const buttonSpy = faker.spy('button', { suppressOutput: true });
941
+ faker.renderComponent('header', {
942
+ ...EXAMPLE_HEADER_SEARCH_LINKS,
943
+ searchLinks: {
944
+ ...EXAMPLE_HEADER_SEARCH_LINKS.searchLinks,
945
+ searchButtonAriaLabel: undefined,
946
+ },
947
+ variants: 'basic',
948
+ });
949
+ test('THEN: renders search icon button with default aria-label', () => {
950
+ expect(buttonSpy.occurrences[0]).toBeDefined();
951
+ expect(buttonSpy.occurrences[0].attributes['aria-label']).toBe('Toggle search');
952
+ });
953
+ });
954
+ describe('WHEN: searchNavigationButtonAriaLabel is provided', () => {
955
+ const faker = templateFaker();
956
+ const buttonSpy = faker.spy('button', { suppressOutput: true });
957
+ faker.renderComponent('header', {
958
+ ...EXAMPLE_HEADER_SEARCH_LINKS,
959
+ siteSearchAutosuggest: {},
960
+ });
961
+ test('THEN: renders search navigation button with custom aria-label', () => {
962
+ const found = buttonSpy.occurrences.find(
963
+ (btn) => btn.attributes && btn.attributes['aria-label'] === 'Custom search nav button aria label',
964
+ );
965
+ expect(found).toBeDefined();
966
+ });
967
+ });
968
+ describe('WHEN: searchNavigationButtonAriaLabel is not provided', () => {
969
+ const faker = templateFaker();
970
+ const buttonSpy = faker.spy('button', { suppressOutput: true });
971
+ faker.renderComponent('header', {
972
+ ...EXAMPLE_HEADER_SEARCH_LINKS,
973
+ searchLinks: {
974
+ ...EXAMPLE_HEADER_SEARCH_LINKS.searchLinks,
975
+ searchNavigationButtonAriaLabel: undefined,
976
+ },
977
+ siteSearchAutosuggest: {},
978
+ });
979
+ test('THEN: renders search navigation button with default aria-label', () => {
980
+ const found = buttonSpy.occurrences.find((btn) => btn.attributes && btn.attributes['aria-label'] === 'Toggle search');
981
+ expect(found).toBeDefined();
982
+ });
983
+ });
984
+ describe('WHEN: searchNavigationInputLabel is provided', () => {
985
+ const $ = cheerio.load(renderComponent('header', { ...EXAMPLE_HEADER_SEARCH_LINKS, variants: 'basic' }));
986
+ test('THEN: renders search input with custom label', () => {
987
+ expect($('#header-search-input-label').text().trim()).toBe('Custom search input label');
988
+ });
989
+ });
990
+ describe('WHEN: searchNavigationInputLabel is not provided', () => {
991
+ const $ = cheerio.load(
992
+ renderComponent('header', {
993
+ ...EXAMPLE_HEADER_SEARCH_LINKS,
994
+ searchLinks: {
995
+ ...EXAMPLE_HEADER_SEARCH_LINKS.searchLinks,
996
+ searchNavigationInputLabel: undefined,
997
+ },
998
+ variants: 'basic',
999
+ }),
1000
+ );
1001
+ test('THEN: renders search input with default label', () => {
1002
+ expect($('#header-search-input-label').text().trim()).toBe('Search the ONS');
1003
+ });
1004
+ });
1005
+ describe('WHEN: searchNavigationButtonText is provided', () => {
1006
+ const $ = cheerio.load(renderComponent('header', { ...EXAMPLE_HEADER_SEARCH_LINKS, variants: 'basic' }));
1007
+
1008
+ test('THEN: renders the visually hidden search navigation button text', () => {
1009
+ const $button = $('.ons-search__btn.ons-btn--header-search');
1010
+ const hiddenText = $button.find('.ons-u-vh').text().trim();
1011
+ expect(hiddenText).toBe(EXAMPLE_HEADER_SEARCH_LINKS.searchLinks.searchNavigationButtonText);
1012
+ });
1013
+ });
1014
+ describe('WHEN: searchNavigationButtonText is not provided', () => {
1015
+ const $ = cheerio.load(
1016
+ renderComponent('header', {
1017
+ ...EXAMPLE_HEADER_SEARCH_LINKS,
1018
+ searchLinks: {
1019
+ ...EXAMPLE_HEADER_SEARCH_LINKS.searchLinks,
1020
+ searchNavigationButtonText: undefined,
1021
+ },
1022
+ variants: 'basic',
1023
+ }),
1024
+ );
1025
+
1026
+ test('THEN: renders the default fallback search navigation button text', () => {
1027
+ const $button = $('.ons-search__btn.ons-btn--header-search');
1028
+ const hiddenText = $button.find('.ons-u-vh').text().trim();
1029
+ expect(hiddenText).toBe('Search');
1030
+ });
1031
+ });
904
1032
  });
905
1033
 
906
1034
  describe('GIVEN: Params: menuLinks', () => {
package/components/header/example-header-basic-with-search-and-language.njk ADDED
@@ -0,0 +1,207 @@
1
+ ---
2
+ 'fullWidth': true
3
+ ---
4
+
5
+ {% from "components/header/_macro.njk" import onsHeader %}
6
+
7
+ {{
8
+ onsHeader({
9
+ "variants": 'basic',
10
+ "language": {
11
+ "languages": [
12
+ {
13
+ "url": '#0',
14
+ "isoCode": 'en',
15
+ "text": 'English',
16
+ "current": false
17
+ },
18
+ {
19
+ "url": '#0',
20
+ "isoCode": 'cy',
21
+ "text": 'Cymraeg',
22
+ "current": true
23
+ }
24
+ ]
25
+ },
26
+ "menuLinks": {
27
+ "id": "menu-links",
28
+ "keyLinks": [
29
+ {
30
+ 'heading': 'Taking part in a survey?',
31
+ 'description': 'It’s never been more important.'
32
+ },
33
+ {
34
+ 'heading': 'Release calendar',
35
+ 'description': 'View our latest and upcoming releases.'
36
+ },
37
+ {
38
+ 'heading': 'Explore local statistics',
39
+ 'url': '#0',
40
+ 'description': 'Explore statistics across the UK.'
41
+ }
42
+ ],
43
+ "columns": [
44
+ {
45
+ "groups": [
46
+ {
47
+ "heading": "People, population and community",
48
+ "groupItems": [
49
+ {
50
+ "text": "Armed forces community"
51
+ },
52
+ {
53
+ "text": "Births, deaths and marriages"
54
+ },
55
+ {
56
+ "text": "Crime and justice"
57
+ },
58
+ {
59
+ "text": "Cultural identity"
60
+ },
61
+ {
62
+ "text": "Education and childcare"
63
+ },
64
+ {
65
+ "text": "Elections"
66
+ },
67
+ {
68
+ "text": "Health and social care"
69
+ },
70
+ {
71
+ "text": "Household characteristics"
72
+ },
73
+ {
74
+ "text": "Housing"
75
+ },
76
+ {
77
+ "text": "Leisure and tourism"
78
+ },
79
+ {
80
+ "text": "Personal and household finances"
81
+ },
82
+ {
83
+ "text": "Population and migration"
84
+ },
85
+ {
86
+ "text": "Well-being"
87
+ }
88
+ ]
89
+ }
90
+ ]
91
+ },
92
+ {
93
+ "groups": [
94
+ {
95
+ "heading": "Business, industry and trade",
96
+ "groupItems": [
97
+ {
98
+ "text": "Business"
99
+ },
100
+ {
101
+ "text": "Changes to business"
102
+ },
103
+ {
104
+ "text": "Construction industry"
105
+ },
106
+ {
107
+ "text": "International trade"
108
+ },
109
+ {
110
+ "text": "IT and internet industry"
111
+ },
112
+ {
113
+ "text": "Manufacturing and production industry"
114
+ },
115
+ {
116
+ "text": "Retail industry",
117
+ "url": "#0"
118
+ },
119
+ {
120
+ "text": "Tourism industry"
121
+ }
122
+ ]
123
+ },
124
+ {
125
+ "heading": "Employment and labour market",
126
+ "url": "#0",
127
+ "groupItems":
128
+ [
129
+ {
130
+ "text": "People in work"
131
+ },
132
+ {
133
+ "text": "People not in work"
134
+ }
135
+ ]
136
+
137
+ }
138
+ ]
139
+ },
140
+ {
141
+ "groups": [
142
+ {
143
+ "heading": "Economy",
144
+ "groupItems": [
145
+ {
146
+ "text": "Economic output and productivity"
147
+ },
148
+ {
149
+ "text": "Government, public sector and taxes"
150
+ },
151
+ {
152
+ "text": "Gross Value Added (GVA)"
153
+ },
154
+ {
155
+ "text": "Investments, pensions and trusts"
156
+ },
157
+ {
158
+ "text": "Regional accounts"
159
+ },
160
+ {
161
+ "text": "Environmental accounts"
162
+ },
163
+ {
164
+ "text": "Gross Domestic Product (GDP)"
165
+ },
166
+ {
167
+ "text": "Inflation and price indices"
168
+ },
169
+ {
170
+ "text": "National accounts"
171
+ }
172
+ ]
173
+ }
174
+ ]
175
+ }
176
+ ]
177
+ },
178
+ "searchLinks": {
179
+ "id": "search-links",
180
+ "searchNavigationAriaLabel": 'Nav Search',
181
+ "searchButtonAriaLabel": 'Toggle search',
182
+ 'heading': 'Popular searches',
183
+ "itemsList": [
184
+ {
185
+ "url": '#1',
186
+ "text": 'Cost of living'
187
+ },
188
+ {
189
+ "url": '#1',
190
+ "text": 'Inflation'
191
+ },
192
+ {
193
+ "url": '#3',
194
+ "text": 'NHS waiting times'
195
+ },
196
+ {
197
+ "url": '#0',
198
+ "text": 'Wellbeing'
199
+ },
200
+ {
201
+ "url": '#0',
202
+ "text": 'Baby names'
203
+ }
204
+ ]
205
+ }
206
+ })
207
+ }}
package/components/header/{example-header-with-search-button.njk → example-header-basic-with-search-button.njk} RENAMED
@@ -8,6 +8,7 @@
8
8
  onsHeader({
9
9
  "variants": 'basic',
10
10
  "menuLinks": {
11
+ "id": "menu-links",
11
12
  "keyLinks": [
12
13
  {
13
14
  'heading': 'Taking part in a survey?',