@ons/design-system 72.2.1 → 72.3.0
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 +79 -1
- package/components/footer/_macro.njk +1 -1
- package/components/header/_header.scss +42 -0
- package/components/header/_macro.njk +95 -0
- package/components/header/example-header-basic.njk +152 -1
- package/components/hero/_hero.scss +91 -0
- package/components/hero/_macro.njk +7 -1
- package/components/hero/_macro.spec.js +5 -0
- package/components/hero/example-hero-pale-blue.njk +24 -0
- package/css/main.css +1 -1
- package/package.json +1 -1
- package/scss/vars/_colors.scss +3 -0
|
@@ -431,7 +431,8 @@ $button-shadow-size: 3px;
|
|
|
431
431
|
}
|
|
432
432
|
|
|
433
433
|
&--mobile[aria-expanded='true'],
|
|
434
|
-
&--text-link[aria-expanded='true']
|
|
434
|
+
&--text-link[aria-expanded='true'],
|
|
435
|
+
&--menu[aria-expanded='true'] {
|
|
435
436
|
.ons-icon {
|
|
436
437
|
transform: rotate(270deg);
|
|
437
438
|
}
|
|
@@ -551,6 +552,83 @@ $button-shadow-size: 3px;
|
|
|
551
552
|
}
|
|
552
553
|
}
|
|
553
554
|
}
|
|
555
|
+
|
|
556
|
+
&--menu {
|
|
557
|
+
align-items: center;
|
|
558
|
+
display: flex;
|
|
559
|
+
padding: 1.5rem;
|
|
560
|
+
border-bottom: 4px solid rgb(0 0 0 / 0%);
|
|
561
|
+
.ons-icon {
|
|
562
|
+
transform: rotate(90deg);
|
|
563
|
+
}
|
|
564
|
+
}
|
|
565
|
+
|
|
566
|
+
&--menu & {
|
|
567
|
+
&__inner {
|
|
568
|
+
background: rgb(0 0 0 / 0%);
|
|
569
|
+
box-shadow: none;
|
|
570
|
+
color: var(--ons-color-text-link);
|
|
571
|
+
padding: 0;
|
|
572
|
+
.ons-icon {
|
|
573
|
+
fill: var(--ons-color-text-link);
|
|
574
|
+
height: 1rem;
|
|
575
|
+
margin-top: 0;
|
|
576
|
+
width: 1rem;
|
|
577
|
+
}
|
|
578
|
+
}
|
|
579
|
+
}
|
|
580
|
+
|
|
581
|
+
&--menu:focus {
|
|
582
|
+
background-color: var(--ons-color-focus);
|
|
583
|
+
border-color: var(--ons-color-black);
|
|
584
|
+
}
|
|
585
|
+
|
|
586
|
+
&--menu:hover {
|
|
587
|
+
border-color: var(--ons-color-text-link-hover);
|
|
588
|
+
}
|
|
589
|
+
|
|
590
|
+
&--menu:focus & {
|
|
591
|
+
&__inner {
|
|
592
|
+
box-shadow: none;
|
|
593
|
+
}
|
|
594
|
+
}
|
|
595
|
+
|
|
596
|
+
&--menu:focus:hover:not(:active, .active) {
|
|
597
|
+
.ons-btn__inner {
|
|
598
|
+
background: none;
|
|
599
|
+
}
|
|
600
|
+
}
|
|
601
|
+
|
|
602
|
+
&--menu:active,
|
|
603
|
+
&--menu[aria-expanded='true'] {
|
|
604
|
+
background-color: var(--ons-color-branded-tint);
|
|
605
|
+
border-color: var(--ons-color-text-link-hover);
|
|
606
|
+
}
|
|
607
|
+
|
|
608
|
+
&--menu:hover &,
|
|
609
|
+
&--menu:active &,
|
|
610
|
+
&--menu.active & {
|
|
611
|
+
&__inner {
|
|
612
|
+
background: none;
|
|
613
|
+
color: var(--ons-color-text-link-hover);
|
|
614
|
+
.ons-icon {
|
|
615
|
+
fill: var(--ons-color-text-link-hover);
|
|
616
|
+
}
|
|
617
|
+
}
|
|
618
|
+
}
|
|
619
|
+
|
|
620
|
+
&--menu:active &,
|
|
621
|
+
&--menu:active:focus &,
|
|
622
|
+
&--menu.active &,
|
|
623
|
+
&--menu.active:focus & {
|
|
624
|
+
&__inner {
|
|
625
|
+
background: none;
|
|
626
|
+
color: var(--ons-color-text-link-hover);
|
|
627
|
+
.ons-icon {
|
|
628
|
+
fill: var(--ons-color-text-link-hover);
|
|
629
|
+
}
|
|
630
|
+
}
|
|
631
|
+
}
|
|
554
632
|
}
|
|
555
633
|
|
|
556
634
|
.ons-search__btn {
|
|
@@ -207,7 +207,7 @@
|
|
|
207
207
|
</div>
|
|
208
208
|
{% if params.copyrightDeclaration %}
|
|
209
209
|
<!-- Copyright -->
|
|
210
|
-
{% set copyrightDeclaration = '© '
|
|
210
|
+
{% set copyrightDeclaration = '© ' ~ params.copyrightDeclaration.copyright ~ '<br /> ' ~ params.copyrightDeclaration.text %}
|
|
211
211
|
<div class="ons-grid ons-grid-flex ons-grid-flex--between">
|
|
212
212
|
<div class="ons-grid__col">
|
|
213
213
|
<p class="ons-u-fs-s ons-u-mb-l ons-footer__copyright">{{- copyrightDeclaration | safe -}}</p>
|
|
@@ -236,6 +236,48 @@
|
|
|
236
236
|
}
|
|
237
237
|
}
|
|
238
238
|
|
|
239
|
+
&--basic & {
|
|
240
|
+
&__grid-top {
|
|
241
|
+
padding: 0;
|
|
242
|
+
}
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
&-nav-menu {
|
|
246
|
+
background-color: var(--ons-color-branded-tint);
|
|
247
|
+
width: 100%;
|
|
248
|
+
|
|
249
|
+
&__key-list {
|
|
250
|
+
border-bottom: 1px solid var(--ons-color-ocean-blue);
|
|
251
|
+
margin-bottom: 1.25rem;
|
|
252
|
+
padding-bottom: 1rem;
|
|
253
|
+
padding-left: 0;
|
|
254
|
+
row-gap: 1rem;
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
&__link,
|
|
258
|
+
&__heading,
|
|
259
|
+
&__text,
|
|
260
|
+
&__description {
|
|
261
|
+
line-height: 1.714 !important;
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
&__groupItem-list:not(:last-of-type) {
|
|
265
|
+
margin-bottom: 2rem !important;
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
.ons-grid {
|
|
269
|
+
margin-left: 0;
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
.ons-grid__col {
|
|
273
|
+
padding-left: 0;
|
|
274
|
+
padding-bottom: 1rem;
|
|
275
|
+
@include mq(m) {
|
|
276
|
+
padding-bottom: 0;
|
|
277
|
+
}
|
|
278
|
+
}
|
|
279
|
+
}
|
|
280
|
+
|
|
239
281
|
.ons-btn {
|
|
240
282
|
top: 0 !important;
|
|
241
283
|
}
|
|
@@ -180,6 +180,29 @@
|
|
|
180
180
|
{% endif %}
|
|
181
181
|
</div>
|
|
182
182
|
{% endif %}
|
|
183
|
+
{% if params.menuLinks %}
|
|
184
|
+
<div class="ons-header__links ons-grid__col ons-u-ml-auto">
|
|
185
|
+
{% if params.menuLinks %}
|
|
186
|
+
<div class="ons-grid__col ons-col-auto">
|
|
187
|
+
{{
|
|
188
|
+
onsButton({
|
|
189
|
+
"text": params.menuLinks.toggleNavButton.text | default("Menu"),
|
|
190
|
+
"classes": "ons-u-fs-s--b ons-js-toggle-services button-nav",
|
|
191
|
+
"type": "button",
|
|
192
|
+
"variants": "menu",
|
|
193
|
+
"iconType": "chevron",
|
|
194
|
+
"iconPosition": "before",
|
|
195
|
+
"attributes": {
|
|
196
|
+
"aria-label": params.menuLinks.toggleNavButton.ariaLabel | default("Toggle menu"),
|
|
197
|
+
"aria-controls": params.menuLinks.id,
|
|
198
|
+
"aria-expanded": "false"
|
|
199
|
+
}
|
|
200
|
+
})
|
|
201
|
+
}}
|
|
202
|
+
</div>
|
|
203
|
+
{% endif %}
|
|
204
|
+
</div>
|
|
205
|
+
{% endif %}
|
|
183
206
|
</div>
|
|
184
207
|
</div>
|
|
185
208
|
{% if params.serviceLinks %}
|
|
@@ -217,6 +240,78 @@
|
|
|
217
240
|
{% endif %}
|
|
218
241
|
</nav>
|
|
219
242
|
{% endif %}
|
|
243
|
+
{% if params.menuLinks %}
|
|
244
|
+
<nav
|
|
245
|
+
class="ons-u-d-no ons-js-services-mobile-nav ons-header-nav-menu ons-u-mb-s ons-u-pt-2xl"
|
|
246
|
+
id="{{ params.menuLinks.id }}"
|
|
247
|
+
aria-label="{{ params.menuLinks.ariaLabel | default("Menu navigation") }}"
|
|
248
|
+
>
|
|
249
|
+
{% if params.menuLinks.keyLinks %}
|
|
250
|
+
<div class="ons-container">
|
|
251
|
+
<ul class="ons-grid ons-header-nav-menu__key-list">
|
|
252
|
+
{% for keyLink in params.menuLinks.keyLinks %}
|
|
253
|
+
{% if keyLink.heading %}
|
|
254
|
+
<li class="ons-grid__col ons-col-4@m">
|
|
255
|
+
<h2 class="ons-u-fs-s--b ons-u-mb-no ons-header-nav-menu__heading">
|
|
256
|
+
{% if keyLink.url %}
|
|
257
|
+
<a href="{{ keyLink.url }}" class="ons-header-nav-menu__link">{{ keyLink.heading }}</a>
|
|
258
|
+
{% else %}
|
|
259
|
+
{{ keyLink.heading }}
|
|
260
|
+
{% endif %}
|
|
261
|
+
</h2>
|
|
262
|
+
{% if keyLink.description %}
|
|
263
|
+
<p class="ons-u-fs-s ons-u-mb-no ons-header-nav-menu__description">
|
|
264
|
+
{{ keyLink.description }}
|
|
265
|
+
</p>
|
|
266
|
+
{% endif %}
|
|
267
|
+
</li>
|
|
268
|
+
{% endif %}
|
|
269
|
+
{% endfor %}
|
|
270
|
+
</ul>
|
|
271
|
+
</div>
|
|
272
|
+
{% endif %}
|
|
273
|
+
{% if params.menuLinks.columns %}
|
|
274
|
+
<div class="ons-container">
|
|
275
|
+
<ul class="ons-grid ons-list ons-list--bare">
|
|
276
|
+
{% for column in params.menuLinks.columns %}
|
|
277
|
+
<li class="ons-grid__col ons-col-4@m ons-u-mb-no">
|
|
278
|
+
{% for group in column.groups %}
|
|
279
|
+
{% if group.heading %}
|
|
280
|
+
<h2 class="ons-u-fs-s--b ons-header-nav-menu__heading">
|
|
281
|
+
{% if group.url %}
|
|
282
|
+
<a href="{{ group.url }}" class="ons-header-nav-menu__link">{{ group.heading }}</a>
|
|
283
|
+
{% else %}
|
|
284
|
+
{{ group.heading }}
|
|
285
|
+
{% endif %}
|
|
286
|
+
</h2>
|
|
287
|
+
{% endif %}
|
|
288
|
+
{% if group.groupItems %}
|
|
289
|
+
<ul class="ons-list ons-list--bare ons-header-nav-menu__groupItem-list">
|
|
290
|
+
{% for groupItem in group.groupItems %}
|
|
291
|
+
{% if groupItem.text %}
|
|
292
|
+
<li class="ons-u-mb-no">
|
|
293
|
+
<p class="ons-u-fs-s ons-header-nav-menu_text">
|
|
294
|
+
{% if groupItem.url %}
|
|
295
|
+
<a href="{{ groupItem.url }}" class="ons-header-nav-menu__link">
|
|
296
|
+
{{ groupItem.text }}
|
|
297
|
+
</a>
|
|
298
|
+
{% else %}
|
|
299
|
+
{{ groupItem.text }}
|
|
300
|
+
{% endif %}
|
|
301
|
+
</p>
|
|
302
|
+
</li>
|
|
303
|
+
{% endif %}
|
|
304
|
+
{% endfor %}
|
|
305
|
+
</ul>
|
|
306
|
+
{% endif %}
|
|
307
|
+
{% endfor %}
|
|
308
|
+
</li>
|
|
309
|
+
{% endfor %}
|
|
310
|
+
</ul>
|
|
311
|
+
</div>
|
|
312
|
+
{% endif %}
|
|
313
|
+
</nav>
|
|
314
|
+
{% endif %}
|
|
220
315
|
</div>
|
|
221
316
|
{% if params.variants != "basic" %}
|
|
222
317
|
<div class="ons-header__main">
|
|
@@ -6,6 +6,157 @@
|
|
|
6
6
|
|
|
7
7
|
{{
|
|
8
8
|
onsHeader({
|
|
9
|
-
"variants": 'basic'
|
|
9
|
+
"variants": 'basic',
|
|
10
|
+
"menuLinks": {
|
|
11
|
+
"keyLinks": [
|
|
12
|
+
{
|
|
13
|
+
'heading': 'Taking part in a survey?',
|
|
14
|
+
'description': 'It’s never been more important.'
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
'heading': 'Release calendar',
|
|
18
|
+
'description': 'View our latest and upcoming releases.'
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
'heading': 'Explore local statistics',
|
|
22
|
+
'url': '#0',
|
|
23
|
+
'description': 'Explore statistics across the UK.'
|
|
24
|
+
}
|
|
25
|
+
],
|
|
26
|
+
"columns": [
|
|
27
|
+
{
|
|
28
|
+
"groups": [
|
|
29
|
+
{
|
|
30
|
+
"heading": "People, population and community",
|
|
31
|
+
"groupItems": [
|
|
32
|
+
{
|
|
33
|
+
"text": "Armed forces community"
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
"text": "Births, deaths and marriages"
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
"text": "Crime and justice"
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
"text": "Cultural identity"
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
"text": "Education and childcare"
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
"text": "Elections"
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
"text": "Health and social care"
|
|
52
|
+
},
|
|
53
|
+
{
|
|
54
|
+
"text": "Household characteristics"
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
"text": "Housing"
|
|
58
|
+
},
|
|
59
|
+
{
|
|
60
|
+
"text": "Leisure and tourism"
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
"text": "Personal and household finances"
|
|
64
|
+
},
|
|
65
|
+
{
|
|
66
|
+
"text": "Population and migration"
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
"text": "Well-being"
|
|
70
|
+
}
|
|
71
|
+
]
|
|
72
|
+
}
|
|
73
|
+
]
|
|
74
|
+
},
|
|
75
|
+
{
|
|
76
|
+
"groups": [
|
|
77
|
+
{
|
|
78
|
+
"heading": "Business, industry and trade",
|
|
79
|
+
"groupItems": [
|
|
80
|
+
{
|
|
81
|
+
"text": "Business"
|
|
82
|
+
},
|
|
83
|
+
{
|
|
84
|
+
"text": "Changes to business"
|
|
85
|
+
},
|
|
86
|
+
{
|
|
87
|
+
"text": "Construction industry"
|
|
88
|
+
},
|
|
89
|
+
{
|
|
90
|
+
"text": "International trade"
|
|
91
|
+
},
|
|
92
|
+
{
|
|
93
|
+
"text": "IT and internet industry"
|
|
94
|
+
},
|
|
95
|
+
{
|
|
96
|
+
"text": "Manufacturing and production industry"
|
|
97
|
+
},
|
|
98
|
+
{
|
|
99
|
+
"text": "Retail industry",
|
|
100
|
+
"url": "#0"
|
|
101
|
+
},
|
|
102
|
+
{
|
|
103
|
+
"text": "Tourism industry"
|
|
104
|
+
}
|
|
105
|
+
]
|
|
106
|
+
},
|
|
107
|
+
{
|
|
108
|
+
"heading": "Employment and labour market",
|
|
109
|
+
"url": "#0",
|
|
110
|
+
"groupItems":
|
|
111
|
+
[
|
|
112
|
+
{
|
|
113
|
+
"text": "People in work"
|
|
114
|
+
},
|
|
115
|
+
{
|
|
116
|
+
"text": "People not in work"
|
|
117
|
+
}
|
|
118
|
+
]
|
|
119
|
+
|
|
120
|
+
}
|
|
121
|
+
]
|
|
122
|
+
},
|
|
123
|
+
{
|
|
124
|
+
"groups": [
|
|
125
|
+
{
|
|
126
|
+
"heading": "Economy",
|
|
127
|
+
"groupItems": [
|
|
128
|
+
{
|
|
129
|
+
"text": "Economic output and productivity"
|
|
130
|
+
},
|
|
131
|
+
{
|
|
132
|
+
"text": "Government, public sector and taxes"
|
|
133
|
+
},
|
|
134
|
+
{
|
|
135
|
+
"text": "Gross Value Added (GVA)"
|
|
136
|
+
},
|
|
137
|
+
{
|
|
138
|
+
"text": "Investments, pensions and trusts"
|
|
139
|
+
},
|
|
140
|
+
{
|
|
141
|
+
"text": "Regional accounts"
|
|
142
|
+
},
|
|
143
|
+
{
|
|
144
|
+
"text": "Environmental accounts"
|
|
145
|
+
},
|
|
146
|
+
{
|
|
147
|
+
"text": "Gross Domestic Product (GDP)"
|
|
148
|
+
},
|
|
149
|
+
{
|
|
150
|
+
"text": "Inflation and price indices"
|
|
151
|
+
},
|
|
152
|
+
{
|
|
153
|
+
"text": "National accounts"
|
|
154
|
+
}
|
|
155
|
+
]
|
|
156
|
+
}
|
|
157
|
+
]
|
|
158
|
+
}
|
|
159
|
+
]
|
|
160
|
+
}
|
|
10
161
|
})
|
|
11
162
|
}}
|
|
@@ -28,6 +28,26 @@
|
|
|
28
28
|
}
|
|
29
29
|
}
|
|
30
30
|
|
|
31
|
+
&--pale-blue {
|
|
32
|
+
background-color: var(--ons-color-soft-blue-grey);
|
|
33
|
+
margin-bottom: 2.5rem;
|
|
34
|
+
&::before {
|
|
35
|
+
background-color: var(--ons-color-pale-blue);
|
|
36
|
+
border-radius: 0 0 50% 50%;
|
|
37
|
+
content: '';
|
|
38
|
+
height: 100%;
|
|
39
|
+
inset: 0;
|
|
40
|
+
left: -40%;
|
|
41
|
+
position: absolute;
|
|
42
|
+
width: 150%;
|
|
43
|
+
@include mq(l) {
|
|
44
|
+
border-radius: 0 0 80% 50%;
|
|
45
|
+
left: -25%;
|
|
46
|
+
width: 130%;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
|
|
31
51
|
&--grey {
|
|
32
52
|
background-color: var(--ons-color-grey-10);
|
|
33
53
|
&::before {
|
|
@@ -329,6 +349,77 @@
|
|
|
329
349
|
}
|
|
330
350
|
}
|
|
331
351
|
|
|
352
|
+
&--pale-blue & {
|
|
353
|
+
&__details {
|
|
354
|
+
padding-bottom: 6rem;
|
|
355
|
+
@include mq(l) {
|
|
356
|
+
padding-bottom: 4rem;
|
|
357
|
+
}
|
|
358
|
+
}
|
|
359
|
+
|
|
360
|
+
&__circle-1 {
|
|
361
|
+
@include mq(l) {
|
|
362
|
+
background-color: var(--ons-color-soft-blue-grey);
|
|
363
|
+
border-radius: 50%;
|
|
364
|
+
height: 440px;
|
|
365
|
+
position: absolute;
|
|
366
|
+
right: 59px;
|
|
367
|
+
top: -339px;
|
|
368
|
+
width: 440px;
|
|
369
|
+
}
|
|
370
|
+
}
|
|
371
|
+
|
|
372
|
+
&__circle-2 {
|
|
373
|
+
background-color: var(--ons-color-light-orange);
|
|
374
|
+
border-radius: 50%;
|
|
375
|
+
bottom: 4%;
|
|
376
|
+
height: 40px;
|
|
377
|
+
position: absolute;
|
|
378
|
+
right: 15%;
|
|
379
|
+
width: 40px;
|
|
380
|
+
@include mq(xl) {
|
|
381
|
+
bottom: 30%;
|
|
382
|
+
height: 72px;
|
|
383
|
+
right: 346px;
|
|
384
|
+
width: 72px;
|
|
385
|
+
}
|
|
386
|
+
@include mq(l, 1299px) {
|
|
387
|
+
bottom: 30%;
|
|
388
|
+
height: 72px;
|
|
389
|
+
right: 25%;
|
|
390
|
+
width: 72px;
|
|
391
|
+
}
|
|
392
|
+
@include mq(m, 979px) {
|
|
393
|
+
bottom: 8%;
|
|
394
|
+
right: 10%;
|
|
395
|
+
}
|
|
396
|
+
}
|
|
397
|
+
|
|
398
|
+
&__circle-3 {
|
|
399
|
+
background-color: var(--ons-color-ocean-blue);
|
|
400
|
+
border-radius: 50%;
|
|
401
|
+
bottom: 7%;
|
|
402
|
+
height: 80px;
|
|
403
|
+
position: absolute;
|
|
404
|
+
right: -26px;
|
|
405
|
+
width: 80px;
|
|
406
|
+
|
|
407
|
+
@include mq(xl) {
|
|
408
|
+
right: 43px;
|
|
409
|
+
}
|
|
410
|
+
|
|
411
|
+
@include mq(l) {
|
|
412
|
+
height: 156px;
|
|
413
|
+
right: 2%;
|
|
414
|
+
width: 156px;
|
|
415
|
+
}
|
|
416
|
+
|
|
417
|
+
@include mq(m) {
|
|
418
|
+
bottom: 9%;
|
|
419
|
+
}
|
|
420
|
+
}
|
|
421
|
+
}
|
|
422
|
+
|
|
332
423
|
&__title-container {
|
|
333
424
|
@include mq(l) {
|
|
334
425
|
display: grid;
|
|
@@ -12,9 +12,15 @@
|
|
|
12
12
|
<div class="ons-hero__circle-{{ i }}"></div>
|
|
13
13
|
{% endfor %}
|
|
14
14
|
</div>
|
|
15
|
+
{% elif params.variants == 'pale-blue' %}
|
|
16
|
+
<div class="ons-hero__circles" aria-hidden="true">
|
|
17
|
+
{% for i in range(1, 4) %}
|
|
18
|
+
<div class="ons-hero__circle-{{ i }}"></div>
|
|
19
|
+
{% endfor %}
|
|
20
|
+
</div>
|
|
15
21
|
{% endif %}
|
|
16
22
|
<div class="ons-hero__container ons-container{{ ' ons-container--wide' if params.wide }}">
|
|
17
|
-
<div class="ons-hero__details ons-grid__col ons-col-{{ detailsColumns }}@m
|
|
23
|
+
<div class="ons-hero__details ons-grid__col ons-col-{{ detailsColumns }}@m col-10@s@m">
|
|
18
24
|
{% if params.breadcrumbs %}
|
|
19
25
|
{% from "components/breadcrumbs/_macro.njk" import onsBreadcrumbs %}
|
|
20
26
|
{{
|
|
@@ -93,6 +93,11 @@ describe('macro: hero', () => {
|
|
|
93
93
|
expect($('.ons-hero--navy-blue .ons-hero__circles').length).toBe(1);
|
|
94
94
|
});
|
|
95
95
|
|
|
96
|
+
it('renders circles when variant is `pale blue`', () => {
|
|
97
|
+
const $ = cheerio.load(renderComponent('hero', { ...EXAMPLE_HERO, variants: 'pale-blue' }));
|
|
98
|
+
expect($('.ons-hero--pale-blue .ons-hero__circles').length).toBe(1);
|
|
99
|
+
});
|
|
100
|
+
|
|
96
101
|
it('outputs the correct topic when set', () => {
|
|
97
102
|
const $ = cheerio.load(renderComponent('hero', { ...EXAMPLE_HERO, topic: 'Topic Text' }));
|
|
98
103
|
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
---
|
|
2
|
+
'fullWidth': true
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
{% from "components/hero/_macro.njk" import onsHero %}
|
|
6
|
+
{{
|
|
7
|
+
onsHero({
|
|
8
|
+
"topic": 'Topic',
|
|
9
|
+
"title": 'Retail Industry',
|
|
10
|
+
"text": 'Sales by retailers in Great Britain directly to end consumers, including spending on goods (in store and online)
|
|
11
|
+
(Retail Sales Index) and spending on services (Index of Services). The industry as a whole is used as an indicator
|
|
12
|
+
of how the wider economy is performing and the strength of consumer spending.',
|
|
13
|
+
"breadcrumbs": {
|
|
14
|
+
"ariaLabel": 'Breadcrumbs',
|
|
15
|
+
"itemsList": [
|
|
16
|
+
{
|
|
17
|
+
"url": '/',
|
|
18
|
+
"text": 'Home'
|
|
19
|
+
}
|
|
20
|
+
]
|
|
21
|
+
},
|
|
22
|
+
"variants": 'pale-blue'
|
|
23
|
+
})
|
|
24
|
+
}}
|