@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.
Files changed (25) hide show
  1. package/components/button/_button.scss +1 -1
  2. package/components/button/_macro.njk +5 -2
  3. package/components/fieldset/_macro.njk +20 -18
  4. package/components/footer/_footer.scss +2 -2
  5. package/components/footer/_macro.njk +3 -1
  6. package/components/header/_header.scss +10 -38
  7. package/components/header/_macro.njk +4 -4
  8. package/components/icons/_macro.njk +246 -191
  9. package/components/label/_macro.njk +15 -15
  10. package/components/lists/_macro.njk +1 -1
  11. package/components/pagination/_macro.njk +2 -2
  12. package/components/question/_macro.njk +0 -2
  13. package/components/section-navigation/_macro.njk +10 -1
  14. package/components/section-navigation/_section-navigation.scss +48 -13
  15. package/css/census.css +1 -1
  16. package/css/main.css +1 -1
  17. package/js/inpagelink.js +6 -8
  18. package/package.json +1 -1
  19. package/scripts/main.es5.js +1 -1
  20. package/scripts/main.js +1 -1
  21. package/scss/main.scss +1 -1
  22. package/scss/patternlib.scss +0 -1
  23. package/scss/vars/_colors.scss +0 -9
  24. package/components/header-navigation/_macro.njk +0 -0
  25. package/components/highlight/_highlight.scss +0 -5
package/components/button/_button.scss CHANGED
@@ -62,7 +62,7 @@ $button-shadow-size: 3px;
62
62
  margin-left: 0.5rem;
63
63
  }
64
64
 
65
- // When focussed
65
+ // When focused
66
66
  &:focus & {
67
67
  outline: 3px solid transparent;
68
68
  }
package/components/button/_macro.njk CHANGED
@@ -29,9 +29,12 @@
29
29
  {% set iconType = "loader" %}
30
30
  {% set iconPosition = "after" %}
31
31
  {# CTA or mobile menu toggle #}
32
- {% elif params.url is defined and params.url or params.buttonStyle is defined and params.buttonStyle == "mobile" %}
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 %}">
package/components/fieldset/_macro.njk CHANGED
@@ -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
- {% elif (params.legend is defined and params.legend) or (params.legendIsQuestionTitle is defined and params.legendIsQuestionTitle) %}
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
- {% if params.legendIsQuestionTitle %}
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
- {% else %}
20
+ {%- else -%}
21
21
  {{- params.legend | safe -}}
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 %}">{{ params.description | safe }}</div>
25
- {% endif %}
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
- {% endif %}
30
- {% endset %}
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
- {% else %}
37
- {{ fieldset | safe }}
38
- {% endif %}
38
+ {%- else -%}
39
+ {{- fieldset | safe -}}
40
+ {%- endif %}
39
41
  {% endmacro %}
package/components/footer/_footer.scss CHANGED
@@ -26,8 +26,8 @@
26
26
  }
27
27
 
28
28
  .ons-svg-logo,
29
- .ons-svg-logo--accent {
30
- fill: $color-black;
29
+ .ons-svg-logo__group {
30
+ fill: $color-black !important;
31
31
  }
32
32
 
33
33
  &__body {
package/components/footer/_macro.njk CHANGED
@@ -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>
package/components/header/_header.scss CHANGED
@@ -30,7 +30,7 @@
30
30
  height: 46px;
31
31
  }
32
32
  }
33
- &__grid-top-nisra {
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
- fill: $color-white;
123
- &--accent {
124
- fill: $color-ons-logo-secondary;
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
- fill: $color-ons-logo-primary;
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
- fill: $color-black !important;
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
 
package/components/header/_macro.njk CHANGED
@@ -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 {{ 'ons-header__grid-top-' + params.customHeaderLogo if params.customHeaderLogo }}">
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
- {% if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif %}
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
- {% if params.logoHref is defined and params.logoHref %}</a>{% endif %}
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 navigation") ,
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"