@ons/design-system 45.2.0 → 45.2.1
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/button/_macro.njk +4 -1
- package/components/fieldset/_macro.njk +20 -18
- package/components/footer/_macro.njk +3 -1
- package/components/header/_macro.njk +1 -1
- package/components/label/_macro.njk +15 -15
- package/components/lists/_macro.njk +1 -1
- package/components/pagination/_macro.njk +2 -2
- package/css/census.css +1 -1
- package/css/main.css +1 -1
- package/js/inpagelink.js +6 -8
- package/package.json +1 -1
- package/scripts/main.es5.js +1 -1
- package/scripts/main.js +1 -1
- package/scss/main.scss +1 -1
- package/components/header-navigation/_macro.njk +0 -0
- package/components/highlight/_highlight.scss +0 -5
|
@@ -29,9 +29,12 @@
|
|
|
29
29
|
{% set iconType = "loader" %}
|
|
30
30
|
{% set iconPosition = "after" %}
|
|
31
31
|
{# CTA or mobile menu toggle #}
|
|
32
|
-
{% elif params.
|
|
32
|
+
{% elif params.buttonStyle is defined and params.buttonStyle == "mobile" %}
|
|
33
33
|
{% set iconType = "chevron" %}
|
|
34
34
|
{% set iconPosition = "after" %}
|
|
35
|
+
{% elif params.url is defined and params.url %}
|
|
36
|
+
{% set iconType = "arrow-next" %}
|
|
37
|
+
{% set iconPosition = "after" %}
|
|
35
38
|
{% endif %}
|
|
36
39
|
{% endif %}
|
|
37
40
|
|
|
@@ -1,39 +1,41 @@
|
|
|
1
1
|
{% from "components/error/_macro.njk" import onsError %}
|
|
2
2
|
|
|
3
3
|
{% macro onsFieldset(params) %}
|
|
4
|
-
{% set fieldset
|
|
5
|
-
{% if params.dontWrap is defined and params.dontWrap
|
|
4
|
+
{% set fieldset -%}
|
|
5
|
+
{% if params.dontWrap is defined and params.dontWrap -%}
|
|
6
6
|
<div class="ons-input-items">
|
|
7
|
-
{{ caller() }}
|
|
7
|
+
{{- caller() -}}
|
|
8
8
|
</div>
|
|
9
|
-
{
|
|
9
|
+
{%- elif (params.legend is defined and params.legend) or (params.legendIsQuestionTitle is defined and params.legendIsQuestionTitle) -%}
|
|
10
10
|
<fieldset
|
|
11
11
|
{% if params.id is defined and params.id %}id="{{ params.id }}"{% endif %}
|
|
12
12
|
class="ons-fieldset{% if params.classes is defined and params.classes %} {{ params.classes }}{% endif %}"
|
|
13
13
|
{% if params.attributes is defined and params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %}{{ attribute }}{% if value is defined and value %}="{{ value }}"{% endif %} {% endfor %}{% endif %}
|
|
14
14
|
>
|
|
15
15
|
<legend class="ons-fieldset__legend{% if params.legendIsQuestionTitle is defined and params.legendIsQuestionTitle %} ons-u-mb-no{% endif %}{% if params.legendClasses is defined and params.legendClasses %} {{ params.legendClasses }}{% endif %}">
|
|
16
|
-
{
|
|
16
|
+
{%- if params.legendIsQuestionTitle -%}
|
|
17
17
|
<h1 id="fieldset-legend-title" class="ons-fieldset__legend-title ons-u-mb-m{% if params.legendTitleClasses is defined and params.legendTitleClasses %} {{ params.legendTitleClasses }}{% endif %}">
|
|
18
18
|
{{- params.legend | safe -}}
|
|
19
19
|
</h1>
|
|
20
|
-
{
|
|
20
|
+
{%- else -%}
|
|
21
21
|
{{- params.legend | safe -}}
|
|
22
|
-
{
|
|
23
|
-
{
|
|
24
|
-
<div class="ons-fieldset__description{% if params.legendIsQuestionTitle %} ons-fieldset__description--title ons-u-mb-m{% endif %}">
|
|
25
|
-
|
|
22
|
+
{%- endif -%}
|
|
23
|
+
{%- if params.description is defined and params.description -%}
|
|
24
|
+
<div class="ons-fieldset__description{% if params.legendIsQuestionTitle %} ons-fieldset__description--title ons-u-mb-m{% endif %}">
|
|
25
|
+
{{- params.description | safe -}}
|
|
26
|
+
</div>
|
|
27
|
+
{%- endif -%}
|
|
26
28
|
</legend>
|
|
27
|
-
{{ caller() }}
|
|
29
|
+
{{- caller() -}}
|
|
28
30
|
</fieldset>
|
|
29
|
-
{
|
|
30
|
-
{
|
|
31
|
+
{%- endif %}
|
|
32
|
+
{%- endset %}
|
|
31
33
|
|
|
32
|
-
{% if params.error is defined and params.error
|
|
34
|
+
{% if params.error is defined and params.error -%}
|
|
33
35
|
{% call onsError(params.error) %}
|
|
34
|
-
{{ fieldset | safe }}
|
|
36
|
+
{{- fieldset | safe -}}
|
|
35
37
|
{% endcall %}
|
|
36
|
-
{
|
|
37
|
-
{{ fieldset | safe }}
|
|
38
|
-
{
|
|
38
|
+
{%- else -%}
|
|
39
|
+
{{- fieldset | safe -}}
|
|
40
|
+
{%- endif %}
|
|
39
41
|
{% endmacro %}
|
|
@@ -86,7 +86,9 @@
|
|
|
86
86
|
"value": params.button.value,
|
|
87
87
|
"attributes": params.button.attributes,
|
|
88
88
|
"url": params.button.url,
|
|
89
|
-
"buttonStyle": params.button.buttonStyle
|
|
89
|
+
"buttonStyle": params.button.buttonStyle,
|
|
90
|
+
"iconType": params.button.iconType,
|
|
91
|
+
"iconPosition": params.button.iconPosition
|
|
90
92
|
})
|
|
91
93
|
}}
|
|
92
94
|
</div>
|
|
@@ -131,7 +131,7 @@
|
|
|
131
131
|
"buttonStyle": "mobile",
|
|
132
132
|
"variants": ["mobile", "ghost"],
|
|
133
133
|
"attributes": {
|
|
134
|
-
"aria-label": params.toggleButton.ariaLabel | default("Toggle main
|
|
134
|
+
"aria-label": params.toggleButton.ariaLabel | default("Toggle main menu") ,
|
|
135
135
|
"aria-controls": params.navigation.id,
|
|
136
136
|
"aria-haspopup": "true",
|
|
137
137
|
"aria-expanded": "false"
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
{% macro onsLabel(params) %}
|
|
2
|
-
{% set field
|
|
2
|
+
{% set field -%}
|
|
3
3
|
<span
|
|
4
4
|
{% if params.id is defined and params.id %} id="{{ params.id }}-description-hint"{% else %}id="description-hint"{% endif %}
|
|
5
5
|
class="ons-label__description {% if params.inputType is defined and params.inputType %}ons-{{ params.inputType }}__label--with-description{% else %} ons-input--with-description{% endif %}">
|
|
6
|
-
{{ params.description }}
|
|
6
|
+
{{- params.description -}}
|
|
7
7
|
</span>
|
|
8
|
-
{
|
|
8
|
+
{%- endset %}
|
|
9
9
|
|
|
10
10
|
<label
|
|
11
|
-
class="{% if params.inputType is not defined
|
|
11
|
+
class="{% if params.inputType is not defined -%}ons-label{%- endif %}{{- ' ' + params.classes if params.classes else "" -}}{%- if params.description is defined and params.description %} ons-label--with-description{%- endif %} {{- ' ons-label--placeholder' if params.accessiblePlaceholder else "" -}}"
|
|
12
12
|
{% if params.for is defined and params.for %} for="{{ params.for }}"{% endif %}
|
|
13
13
|
{% if params.id is defined and params.id %} id="{{ params.id }}"{% endif %}
|
|
14
14
|
{% if params.attributes is defined and params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %}{{ attribute }}{% if value is defined and value %}="{{ value }}"{% endif %}{% endfor %}{% endif %}
|
|
@@ -16,17 +16,17 @@
|
|
|
16
16
|
|
|
17
17
|
{{- params.text | safe -}}
|
|
18
18
|
|
|
19
|
-
{
|
|
20
|
-
{% if params.inputType == "checkbox" or params.inputType == "radio"
|
|
21
|
-
{%- if params.description is defined and params.description
|
|
22
|
-
{{ field | safe }}
|
|
23
|
-
{
|
|
24
|
-
{
|
|
19
|
+
{%- if params.inputType is defined and params.inputType -%}
|
|
20
|
+
{% if params.inputType == "checkbox" or params.inputType == "radio" -%}
|
|
21
|
+
{%- if params.description is defined and params.description -%}
|
|
22
|
+
{{- field | safe -}}
|
|
23
|
+
{%- endif -%}
|
|
24
|
+
{%- endif -%}
|
|
25
25
|
</label>
|
|
26
|
-
{
|
|
26
|
+
{%- else -%}
|
|
27
27
|
</label>
|
|
28
|
-
{%- if params.description is defined and params.description
|
|
29
|
-
{{ field | safe }}
|
|
30
|
-
{
|
|
31
|
-
{
|
|
28
|
+
{%- if params.description is defined and params.description -%}
|
|
29
|
+
{{- field | safe -}}
|
|
30
|
+
{%- endif -%}
|
|
31
|
+
{%- endif %}
|
|
32
32
|
{% endmacro %}
|
|
@@ -70,7 +70,7 @@
|
|
|
70
70
|
})
|
|
71
71
|
}}
|
|
72
72
|
{%- else -%}
|
|
73
|
-
<a href="{{ item.url }}" class="ons-list__link {% if item.
|
|
73
|
+
<a href="{{ item.url }}" class="ons-list__link {% if item.variants == 'inPageLink' %}ons-js-inpagelink {% endif %} {{ item.classes }}"{% if item.index is defined and item.index %} data-qa="list-item-{{ loop.index }}"{% endif %}{% if item.target is defined and item.target %} target="{{ item.target }}"{% endif %}{% if item.rel is defined and item.rel %} rel="{{ item.rel }}"{% endif %}>
|
|
74
74
|
{%- if item.prefix is defined and item.prefix -%}<span class="ons-u-vh">{{- item.prefix -}}</span>{%- endif -%} {{- itemText | safe -}}
|
|
75
75
|
{%- if item.target is defined and item.target == "_blank" -%}<span class="ons-u-vh">{{- item.screenreaderMessage | default("this link will open in a new tab") -}}</span>{%- endif -%}
|
|
76
76
|
</a>
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
</li>
|
|
42
42
|
{% endif %}
|
|
43
43
|
{% if currentPageIndex > 4 %}
|
|
44
|
-
<li class="ons-pagination__item ons-
|
|
44
|
+
<li class="ons-pagination__item ons-pagination__item--gap">…</li>
|
|
45
45
|
{% endif %}
|
|
46
46
|
{% for page in params.pages %}
|
|
47
47
|
{% if loop.index >= middlePagesStart and loop.index <= middlePagesEnd %}
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
{% endif %}
|
|
64
64
|
{% endfor %}
|
|
65
65
|
{% if currentPageIndex < totalPages - 3 %}
|
|
66
|
-
<li class="ons-pagination__item ons-
|
|
66
|
+
<li class="ons-pagination__item ons-pagination__item--gap">…</li>
|
|
67
67
|
{% endif %}
|
|
68
68
|
{% if currentPageIndex < totalPages - 2 %}
|
|
69
69
|
{% set lastPage = params.pages | last %}
|