@ons/design-system 45.1.4 → 45.2.2
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/components/button/_button.scss +1 -1
- package/components/button/_macro.njk +5 -2
- package/components/fieldset/_macro.njk +20 -18
- package/components/footer/_footer.scss +2 -2
- package/components/footer/_macro.njk +3 -1
- package/components/header/_header.scss +10 -38
- package/components/header/_macro.njk +4 -4
- package/components/icons/_macro.njk +246 -191
- package/components/label/_macro.njk +15 -15
- package/components/lists/_macro.njk +1 -1
- package/components/pagination/_macro.njk +2 -2
- package/components/question/_macro.njk +0 -2
- package/components/section-navigation/_macro.njk +10 -1
- package/components/section-navigation/_section-navigation.scss +48 -13
- package/css/census.css +1 -1
- package/css/main.css +1 -1
- package/js/inpagelink.js +6 -8
- package/package.json +1 -1
- package/scripts/main.es5.js +1 -1
- package/scripts/main.js +1 -1
- package/scss/main.scss +1 -1
- package/scss/patternlib.scss +0 -1
- package/scss/vars/_colors.scss +0 -9
- package/components/header-navigation/_macro.njk +0 -0
- package/components/highlight/_highlight.scss +0 -5
|
@@ -29,9 +29,12 @@
|
|
|
29
29
|
{% set iconType = "loader" %}
|
|
30
30
|
{% set iconPosition = "after" %}
|
|
31
31
|
{# CTA or mobile menu toggle #}
|
|
32
|
-
{% elif params.
|
|
32
|
+
{% elif params.buttonStyle is defined and params.buttonStyle == "mobile" %}
|
|
33
33
|
{% set iconType = "chevron" %}
|
|
34
34
|
{% set iconPosition = "after" %}
|
|
35
|
+
{% elif params.url is defined and params.url %}
|
|
36
|
+
{% set iconType = "arrow-next" %}
|
|
37
|
+
{% set iconPosition = "after" %}
|
|
35
38
|
{% endif %}
|
|
36
39
|
{% endif %}
|
|
37
40
|
|
|
@@ -49,7 +52,7 @@
|
|
|
49
52
|
{% if params.value is defined and params.value %}value="{{ params.value }}"{% endif %}
|
|
50
53
|
{% if params.name is defined and params.name and tag != "a" %}name="{{ params.name }}"{% elif params.name is defined and params.name and tag == "a" %}id="{{ params.name }}"{% endif %}
|
|
51
54
|
{% if params.url is defined and params.url and params.newWindow is defined and params.newWindow %}target="_blank" rel="noopener"{% endif %}
|
|
52
|
-
{% if params.buttonStyle == "download" %} download{% endif %}
|
|
55
|
+
{% if params.buttonStyle == "download" and (params.removeDownloadAttribute is not defined or not params.removeDownloadAttribute or params.removeDownloadAttribute != true) %} download{% endif %}
|
|
53
56
|
{% if params.attributes is defined and params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %} {{attribute}}="{{value}}"{% endfor %}{% endif %}
|
|
54
57
|
>
|
|
55
58
|
<span class="ons-btn__inner{% if params.innerClasses is defined and params.innerClasses %} {{ params.innerClasses }}{% endif %}">
|
|
@@ -1,39 +1,41 @@
|
|
|
1
1
|
{% from "components/error/_macro.njk" import onsError %}
|
|
2
2
|
|
|
3
3
|
{% macro onsFieldset(params) %}
|
|
4
|
-
{% set fieldset
|
|
5
|
-
{% if params.dontWrap is defined and params.dontWrap
|
|
4
|
+
{% set fieldset -%}
|
|
5
|
+
{% if params.dontWrap is defined and params.dontWrap -%}
|
|
6
6
|
<div class="ons-input-items">
|
|
7
|
-
{{ caller() }}
|
|
7
|
+
{{- caller() -}}
|
|
8
8
|
</div>
|
|
9
|
-
{
|
|
9
|
+
{%- elif (params.legend is defined and params.legend) or (params.legendIsQuestionTitle is defined and params.legendIsQuestionTitle) -%}
|
|
10
10
|
<fieldset
|
|
11
11
|
{% if params.id is defined and params.id %}id="{{ params.id }}"{% endif %}
|
|
12
12
|
class="ons-fieldset{% if params.classes is defined and params.classes %} {{ params.classes }}{% endif %}"
|
|
13
13
|
{% if params.attributes is defined and params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %}{{ attribute }}{% if value is defined and value %}="{{ value }}"{% endif %} {% endfor %}{% endif %}
|
|
14
14
|
>
|
|
15
15
|
<legend class="ons-fieldset__legend{% if params.legendIsQuestionTitle is defined and params.legendIsQuestionTitle %} ons-u-mb-no{% endif %}{% if params.legendClasses is defined and params.legendClasses %} {{ params.legendClasses }}{% endif %}">
|
|
16
|
-
{
|
|
16
|
+
{%- if params.legendIsQuestionTitle -%}
|
|
17
17
|
<h1 id="fieldset-legend-title" class="ons-fieldset__legend-title ons-u-mb-m{% if params.legendTitleClasses is defined and params.legendTitleClasses %} {{ params.legendTitleClasses }}{% endif %}">
|
|
18
18
|
{{- params.legend | safe -}}
|
|
19
19
|
</h1>
|
|
20
|
-
{
|
|
20
|
+
{%- else -%}
|
|
21
21
|
{{- params.legend | safe -}}
|
|
22
|
-
{
|
|
23
|
-
{
|
|
24
|
-
<div class="ons-fieldset__description{% if params.legendIsQuestionTitle %} ons-fieldset__description--title ons-u-mb-m{% endif %}">
|
|
25
|
-
|
|
22
|
+
{%- endif -%}
|
|
23
|
+
{%- if params.description is defined and params.description -%}
|
|
24
|
+
<div class="ons-fieldset__description{% if params.legendIsQuestionTitle %} ons-fieldset__description--title ons-u-mb-m{% endif %}">
|
|
25
|
+
{{- params.description | safe -}}
|
|
26
|
+
</div>
|
|
27
|
+
{%- endif -%}
|
|
26
28
|
</legend>
|
|
27
|
-
{{ caller() }}
|
|
29
|
+
{{- caller() -}}
|
|
28
30
|
</fieldset>
|
|
29
|
-
{
|
|
30
|
-
{
|
|
31
|
+
{%- endif %}
|
|
32
|
+
{%- endset %}
|
|
31
33
|
|
|
32
|
-
{% if params.error is defined and params.error
|
|
34
|
+
{% if params.error is defined and params.error -%}
|
|
33
35
|
{% call onsError(params.error) %}
|
|
34
|
-
{{ fieldset | safe }}
|
|
36
|
+
{{- fieldset | safe -}}
|
|
35
37
|
{% endcall %}
|
|
36
|
-
{
|
|
37
|
-
{{ fieldset | safe }}
|
|
38
|
-
{
|
|
38
|
+
{%- else -%}
|
|
39
|
+
{{- fieldset | safe -}}
|
|
40
|
+
{%- endif %}
|
|
39
41
|
{% endmacro %}
|
|
@@ -86,7 +86,9 @@
|
|
|
86
86
|
"value": params.button.value,
|
|
87
87
|
"attributes": params.button.attributes,
|
|
88
88
|
"url": params.button.url,
|
|
89
|
-
"buttonStyle": params.button.buttonStyle
|
|
89
|
+
"buttonStyle": params.button.buttonStyle,
|
|
90
|
+
"iconType": params.button.iconType,
|
|
91
|
+
"iconPosition": params.button.iconPosition
|
|
90
92
|
})
|
|
91
93
|
}}
|
|
92
94
|
</div>
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
height: 46px;
|
|
31
31
|
}
|
|
32
32
|
}
|
|
33
|
-
&__grid-top-
|
|
33
|
+
&__grid-top-tall {
|
|
34
34
|
@include mq(xs) {
|
|
35
35
|
height: 76px;
|
|
36
36
|
}
|
|
@@ -119,9 +119,9 @@
|
|
|
119
119
|
background: $color-header-top-internal;
|
|
120
120
|
.ons-svg-logo {
|
|
121
121
|
display: block;
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
fill: $color-
|
|
122
|
+
.ons-svg-logo__group--text,
|
|
123
|
+
.ons-svg-logo__group--primary {
|
|
124
|
+
fill: $color-white;
|
|
125
125
|
}
|
|
126
126
|
}
|
|
127
127
|
}
|
|
@@ -129,6 +129,9 @@
|
|
|
129
129
|
background-color: transparent;
|
|
130
130
|
box-shadow: none;
|
|
131
131
|
outline: 3px solid $color-focus;
|
|
132
|
+
.ons-svg-logo {
|
|
133
|
+
fill: $color-text-link-focus;
|
|
134
|
+
}
|
|
132
135
|
}
|
|
133
136
|
&__grid-top {
|
|
134
137
|
min-height: 36px;
|
|
@@ -141,45 +144,13 @@
|
|
|
141
144
|
}
|
|
142
145
|
}
|
|
143
146
|
|
|
144
|
-
.ons-svg-logo,
|
|
145
|
-
.ons-nisra-svg-logo {
|
|
146
|
-
display: block;
|
|
147
|
-
}
|
|
148
|
-
|
|
149
147
|
.ons-svg-logo {
|
|
150
|
-
|
|
151
|
-
&--accent {
|
|
152
|
-
fill: $color-ons-logo-secondary;
|
|
153
|
-
}
|
|
154
|
-
}
|
|
155
|
-
|
|
156
|
-
.ons-nisra-svg-logo {
|
|
157
|
-
.ons-st0 {
|
|
158
|
-
fill: $color-nisra-logo-primary;
|
|
159
|
-
}
|
|
160
|
-
.ons-st1 {
|
|
161
|
-
fill: $color-nisra-logo-secondary;
|
|
162
|
-
}
|
|
163
|
-
.ons-st2 {
|
|
164
|
-
fill: $color-nisra-logo-tertiary;
|
|
165
|
-
}
|
|
148
|
+
display: block;
|
|
166
149
|
}
|
|
167
150
|
|
|
168
151
|
&__logo-link:focus {
|
|
169
152
|
.ons-svg-logo {
|
|
170
|
-
|
|
171
|
-
&--accent {
|
|
172
|
-
fill: $color-black !important;
|
|
173
|
-
}
|
|
174
|
-
}
|
|
175
|
-
.ons-nisra-svg-logo {
|
|
176
|
-
.ons-st0 {
|
|
177
|
-
fill: $color-black !important;
|
|
178
|
-
}
|
|
179
|
-
.ons-st1 {
|
|
180
|
-
fill: $color-black !important;
|
|
181
|
-
}
|
|
182
|
-
.ons-st2 {
|
|
153
|
+
.ons-svg-logo__group {
|
|
183
154
|
fill: $color-black !important;
|
|
184
155
|
}
|
|
185
156
|
}
|
|
@@ -199,6 +170,7 @@
|
|
|
199
170
|
|
|
200
171
|
&__logo-link,
|
|
201
172
|
&__logo-link:hover {
|
|
173
|
+
font-size: 0;
|
|
202
174
|
text-decoration: none;
|
|
203
175
|
}
|
|
204
176
|
|
|
@@ -18,18 +18,18 @@
|
|
|
18
18
|
{% endif %}
|
|
19
19
|
<div class="ons-header__top">
|
|
20
20
|
<div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
|
|
21
|
-
<div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap
|
|
21
|
+
<div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap{{ ' ons-header__grid-top-tall' if params.customHeaderLogo is defined and params.customHeaderLogo }}">
|
|
22
22
|
|
|
23
23
|
<div class="ons-grid__col ons-col-auto">
|
|
24
24
|
<div class="ons-header__logo--large">
|
|
25
|
-
{
|
|
25
|
+
{%-if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif -%}
|
|
26
26
|
{{
|
|
27
27
|
onsIcon({
|
|
28
28
|
"iconType": params.logo | default('ons-logo-' + currentLanguageISOCode),
|
|
29
29
|
"altText": params.logoAlt | default('Office for National Statistics logo')
|
|
30
30
|
})
|
|
31
31
|
}}
|
|
32
|
-
{
|
|
32
|
+
{%- if params.logoHref is defined and params.logoHref %}</a>{% endif -%}
|
|
33
33
|
</div>
|
|
34
34
|
<div class="ons-header__logo--small">
|
|
35
35
|
{% if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif %}
|
|
@@ -131,7 +131,7 @@
|
|
|
131
131
|
"buttonStyle": "mobile",
|
|
132
132
|
"variants": ["mobile", "ghost"],
|
|
133
133
|
"attributes": {
|
|
134
|
-
"aria-label": params.toggleButton.ariaLabel | default("Toggle main
|
|
134
|
+
"aria-label": params.toggleButton.ariaLabel | default("Toggle main menu") ,
|
|
135
135
|
"aria-controls": params.navigation.id,
|
|
136
136
|
"aria-haspopup": "true",
|
|
137
137
|
"aria-expanded": "false"
|