@ons/design-system 72.10.9 → 72.10.10
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 +9 -5
- package/components/announcement-banner/_announcement-banner.scss +24 -0
- package/components/announcement-banner/_macro.njk +33 -0
- package/components/announcement-banner/_macro.spec.js +106 -0
- package/components/announcement-banner/_test_examples.js +22 -0
- package/components/announcement-banner/example-banner-black.njk +12 -0
- package/components/announcement-banner/example-banner-red.njk +13 -0
- package/components/announcement-banner/example-banner-teal.njk +13 -0
- package/components/button/_button.scss +29 -1
- package/components/chart/_chart.scss +3 -0
- package/components/chart/_macro.njk +10 -4
- package/components/chart/_macro.spec.js +1150 -642
- package/components/chart/chart-iframe-resize.js +2 -2
- package/components/chart/example-iframe-chart.njk +1 -1
- package/components/duration/example-duration-error-for-single-field.njk +0 -1
- package/components/duration/example-duration-error.njk +0 -1
- package/components/footer/_macro.spec.js +2 -2
- package/components/header/_macro.njk +5 -16
- package/components/header/example-header-button-and-navigation.njk +133 -0
- package/components/header/example-header-external-with-navigation-and-search.njk +1 -1
- package/components/navigation/_macro.njk +11 -16
- package/components/navigation/_navigation.scss +24 -0
- package/components/table/_macro.njk +107 -112
- package/components/table/_macro.spec.js +35 -44
- package/components/table/_table.scss +0 -12
- package/components/table/example-table-sortable.njk +1 -1
- package/components/tabs/example-tabs-details.njk +1 -1
- package/components/textarea/_macro.njk +1 -0
- package/components/textarea/_macro.spec.js +1 -0
- package/components/timeout-panel/timeout-panel.spec.js +1 -1
- package/css/main.css +1 -1
- package/layout/_template.njk +13 -0
- package/package.json +3 -3
- package/scripts/main.es5.js +1 -1
- package/scripts/main.js +1 -1
- package/scss/main.scss +1 -0
- package/scss/vars/_colors.scss +3 -0
- package/scss/vars/_forms.scss +11 -0
- package/components/table/example-table-scrollable.njk +0 -158
|
@@ -2,12 +2,12 @@ import pym from 'pym.js';
|
|
|
2
2
|
|
|
3
3
|
class ChartIframeResize {
|
|
4
4
|
static selector() {
|
|
5
|
-
return '.ons-chart__iframe-wrapper';
|
|
5
|
+
return '.ons-chart__iframe-wrapper iframe';
|
|
6
6
|
}
|
|
7
7
|
|
|
8
8
|
constructor(node) {
|
|
9
9
|
this.node = node;
|
|
10
|
-
new pym.
|
|
10
|
+
new pym.Child(this.node.getAttribute('id'), this.node.dataset.url, {
|
|
11
11
|
title: this.node.dataset.title,
|
|
12
12
|
});
|
|
13
13
|
}
|
|
@@ -27,7 +27,7 @@ may not be available in the future once Florence is decommissioned. #}
|
|
|
27
27
|
}
|
|
28
28
|
]
|
|
29
29
|
},
|
|
30
|
-
"iframeUrl": "
|
|
30
|
+
"iframeUrl": "/iframe/index.html",
|
|
31
31
|
"fallbackImageUrl": "/img/small/line-chart-screenshot.png"
|
|
32
32
|
})
|
|
33
33
|
}}
|
|
@@ -412,12 +412,12 @@ describe('macro: footer', () => {
|
|
|
412
412
|
});
|
|
413
413
|
});
|
|
414
414
|
describe('correct link for language', () => {
|
|
415
|
-
it('has the Welsh lang link when the default Welsh lang
|
|
415
|
+
it('has the Welsh lang link when the default Welsh lang ONS icon is present', () => {
|
|
416
416
|
const $ = cheerio.load(renderComponent('footer', { lang: 'cy' }));
|
|
417
417
|
|
|
418
418
|
expect($('.ons-footer__logo-link').attr('href')).toBe('https://cy.ons.gov.uk/');
|
|
419
419
|
});
|
|
420
|
-
it('has the English lang link when the default English lang
|
|
420
|
+
it('has the English lang link when the default English lang ONS icon is present', () => {
|
|
421
421
|
const $ = cheerio.load(renderComponent('footer', { lang: 'en' }));
|
|
422
422
|
|
|
423
423
|
expect($('.ons-footer__logo-link').attr('href')).toBe('https://www.ons.gov.uk/');
|
|
@@ -461,17 +461,12 @@
|
|
|
461
461
|
</div>
|
|
462
462
|
|
|
463
463
|
{% if params.button %}
|
|
464
|
-
{% if params.variants == 'neutral' %}
|
|
465
|
-
{% set buttonVariant = "ghost-dark" %}
|
|
466
|
-
{% else %}
|
|
467
|
-
{% set buttonVariant = "ghost" %}
|
|
468
|
-
{% endif %}
|
|
469
464
|
<div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink">
|
|
470
465
|
{{
|
|
471
466
|
onsButton({
|
|
472
467
|
"text": params.button.text,
|
|
473
468
|
"classes": "ons-u-d-no@2xs@l" if params.navigation else "ons-u-d-no@2xs@m",
|
|
474
|
-
"variants":
|
|
469
|
+
"variants": "ghost",
|
|
475
470
|
"name": params.button.name,
|
|
476
471
|
"attributes": params.button.attributes,
|
|
477
472
|
"url": params.button.url,
|
|
@@ -482,19 +477,14 @@
|
|
|
482
477
|
</div>
|
|
483
478
|
{% endif %}
|
|
484
479
|
{% if params.navigation or params.siteSearchAutosuggest %}
|
|
485
|
-
<div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink">
|
|
480
|
+
<div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@l">
|
|
486
481
|
{% if params.siteSearchAutosuggest %}
|
|
487
|
-
|
|
488
|
-
{% set buttonVariant = ["small", "ghost-dark"] %}
|
|
489
|
-
{% else %}
|
|
490
|
-
{% set buttonVariant = ["small", "ghost"] %}
|
|
491
|
-
{% endif %}
|
|
492
|
-
<span class="ons-grid ons-u-d-no@2xs@xs ons-u-ml-no ons-u-d-no@l">
|
|
482
|
+
<span class="ons-grid ons-u-ml-no ons-u-d-no@2xs@xs">
|
|
493
483
|
{{
|
|
494
484
|
onsButton({
|
|
495
485
|
"text": params.searchLinks.searchNavigationButtonText | default('Search'),
|
|
496
486
|
"classes": "ons-btn--search ons-u-ml-2xs ons-u-d-no ons-js-toggle-search",
|
|
497
|
-
"variants":
|
|
487
|
+
"variants": ["small", "ghost"],
|
|
498
488
|
"iconType": "search",
|
|
499
489
|
"iconPosition": "only",
|
|
500
490
|
"attributes": {
|
|
@@ -507,12 +497,11 @@
|
|
|
507
497
|
</span>
|
|
508
498
|
{% endif %}
|
|
509
499
|
{% if params.navigation.toggleNavigationButton %}
|
|
510
|
-
{% set buttonVariant = ["mobile", "ghost"] %}
|
|
511
500
|
{{
|
|
512
501
|
onsButton({
|
|
513
502
|
"text": params.navigation.toggleNavigationButton.text,
|
|
514
503
|
"classes": "ons-u-ml-2xs ons-u-d-no ons-js-navigation-button ons-u-d-no@l",
|
|
515
|
-
"variants":
|
|
504
|
+
"variants": ["mobile", "ghost"],
|
|
516
505
|
"attributes": {
|
|
517
506
|
"aria-label": params.navigation.toggleNavigationButton.ariaLabel | default("Toggle main menu") ,
|
|
518
507
|
"aria-controls": params.navigation.id,
|
|
@@ -0,0 +1,133 @@
|
|
|
1
|
+
---
|
|
2
|
+
'fullWidth': true
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
{% from "components/header/_macro.njk" import onsHeader %}
|
|
6
|
+
|
|
7
|
+
{{
|
|
8
|
+
onsHeader({
|
|
9
|
+
"title": 'ONS Service',
|
|
10
|
+
"mastheadLogoUrl": '#0',
|
|
11
|
+
"button": {
|
|
12
|
+
"text": 'Save and sign out',
|
|
13
|
+
"name": 'button-name',
|
|
14
|
+
"attributes": {
|
|
15
|
+
"a": 'b'
|
|
16
|
+
},
|
|
17
|
+
"url": '#0'
|
|
18
|
+
},
|
|
19
|
+
"navigation": {
|
|
20
|
+
"id": 'main-nav',
|
|
21
|
+
"ariaLabel": 'Main menu',
|
|
22
|
+
"currentPath": '#menu-item-3',
|
|
23
|
+
"currentPageTitle": 'Design system',
|
|
24
|
+
"itemsList": [
|
|
25
|
+
{
|
|
26
|
+
"text": 'Menu item 1',
|
|
27
|
+
"url": '#0'
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
"text": 'Menu item 2',
|
|
31
|
+
"url": '#menu-item-2'
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
"text": 'Menu item 3',
|
|
35
|
+
"url": '#0'
|
|
36
|
+
}
|
|
37
|
+
],
|
|
38
|
+
"toggleNavigationButton": {
|
|
39
|
+
"text": 'Menu',
|
|
40
|
+
"ariaLabel": 'Toggle main menu'
|
|
41
|
+
},
|
|
42
|
+
"subNavigation": {
|
|
43
|
+
"id": 'sub-nav',
|
|
44
|
+
"overviewUrl": '#design-system',
|
|
45
|
+
"overviewText": 'Overview',
|
|
46
|
+
"ariaLabel": 'Section menu',
|
|
47
|
+
"currentPath": '#access-codes',
|
|
48
|
+
"itemsList": [
|
|
49
|
+
{
|
|
50
|
+
"text": 'Guidance',
|
|
51
|
+
"url": '#menu-item-3'
|
|
52
|
+
},
|
|
53
|
+
{
|
|
54
|
+
"text": 'Foundations',
|
|
55
|
+
"url": '#0'
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
"text": 'Components',
|
|
59
|
+
"url": '#0'
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
"text": 'Patterns',
|
|
63
|
+
"url": '#patterns',
|
|
64
|
+
"sections": [
|
|
65
|
+
{
|
|
66
|
+
"sectionTitle": 'Ask users for...',
|
|
67
|
+
"children": [
|
|
68
|
+
{
|
|
69
|
+
"title": 'Access codes',
|
|
70
|
+
"url": '#access-codes'
|
|
71
|
+
},
|
|
72
|
+
{
|
|
73
|
+
"title": 'Addresses',
|
|
74
|
+
"url": '#0'
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
"title": 'Dates',
|
|
78
|
+
"url": '#0'
|
|
79
|
+
},
|
|
80
|
+
{
|
|
81
|
+
"title": 'Durations',
|
|
82
|
+
"url": '#0'
|
|
83
|
+
},
|
|
84
|
+
{
|
|
85
|
+
"title": 'Email addresses',
|
|
86
|
+
"url": '#0'
|
|
87
|
+
},
|
|
88
|
+
{
|
|
89
|
+
"title": 'Numeric values',
|
|
90
|
+
"url": '#0'
|
|
91
|
+
},
|
|
92
|
+
{
|
|
93
|
+
"title": 'Phone numbers',
|
|
94
|
+
"url": '#0'
|
|
95
|
+
}
|
|
96
|
+
]
|
|
97
|
+
},
|
|
98
|
+
{
|
|
99
|
+
"sectionTitle": 'Help users to...',
|
|
100
|
+
"children": [
|
|
101
|
+
{
|
|
102
|
+
"title": 'Access support in multiple languages',
|
|
103
|
+
"url": '#0'
|
|
104
|
+
},
|
|
105
|
+
{
|
|
106
|
+
"title": 'Change language',
|
|
107
|
+
"url": '#0'
|
|
108
|
+
},
|
|
109
|
+
{
|
|
110
|
+
"title": 'Check answers',
|
|
111
|
+
"url": '#0'
|
|
112
|
+
},
|
|
113
|
+
{
|
|
114
|
+
"title": 'Control cookies',
|
|
115
|
+
"url": '#0'
|
|
116
|
+
},
|
|
117
|
+
{
|
|
118
|
+
"title": 'Correct errors',
|
|
119
|
+
"url": '#0'
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
"title": 'Extend a session',
|
|
123
|
+
"url": '#0'
|
|
124
|
+
}
|
|
125
|
+
]
|
|
126
|
+
}
|
|
127
|
+
]
|
|
128
|
+
}
|
|
129
|
+
]
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
})
|
|
133
|
+
}}
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
}
|
|
41
41
|
},
|
|
42
42
|
"siteSearchAutosuggest": {
|
|
43
|
-
"autosuggestData":
|
|
43
|
+
"autosuggestData": "/examples/data/country-of-birth.json",
|
|
44
44
|
"label": "search",
|
|
45
45
|
"instructions": "instructions",
|
|
46
46
|
"ariaYouHaveSelected": "ariaYouHaveSelected",
|
|
@@ -7,25 +7,18 @@
|
|
|
7
7
|
>
|
|
8
8
|
{% if params.siteSearchAutosuggest %}
|
|
9
9
|
<div class="ons-navigation-search ons-js-navigation-search">
|
|
10
|
-
{% set autosuggestClasses = "ons-input-search ons-input-search--icon" %}
|
|
11
|
-
{% set autosuggestLabelClasses = "ons-u-pl-xl" %}
|
|
12
|
-
{% if params.variants == "neutral" %}
|
|
13
|
-
{% set autosuggestClasses = autosuggestClasses + ' ons-input-search--dark' %}
|
|
14
|
-
{% else %}
|
|
15
|
-
{% set autosuggestLabelClasses = autosuggestLabelClasses + ' ons-label--white' %}
|
|
16
|
-
{% endif %}
|
|
17
10
|
{{
|
|
18
11
|
onsAutosuggest({
|
|
19
12
|
"id": "ons-site-search",
|
|
20
13
|
"containerClasses": "ons-autosuggest--header",
|
|
21
14
|
"input": {
|
|
22
|
-
"classes":
|
|
15
|
+
"classes": "ons-input-search ons-input-search--icon",
|
|
23
16
|
"accessiblePlaceholder": true,
|
|
24
17
|
"autocomplete": "off",
|
|
25
18
|
"label": {
|
|
26
19
|
"text": params.siteSearchAutosuggest.label,
|
|
27
20
|
"id": "ons-site-search-label",
|
|
28
|
-
"classes":
|
|
21
|
+
"classes": "ons-u-pl-xl ons-label--white"
|
|
29
22
|
}
|
|
30
23
|
},
|
|
31
24
|
"instructions": params.siteSearchAutosuggest.instructions,
|
|
@@ -48,13 +41,13 @@
|
|
|
48
41
|
<nav
|
|
49
42
|
class="ons-navigation ons-navigation--main ons-js-navigation"
|
|
50
43
|
id="{{ params.navigation.id }}"
|
|
51
|
-
aria-label="{{ params.navigation.ariaLabel | default(
|
|
44
|
+
aria-label="{{ params.navigation.ariaLabel | default('Main menu') }}"
|
|
52
45
|
data-analytics="header-navigation"
|
|
53
46
|
>
|
|
54
47
|
<ul class="ons-navigation__list">
|
|
55
48
|
{% for item in params.navigation.itemsList %}
|
|
56
49
|
<li
|
|
57
|
-
class="ons-navigation__item
|
|
50
|
+
class="ons-navigation__item{{ ' ' + item.classes if item.classes }}{{ ' ons-navigation__item--active' if (item.url == params.navigation.currentPath) or (params.navigation.currentPath is not string and item.url in params.navigation.currentPath) }}"
|
|
58
51
|
>
|
|
59
52
|
<a
|
|
60
53
|
class="ons-navigation__link"
|
|
@@ -76,7 +69,7 @@
|
|
|
76
69
|
{% if params.navigation.subNavigation %}
|
|
77
70
|
{% if not params.navigation.subNavigation.removeHorizontalSubNav %}
|
|
78
71
|
<nav
|
|
79
|
-
class="ons-navigation ons-
|
|
72
|
+
class="ons-navigation ons-u-d-no@2xs@l{{ ' ons-navigation--sub-neutral' if params.variants == 'neutral' else ' ons-navigation--sub' }}{{ ' ' + params.navigation.subNavigation.classes if params.navigation.subNavigation.classes else '' }}"
|
|
80
73
|
id="{{ params.navigation.subNavigation.id }}"
|
|
81
74
|
aria-label="{{ params.navigation.subNavigation.ariaLabel | default('Section menu') }}"
|
|
82
75
|
data-analytics="header-section-navigation"
|
|
@@ -90,7 +83,7 @@
|
|
|
90
83
|
class="ons-navigation__item{{ ' ' + item.classes if item.classes else '' }}{{ ' ons-navigation__item--active' if (item.url == params.navigation.currentPath) or (params.navigation.currentPath is not string and item.url in params.navigation.currentPath) }}"
|
|
91
84
|
>
|
|
92
85
|
<a
|
|
93
|
-
class="ons-navigation__link
|
|
86
|
+
class="ons-navigation__link"
|
|
94
87
|
href="{{ item.url }}"
|
|
95
88
|
{% if item.ariaLabel %}aria-label="{{ item.ariaLabel }}"{% endif %}
|
|
96
89
|
{% if item.id %}id="{{ item.id }}"{% endif %}
|
|
@@ -107,7 +100,9 @@
|
|
|
107
100
|
</div>
|
|
108
101
|
</nav>
|
|
109
102
|
{% endif %}
|
|
110
|
-
<div
|
|
103
|
+
<div
|
|
104
|
+
class="ons-u-d-no@l{{ ' ons-navigation--neutral' if params.variants == 'neutral' else '' }}{{ ' ' + params.navigation.subNavigation.classes if params.navigation.subNavigation.classes else '' }}"
|
|
105
|
+
>
|
|
111
106
|
{{
|
|
112
107
|
onsButton({
|
|
113
108
|
"text": params.navigation.currentPageTitle,
|
|
@@ -122,10 +117,10 @@
|
|
|
122
117
|
})
|
|
123
118
|
}}
|
|
124
119
|
<nav
|
|
125
|
-
class="ons-navigation ons-navigation--sub-mobile ons-u-d-no ons-js-secondary-nav ons-u-mt-2xs"
|
|
120
|
+
class="ons-navigation ons-navigation--sub-mobile ons-u-d-no ons-js-secondary-nav ons-u-mt-2xs{{ ' ons-navigation--sub-neutral' if params.variants == 'neutral' else '' }}"
|
|
126
121
|
id="{{ params.navigation.subNavigation.id }}--mobile"
|
|
127
122
|
aria-hidden="true"
|
|
128
|
-
aria-label="{{ params.navigation.subNavigation.ariaLabel | default(
|
|
123
|
+
aria-label="{{ params.navigation.subNavigation.ariaLabel | default('Section menu') }}"
|
|
129
124
|
data-analytics="header-section-navigation"
|
|
130
125
|
>
|
|
131
126
|
<div
|
|
@@ -14,6 +14,11 @@
|
|
|
14
14
|
padding-top: 0.5rem;
|
|
15
15
|
}
|
|
16
16
|
|
|
17
|
+
&--sub-neutral {
|
|
18
|
+
background: var(--ons-color-grey-15);
|
|
19
|
+
padding-top: 0.5rem;
|
|
20
|
+
}
|
|
21
|
+
|
|
17
22
|
&--sub-mobile {
|
|
18
23
|
border-bottom: 4px solid var(--ons-color-branded-tint);
|
|
19
24
|
}
|
|
@@ -125,6 +130,25 @@
|
|
|
125
130
|
}
|
|
126
131
|
}
|
|
127
132
|
|
|
133
|
+
&--sub-neutral & {
|
|
134
|
+
&__link,
|
|
135
|
+
&__link:hover,
|
|
136
|
+
&__link:focus {
|
|
137
|
+
color: var(--ons-color-black);
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
&__item {
|
|
141
|
+
&:hover,
|
|
142
|
+
&--active {
|
|
143
|
+
border-color: var(--ons-color-black);
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
&--sub-mobile.ons-navigation--sub-neutral {
|
|
149
|
+
background: var(--ons-color-white);
|
|
150
|
+
}
|
|
151
|
+
|
|
128
152
|
&__item--active > &__link {
|
|
129
153
|
font-weight: $font-weight-bold;
|
|
130
154
|
}
|
|
@@ -19,120 +19,115 @@
|
|
|
19
19
|
{% endfor %}
|
|
20
20
|
{% endfor %}
|
|
21
21
|
|
|
22
|
-
|
|
23
|
-
<
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
{% endif %}
|
|
22
|
+
<div class="ons-table-scrollable ons-table-scrollable--on">
|
|
23
|
+
<div
|
|
24
|
+
class="ons-table-scrollable__content"
|
|
25
|
+
tabindex="0"
|
|
26
|
+
role="region"
|
|
27
|
+
aria-label="{{ params.caption }}. {{ params.ariaLabel | default('Scrollable table') }}"
|
|
29
28
|
>
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
<thead class="ons-table__head">
|
|
36
|
-
{# Uses thList if multiple-row headers, otherwise wrap single ths array into a default group #}
|
|
37
|
-
{% if params.thList %}
|
|
38
|
-
{% set thGroups = params.thList %}
|
|
39
|
-
{% else %}
|
|
40
|
-
{% set thGroups = [ { ths: params.ths } ] %}
|
|
29
|
+
<table
|
|
30
|
+
{% if params.id %}id="{{ params.id }}"{% endif %}
|
|
31
|
+
class="ons-table{{ ' ' + params.tableClasses if params.tableClasses else '' }}{% if hasRowSpan %}{{ ' ' }}ons-table--has-rowspan{% endif %}{% if variants %}{% if variants is not string %}{% for variant in variants %}{{ ' ' }}ons-table--{{ variant }}{% endfor %}{% else %}{{ ' ' }}ons-table--{{ variants }}{% endif %}{% endif %}"
|
|
32
|
+
{% if params.sortBy and 'sortable' in variants %}
|
|
33
|
+
data-aria-sort="{{ params.sortBy }}" data-aria-asc="{{ params.ariaAsc }}" data-aria-desc="{{ params.ariaDesc }}"
|
|
41
34
|
{% endif %}
|
|
42
|
-
{% for headerCols in thGroups %}
|
|
43
|
-
<tr class="ons-table__row">
|
|
44
|
-
{% for th in headerCols.ths %}
|
|
45
|
-
<th
|
|
46
|
-
scope="col"
|
|
47
|
-
class="ons-table__header{{ ' ' + th.thClasses if th.thClasses else '' }}{{ ' ons-table__header--numeric' if th.numeric }}"
|
|
48
|
-
{% if th.colspan %}colspan="{{ th.colspan }}"{% endif %}
|
|
49
|
-
{% if th.rowspan %}rowspan="{{ th.rowspan }}"{% endif %}
|
|
50
|
-
{% if 'sortable' in variants %}aria-sort="{{ th.ariaSort | default('none') }}"{% endif %}
|
|
51
|
-
{% if th.widthPercentage %}width="{{ th.widthPercentage }}%"{% endif %}
|
|
52
|
-
>
|
|
53
|
-
<span class="ons-table__header-text">{{ th.value | safe }}</span>
|
|
54
|
-
{% if 'sortable' in variants %}
|
|
55
|
-
{{-
|
|
56
|
-
onsIcon({
|
|
57
|
-
"iconType": "sort-sprite",
|
|
58
|
-
"id": th.value | replace(' ', '-'),
|
|
59
|
-
"classes": 'ons-u-d-no'
|
|
60
|
-
})
|
|
61
|
-
-}}
|
|
62
|
-
{% endif %}
|
|
63
|
-
</th>
|
|
64
|
-
{% endfor %}
|
|
65
|
-
</tr>
|
|
66
|
-
{% endfor %}
|
|
67
|
-
</thead>
|
|
68
|
-
<tbody class="ons-table__body">
|
|
69
|
-
{% for tr in params.trs %}
|
|
70
|
-
<tr class="ons-table__row{{ ' ons-table__row--highlight' if tr.highlight }}" {% if tr.id %}id="{{ tr.id }}"{% endif %}>
|
|
71
|
-
{% for td in tr.tds %}
|
|
72
|
-
{% if td.heading == true %}
|
|
73
|
-
{% set openingTag = '<th' %}
|
|
74
|
-
{% set closingTag = '</th>' %}
|
|
75
|
-
{% else %}
|
|
76
|
-
{% set openingTag = '<td' %}
|
|
77
|
-
{% set closingTag = '</td>' %}
|
|
78
|
-
{% endif %}
|
|
79
|
-
{% set isFirstRow = loop.index == 0 and td.rowspan %}
|
|
80
|
-
{% set rowSpan = isFirstRow and loop.index0 == rowspanCount %}
|
|
81
|
-
{{ openingTag | safe }}
|
|
82
|
-
class="ons-table__cell{{ ' ' + td.tdClasses if td.tdClasses else '' }}{{ ' ons-table__cell--numeric' if td.numeric }}"
|
|
83
|
-
{% if td.id %}id="{{ td.id }}"{% endif %}
|
|
84
|
-
{% if td.data %}{{ ' ' }}data-th="{{ td.data }}"{% endif %}
|
|
85
|
-
{% if td.colspan %}colspan="{{ td.colspan }}"{% endif %}
|
|
86
|
-
{% if td.rowspan %}rowspan="{{ td.rowspan }}"{% endif %}
|
|
87
|
-
{% if td.dataSort %}{{ ' ' }}data-sort-value="{{ td.dataSort }}"{% endif %}
|
|
88
|
-
{% if td.heading %}scope="row"{% endif %}
|
|
89
|
-
>
|
|
90
|
-
{% if td.form %}
|
|
91
|
-
<form action="{{ td.form.action }}" method="{{ td.form.method | default('POST') }}">
|
|
92
|
-
{{ onsButton(td.form.button) }}
|
|
93
|
-
{% if td.form.hiddenFormField %}
|
|
94
|
-
{% for hiddenField in td.form.hiddenFormField %}
|
|
95
|
-
<input
|
|
96
|
-
type="hidden"
|
|
97
|
-
{% if hiddenField.name %}name="{{ hiddenField.name }}"{% endif %}
|
|
98
|
-
{% if hiddenField.value %}value="{{ hiddenField.value }}"{% endif %}
|
|
99
|
-
/>
|
|
100
|
-
{% endfor %}
|
|
101
|
-
{% endif %}
|
|
102
|
-
</form>
|
|
103
|
-
{% endif %}
|
|
104
|
-
{% if td.value %}
|
|
105
|
-
{{ td.value | safe }}
|
|
106
|
-
{% endif %}
|
|
107
|
-
{{ closingTag | safe }}
|
|
108
|
-
{% endfor %}
|
|
109
|
-
</tr>
|
|
110
|
-
{% endfor %}
|
|
111
|
-
</tbody>
|
|
112
|
-
{% if params.tfoot %}
|
|
113
|
-
<tfoot class="ons-table__foot">
|
|
114
|
-
<tr class="ons-table__row">
|
|
115
|
-
{% for tfootCell in params.tfoot %}
|
|
116
|
-
<td class="ons-table__cell ons-u-fs-s">{{ tfootCell.value }}</td>
|
|
117
|
-
{% endfor %}
|
|
118
|
-
</tr>
|
|
119
|
-
</tfoot>
|
|
120
|
-
{% endif %}
|
|
121
|
-
</table>
|
|
122
|
-
{% endset %}
|
|
123
|
-
|
|
124
|
-
{% if 'scrollable' in variants %}
|
|
125
|
-
<div class="ons-table-scrollable ons-table-scrollable--on">
|
|
126
|
-
<div
|
|
127
|
-
class="ons-table-scrollable__content"
|
|
128
|
-
tabindex="0"
|
|
129
|
-
role="region"
|
|
130
|
-
aria-label="{{ params.caption }}. {{ params.ariaLabel | default('Scrollable table') }}"
|
|
131
35
|
>
|
|
132
|
-
{
|
|
133
|
-
|
|
36
|
+
{% if params.caption %}
|
|
37
|
+
<caption class="ons-table__caption{{ " ons-u-vh" if params.hideCaption }}">
|
|
38
|
+
{{ params.caption }}
|
|
39
|
+
</caption>
|
|
40
|
+
{% endif %}
|
|
41
|
+
<thead class="ons-table__head">
|
|
42
|
+
{# Uses thList if multiple-row headers, otherwise wrap single ths array into a default group #}
|
|
43
|
+
{% if params.thList %}
|
|
44
|
+
{% set thGroups = params.thList %}
|
|
45
|
+
{% else %}
|
|
46
|
+
{% set thGroups = [ { ths: params.ths } ] %}
|
|
47
|
+
{% endif %}
|
|
48
|
+
{% for headerCols in thGroups %}
|
|
49
|
+
<tr class="ons-table__row">
|
|
50
|
+
{% for th in headerCols.ths %}
|
|
51
|
+
<th
|
|
52
|
+
scope="col"
|
|
53
|
+
class="ons-table__header{{ ' ' + th.thClasses if th.thClasses else '' }}{{ ' ons-table__header--numeric' if th.numeric }}"
|
|
54
|
+
{% if th.colspan %}colspan="{{ th.colspan }}"{% endif %}
|
|
55
|
+
{% if th.rowspan %}rowspan="{{ th.rowspan }}"{% endif %}
|
|
56
|
+
{% if 'sortable' in variants %}aria-sort="{{ th.ariaSort | default('none') }}"{% endif %}
|
|
57
|
+
{% if th.widthPercentage %}width="{{ th.widthPercentage }}%"{% endif %}
|
|
58
|
+
>
|
|
59
|
+
<span class="ons-table__header-text">{{ th.value | safe }}</span>
|
|
60
|
+
{% if 'sortable' in variants %}
|
|
61
|
+
{{-
|
|
62
|
+
onsIcon({
|
|
63
|
+
"iconType": "sort-sprite",
|
|
64
|
+
"id": th.value | replace(' ', '-'),
|
|
65
|
+
"classes": 'ons-u-d-no'
|
|
66
|
+
})
|
|
67
|
+
-}}
|
|
68
|
+
{% endif %}
|
|
69
|
+
</th>
|
|
70
|
+
{% endfor %}
|
|
71
|
+
</tr>
|
|
72
|
+
{% endfor %}
|
|
73
|
+
</thead>
|
|
74
|
+
<tbody class="ons-table__body">
|
|
75
|
+
{% for tr in params.trs %}
|
|
76
|
+
<tr
|
|
77
|
+
class="ons-table__row{{ ' ons-table__row--highlight' if tr.highlight }}"
|
|
78
|
+
{% if tr.id %}id="{{ tr.id }}"{% endif %}
|
|
79
|
+
>
|
|
80
|
+
{% for td in tr.tds %}
|
|
81
|
+
{% if td.heading == true %}
|
|
82
|
+
{% set openingTag = '<th' %}
|
|
83
|
+
{% set closingTag = '</th>' %}
|
|
84
|
+
{% else %}
|
|
85
|
+
{% set openingTag = '<td' %}
|
|
86
|
+
{% set closingTag = '</td>' %}
|
|
87
|
+
{% endif %}
|
|
88
|
+
{% set isFirstRow = loop.index == 0 and td.rowspan %}
|
|
89
|
+
{% set rowSpan = isFirstRow and loop.index0 == rowspanCount %}
|
|
90
|
+
{{ openingTag | safe }}
|
|
91
|
+
class="ons-table__cell{{ ' ' + td.tdClasses if td.tdClasses else '' }}{{ ' ons-table__cell--numeric' if td.numeric }}"
|
|
92
|
+
{% if td.id %}id="{{ td.id }}"{% endif %}
|
|
93
|
+
{% if td.data %}{{ ' ' }}data-th="{{ td.data }}"{% endif %}
|
|
94
|
+
{% if td.colspan %}colspan="{{ td.colspan }}"{% endif %}
|
|
95
|
+
{% if td.rowspan %}rowspan="{{ td.rowspan }}"{% endif %}
|
|
96
|
+
{% if td.dataSort %}{{ ' ' }}data-sort-value="{{ td.dataSort }}"{% endif %}
|
|
97
|
+
{% if td.heading %}scope="row"{% endif %}
|
|
98
|
+
>
|
|
99
|
+
{% if td.form %}
|
|
100
|
+
<form action="{{ td.form.action }}" method="{{ td.form.method | default('POST') }}">
|
|
101
|
+
{{ onsButton(td.form.button) }}
|
|
102
|
+
{% if td.form.hiddenFormField %}
|
|
103
|
+
{% for hiddenField in td.form.hiddenFormField %}
|
|
104
|
+
<input
|
|
105
|
+
type="hidden"
|
|
106
|
+
{% if hiddenField.name %}name="{{ hiddenField.name }}"{% endif %}
|
|
107
|
+
{% if hiddenField.value %}value="{{ hiddenField.value }}"{% endif %}
|
|
108
|
+
/>
|
|
109
|
+
{% endfor %}
|
|
110
|
+
{% endif %}
|
|
111
|
+
</form>
|
|
112
|
+
{% endif %}
|
|
113
|
+
{% if td.value %}
|
|
114
|
+
{{ td.value | safe }}
|
|
115
|
+
{% endif %}
|
|
116
|
+
{{ closingTag | safe }}
|
|
117
|
+
{% endfor %}
|
|
118
|
+
</tr>
|
|
119
|
+
{% endfor %}
|
|
120
|
+
</tbody>
|
|
121
|
+
{% if params.tfoot %}
|
|
122
|
+
<tfoot class="ons-table__foot">
|
|
123
|
+
<tr class="ons-table__row">
|
|
124
|
+
{% for tfootCell in params.tfoot %}
|
|
125
|
+
<td class="ons-table__cell ons-u-fs-s">{{ tfootCell.value }}</td>
|
|
126
|
+
{% endfor %}
|
|
127
|
+
</tr>
|
|
128
|
+
</tfoot>
|
|
129
|
+
{% endif %}
|
|
130
|
+
</table>
|
|
134
131
|
</div>
|
|
135
|
-
|
|
136
|
-
{{ table | safe }}
|
|
137
|
-
{% endif %}
|
|
132
|
+
</div>
|
|
138
133
|
{% endmacro %}
|