@madgex/design-system 1.36.0 → 1.36.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.
Files changed (44) hide show
  1. package/coverage/cobertura-coverage.xml +1 -1
  2. package/coverage/components/accordion/accordion.js.html +1 -1
  3. package/coverage/components/accordion/index.html +1 -1
  4. package/coverage/components/combobox/combobox.js.html +1 -1
  5. package/coverage/components/combobox/index.html +1 -1
  6. package/coverage/components/combobox/vue-components/Combobox.vue.html +1 -1
  7. package/coverage/components/combobox/vue-components/index.html +1 -1
  8. package/coverage/components/notification/index.html +1 -1
  9. package/coverage/components/notification/notification.js.html +1 -1
  10. package/coverage/components/popover/index.html +1 -1
  11. package/coverage/components/popover/popover.js.html +1 -1
  12. package/coverage/components/switch-state/index.html +1 -1
  13. package/coverage/components/switch-state/switch-state.js.html +1 -1
  14. package/coverage/components/tabs/index.html +1 -1
  15. package/coverage/components/tabs/tabs.js.html +1 -1
  16. package/coverage/index.html +1 -1
  17. package/coverage/js/common.js.html +1 -1
  18. package/coverage/js/fractal-scripts/combobox.js.html +1 -1
  19. package/coverage/js/fractal-scripts/index.html +1 -1
  20. package/coverage/js/fractal-scripts/notification.js.html +1 -1
  21. package/coverage/js/fractal-scripts/switch-state.js.html +1 -1
  22. package/coverage/js/index-fractal.js.html +1 -1
  23. package/coverage/js/index-polyfills.js.html +1 -1
  24. package/coverage/js/index-vue.js.html +1 -1
  25. package/coverage/js/index.html +1 -1
  26. package/coverage/js/index.js.html +1 -1
  27. package/coverage/js/polyfills/closest.js.html +1 -1
  28. package/coverage/js/polyfills/index.html +1 -1
  29. package/coverage/js/polyfills/remove.js.html +1 -1
  30. package/coverage/tokens/_config.js.html +1 -1
  31. package/coverage/tokens/index.html +1 -1
  32. package/dist/_tokens/css/_tokens.css +1 -1
  33. package/dist/_tokens/js/_tokens-module.js +1 -1
  34. package/dist/_tokens/scss/_tokens.scss +1 -1
  35. package/dist/assets/icons.json +1 -1
  36. package/package.json +1 -1
  37. package/src/components/combobox/README.md +2 -1
  38. package/src/components/combobox/_template.njk +1 -1
  39. package/src/components/combobox/combobox.config.js +1 -0
  40. package/src/components/combobox/combobox.njk +2 -1
  41. package/src/components/input/README.md +13 -12
  42. package/src/components/input/_template.njk +1 -1
  43. package/src/components/input/input.config.js +1 -0
  44. package/src/components/input/input.njk +1 -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="354" lines-covered="143" line-rate="0.40399999999999997" branches-valid="97" branches-covered="31" branch-rate="0.3196" timestamp="1582910036887" complexity="0" version="0.1">
3
+ <coverage lines-valid="354" lines-covered="143" line-rate="0.40399999999999997" branches-valid="97" branches-covered="31" branch-rate="0.3196" timestamp="1583939326673" 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 Fri Feb 28 2020 17:13:56 GMT+0000 (Greenwich Mean Time)
399
+ at Wed Mar 11 2020 15:08:46 GMT+0000 (Greenwich Mean 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 Fri Feb 28 2020 17:13:56 GMT+0000 (Greenwich Mean Time)
97
+ at Wed Mar 11 2020 15:08:46 GMT+0000 (Greenwich Mean 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 Fri Feb 28 2020 17:13:56 GMT+0000 (Greenwich Mean Time)
126
+ at Wed Mar 11 2020 15:08:46 GMT+0000 (Greenwich Mean 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 Fri Feb 28 2020 17:13:56 GMT+0000 (Greenwich Mean Time)
97
+ at Wed Mar 11 2020 15:08:46 GMT+0000 (Greenwich Mean 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 Fri Feb 28 2020 17:13:56 GMT+0000 (Greenwich Mean Time)
696
+ at Wed Mar 11 2020 15:08:46 GMT+0000 (Greenwich Mean 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 Fri Feb 28 2020 17:13:56 GMT+0000 (Greenwich Mean Time)
97
+ at Wed Mar 11 2020 15:08:46 GMT+0000 (Greenwich Mean 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 Fri Feb 28 2020 17:13:56 GMT+0000 (Greenwich Mean Time)
97
+ at Wed Mar 11 2020 15:08:46 GMT+0000 (Greenwich Mean 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 Fri Feb 28 2020 17:13:56 GMT+0000 (Greenwich Mean Time)
147
+ at Wed Mar 11 2020 15:08:46 GMT+0000 (Greenwich Mean 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 Fri Feb 28 2020 17:13:56 GMT+0000 (Greenwich Mean Time)
97
+ at Wed Mar 11 2020 15:08:46 GMT+0000 (Greenwich Mean 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 Fri Feb 28 2020 17:13:56 GMT+0000 (Greenwich Mean Time)
243
+ at Wed Mar 11 2020 15:08:46 GMT+0000 (Greenwich Mean 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 Fri Feb 28 2020 17:13:56 GMT+0000 (Greenwich Mean Time)
97
+ at Wed Mar 11 2020 15:08:46 GMT+0000 (Greenwich Mean 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 Fri Feb 28 2020 17:13:56 GMT+0000 (Greenwich Mean Time)
102
+ at Wed Mar 11 2020 15:08:46 GMT+0000 (Greenwich Mean 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 Fri Feb 28 2020 17:13:56 GMT+0000 (Greenwich Mean Time)
97
+ at Wed Mar 11 2020 15:08:46 GMT+0000 (Greenwich Mean 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 Fri Feb 28 2020 17:13:56 GMT+0000 (Greenwich Mean Time)
513
+ at Wed Mar 11 2020 15:08:46 GMT+0000 (Greenwich Mean Time)
514
514
  </div>
515
515
  </div>
516
516
  <script src="../../prettify.js"></script>
@@ -244,7 +244,7 @@
244
244
  <div class='footer quiet pad2 space-top1 center small'>
245
245
  Code coverage generated by
246
246
  <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
247
- at Fri Feb 28 2020 17:13:56 GMT+0000 (Greenwich Mean Time)
247
+ at Wed Mar 11 2020 15:08:46 GMT+0000 (Greenwich Mean Time)
248
248
  </div>
249
249
  </div>
250
250
  <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 Fri Feb 28 2020 17:13:56 GMT+0000 (Greenwich Mean Time)
102
+ at Wed Mar 11 2020 15:08:46 GMT+0000 (Greenwich Mean 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 Fri Feb 28 2020 17:13:56 GMT+0000 (Greenwich Mean Time)
216
+ at Wed Mar 11 2020 15:08:46 GMT+0000 (Greenwich Mean 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 Fri Feb 28 2020 17:13:56 GMT+0000 (Greenwich Mean Time)
127
+ at Wed Mar 11 2020 15:08:46 GMT+0000 (Greenwich Mean 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 Fri Feb 28 2020 17:13:56 GMT+0000 (Greenwich Mean Time)
126
+ at Wed Mar 11 2020 15:08:46 GMT+0000 (Greenwich Mean 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 Fri Feb 28 2020 17:13:56 GMT+0000 (Greenwich Mean Time)
138
+ at Wed Mar 11 2020 15:08:46 GMT+0000 (Greenwich Mean 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 Fri Feb 28 2020 17:13:56 GMT+0000 (Greenwich Mean Time)
93
+ at Wed Mar 11 2020 15:08:46 GMT+0000 (Greenwich Mean 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 Fri Feb 28 2020 17:13:56 GMT+0000 (Greenwich Mean Time)
75
+ at Wed Mar 11 2020 15:08:46 GMT+0000 (Greenwich Mean 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 Fri Feb 28 2020 17:13:56 GMT+0000 (Greenwich Mean Time)
69
+ at Wed Mar 11 2020 15:08:46 GMT+0000 (Greenwich Mean Time)
70
70
  </div>
71
71
  </div>
72
72
  <script src="../prettify.js"></script>
@@ -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 Fri Feb 28 2020 17:13:56 GMT+0000 (Greenwich Mean Time)
157
+ at Wed Mar 11 2020 15:08:46 GMT+0000 (Greenwich Mean Time)
158
158
  </div>
159
159
  </div>
160
160
  <script src="../prettify.js"></script>
@@ -120,7 +120,7 @@ import popovers from '../components/popover/popover';
120
120
  <div class='footer quiet pad2 space-top1 center small'>
121
121
  Code coverage generated by
122
122
  <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
123
- at Fri Feb 28 2020 17:13:56 GMT+0000 (Greenwich Mean Time)
123
+ at Wed Mar 11 2020 15:08:46 GMT+0000 (Greenwich Mean Time)
124
124
  </div>
125
125
  </div>
126
126
  <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 Fri Feb 28 2020 17:13:56 GMT+0000 (Greenwich Mean Time)
114
+ at Wed Mar 11 2020 15:08:46 GMT+0000 (Greenwich Mean 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 Fri Feb 28 2020 17:13:56 GMT+0000 (Greenwich Mean Time)
112
+ at Wed Mar 11 2020 15:08:46 GMT+0000 (Greenwich Mean 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 Fri Feb 28 2020 17:13:56 GMT+0000 (Greenwich Mean Time)
87
+ at Wed Mar 11 2020 15:08:46 GMT+0000 (Greenwich Mean 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 Fri Feb 28 2020 17:13:56 GMT+0000 (Greenwich Mean Time)
555
+ at Wed Mar 11 2020 15:08:46 GMT+0000 (Greenwich Mean 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 Fri Feb 28 2020 17:13:56 GMT+0000 (Greenwich Mean Time)
97
+ at Wed Mar 11 2020 15:08:46 GMT+0000 (Greenwich Mean Time)
98
98
  </div>
99
99
  </div>
100
100
  <script src="../prettify.js"></script>
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 28 Feb 2020 17:14:20 GMT
3
+ * Generated on Wed, 11 Mar 2020 15:09:06 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 28 Feb 2020 17:14:20 GMT
3
+ * Generated on Wed, 11 Mar 2020 15:09:06 GMT
4
4
  */
5
5
 
6
6
  module.exports = {
@@ -1,7 +1,7 @@
1
1
 
2
2
  /*
3
3
  Do not edit directly
4
- Generated on Fri, 28 Feb 2020 17:14:20 GMT
4
+ Generated on Wed, 11 Mar 2020 15:09:06 GMT
5
5
  */
6
6
 
7
7
  $mds-color-brand-1-light: #2990e0 !default;
@@ -1 +1 @@
1
- [{"name":"check"},{"name":"chevron-left"},{"name":"chevron-right"},{"name":"cross"},{"name":"doc-pdf"},{"name":"doc"},{"name":"email"},{"name":"job"},{"name":"location-pin"},{"name":"menu"},{"name":"question-mark"},{"name":"search"},{"name":"social-facebook"},{"name":"social-linkedin"},{"name":"social-twitter"},{"name":"spinner"},{"name":"star-fill"},{"name":"star-outline"},{"name":"user"}]
1
+ [{"name":"check"},{"name":"chevron-left"},{"name":"chevron-right"},{"name":"cross"},{"name":"doc"},{"name":"email"},{"name":"doc-pdf"},{"name":"job"},{"name":"location-pin"},{"name":"menu"},{"name":"question-mark"},{"name":"search"},{"name":"social-facebook"},{"name":"social-linkedin"},{"name":"social-twitter"},{"name":"spinner"},{"name":"star-fill"},{"name":"star-outline"},{"name":"user"}]
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@madgex/design-system",
3
3
  "author": "Madgex",
4
4
  "license": "UNLICENSED",
5
- "version": "1.36.0",
5
+ "version": "1.36.1",
6
6
  "scripts": {
7
7
  "clean": "rimraf dist public tokens/build",
8
8
  "commit": "commit",
@@ -1,12 +1,13 @@
1
1
  ## Parameters - Nunjucks
2
2
 
3
- - `id`: the id of your combobox
3
+ - `id`: the id of your combobox
4
4
  - `name`: the name of the input for form submission
5
5
  - `resultMessage`: to be used as a prop for the Vue component below, will not be used if Javascript is not available
6
6
  - `labelText`: the text used in the label
7
7
  - `options`: a json object of key, value pairs e.g { 45: 'Orange' }. To be used when falling back to a native select if Javascript is not available
8
8
  - `fallbackTo`: the form element to use as a fallback. Should be either 'select' or 'input'
9
9
  - `placeholder`: the placeholder for your input (defaults to 'Please select')
10
+ - `classes`: add extra classes to the trigger - _optional_
10
11
 
11
12
  ## Props - Vue component
12
13
 
@@ -23,7 +23,7 @@
23
23
  {% endset -%}
24
24
 
25
25
  {%- if comboboxId -%}
26
- <div class="mds-combobox js-mds-combobox" data-combobox-id="{{ comboboxId }}" data-test="combobox">
26
+ <div class="mds-combobox js-mds-combobox {% if params.classes %} {{params.classes}}{% endif %}" data-combobox-id="{{ comboboxId }}" data-test="combobox">
27
27
  <label class="mds-combobox__label mds-font-pica mds-combobox--fallback" id="{{ comboboxId }}-label" for="{{ comboboxId }}">{{ params.labelText }}</label>
28
28
  {% if params.fallbackTo === 'select' and params.options %}
29
29
  <select class="mds-combobox__select mds-combobox--fallback" id="select-{{ comboboxId }}" name="{{ params.name }}" aria-labelledby="{{ comboboxId }}-label" value="{{ params.defaultValue|default('') }}">
@@ -12,6 +12,7 @@ module.exports = {
12
12
  labelText: 'How far are you willing to travel?',
13
13
  options: { 5: 'Within 5 miles', 10: 'Within 10 miles', 15: 'Within 15 miles', 20: 'Within 20 miles' },
14
14
  fallbackTo: 'select',
15
+ classes: 'im-a-custom-class',
15
16
  },
16
17
  },
17
18
  {
@@ -8,7 +8,8 @@
8
8
  labelText: labelText,
9
9
  options: options,
10
10
  fallbackTo: fallbackTo,
11
+ classes: classes,
11
12
  placeholder: placeholder
12
13
  }) }}
13
14
 
14
- <br><br>
15
+ <br><br>
@@ -1,21 +1,22 @@
1
1
  ## Parameters
2
2
 
3
- - `labelText`: The label for the input **required**,
4
- - `name`: The name of the input field, uses ID unless specified **optional**,
5
- - `id`: The id attribute of the field, **required**
6
- - `type`: The type of input, accepts all valid input types except `Select`/`Radio`/`Checkbox` **required**,
7
- - `optional`: Is the input optional, otherwise required **optional**,
8
- - `disabled`: Should the input be disabled **optional**,
9
- - `helpText`: Helper text to display under the label **optional**,
10
- - `validationError`: The error message provided by validation **optional**,
11
- - `state`: The current state of the input, allowed values are `valid`/`error` **optional**,
12
- - `tooltipMessage`: Toggles a tooltip with this message to appear on the input **optional**
3
+ - `labelText`: The label for the input **required**,
4
+ - `name`: The name of the input field, uses ID unless specified **optional**,
5
+ - `id`: The id attribute of the field, **required**
6
+ - `type`: The type of input, accepts all valid input types except `Select`/`Radio`/`Checkbox` **required**,
7
+ - `optional`: Is the input optional, otherwise required **optional**,
8
+ - `disabled`: Should the input be disabled **optional**,
9
+ - `helpText`: Helper text to display under the label **optional**,
10
+ - `validationError`: The error message provided by validation **optional**,
11
+ - `state`: The current state of the input, allowed values are `valid`/`error` **optional**,
12
+ - `tooltipMessage`: Toggles a tooltip with this message to appear on the input **optional**
13
+ - `classes`: add extra classes to the trigger - **optional**
13
14
 
14
15
  ## Accessibility
15
16
 
16
17
  This input relies entirely on the browser standard input and applies the accessibility provided by that.
17
- 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
18
+ 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
18
19
 
19
20
  ## Note
20
21
 
21
- We have not placed any specific ruleing to stop `Select`/`Radio`/`Checkbox` being selected but have made no effort to style them
22
+ We have not placed any specific ruleing to stop `Select`/`Radio`/`Checkbox` being selected but have made no effort to style them
@@ -18,7 +18,7 @@
18
18
  {% set name = params.id %}
19
19
  {% endif %}
20
20
 
21
- <div class="mds-input{% if params.validationMessage %} mds-input--has-msg{% endif %}{% if stateClass %} {{stateClass}}{% endif %}" data-test="input">
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
23
  <label class="mds-input__label" for="{{ params.id }}">
24
24
  {{ params.labelText }}
@@ -16,6 +16,7 @@ module.exports = {
16
16
  id: 'optional-input',
17
17
  type: 'password',
18
18
  optional: true,
19
+ classes: 'im-a-custom-class',
19
20
  },
20
21
  },
21
22
  {
@@ -10,5 +10,6 @@
10
10
  helpText: helpText,
11
11
  validationError: validationError,
12
12
  state: state,
13
+ classes: classes,
13
14
  tooltipMessage: tooltipMessage
14
15
  }) }}