@ons/design-system 70.0.17 → 72.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 (204) hide show
  1. package/components/access-code/_macro.njk +4 -4
  2. package/components/access-code/_macro.spec.js +8 -8
  3. package/components/access-code/example-access-code-error.njk +2 -2
  4. package/components/access-code/example-access-code.njk +2 -2
  5. package/components/accordion/_macro.njk +1 -1
  6. package/components/accordion/_macro.spec.js +1 -1
  7. package/components/address-input/_macro.njk +7 -7
  8. package/components/address-input/_macro.spec.js +16 -15
  9. package/components/address-input/autosuggest.address.error.js +1 -1
  10. package/components/address-input/autosuggest.address.js +25 -25
  11. package/components/address-input/autosuggest.address.spec.js +6 -5
  12. package/components/address-input/example-address-input-editable.njk +5 -4
  13. package/components/address-input/example-address-input.njk +4 -5
  14. package/components/autosuggest/_autosuggest.scss +8 -8
  15. package/components/autosuggest/_macro.njk +5 -5
  16. package/components/autosuggest/autosuggest.spec.js +1 -1
  17. package/components/back-to-top/_back-to-top.scss +2 -2
  18. package/components/back-to-top/example-full-page-back-to-top.njk +6 -6
  19. package/components/breadcrumbs/_breadcrumbs.scss +1 -1
  20. package/components/button/_button.scss +24 -16
  21. package/components/button/_macro.njk +3 -3
  22. package/components/button/example-button-custom.njk +1 -1
  23. package/components/card/_card.scss +0 -6
  24. package/components/card/_macro.njk +9 -9
  25. package/components/card/_macro.spec.js +57 -24
  26. package/components/card/example-card-set-with-images.njk +30 -18
  27. package/components/card/example-card-set-with-lists.njk +57 -45
  28. package/components/card/example-card-set.njk +27 -15
  29. package/components/card/example-card.njk +9 -5
  30. package/components/char-check-limit/_macro.njk +1 -1
  31. package/components/checkboxes/_checkbox.scss +4 -4
  32. package/components/checkboxes/_checkboxes.scss +1 -1
  33. package/components/checkboxes/example-checkboxes-with-hidden-label.njk +4 -4
  34. package/components/cookies-banner/_cookies-banner.scss +5 -5
  35. package/components/cookies-banner/_macro.njk +15 -13
  36. package/components/cookies-banner/_macro.spec.js +1 -1
  37. package/components/details/_details.scss +5 -6
  38. package/components/details/_macro.njk +4 -4
  39. package/components/details/_macro.spec.js +1 -1
  40. package/components/document-list/_document-list.scss +0 -2
  41. package/components/document-list/_macro.njk +18 -18
  42. package/components/document-list/_macro.spec.js +16 -14
  43. package/components/document-list/example-document-list-article-featured.njk +5 -3
  44. package/components/document-list/example-document-list-articles.njk +15 -9
  45. package/components/document-list/example-document-list-downloads.njk +15 -9
  46. package/components/document-list/example-document-list-search-result-featured.njk +5 -3
  47. package/components/document-list/example-document-list-search-results.njk +20 -12
  48. package/components/download-resources/_download-resources.scss +1 -2
  49. package/components/download-resources/download-resources.spec.js +12 -6
  50. package/components/external-link/_macro.njk +1 -1
  51. package/components/external-link/_macro.spec.js +1 -1
  52. package/components/external-link/example-external-link.njk +1 -1
  53. package/components/feedback/_macro.njk +1 -1
  54. package/components/feedback/_macro.spec.js +3 -3
  55. package/components/feedback/example-feedback-call-to-action.njk +1 -1
  56. package/components/field/_field-group.scss +0 -2
  57. package/components/field/_field.scss +1 -2
  58. package/components/fieldset/_fieldset.scss +2 -2
  59. package/components/fieldset/_macro.njk +1 -1
  60. package/components/fieldset/_macro.spec.js +1 -1
  61. package/components/footer/_footer.scss +12 -7
  62. package/components/footer/_macro.njk +54 -34
  63. package/components/footer/_macro.spec.js +90 -28
  64. package/components/footer/example-footer-cymraeg.njk +1 -1
  65. package/components/footer/example-footer-transactional.njk +1 -1
  66. package/components/footer/example-footer-warning.njk +1 -1
  67. package/components/footer/example-footer-with-alternative-organisation.njk +99 -94
  68. package/components/footer/example-footer-with-coat-of-arms.njk +1 -1
  69. package/components/footer/example-footer-with-copyright.njk +1 -1
  70. package/components/footer/example-footer-with-multiple-logos-and-split-display.njk +173 -0
  71. package/components/footer/example-footer-with-multiple-logos.njk +172 -0
  72. package/components/footer/example-footer.njk +1 -1
  73. package/components/header/_header.scss +7 -14
  74. package/components/header/_macro.njk +19 -19
  75. package/components/header/_macro.spec.js +17 -17
  76. package/components/header/example-header-external-for-surveys.njk +2 -2
  77. package/components/header/example-header-external-welsh.njk +2 -2
  78. package/components/header/example-header-external-with-sub-navigation-removed.njk +1 -1
  79. package/components/header/example-header-external-with-sub-navigation.njk +1 -1
  80. package/components/header/example-header-multiple-logos.njk +4 -4
  81. package/components/hero/_hero.scss +6 -8
  82. package/components/hero/_macro.njk +1 -1
  83. package/components/icon/_icon.scss +4 -4
  84. package/components/icon/_macro.njk +4 -4
  85. package/components/icon/_macro.spec.js +2 -2
  86. package/components/image/_image.scss +1 -1
  87. package/components/image/_macro.njk +1 -1
  88. package/components/image/_macro.spec.js +10 -10
  89. package/components/image/example-image-for-regular-screens.njk +1 -1
  90. package/components/input/_input-type.scss +0 -2
  91. package/components/input/_input.scss +10 -10
  92. package/components/input/_macro.njk +4 -2
  93. package/components/input/example-input-search-with-character-check.njk +1 -1
  94. package/components/input/example-input-search.njk +1 -1
  95. package/components/label/_label.scss +1 -3
  96. package/components/language-selector/_macro.njk +3 -3
  97. package/components/language-selector/_macro.spec.js +7 -7
  98. package/components/list/_list.scss +1 -5
  99. package/components/list/_macro.njk +9 -10
  100. package/components/list/_macro.spec.js +50 -9
  101. package/components/list/example-inline-list-with-social-icon-prefix.njk +1 -1
  102. package/components/message/_macro.njk +3 -3
  103. package/components/message/_macro.spec.js +3 -3
  104. package/components/message-list/_macro.njk +2 -2
  105. package/components/message-list/_macro.spec.js +8 -4
  106. package/components/message-list/_message-list.scss +2 -2
  107. package/components/navigation/_macro.njk +9 -9
  108. package/components/navigation/_macro.spec.js +2 -2
  109. package/components/navigation/_navigation.scss +2 -6
  110. package/components/navigation/navigation.dom.js +1 -1
  111. package/components/navigation/navigation.spec.js +4 -4
  112. package/components/pagination/_macro.njk +2 -2
  113. package/components/pagination/_pagination.scss +1 -7
  114. package/components/panel/_macro.njk +5 -4
  115. package/components/panel/_macro.spec.js +2 -2
  116. package/components/panel/_panel.scss +12 -8
  117. package/components/password/_macro.njk +1 -1
  118. package/components/password/_macro.spec.js +2 -2
  119. package/components/phase-banner/_macro.njk +1 -1
  120. package/components/phase-banner/_phase-banner.scss +3 -4
  121. package/components/phase-banner/example-phase-banner-alpha.njk +1 -1
  122. package/components/phase-banner/example-phase-banner-beta.njk +1 -1
  123. package/components/question/_macro.njk +8 -8
  124. package/components/question/_macro.spec.js +3 -3
  125. package/components/question/_question.scss +3 -3
  126. package/components/radios/_macro.njk +1 -1
  127. package/components/radios/_macro.spec.js +1 -1
  128. package/components/radios/_radios.scss +1 -1
  129. package/components/radios/example-radios-with-clear-button-expanded.njk +1 -1
  130. package/components/radios/example-radios-with-clear-button.njk +1 -1
  131. package/components/related-content/_macro.spec.js +2 -2
  132. package/components/related-content/_related-content.scss +1 -1
  133. package/components/related-content/example-related-content-general.njk +2 -2
  134. package/components/related-content/example-related-content-social-media.njk +1 -1
  135. package/components/reply/_macro.njk +3 -1
  136. package/components/reply/_macro.spec.js +1 -1
  137. package/components/reply/reply.spec.js +1 -1
  138. package/components/section-navigation/_macro.njk +10 -10
  139. package/components/section-navigation/_macro.spec.js +15 -15
  140. package/components/section-navigation/_section-navigation.scss +3 -8
  141. package/components/section-navigation/example-section-navigation-single-vertical-with-title.njk +3 -3
  142. package/components/section-navigation/example-section-navigation-vertical.njk +14 -14
  143. package/components/section-navigation/example-section-navigation.njk +3 -3
  144. package/components/select/example-select-with-inline-label.njk +1 -1
  145. package/components/share-page/_macro.njk +7 -7
  146. package/components/share-page/_macro.spec.js +2 -2
  147. package/components/share-page/example-share-page.njk +1 -1
  148. package/components/status/_status.scss +1 -1
  149. package/components/summary/_macro.njk +33 -33
  150. package/components/summary/_macro.spec.js +34 -34
  151. package/components/summary/_summary.scss +2 -4
  152. package/components/summary/example-summary-card-grouped.njk +34 -34
  153. package/components/summary/example-summary-grouped-total.njk +7 -7
  154. package/components/summary/example-summary-grouped-with-errors.njk +9 -9
  155. package/components/summary/example-summary-grouped.njk +34 -34
  156. package/components/summary/example-summary-household.njk +7 -7
  157. package/components/summary/example-summary-hub-minimal.njk +8 -8
  158. package/components/summary/example-summary-hub.njk +16 -16
  159. package/components/summary/example-summary-multiple.njk +7 -7
  160. package/components/summary/example-summary-no-action.njk +5 -5
  161. package/components/summary/example-summary.njk +9 -9
  162. package/components/table/_table.scss +2 -3
  163. package/components/table-of-contents/_macro.njk +3 -3
  164. package/components/table-of-contents/_macro.spec.js +3 -3
  165. package/components/table-of-contents/example-table-of-contents-sticky-full-page.njk +1 -1
  166. package/components/tabs/_macro.njk +3 -3
  167. package/components/tabs/_macro.spec.js +3 -3
  168. package/components/tabs/_tabs.scss +3 -4
  169. package/components/tabs/example-tabs-details.njk +1 -1
  170. package/components/text-indent/_text-indent.scss +1 -1
  171. package/components/timeline/_macro.njk +4 -4
  172. package/components/timeline/_macro.spec.js +3 -3
  173. package/components/timeline/_timeline.scss +4 -3
  174. package/components/timeline/example-timeline.njk +1 -1
  175. package/components/upload/_upload.scss +2 -2
  176. package/components/video/_macro.njk +4 -4
  177. package/components/video/_macro.spec.js +2 -2
  178. package/components/video/_video.scss +1 -1
  179. package/components/video/example-video.njk +2 -2
  180. package/components/video/video.spec.js +2 -2
  181. package/css/main.css +1 -1
  182. package/layout/_dsTemplate.njk +1 -1
  183. package/layout/_template.njk +31 -31
  184. package/package.json +1 -1
  185. package/scripts/main.es5.js +1 -1
  186. package/scripts/main.js +1 -1
  187. package/scss/base/_global.scss +2 -0
  188. package/scss/base/_typography.scss +0 -2
  189. package/scss/main.scss +0 -1
  190. package/scss/objects/_container.scss +1 -1
  191. package/scss/objects/_page.scss +2 -3
  192. package/scss/overrides/rtl.scss +1 -1
  193. package/scss/utilities/_grid.scss +103 -96
  194. package/scss/utilities/_margin.scss +11 -5
  195. package/scss/utilities/_padding.scss +12 -5
  196. package/scss/utilities/_typography.scss +2 -1
  197. package/scss/vars/_forms.scss +8 -10
  198. package/scss/vars/_grid.scss +4 -4
  199. package/scss/vars/_typography.scss +26 -19
  200. package/components/call-to-action/_call-to-action.scss +0 -8
  201. package/components/call-to-action/_macro.njk +0 -24
  202. package/components/call-to-action/_macro.spec.js +0 -48
  203. package/components/call-to-action/example-call-to-action-default.njk +0 -15
  204. package/components/metadata/_macro.njk +0 -14
package/layout/_dsTemplate.njk CHANGED
@@ -6,7 +6,7 @@
6
6
  "label": {
7
7
  "text": "Search",
8
8
  "id": "search-field-label",
9
- "classes": "ons-u-pl-l"
9
+ "classes": "ons-u-pl-xl"
10
10
  },
11
11
  "classes": "ons-input-search ons-input-search--icon ons-input-search--dark ons-u-mb-s",
12
12
  "accessiblePlaceholder": true,
package/layout/_template.njk CHANGED
@@ -1,37 +1,37 @@
1
1
  {% from "components/skip-to-content/_macro.njk" import onsSkipToContent %}
2
2
  {% from "components/header/_macro.njk" import onsHeader %}
3
3
  {% from "components/footer/_macro.njk" import onsFooter %}
4
- {% set currentLanguageISOCode = "en" %}
4
+ {% set currentLanguageIsoCode = "en" %}
5
5
 
6
6
  {% if pageConfig and pageConfig.header.language and pageConfig.header.language.languages %}
7
7
  {% set currentLanguage = pageConfig.header.language.languages | selectattr("current") | first %}
8
- {% set currentLanguageISOCode = currentLanguage.ISOCode %}
8
+ {% set currentLanguageIsoCode = currentLanguage.isoCode %}
9
9
  {% set otherLanguage = pageConfig.header.language.languages | rejectattr("current") | first %}
10
- {% set otherLanguageISOCode = otherLanguage.ISOCode %}
10
+ {% set otherLanguageIsoCode = otherLanguage.isoCode %}
11
11
  {% endif %}
12
12
 
13
13
  {% if pageConfig.cdn or release_version or designSystemVersion %}
14
14
  {# Production #}
15
- {% set cdn_url = (pageConfig.cdn.url if pageConfig.cdn and pageConfig.cdn.url) or "https://cdn.ons.gov.uk/sdc/design-system" %}
15
+ {% set cdnUrl = (pageConfig.cdn.url if pageConfig.cdn and pageConfig.cdn.url) or "https://cdn.ons.gov.uk/sdc/design-system" %}
16
16
  {%
17
- set slash = "" if cdn_url | last == "/" else
17
+ set slash = "" if cdnUrl | last == "/" else
18
18
  "/"
19
19
  %}
20
- {% set assetsURL = cdn_url + slash + ((pageConfig.cdn.version if pageConfig.cdn and pageConfig.cdn.version) or release_version or designSystemVersion) %}
21
- {% elif pageConfig.assetsURL %}
20
+ {% set assetsUrl = cdnUrl + slash + ((pageConfig.cdn.version if pageConfig.cdn and pageConfig.cdn.version) or release_version or designSystemVersion) %}
21
+ {% elif pageConfig.assetsUrl %}
22
22
  {# Runner Dev #}
23
- {% set assetsURL = pageConfig.assetsURL %}
23
+ {% set assetsUrl = pageConfig.assetsUrl %}
24
24
  {% else %}
25
25
  {# Development #}
26
- {% set assetsURL = "" %}
26
+ {% set assetsUrl = "" %}
27
27
  {% endif %}
28
28
 
29
29
  {% if pageConfig and pageConfig.title %}
30
- {% set page_title = pageConfig.title %}
30
+ {% set pageTitle = pageConfig.title %}
31
31
  {% elif page and page.title %}
32
- {% set page_title = page.title %}
32
+ {% set pageTitle = page.title %}
33
33
  {% else %}
34
- {% set page_title = "ONS Design System" %}
34
+ {% set pageTitle = "ONS Design System" %}
35
35
  {% endif %}
36
36
 
37
37
  {# Page container #}
@@ -58,14 +58,14 @@
58
58
  "#206095"
59
59
  %}
60
60
  <!doctype html>
61
- <html lang="{{ currentLanguageISOCode }}">
61
+ <html lang="{{ currentLanguageIsoCode }}">
62
62
  <head>
63
63
  <meta charset="utf-8" />
64
64
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
65
65
  <meta name="viewport" content="width=device-width, initial-scale=1" />
66
- <title>{{ page_title }}</title>
67
- <link rel="stylesheet" href="{{ assetsURL }}/css/main.css" />
68
- <link rel="stylesheet" media="print" href="{{ assetsURL }}/css/print.css" />
66
+ <title>{{ pageTitle }}</title>
67
+ <link rel="stylesheet" href="{{ assetsUrl }}/css/main.css" />
68
+ <link rel="stylesheet" media="print" href="{{ assetsUrl }}/css/print.css" />
69
69
  <meta name="theme-color" content="{{ themeColor }}" />
70
70
  {% block meta %}
71
71
  {% if pageConfig.meta %}
@@ -89,22 +89,22 @@
89
89
  <meta property="og:type" content="website" />
90
90
  <meta property="og:url" content="{{ pageConfig.meta.canonicalUrl | default(pageConfig.absoluteUrl) }}" />
91
91
  <meta property="og:title" content="{{ pageConfig.title }}" />
92
- <meta property="og:image" content="{{ assetsURL }}/favicons/opengraph.png" />
92
+ <meta property="og:image" content="{{ assetsUrl }}/favicons/opengraph.png" />
93
93
  <meta property="og:image:type" content="image/png" />
94
94
  <meta property="og:image:width" content="1200" />
95
95
  <meta property="og:image:height" content="630" />
96
96
  <meta property="og:description" content="{{ pageConfig.meta.description | default(pageConfig.description) }}" />
97
97
  <meta property="og:site_name" content="{{ pageConfig.header.title | default(pageConfig.title) }}" />
98
- <meta property="og:locale" content="{{ currentLanguageISOCode }}" />
98
+ <meta property="og:locale" content="{{ currentLanguageIsoCode }}" />
99
99
 
100
- {% if otherLanguageISOCode %}
101
- <meta property="og:locale:alternate" content="{{ otherLanguageISOCode }}" />
100
+ {% if otherLanguageIsoCode %}
101
+ <meta property="og:locale:alternate" content="{{ otherLanguageIsoCode }}" />
102
102
  {% endif %}
103
103
 
104
104
  {% if pageConfig.social %}
105
105
  {%
106
106
  set twitterImagePath = pageConfig.social.twitterImage if pageConfig.social.twitterImage else
107
- assetsURL + '/favicons/twitter.png'
107
+ assetsUrl + '/favicons/twitter.png'
108
108
  %}
109
109
  <!-- Twitter -->
110
110
  <meta name="twitter:card" content="summary" />
@@ -118,12 +118,12 @@
118
118
 
119
119
  {% block favicons %}
120
120
  <!-- Favicons -->
121
- <link rel="icon" type="image/x-icon" href="{{ assetsURL }}/favicons/favicon.ico" />
122
- <link rel="icon" type="image/png" href="{{ assetsURL }}/favicons/favicon-32x32.png" sizes="32x32" />
123
- <link rel="icon" type="image/png" href="{{ assetsURL }}/favicons/favicon-16x16.png" sizes="16x16" />
124
- <link rel="mask-icon" href="{{ assetsURL }}/favicons/safari-pinned-tab.svg" color="#000000" />
125
- <link rel="apple-touch-icon" type="image/png" href="{{ assetsURL }}/favicons/apple-touch-icon.png" sizes="180x180" />
126
- <link rel="manifest" href="{{ assetsURL }}/favicons/manifest.json" />
121
+ <link rel="icon" type="image/x-icon" href="{{ assetsUrl }}/favicons/favicon.ico" />
122
+ <link rel="icon" type="image/png" href="{{ assetsUrl }}/favicons/favicon-32x32.png" sizes="32x32" />
123
+ <link rel="icon" type="image/png" href="{{ assetsUrl }}/favicons/favicon-16x16.png" sizes="16x16" />
124
+ <link rel="mask-icon" href="{{ assetsUrl }}/favicons/safari-pinned-tab.svg" color="#000000" />
125
+ <link rel="apple-touch-icon" type="image/png" href="{{ assetsUrl }}/favicons/apple-touch-icon.png" sizes="180x180" />
126
+ <link rel="manifest" href="{{ assetsUrl }}/favicons/manifest.json" />
127
127
  {% endblock %}
128
128
 
129
129
  {% block head %}
@@ -203,12 +203,12 @@
203
203
  "wide": pageConfig.wide,
204
204
  "fullWidth": pageConfig.fullWidth,
205
205
  "classes": "ons-page__footer",
206
- "lang": currentLanguageISOCode,
206
+ "lang": currentLanguageIsoCode,
207
207
  "rows": pageConfig.footer.rows,
208
208
  "cols": pageConfig.footer.cols,
209
- "poweredBy": pageConfig.footer.poweredBy,
209
+ "footerLogo": pageConfig.footer.footerLogo,
210
210
  "crest": pageConfig.footer.crest,
211
- "OGLLink": pageConfig.footer.OGLLink,
211
+ "oglLink": pageConfig.footer.oglLink,
212
212
  "button": pageConfig.header.signoutButton,
213
213
  "footerWarning": pageConfig.footer.footerWarning,
214
214
  "copyrightDeclaration": pageConfig.footer.copyrightDeclaration,
@@ -225,7 +225,7 @@
225
225
  <!-- prettier-ignore-start -->
226
226
  <script {% if pageConfig.cspNonce %}nonce="{{ pageConfig.cspNonce }}"{% elif pageConfig.cspNonce is not defined and csp_nonce %}nonce="{{ csp_nonce() }}"{% endif %}>
227
227
  (function() {
228
- var s = [ '{{ assetsURL }}/scripts/main.js' ],
228
+ var s = [ '{{ assetsUrl }}/scripts/main.js' ],
229
229
  c = document.createElement('script');
230
230
 
231
231
  if (!('noModule' in c)) {
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": "70.0.17",
4
+ "version": "72.0.0",
5
5
  "main": "index.js",
6
6
  "license": "MIT",
7
7
  "author": {