@ons/design-system 72.1.1 → 72.1.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/description-list/_description-list.scss +40 -9
- package/components/description-list/_macro.njk +20 -12
- package/components/description-list/_macro.spec.js +11 -1
- package/components/description-list/example-inline-description-list.njk +58 -0
- package/components/header/_macro.njk +92 -90
- package/components/header/_macro.spec.js +10 -0
- package/components/header/example-header-basic.njk +11 -0
- package/components/hero/_hero.scss +239 -2
- package/components/hero/_macro.njk +7 -0
- package/components/hero/_macro.spec.js +5 -0
- package/components/hero/example-hero-navy-blue.njk +14 -0
- package/components/tabs/_tabs.scss +1 -1
- package/css/main.css +1 -1
- package/package.json +1 -1
- package/scss/vars/_colors.scss +2 -0
|
@@ -7,25 +7,56 @@
|
|
|
7
7
|
clear: both;
|
|
8
8
|
float: left;
|
|
9
9
|
font-weight: $font-weight-bold;
|
|
10
|
-
|
|
11
|
-
&:not(:first-child) {
|
|
12
|
-
margin-top: 0.5rem;
|
|
13
|
-
}
|
|
14
10
|
}
|
|
15
11
|
|
|
16
12
|
&__value {
|
|
17
13
|
float: right;
|
|
18
14
|
margin-left: 0; /* As normalize adds a 40px left margin */
|
|
15
|
+
}
|
|
19
16
|
|
|
20
|
-
|
|
21
|
-
|
|
17
|
+
&__item {
|
|
18
|
+
&:not(:first-child) {
|
|
19
|
+
.ons-description-list__term {
|
|
22
20
|
margin-top: 0.5rem;
|
|
23
21
|
}
|
|
22
|
+
|
|
23
|
+
.ons-description-list__value:nth-of-type(1) {
|
|
24
|
+
@include mq(m) {
|
|
25
|
+
margin-top: 0.5rem;
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.ons-description-list--inline & {
|
|
30
|
+
.ons-description-list__value:nth-of-type(1),
|
|
31
|
+
.ons-description-list__term {
|
|
32
|
+
@include mq(l) {
|
|
33
|
+
margin-top: 0;
|
|
34
|
+
}
|
|
35
|
+
@include mq(xs, l) {
|
|
36
|
+
margin-top: 0.5rem;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
&--inline {
|
|
44
|
+
.ons-description-list__term {
|
|
45
|
+
padding-right: 1rem;
|
|
24
46
|
}
|
|
25
47
|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
48
|
+
@include mq(l) {
|
|
49
|
+
display: grid;
|
|
50
|
+
grid-template-columns: repeat(3, 1fr);
|
|
51
|
+
gap: 0.5rem 2.5rem;
|
|
52
|
+
|
|
53
|
+
.ons-description-list__value {
|
|
54
|
+
grid-column-start: 2;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.ons-description-list__item {
|
|
58
|
+
display: grid;
|
|
59
|
+
grid-template-columns: auto 1fr;
|
|
29
60
|
}
|
|
30
61
|
}
|
|
31
62
|
}
|
|
@@ -1,23 +1,31 @@
|
|
|
1
1
|
{% macro onsDescriptionList(params) %}
|
|
2
2
|
<dl
|
|
3
|
-
class="ons-description-list ons-description-list__items ons-grid ons-grid--gutterless ons-u-cf{{
|
|
4
|
-
{% if params.id %}id="{{ params.id }}"{% endif %}
|
|
3
|
+
class="ons-description-list ons-description-list__items ons-grid ons-grid--gutterless{{ ' ons-description-list--inline' if params.variant == 'inline' else ' ons-u-cf' }}{{ ' ' + params.classes if params.classes else '' }}"
|
|
4
|
+
{% if params.id %}id="{{ params.id }}"{% endif %}
|
|
5
|
+
{% if params.descriptionListLabel %}
|
|
5
6
|
title="{{ params.descriptionListLabel }}" aria-label="{{ params.descriptionListLabel }}"
|
|
6
7
|
{% endif %}
|
|
7
8
|
>
|
|
8
9
|
{% for item in params.itemsList %}
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
{% if descriptionItem.description | length %}
|
|
14
|
-
<dd
|
|
15
|
-
{% if descriptionItem.id %}id="{{ descriptionItem.id }}"{% endif %}class="ons-description-list__value ons-grid__col ons-col-{{ params.descriptionCol }}@m"
|
|
10
|
+
<div class="ons-description-list__item">
|
|
11
|
+
{% if item.term | length %}
|
|
12
|
+
<dt
|
|
13
|
+
class="ons-description-list__term ons-grid__col ons-col-{{ params.termCol }}@{{ 'xs@l' if params.variant == 'inline' else 'm' }}"
|
|
16
14
|
>
|
|
17
|
-
{{-
|
|
18
|
-
</
|
|
15
|
+
{{- item.term -}}
|
|
16
|
+
</dt>
|
|
19
17
|
{% endif %}
|
|
20
|
-
|
|
18
|
+
{% for descriptionItem in item.descriptions %}
|
|
19
|
+
{% if descriptionItem.description | length %}
|
|
20
|
+
<dd
|
|
21
|
+
{% if descriptionItem.id %}id="{{ descriptionItem.id }}"{% endif %}
|
|
22
|
+
class="ons-description-list__value ons-grid__col ons-col-{{ params.descriptionCol }}@{{ 'xs@l' if params.variant == 'inline' else 'm' }}"
|
|
23
|
+
>
|
|
24
|
+
{{- descriptionItem.description -}}
|
|
25
|
+
</dd>
|
|
26
|
+
{% endif %}
|
|
27
|
+
{% endfor %}
|
|
28
|
+
</div>
|
|
21
29
|
{% endfor %}
|
|
22
30
|
</dl>
|
|
23
31
|
{% endmacro %}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
/** @jest-environment jsdom */
|
|
2
2
|
|
|
3
3
|
import * as cheerio from 'cheerio';
|
|
4
|
-
|
|
5
4
|
import axe from '../../tests/helpers/axe';
|
|
6
5
|
import { renderComponent } from '../../tests/helpers/rendering';
|
|
7
6
|
|
|
@@ -87,6 +86,17 @@ describe('macro: description-list', () => {
|
|
|
87
86
|
expect($('#example-id').length).toBe(1);
|
|
88
87
|
});
|
|
89
88
|
|
|
89
|
+
it('has the provided variant style class when variant is provided', () => {
|
|
90
|
+
const $ = cheerio.load(
|
|
91
|
+
renderComponent('description-list', {
|
|
92
|
+
...EXAMPLE_DESCRIPTION_LIST_MINIMAL,
|
|
93
|
+
variant: 'inline',
|
|
94
|
+
}),
|
|
95
|
+
);
|
|
96
|
+
|
|
97
|
+
expect($('.ons-description-list').hasClass('ons-description-list--inline')).toBe(true);
|
|
98
|
+
});
|
|
99
|
+
|
|
90
100
|
it('has additionally provided style classes', () => {
|
|
91
101
|
const $ = cheerio.load(
|
|
92
102
|
renderComponent('description-list', {
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
{% from "components/description-list/_macro.njk" import onsDescriptionList %}
|
|
2
|
+
{{
|
|
3
|
+
onsDescriptionList({
|
|
4
|
+
"classes": "ons-u-mb-no",
|
|
5
|
+
"descriptionListLabel": "Information about this business and its survey requirements",
|
|
6
|
+
"variant": 'inline',
|
|
7
|
+
"termCol": "4",
|
|
8
|
+
"descriptionCol": "8",
|
|
9
|
+
"itemsList": [
|
|
10
|
+
{
|
|
11
|
+
"term": "Survey:",
|
|
12
|
+
"descriptions": [
|
|
13
|
+
{
|
|
14
|
+
"description": "Bricks & Blocks"
|
|
15
|
+
}
|
|
16
|
+
]
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
"term": "RU Refs:",
|
|
20
|
+
"descriptions": [
|
|
21
|
+
{
|
|
22
|
+
"description": "49900000118"
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
"description": "49300005832"
|
|
26
|
+
}
|
|
27
|
+
]
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
"term": "Business:",
|
|
31
|
+
"descriptions": [
|
|
32
|
+
{
|
|
33
|
+
"description": "Bolts & Ratchets Ltd."
|
|
34
|
+
}
|
|
35
|
+
]
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
"term": "Trading as:",
|
|
39
|
+
"descriptions": [
|
|
40
|
+
{
|
|
41
|
+
"description": "Bolts & Ratchets"
|
|
42
|
+
}
|
|
43
|
+
]
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
"term": "To:",
|
|
47
|
+
"descriptions": [
|
|
48
|
+
{
|
|
49
|
+
"description": "Jacky Turner"
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
"description": "Louise Goodland"
|
|
53
|
+
}
|
|
54
|
+
]
|
|
55
|
+
}
|
|
56
|
+
]
|
|
57
|
+
})
|
|
58
|
+
}}
|
|
@@ -218,118 +218,120 @@
|
|
|
218
218
|
</nav>
|
|
219
219
|
{% endif %}
|
|
220
220
|
</div>
|
|
221
|
-
|
|
222
|
-
<div class="ons-
|
|
223
|
-
<div
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
221
|
+
{% if params.variants != "basic" %}
|
|
222
|
+
<div class="ons-header__main">
|
|
223
|
+
<div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
|
|
224
|
+
<div
|
|
225
|
+
class="ons-grid ons-grid-flex ons-grid-flex--between ons-grid-flex--vertical-center ons-grid-flex--no-wrap{{ ' ons-grid--gutterless' if not params.button }}"
|
|
226
|
+
>
|
|
227
|
+
<div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
|
|
228
|
+
{% if params.titleLogo.large %}
|
|
228
229
|
|
|
229
|
-
|
|
230
|
-
<div
|
|
231
|
-
class="ons-header__title-logo ons-header__title-logo--large{{ ' ' + params.titleLogo.classes if params.titleLogo.classes else '' }}{{ ' ons-u-d-no@2xs@s' if params.titleLogo.small }}"
|
|
232
|
-
>
|
|
233
|
-
{{ params.titleLogo.large | safe }}
|
|
234
|
-
</div>
|
|
235
|
-
{% if params.titleLogo.small %}
|
|
230
|
+
{% set title %}
|
|
236
231
|
<div
|
|
237
|
-
class="ons-header__title-logo ons-header__title-logo--
|
|
232
|
+
class="ons-header__title-logo ons-header__title-logo--large{{ ' ' + params.titleLogo.classes if params.titleLogo.classes else '' }}{{ ' ons-u-d-no@2xs@s' if params.titleLogo.small }}"
|
|
238
233
|
>
|
|
239
|
-
{{ params.titleLogo.
|
|
234
|
+
{{ params.titleLogo.large | safe }}
|
|
240
235
|
</div>
|
|
241
|
-
|
|
242
|
-
|
|
236
|
+
{% if params.titleLogo.small %}
|
|
237
|
+
<div
|
|
238
|
+
class="ons-header__title-logo ons-header__title-logo--small ons-u-d-no@s{{ ' ' + params.titleLogo.classes if params.titleLogo.classes else '' }}"
|
|
239
|
+
>
|
|
240
|
+
{{ params.titleLogo.small | safe }}
|
|
241
|
+
</div>
|
|
242
|
+
{% endif %}
|
|
243
|
+
{% endset %}
|
|
243
244
|
|
|
244
|
-
|
|
245
|
-
|
|
245
|
+
{% if params.titleUrl %}
|
|
246
|
+
<a class="ons-header__title-logo-link" href="{{ params.titleUrl }}">{{ title | safe }}</a>
|
|
247
|
+
{% else %}
|
|
248
|
+
{{ title | safe }}
|
|
249
|
+
{% endif %}
|
|
246
250
|
{% else %}
|
|
247
|
-
{{ title | safe }}
|
|
248
|
-
{% endif %}
|
|
249
|
-
{% else %}
|
|
250
251
|
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
252
|
+
{% set title %}
|
|
253
|
+
{{ openingTag | safe }}
|
|
254
|
+
class="ons-header__title">{{ params.title }}{{ closingTag | safe }}
|
|
255
|
+
{% endset %}
|
|
255
256
|
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
257
|
+
{% if params.titleUrl %}
|
|
258
|
+
<a class="ons-header__title-link" href="{{ params.titleUrl }}">{{ title | safe }}</a>
|
|
259
|
+
{% else %}
|
|
260
|
+
{{ title | safe }}
|
|
261
|
+
{% endif %}
|
|
260
262
|
{% endif %}
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
</div>
|
|
263
|
+
{% if params.description %}
|
|
264
|
+
<p class="ons-header__description">{{ params.description }}</p>
|
|
265
|
+
{% endif %}
|
|
266
|
+
</div>
|
|
266
267
|
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
268
|
+
{% if params.button %}
|
|
269
|
+
{% if params.variants == 'neutral' %}
|
|
270
|
+
{% set buttonVariant = "ghost-dark" %}
|
|
271
|
+
{% else %}
|
|
272
|
+
{% set buttonVariant = "ghost" %}
|
|
273
|
+
{% endif %}
|
|
274
|
+
<div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink">
|
|
275
|
+
{{
|
|
276
|
+
onsButton({
|
|
277
|
+
"text": params.button.text,
|
|
278
|
+
"classes": "ons-u-d-no@2xs@l" if params.navigation else "ons-u-d-no@2xs@m",
|
|
279
|
+
"variants": buttonVariant,
|
|
280
|
+
"name": params.button.name,
|
|
281
|
+
"attributes": params.button.attributes,
|
|
282
|
+
"url": params.button.url,
|
|
283
|
+
"iconType": "exit",
|
|
284
|
+
"iconPosition": "after"
|
|
285
|
+
})
|
|
286
|
+
}}
|
|
287
|
+
</div>
|
|
272
288
|
{% endif %}
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
"
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
289
|
+
{% if params.navigation or params.siteSearchAutosuggest %}
|
|
290
|
+
<div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink">
|
|
291
|
+
{% if params.siteSearchAutosuggest %}
|
|
292
|
+
{% if params.variants == 'neutral' %}
|
|
293
|
+
{% set buttonVariant = ["small", "ghost-dark"] %}
|
|
294
|
+
{% else %}
|
|
295
|
+
{% set buttonVariant = ["small", "ghost"] %}
|
|
296
|
+
{% endif %}
|
|
297
|
+
<span class="ons-grid ons-u-d-no@2xs@xs ons-u-ml-no ons-u-d-no@l">
|
|
298
|
+
{{
|
|
299
|
+
onsButton({
|
|
300
|
+
"text": "Search",
|
|
301
|
+
"classes": "ons-btn--search ons-u-ml-2xs ons-u-d-no ons-js-toggle-search",
|
|
302
|
+
"variants": buttonVariant,
|
|
303
|
+
"iconType": "search",
|
|
304
|
+
"iconPosition": "only",
|
|
305
|
+
"attributes": {
|
|
306
|
+
"aria-label": "Toggle search" ,
|
|
307
|
+
"aria-controls": "ons-site-search",
|
|
308
|
+
"aria-expanded": "false"
|
|
309
|
+
}
|
|
310
|
+
})
|
|
311
|
+
}}
|
|
312
|
+
</span>
|
|
295
313
|
{% endif %}
|
|
296
|
-
|
|
314
|
+
{% if params.navigation.toggleNavigationButton %}
|
|
315
|
+
{% set buttonVariant = ["mobile", "ghost"] %}
|
|
297
316
|
{{
|
|
298
317
|
onsButton({
|
|
299
|
-
"text":
|
|
300
|
-
"classes": "ons-
|
|
318
|
+
"text": params.navigation.toggleNavigationButton.text,
|
|
319
|
+
"classes": "ons-u-ml-2xs ons-u-d-no ons-js-navigation-button ons-u-d-no@l",
|
|
301
320
|
"variants": buttonVariant,
|
|
302
|
-
"iconType": "search",
|
|
303
|
-
"iconPosition": "only",
|
|
304
321
|
"attributes": {
|
|
305
|
-
"aria-label": "Toggle
|
|
306
|
-
"aria-controls":
|
|
322
|
+
"aria-label": params.navigation.toggleNavigationButton.ariaLabel | default("Toggle main menu") ,
|
|
323
|
+
"aria-controls": params.navigation.id,
|
|
307
324
|
"aria-expanded": "false"
|
|
308
325
|
}
|
|
309
326
|
})
|
|
310
327
|
}}
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
{{
|
|
316
|
-
onsButton({
|
|
317
|
-
"text": params.navigation.toggleNavigationButton.text,
|
|
318
|
-
"classes": "ons-u-ml-2xs ons-u-d-no ons-js-navigation-button ons-u-d-no@l",
|
|
319
|
-
"variants": buttonVariant,
|
|
320
|
-
"attributes": {
|
|
321
|
-
"aria-label": params.navigation.toggleNavigationButton.ariaLabel | default("Toggle main menu") ,
|
|
322
|
-
"aria-controls": params.navigation.id,
|
|
323
|
-
"aria-expanded": "false"
|
|
324
|
-
}
|
|
325
|
-
})
|
|
326
|
-
}}
|
|
327
|
-
{% endif %}
|
|
328
|
-
</div>
|
|
329
|
-
{% endif %}
|
|
328
|
+
{% endif %}
|
|
329
|
+
</div>
|
|
330
|
+
{% endif %}
|
|
331
|
+
</div>
|
|
330
332
|
</div>
|
|
331
333
|
</div>
|
|
332
|
-
|
|
334
|
+
{% endif %}
|
|
333
335
|
{% if params.navigation %}
|
|
334
336
|
{{ onsNavigation(params) }}
|
|
335
337
|
{% endif %}
|
|
@@ -43,6 +43,16 @@ describe('FOR: Macro: Header', () => {
|
|
|
43
43
|
expect($('.ons-header--variant-b').length).toBe(1);
|
|
44
44
|
});
|
|
45
45
|
});
|
|
46
|
+
describe('WHEN: variants is set to basic', () => {
|
|
47
|
+
test('THEN: does not render the main part of the header', () => {
|
|
48
|
+
const $ = cheerio.load(
|
|
49
|
+
renderComponent('header', {
|
|
50
|
+
variants: 'basic',
|
|
51
|
+
}),
|
|
52
|
+
);
|
|
53
|
+
expect($('.ons-header > .ons-header__main').length).toBe(0);
|
|
54
|
+
});
|
|
55
|
+
});
|
|
46
56
|
});
|
|
47
57
|
describe('GIVEN: Params: classes', () => {
|
|
48
58
|
describe('WHEN: classes are provided', () => {
|