@madgex/design-system 5.7.1 → 5.9.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/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 +2 -2
- package/src/components/inputs/input/README.md +1 -0
- package/src/components/inputs/input/_template.njk +3 -0
- package/src/components/inputs/input/input.config.js +9 -0
- package/src/components/inputs/input/input.njk +5 -1
- package/src/components/popover/_template.njk +4 -2
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@madgex/design-system",
|
|
3
3
|
"author": "Madgex",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
|
-
"version": "5.
|
|
5
|
+
"version": "5.9.0",
|
|
6
6
|
"main": "dist/js/index.js",
|
|
7
7
|
"files": [
|
|
8
8
|
"dist",
|
|
@@ -89,5 +89,5 @@
|
|
|
89
89
|
"webpack-dev-server": "^3.11.2",
|
|
90
90
|
"webpack-stream": "^6.1.2"
|
|
91
91
|
},
|
|
92
|
-
"gitHead": "
|
|
92
|
+
"gitHead": "ac3e96e389676e6e6dfbca5f6ed6e78f1289693e"
|
|
93
93
|
}
|
|
@@ -19,6 +19,7 @@
|
|
|
19
19
|
- `placeholder`: add a placeholder to the input **optional**
|
|
20
20
|
**(please see accessibility notes below regarding the use of this parameter)**
|
|
21
21
|
- `i18n`: Text to translate/customise (object) **optional**
|
|
22
|
+
- `autocompleteValue`: Used by the browser to populate form fields, eg given-name **optional**
|
|
22
23
|
|
|
23
24
|
```
|
|
24
25
|
i18n: {
|
|
@@ -100,5 +100,14 @@ module.exports = {
|
|
|
100
100
|
id: 'input-with-hidden-label',
|
|
101
101
|
},
|
|
102
102
|
},
|
|
103
|
+
{
|
|
104
|
+
name: 'Input with autocomplete attribute',
|
|
105
|
+
context: {
|
|
106
|
+
labelText: 'Input with autocomplete attribute',
|
|
107
|
+
type: 'text',
|
|
108
|
+
id: 'input-with-autocomplete-attribute',
|
|
109
|
+
autocompleteValue: 'given-name',
|
|
110
|
+
},
|
|
111
|
+
},
|
|
103
112
|
],
|
|
104
113
|
};
|
|
@@ -18,7 +18,8 @@
|
|
|
18
18
|
validationError: validationError,
|
|
19
19
|
state: state,
|
|
20
20
|
classes: classes,
|
|
21
|
-
tooltipMessage: tooltipMessage
|
|
21
|
+
tooltipMessage: tooltipMessage,
|
|
22
|
+
autocompleteValue: autocompleteValue
|
|
22
23
|
}) }}
|
|
23
24
|
</div>
|
|
24
25
|
</div>
|
|
@@ -44,6 +45,7 @@
|
|
|
44
45
|
:error="error"
|
|
45
46
|
:class="classes"
|
|
46
47
|
:disabled="disabled"
|
|
48
|
+
:autocomplete="autocompleteValue"
|
|
47
49
|
/>
|
|
48
50
|
</mds-form-item>
|
|
49
51
|
{% endraw %}
|
|
@@ -58,6 +60,7 @@
|
|
|
58
60
|
const hideLabel = {{hideLabel or false}};
|
|
59
61
|
const labelText = "{{labelText | safe}}";
|
|
60
62
|
const placeholder = hideLabel ? labelText : "{{placeholder}}";
|
|
63
|
+
const autocompleteValue = "{{autocompleteValue}}" ? "{{autocompleteValue}}" : null;
|
|
61
64
|
|
|
62
65
|
vue.createApp({
|
|
63
66
|
components: { MdsFormItem, MdsInput},
|
|
@@ -78,6 +81,7 @@
|
|
|
78
81
|
error: {{state === 'error'}},
|
|
79
82
|
optional: {{optional or false}},
|
|
80
83
|
disabled: {{disabled or false}},
|
|
84
|
+
autocompleteValue,
|
|
81
85
|
};
|
|
82
86
|
},
|
|
83
87
|
}).use(MdsLibrary).mount('#vue-{{id}}');
|
|
@@ -6,15 +6,17 @@
|
|
|
6
6
|
|
|
7
7
|
{%- set buttonId -%}{% if params.id %}{{params.id}}-{% endif %}popover-trigger{%- endset -%}
|
|
8
8
|
|
|
9
|
+
{%- set ariaDescribedBy = [params.id, "-content"] | join -%}
|
|
10
|
+
|
|
9
11
|
{{- MdsButton({
|
|
10
|
-
attributes: { id: params.id },
|
|
12
|
+
attributes: { id: params.id, 'aria-describedby': ariaDescribedBy },
|
|
11
13
|
classes: classes,
|
|
12
14
|
type: 'button',
|
|
13
15
|
html: params.text,
|
|
14
16
|
id: buttonId
|
|
15
17
|
}) -}}
|
|
16
18
|
|
|
17
|
-
<div id="{{ params.id }}-content" class="mds-popover"{% if params.placement %} data-placement="{{ params.placement }}"{% endif %}>
|
|
19
|
+
<div id="{{ params.id }}-content" role="tooltip" class="mds-popover"{% if params.placement %} data-placement="{{ params.placement }}"{% endif %}>
|
|
18
20
|
<div class="mds-popover__arrow" data-popper-arrow></div>
|
|
19
21
|
<div class="mds-tooltip__inner">
|
|
20
22
|
{{- params.content | safe -}}
|