@madgex/design-system 1.42.0 → 1.43.0
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/combobox.js.html +1 -1
- package/coverage/components/inputs/combobox/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/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/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/package.json +1 -1
- package/src/components/inputs/input/README.md +9 -0
- package/src/components/inputs/input/_template.njk +4 -1
- package/src/components/inputs/input/input.config.js +16 -0
- package/src/components/inputs/input/input.njk +2 -0
- package/src/components/inputs/multi-select/README.md +1 -0
- package/src/components/inputs/multi-select/_template.njk +1 -1
- package/src/components/inputs/multi-select/multi-select.config.js +5 -5
|
@@ -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="404" lines-covered="192" line-rate="0.4752" branches-valid="113" branches-covered="44" branch-rate="0.38939999999999997" timestamp="
|
|
3
|
+
<coverage lines-valid="404" lines-covered="192" line-rate="0.4752" branches-valid="113" branches-covered="44" branch-rate="0.38939999999999997" timestamp="1585647689781" 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 Tue Mar
|
|
399
|
+
at Tue Mar 31 2020 10:41:29 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 Tue Mar
|
|
97
|
+
at Tue Mar 31 2020 10:41:29 GMT+0100 (British Summer Time)
|
|
98
98
|
</div>
|
|
99
99
|
</div>
|
|
100
100
|
<script src="../../prettify.js"></script>
|
|
@@ -123,7 +123,7 @@ import Combobox from './vue-components/Combobox.vue';
|
|
|
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 Tue Mar
|
|
126
|
+
at Tue Mar 31 2020 10:41:29 GMT+0100 (British Summer Time)
|
|
127
127
|
</div>
|
|
128
128
|
</div>
|
|
129
129
|
<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 Tue Mar
|
|
97
|
+
at Tue Mar 31 2020 10:41:29 GMT+0100 (British Summer Time)
|
|
98
98
|
</div>
|
|
99
99
|
</div>
|
|
100
100
|
<script src="../../../prettify.js"></script>
|
|
@@ -693,7 +693,7 @@ export default {
|
|
|
693
693
|
<div class='footer quiet pad2 space-top1 center small'>
|
|
694
694
|
Code coverage generated by
|
|
695
695
|
<a href="https://istanbul.js.org/" target="_blank">istanbul</a>
|
|
696
|
-
at Tue Mar
|
|
696
|
+
at Tue Mar 31 2020 10:41:29 GMT+0100 (British Summer Time)
|
|
697
697
|
</div>
|
|
698
698
|
</div>
|
|
699
699
|
<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 Tue Mar
|
|
97
|
+
at Tue Mar 31 2020 10:41:29 GMT+0100 (British Summer Time)
|
|
98
98
|
</div>
|
|
99
99
|
</div>
|
|
100
100
|
<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 Tue Mar
|
|
97
|
+
at Tue Mar 31 2020 10:41:29 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 Tue Mar
|
|
318
|
+
at Tue Mar 31 2020 10:41:29 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 Tue Mar
|
|
97
|
+
at Tue Mar 31 2020 10:41:29 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 Tue Mar
|
|
147
|
+
at Tue Mar 31 2020 10:41:29 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 Tue Mar
|
|
97
|
+
at Tue Mar 31 2020 10:41:29 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 Tue Mar
|
|
243
|
+
at Tue Mar 31 2020 10:41:29 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 Tue Mar
|
|
97
|
+
at Tue Mar 31 2020 10:41:29 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 Tue Mar
|
|
102
|
+
at Tue Mar 31 2020 10:41:29 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 Tue Mar
|
|
97
|
+
at Tue Mar 31 2020 10:41:29 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 Tue Mar
|
|
513
|
+
at Tue Mar 31 2020 10:41:29 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 Tue Mar
|
|
262
|
+
at Tue Mar 31 2020 10:41:29 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 Tue Mar
|
|
102
|
+
at Tue Mar 31 2020 10:41:29 GMT+0100 (British Summer Time)
|
|
103
103
|
</div>
|
|
104
104
|
</div>
|
|
105
105
|
<script src="../prettify.js"></script>
|
|
@@ -213,7 +213,7 @@ export default combobox;
|
|
|
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 Tue Mar
|
|
216
|
+
at Tue Mar 31 2020 10:41:29 GMT+0100 (British Summer Time)
|
|
217
217
|
</div>
|
|
218
218
|
</div>
|
|
219
219
|
<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 Tue Mar
|
|
127
|
+
at Tue Mar 31 2020 10:41:29 GMT+0100 (British Summer Time)
|
|
128
128
|
</div>
|
|
129
129
|
</div>
|
|
130
130
|
<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 Tue Mar
|
|
126
|
+
at Tue Mar 31 2020 10:41:29 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 Tue Mar
|
|
138
|
+
at Tue Mar 31 2020 10:41:29 GMT+0100 (British Summer Time)
|
|
139
139
|
</div>
|
|
140
140
|
</div>
|
|
141
141
|
<script src="../../prettify.js"></script>
|
|
@@ -90,7 +90,7 @@ import comboboxScript from './fractal-scripts/combobox';
|
|
|
90
90
|
<div class='footer quiet pad2 space-top1 center small'>
|
|
91
91
|
Code coverage generated by
|
|
92
92
|
<a href="https://istanbul.js.org/" target="_blank">istanbul</a>
|
|
93
|
-
at Tue Mar
|
|
93
|
+
at Tue Mar 31 2020 10:41:29 GMT+0100 (British Summer Time)
|
|
94
94
|
</div>
|
|
95
95
|
</div>
|
|
96
96
|
<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 Tue Mar
|
|
75
|
+
at Tue Mar 31 2020 10:41:29 GMT+0100 (British Summer Time)
|
|
76
76
|
</div>
|
|
77
77
|
</div>
|
|
78
78
|
<script src="../prettify.js"></script>
|
|
@@ -66,7 +66,7 @@
|
|
|
66
66
|
<div class='footer quiet pad2 space-top1 center small'>
|
|
67
67
|
Code coverage generated by
|
|
68
68
|
<a href="https://istanbul.js.org/" target="_blank">istanbul</a>
|
|
69
|
-
at Tue Mar
|
|
69
|
+
at Tue Mar 31 2020 10:41:29 GMT+0100 (British Summer Time)
|
|
70
70
|
</div>
|
|
71
71
|
</div>
|
|
72
72
|
<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 Tue Mar
|
|
157
|
+
at Tue Mar 31 2020 10:41:29 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 Tue Mar
|
|
129
|
+
at Tue Mar 31 2020 10:41:29 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 Tue Mar
|
|
114
|
+
at Tue Mar 31 2020 10:41:29 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 Tue Mar
|
|
112
|
+
at Tue Mar 31 2020 10:41:29 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 Tue Mar
|
|
87
|
+
at Tue Mar 31 2020 10:41:29 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 Tue Mar
|
|
555
|
+
at Tue Mar 31 2020 10:41:29 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 Tue Mar
|
|
97
|
+
at Tue Mar 31 2020 10:41:29 GMT+0100 (British Summer Time)
|
|
98
98
|
</div>
|
|
99
99
|
</div>
|
|
100
100
|
<script src="../prettify.js"></script>
|
package/package.json
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
## Parameters
|
|
2
2
|
|
|
3
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)**
|
|
4
6
|
- `name`: The name of the input field, uses ID unless specified **optional**,
|
|
5
7
|
- `id`: The id attribute of the field, **required**
|
|
6
8
|
- `type`: The type of input, accepts all valid input types except `Select`/`Radio`/`Checkbox` **required**,
|
|
@@ -11,12 +13,19 @@
|
|
|
11
13
|
- `state`: The current state of the input, allowed values are `valid`/`error` **optional**,
|
|
12
14
|
- `tooltipMessage`: Toggles a tooltip with this message to appear on the input **optional**
|
|
13
15
|
- `classes`: add extra classes to the trigger - **optional**
|
|
16
|
+
- `placeholder`: add a placeholder to the input **optional**
|
|
17
|
+
**(please see accessibility notes below regarding the use of this parameter)**
|
|
14
18
|
|
|
15
19
|
## Accessibility
|
|
16
20
|
|
|
17
21
|
This input relies entirely on the browser standard input and applies the accessibility provided by that.
|
|
18
22
|
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
|
|
19
23
|
|
|
24
|
+
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.
|
|
25
|
+
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.
|
|
26
|
+
|
|
27
|
+
Useful article: https://www.nngroup.com/articles/form-design-placeholders/
|
|
28
|
+
|
|
20
29
|
## Note
|
|
21
30
|
|
|
22
31
|
We have not placed any specific ruleing to stop `Select`/`Radio`/`Checkbox` being selected but have made no effort to style them
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
|
|
21
21
|
<div class="mds-input{% if params.validationMessage %} mds-input--has-msg{% endif %}{% if stateClass %} {{stateClass}}{% endif %} {% if params.classes %} {{params.classes}}{% endif %}" data-test="input">
|
|
22
22
|
<div class="mds-input__wrapper-label">
|
|
23
|
-
<label class="mds-input__label" for="{{ params.id }}">
|
|
23
|
+
<label class="mds-input__label{% if params.hideLabel %} mds-visually-hidden{% endif %}" for="{{ params.id }}">
|
|
24
24
|
{{ params.labelText }}
|
|
25
25
|
{% if params.optional %}
|
|
26
26
|
<span class="mds-input__label-optional mds-font-minion">(optional)</span>
|
|
@@ -67,6 +67,9 @@
|
|
|
67
67
|
{% if params.disabled %}
|
|
68
68
|
disabled="disabled"
|
|
69
69
|
{% endif %}
|
|
70
|
+
{% if params.hideLabel or params.placeholder %}
|
|
71
|
+
placeholder="{% if params.placeholder %}{{ params.placeholder }}{% else %}{{ params.labelText }}{% endif %}"
|
|
72
|
+
{% endif %}
|
|
70
73
|
{% if params.value %}
|
|
71
74
|
value="{{params.value}}"
|
|
72
75
|
{% endif %}
|
|
@@ -84,5 +84,21 @@ module.exports = {
|
|
|
84
84
|
disabled: true,
|
|
85
85
|
},
|
|
86
86
|
},
|
|
87
|
+
{
|
|
88
|
+
name: 'Input with placeholder',
|
|
89
|
+
context: {
|
|
90
|
+
labelText: 'Input with placeholder',
|
|
91
|
+
id: 'input-with-placeholder',
|
|
92
|
+
placeholder: 'Start typing...',
|
|
93
|
+
},
|
|
94
|
+
},
|
|
95
|
+
{
|
|
96
|
+
name: 'Input with visually hidden label',
|
|
97
|
+
context: {
|
|
98
|
+
labelText: 'Input with visually hidden label',
|
|
99
|
+
hideLabel: true,
|
|
100
|
+
id: 'input-with-hidden-label',
|
|
101
|
+
},
|
|
102
|
+
},
|
|
87
103
|
],
|
|
88
104
|
};
|
|
@@ -2,12 +2,14 @@
|
|
|
2
2
|
|
|
3
3
|
{{ MdsInput({
|
|
4
4
|
labelText: labelText,
|
|
5
|
+
hideLabel: hideLabel,
|
|
5
6
|
name: name,
|
|
6
7
|
id: id,
|
|
7
8
|
type: type,
|
|
8
9
|
value:value,
|
|
9
10
|
optional: optional,
|
|
10
11
|
disabled: disabled,
|
|
12
|
+
placeholder: placeholder,
|
|
11
13
|
helpText: helpText,
|
|
12
14
|
validationError: validationError,
|
|
13
15
|
state: state,
|
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
- `terms`: An array of terms to render in the multi-select. These should be objects with the following shape:
|
|
6
6
|
- `id`: the term id, to be used as the checkbox input's value **required**,
|
|
7
7
|
- `label`: the text for the checkbox input's label **required**,
|
|
8
|
+
- `selected`: whether the checkbox is pre-selected **optional**,
|
|
8
9
|
- `terms`: an array of child terms of this term **optional**
|
|
9
10
|
- `optional`: Is the multi-select optional, otherwise required **optional**,
|
|
10
11
|
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
{% for term in terms %}
|
|
5
5
|
{% set termId = name + "-" + term.id %}
|
|
6
6
|
<div class="mds-multiselect__checkbox">
|
|
7
|
-
<input type="checkbox" name="{{ name }}" id="{{ termId }}" value="{{ term.id }}">
|
|
7
|
+
<input type="checkbox" name="{{ name }}" id="{{ termId }}" value="{{ term.id }}" {% if term.selected %}checked{% endif %}>
|
|
8
8
|
<label for="{{ termId }}">{{ term.label }}</label>
|
|
9
9
|
{{ MdsMultiSelectCheckboxGroup(term.terms, name, true) }}
|
|
10
10
|
</div>
|
|
@@ -8,14 +8,14 @@ module.exports = {
|
|
|
8
8
|
{ id: 7, label: 'Academic Pharmacist', terms: [] },
|
|
9
9
|
{ id: 1, label: 'Community Pharmacist', terms: [] },
|
|
10
10
|
{ id: 10, label: 'Dispensing Assistant', terms: [] },
|
|
11
|
-
{ id: 4, label: 'Hospital Pharmacist', terms: [] },
|
|
11
|
+
{ id: 4, label: 'Hospital Pharmacist', selected: true, terms: [] },
|
|
12
12
|
{ id: 6, label: 'Industrial Pharmacist', terms: [] },
|
|
13
13
|
{ id: 3, label: 'Locum Pharmacist', terms: [] },
|
|
14
14
|
{ id: 11, label: 'Medicines Counter Assistant', terms: [] },
|
|
15
15
|
{ id: 2, label: 'Pharmacy Manager', terms: [] },
|
|
16
16
|
{ id: 12, label: 'Pharmacy Student', terms: [] },
|
|
17
17
|
{ id: 9, label: 'Pharmacy Technician', terms: [] },
|
|
18
|
-
{ id: 8, label: 'Pre-reg Pharmacist', terms: [] },
|
|
18
|
+
{ id: 8, label: 'Pre-reg Pharmacist', selected: true, terms: [] },
|
|
19
19
|
{ id: 513016, label: 'Primary Care Pharmacist', terms: [] },
|
|
20
20
|
{ id: 513015, label: 'Region/Area Manager', terms: [] },
|
|
21
21
|
{ id: 5, label: 'Senior Management', terms: [] },
|
|
@@ -35,15 +35,15 @@ module.exports = {
|
|
|
35
35
|
id: 101,
|
|
36
36
|
label: 'Arts & heritage',
|
|
37
37
|
terms: [
|
|
38
|
-
{ id: 600102, label: 'Artist agency & management', terms: [] },
|
|
38
|
+
{ id: 600102, label: 'Artist agency & management', selected: true, terms: [] },
|
|
39
39
|
{ id: 600104, label: 'Arts education & training', terms: [] },
|
|
40
40
|
{ id: 104, label: 'Dance', terms: [] },
|
|
41
41
|
{ id: 600105, label: 'Events', terms: [] },
|
|
42
|
-
{ id: 600106, label: 'Festival', terms: [] },
|
|
42
|
+
{ id: 600106, label: 'Festival', selected: true, terms: [] },
|
|
43
43
|
{ id: 600107, label: 'Funding body', terms: [] },
|
|
44
44
|
{ id: 107, label: 'Heritage', terms: [] },
|
|
45
45
|
{ id: 600109, label: 'Librarian & archivist', terms: [] },
|
|
46
|
-
{ id: 108, label: 'Museums & galleries', terms: [] },
|
|
46
|
+
{ id: 108, label: 'Museums & galleries', selected: true, terms: [] },
|
|
47
47
|
{ id: 109, label: 'Music', terms: [] },
|
|
48
48
|
{ id: 600110, label: 'Press, publicity & PR', terms: [] },
|
|
49
49
|
{ id: 600111, label: 'Promoter', terms: [] },
|