@ons/design-system 67.0.0 → 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/README.md +3 -2
- 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 +3 -3
- 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/_header.scss +4 -0
- package/components/header/_macro.njk +23 -23
- package/components/icon/_macro.njk +30 -30
- package/components/input/_input-type.scss +2 -2
- package/components/input/_macro.njk +1 -1
- package/components/input/_macro.spec.js +4 -16
- package/components/input/input.dom.js +11 -0
- package/components/input/input.js +14 -0
- package/components/input/input.spec.js +28 -0
- 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/section-navigation/_macro.njk +20 -8
- package/components/section-navigation/_section-navigation.scss +20 -2
- package/components/summary/_macro.njk +2 -2
- package/components/table/_macro.njk +2 -2
- package/css/main.css +1 -1
- package/js/main.js +1 -0
- package/package.json +1 -1
- package/scripts/main.es5.js +1 -1
- package/scripts/main.js +1 -1
|
@@ -1,11 +1,14 @@
|
|
|
1
1
|
{% macro onsSectionNavigation(params) %}
|
|
2
|
+
{% set headingLevel = params.headingLevel | int | default(2) %}
|
|
3
|
+
{% set sectionTitleHeadingLevel = headingLevel + 1 %}
|
|
2
4
|
<nav class="ons-section-nav{% if params.variants == 'vertical' %} ons-section-nav--vertical{% endif %} {% if params.classes %} {{ params.classes }} {% endif %}"{% if params.id %} id="{{ params.id }}"{% endif %} aria-labelledby="{{ params.hiddenTitleId | default("section-menu-nav-title")}}">
|
|
3
|
-
<
|
|
5
|
+
<h{{ headingLevel }} class="ons-u-vh" id="{{ params.hiddenTitleId | default("section-menu-nav-title") }}">{{ params.hiddenTitle | default("Pages in this section") }}</h{{ headingLevel }}>
|
|
4
6
|
{% if params.sections %}
|
|
5
7
|
{% for section in params.sections %}
|
|
8
|
+
{% set sectionItemHeadingLevel = headingLevel + 2 if section.title else headingLevel + 1 %}
|
|
6
9
|
<div class="ons-section-nav__sub">
|
|
7
10
|
{% if section.title %}
|
|
8
|
-
<
|
|
11
|
+
<h{{ sectionTitleHeadingLevel }} class="ons-u-fs-r--b ons-u-mb-s">{{ section.title }}</h{{ sectionTitleHeadingLevel }}>
|
|
9
12
|
{% endif %}
|
|
10
13
|
<ul class="ons-section-nav__list">
|
|
11
14
|
{% for item in section.itemsList %}
|
|
@@ -14,9 +17,13 @@
|
|
|
14
17
|
{% else %}
|
|
15
18
|
{% set isCurrent = false %}
|
|
16
19
|
{% endif %}
|
|
17
|
-
<li class="ons-section-nav__item{% if item.classes %} ' ' +
|
|
18
|
-
|
|
19
|
-
|
|
20
|
+
<li class="ons-section-nav__item{% if item.classes %}{{ ' ' + item.classes }}{% endif %}{% if isCurrent == true %} ons-section-nav__item--active{% endif %}">
|
|
21
|
+
{% if isCurrent == true %}
|
|
22
|
+
<h{{ sectionItemHeadingLevel }} class="ons-section-nav__link ons-section-nav__item-header" href="{{ item.url }}" aria-current="location">{{ item.title }}</h{{ sectionItemHeadingLevel }}>
|
|
23
|
+
{% else %}
|
|
24
|
+
<a class="ons-section-nav__link" href="{{ item.url }}">{{ item.title }}</a>
|
|
25
|
+
{% endif %}
|
|
26
|
+
{% if item.anchors and isCurrent == true %}
|
|
20
27
|
<ul class="ons-section-nav__sub-items ons-list ons-list--dashed ons-u-mt-xs ons-u-mb-xs">
|
|
21
28
|
{% for anchor in item.anchors %}
|
|
22
29
|
<li class="ons-section-nav__item ons-list__item">
|
|
@@ -32,17 +39,22 @@
|
|
|
32
39
|
{% endfor %}
|
|
33
40
|
{% else %}
|
|
34
41
|
{% if params.title %}
|
|
35
|
-
<
|
|
42
|
+
<h{{ sectionTitleHeadingLevel }} class="ons-u-fs-r--b ons-u-mb-s">{{ params.title }}</h{{ sectionTitleHeadingLevel }}>
|
|
36
43
|
{% endif %}
|
|
37
44
|
<ul class="ons-section-nav__list">
|
|
38
45
|
{% for item in params.itemsList %}
|
|
46
|
+
{% set sectionItemHeadingLevel = headingLevel + 2 if params.title else headingLevel + 1 %}
|
|
39
47
|
{% if (params.currentPath and item.url == params.currentPath) or (params.tabQuery and params.tabQuery == item.title|lower) %}
|
|
40
48
|
{% set isCurrent = true %}
|
|
41
49
|
{% else %}
|
|
42
50
|
{% set isCurrent = false %}
|
|
43
51
|
{% endif %}
|
|
44
|
-
<li class="ons-section-nav__item{% if item.classes %} ' ' +
|
|
45
|
-
|
|
52
|
+
<li class="ons-section-nav__item{% if item.classes %}{{ ' ' + item.classes }}{% endif %}{% if isCurrent == true %} ons-section-nav__item--active{% endif %}">
|
|
53
|
+
{% if isCurrent == true %}
|
|
54
|
+
<h{{ sectionItemHeadingLevel}} class="ons-section-nav__link ons-section-nav__item-header" href="{{ item.url }}" aria-current="location">{{ item.title }}</h{{ headingLevel + 2 if section.title else headingLevel + 1 }}>
|
|
55
|
+
{% else %}
|
|
56
|
+
<a class="ons-section-nav__link" href="{{ item.url }}">{{ item.title }}</a>
|
|
57
|
+
{% endif %}
|
|
46
58
|
{% if item.anchors %}
|
|
47
59
|
<ul class="ons-section-nav__sub-items ons-list ons-list--dashed ons-u-mt-xs ons-u-mb-xs">
|
|
48
60
|
{% for anchor in item.anchors %}
|
|
@@ -30,7 +30,12 @@
|
|
|
30
30
|
font-weight: $font-weight-bold;
|
|
31
31
|
margin-left: -18px;
|
|
32
32
|
padding-left: 14px;
|
|
33
|
-
a
|
|
33
|
+
a,
|
|
34
|
+
h2,
|
|
35
|
+
h3,
|
|
36
|
+
h4,
|
|
37
|
+
h5,
|
|
38
|
+
h6 {
|
|
34
39
|
color: var(--ons-color-text-link-active);
|
|
35
40
|
}
|
|
36
41
|
}
|
|
@@ -39,6 +44,14 @@
|
|
|
39
44
|
}
|
|
40
45
|
}
|
|
41
46
|
|
|
47
|
+
&__item-header {
|
|
48
|
+
@extend .ons-u-mb-no;
|
|
49
|
+
|
|
50
|
+
font-size: 1rem;
|
|
51
|
+
font-weight: 700;
|
|
52
|
+
line-height: 1.6;
|
|
53
|
+
}
|
|
54
|
+
|
|
42
55
|
&__sub-items {
|
|
43
56
|
a {
|
|
44
57
|
color: var(--ons-color-text-link);
|
|
@@ -58,7 +71,12 @@
|
|
|
58
71
|
border-color: var(--ons-color-text-link-active);
|
|
59
72
|
margin: 0 1rem 0 0;
|
|
60
73
|
padding: 0;
|
|
61
|
-
a
|
|
74
|
+
a,
|
|
75
|
+
h2,
|
|
76
|
+
h3,
|
|
77
|
+
h4,
|
|
78
|
+
h5,
|
|
79
|
+
h6 {
|
|
62
80
|
color: var(--ons-color-text-link-active);
|
|
63
81
|
}
|
|
64
82
|
}
|
|
@@ -44,11 +44,11 @@
|
|
|
44
44
|
{% if rowItem.iconType %}
|
|
45
45
|
{% from "components/icon/_macro.njk" import onsIcon %}
|
|
46
46
|
<span class="ons-summary__item-title-icon{% if rowItem.iconType == 'check' %} ons-summary__item-title-icon--check{% endif %}">
|
|
47
|
-
{{
|
|
47
|
+
{{-
|
|
48
48
|
onsIcon({
|
|
49
49
|
"iconType": rowItem.iconType
|
|
50
50
|
})
|
|
51
|
-
}}
|
|
51
|
+
-}}
|
|
52
52
|
</span>
|
|
53
53
|
{% endif %}
|
|
54
54
|
|
|
@@ -18,13 +18,13 @@
|
|
|
18
18
|
<th scope="col" class="ons-table__header{{ ' ' + th.thClasses if th.thClasses }}{{ " ons-table__header--numeric" if th.numeric }}"{% if 'sortable' in variants %} aria-sort="{{- th.ariaSort | default('none') -}}"{% endif %}{% if th.widthPercentage %} width="{{ th.widthPercentage }}%"{% endif %}>
|
|
19
19
|
<span class="ons-table__header-text">{{- th.value -}}</span>
|
|
20
20
|
{% if 'sortable' in variants %}
|
|
21
|
-
{{
|
|
21
|
+
{{-
|
|
22
22
|
onsIcon({
|
|
23
23
|
"iconType": "sort-sprite",
|
|
24
24
|
"id": th.value | replace(' ', '-'),
|
|
25
25
|
"classes": 'ons-u-d-no'
|
|
26
26
|
})
|
|
27
|
-
}}
|
|
27
|
+
-}}
|
|
28
28
|
{% endif %}
|
|
29
29
|
</th>
|
|
30
30
|
{% endfor %}
|