@ons/design-system 70.0.3 → 70.0.5
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/autosuggest/_macro.njk +0 -2
- package/components/autosuggest/_macro.spec.js +2 -6
- package/components/date-input/_macro.njk +0 -6
- package/components/date-input/_macro.spec.js +0 -8
- package/components/document-list/_macro.njk +10 -10
- package/components/footer/_footer.scss +1 -1
- package/components/icon/_macro.njk +23 -23
- package/components/icon/_macro.spec.js +6 -0
- package/components/input/example-input-number.njk +1 -3
- package/components/input/example-input-numeric-values.njk +0 -3
- package/components/mutually-exclusive/example-mutually-exclusive-number.njk +0 -3
- package/components/mutually-exclusive/mutually-exclusive.duration.spec.js +0 -12
- package/components/mutually-exclusive/mutually-exclusive.number.spec.js +0 -3
- package/components/radios/_macro.njk +19 -0
- package/components/radios/_radio.scss +3 -8
- package/components/radios/_radios.scss +6 -0
- package/components/radios/example-radios-with-revealed-text-area-expanded.njk +87 -0
- package/components/radios/example-radios-with-revealed-text-area.njk +86 -0
- package/components/share-page/_macro.njk +1 -8
- package/components/summary/_macro.njk +4 -1
- package/components/summary/_macro.spec.js +7 -0
- package/components/summary/example-summary-hub-minimal.njk +75 -0
- package/components/tabs/example-tabs-details.njk +2 -2
- package/css/main.css +1 -1
- package/js/analytics.js +17 -6
- package/package.json +1 -1
- package/scripts/main.es5.js +1 -1
- package/scripts/main.js +1 -1
- package/scss/utilities/_utilities.scss +5 -0
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
{% from "components/radios/_macro.njk" import onsRadios %}
|
|
2
|
+
{% from "components/question/_macro.njk" import onsQuestion %}
|
|
3
|
+
|
|
4
|
+
{% call onsQuestion({
|
|
5
|
+
"title": "How do you usually travel to work?",
|
|
6
|
+
"classes": "ons-u-mt-no",
|
|
7
|
+
"legendIsQuestionTitle": true
|
|
8
|
+
}) %}
|
|
9
|
+
{{
|
|
10
|
+
onsRadios({
|
|
11
|
+
"dontWrap": true,
|
|
12
|
+
"name": "travel",
|
|
13
|
+
"radios": [
|
|
14
|
+
{
|
|
15
|
+
"id": "home-example-radio-with-revealed-text-input",
|
|
16
|
+
"label": {
|
|
17
|
+
"text": "Work mainly from home"
|
|
18
|
+
},
|
|
19
|
+
"value": "home"
|
|
20
|
+
},
|
|
21
|
+
{
|
|
22
|
+
"id": "car-example-radio-with-revealed-text-input",
|
|
23
|
+
"label": {
|
|
24
|
+
"text": "Car or van"
|
|
25
|
+
},
|
|
26
|
+
"value": "car"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"id": "underground-example-radio-with-revealed-text-input",
|
|
30
|
+
"label": {
|
|
31
|
+
"text": "Underground, metro, light rail or tram"
|
|
32
|
+
},
|
|
33
|
+
"value": "underground"
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
"id": "train-example-radio-with-revealed-text-input",
|
|
37
|
+
"label": {
|
|
38
|
+
"text": "Train"
|
|
39
|
+
},
|
|
40
|
+
"value": "train"
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
"id": "bus-example-radio-with-revealed-text-input",
|
|
44
|
+
"label": {
|
|
45
|
+
"text": "Bus, minibus or coach"
|
|
46
|
+
},
|
|
47
|
+
"value": "bus"
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
"id": "bicycle-example-radio-with-revealed-text-input",
|
|
51
|
+
"label": {
|
|
52
|
+
"text": "Bicycle"
|
|
53
|
+
},
|
|
54
|
+
"value": "bicycle"
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
"id": "walk-example-radio-with-revealed-text-input",
|
|
58
|
+
"label": {
|
|
59
|
+
"text": "Walk"
|
|
60
|
+
},
|
|
61
|
+
"value": "walk"
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
"id": "other-radio-example-radio-with-revealed-text-input",
|
|
65
|
+
"label": {
|
|
66
|
+
"text": "Other"
|
|
67
|
+
},
|
|
68
|
+
"value": "other",
|
|
69
|
+
"checked": true,
|
|
70
|
+
"other": {
|
|
71
|
+
"otherType": "textarea",
|
|
72
|
+
"id": "other-textbox-example-radio-with-revealed-text-input",
|
|
73
|
+
"name": "other-answer",
|
|
74
|
+
"label": {
|
|
75
|
+
"text": "Enter how you travel"
|
|
76
|
+
},
|
|
77
|
+
"charCheckLimit": {
|
|
78
|
+
"limit": 200,
|
|
79
|
+
"charCountSingular": "You have {x} character remaining",
|
|
80
|
+
"charCountPlural": "You have {x} characters remaining"
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
]
|
|
85
|
+
})
|
|
86
|
+
}}
|
|
87
|
+
{% endcall %}
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
{% from "components/radios/_macro.njk" import onsRadios %}
|
|
2
|
+
{% from "components/question/_macro.njk" import onsQuestion %}
|
|
3
|
+
|
|
4
|
+
{% call onsQuestion({
|
|
5
|
+
"title": "How do you usually travel to work?",
|
|
6
|
+
"classes": "ons-u-mt-no",
|
|
7
|
+
"legendIsQuestionTitle": true
|
|
8
|
+
}) %}
|
|
9
|
+
{{
|
|
10
|
+
onsRadios({
|
|
11
|
+
"dontWrap": true,
|
|
12
|
+
"name": "travel",
|
|
13
|
+
"radios": [
|
|
14
|
+
{
|
|
15
|
+
"id": "home-example-radio-with-revealed-text-input",
|
|
16
|
+
"label": {
|
|
17
|
+
"text": "Work mainly from home"
|
|
18
|
+
},
|
|
19
|
+
"value": "home"
|
|
20
|
+
},
|
|
21
|
+
{
|
|
22
|
+
"id": "car-example-radio-with-revealed-text-input",
|
|
23
|
+
"label": {
|
|
24
|
+
"text": "Car or van"
|
|
25
|
+
},
|
|
26
|
+
"value": "car"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"id": "underground-example-radio-with-revealed-text-input",
|
|
30
|
+
"label": {
|
|
31
|
+
"text": "Underground, metro, light rail or tram"
|
|
32
|
+
},
|
|
33
|
+
"value": "underground"
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
"id": "train-example-radio-with-revealed-text-input",
|
|
37
|
+
"label": {
|
|
38
|
+
"text": "Train"
|
|
39
|
+
},
|
|
40
|
+
"value": "train"
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
"id": "bus-example-radio-with-revealed-text-input",
|
|
44
|
+
"label": {
|
|
45
|
+
"text": "Bus, minibus or coach"
|
|
46
|
+
},
|
|
47
|
+
"value": "bus"
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
"id": "bicycle-example-radio-with-revealed-text-input",
|
|
51
|
+
"label": {
|
|
52
|
+
"text": "Bicycle"
|
|
53
|
+
},
|
|
54
|
+
"value": "bicycle"
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
"id": "walk-example-radio-with-revealed-text-input",
|
|
58
|
+
"label": {
|
|
59
|
+
"text": "Walk"
|
|
60
|
+
},
|
|
61
|
+
"value": "walk"
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
"id": "other-radio-example-radio-with-revealed-text-input",
|
|
65
|
+
"label": {
|
|
66
|
+
"text": "Other"
|
|
67
|
+
},
|
|
68
|
+
"value": "other",
|
|
69
|
+
"other": {
|
|
70
|
+
"otherType": "textarea",
|
|
71
|
+
"id": "other-textbox-example-radio-with-revealed-text-input",
|
|
72
|
+
"name": "other-answer",
|
|
73
|
+
"label": {
|
|
74
|
+
"text": "Enter how you travel"
|
|
75
|
+
},
|
|
76
|
+
"charCheckLimit": {
|
|
77
|
+
"limit": 200,
|
|
78
|
+
"charCountSingular": "You have {x} character remaining",
|
|
79
|
+
"charCountPlural": "You have {x} characters remaining"
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
]
|
|
84
|
+
})
|
|
85
|
+
}}
|
|
86
|
+
{% endcall %}
|
|
@@ -6,7 +6,6 @@
|
|
|
6
6
|
<{{ titleTag }} class="ons-u-fs-r--b ons-u-mb-xs">{{ params.title }}</{{ titleTag }}>
|
|
7
7
|
{% endif %}
|
|
8
8
|
|
|
9
|
-
{% set list = [] %}
|
|
10
9
|
{% if params.facebook and params.facebook == true %}
|
|
11
10
|
{% set facebook =
|
|
12
11
|
{
|
|
@@ -17,8 +16,6 @@
|
|
|
17
16
|
"target": '_blank'
|
|
18
17
|
}
|
|
19
18
|
%}
|
|
20
|
-
|
|
21
|
-
{% set list = (list.push(facebook), list) %}
|
|
22
19
|
{% endif %}
|
|
23
20
|
{% if params.twitter and params.twitter == true %}
|
|
24
21
|
{% set twitter =
|
|
@@ -30,17 +27,13 @@
|
|
|
30
27
|
"target": '_blank'
|
|
31
28
|
}
|
|
32
29
|
%}
|
|
33
|
-
|
|
34
|
-
{% set list = (list.push(twitter), list) %}
|
|
35
|
-
|
|
36
30
|
{% endif %}
|
|
37
|
-
|
|
38
31
|
{{
|
|
39
32
|
onsList({
|
|
40
33
|
"variants": 'inline',
|
|
41
34
|
"iconPosition": 'before',
|
|
42
35
|
"iconSize": params.iconSize | default("xxl"),
|
|
43
|
-
"itemsList":
|
|
36
|
+
"itemsList": [facebook, twitter]
|
|
44
37
|
})
|
|
45
38
|
}}
|
|
46
39
|
{% endmacro %}
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
{% if params.classes %}
|
|
13
13
|
{% set className = className + " " + params.classes %}
|
|
14
14
|
{% endif %}
|
|
15
|
-
|
|
15
|
+
|
|
16
16
|
<div class="{{ className }}">
|
|
17
17
|
{% for summary in params.summaries %}
|
|
18
18
|
{% if summary.summaryTitle %}
|
|
@@ -51,6 +51,9 @@
|
|
|
51
51
|
"iconType": rowItem.iconType
|
|
52
52
|
})
|
|
53
53
|
-}}
|
|
54
|
+
{% if rowItem.iconVisuallyHiddenText %}
|
|
55
|
+
<span class="ons-u-vh">{{ rowItem.iconVisuallyHiddenText }}</span>
|
|
56
|
+
{% endif %}
|
|
54
57
|
</span>
|
|
55
58
|
{% endif %}
|
|
56
59
|
|
|
@@ -22,6 +22,7 @@ const EXAMPLE_SUMMARY_ROWS = {
|
|
|
22
22
|
b: 'bbb',
|
|
23
23
|
},
|
|
24
24
|
iconType: 'check',
|
|
25
|
+
iconVisuallyHiddenText: 'Section completed',
|
|
25
26
|
id: 'item-id-1',
|
|
26
27
|
valueList: [
|
|
27
28
|
{
|
|
@@ -432,6 +433,12 @@ describe('macro: summary', () => {
|
|
|
432
433
|
expect($('.ons-summary__item-title-icon').hasClass('ons-summary__item-title-icon--check')).toBe(true);
|
|
433
434
|
});
|
|
434
435
|
|
|
436
|
+
it('has the visually hidden text <span> text when `iconType` is `check`', () => {
|
|
437
|
+
const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC));
|
|
438
|
+
|
|
439
|
+
expect($('.ons-summary__item-title-icon').text().trim()).toBe('Section completed');
|
|
440
|
+
});
|
|
441
|
+
|
|
435
442
|
it('has the correct item text class when `iconType` is provided', () => {
|
|
436
443
|
const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC));
|
|
437
444
|
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
{% from "components/summary/_macro.njk" import onsSummary %}
|
|
2
|
+
|
|
3
|
+
{{ onsSummary({
|
|
4
|
+
"variant": "hub",
|
|
5
|
+
"summaries": [
|
|
6
|
+
{
|
|
7
|
+
"groups": [
|
|
8
|
+
{
|
|
9
|
+
"rows": [
|
|
10
|
+
{
|
|
11
|
+
"rowTitle": "People who live here",
|
|
12
|
+
"rowItems": [
|
|
13
|
+
{
|
|
14
|
+
"iconType": "check",
|
|
15
|
+
"iconVisuallyHiddenText": "Section complete",
|
|
16
|
+
"actions": [
|
|
17
|
+
{
|
|
18
|
+
"text": "View answers",
|
|
19
|
+
"visuallyHiddenText": "View answers for People who live here",
|
|
20
|
+
"url": "#0"
|
|
21
|
+
}
|
|
22
|
+
]
|
|
23
|
+
}
|
|
24
|
+
]
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
"rowTitle": "Mary Smith (You)",
|
|
28
|
+
"rowItems": [
|
|
29
|
+
{
|
|
30
|
+
"iconType": "check",
|
|
31
|
+
"iconVisuallyHiddenText": "Section complete",
|
|
32
|
+
"actions": [
|
|
33
|
+
{
|
|
34
|
+
"text": "View answers",
|
|
35
|
+
"visuallyHiddenText": "View answers for Mary Smith",
|
|
36
|
+
"url": "#0"
|
|
37
|
+
}
|
|
38
|
+
]
|
|
39
|
+
}
|
|
40
|
+
]
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
"rowTitle": "John Smith",
|
|
44
|
+
"rowItems": [
|
|
45
|
+
{
|
|
46
|
+
"actions": [
|
|
47
|
+
{
|
|
48
|
+
"text": "Continue with section",
|
|
49
|
+
"visuallyHiddenText": "Continue with John Smith's section",
|
|
50
|
+
"url": "#0"
|
|
51
|
+
}
|
|
52
|
+
]
|
|
53
|
+
}
|
|
54
|
+
]
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
"rowTitle": "Billy Smith",
|
|
58
|
+
"rowItems": [
|
|
59
|
+
{
|
|
60
|
+
"actions": [
|
|
61
|
+
{
|
|
62
|
+
"text": "Start section",
|
|
63
|
+
"visuallyHiddenText": "Start Billy Smith's section",
|
|
64
|
+
"url": "#0"
|
|
65
|
+
}
|
|
66
|
+
]
|
|
67
|
+
}
|
|
68
|
+
]
|
|
69
|
+
}
|
|
70
|
+
]
|
|
71
|
+
}
|
|
72
|
+
]
|
|
73
|
+
}
|
|
74
|
+
]
|
|
75
|
+
}) }}
|
|
@@ -134,9 +134,9 @@
|
|
|
134
134
|
{
|
|
135
135
|
"id": "video-embed",
|
|
136
136
|
"title": 'Embed',
|
|
137
|
-
"hiddenSpan": 'code for
|
|
137
|
+
"hiddenSpan": 'code for Transforming the way we produce statistics | Explaining the Dynamic Population Model | BSL',
|
|
138
138
|
"content": '<h3 class="ons-u-d-no@s">Embed</h3>
|
|
139
|
-
<pre class="language-html"><code>' ~ '<iframe width="560" height="315" src="https://www.youtube.com/embed/
|
|
139
|
+
<pre class="language-html"><code class="ons-u-wrap">' ~ '<iframe width="560" height="315" src="https://www.youtube.com/embed/OwYVwPPxPj4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>' | e ~ '</code></pre>'
|
|
140
140
|
}
|
|
141
141
|
]
|
|
142
142
|
})
|