@ons/design-system 74.0.0-next.1 → 74.0.0-next.10

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 (107) hide show
  1. package/README.md +15 -3
  2. package/components/access-code/example-access-code-error.njk +1 -1
  3. package/components/access-code/example-access-code.njk +1 -1
  4. package/components/address-input/autosuggest.address.spec.js +23 -0
  5. package/components/autosuggest/autosuggest.ui.js +3 -0
  6. package/components/back-to-top/example-full-page-back-to-top.njk +1 -1
  7. package/components/breadcrumbs/_breadcrumbs.scss +4 -7
  8. package/components/breadcrumbs/_macro.njk +29 -25
  9. package/components/breadcrumbs/_macro.spec.js +39 -0
  10. package/components/breadcrumbs/example-breadcrumbs-wide.njk +52 -0
  11. package/components/chart/_chart.scss +0 -9
  12. package/components/chart/_macro.njk +96 -128
  13. package/components/chart/_macro.spec.js +43 -28
  14. package/components/chart/example-area-chart-with-axis-min-and-max-values.njk +6 -3
  15. package/components/chart/example-area-chart.njk +6 -3
  16. package/components/chart/example-bar-chart-with-annotations.njk +6 -3
  17. package/components/chart/example-bar-chart-with-axis-min-and-max-values.njk +6 -3
  18. package/components/chart/example-bar-chart-with-point-range-and-reference-line-annotations.njk +6 -3
  19. package/components/chart/example-bar-chart.njk +6 -3
  20. package/components/chart/example-bar-with-confidence-levels.njk +6 -3
  21. package/components/chart/example-clustered-bar-chart.njk +6 -3
  22. package/components/chart/example-clustered-column-chart.njk +6 -3
  23. package/components/chart/example-column-chart-with-annotations.njk +6 -3
  24. package/components/chart/example-column-chart-with-axis-min-and-max-values.njk +6 -3
  25. package/components/chart/example-column-chart-with-custom-reference-line-value.njk +6 -3
  26. package/components/chart/example-column-chart-with-range-annotations.njk +6 -3
  27. package/components/chart/example-column-chart-with-reference-line-annotations.njk +6 -3
  28. package/components/chart/example-column-chart.njk +6 -3
  29. package/components/chart/example-column-with-confidence-levels.njk +6 -3
  30. package/components/chart/example-column-with-line-chart.njk +6 -3
  31. package/components/chart/example-iframe-chart.njk +6 -3
  32. package/components/chart/example-line-chart-with-annotations.njk +6 -3
  33. package/components/chart/example-line-chart-with-axis-min-and-max-values.njk +6 -3
  34. package/components/chart/example-line-chart-with-custom-reference-line-value.njk +6 -3
  35. package/components/chart/example-line-chart-with-label-format.njk +6 -3
  36. package/components/chart/example-line-chart-with-markers.njk +6 -3
  37. package/components/chart/example-line-chart-with-range-annotations-inside.njk +6 -3
  38. package/components/chart/example-line-chart-with-range-annotations-outside-left-right.njk +6 -3
  39. package/components/chart/example-line-chart-with-range-annotations-outside-top-bottom.njk +6 -3
  40. package/components/chart/example-line-chart-with-reference-line-annotations.njk +6 -3
  41. package/components/chart/example-line-chart.njk +6 -3
  42. package/components/chart/example-scatter-chart-with-axis-min-and-max-values.njk +6 -3
  43. package/components/chart/example-scatter-chart.njk +6 -3
  44. package/components/chart/example-stacked-bar-chart.njk +6 -3
  45. package/components/chart/example-stacked-column-chart.njk +6 -3
  46. package/components/document-list/_macro.njk +2 -2
  47. package/components/document-list/_macro.spec.js +55 -0
  48. package/components/featured-article/_macro.njk +3 -37
  49. package/components/featured-article/example-featured-article-with-chart.njk +19 -14
  50. package/components/featured-article/example-featured-article-with-image.njk +12 -7
  51. package/components/featured-article/featured-article.scss +1 -1
  52. package/components/featured-article/macro.spec.js +44 -67
  53. package/components/figure/_figure.scss +31 -0
  54. package/components/figure/_macro.njk +98 -0
  55. package/components/figure/_macro.spec.js +520 -0
  56. package/components/figure/example-figure-heading-level-2.njk +34 -0
  57. package/components/figure/example-figure-with-div.njk +29 -0
  58. package/components/figure/example-figure-without-footer.njk +12 -0
  59. package/components/figure/example-figure-without-header.njk +24 -0
  60. package/components/figure/example-figure.njk +34 -0
  61. package/components/header/_header.scss +1 -3
  62. package/components/header/_macro.njk +8 -4
  63. package/components/header/_macro.spec.js +48 -0
  64. package/components/hero/_macro.njk +3 -2
  65. package/components/hero/_macro.spec.js +36 -0
  66. package/components/hero/example-hero-dark-wide.njk +17 -0
  67. package/components/hero/example-hero-dark-with-external-breadcrumbs.njk +17 -21
  68. package/components/hero/example-hero-default-full-width.njk +16 -0
  69. package/components/hero/example-hero-default-with-external-breadcrumbs.njk +165 -169
  70. package/components/hero/example-hero-grey-with-external-breadcrumbs.njk +207 -211
  71. package/components/hero/example-hero-navy-blue-with-external-breadcrumbs.njk +163 -167
  72. package/components/hero/example-hero-pale-blue-with-external-breadcrumbs.njk +165 -169
  73. package/components/image/_image.scss +0 -7
  74. package/components/image/_macro.njk +25 -14
  75. package/components/image/_macro.spec.js +122 -7
  76. package/components/image/example-image-with-figure-fields.njk +25 -0
  77. package/components/list/_macro.njk +1 -0
  78. package/components/list/_macro.spec.js +16 -0
  79. package/components/question/example-question-ccs.njk +1 -1
  80. package/components/question/example-question-fieldset.njk +1 -1
  81. package/components/question/example-question-interviewer-note.njk +1 -1
  82. package/components/question/example-question-no-fieldset.njk +1 -1
  83. package/components/relationships/example-relationships-error.njk +1 -1
  84. package/components/relationships/example-relationships-you.njk +1 -1
  85. package/components/relationships/example-relationships.njk +1 -1
  86. package/components/table/_macro.njk +138 -111
  87. package/components/table/_macro.spec.js +175 -16
  88. package/components/table/_table.scss +6 -1
  89. package/components/table/example-table-basic-no-caption.njk +46 -0
  90. package/components/table/example-table-basic-visually-hidden-caption.njk +47 -0
  91. package/components/table/example-table-with-figure-fields.njk +86 -0
  92. package/components/table/table.spec.js +2 -0
  93. package/components/table-of-contents/_macro.njk +6 -4
  94. package/components/table-of-contents/_macro.spec.js +43 -3
  95. package/components/table-of-contents/example-table-of-contents-ordered.njk +64 -0
  96. package/components/table-of-contents/example-table-of-contents-sticky-full-page-ordered.njk +156 -0
  97. package/components/table-of-contents/example-table-of-contents-sticky-full-page.njk +1 -1
  98. package/components/table-of-contents/table-of-contents.spec.js +4 -5
  99. package/css/main.css +1 -1
  100. package/layout/_template.njk +66 -46
  101. package/package.json +45 -36
  102. package/scripts/main.es5.js +3 -3
  103. package/scripts/main.js +2 -2
  104. package/scss/base/_global.scss +8 -0
  105. package/scss/main.scss +1 -0
  106. package/scss/objects/_page.scss +1 -1
  107. package/scss/objects/_spacing.scss +0 -4
package/layout/_template.njk CHANGED
@@ -66,6 +66,12 @@
66
66
  <title>{{ pageTitle }}</title>
67
67
  <link rel="stylesheet" href="{{ assetsUrl }}/css/main.css" />
68
68
  <link rel="stylesheet" media="print" href="{{ assetsUrl }}/css/print.css" />
69
+
70
+ <link rel="preload" href="{{ assetsUrl }}/fonts/opensans-regular.woff2" as="font" type="font/woff2" crossorigin>
71
+ <link rel="preload" href="{{ assetsUrl }}/fonts/opensans-regular.woff" as="font" type="font/woff" crossorigin>
72
+ <link rel="preload" href="{{ assetsUrl }}/fonts/opensans-bold.woff2" as="font" type="font/woff2" crossorigin>
73
+ <link rel="preload" href="{{ assetsUrl }}/fonts/opensans-bold.woff" as="font" type="font/woff" crossorigin>
74
+
69
75
  <meta name="theme-color" content="{{ themeColor }}" />
70
76
  {% block meta %}
71
77
  {% if pageConfig.meta %}
@@ -126,8 +132,7 @@
126
132
  <link rel="manifest" href="{{ assetsUrl }}/favicons/manifest.json" />
127
133
  {% endblock %}
128
134
 
129
- {% block head %}
130
- {% endblock %}
135
+ {% block head %}{% endblock %}
131
136
  </head>
132
137
  <body {% if pageConfig.bodyClasses %}class="{{ pageConfig.bodyClasses }}"{% endif %}>
133
138
  <!-- prettier-ignore-start -->
@@ -160,55 +165,70 @@
160
165
  {% endif %}
161
166
  {% endblock %}
162
167
  {% block header %}
163
- {{
164
- onsHeader({
165
- "wide": pageConfig.wide,
166
- "fullWidth": pageConfig.fullWidth,
167
- "language": pageConfig.header.language,
168
- "button": pageConfig.header.signoutButton,
169
- "toggleNavigationButton": pageConfig.header.toggleNavigationButton,
170
- "navigation": pageConfig.header.navigation,
171
- "siteSearchAutosuggest": pageConfig.header.siteSearchAutosuggest,
172
- "browserBanner": pageConfig.header.browserBanner,
173
- "phase": pageConfig.header.phase,
174
- "serviceLinks": pageConfig.header.serviceLinks,
175
- "variants": pageConfig.header.variants,
176
- "classes": pageConfig.header.classes,
177
- "mastheadLogo": pageConfig.header.mastheadLogo,
178
- "mastheadLogoUrl": pageConfig.header.mastheadLogoUrl,
179
- "titleUrl": pageConfig.header.titleUrl,
180
- "title": pageConfig.header.title | default(pageConfig.title),
181
- "description": pageConfig.header.description,
182
- "titleAsH1": pageConfig.header.titleAsH1,
183
- "titleLogo": pageConfig.header.titleLogo,
184
- "mastheadLogoAltText": pageConfig.header.mastheadLogoAltText,
185
- "menuLinks": pageConfig.header.menuLinks,
186
- "searchLinks": pageConfig.header.searchLinks
187
- })
188
- }}
189
- {% endblock %}
190
- {% block pageContent %}
191
- <div class="ons-page__container ons-container{{ containerClasses }}">
192
- {% block preMain %}
168
+ <header>
169
+ {{
170
+ onsHeader({
171
+ "wide": pageConfig.wide,
172
+ "fullWidth": pageConfig.fullWidth,
173
+ "language": pageConfig.header.language,
174
+ "button": pageConfig.header.signoutButton,
175
+ "toggleNavigationButton": pageConfig.header.toggleNavigationButton,
176
+ "navigation": pageConfig.header.navigation,
177
+ "siteSearchAutosuggest": pageConfig.header.siteSearchAutosuggest,
178
+ "browserBanner": pageConfig.header.browserBanner,
179
+ "phase": pageConfig.header.phase,
180
+ "serviceLinks": pageConfig.header.serviceLinks,
181
+ "variants": pageConfig.header.variants,
182
+ "classes": pageConfig.header.classes,
183
+ "mastheadLogo": pageConfig.header.mastheadLogo,
184
+ "mastheadLogoUrl": pageConfig.header.mastheadLogoUrl,
185
+ "titleUrl": pageConfig.header.titleUrl,
186
+ "title": pageConfig.header.title | default(pageConfig.title),
187
+ "description": pageConfig.header.description,
188
+ "titleAsH1": pageConfig.header.titleAsH1,
189
+ "titleLogo": pageConfig.header.titleLogo,
190
+ "mastheadLogoAltText": pageConfig.header.mastheadLogoAltText,
191
+ "menuLinks": pageConfig.header.menuLinks,
192
+ "searchLinks": pageConfig.header.searchLinks,
193
+ "search": pageConfig.header.search,
194
+ "useDivForRootElement": true
195
+ })
196
+ }}
197
+
198
+ {% block preBreadcrumbs %}{% endblock %}
199
+ {% block breadcrumbs %}
193
200
  {% if pageConfig.breadcrumbs %}
194
- {% from "components/breadcrumbs/_macro.njk" import onsBreadcrumbs %}
195
- {{
196
- onsBreadcrumbs({
197
- "id": pageConfig.breadcrumbs.id,
198
- "ariaLabel": pageConfig.breadcrumbs.ariaLabel,
199
- "itemsList": pageConfig.breadcrumbs.itemsList
200
- })
201
- }}
201
+ {% from "components/breadcrumbs/_macro.njk" import onsBreadcrumbs %}
202
+ {{
203
+ onsBreadcrumbs({
204
+ "id": pageConfig.breadcrumbs.id,
205
+ "ariaLabel": pageConfig.breadcrumbs.ariaLabel,
206
+ "itemsList": pageConfig.breadcrumbs.itemsList,
207
+ "wide": pageConfig.wide,
208
+ "fullWidth": pageConfig.fullWidth,
209
+ "variant": pageConfig.breadcrumbs.variant
210
+ })
211
+ }}
202
212
  {% endif %}
203
213
  {% endblock %}
204
- <div class="ons-grid">
205
- <div class="ons-grid__col ons-col-{{ pageColNumber }}@m{{ pageColClasses }}">
206
- <main id="main-content" class="ons-page__main{{ mainColClasses }}">
207
- {% block main %}{% endblock %}
208
- </main>
214
+ </header>
215
+ {% endblock %}
216
+ {% block preMain %}{% endblock %}
217
+ {% block pageContent %}
218
+ <main id="main-content">
219
+ {% block hero %}{% endblock %}
220
+ {% block postHero %}{% endblock %}
221
+ <div class="ons-page__container ons-container{{ containerClasses }}">
222
+ <div class="ons-grid">
223
+ <div class="ons-grid__col ons-col-{{ pageColNumber }}@m{{ pageColClasses }}">
224
+ <div class="ons-page__main{{ mainColClasses }}">
225
+ {% block mainContent %}{% endblock %}
226
+ {% block postMainContent %}{% endblock %}
227
+ </div>
228
+ </div>
209
229
  </div>
210
230
  </div>
211
- </div>
231
+ </main>
212
232
  {% endblock %}
213
233
  </div>
214
234
  {% block preFooter %}{% endblock %}
package/package.json CHANGED
@@ -1,12 +1,16 @@
1
1
  {
2
2
  "name": "@ons/design-system",
3
3
  "description": "ONS Design System built CSS, JS, and Nunjucks templates",
4
- "version": "74.0.0-next.1",
4
+ "version": "74.0.0-next.10",
5
5
  "main": "index.js",
6
6
  "license": "MIT",
7
7
  "author": {
8
8
  "name": "ONS Digital"
9
9
  },
10
+ "repository": {
11
+ "type": "git",
12
+ "url": "https://github.com/ONSdigital/design-system"
13
+ },
10
14
  "scripts": {
11
15
  "start": "gulp start",
12
16
  "watch": "gulp watch",
@@ -18,35 +22,35 @@
18
22
  "test-lighthouse": "yarn build && node ./lighthouse/lighthouse-get-urls.js && lhci autorun --config=./lighthouse/lighthouserc.js",
19
23
  "build": "yarn && yarn tidy-clean && NODE_ENV=production gulp build",
20
24
  "build-serve": "yarn build && gulp start-dev-server",
21
- "npm-bundle": "NODE_ENV=production yarn tidy-clean && NODE_ENV=production gulp build-package && babel-node ci/generate-npm-package.js",
22
- "cdn-bundle": "NODE_ENV=production yarn tidy-clean && NODE_ENV=production gulp build-package && babel-node ci/prepare-templates-for-zip.js",
25
+ "verify-assets": "node ci/verify-assets.mjs",
26
+ "npm-bundle": "NODE_ENV=production yarn tidy-clean && NODE_ENV=production gulp build-package && yarn verify-assets && babel-node ci/generate-npm-package.js",
27
+ "cdn-bundle": "NODE_ENV=production yarn tidy-clean && NODE_ENV=production gulp build-package && yarn verify-assets && babel-node ci/prepare-templates-for-zip.js",
23
28
  "test-visual": "yarn build && gulp run-backstop-tests",
24
29
  "test-visual:reference": "yarn build && gulp run-backstop-reference",
25
30
  "test-visual:approve": "gulp run-backstop-approve",
26
31
  "tidy-clean": "rm -rf build css favicons fonts img components layout scripts coverage scss js",
27
32
  "check-unused": "npx npm-check-unused",
28
33
  "dedupe-deps": "npx yarn-deduplicate yarn.lock",
29
- "lint-staged": "lint-staged",
30
- "stylelint": "stylelint '**/*.scss'",
31
- "stylelint-fix": "stylelint '**/*.scss' --fix",
34
+ "lint": "prettier --check . && eslint '**/*.{js,mjs}' && stylelint '**/*.scss' && remark . --ext md --ignore-path .remarkignore --frail",
35
+ "lint:fix": "prettier --write . && eslint --fix '**/*.{js,mjs}' && stylelint '**/*.scss' --fix && remark . --ext md --ignore-path .remarkignore --output",
32
36
  "prepack": "pinst --disable",
33
37
  "postpack": "pinst --enable"
34
38
  },
35
39
  "lint-staged": {
36
- "*.js": [
37
- "prettier --write",
38
- "eslint --fix"
40
+ "*.{js,mjs}": [
41
+ "prettier --check",
42
+ "eslint"
39
43
  ],
40
44
  "*.md": [
41
- "prettier --write",
42
- "remark"
45
+ "prettier --check",
46
+ "remark --ext md --ignore-path .remarkignore --frail"
43
47
  ],
44
48
  "*.scss": [
45
- "prettier --write",
46
- "yarn run stylelint-fix"
49
+ "prettier --check",
50
+ "stylelint"
47
51
  ],
48
52
  "*.{yml,yaml,njk,html}": [
49
- "prettier --write"
53
+ "prettier --check"
50
54
  ]
51
55
  },
52
56
  "browserslist": [
@@ -54,10 +58,10 @@
54
58
  "not dead"
55
59
  ],
56
60
  "devDependencies": {
57
- "@babel/core": "7.29.0",
58
- "@babel/eslint-parser": "7.28.6",
61
+ "@babel/core": "7.29.7",
62
+ "@babel/eslint-parser": "7.29.7",
59
63
  "@babel/node": "7.29.0",
60
- "@babel/plugin-proposal-class-properties": "7.18.6",
64
+ "@babel/plugin-transform-class-properties": "7.29.7",
61
65
  "@babel/plugin-syntax-dynamic-import": "7.8.3",
62
66
  "@babel/plugin-transform-modules-commonjs": "7.28.6",
63
67
  "@babel/plugin-transform-runtime": "7.29.0",
@@ -66,6 +70,7 @@
66
70
  "@babel/runtime": "7.29.2",
67
71
  "@eslint/eslintrc": "3.3.5",
68
72
  "@eslint/js": "9.39.2",
73
+ "@stylistic/stylelint-plugin": "5.1.0",
69
74
  "abortcontroller-polyfill": "1.7.8",
70
75
  "autoprefixer": "10.4.21",
71
76
  "babel-plugin-istanbul": "7.0.1",
@@ -78,21 +83,21 @@
78
83
  "core-js": "3.33.0",
79
84
  "cors": "2.8.5",
80
85
  "dialog-polyfill": "0.5.6",
81
- "dompurify": "3.2.6",
86
+ "dompurify": "3.4.11",
82
87
  "eslint": "9.39.0",
83
88
  "eslint-cli": "1.1.1",
84
89
  "eslint-config-prettier": "9.0.0",
85
90
  "eslint-plugin-prettier": "5.0.1",
86
- "eslint-plugin-unused-imports": "4.3.0",
87
- "express": "5.1.0",
91
+ "eslint-plugin-unused-imports": "4.4.1",
92
+ "express": "5.2.1",
88
93
  "front-matter": "4.0.2",
89
94
  "fs-extra": "11.1.1",
90
95
  "fuse.js": "7.0.0",
91
- "glob": "11.1.0",
96
+ "glob": "13.0.6",
92
97
  "globals": "17.0.0",
93
- "gulp": "4.0.2",
98
+ "gulp": "5.0.1",
94
99
  "gulp-babel": "8.0.0",
95
- "gulp-cli": "2.3.0",
100
+ "gulp-cli": "3.1.0",
96
101
  "gulp-dart-sass": "1.1.0",
97
102
  "gulp-if": "3.0.0",
98
103
  "gulp-postcss": "9.0.1",
@@ -100,20 +105,20 @@
100
105
  "gulp-terser": "2.1.0",
101
106
  "http-server": "14.1.1",
102
107
  "husky": "9.1.6",
103
- "jest": "30.2.0",
108
+ "jest": "30.4.2",
104
109
  "jest-axe": "8.0.0",
105
- "jest-environment-jsdom": "29.7.0",
110
+ "jest-environment-jsdom": "30.4.1",
106
111
  "jest-puppeteer": "11.0.0",
107
112
  "jsdom": "26.1.0",
108
113
  "lighthouse": "12.8.2",
109
114
  "lint-staged": "15.2.0",
110
- "lodash": "4.17.21",
115
+ "lodash": "4.18.1",
111
116
  "mdn-polyfills": "5.20.0",
112
117
  "normalize.css": "8.0.1",
113
118
  "nunjucks": "3.2.4",
114
119
  "pinst": "3.0.0",
115
- "postcss": "8.4.35",
116
- "postcss-url": "10.1.3",
120
+ "postcss": "8.5.15",
121
+ "postcss-url": "10.1.4",
117
122
  "prepend-file": "2.0.1",
118
123
  "prettier": "3.3.0",
119
124
  "prettier-plugin-jinja-template": "1.4.0",
@@ -121,12 +126,12 @@
121
126
  "remark-cli": "12.0.0",
122
127
  "remark-lint": "9.1.2",
123
128
  "remark-preset-lint-recommended": "6.1.3",
124
- "stylelint": "16.26.0",
125
- "stylelint-config-recommended-scss": "14.0.0",
126
- "stylelint-config-sass-guidelines": "11.1.0",
127
- "stylelint-config-standard": "36.0.0",
128
- "stylelint-order": "6.0.4",
129
- "stylelint-scss": "6.3.0",
129
+ "stylelint": "17.11.0",
130
+ "stylelint-config-recommended-scss": "17.0.1",
131
+ "stylelint-config-sass-guidelines": "13.0.0",
132
+ "stylelint-config-standard": "40.0.0",
133
+ "stylelint-order": "8.1.1",
134
+ "stylelint-scss": "7.0.0",
130
135
  "through2": "4.0.2",
131
136
  "tick-manager": "1.0.3",
132
137
  "util": "0.12.3",
@@ -143,7 +148,11 @@
143
148
  "pym.js": "1.3.2"
144
149
  },
145
150
  "resolutions": {
146
- "basic-ftp": "5.2.0",
147
- "axios": "1.15.2"
151
+ "lodash": "4.18.1",
152
+ "jest-environment-node": "30.4.1",
153
+ "micromatch": "4.0.8",
154
+ "yaml": "2.9.0",
155
+ "uuid": "11.1.1",
156
+ "postcss": "8.5.15"
148
157
  }
149
158
  }