@ons/design-system 45.0.0 → 45.1.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 (39) hide show
  1. package/components/accordion/_macro.njk +3 -1
  2. package/components/checkboxes/_macro.njk +7 -1
  3. package/components/collapsible/_collapsible.scss +10 -4
  4. package/components/collapsible/_macro.njk +14 -15
  5. package/components/collapsible/collapsible.js +2 -1
  6. package/components/field/_field.scss +10 -0
  7. package/components/field/_macro.njk +1 -1
  8. package/components/fieldset/_macro.njk +2 -2
  9. package/components/icons/_macro.njk +18 -18
  10. package/components/input/_macro.njk +4 -2
  11. package/components/lists/_macro.njk +73 -67
  12. package/components/question/_macro.njk +92 -20
  13. package/components/question/_question.scss +9 -1
  14. package/components/select/_macro.njk +2 -1
  15. package/components/summary/_macro.njk +3 -3
  16. package/components/table/_macro.njk +2 -2
  17. package/components/timeout-modal/_macro.njk +1 -1
  18. package/components/timeout-modal/timeout.dom.js +2 -1
  19. package/components/timeout-modal/timeout.js +9 -3
  20. package/css/census.css +1 -1
  21. package/css/main.css +1 -1
  22. package/js/abortable-fetch.js +55 -0
  23. package/js/analytics.js +70 -0
  24. package/js/cookies-functions.js +182 -0
  25. package/js/cookies-settings.dom.js +13 -0
  26. package/js/cookies-settings.js +105 -0
  27. package/js/domready.js +17 -0
  28. package/js/fetch.js +19 -0
  29. package/js/inpagelink.dom.js +13 -0
  30. package/js/inpagelink.js +31 -0
  31. package/js/main.js +27 -0
  32. package/js/polyfills.js +9 -0
  33. package/js/print-button.js +16 -0
  34. package/layout/_template.njk +242 -0
  35. package/package.json +5 -4
  36. package/scripts/main.es5.js +2 -2
  37. package/scripts/main.js +2 -2
  38. package/scss/objects/_spacing.scss +1 -3
  39. package/scss/utilities/_utilities.scss +1 -1
package/layout/_template.njk ADDED
@@ -0,0 +1,242 @@
1
+ {% from "components/skip-to-content/_macro.njk" import onsSkipToContent %}
2
+ {% from "components/header/_macro.njk" import onsHeader %}
3
+ {% from "components/footer/_macro.njk" import onsFooter %}
4
+
5
+ {% set currentLanguageISOCode = "en" %}
6
+
7
+ {% if pageConfig is defined and pageConfig and pageConfig.language is defined and pageConfig.language and pageConfig.language.languages is defined and pageConfig.language.languages %}
8
+ {% set currentLanguage = pageConfig.language.languages | selectattr("current") | first %}
9
+ {% set currentLanguageISOCode = currentLanguage.ISOCode %}
10
+ {% set otherLanguage = pageConfig.language.languages | rejectattr("current") | first %}
11
+ {% set otherLanguageISOCode = otherLanguage.ISOCode %}
12
+ {% endif %}
13
+
14
+ {# Meta icons #}
15
+ {% if pageConfig is defined and pageConfig and pageConfig.theme is defined and pageConfig.theme %}
16
+ {% set metaicons = pageConfig.theme + "/" + currentLanguageISOCode + "/" %}
17
+ {% else %}
18
+ {% set metaicons = "" %}
19
+ {% endif %}
20
+
21
+ {% set pageColNumber = pageConfig.pageColNumber | default("8") %}
22
+
23
+ {% if pageConfig.cdn is defined and pageConfig.cdn or release_version is defined and release_version %}
24
+ {# Production #}
25
+ {% set cdn_url = (pageConfig.cdn.url if pageConfig.cdn is defined and pageConfig.cdn and pageConfig.cdn.url is defined and pageConfig.cdn.url) or "https://cdn.ons.gov.uk/sdc/design-system" %}
26
+ {% set slash = "" if cdn_url | last == "/" else "/" %}
27
+ {% set assetsURL = cdn_url + slash + ((pageConfig.cdn.version if pageConfig.cdn is defined and pageConfig.cdn and pageConfig.cdn.version is defined and pageConfig.cdn.version) or release_version) %}
28
+ {% elif pageInfo is defined and pageInfo and pageInfo.version is defined and pageInfo.version %}
29
+ {# Prototype kits #}
30
+ {% set assetsURL = "/" + pageInfo.version %}
31
+ {% elif pageConfig.assetsURL is defined and pageConfig.assetsURL %}
32
+ {# Runner Dev #}
33
+ {% set assetsURL = pageConfig.assetsURL %}
34
+ {% else %}
35
+ {# Development #}
36
+ {% set assetsURL = "" %}
37
+ {% endif %}
38
+
39
+ {% if pageConfig is defined and pageConfig and pageConfig.title is defined and pageConfig.title %}
40
+ {% set page_title = pageConfig.title %}
41
+ {% elif pageInfo is defined and pageInfo and pageInfo.title is defined and pageInfo.title %}
42
+ {% set page_title = pageInfo.title %}
43
+ {% else %}
44
+ {% set page_title = "ONS Design System" %}
45
+ {% endif %}
46
+
47
+ <!doctype html>
48
+ <html lang="{{ currentLanguageISOCode }}">
49
+ <head>
50
+ <meta charset="utf-8">
51
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
52
+ <meta name="viewport" content="width=device-width, initial-scale=1">
53
+ <title>{{ page_title }}</title>
54
+ <link rel="stylesheet" href="{{ assetsURL }}/css/{{ pageConfig.theme | default('main') }}.css">
55
+ <link rel="stylesheet" media="print" href="{{ assetsURL }}/css/print.css">
56
+ <meta name="theme-color" content="{% if pageConfig.theme == 'census' %}#902082{% else %}#206095{% endif %}"/>
57
+
58
+ {% if pageConfig.headMeta is defined and pageConfig.headMeta %}
59
+
60
+ {% if pageConfig.headMeta.description is defined and pageConfig.headMeta.description or pageConfig.description is defined and pageConfig.description %}
61
+ <meta name="description" content="{{ pageConfig.headMeta.description | default(pageConfig.description) }}">
62
+ {% endif %}
63
+
64
+ <!-- Open Graph -->
65
+ <meta property="og:type" content="website">
66
+ <meta property="og:url" content="{{ pageConfig.headMeta.canonicalUrl | default(pageConfig.absoluteUrl) }}">
67
+ <meta property="og:title" content="{{ pageConfig.headMeta.title | default(pageConfig.title) }}">
68
+ <meta property="og:image" content="{{ assetsURL }}/favicons/{{ metaicons }}opengraph.png">
69
+ <meta property="og:image:type" content="image/png">
70
+ <meta property="og:image:width" content="1200">
71
+ <meta property="og:image:height" content="630">
72
+ <meta property="og:description" content="{{ pageConfig.headMeta.description | default(pageConfig.description) }}">
73
+ <meta property="og:site_name" content="{{ pageConfig.header.title | default(pageConfig.title) }}">
74
+ <meta property="og:locale" content="{{ currentLanguageISOCode }}">
75
+ {% if otherLanguageISOCode is defined and otherLanguageISOCode %}
76
+ <meta property="og:locale:alternate" content="{{ otherLanguageISOCode }}">
77
+ {% endif %}
78
+
79
+ <!-- Twitter -->
80
+ <meta name="twitter:card" content="summary">
81
+ <meta name="twitter:site" content="{{ pageConfig.headMeta.twitterSite }}">
82
+ <meta name="twitter:url" content="{{ pageConfig.headMeta.canonicalUrl | default(pageConfig.absoluteUrl) }}">
83
+ <meta name="twitter:title" content="{{ pageConfig.headMeta.title | default(pageConfig.title) }}">
84
+ <meta name="twitter:description" content="{{ pageConfig.headMeta.description | default(pageConfig.description) }}">
85
+ <meta name="twitter:image" content="{{ assetsURL }}/favicons/{{ metaicons }}twitter.png">
86
+
87
+ <!-- Canonical -->
88
+ <link rel="canonical" href="{{ pageConfig.headMeta.canonicalUrl | default(pageConfig.absoluteUrl) }}">
89
+
90
+ {% if pageConfig.headMeta.hrefLangs is defined and pageConfig.headMeta.hrefLangs %}
91
+ {% for item in pageConfig.headMeta.hrefLangs %}
92
+ <link rel="alternate" href="{{ item.url }}" hreflang="{{ item.lang }}">
93
+ {% endfor %}
94
+ {% endif %}
95
+
96
+ {% endif %}
97
+
98
+ {% block headIcons %}
99
+ <!-- Favicons -->
100
+ <meta name="msapplication-config" content="{{ assetsURL }}/favicons/{{ metaicons }}browserconfig.json">
101
+ <link rel="icon" type="image/x-icon" href="{{ assetsURL }}/favicons/{{ metaicons }}favicon.ico">
102
+ <link rel="icon" type="image/png" href="{{ assetsURL }}/favicons/{{ metaicons }}favicon-32x32.png" sizes="32x32">
103
+ <link rel="icon" type="image/png" href="{{ assetsURL }}/favicons/{{ metaicons }}favicon-16x16.png" sizes="16x16">
104
+ <link rel="mask-icon" href="{{ assetsURL }}/favicons/{{ metaicons }}safari-pinned-tab.svg" color="#000000">
105
+ <link rel="apple-touch-icon" type="image/png" href="{{ assetsURL }}/favicons/{{ metaicons }}apple-touch-icon.png" sizes="180x180">
106
+ <link rel="manifest" href="{{ assetsURL }}/favicons/{{ metaicons }}manifest.json">
107
+ {% endblock %}
108
+
109
+ {% block head %}{% endblock %}
110
+
111
+ </head>
112
+ <body{% if pageConfig.bodyClasses is defined and pageConfig.bodyClasses %} class="{{ pageConfig.bodyClasses }}"{% endif %}>
113
+ <script{% if pageConfig.cspNonce is defined and pageConfig.cspNonce %} nonce="{{ pageConfig.cspNonce }}"{% elif pageConfig.cspNonce is not defined and csp_nonce is defined and csp_nonce %} nonce="{{ csp_nonce() }}"{% endif %}>document.body.className = ((document.body.className) ? document.body.className + ' ons-js-enabled' : 'ons-js-enabled');</script>
114
+ {% block bodyStart %}{% endblock %}
115
+ {% block body %}
116
+ <div class="ons-page">
117
+ <div class="ons-page__content">
118
+ {% block skipLink %}
119
+ {{
120
+ onsSkipToContent({
121
+ "url": "#main-content",
122
+ "text": "Skip to main content"
123
+ })
124
+ }}
125
+ {% endblock %}
126
+ {% if form is defined and form and form.attributes is defined and form.attributes %}
127
+ <form
128
+ {% if form.classes is defined and form.classes %}class="{{ form.classes }}"{% endif %}
129
+ method="{{ form.method | default('POST') }}"
130
+ {% if form.attributes is defined and form.attributes %}{% for attribute, value in (form.attributes.items() if form.attributes is mapping and form.attributes.items else form.attributes) %}{{ attribute }}{% if value is defined and value %}="{{value}}" {% endif %}{% endfor %}{% endif %}
131
+ >
132
+ {% endif %}
133
+ {% block preHeader %}{% endblock %}
134
+ {% block header %}
135
+ {{
136
+ onsHeader({
137
+ "title": pageConfig.header.title | default(pageConfig.title),
138
+ "classes": pageConfig.header.classes,
139
+ "wide": pageConfig.wide,
140
+ "language": pageConfig.language,
141
+ "button": pageConfig.signoutButton,
142
+ "toggleButton": pageConfig.toggleButton,
143
+ "navigation": pageConfig.navigation,
144
+ "phase": pageConfig.phase,
145
+ "assetsURL": assetsURL,
146
+ "serviceLinks": pageConfig.serviceLinks,
147
+ "logo": pageConfig.header.logo,
148
+ "mobileLogo": pageConfig.header.mobileLogo,
149
+ "logoAlt": pageConfig.header.logoAlt,
150
+ "logoHref": pageConfig.header.logoHref,
151
+ "titleLogo": pageConfig.header.titleLogo,
152
+ "titleLogoAlt": pageConfig.header.titleLogoAlt,
153
+ "titleLogoHref": pageConfig.header.titleLogoHref,
154
+ "customHeaderLogo": pageConfig.header.customHeaderLogo
155
+ })
156
+ }}
157
+ {% endblock %}
158
+ {% block pageContent %}
159
+ <div class="ons-page__container ons-container {{ containerClasses }}">
160
+ {% if pageConfig.breadcrumbs is defined and pageConfig.breadcrumbs %}
161
+ {% from "components/breadcrumbs/_macro.njk" import onsBreadcrumbs %}
162
+ {{
163
+ onsBreadcrumbs({
164
+ "id": pageConfig.breadcrumbs.id,
165
+ "ariaLabel": pageConfig.breadcrumbs.ariaLabel,
166
+ "itemsList": pageConfig.breadcrumbs.itemsList
167
+ })
168
+ }}
169
+ {% endif %}
170
+ {% block preMain %}{% endblock %}
171
+ <div class="ons-grid">
172
+ <div class="ons-grid__col ons-col-{{ pageColNumber }}@m">
173
+ <main id="main-content" class="ons-page__main {{ pageClasses }}">
174
+ {% block main %}{% endblock %}
175
+ </main>
176
+ </div>
177
+ </div>
178
+ </div>
179
+ {% endblock %}
180
+
181
+ {% if form is defined and form and form.attributes is defined and form.attributes %}
182
+ </form>
183
+ {% endif %}
184
+ </div>
185
+ {% block preFooter %}{% endblock %}
186
+ {% block footer %}
187
+ {% if pageConfig.footer is defined and pageConfig.footer %}
188
+ {{
189
+ onsFooter({
190
+ "assetsURL": assetsURL,
191
+ "wide": pageConfig.wide,
192
+ "classes": "ons-page__footer",
193
+ "language": pageConfig.language,
194
+ "lang": currentLanguageISOCode,
195
+ "rows": pageConfig.footer.rows,
196
+ "cols": pageConfig.footer.cols,
197
+ "poweredBy": pageConfig.footer.poweredBy,
198
+ "crest": pageConfig.footer.crest,
199
+ "OGLLink": pageConfig.footer.OGLLink,
200
+ "button": pageConfig.signoutButton,
201
+ "footerWarning": pageConfig.footer.footerWarning,
202
+ "copyrightDeclaration": pageConfig.footer.copyrightDeclaration,
203
+ "newTabWarning": pageConfig.footer.newTabWarning,
204
+ "legal": pageConfig.footer.legal
205
+ })
206
+ }}
207
+ {% endif %}
208
+ {% endblock %}
209
+ </div>
210
+ {% block bodyEnd %}{% endblock %}
211
+ {% endblock %}
212
+
213
+ {% if isPatternLib is defined and isPatternLib %}
214
+ {% set scripts = assetsURL + "/scripts/main.js," + assetsURL + "/scripts/patternlib.js" %}
215
+ {% else %}
216
+ {% set scripts = assetsURL + "/scripts/main.js" %}
217
+ {% endif %}
218
+
219
+ <script{% if pageConfig.cspNonce is defined and pageConfig.cspNonce %} nonce="{{ pageConfig.cspNonce }}"{% elif pageConfig.cspNonce is not defined and csp_nonce is defined and csp_nonce %} nonce="{{ csp_nonce() }}"{% endif %}>
220
+ (function() {
221
+ var s = '{{ scripts | safe }}'.split(','),
222
+ c = document.createElement('script');
223
+
224
+ if (!('noModule' in c)) {
225
+ for (var i = 0; i < s.length; i++) {
226
+ s[i] = s[i].replace('.js', '.es5.js');
227
+ }
228
+ }
229
+
230
+ for (var i = 0; i < s.length; i++) {
231
+ var e = document.createElement('script');
232
+
233
+ e.src = s[i];
234
+
235
+ document.body.appendChild(e);
236
+ }
237
+ })();
238
+ </script>
239
+
240
+ {% block scripts %}{% endblock %}
241
+ </body>
242
+ </html>
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": "45.0.0",
4
+ "version": "45.1.0",
5
5
  "main": "index.js",
6
6
  "license": "MIT",
7
7
  "author": {
@@ -19,7 +19,7 @@
19
19
  "test": "STYLES=main gulp build-styles && TEST_MODE=nomodule karma start ./karma.conf.babel-register.js && TEST_MODE=esm karma start ./karma.conf.babel-register.js && codecov",
20
20
  "test:browserstack": "STYLES=main gulp build-styles && TEST_MODE=nomodule TEST_ON_BROWSERSTACK=true karma start ./karma.conf.babel-register.js && TEST_MODE=esm TEST_ON_BROWSERSTACK=true karma start ./karma.conf.babel-register.js",
21
21
  "test-visual": "yarn build && npx percy exec -- babel-node src/tests/visual/percy.snapshots.js",
22
- "tidy-clean": "rm -rf build css favicons fonts img components page-templates templates scripts coverage scss js",
22
+ "tidy-clean": "rm -rf build css favicons fonts img components layout scripts coverage scss js",
23
23
  "check-unused": "npx npm-check-unused",
24
24
  "dedupe-deps": "npx yarn-deduplicate yarn.lock",
25
25
  "lint-staged": "lint-staged",
@@ -66,7 +66,8 @@
66
66
  "@babel/preset-env": "^7.14.7",
67
67
  "@babel/register": "^7.14.5",
68
68
  "@babel/runtime": "^7.14.6",
69
- "@percy/agent": "^0.28.6",
69
+ "@percy/cli": "^1.0.0-beta.71",
70
+ "@percy/puppeteer": "^2.0.0",
70
71
  "@percy/script": "^1.1.0",
71
72
  "abortcontroller-polyfill": "^1.2.3",
72
73
  "autoprefixer": "^9.3.1",
@@ -131,7 +132,7 @@
131
132
  "postcss-url": "^8.0.0",
132
133
  "prepend-file": "^1.3.1",
133
134
  "prettier": "^1.15.2",
134
- "prismjs": "^1.23.0",
135
+ "prismjs": "1.24.0",
135
136
  "proxyquireify": "^3.2.1",
136
137
  "puppeteer": "^5.3.1",
137
138
  "remark-cli": "^9.0.0",