@ons/design-system 52.0.0 → 53.0.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 +75 -33
- package/components/button/_macro.njk +1 -1
- package/components/button/_macro.spec.js +2 -2
- package/components/external-link/_macro.njk +5 -2
- package/components/external-link/_macro.spec.js +18 -1
- package/components/footer/_footer.scss +19 -4
- package/components/footer/_macro.njk +108 -98
- package/components/footer/_macro.spec.js +131 -2
- package/components/header/_header.scss +65 -46
- package/components/header/_macro.njk +172 -120
- package/components/header/_macro.spec.js +85 -29
- package/components/hero/_hero.scss +30 -140
- package/components/hero/_macro.njk +13 -20
- package/components/hero/_macro.spec.js +32 -29
- package/components/icons/_macro.njk +257 -29
- package/components/icons/_macro.spec.js +6 -6
- package/components/input/_input.scss +8 -0
- package/components/language-selector/_macro.njk +1 -1
- package/components/language-selector/_macro.spec.js +9 -1
- package/components/navigation/_macro.njk +42 -35
- package/components/navigation/_macro.spec.js +34 -32
- package/components/navigation/_navigation.scss +20 -4
- package/components/related-content/_macro.njk +13 -21
- package/components/related-content/_macro.spec.js +18 -27
- package/components/related-content/_section-macro.njk +10 -0
- package/components/related-content/_section-macro.spec.js +43 -0
- package/components/share-page/_macro.njk +4 -2
- package/css/census.css +3 -1
- package/css/ids.css +2 -0
- package/css/main.css +1 -1
- package/img/dummy-brand-logo.svg +1 -0
- package/layout/_template.njk +9 -4
- package/package.json +1 -1
- package/scripts/main.es5.js +2 -2
- package/scss/ids.scss +2 -0
- package/scss/settings/_census.scss +141 -0
- package/scss/settings/_ids.scss +48 -0
- package/scss/utilities/_margin.scss +1 -0
- package/scss/vars/_colors.scss +5 -2
|
@@ -11,145 +11,179 @@
|
|
|
11
11
|
{% set currentLanguageISOCode = currentLanguage.ISOCode %}
|
|
12
12
|
{% endif %}
|
|
13
13
|
|
|
14
|
-
<header class="ons-header {% if params.variants is not string %}{% for variant in params.variants %} ons-header--{{ variant }}{% endfor %}{% else %} ons-header--{{ params.variants }}{% endif %}" role="banner">
|
|
14
|
+
<header class="ons-header {% if params.classes is defined and params.classes %} {{ params.classes }}{% endif %}{% if params.variants is not string %}{% for variant in params.variants %} ons-header--{{ variant }}{% endfor %}{% else %} ons-header--{{ params.variants }}{% endif %}" role="banner">
|
|
15
15
|
{% if params.phase is defined and params.phase %}
|
|
16
16
|
{% from "components/phase-banner/_macro.njk" import onsPhaseBanner %}
|
|
17
17
|
{{ onsPhaseBanner(params.phase) }}
|
|
18
18
|
{% endif %}
|
|
19
|
-
|
|
20
|
-
<div class="ons-
|
|
21
|
-
<div class="ons-
|
|
22
|
-
<div class="ons-
|
|
23
|
-
<div class="ons-
|
|
24
|
-
{%-if params.
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
{% if params.language is defined and params.language %}
|
|
47
|
-
<div class="ons-grid__col ons-col-auto {{ ' ons-u-mr-s ons-u-d-no@xxs@xs' if params.serviceLinks is defined and params.serviceLinks else '' }}">
|
|
48
|
-
{% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
|
|
49
|
-
{{ onsLanguageSelector(params.language) }}
|
|
50
|
-
</div>
|
|
19
|
+
{% if params.noMasthead != true %}
|
|
20
|
+
<div class="ons-header__top">
|
|
21
|
+
<div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
|
|
22
|
+
<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 }}">
|
|
23
|
+
<div class="ons-grid__col ons-col-auto">
|
|
24
|
+
{%-if params.orgLogoHref is defined and params.orgLogoHref %}
|
|
25
|
+
<a class="ons-header__org-logo-link" href="{{ params.orgLogoHref }}">
|
|
26
|
+
{% endif -%}
|
|
27
|
+
<div class="ons-header__org-logo ons-header__org-logo--large">
|
|
28
|
+
|
|
29
|
+
{{
|
|
30
|
+
onsIcon({
|
|
31
|
+
"iconType": params.orgLogo | default('ons-logo-' + currentLanguageISOCode),
|
|
32
|
+
"altText": params.orgLogoAlt | default('Office for National Statistics logo')
|
|
33
|
+
})
|
|
34
|
+
}}
|
|
35
|
+
</div>
|
|
36
|
+
<div class="ons-header__org-logo ons-header__org-logo--small">
|
|
37
|
+
{{
|
|
38
|
+
onsIcon({
|
|
39
|
+
"iconType": params.orgMobileLogo | default('ons-logo-stacked-' + currentLanguageISOCode),
|
|
40
|
+
"altText": params.orgLogoAlt | default('Office for National Statistics logo')
|
|
41
|
+
})
|
|
42
|
+
}}
|
|
43
|
+
</div>
|
|
44
|
+
{% if params.orgLogoHref is defined and params.orgLogoHref %}
|
|
45
|
+
</a>
|
|
51
46
|
{% endif %}
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
{% set controlVisibility = false %}
|
|
47
|
+
</div>
|
|
48
|
+
{% if params.language is defined and params.language or params.serviceLinks is defined and params.serviceLinks %}
|
|
49
|
+
<div class="ons-header__links ons-grid__col ons-col-auto">
|
|
50
|
+
{% if params.language is defined and params.language %}
|
|
51
|
+
<div class="ons-grid__col ons-col-auto {{ ' ons-u-mr-s ons-u-d-no@xxs@xs' if params.serviceLinks is defined and params.serviceLinks else '' }}">
|
|
52
|
+
{% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
|
|
53
|
+
{{ onsLanguageSelector(params.language) }}
|
|
54
|
+
</div>
|
|
61
55
|
{% endif %}
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
class="ons-header-service-nav__link"
|
|
70
|
-
{% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
|
|
71
|
-
>{{ item.title }}</a>
|
|
72
|
-
</li>
|
|
73
|
-
{% endfor %}
|
|
74
|
-
</ul>
|
|
75
|
-
</nav>
|
|
76
|
-
</div>
|
|
77
|
-
{% if params.serviceLinks.itemsList | length > 1 or params.language is defined and params.language %}
|
|
78
|
-
{% if params.variants == 'internal' %}
|
|
79
|
-
{% set buttonVariant = ["text-link", "text-link-inverse"] %}
|
|
56
|
+
{% if params.serviceLinks is defined and params.serviceLinks %}
|
|
57
|
+
{% if params.serviceLinks.itemsList | length == 1 and params.language is defined and params.language %}
|
|
58
|
+
{% set breakpoint = 'xs' %}
|
|
59
|
+
{% set controlVisibility = true %}
|
|
60
|
+
{% elif params.serviceLinks.itemsList | length > 1 %}
|
|
61
|
+
{% set breakpoint = 'm' %}
|
|
62
|
+
{% set controlVisibility = true %}
|
|
80
63
|
{% else %}
|
|
81
|
-
{% set
|
|
64
|
+
{% set controlVisibility = false %}
|
|
82
65
|
{% endif %}
|
|
83
|
-
<div class="ons-grid__col ons-col-auto ons-u-d-no@{{ breakpoint }}">
|
|
84
|
-
{{
|
|
85
|
-
"
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
66
|
+
<div class="ons-grid__col ons-col-auto{% if controlVisibility == true %} ons-u-d-no@xxs@{{ breakpoint }}{% endif %}">
|
|
67
|
+
<nav class="ons-header-service-nav ons-header-service-nav--main {{ params.serviceLinks.classes }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
|
|
68
|
+
<ul class="ons-header-service-nav__list" aria-label="{{ params.serviceLinks.ariaListLabel | default("Service Links") }}">
|
|
69
|
+
{% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}
|
|
70
|
+
<li class="ons-header-service-nav__item">
|
|
71
|
+
<a
|
|
72
|
+
href="{{ item.url }}"
|
|
73
|
+
class="ons-header-service-nav__link"
|
|
74
|
+
{% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
|
|
75
|
+
>{{ item.title }}</a>
|
|
76
|
+
</li>
|
|
77
|
+
{% endfor %}
|
|
78
|
+
</ul>
|
|
79
|
+
</nav>
|
|
97
80
|
</div>
|
|
81
|
+
{% if params.serviceLinks.itemsList | length > 1 or params.language is defined and params.language %}
|
|
82
|
+
{% if params.variants == 'internal' or params.variants == 'neutral' %}
|
|
83
|
+
{% set buttonVariant = ["text-link", "text-link-inverse"] %}
|
|
84
|
+
{% else %}
|
|
85
|
+
{% set buttonVariant = "text-link" %}
|
|
86
|
+
{% endif %}
|
|
87
|
+
<div class="ons-grid__col ons-col-auto ons-u-d-no@{{ breakpoint }}">
|
|
88
|
+
{{ onsButton({
|
|
89
|
+
"text": params.serviceLinks.toggleServicesButton.text | default("Account"),
|
|
90
|
+
"classes": "ons-u-d-no ons-js-toggle-services",
|
|
91
|
+
"type": "button",
|
|
92
|
+
"buttonStyle": "mobile",
|
|
93
|
+
"variants": buttonVariant,
|
|
94
|
+
"attributes": {
|
|
95
|
+
"aria-label": params.serviceLinks.toggleServicesButton.ariaLabel | default("Toggle menu"),
|
|
96
|
+
"aria-controls": params.serviceLinks.id,
|
|
97
|
+
"aria-haspopup": "true",
|
|
98
|
+
"aria-expanded": "false"
|
|
99
|
+
}
|
|
100
|
+
}) }}
|
|
101
|
+
</div>
|
|
102
|
+
{% endif %}
|
|
98
103
|
{% endif %}
|
|
99
|
-
{% endif %}
|
|
100
|
-
</div>
|
|
101
|
-
{% endif %}
|
|
102
|
-
</div>
|
|
103
|
-
</div>
|
|
104
|
-
{% if params.serviceLinks is defined and params.serviceLinks %}
|
|
105
|
-
<nav class="ons-header-service-nav ons-header-service-nav--mobile ons-u-d-no ons-js-services-mobile-nav" id="{{ params.serviceLinks.id }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
|
|
106
|
-
<ul class="ons-header-service-nav__list" aria-label="{{ params.serviceLinks.ariaListLabel | default("Service Links") }}">
|
|
107
|
-
{% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}
|
|
108
|
-
<li class="ons-header-service-nav__item ons-header-service-nav__item--mobile">
|
|
109
|
-
<a
|
|
110
|
-
href="{{ item.url }}"
|
|
111
|
-
class="ons-header-service-nav__link"
|
|
112
|
-
{% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
|
|
113
|
-
>{{ item.title }}</a>
|
|
114
|
-
</li>
|
|
115
|
-
{% endfor %}
|
|
116
|
-
{% if params.language is defined and params.language %}
|
|
117
|
-
<div class="ons-u-d-no@xs">
|
|
118
|
-
{% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
|
|
119
|
-
{{ onsLanguageSelector(params.language) }}
|
|
120
104
|
</div>
|
|
121
105
|
{% endif %}
|
|
122
|
-
</
|
|
123
|
-
</
|
|
124
|
-
|
|
125
|
-
|
|
106
|
+
</div>
|
|
107
|
+
</div>
|
|
108
|
+
{% if params.serviceLinks is defined and params.serviceLinks %}
|
|
109
|
+
<nav class="ons-header-service-nav ons-header-service-nav--mobile ons-u-d-no ons-js-services-mobile-nav" id="{{ params.serviceLinks.id }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
|
|
110
|
+
<ul class="ons-header-service-nav__list" aria-label="{{ params.serviceLinks.ariaListLabel | default("Service Links") }}">
|
|
111
|
+
{% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}
|
|
112
|
+
<li class="ons-header-service-nav__item ons-header-service-nav__item--mobile">
|
|
113
|
+
<a
|
|
114
|
+
href="{{ item.url }}"
|
|
115
|
+
class="ons-header-service-nav__link"
|
|
116
|
+
{% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
|
|
117
|
+
>{{ item.title }}</a>
|
|
118
|
+
</li>
|
|
119
|
+
{% endfor %}
|
|
120
|
+
{% if params.language is defined and params.language %}
|
|
121
|
+
<div class="ons-u-d-no@xs">
|
|
122
|
+
{% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
|
|
123
|
+
{{ onsLanguageSelector(params.language) }}
|
|
124
|
+
</div>
|
|
125
|
+
{% endif %}
|
|
126
|
+
</ul>
|
|
127
|
+
</nav>
|
|
128
|
+
{% endif %}
|
|
129
|
+
</div>
|
|
130
|
+
{% endif %}
|
|
126
131
|
<div class="ons-header__main">
|
|
127
132
|
<div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
|
|
128
133
|
<div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
|
|
129
|
-
<div class="ons-grid__col ons-col-auto ons-u-flex-shrink
|
|
130
|
-
{% if params.titleLogoHref is defined and params.titleLogoHref %}<a class="ons-header__title-link" href="{{ params.titleLogoHref }}">{% endif %}
|
|
134
|
+
<div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
|
|
131
135
|
{% if params.titleLogo is defined and params.titleLogo and params.titleLogoAlt is defined and params.titleLogoAlt %}
|
|
132
|
-
{%
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
136
|
+
{% if params.titleLogoHref is defined and params.titleLogoHref %}
|
|
137
|
+
<a class="ons-header__title-logo-link" href="{{ params.titleLogoHref }}">
|
|
138
|
+
{% endif %}
|
|
139
|
+
<div class="ons-header__title-logo ons-header__title-logo--large {% if params.titleLogoClasses %} {{ params.titleLogoClasses }} {% endif %}{% if params.titleLogoMobile is defined and params.titleLogoMobile %}ons-u-d-no@xxs@s{% endif %}">
|
|
140
|
+
{% from "components/icons/_macro.njk" import onsIcon %}
|
|
141
|
+
{{
|
|
142
|
+
onsIcon({
|
|
143
|
+
"iconType": params.titleLogo,
|
|
144
|
+
"altText": params.titleLogoAlt
|
|
145
|
+
})
|
|
146
|
+
}}
|
|
147
|
+
</div>
|
|
148
|
+
{% if params.titleLogoMobile is defined and params.titleLogoMobile %}
|
|
149
|
+
<div class="ons-header__title-logo ons-header__title-logo--mobile ons-u-d-no@s{% if params.titleLogoMobileClasses %} {{ params.titleLogoMobileClasses }}{% endif %}">
|
|
150
|
+
{% from "components/icons/_macro.njk" import onsIcon %}
|
|
151
|
+
{{
|
|
152
|
+
onsIcon({
|
|
153
|
+
"iconType": params.titleLogoMobile,
|
|
154
|
+
"altText": params.titleLogoAlt
|
|
155
|
+
})
|
|
156
|
+
}}
|
|
157
|
+
</div>
|
|
158
|
+
{% endif %}
|
|
159
|
+
{% if params.titleLogoHref is defined and params.titleLogoHref %}
|
|
160
|
+
</a>
|
|
161
|
+
{% endif %}
|
|
139
162
|
{% else %}
|
|
140
|
-
|
|
163
|
+
{% if params.titleLogoHref is defined and params.titleLogoHref %}
|
|
164
|
+
<a class="ons-header__title-link" href="{{ params.titleLogoHref }}">
|
|
165
|
+
{% endif %}
|
|
166
|
+
<{{ title_tag }} class="ons-header__title">{{ params.title }}</{{ title_tag }}>
|
|
167
|
+
{% if params.titleLogoHref is defined and params.titleLogoHref %}
|
|
168
|
+
</a>
|
|
169
|
+
{% endif %}
|
|
141
170
|
{% endif %}
|
|
142
|
-
{% if params.titleLogoHref is defined and params.titleLogoHref %}</a>{% endif %}
|
|
143
171
|
{% if params.description is defined and params.description %}
|
|
144
172
|
<p class="ons-header__description">{{ params.description }}</p>
|
|
145
173
|
{% endif %}
|
|
146
174
|
</div>
|
|
175
|
+
|
|
147
176
|
{% if params.button is defined and params.button %}
|
|
177
|
+
{% if params.variants == 'neutral' %}
|
|
178
|
+
{% set buttonVariant = ["ghost", "ghost-dark"] %}
|
|
179
|
+
{% else %}
|
|
180
|
+
{% set buttonVariant = "ghost" %}
|
|
181
|
+
{% endif %}
|
|
148
182
|
<div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink">
|
|
149
183
|
{{ onsButton({
|
|
150
184
|
"text": params.button.text,
|
|
151
|
-
"classes": "ons-u-d-no@xxs@m",
|
|
152
|
-
"variants":
|
|
185
|
+
"classes": "ons-u-d-no@xxs@l" if params.navigation else "ons-u-d-no@xxs@m",
|
|
186
|
+
"variants": buttonVariant,
|
|
153
187
|
"name": params.button.name,
|
|
154
188
|
"attributes": params.button.attributes,
|
|
155
189
|
"url": params.button.url,
|
|
@@ -159,13 +193,26 @@
|
|
|
159
193
|
</div>
|
|
160
194
|
{% endif %}
|
|
161
195
|
{% if params.navigation is defined %}
|
|
162
|
-
<div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink
|
|
163
|
-
{% if
|
|
164
|
-
|
|
196
|
+
<div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink">
|
|
197
|
+
{% if params.noMasthead == true %}
|
|
198
|
+
{% if params.language is defined and params.language %}
|
|
199
|
+
<div class="ons-grid__col ons-col-auto ons-u-mt-xxs@xxs@l ons-u-mr-xs@xxs@s {% if params.navigation.siteSearchAutosuggest %}ons-header__lang-adjustment{% endif %}">
|
|
200
|
+
{% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
|
|
201
|
+
{{ onsLanguageSelector(params.language) }}
|
|
202
|
+
</div>
|
|
203
|
+
{% endif %}
|
|
204
|
+
{% endif %}
|
|
205
|
+
{% if params.navigation.siteSearchAutosuggest %}
|
|
206
|
+
{% if params.variants == 'neutral' %}
|
|
207
|
+
{% set buttonVariant = ["small", "ghost", "ghost-dark"] %}
|
|
208
|
+
{% else %}
|
|
209
|
+
{% set buttonVariant = ["small", "ghost"] %}
|
|
210
|
+
{% endif %}
|
|
211
|
+
<span class="ons-grid ons-u-d-no@xxs@xs ons-u-ml-no ons-u-d-no@l">
|
|
165
212
|
{{ onsButton({
|
|
166
213
|
"text": "Search",
|
|
167
214
|
"classes": "ons-btn--search ons-u-ml-xs ons-u-d-no ons-js-toggle-search",
|
|
168
|
-
"variants":
|
|
215
|
+
"variants": buttonVariant,
|
|
169
216
|
"iconType": "search",
|
|
170
217
|
"iconPosition": "only",
|
|
171
218
|
"attributes": {
|
|
@@ -178,11 +225,16 @@
|
|
|
178
225
|
</span>
|
|
179
226
|
{% endif %}
|
|
180
227
|
{% if params.navigation.toggleNavigationButton is defined and params.navigation.toggleNavigationButton %}
|
|
228
|
+
{% if params.variants == 'neutral' %}
|
|
229
|
+
{% set buttonVariant = ["mobile", "ghost-dark"] %}
|
|
230
|
+
{% else %}
|
|
231
|
+
{% set buttonVariant = ["mobile", "ghost"] %}
|
|
232
|
+
{% endif %}
|
|
181
233
|
{{ onsButton({
|
|
182
234
|
"text": params.navigation.toggleNavigationButton.text,
|
|
183
|
-
"classes": "ons-u-ml-xs ons-u-d-no ons-js-navigation-button",
|
|
235
|
+
"classes": "ons-u-ml-xs ons-u-d-no ons-js-navigation-button ons-u-d-no@l",
|
|
184
236
|
"buttonStyle": "mobile",
|
|
185
|
-
"variants":
|
|
237
|
+
"variants": buttonVariant,
|
|
186
238
|
"attributes": {
|
|
187
239
|
"aria-label": params.navigation.toggleNavigationButton.ariaLabel | default("Toggle main menu") ,
|
|
188
240
|
"aria-controls": params.navigation.id,
|
|
@@ -197,7 +249,7 @@
|
|
|
197
249
|
</div>
|
|
198
250
|
</div>
|
|
199
251
|
{% if params.navigation is defined and params.navigation %}
|
|
200
|
-
{{ onsNavigation(params
|
|
252
|
+
{{ onsNavigation(params) }}
|
|
201
253
|
{% endif %}
|
|
202
254
|
</header>
|
|
203
255
|
{% endmacro %}
|
|
@@ -121,6 +121,18 @@ describe('macro: header', () => {
|
|
|
121
121
|
expect($('.ons-header--variant-b').length).toBe(1);
|
|
122
122
|
});
|
|
123
123
|
|
|
124
|
+
it('has additionally provided `classes`', () => {
|
|
125
|
+
const $ = cheerio.load(
|
|
126
|
+
renderComponent('header', {
|
|
127
|
+
...EXAMPLE_HEADER_BASIC,
|
|
128
|
+
classes: 'extra-class another-extra-class',
|
|
129
|
+
}),
|
|
130
|
+
);
|
|
131
|
+
|
|
132
|
+
expect($('.ons-header').hasClass('extra-class')).toBe(true);
|
|
133
|
+
expect($('.ons-header').hasClass('another-extra-class')).toBe(true);
|
|
134
|
+
});
|
|
135
|
+
|
|
124
136
|
it('has the correct container if `fullWidth`', () => {
|
|
125
137
|
const $ = cheerio.load(renderComponent('header', { ...EXAMPLE_HEADER_BASIC, fullWidth: true }));
|
|
126
138
|
|
|
@@ -134,9 +146,9 @@ describe('macro: header', () => {
|
|
|
134
146
|
});
|
|
135
147
|
|
|
136
148
|
it('has the correct masthead logo link', () => {
|
|
137
|
-
const $ = cheerio.load(renderComponent('header', { ...EXAMPLE_HEADER_BASIC,
|
|
149
|
+
const $ = cheerio.load(renderComponent('header', { ...EXAMPLE_HEADER_BASIC, orgLogoHref: '#0' }));
|
|
138
150
|
|
|
139
|
-
expect($('.ons-
|
|
151
|
+
expect($('.ons-header__org-logo-link').attr('href')).toBe('#0');
|
|
140
152
|
});
|
|
141
153
|
|
|
142
154
|
it('has the default masthead logo icon', () => {
|
|
@@ -152,7 +164,7 @@ describe('macro: header', () => {
|
|
|
152
164
|
const faker = templateFaker();
|
|
153
165
|
const iconsSpy = faker.spy('icons');
|
|
154
166
|
|
|
155
|
-
faker.renderComponent('header', { ...EXAMPLE_HEADER_BASIC,
|
|
167
|
+
faker.renderComponent('header', { ...EXAMPLE_HEADER_BASIC, orgLogo: 'another-logo' });
|
|
156
168
|
|
|
157
169
|
expect(iconsSpy.occurrences[0].iconType).toBe('another-logo');
|
|
158
170
|
});
|
|
@@ -170,7 +182,7 @@ describe('macro: header', () => {
|
|
|
170
182
|
const faker = templateFaker();
|
|
171
183
|
const iconsSpy = faker.spy('icons');
|
|
172
184
|
|
|
173
|
-
faker.renderComponent('header', { ...EXAMPLE_HEADER_BASIC,
|
|
185
|
+
faker.renderComponent('header', { ...EXAMPLE_HEADER_BASIC, orgLogoAlt: 'Custom alt text' });
|
|
174
186
|
|
|
175
187
|
expect(iconsSpy.occurrences[0].altText).toBe('Custom alt text');
|
|
176
188
|
});
|
|
@@ -188,7 +200,7 @@ describe('macro: header', () => {
|
|
|
188
200
|
const faker = templateFaker();
|
|
189
201
|
const iconsSpy = faker.spy('icons');
|
|
190
202
|
|
|
191
|
-
faker.renderComponent('header', { ...EXAMPLE_HEADER_BASIC,
|
|
203
|
+
faker.renderComponent('header', { ...EXAMPLE_HEADER_BASIC, orgMobileLogo: 'another-mobile-logo' });
|
|
192
204
|
|
|
193
205
|
expect(iconsSpy.occurrences[1].iconType).toBe('another-mobile-logo');
|
|
194
206
|
});
|
|
@@ -206,7 +218,7 @@ describe('macro: header', () => {
|
|
|
206
218
|
const faker = templateFaker();
|
|
207
219
|
const iconsSpy = faker.spy('icons');
|
|
208
220
|
|
|
209
|
-
faker.renderComponent('header', { ...EXAMPLE_HEADER_BASIC,
|
|
221
|
+
faker.renderComponent('header', { ...EXAMPLE_HEADER_BASIC, orgLogoAlt: 'Custom alt text' });
|
|
210
222
|
|
|
211
223
|
expect(iconsSpy.occurrences[1].altText).toBe('Custom alt text');
|
|
212
224
|
});
|
|
@@ -244,12 +256,45 @@ describe('macro: header', () => {
|
|
|
244
256
|
expect(iconsSpy.occurrences[2].iconType).toBe('custom-title-logo');
|
|
245
257
|
});
|
|
246
258
|
|
|
247
|
-
it('has the
|
|
259
|
+
it('has the provided title logo classes', () => {
|
|
260
|
+
const $ = cheerio.load(
|
|
261
|
+
renderComponent('header', {
|
|
262
|
+
...EXAMPLE_HEADER_BASIC,
|
|
263
|
+
titleLogo: 'custom-title-logo',
|
|
264
|
+
titleLogoClasses: 'custom-class',
|
|
265
|
+
titleLogoAlt: 'custom logo alt',
|
|
266
|
+
}),
|
|
267
|
+
);
|
|
268
|
+
|
|
269
|
+
expect($('.ons-header__title-logo--large').hasClass('custom-class')).toBe(true);
|
|
270
|
+
});
|
|
271
|
+
|
|
272
|
+
it('has the provided title logo mobile icon', () => {
|
|
273
|
+
const faker = templateFaker();
|
|
274
|
+
const iconsSpy = faker.spy('icons');
|
|
275
|
+
|
|
276
|
+
faker.renderComponent('header', {
|
|
277
|
+
...EXAMPLE_HEADER_BASIC,
|
|
278
|
+
titleLogo: 'custom-title-logo',
|
|
279
|
+
titleLogoMobile: 'custom-title-mobile-logo',
|
|
280
|
+
titleLogoAlt: 'custom logo alt',
|
|
281
|
+
});
|
|
282
|
+
|
|
283
|
+
expect(iconsSpy.occurrences[3].iconType).toBe('custom-title-mobile-logo');
|
|
284
|
+
});
|
|
285
|
+
|
|
286
|
+
it('has the provided title logo mobile classes', () => {
|
|
248
287
|
const $ = cheerio.load(
|
|
249
|
-
renderComponent('header', {
|
|
288
|
+
renderComponent('header', {
|
|
289
|
+
...EXAMPLE_HEADER_BASIC,
|
|
290
|
+
titleLogo: 'custom-title-logo',
|
|
291
|
+
titleLogoMobile: 'custom-title-mobile-logo',
|
|
292
|
+
titleLogoMobileClasses: 'custom-mobile-class',
|
|
293
|
+
titleLogoAlt: 'custom logo alt',
|
|
294
|
+
}),
|
|
250
295
|
);
|
|
251
296
|
|
|
252
|
-
expect($('.ons-header__title-
|
|
297
|
+
expect($('.ons-header__title-logo--mobile').hasClass('custom-mobile-class')).toBe(true);
|
|
253
298
|
});
|
|
254
299
|
|
|
255
300
|
it('displays the `description` text', () => {
|
|
@@ -475,24 +520,27 @@ describe('macro: header', () => {
|
|
|
475
520
|
|
|
476
521
|
faker.renderComponent('header', { ...EXAMPLE_HEADER_BASIC, ...EXAMPLE_HEADER_NAVIGATION_CONFIG });
|
|
477
522
|
|
|
478
|
-
expect(navigationSpy.occurrences).
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
523
|
+
expect(navigationSpy.occurrences[0]).toEqual({
|
|
524
|
+
navigation: {
|
|
525
|
+
id: 'main-nav',
|
|
526
|
+
ariaLabel: 'Main menu',
|
|
527
|
+
currentPath: '#home',
|
|
528
|
+
itemsList: [
|
|
529
|
+
{
|
|
530
|
+
title: 'Home',
|
|
531
|
+
url: '#home',
|
|
532
|
+
},
|
|
533
|
+
{
|
|
534
|
+
title: 'Guidance',
|
|
535
|
+
url: '#0',
|
|
536
|
+
},
|
|
537
|
+
],
|
|
538
|
+
toggleNavigationButton: {
|
|
539
|
+
text: 'Menu',
|
|
540
|
+
ariaLabel: 'Toggle main menu',
|
|
490
541
|
},
|
|
491
|
-
],
|
|
492
|
-
toggleNavigationButton: {
|
|
493
|
-
text: 'Menu',
|
|
494
|
-
ariaLabel: 'Toggle main menu',
|
|
495
542
|
},
|
|
543
|
+
title: 'Header title',
|
|
496
544
|
});
|
|
497
545
|
});
|
|
498
546
|
|
|
@@ -502,9 +550,9 @@ describe('macro: header', () => {
|
|
|
502
550
|
|
|
503
551
|
faker.renderComponent('header', { ...EXAMPLE_HEADER_BASIC, ...EXAMPLE_HEADER_NAVIGATION_CONFIG });
|
|
504
552
|
|
|
505
|
-
expect(buttonSpy.occurrences).
|
|
553
|
+
expect(buttonSpy.occurrences[0]).toEqual({
|
|
506
554
|
text: 'Menu',
|
|
507
|
-
classes: 'ons-u-ml-xs ons-u-d-no ons-js-navigation-button',
|
|
555
|
+
classes: 'ons-u-ml-xs ons-u-d-no ons-js-navigation-button ons-u-d-no@l',
|
|
508
556
|
buttonStyle: 'mobile',
|
|
509
557
|
variants: ['mobile', 'ghost'],
|
|
510
558
|
attributes: {
|
|
@@ -544,10 +592,10 @@ describe('macro: header', () => {
|
|
|
544
592
|
},
|
|
545
593
|
});
|
|
546
594
|
|
|
547
|
-
expect(buttonSpy.occurrences).
|
|
595
|
+
expect(buttonSpy.occurrences[0]).toEqual({
|
|
548
596
|
text: 'Search',
|
|
549
597
|
classes: 'ons-btn--search ons-u-ml-xs ons-u-d-no ons-js-toggle-search',
|
|
550
|
-
variants: ['
|
|
598
|
+
variants: ['small', 'ghost'],
|
|
551
599
|
iconType: 'search',
|
|
552
600
|
iconPosition: 'only',
|
|
553
601
|
attributes: {
|
|
@@ -559,4 +607,12 @@ describe('macro: header', () => {
|
|
|
559
607
|
});
|
|
560
608
|
});
|
|
561
609
|
});
|
|
610
|
+
|
|
611
|
+
describe('mode: without masthead', () => {
|
|
612
|
+
it('does not render the masthead', () => {
|
|
613
|
+
const $ = cheerio.load(renderComponent('header', { ...EXAMPLE_HEADER_BASIC, ...EXAMPLE_HEADER_LANGUAGE_CONFIG, noMasthead: true }));
|
|
614
|
+
|
|
615
|
+
expect($('.ons-header__top').length).toBe(0);
|
|
616
|
+
});
|
|
617
|
+
});
|
|
562
618
|
});
|