@ons/design-system 74.0.0-widen.0 → 74.0.0-widen.1
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 +1 -1
- package/components/card/example-card-set-with-headline-figures.njk +4 -4
- package/components/header/_macro.njk +4 -0
- package/components/summary/_macro.njk +3 -2
- package/components/summary/_summary.scss +6 -1
- package/components/table-of-contents/example-table-of-contents-sticky-full-page-ordered.njk +104 -106
- package/components/table-of-contents/example-table-of-contents-sticky-full-page.njk +103 -105
- package/components/table-of-contents/example-table-of-contents-sticky.njk +1 -1
- package/css/main.css +1 -1
- package/package.json +1 -1
- package/scss/objects/_container.scss +9 -4
- package/scss/utilities/_grid.scss +1 -1
- package/scss/vars/_grid.scss +5 -3
package/README.md
CHANGED
|
@@ -149,7 +149,7 @@ Checkout the branch locally and run:
|
|
|
149
149
|
|
|
150
150
|
If the VR tests fail locally, you'll see an error starting with `Error: docker run --rm -i --add-host=host.docker.internal:host-gateway...`
|
|
151
151
|
|
|
152
|
-
`npx http-server backstop_data -p 8008 -o /html_report/` - View the report in your browser.
|
|
152
|
+
`npx http-server backstop_data -p 8008 -c-1 -o /html_report/` - View the report in your browser.
|
|
153
153
|
|
|
154
154
|
### Approving VR test reference image changes
|
|
155
155
|
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{% from "components/card/_macro.njk" import onsCard %}
|
|
2
2
|
|
|
3
3
|
<div class="ons-container">
|
|
4
|
-
<div class="ons-grid ons-grid-flex-gap
|
|
5
|
-
<div class="ons-grid__col ons-grid__col--flex-col
|
|
4
|
+
<div class="ons-grid ons-grid-flex-gap">
|
|
5
|
+
<div class="ons-grid__col ons-grid__col--flex-col">
|
|
6
6
|
{{
|
|
7
7
|
onsCard({
|
|
8
8
|
"variant": 'feature',
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
}}
|
|
21
21
|
</div>
|
|
22
22
|
|
|
23
|
-
<div class="ons-grid__col ons-grid__col--flex-col
|
|
23
|
+
<div class="ons-grid__col ons-grid__col--flex-col">
|
|
24
24
|
{{
|
|
25
25
|
onsCard({
|
|
26
26
|
"variant": 'feature',
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
}}
|
|
39
39
|
</div>
|
|
40
40
|
|
|
41
|
-
<div class="ons-grid__col ons-grid__col--flex-col
|
|
41
|
+
<div class="ons-grid__col ons-grid__col--flex-col">
|
|
42
42
|
{{
|
|
43
43
|
onsCard({
|
|
44
44
|
"variant": 'feature',
|
|
@@ -175,6 +175,10 @@
|
|
|
175
175
|
{% elif params.serviceLinks.itemsList | length > 1 %}
|
|
176
176
|
{% set breakpoint = 'm' %}
|
|
177
177
|
{% set controlVisibility = true %}
|
|
178
|
+
{% if params.mastheadLogo.multipleLogos | length > 2 %}
|
|
179
|
+
{# Increase breakpoint if there are 3 logos to avoid stacking#}
|
|
180
|
+
{% set breakpoint = 'l' %}
|
|
181
|
+
{% endif %}
|
|
178
182
|
{% else %}
|
|
179
183
|
{% set controlVisibility = false %}
|
|
180
184
|
{% endif %}
|
|
@@ -24,8 +24,9 @@
|
|
|
24
24
|
{% if group.title %}
|
|
25
25
|
{% set openingHeadingTag = "<h" ~ headingLevel %}
|
|
26
26
|
{% set closingHeadingTag = "</h" ~ headingLevel ~ ">" %}
|
|
27
|
-
|
|
28
|
-
|
|
27
|
+
<div class="ons-summary__group-title-wrapper">
|
|
28
|
+
{{ openingHeadingTag | safe }} class="ons-summary__group-title">{{ group.title }}{{ closingHeadingTag | safe }}
|
|
29
|
+
</div>
|
|
29
30
|
{% endif %}
|
|
30
31
|
{% if group.rows %}
|
|
31
32
|
<dl class="ons-summary__items">
|
|
@@ -217,9 +217,14 @@ $hub-row-spacing: 1.3rem;
|
|
|
217
217
|
border-bottom: 1px solid var(--ons-color-borders-light);
|
|
218
218
|
}
|
|
219
219
|
}
|
|
220
|
-
.ons-summary__group-title {
|
|
220
|
+
.ons-summary__group-title-wrapper {
|
|
221
221
|
background-color: var(--ons-color-grey-5);
|
|
222
222
|
padding: 1rem 1.25rem;
|
|
223
|
+
margin-bottom: 1rem;
|
|
224
|
+
|
|
225
|
+
.ons-summary__group-title {
|
|
226
|
+
margin: 0;
|
|
227
|
+
}
|
|
223
228
|
}
|
|
224
229
|
.ons-summary__link {
|
|
225
230
|
padding: 0 1.25rem;
|
|
@@ -35,122 +35,120 @@ layout: ~
|
|
|
35
35
|
%}
|
|
36
36
|
|
|
37
37
|
{% block mainContent %}
|
|
38
|
-
<div class="ons-
|
|
39
|
-
<div class="ons-
|
|
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
|
-
</p>
|
|
38
|
+
<div class="ons-grid ons-js-table-of-contents-container">
|
|
39
|
+
<div class="ons-grid__col ons-grid__col--sticky@m ons-col-4@m">
|
|
40
|
+
{{
|
|
41
|
+
onsTableOfContents({
|
|
42
|
+
"title": 'Contents',
|
|
43
|
+
"ariaLabel": 'Sections in this page',
|
|
44
|
+
"ordered": true,
|
|
45
|
+
"itemsList": [
|
|
46
|
+
{
|
|
47
|
+
"url": '#section1',
|
|
48
|
+
"text": 'What is the census?'
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
"url": '#section2',
|
|
52
|
+
"text": 'The online census has now closed'
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
"url": '#section3',
|
|
56
|
+
"text": 'What happens after Census Day'
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
"url": '#section4',
|
|
60
|
+
"text": 'The census in Northern Ireland and Scotland'
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
"url": '#section5',
|
|
64
|
+
"text": 'The last census'
|
|
65
|
+
}
|
|
66
|
+
]
|
|
67
|
+
})
|
|
68
|
+
}}
|
|
69
|
+
</div>
|
|
70
|
+
<div class="ons-grid__col ons-col-8@m">
|
|
71
|
+
<section id="section1">
|
|
72
|
+
<h2>1. What is the census?</h2>
|
|
73
|
+
<p>
|
|
74
|
+
The census is a survey that happens every 10 years and gives us a picture of all the people and households in
|
|
75
|
+
England and Wales.
|
|
76
|
+
</p>
|
|
78
77
|
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
78
|
+
<p>
|
|
79
|
+
Your answers to the census questions will help organisations make decisions on planning and funding public services
|
|
80
|
+
in your area, including transport, education and healthcare.
|
|
81
|
+
</p>
|
|
82
|
+
</section>
|
|
83
|
+
<section id="section2">
|
|
84
|
+
<h2>2. The online census has now closed</h2>
|
|
85
|
+
<p>Census Day was on Sunday 21 March 2021.</p>
|
|
87
86
|
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
87
|
+
<p>
|
|
88
|
+
If you still have a paper census questionnaire, fill it in as soon as you can and return it to FREEPOST, Census
|
|
89
|
+
2021.
|
|
90
|
+
</p>
|
|
91
|
+
</section>
|
|
92
|
+
<section id="section3">
|
|
93
|
+
<h2>3. What happens after Census Day</h2>
|
|
94
|
+
<p>
|
|
95
|
+
Two follow-up surveys, the <a href="#0">Census Coverage Survey</a> and the <a href="#0">Census Quality Survey</a>,
|
|
96
|
+
help to improve the quality and accuracy of the census results.
|
|
97
|
+
</p>
|
|
99
98
|
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
99
|
+
<p>
|
|
100
|
+
Over the next year, we work hard to process the answers from all the census questionnaires. This is so that we can
|
|
101
|
+
publish the initial Census 2021 findings one year after the census and the main releases two years after the census.
|
|
102
|
+
</p>
|
|
104
103
|
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
104
|
+
<p>
|
|
105
|
+
To make sure the Census 2021 statistics we publish meet the needs of those who use them, we also run an outputs
|
|
106
|
+
consultation.
|
|
107
|
+
</p>
|
|
108
|
+
</section>
|
|
109
|
+
<section id="section4">
|
|
110
|
+
<h2>4. The census in Northern Ireland and Scotland</h2>
|
|
111
|
+
<p>The Office for National Statistics (ONS) runs the census in England and Wales.</p>
|
|
113
112
|
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
113
|
+
<p>
|
|
114
|
+
If you live in Northern Ireland, visit the Northern Ireland Statistics Agency (NISRA) census website to find out
|
|
115
|
+
about the census for Northern Ireland.
|
|
116
|
+
</p>
|
|
118
117
|
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
118
|
+
<p>
|
|
119
|
+
If you live in Scotland, visit the National Records of Scotland census website to find out how to take part in the
|
|
120
|
+
census for Scotland.
|
|
121
|
+
</p>
|
|
122
|
+
</section>
|
|
123
|
+
<section id="section5">
|
|
124
|
+
<h2>5. The last census</h2>
|
|
125
|
+
<p>
|
|
126
|
+
The last census took place in 2011. Many people and organisations used information from the 2011 Census in a variety
|
|
127
|
+
of ways.
|
|
128
|
+
</p>
|
|
130
129
|
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
130
|
+
<p>
|
|
131
|
+
For example, Bristol City Council used it to inform decisions on how to fund local housing improvements. It was also
|
|
132
|
+
essential for the charity Redbridge Council for Voluntary Services to help people from ethnic minority groups learn
|
|
133
|
+
more about dementia.
|
|
134
|
+
</p>
|
|
136
135
|
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
136
|
+
<p>
|
|
137
|
+
To read more about the benefits that information from the 2011 Census helped to create, visit the Office for
|
|
138
|
+
National Statistics (ONS) website.
|
|
139
|
+
</p>
|
|
140
|
+
<p>
|
|
141
|
+
The Census Coverage Survey (CCS) was a short, separate survey that we at the Office for National Statistics (ONS)
|
|
142
|
+
started six to eight weeks after Census Day.
|
|
143
|
+
</p>
|
|
145
144
|
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
145
|
+
<p>
|
|
146
|
+
The CCS helps make sure everyone is counted and our census results are as accurate as possible. It asked similar
|
|
147
|
+
questions to the main census, just fewer of them, at addresses in a selection of postcodes across England and Wales.
|
|
148
|
+
</p>
|
|
150
149
|
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
</div>
|
|
150
|
+
<p>The CCS has now closed.</p>
|
|
151
|
+
</section>
|
|
154
152
|
</div>
|
|
155
153
|
</div>
|
|
156
154
|
{% endblock %}
|
|
@@ -35,121 +35,119 @@ layout: ~
|
|
|
35
35
|
%}
|
|
36
36
|
|
|
37
37
|
{% block mainContent %}
|
|
38
|
-
<div class="ons-
|
|
39
|
-
<div class="ons-
|
|
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
|
-
</p>
|
|
38
|
+
<div class="ons-grid ons-js-table-of-contents-container">
|
|
39
|
+
<div class="ons-grid__col ons-grid__col--sticky@m ons-col-4@m">
|
|
40
|
+
{{
|
|
41
|
+
onsTableOfContents({
|
|
42
|
+
"title": 'Contents',
|
|
43
|
+
"ariaLabel": 'Sections in this page',
|
|
44
|
+
"itemsList": [
|
|
45
|
+
{
|
|
46
|
+
"url": '#section1',
|
|
47
|
+
"text": 'What is the census?'
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
"url": '#section2',
|
|
51
|
+
"text": 'The online census has now closed'
|
|
52
|
+
},
|
|
53
|
+
{
|
|
54
|
+
"url": '#section3',
|
|
55
|
+
"text": 'What happens after Census Day'
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
"url": '#section4',
|
|
59
|
+
"text": 'The census in Northern Ireland and Scotland'
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
"url": '#section5',
|
|
63
|
+
"text": 'The last census'
|
|
64
|
+
}
|
|
65
|
+
]
|
|
66
|
+
})
|
|
67
|
+
}}
|
|
68
|
+
</div>
|
|
69
|
+
<div class="ons-grid__col ons-col-8@m">
|
|
70
|
+
<section id="section1">
|
|
71
|
+
<h2>What is the census?</h2>
|
|
72
|
+
<p>
|
|
73
|
+
The census is a survey that happens every 10 years and gives us a picture of all the people and households in
|
|
74
|
+
England and Wales.
|
|
75
|
+
</p>
|
|
77
76
|
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
77
|
+
<p>
|
|
78
|
+
Your answers to the census questions will help organisations make decisions on planning and funding public services
|
|
79
|
+
in your area, including transport, education and healthcare.
|
|
80
|
+
</p>
|
|
81
|
+
</section>
|
|
82
|
+
<section id="section2">
|
|
83
|
+
<h2>The online census has now closed</h2>
|
|
84
|
+
<p>Census Day was on Sunday 21 March 2021.</p>
|
|
86
85
|
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
86
|
+
<p>
|
|
87
|
+
If you still have a paper census questionnaire, fill it in as soon as you can and return it to FREEPOST, Census
|
|
88
|
+
2021.
|
|
89
|
+
</p>
|
|
90
|
+
</section>
|
|
91
|
+
<section id="section3">
|
|
92
|
+
<h2>What happens after Census Day</h2>
|
|
93
|
+
<p>
|
|
94
|
+
Two follow-up surveys, the <a href="#0">Census Coverage Survey</a> and the <a href="#0">Census Quality Survey</a>,
|
|
95
|
+
help to improve the quality and accuracy of the census results.
|
|
96
|
+
</p>
|
|
98
97
|
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
98
|
+
<p>
|
|
99
|
+
Over the next year, we work hard to process the answers from all the census questionnaires. This is so that we can
|
|
100
|
+
publish the initial Census 2021 findings one year after the census and the main releases two years after the census.
|
|
101
|
+
</p>
|
|
103
102
|
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
103
|
+
<p>
|
|
104
|
+
To make sure the Census 2021 statistics we publish meet the needs of those who use them, we also run an outputs
|
|
105
|
+
consultation.
|
|
106
|
+
</p>
|
|
107
|
+
</section>
|
|
108
|
+
<section id="section4">
|
|
109
|
+
<h2>The census in Northern Ireland and Scotland</h2>
|
|
110
|
+
<p>The Office for National Statistics (ONS) runs the census in England and Wales.</p>
|
|
112
111
|
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
112
|
+
<p>
|
|
113
|
+
If you live in Northern Ireland, visit the Northern Ireland Statistics Agency (NISRA) census website to find out
|
|
114
|
+
about the census for Northern Ireland.
|
|
115
|
+
</p>
|
|
117
116
|
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
117
|
+
<p>
|
|
118
|
+
If you live in Scotland, visit the National Records of Scotland census website to find out how to take part in the
|
|
119
|
+
census for Scotland.
|
|
120
|
+
</p>
|
|
121
|
+
</section>
|
|
122
|
+
<section id="section5">
|
|
123
|
+
<h2>The last census</h2>
|
|
124
|
+
<p>
|
|
125
|
+
The last census took place in 2011. Many people and organisations used information from the 2011 Census in a variety
|
|
126
|
+
of ways.
|
|
127
|
+
</p>
|
|
129
128
|
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
129
|
+
<p>
|
|
130
|
+
For example, Bristol City Council used it to inform decisions on how to fund local housing improvements. It was also
|
|
131
|
+
essential for the charity Redbridge Council for Voluntary Services to help people from ethnic minority groups learn
|
|
132
|
+
more about dementia.
|
|
133
|
+
</p>
|
|
135
134
|
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
135
|
+
<p>
|
|
136
|
+
To read more about the benefits that information from the 2011 Census helped to create, visit the Office for
|
|
137
|
+
National Statistics (ONS) website.
|
|
138
|
+
</p>
|
|
139
|
+
<p>
|
|
140
|
+
The Census Coverage Survey (CCS) was a short, separate survey that we at the Office for National Statistics (ONS)
|
|
141
|
+
started six to eight weeks after Census Day.
|
|
142
|
+
</p>
|
|
144
143
|
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
144
|
+
<p>
|
|
145
|
+
The CCS helps make sure everyone is counted and our census results are as accurate as possible. It asked similar
|
|
146
|
+
questions to the main census, just fewer of them, at addresses in a selection of postcodes across England and Wales.
|
|
147
|
+
</p>
|
|
149
148
|
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
</div>
|
|
149
|
+
<p>The CCS has now closed.</p>
|
|
150
|
+
</section>
|
|
153
151
|
</div>
|
|
154
152
|
</div>
|
|
155
153
|
{% endblock %}
|