@madgex/design-system 1.46.7 → 1.47.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/coverage/cobertura-coverage.xml +1 -1
- package/coverage/components/accordion/accordion.js.html +1 -1
- package/coverage/components/accordion/index.html +1 -1
- package/coverage/components/inputs/combobox/vue-components/Combobox.vue.html +1 -1
- package/coverage/components/inputs/combobox/vue-components/index.html +1 -1
- package/coverage/components/inputs/multi-select/vue-components/MultiSelect.vue.html +1 -1
- package/coverage/components/inputs/multi-select/vue-components/MultiSelectCheckbox.vue.html +1 -1
- package/coverage/components/inputs/multi-select/vue-components/MultiSelectCheckboxGroup.vue.html +1 -1
- package/coverage/components/inputs/multi-select/vue-components/index.html +1 -1
- package/coverage/components/modal/index.html +1 -1
- package/coverage/components/modal/modal.js.html +1 -1
- package/coverage/components/notification/index.html +1 -1
- package/coverage/components/notification/notification.js.html +1 -1
- package/coverage/components/popover/index.html +1 -1
- package/coverage/components/popover/popover.js.html +1 -1
- package/coverage/components/switch-state/index.html +1 -1
- package/coverage/components/switch-state/switch-state.js.html +1 -1
- package/coverage/components/tabs/index.html +1 -1
- package/coverage/components/tabs/tabs.js.html +1 -1
- package/coverage/index.html +1 -1
- package/coverage/js/common.js.html +1 -1
- package/coverage/js/fractal-scripts/combobox.js.html +1 -1
- package/coverage/js/fractal-scripts/index.html +1 -1
- package/coverage/js/fractal-scripts/multiselect.js.html +1 -1
- package/coverage/js/fractal-scripts/notification.js.html +1 -1
- package/coverage/js/fractal-scripts/switch-state.js.html +1 -1
- package/coverage/js/index-fractal.js.html +1 -1
- package/coverage/js/index-polyfills.js.html +1 -1
- package/coverage/js/index-vue.js.html +1 -1
- package/coverage/js/index.html +1 -1
- package/coverage/js/index.js.html +1 -1
- package/coverage/js/polyfills/closest.js.html +1 -1
- package/coverage/js/polyfills/index.html +1 -1
- package/coverage/js/polyfills/remove.js.html +1 -1
- package/coverage/tokens/_config.js.html +1 -1
- package/coverage/tokens/index.html +1 -1
- package/dist/_tokens/css/_tokens.css +1 -1
- package/dist/_tokens/js/_tokens-module.js +1 -1
- package/dist/_tokens/scss/_tokens.scss +1 -1
- package/docs/tokens/breakpoints.njk +13 -0
- package/package.json +1 -1
- package/src/components/inputs/select/README.md +26 -0
- package/src/components/inputs/select/_macro.njk +3 -0
- package/src/components/inputs/select/_template.njk +52 -0
- package/src/components/inputs/select/select.config.js +50 -0
- package/src/components/inputs/select/select.njk +25 -0
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<?xml version="1.0" ?>
|
|
2
2
|
<!DOCTYPE coverage SYSTEM "http://cobertura.sourceforge.net/xml/coverage-04.dtd">
|
|
3
|
-
<coverage lines-valid="432" lines-covered="200" line-rate="0.46299999999999997" branches-valid="119" branches-covered="47" branch-rate="0.395" timestamp="
|
|
3
|
+
<coverage lines-valid="432" lines-covered="200" line-rate="0.46299999999999997" branches-valid="119" branches-covered="47" branch-rate="0.395" timestamp="1588071693688" complexity="0" version="0.1">
|
|
4
4
|
<sources>
|
|
5
5
|
<source>/var/lib/jenkins/jobs/madgex-design-system/branches/master/workspace</source>
|
|
6
6
|
</sources>
|
|
@@ -396,7 +396,7 @@ export default accordion;
|
|
|
396
396
|
<div class='footer quiet pad2 space-top1 center small'>
|
|
397
397
|
Code coverage generated by
|
|
398
398
|
<a href="https://istanbul.js.org/" target="_blank">istanbul</a>
|
|
399
|
-
at
|
|
399
|
+
at Tue Apr 28 2020 12:01:33 GMT+0100 (British Summer Time)
|
|
400
400
|
</div>
|
|
401
401
|
</div>
|
|
402
402
|
<script src="../../prettify.js"></script>
|
|
@@ -94,7 +94,7 @@
|
|
|
94
94
|
<div class='footer quiet pad2 space-top1 center small'>
|
|
95
95
|
Code coverage generated by
|
|
96
96
|
<a href="https://istanbul.js.org/" target="_blank">istanbul</a>
|
|
97
|
-
at
|
|
97
|
+
at Tue Apr 28 2020 12:01:33 GMT+0100 (British Summer Time)
|
|
98
98
|
</div>
|
|
99
99
|
</div>
|
|
100
100
|
<script src="../../prettify.js"></script>
|
|
@@ -690,7 +690,7 @@ export default {
|
|
|
690
690
|
<div class='footer quiet pad2 space-top1 center small'>
|
|
691
691
|
Code coverage generated by
|
|
692
692
|
<a href="https://istanbul.js.org/" target="_blank">istanbul</a>
|
|
693
|
-
at
|
|
693
|
+
at Tue Apr 28 2020 12:01:33 GMT+0100 (British Summer Time)
|
|
694
694
|
</div>
|
|
695
695
|
</div>
|
|
696
696
|
<script src="../../../../prettify.js"></script>
|
|
@@ -94,7 +94,7 @@
|
|
|
94
94
|
<div class='footer quiet pad2 space-top1 center small'>
|
|
95
95
|
Code coverage generated by
|
|
96
96
|
<a href="https://istanbul.js.org/" target="_blank">istanbul</a>
|
|
97
|
-
at
|
|
97
|
+
at Tue Apr 28 2020 12:01:33 GMT+0100 (British Summer Time)
|
|
98
98
|
</div>
|
|
99
99
|
</div>
|
|
100
100
|
<script src="../../../../prettify.js"></script>
|
|
@@ -213,7 +213,7 @@ export default {
|
|
|
213
213
|
<div class='footer quiet pad2 space-top1 center small'>
|
|
214
214
|
Code coverage generated by
|
|
215
215
|
<a href="https://istanbul.js.org/" target="_blank">istanbul</a>
|
|
216
|
-
at
|
|
216
|
+
at Tue Apr 28 2020 12:01:33 GMT+0100 (British Summer Time)
|
|
217
217
|
</div>
|
|
218
218
|
</div>
|
|
219
219
|
<script src="../../../../prettify.js"></script>
|
|
@@ -333,7 +333,7 @@ export default {
|
|
|
333
333
|
<div class='footer quiet pad2 space-top1 center small'>
|
|
334
334
|
Code coverage generated by
|
|
335
335
|
<a href="https://istanbul.js.org/" target="_blank">istanbul</a>
|
|
336
|
-
at
|
|
336
|
+
at Tue Apr 28 2020 12:01:33 GMT+0100 (British Summer Time)
|
|
337
337
|
</div>
|
|
338
338
|
</div>
|
|
339
339
|
<script src="../../../../prettify.js"></script>
|
package/coverage/components/inputs/multi-select/vue-components/MultiSelectCheckboxGroup.vue.html
CHANGED
|
@@ -258,7 +258,7 @@ export default {
|
|
|
258
258
|
<div class='footer quiet pad2 space-top1 center small'>
|
|
259
259
|
Code coverage generated by
|
|
260
260
|
<a href="https://istanbul.js.org/" target="_blank">istanbul</a>
|
|
261
|
-
at
|
|
261
|
+
at Tue Apr 28 2020 12:01:33 GMT+0100 (British Summer Time)
|
|
262
262
|
</div>
|
|
263
263
|
</div>
|
|
264
264
|
<script src="../../../../prettify.js"></script>
|
|
@@ -124,7 +124,7 @@
|
|
|
124
124
|
<div class='footer quiet pad2 space-top1 center small'>
|
|
125
125
|
Code coverage generated by
|
|
126
126
|
<a href="https://istanbul.js.org/" target="_blank">istanbul</a>
|
|
127
|
-
at
|
|
127
|
+
at Tue Apr 28 2020 12:01:33 GMT+0100 (British Summer Time)
|
|
128
128
|
</div>
|
|
129
129
|
</div>
|
|
130
130
|
<script src="../../../../prettify.js"></script>
|
|
@@ -94,7 +94,7 @@
|
|
|
94
94
|
<div class='footer quiet pad2 space-top1 center small'>
|
|
95
95
|
Code coverage generated by
|
|
96
96
|
<a href="https://istanbul.js.org/" target="_blank">istanbul</a>
|
|
97
|
-
at
|
|
97
|
+
at Tue Apr 28 2020 12:01:33 GMT+0100 (British Summer Time)
|
|
98
98
|
</div>
|
|
99
99
|
</div>
|
|
100
100
|
<script src="../../prettify.js"></script>
|
|
@@ -315,7 +315,7 @@ export default modals;
|
|
|
315
315
|
<div class='footer quiet pad2 space-top1 center small'>
|
|
316
316
|
Code coverage generated by
|
|
317
317
|
<a href="https://istanbul.js.org/" target="_blank">istanbul</a>
|
|
318
|
-
at
|
|
318
|
+
at Tue Apr 28 2020 12:01:33 GMT+0100 (British Summer Time)
|
|
319
319
|
</div>
|
|
320
320
|
</div>
|
|
321
321
|
<script src="../../prettify.js"></script>
|
|
@@ -94,7 +94,7 @@
|
|
|
94
94
|
<div class='footer quiet pad2 space-top1 center small'>
|
|
95
95
|
Code coverage generated by
|
|
96
96
|
<a href="https://istanbul.js.org/" target="_blank">istanbul</a>
|
|
97
|
-
at
|
|
97
|
+
at Tue Apr 28 2020 12:01:33 GMT+0100 (British Summer Time)
|
|
98
98
|
</div>
|
|
99
99
|
</div>
|
|
100
100
|
<script src="../../prettify.js"></script>
|
|
@@ -144,7 +144,7 @@ export default notification;
|
|
|
144
144
|
<div class='footer quiet pad2 space-top1 center small'>
|
|
145
145
|
Code coverage generated by
|
|
146
146
|
<a href="https://istanbul.js.org/" target="_blank">istanbul</a>
|
|
147
|
-
at
|
|
147
|
+
at Tue Apr 28 2020 12:01:33 GMT+0100 (British Summer Time)
|
|
148
148
|
</div>
|
|
149
149
|
</div>
|
|
150
150
|
<script src="../../prettify.js"></script>
|
|
@@ -94,7 +94,7 @@
|
|
|
94
94
|
<div class='footer quiet pad2 space-top1 center small'>
|
|
95
95
|
Code coverage generated by
|
|
96
96
|
<a href="https://istanbul.js.org/" target="_blank">istanbul</a>
|
|
97
|
-
at
|
|
97
|
+
at Tue Apr 28 2020 12:01:33 GMT+0100 (British Summer Time)
|
|
98
98
|
</div>
|
|
99
99
|
</div>
|
|
100
100
|
<script src="../../prettify.js"></script>
|
|
@@ -240,7 +240,7 @@ export default popovers;
|
|
|
240
240
|
<div class='footer quiet pad2 space-top1 center small'>
|
|
241
241
|
Code coverage generated by
|
|
242
242
|
<a href="https://istanbul.js.org/" target="_blank">istanbul</a>
|
|
243
|
-
at
|
|
243
|
+
at Tue Apr 28 2020 12:01:33 GMT+0100 (British Summer Time)
|
|
244
244
|
</div>
|
|
245
245
|
</div>
|
|
246
246
|
<script src="../../prettify.js"></script>
|
|
@@ -94,7 +94,7 @@
|
|
|
94
94
|
<div class='footer quiet pad2 space-top1 center small'>
|
|
95
95
|
Code coverage generated by
|
|
96
96
|
<a href="https://istanbul.js.org/" target="_blank">istanbul</a>
|
|
97
|
-
at
|
|
97
|
+
at Tue Apr 28 2020 12:01:33 GMT+0100 (British Summer Time)
|
|
98
98
|
</div>
|
|
99
99
|
</div>
|
|
100
100
|
<script src="../../prettify.js"></script>
|
|
@@ -99,7 +99,7 @@ export default switchState;
|
|
|
99
99
|
<div class='footer quiet pad2 space-top1 center small'>
|
|
100
100
|
Code coverage generated by
|
|
101
101
|
<a href="https://istanbul.js.org/" target="_blank">istanbul</a>
|
|
102
|
-
at
|
|
102
|
+
at Tue Apr 28 2020 12:01:33 GMT+0100 (British Summer Time)
|
|
103
103
|
</div>
|
|
104
104
|
</div>
|
|
105
105
|
<script src="../../prettify.js"></script>
|
|
@@ -94,7 +94,7 @@
|
|
|
94
94
|
<div class='footer quiet pad2 space-top1 center small'>
|
|
95
95
|
Code coverage generated by
|
|
96
96
|
<a href="https://istanbul.js.org/" target="_blank">istanbul</a>
|
|
97
|
-
at
|
|
97
|
+
at Tue Apr 28 2020 12:01:33 GMT+0100 (British Summer Time)
|
|
98
98
|
</div>
|
|
99
99
|
</div>
|
|
100
100
|
<script src="../../prettify.js"></script>
|
|
@@ -510,7 +510,7 @@ export default tabs;
|
|
|
510
510
|
<div class='footer quiet pad2 space-top1 center small'>
|
|
511
511
|
Code coverage generated by
|
|
512
512
|
<a href="https://istanbul.js.org/" target="_blank">istanbul</a>
|
|
513
|
-
at
|
|
513
|
+
at Tue Apr 28 2020 12:01:33 GMT+0100 (British Summer Time)
|
|
514
514
|
</div>
|
|
515
515
|
</div>
|
|
516
516
|
<script src="../../prettify.js"></script>
|
package/coverage/index.html
CHANGED
|
@@ -259,7 +259,7 @@
|
|
|
259
259
|
<div class='footer quiet pad2 space-top1 center small'>
|
|
260
260
|
Code coverage generated by
|
|
261
261
|
<a href="https://istanbul.js.org/" target="_blank">istanbul</a>
|
|
262
|
-
at
|
|
262
|
+
at Tue Apr 28 2020 12:01:33 GMT+0100 (British Summer Time)
|
|
263
263
|
</div>
|
|
264
264
|
</div>
|
|
265
265
|
<script src="prettify.js"></script>
|
|
@@ -99,7 +99,7 @@
|
|
|
99
99
|
<div class='footer quiet pad2 space-top1 center small'>
|
|
100
100
|
Code coverage generated by
|
|
101
101
|
<a href="https://istanbul.js.org/" target="_blank">istanbul</a>
|
|
102
|
-
at
|
|
102
|
+
at Tue Apr 28 2020 12:01:33 GMT+0100 (British Summer Time)
|
|
103
103
|
</div>
|
|
104
104
|
</div>
|
|
105
105
|
<script src="../prettify.js"></script>
|
|
@@ -210,7 +210,7 @@ export default combobox;
|
|
|
210
210
|
<div class='footer quiet pad2 space-top1 center small'>
|
|
211
211
|
Code coverage generated by
|
|
212
212
|
<a href="https://istanbul.js.org/" target="_blank">istanbul</a>
|
|
213
|
-
at
|
|
213
|
+
at Tue Apr 28 2020 12:01:33 GMT+0100 (British Summer Time)
|
|
214
214
|
</div>
|
|
215
215
|
</div>
|
|
216
216
|
<script src="../../prettify.js"></script>
|
|
@@ -139,7 +139,7 @@
|
|
|
139
139
|
<div class='footer quiet pad2 space-top1 center small'>
|
|
140
140
|
Code coverage generated by
|
|
141
141
|
<a href="https://istanbul.js.org/" target="_blank">istanbul</a>
|
|
142
|
-
at
|
|
142
|
+
at Tue Apr 28 2020 12:01:33 GMT+0100 (British Summer Time)
|
|
143
143
|
</div>
|
|
144
144
|
</div>
|
|
145
145
|
<script src="../../prettify.js"></script>
|
|
@@ -174,7 +174,7 @@ export default multiselect;
|
|
|
174
174
|
<div class='footer quiet pad2 space-top1 center small'>
|
|
175
175
|
Code coverage generated by
|
|
176
176
|
<a href="https://istanbul.js.org/" target="_blank">istanbul</a>
|
|
177
|
-
at
|
|
177
|
+
at Tue Apr 28 2020 12:01:33 GMT+0100 (British Summer Time)
|
|
178
178
|
</div>
|
|
179
179
|
</div>
|
|
180
180
|
<script src="../../prettify.js"></script>
|
|
@@ -123,7 +123,7 @@ export default notificationScript;
|
|
|
123
123
|
<div class='footer quiet pad2 space-top1 center small'>
|
|
124
124
|
Code coverage generated by
|
|
125
125
|
<a href="https://istanbul.js.org/" target="_blank">istanbul</a>
|
|
126
|
-
at
|
|
126
|
+
at Tue Apr 28 2020 12:01:33 GMT+0100 (British Summer Time)
|
|
127
127
|
</div>
|
|
128
128
|
</div>
|
|
129
129
|
<script src="../../prettify.js"></script>
|
|
@@ -135,7 +135,7 @@ export default switchStateScript;
|
|
|
135
135
|
<div class='footer quiet pad2 space-top1 center small'>
|
|
136
136
|
Code coverage generated by
|
|
137
137
|
<a href="https://istanbul.js.org/" target="_blank">istanbul</a>
|
|
138
|
-
at
|
|
138
|
+
at Tue Apr 28 2020 12:01:33 GMT+0100 (British Summer Time)
|
|
139
139
|
</div>
|
|
140
140
|
</div>
|
|
141
141
|
<script src="../../prettify.js"></script>
|
|
@@ -96,7 +96,7 @@ import multiselectScript from './fractal-scripts/multiselect';
|
|
|
96
96
|
<div class='footer quiet pad2 space-top1 center small'>
|
|
97
97
|
Code coverage generated by
|
|
98
98
|
<a href="https://istanbul.js.org/" target="_blank">istanbul</a>
|
|
99
|
-
at
|
|
99
|
+
at Tue Apr 28 2020 12:01:33 GMT+0100 (British Summer Time)
|
|
100
100
|
</div>
|
|
101
101
|
</div>
|
|
102
102
|
<script src="../prettify.js"></script>
|
|
@@ -72,7 +72,7 @@ import './polyfills/remove';
|
|
|
72
72
|
<div class='footer quiet pad2 space-top1 center small'>
|
|
73
73
|
Code coverage generated by
|
|
74
74
|
<a href="https://istanbul.js.org/" target="_blank">istanbul</a>
|
|
75
|
-
at
|
|
75
|
+
at Tue Apr 28 2020 12:01:33 GMT+0100 (British Summer Time)
|
|
76
76
|
</div>
|
|
77
77
|
</div>
|
|
78
78
|
<script src="../prettify.js"></script>
|
|
@@ -132,7 +132,7 @@ import MultiSelect from '../components/inputs/multi-select/vue-components/MultiS
|
|
|
132
132
|
<div class='footer quiet pad2 space-top1 center small'>
|
|
133
133
|
Code coverage generated by
|
|
134
134
|
<a href="https://istanbul.js.org/" target="_blank">istanbul</a>
|
|
135
|
-
at
|
|
135
|
+
at Tue Apr 28 2020 12:01:33 GMT+0100 (British Summer Time)
|
|
136
136
|
</div>
|
|
137
137
|
</div>
|
|
138
138
|
<script src="../prettify.js"></script>
|
package/coverage/js/index.html
CHANGED
|
@@ -154,7 +154,7 @@
|
|
|
154
154
|
<div class='footer quiet pad2 space-top1 center small'>
|
|
155
155
|
Code coverage generated by
|
|
156
156
|
<a href="https://istanbul.js.org/" target="_blank">istanbul</a>
|
|
157
|
-
at
|
|
157
|
+
at Tue Apr 28 2020 12:01:33 GMT+0100 (British Summer Time)
|
|
158
158
|
</div>
|
|
159
159
|
</div>
|
|
160
160
|
<script src="../prettify.js"></script>
|
|
@@ -126,7 +126,7 @@ import modals from '../components/modal/modal';
|
|
|
126
126
|
<div class='footer quiet pad2 space-top1 center small'>
|
|
127
127
|
Code coverage generated by
|
|
128
128
|
<a href="https://istanbul.js.org/" target="_blank">istanbul</a>
|
|
129
|
-
at
|
|
129
|
+
at Tue Apr 28 2020 12:01:33 GMT+0100 (British Summer Time)
|
|
130
130
|
</div>
|
|
131
131
|
</div>
|
|
132
132
|
<script src="../prettify.js"></script>
|
|
@@ -111,7 +111,7 @@
|
|
|
111
111
|
<div class='footer quiet pad2 space-top1 center small'>
|
|
112
112
|
Code coverage generated by
|
|
113
113
|
<a href="https://istanbul.js.org/" target="_blank">istanbul</a>
|
|
114
|
-
at
|
|
114
|
+
at Tue Apr 28 2020 12:01:33 GMT+0100 (British Summer Time)
|
|
115
115
|
</div>
|
|
116
116
|
</div>
|
|
117
117
|
<script src="../../prettify.js"></script>
|
|
@@ -109,7 +109,7 @@
|
|
|
109
109
|
<div class='footer quiet pad2 space-top1 center small'>
|
|
110
110
|
Code coverage generated by
|
|
111
111
|
<a href="https://istanbul.js.org/" target="_blank">istanbul</a>
|
|
112
|
-
at
|
|
112
|
+
at Tue Apr 28 2020 12:01:33 GMT+0100 (British Summer Time)
|
|
113
113
|
</div>
|
|
114
114
|
</div>
|
|
115
115
|
<script src="../../prettify.js"></script>
|
|
@@ -84,7 +84,7 @@
|
|
|
84
84
|
<div class='footer quiet pad2 space-top1 center small'>
|
|
85
85
|
Code coverage generated by
|
|
86
86
|
<a href="https://istanbul.js.org/" target="_blank">istanbul</a>
|
|
87
|
-
at
|
|
87
|
+
at Tue Apr 28 2020 12:01:33 GMT+0100 (British Summer Time)
|
|
88
88
|
</div>
|
|
89
89
|
</div>
|
|
90
90
|
<script src="../../prettify.js"></script>
|
|
@@ -552,7 +552,7 @@ const config = <span class="cstat-no" title="statement not covered" >{</span>
|
|
|
552
552
|
<div class='footer quiet pad2 space-top1 center small'>
|
|
553
553
|
Code coverage generated by
|
|
554
554
|
<a href="https://istanbul.js.org/" target="_blank">istanbul</a>
|
|
555
|
-
at
|
|
555
|
+
at Tue Apr 28 2020 12:01:33 GMT+0100 (British Summer Time)
|
|
556
556
|
</div>
|
|
557
557
|
</div>
|
|
558
558
|
<script src="../prettify.js"></script>
|
|
@@ -94,7 +94,7 @@
|
|
|
94
94
|
<div class='footer quiet pad2 space-top1 center small'>
|
|
95
95
|
Code coverage generated by
|
|
96
96
|
<a href="https://istanbul.js.org/" target="_blank">istanbul</a>
|
|
97
|
-
at
|
|
97
|
+
at Tue Apr 28 2020 12:01:33 GMT+0100 (British Summer Time)
|
|
98
98
|
</div>
|
|
99
99
|
</div>
|
|
100
100
|
<script src="../prettify.js"></script>
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Breakpoints | Madgex Design System
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
Breakpoints used in MDS
|
|
6
|
+
|
|
7
|
+
| Token | Key | Value | Usage |
|
|
8
|
+
|---|---|---|---|
|
|
9
|
+
{%- for key, item in tokens.size.breakpoint %}
|
|
10
|
+
| $mds-{{ item.path | join('-') }} | {{key}} | {{item.original.value}} | {% if key == 'sm' %}small-mobile → mobile{% endif %}{% if key == 'md' %}mobile → large-mobile/tablet{% endif %}{% if key == 'lg' %}tablet → large-tablet/small-desktop{% endif %}{% if key == 'xl' %}large-tablet/small-desktop → desktop{% endif %} |
|
|
11
|
+
{%- endfor -%}
|
|
12
|
+
|
|
13
|
+
|
package/package.json
CHANGED
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
## Parameters
|
|
2
|
+
|
|
3
|
+
- `labelText`: The label for the input **required**,
|
|
4
|
+
- `hideLabel`: true/false - Add this parameter if you need to visually hide the label. The text of the label will the used by default as a placeholder, unless overridden by the placeholder parameter **optional**
|
|
5
|
+
**(please see accessibility notes below regarding the use of this parameter)**
|
|
6
|
+
- `name`: The name of the input field, uses ID unless specified **optional**,
|
|
7
|
+
- `id`: The id attribute of the field, **required**
|
|
8
|
+
- `optional`: Is the input optional, otherwise required **optional**,
|
|
9
|
+
- `disabled`: Should the input be disabled **optional**,
|
|
10
|
+
- `helpText`: Helper text to display under the label **optional**,
|
|
11
|
+
- `validationError`: The error message provided by validation **optional**,
|
|
12
|
+
- `state`: The current state of the input, currently the only allowed value is `error` **optional**,
|
|
13
|
+
- `tooltipMessage`: Toggles a tooltip with this message to appear on the input **optional**
|
|
14
|
+
- `classes`: add extra classes to the trigger - **optional**
|
|
15
|
+
- `value`: A default value to have selected as an option
|
|
16
|
+
- `options`: This is an object of all options. The valid keys are `label` and `value`
|
|
17
|
+
|
|
18
|
+
## Accessibility
|
|
19
|
+
|
|
20
|
+
This input relies entirely on the browser standard input and applies the accessibility provided by that.
|
|
21
|
+
Additional accessibility aria attributes are applied to the label `aria-live=polite` to inform users of help text or error messages attributed to a form
|
|
22
|
+
|
|
23
|
+
Avoid using `hideLabel` and `placeholder` if you can. Only hide the label when there can be no mistake as to what the input is for, probably when there is only one input in the form.
|
|
24
|
+
The placeholder can also be a problem given its lower contrast so don't rely on it to give important information. Use the `helpText` or the `tooltipMessage` instead, for example.
|
|
25
|
+
|
|
26
|
+
Useful article: https://www.nngroup.com/articles/form-design-placeholders/
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
{% from "../_label/_macro.njk" import MdsInputLabel %}
|
|
2
|
+
{% from "../_message/_macro.njk" import MdsInputMessages %}
|
|
3
|
+
|
|
4
|
+
{% if params.name %}
|
|
5
|
+
{% set name = params.name %}
|
|
6
|
+
{% else %}
|
|
7
|
+
{% set name = params.id %}
|
|
8
|
+
{% endif %}
|
|
9
|
+
|
|
10
|
+
<div
|
|
11
|
+
class="mds-form-element mds-form-element--select
|
|
12
|
+
{%- if params.classes %} {{params.classes}}{% endif -%}
|
|
13
|
+
{%- if params.state %} mds-form-element--{{params.state}}{% endif -%}"
|
|
14
|
+
id="{{ params.id }}-container"
|
|
15
|
+
data-test="select"
|
|
16
|
+
>
|
|
17
|
+
{{ MdsInputLabel({
|
|
18
|
+
labelText: params.labelText,
|
|
19
|
+
hideLabel: params.hideLabel,
|
|
20
|
+
id: params.id,
|
|
21
|
+
optional: params.optional,
|
|
22
|
+
tooltipMessage: params.tooltipMessage
|
|
23
|
+
}) }}
|
|
24
|
+
{{ MdsInputMessages({
|
|
25
|
+
id: params.id,
|
|
26
|
+
helpText: params.helpText,
|
|
27
|
+
validationError: params.validationError
|
|
28
|
+
}) }}
|
|
29
|
+
<select
|
|
30
|
+
name="{{name}}"
|
|
31
|
+
id="{{params.id}}"
|
|
32
|
+
{%- if not params.optional %}
|
|
33
|
+
required="required"
|
|
34
|
+
{% endif -%}
|
|
35
|
+
{%- if params.disabled %}
|
|
36
|
+
disabled="disabled"
|
|
37
|
+
{% endif -%}
|
|
38
|
+
class="mds-form-control"
|
|
39
|
+
>
|
|
40
|
+
<option
|
|
41
|
+
disabled="disabled"
|
|
42
|
+
{%- if not params.value %} selected="selected"{% endif -%}
|
|
43
|
+
>
|
|
44
|
+
Please select
|
|
45
|
+
</option>
|
|
46
|
+
{%- for option in params.options %}
|
|
47
|
+
<option value="{{option.value}}" {%- if option.value === params.value %}selected="selected"{% endif -%}>
|
|
48
|
+
{{option.label}}
|
|
49
|
+
</option>
|
|
50
|
+
{% endfor -%}
|
|
51
|
+
</select>
|
|
52
|
+
</div>
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
module.exports = {
|
|
2
|
+
title: 'Select',
|
|
3
|
+
status: 'wip',
|
|
4
|
+
context: {
|
|
5
|
+
labelText: 'Select input',
|
|
6
|
+
name: 'Select input',
|
|
7
|
+
id: 'select-input',
|
|
8
|
+
optional: true,
|
|
9
|
+
options: [
|
|
10
|
+
{
|
|
11
|
+
label: "Option 1",
|
|
12
|
+
value: "option-1",
|
|
13
|
+
},
|
|
14
|
+
{
|
|
15
|
+
label: "Option 2",
|
|
16
|
+
value: "option-2",
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
label: "Option 3",
|
|
20
|
+
value: "option-3",
|
|
21
|
+
},
|
|
22
|
+
],
|
|
23
|
+
},
|
|
24
|
+
variants: [
|
|
25
|
+
{
|
|
26
|
+
name: 'Preselected select',
|
|
27
|
+
context: {
|
|
28
|
+
labelText: 'Preselected input',
|
|
29
|
+
name: 'Preselected input',
|
|
30
|
+
id: 'preselected-input',
|
|
31
|
+
optional: true,
|
|
32
|
+
value: "option-2",
|
|
33
|
+
options: [
|
|
34
|
+
{
|
|
35
|
+
label: "Option 1",
|
|
36
|
+
value: "option-1",
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
label: "Option 2",
|
|
40
|
+
value: "option-2",
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
label: "Option 3",
|
|
44
|
+
value: "option-3",
|
|
45
|
+
},
|
|
46
|
+
],
|
|
47
|
+
},
|
|
48
|
+
},
|
|
49
|
+
],
|
|
50
|
+
};
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
{% from "./inputs/select/_macro.njk" import MdsSelect %}
|
|
2
|
+
|
|
3
|
+
<div class="mds-grid-row">
|
|
4
|
+
<div class="mds-grid-col-6">
|
|
5
|
+
<div class="mds-form-field">
|
|
6
|
+
{{ MdsSelect ({
|
|
7
|
+
labelText: labelText,
|
|
8
|
+
hideLabel: hideLabel,
|
|
9
|
+
name: name,
|
|
10
|
+
id: id,
|
|
11
|
+
type: type,
|
|
12
|
+
value:value,
|
|
13
|
+
optional: optional,
|
|
14
|
+
disabled: disabled,
|
|
15
|
+
placeholder: placeholder,
|
|
16
|
+
helpText: helpText,
|
|
17
|
+
validationError: validationError,
|
|
18
|
+
state: state,
|
|
19
|
+
classes: classes,
|
|
20
|
+
tooltipMessage: tooltipMessage,
|
|
21
|
+
options: options
|
|
22
|
+
}) }}
|
|
23
|
+
</div>
|
|
24
|
+
</div>
|
|
25
|
+
</div>
|