@ons/design-system 74.0.0-next.2 → 74.0.0-next.4
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.
- package/README.md +13 -3
- package/components/access-code/example-access-code-error.njk +1 -1
- package/components/access-code/example-access-code.njk +1 -1
- package/components/back-to-top/example-full-page-back-to-top.njk +1 -1
- package/components/breadcrumbs/_breadcrumbs.scss +4 -7
- package/components/breadcrumbs/_macro.njk +29 -25
- package/components/breadcrumbs/_macro.spec.js +39 -0
- package/components/header/_macro.njk +7 -3
- package/components/header/_macro.spec.js +27 -0
- package/components/hero/example-hero-dark-with-external-breadcrumbs.njk +17 -21
- package/components/hero/example-hero-default-with-external-breadcrumbs.njk +165 -169
- package/components/hero/example-hero-grey-with-external-breadcrumbs.njk +207 -211
- package/components/hero/example-hero-navy-blue-with-external-breadcrumbs.njk +163 -167
- package/components/hero/example-hero-pale-blue-with-external-breadcrumbs.njk +165 -169
- package/components/question/example-question-ccs.njk +1 -1
- package/components/question/example-question-fieldset.njk +1 -1
- package/components/question/example-question-interviewer-note.njk +1 -1
- package/components/question/example-question-no-fieldset.njk +1 -1
- package/components/relationships/example-relationships-error.njk +1 -1
- package/components/relationships/example-relationships-you.njk +1 -1
- package/components/relationships/example-relationships.njk +1 -1
- package/components/table-of-contents/example-table-of-contents-sticky-full-page.njk +1 -1
- package/components/table-of-contents/table-of-contents.spec.js +4 -5
- package/css/main.css +1 -1
- package/layout/_template.njk +57 -44
- package/package.json +1 -1
- package/scss/objects/_page.scss +1 -1
- package/scss/objects/_spacing.scss +0 -4
|
@@ -4,170 +4,165 @@ layout: ~
|
|
|
4
4
|
---
|
|
5
5
|
|
|
6
6
|
{% from "components/hero/_macro.njk" import onsHero %}
|
|
7
|
-
{% from "components/breadcrumbs/_macro.njk" import onsBreadcrumbs %}
|
|
8
7
|
{% extends "layout/_template.njk" %}
|
|
9
8
|
{%
|
|
10
9
|
set pageConfig = {
|
|
11
10
|
"header": {
|
|
12
11
|
"variants": 'basic',
|
|
13
12
|
"menuLinks": {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
13
|
+
"id": "menu-links",
|
|
14
|
+
"keyLinks": [
|
|
15
|
+
{
|
|
16
|
+
'heading': 'Taking part in a survey?',
|
|
17
|
+
'description': 'It’s never been more important.'
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
'heading': 'Release calendar',
|
|
21
|
+
'description': 'View our latest and upcoming releases.'
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
'heading': 'Explore local statistics',
|
|
25
|
+
'url': '#0',
|
|
26
|
+
'description': 'Explore statistics across the UK.'
|
|
27
|
+
}
|
|
28
|
+
],
|
|
29
|
+
"columns": [
|
|
30
|
+
{
|
|
31
|
+
"groups": [
|
|
32
|
+
{
|
|
33
|
+
"heading": "People, population and community",
|
|
34
|
+
"groupItems": [
|
|
35
|
+
{
|
|
36
|
+
"text": "Armed forces community"
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
"text": "Births, deaths and marriages"
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
"text": "Crime and justice"
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
"text": "Cultural identity"
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
"text": "Education and childcare"
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
"text": "Elections"
|
|
52
|
+
},
|
|
53
|
+
{
|
|
54
|
+
"text": "Health and social care"
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
"text": "Household characteristics"
|
|
58
|
+
},
|
|
59
|
+
{
|
|
60
|
+
"text": "Housing"
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
"text": "Leisure and tourism"
|
|
64
|
+
},
|
|
65
|
+
{
|
|
66
|
+
"text": "Personal and household finances"
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
"text": "Population and migration"
|
|
70
|
+
},
|
|
71
|
+
{
|
|
72
|
+
"text": "Well-being"
|
|
73
|
+
}
|
|
74
|
+
]
|
|
75
|
+
}
|
|
76
|
+
]
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
"groups": [
|
|
80
|
+
{
|
|
81
|
+
"heading": "Business, industry and trade",
|
|
82
|
+
"groupItems": [
|
|
83
|
+
{
|
|
84
|
+
"text": "Business"
|
|
85
|
+
},
|
|
86
|
+
{
|
|
87
|
+
"text": "Changes to business"
|
|
88
|
+
},
|
|
89
|
+
{
|
|
90
|
+
"text": "Construction industry"
|
|
91
|
+
},
|
|
92
|
+
{
|
|
93
|
+
"text": "International trade"
|
|
94
|
+
},
|
|
95
|
+
{
|
|
96
|
+
"text": "IT and internet industry"
|
|
97
|
+
},
|
|
98
|
+
{
|
|
99
|
+
"text": "Manufacturing and production industry"
|
|
100
|
+
},
|
|
101
|
+
{
|
|
102
|
+
"text": "Retail industry",
|
|
103
|
+
"url": "#0"
|
|
104
|
+
},
|
|
105
|
+
{
|
|
106
|
+
"text": "Tourism industry"
|
|
107
|
+
}
|
|
108
|
+
]
|
|
109
|
+
},
|
|
110
|
+
{
|
|
111
|
+
"heading": "Employment and labour market",
|
|
112
|
+
"url": "#0",
|
|
113
|
+
"groupItems":
|
|
114
|
+
[
|
|
115
|
+
{
|
|
116
|
+
"text": "People in work"
|
|
117
|
+
},
|
|
118
|
+
{
|
|
119
|
+
"text": "People not in work"
|
|
120
|
+
}
|
|
121
|
+
]
|
|
123
122
|
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
}
|
|
166
|
-
|
|
167
|
-
%}
|
|
168
|
-
{% block pageContent %}
|
|
169
|
-
{{
|
|
170
|
-
onsBreadcrumbs({
|
|
123
|
+
}
|
|
124
|
+
]
|
|
125
|
+
},
|
|
126
|
+
{
|
|
127
|
+
"groups": [
|
|
128
|
+
{
|
|
129
|
+
"heading": "Economy",
|
|
130
|
+
"groupItems": [
|
|
131
|
+
{
|
|
132
|
+
"text": "Economic output and productivity"
|
|
133
|
+
},
|
|
134
|
+
{
|
|
135
|
+
"text": "Government, public sector and taxes"
|
|
136
|
+
},
|
|
137
|
+
{
|
|
138
|
+
"text": "Gross Value Added (GVA)"
|
|
139
|
+
},
|
|
140
|
+
{
|
|
141
|
+
"text": "Investments, pensions and trusts"
|
|
142
|
+
},
|
|
143
|
+
{
|
|
144
|
+
"text": "Regional accounts"
|
|
145
|
+
},
|
|
146
|
+
{
|
|
147
|
+
"text": "Environmental accounts"
|
|
148
|
+
},
|
|
149
|
+
{
|
|
150
|
+
"text": "Gross Domestic Product (GDP)"
|
|
151
|
+
},
|
|
152
|
+
{
|
|
153
|
+
"text": "Inflation and price indices"
|
|
154
|
+
},
|
|
155
|
+
{
|
|
156
|
+
"text": "National accounts"
|
|
157
|
+
}
|
|
158
|
+
]
|
|
159
|
+
}
|
|
160
|
+
]
|
|
161
|
+
}
|
|
162
|
+
]
|
|
163
|
+
}
|
|
164
|
+
},
|
|
165
|
+
breadcrumbs: {
|
|
171
166
|
"ariaLabel": 'Breadcrumbs',
|
|
172
167
|
"variant": "pale-blue",
|
|
173
168
|
"itemsList": [
|
|
@@ -184,18 +179,19 @@ layout: ~
|
|
|
184
179
|
"text": 'Retail industry'
|
|
185
180
|
}
|
|
186
181
|
]
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
%}
|
|
185
|
+
|
|
186
|
+
{% block hero %}
|
|
187
|
+
{{
|
|
188
|
+
onsHero({
|
|
189
|
+
"topic": 'Topic',
|
|
190
|
+
"title": 'Retail Industry',
|
|
191
|
+
"text": 'Sales by retailers in Great Britain directly to end consumers, including spending on goods (in store and online)
|
|
192
|
+
(Retail Sales Index) and spending on services (Index of Services). The industry as a whole is used as an indicator
|
|
193
|
+
of how the wider economy is performing and the strength of consumer spending.',
|
|
194
|
+
"variants": 'pale-blue'
|
|
187
195
|
})
|
|
188
196
|
}}
|
|
189
|
-
<main id="main-content">
|
|
190
|
-
{{
|
|
191
|
-
onsHero({
|
|
192
|
-
"topic": 'Topic',
|
|
193
|
-
"title": 'Retail Industry',
|
|
194
|
-
"text": 'Sales by retailers in Great Britain directly to end consumers, including spending on goods (in store and online)
|
|
195
|
-
(Retail Sales Index) and spending on services (Index of Services). The industry as a whole is used as an indicator
|
|
196
|
-
of how the wider economy is performing and the strength of consumer spending.',
|
|
197
|
-
"variants": 'pale-blue'
|
|
198
|
-
})
|
|
199
|
-
}}
|
|
200
|
-
</main>
|
|
201
197
|
{% endblock %}
|
|
@@ -6,7 +6,7 @@ describe('script: table-of-contents', () => {
|
|
|
6
6
|
beforeEach(async () => {
|
|
7
7
|
await setTestPage(
|
|
8
8
|
'/test',
|
|
9
|
-
|
|
9
|
+
|
|
10
10
|
`
|
|
11
11
|
<div class="ons-page__container ons-container">
|
|
12
12
|
<div class="ons-grid ons-js-table-of-contents-container">
|
|
@@ -47,7 +47,6 @@ describe('script: table-of-contents', () => {
|
|
|
47
47
|
</div>
|
|
48
48
|
</div>
|
|
49
49
|
`,
|
|
50
|
-
/* eslint-enable indent */
|
|
51
50
|
);
|
|
52
51
|
});
|
|
53
52
|
|
|
@@ -68,7 +67,7 @@ describe('script: table-of-contents-fixed-position', () => {
|
|
|
68
67
|
beforeEach(async () => {
|
|
69
68
|
await setTestPage(
|
|
70
69
|
'/test',
|
|
71
|
-
|
|
70
|
+
|
|
72
71
|
`
|
|
73
72
|
<div class="ons-page__container ons-container">
|
|
74
73
|
<div class="ons-grid ons-js-table-of-contents-container">
|
|
@@ -146,8 +145,8 @@ describe('script: table-of-contents-fixed-position', () => {
|
|
|
146
145
|
</div>
|
|
147
146
|
</div>
|
|
148
147
|
`,
|
|
149
|
-
|
|
150
|
-
'
|
|
148
|
+
|
|
149
|
+
'mainContent',
|
|
151
150
|
);
|
|
152
151
|
});
|
|
153
152
|
|