@ons/design-system 67.0.1 → 67.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/breadcrumbs/_macro.njk +4 -4
- package/components/button/_macro.njk +6 -6
- package/components/content-pagination/_macro.njk +7 -9
- package/components/details/_macro.njk +2 -2
- package/components/external-link/_external-link.scss +0 -1
- package/components/external-link/_macro.njk +4 -5
- package/components/external-link/_macro.spec.js +2 -2
- package/components/footer/_macro.njk +8 -8
- package/components/header/_macro.njk +8 -8
- package/components/icon/_macro.njk +30 -30
- package/components/list/_macro.njk +4 -4
- package/components/pagination/_macro.njk +4 -4
- package/components/panel/_macro.njk +4 -4
- package/components/quote/_macro.njk +2 -2
- package/components/summary/_macro.njk +2 -2
- package/components/table/_macro.njk +2 -2
- package/css/main.css +1 -1
- package/package.json +1 -1
|
@@ -3,18 +3,18 @@
|
|
|
3
3
|
{% macro onsBreadcrumbs(params) %}
|
|
4
4
|
<nav class="ons-breadcrumbs{{ ' ' + params.classes if params.classes else '' }}" aria-label="{{ params.ariaLabel | default("Breadcrumbs") }}" {% if params.id %} id="{{ params.id }}"{% endif %}>
|
|
5
5
|
<ol class="ons-breadcrumbs__items ons-u-fs-s">
|
|
6
|
-
{
|
|
6
|
+
{%- for item in params.itemsList -%}
|
|
7
7
|
<li class="ons-breadcrumbs__item{{ ' ' + item.itemClasses if item.itemClasses else '' }}" id="breadcrumb-{{ loop.index }}">
|
|
8
8
|
<a class="ons-breadcrumbs__link{{ ' ' + item.linkClasses if item.linkClasses else '' }}" href={% if not isDesignSystemExample %}"{{ item.url }}"{% else %}"#0"{% endif %}{% if item.id %} id="{{ item.id }}"{% endif %}
|
|
9
9
|
{% if item.attributes %}{% for attribute, value in (item.attributes.items() if item.attributes is mapping and item.attributes.items else item.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}
|
|
10
10
|
>{{ item.text }}</a>
|
|
11
|
-
{{
|
|
11
|
+
{{-
|
|
12
12
|
onsIcon({
|
|
13
13
|
"iconType": "chevron"
|
|
14
14
|
})
|
|
15
|
-
}}
|
|
15
|
+
-}}
|
|
16
16
|
</li>
|
|
17
|
-
{
|
|
17
|
+
{%- endfor -%}
|
|
18
18
|
</ol>
|
|
19
19
|
</nav>
|
|
20
20
|
{% endmacro %}
|
|
@@ -84,28 +84,28 @@
|
|
|
84
84
|
<span class="ons-btn__inner{% if params.innerClasses %} {{ params.innerClasses }}{% endif %}">
|
|
85
85
|
{%- if iconPosition == "before" or iconPosition == "after" %}
|
|
86
86
|
{%- if iconPosition == "before" %}
|
|
87
|
-
{{
|
|
87
|
+
{{-
|
|
88
88
|
onsIcon({
|
|
89
89
|
"iconType": iconType,
|
|
90
90
|
"classes": 'ons-u-mr-xs'
|
|
91
91
|
})
|
|
92
|
-
}}
|
|
92
|
+
-}}
|
|
93
93
|
{% endif -%}
|
|
94
94
|
<span class="ons-btn__text">{{- params.html | safe if params.html else params.text -}}</span>
|
|
95
95
|
{%- if iconPosition == "after" %}
|
|
96
|
-
{{
|
|
96
|
+
{{-
|
|
97
97
|
onsIcon({
|
|
98
98
|
"iconType": iconType,
|
|
99
99
|
"classes": 'ons-u-ml-xs'
|
|
100
100
|
})
|
|
101
|
-
}}
|
|
101
|
+
-}}
|
|
102
102
|
{% endif -%}
|
|
103
103
|
{% elif iconPosition == "only" -%}
|
|
104
|
-
{{
|
|
104
|
+
{{-
|
|
105
105
|
onsIcon({
|
|
106
106
|
"iconType": iconType
|
|
107
107
|
})
|
|
108
|
-
}}
|
|
108
|
+
-}}
|
|
109
109
|
<span class="ons-btn__text ons-u-vh@xxs@s">{{- params.html | safe if params.html else params.text -}}</span>
|
|
110
110
|
{% else -%}
|
|
111
111
|
<span class="ons-btn__text">{{- params.html | safe if params.html else params.text -}}</span>
|
|
@@ -5,26 +5,24 @@
|
|
|
5
5
|
<li class="ons-content-pagination__item">
|
|
6
6
|
<a href="{{ contentPaginationItem.url }}" class="ons-content-pagination__link" rel="{{ contentPaginationItem.rel }}">
|
|
7
7
|
<span class="ons-content-pagination__link-title">
|
|
8
|
-
{
|
|
8
|
+
{%- if contentPaginationItem.rel == 'prev' %}
|
|
9
9
|
{% from "components/icon/_macro.njk" import onsIcon %}
|
|
10
|
-
{{
|
|
10
|
+
{{-
|
|
11
11
|
onsIcon({
|
|
12
12
|
"iconType": 'arrow-previous',
|
|
13
13
|
"iconSize": 'm'
|
|
14
14
|
})
|
|
15
|
-
}}
|
|
15
|
+
-}}
|
|
16
16
|
{% else %}
|
|
17
17
|
{% from "components/icon/_macro.njk" import onsIcon %}
|
|
18
|
-
{{
|
|
18
|
+
{{-
|
|
19
19
|
onsIcon({
|
|
20
20
|
"iconType": 'arrow-next',
|
|
21
21
|
"iconSize": 'm'
|
|
22
22
|
})
|
|
23
|
-
}}
|
|
24
|
-
{% endif
|
|
25
|
-
<span class="ons-content-pagination__link-text">
|
|
26
|
-
{{ contentPaginationItem.text }}
|
|
27
|
-
</span>
|
|
23
|
+
-}}
|
|
24
|
+
{% endif -%}
|
|
25
|
+
<span class="ons-content-pagination__link-text">{{ contentPaginationItem.text }}</span>
|
|
28
26
|
</span>
|
|
29
27
|
<span class="ons-content-pagination__link-divider ons-u-vh">{{ contentPaginationItem.bridgingText | default("page in this guide is:") }}</span>
|
|
30
28
|
<span class="ons-content-pagination__link-label">{{ contentPaginationItem.label }}</span>
|
|
@@ -15,11 +15,11 @@
|
|
|
15
15
|
<{{ titleTag }} class="ons-details__title">{{ params.title }}</{{ titleTag }}>
|
|
16
16
|
<span class="ons-details__icon">
|
|
17
17
|
{% from "components/icon/_macro.njk" import onsIcon %}
|
|
18
|
-
{{
|
|
18
|
+
{{-
|
|
19
19
|
onsIcon({
|
|
20
20
|
"iconType": "chevron"
|
|
21
21
|
})
|
|
22
|
-
}}</span>
|
|
22
|
+
-}}</span>
|
|
23
23
|
</div>
|
|
24
24
|
<div id="{{ params.id }}-content" class="ons-details__content ons-js-details-content"
|
|
25
25
|
{% if params.contentAttributes %}{% for attribute, value in (params.contentAttributes.items() if params.contentAttributes is mapping and params.contentAttributes.items else params.contentAttributes) %}{{ attribute }}{% if value %}="{{ value }}"{% endif %} {% endfor %}{% endif %}
|
|
@@ -1,10 +1,9 @@
|
|
|
1
|
-
{
|
|
1
|
+
{% from "components/icon/_macro.njk" import onsIcon %}
|
|
2
|
+
|
|
2
3
|
{% macro onsExternalLink(params) %}
|
|
3
4
|
<a href="{{ params.url }}" class="ons-external-link{% if params.classes %} {{ params.classes }}{% endif %}" target="_blank" rel="noopener">
|
|
4
5
|
<span class="ons-external-link__text">
|
|
5
6
|
{{- params.linkText | safe -}}
|
|
6
|
-
</span><span class="ons-external-link__icon"> 
|
|
7
|
-
|
|
8
|
-
<path d="M8.83,7.88a.51.51,0,0,0,.71,0l2.31-2.32,1.28,1.28A.51.51,0,0,0,14,6.49v-4a.52.52,0,0,0-.5-.5h-4A.51.51,0,0,0,9,2.52a.58.58,0,0,0,.14.33l1.28,1.28L8.12,6.46a.51.51,0,0,0,0,.71Z" transform="translate(-2 -1.99)"/>
|
|
9
|
-
</svg></span><span class="ons-external-link__new-window-description ons-u-vh"> ({{- params.newWindowDescription | default("opens in a new tab") -}})</span></a>
|
|
7
|
+
</span><span class="ons-external-link__icon"> {{- onsIcon({"iconType": 'external-link'}) -}}
|
|
8
|
+
</span><span class="ons-external-link__new-window-description ons-u-vh">({{- params.newWindowDescription | default("opens in a new tab") -}})</span></a>
|
|
10
9
|
{% endmacro %}
|
|
@@ -54,7 +54,7 @@ describe('macro: external-link', () => {
|
|
|
54
54
|
it('has a default new window description', async () => {
|
|
55
55
|
const $ = cheerio.load(renderComponent('external-link', EXAMPLE_EXTERNAL_LINK));
|
|
56
56
|
|
|
57
|
-
expect($('.ons-external-link__new-window-description').text()).toBe('
|
|
57
|
+
expect($('.ons-external-link__new-window-description').text()).toBe('(opens in a new tab)');
|
|
58
58
|
});
|
|
59
59
|
|
|
60
60
|
it('has a custom new window description when `newWindowDescription` is provided', () => {
|
|
@@ -65,7 +65,7 @@ describe('macro: external-link', () => {
|
|
|
65
65
|
}),
|
|
66
66
|
);
|
|
67
67
|
|
|
68
|
-
expect($('.ons-external-link__new-window-description').text()).toBe('
|
|
68
|
+
expect($('.ons-external-link__new-window-description').text()).toBe('(custom opens in a new tab text)');
|
|
69
69
|
});
|
|
70
70
|
|
|
71
71
|
it('has an "external-link" icon', async () => {
|
|
@@ -11,21 +11,21 @@
|
|
|
11
11
|
|
|
12
12
|
{% set onsLogo %}
|
|
13
13
|
{% if params.lang == 'cy' %}
|
|
14
|
-
{{
|
|
14
|
+
{{-
|
|
15
15
|
onsIcon({
|
|
16
16
|
"iconType": 'ons-logo-cy',
|
|
17
17
|
"altText": 'Swyddfa Ystadegau Gwladol',
|
|
18
18
|
"altTextId": 'ons-logo-cy-footer-alt'
|
|
19
19
|
})
|
|
20
|
-
}}
|
|
20
|
+
-}}
|
|
21
21
|
{% else %}
|
|
22
|
-
{{
|
|
22
|
+
{{-
|
|
23
23
|
onsIcon({
|
|
24
24
|
"iconType": 'ons-logo-en',
|
|
25
25
|
"altText": 'Office for National Statistics',
|
|
26
26
|
"altTextId": 'ons-logo-en-footer-alt'
|
|
27
27
|
})
|
|
28
|
-
}}
|
|
28
|
+
-}}
|
|
29
29
|
{% endif %}
|
|
30
30
|
{% endset %}
|
|
31
31
|
|
|
@@ -130,11 +130,11 @@
|
|
|
130
130
|
{% if params.OGLLink %}
|
|
131
131
|
<!-- OGL -->
|
|
132
132
|
<div class="ons-footer__license ons-u-mb-m">
|
|
133
|
-
{{
|
|
133
|
+
{{-
|
|
134
134
|
onsIcon({
|
|
135
135
|
"iconType": 'ogl'
|
|
136
136
|
})
|
|
137
|
-
}}
|
|
137
|
+
-}}
|
|
138
138
|
{% if params.OGLLink.HTML %}
|
|
139
139
|
{{ params.OGLLink.HTML | safe }}
|
|
140
140
|
{% elif params.OGLLink %}
|
|
@@ -166,11 +166,11 @@
|
|
|
166
166
|
{% if params.crest %}
|
|
167
167
|
<!-- Crest -->
|
|
168
168
|
<div class="ons-grid__col ons-footer__crest ons-u-mb-m@xxs@l">
|
|
169
|
-
{{
|
|
169
|
+
{{-
|
|
170
170
|
onsIcon({
|
|
171
171
|
"iconType": 'crest'
|
|
172
172
|
})
|
|
173
|
-
}}
|
|
173
|
+
-}}
|
|
174
174
|
</div>
|
|
175
175
|
{% endif %}
|
|
176
176
|
</div>
|
|
@@ -41,12 +41,12 @@
|
|
|
41
41
|
{% if params.mastheadLogo.large %}
|
|
42
42
|
{{ params.mastheadLogo.large | safe }}
|
|
43
43
|
{% else %}
|
|
44
|
-
{{
|
|
44
|
+
{{-
|
|
45
45
|
onsIcon({
|
|
46
46
|
"iconType": 'ons-logo-' + currentLanguageISOCode,
|
|
47
47
|
"altText": 'Office for National Statistics logo'
|
|
48
48
|
})
|
|
49
|
-
}}
|
|
49
|
+
-}}
|
|
50
50
|
{% endif %}
|
|
51
51
|
</div>
|
|
52
52
|
<div class="ons-header__org-logo ons-header__org-logo--small">
|
|
@@ -55,12 +55,12 @@
|
|
|
55
55
|
{% elif params.mastheadLogo.large %}
|
|
56
56
|
{{ params.mastheadLogo.large | safe }}
|
|
57
57
|
{% else %}
|
|
58
|
-
{{
|
|
58
|
+
{{-
|
|
59
59
|
onsIcon({
|
|
60
60
|
"iconType": 'ons-logo-stacked-' + currentLanguageISOCode,
|
|
61
61
|
"altText": 'Office for National Statistics logo'
|
|
62
62
|
})
|
|
63
|
-
}}
|
|
63
|
+
-}}
|
|
64
64
|
{% endif %}
|
|
65
65
|
</div>
|
|
66
66
|
{% if params.mastheadLogoUrl %}
|
|
@@ -91,11 +91,11 @@
|
|
|
91
91
|
{% for item in params.serviceLinks.itemsList %}
|
|
92
92
|
<li class="ons-header-service-nav__item">
|
|
93
93
|
{% if item.iconType %}
|
|
94
|
-
{{
|
|
94
|
+
{{-
|
|
95
95
|
onsIcon({
|
|
96
96
|
"iconType": item.iconType
|
|
97
97
|
})
|
|
98
|
-
}}
|
|
98
|
+
-}}
|
|
99
99
|
{% endif %}
|
|
100
100
|
{% if item.url %}
|
|
101
101
|
<a
|
|
@@ -142,11 +142,11 @@
|
|
|
142
142
|
{% for item in params.serviceLinks.itemsList %}
|
|
143
143
|
<li class="ons-header-service-nav__item ons-header-service-nav__item--mobile">
|
|
144
144
|
{% if item.iconType %}
|
|
145
|
-
{{
|
|
145
|
+
{{-
|
|
146
146
|
onsIcon({
|
|
147
147
|
"iconType": item.iconType
|
|
148
148
|
})
|
|
149
|
-
}}
|
|
149
|
+
-}}
|
|
150
150
|
{% endif %}
|
|
151
151
|
{% if item.url %}
|
|
152
152
|
<a
|