@madgex/design-system 5.1.3 → 5.2.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/dist/assets/icons.json +1 -1
- package/package.json +2 -2
- package/src/components/inputs/radio/README.md +34 -3
- package/src/components/inputs/radio/radio.config.js +1 -1
- package/src/components/inputs/radio/radio.njk +59 -1
package/dist/assets/icons.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
[{"name":"asterisk"},{"name":"calendar"},{"name":"check"},{"name":"chevron-
|
|
1
|
+
[{"name":"asterisk"},{"name":"calendar"},{"name":"check"},{"name":"chevron-down"},{"name":"chevron-left"},{"name":"chevron-right"},{"name":"chevron-up"},{"name":"close"},{"name":"cross"},{"name":"doc-pdf"},{"name":"doc"},{"name":"email"},{"name":"external"},{"name":"job"},{"name":"location-pin"},{"name":"menu"},{"name":"minus"},{"name":"plus-small"},{"name":"plus"},{"name":"question-mark"},{"name":"search"},{"name":"social-facebook"},{"name":"social-linkedin"},{"name":"social-pinterest"},{"name":"social-reddit"},{"name":"social-twitter"},{"name":"spinner"},{"name":"star-fill"},{"name":"star-outline"},{"name":"upload"},{"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": "5.
|
|
5
|
+
"version": "5.2.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": "ea420edce2d7a45a2c196304701a1d8b860d905f"
|
|
93
93
|
}
|
|
@@ -1,4 +1,6 @@
|
|
|
1
|
-
##
|
|
1
|
+
## Nunjucks
|
|
2
|
+
|
|
3
|
+
### Parameters
|
|
2
4
|
|
|
3
5
|
- `labelText`: The label for the input **required**,
|
|
4
6
|
- `name`: The name of the input field, uses ID unless specified **optional**,
|
|
@@ -12,6 +14,7 @@
|
|
|
12
14
|
- `options`: This is an array of objects containing the parameters for each option: `labelText`, `value`, `id`, `classes`
|
|
13
15
|
- `value`: Value to preselect
|
|
14
16
|
- `i18n`: Text to translate/customise (object) **optional**
|
|
17
|
+
|
|
15
18
|
```
|
|
16
19
|
i18n: {
|
|
17
20
|
requiredIcon: 'required', // visually hidden text for the required icon (label)
|
|
@@ -21,6 +24,7 @@ i18n: {
|
|
|
21
24
|
**Note:** `id` in `options` is optional. If you don't specify one, an id will be created for you using the name/id of the field and the value of the option.
|
|
22
25
|
|
|
23
26
|
See an example option below
|
|
27
|
+
|
|
24
28
|
```
|
|
25
29
|
options: [
|
|
26
30
|
{
|
|
@@ -36,5 +40,32 @@ options: [
|
|
|
36
40
|
],
|
|
37
41
|
```
|
|
38
42
|
|
|
39
|
-
|
|
40
|
-
|
|
43
|
+
### Accessibility
|
|
44
|
+
|
|
45
|
+
This input relies entirely on the browser standard radio input and applies the accessibility provided by that.
|
|
46
|
+
|
|
47
|
+
## Vue
|
|
48
|
+
|
|
49
|
+
### Slots
|
|
50
|
+
|
|
51
|
+
- `default <slot/>` - Content of the `<label>` for the input.
|
|
52
|
+
|
|
53
|
+
### Props
|
|
54
|
+
|
|
55
|
+
- `name`: `String` **required** - `name` attribute for the input field.
|
|
56
|
+
- `id`: `String` **required** - `id` attribute for the input field, `for` attribute for the label field.
|
|
57
|
+
- `v-model`: `Any type` _optional_ - Reactive value for the input. No default value.
|
|
58
|
+
- `value`: `Any type` _optional_ - `value` attribute for the input field. No default value.
|
|
59
|
+
- `disabled`: `Boolean` _optional_ - `disabled` attribute for input field. Default value: `false`.
|
|
60
|
+
|
|
61
|
+
### Notes
|
|
62
|
+
|
|
63
|
+
> When using multiple `<MdsRadio>` sharing the same `v-model` remember to wrap them in a `<fieldset>`.
|
|
64
|
+
|
|
65
|
+
```html
|
|
66
|
+
<fieldset>
|
|
67
|
+
<mds-radio v-for="item in radios" v-model="sharedModel" :name="name" :id="item.id" :key="item.id" :value="item.value">
|
|
68
|
+
{{item.label}}
|
|
69
|
+
</mds-radio>
|
|
70
|
+
</fieldset>
|
|
71
|
+
```
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
{% from "./inputs/radio/_macro.njk" import MdsRadio %}
|
|
2
2
|
|
|
3
|
+
<em>Nunjucks</em>
|
|
3
4
|
<div class="mds-form-field">
|
|
4
5
|
{{ MdsRadio({
|
|
5
6
|
labelText: labelText,
|
|
@@ -10,4 +11,61 @@
|
|
|
10
11
|
options: options,
|
|
11
12
|
classes: classes
|
|
12
13
|
}) }}
|
|
13
|
-
</div>
|
|
14
|
+
</div>
|
|
15
|
+
|
|
16
|
+
<em>Vue</em>
|
|
17
|
+
<div class="mds-form-field ">
|
|
18
|
+
<div id="vue-{{id}}" >
|
|
19
|
+
{% raw %}
|
|
20
|
+
<mds-form-item :input-id="`${id}-vue-version`" :optional="optional" :error="error" :hide-label="hideLabel" :class="classes">
|
|
21
|
+
<template v-if="labelText" #label>{{labelText}}</template>
|
|
22
|
+
<template v-if="tooltipMessage" #tooltip>{{tooltipMessage}}</template>
|
|
23
|
+
<template v-if="helpText" #help>{{helpText}}</template>
|
|
24
|
+
<template v-if="validationError" #error>{{validationError}}</template>
|
|
25
|
+
<fieldset>
|
|
26
|
+
<mds-radio
|
|
27
|
+
v-for="item in options"
|
|
28
|
+
v-model="selectedOption"
|
|
29
|
+
:name="name"
|
|
30
|
+
:id="`${item.id}-vue-version`"
|
|
31
|
+
:key="`${item.id}-vue-version`"
|
|
32
|
+
:value="item.value"
|
|
33
|
+
:class="item.classes"
|
|
34
|
+
:disabled="disabled"
|
|
35
|
+
>
|
|
36
|
+
<span v-html="item.labelText" />
|
|
37
|
+
</mds-radio>
|
|
38
|
+
</fieldset>
|
|
39
|
+
</mds-form-item>
|
|
40
|
+
{% endraw %}
|
|
41
|
+
</div>
|
|
42
|
+
</div>
|
|
43
|
+
|
|
44
|
+
<script async type="module">
|
|
45
|
+
{% include '_import-MdsLibrary.njk' %}
|
|
46
|
+
const { MdsFormItem, MdsRadio} = MdsLibrary;
|
|
47
|
+
const hideLabel = {{hideLabel or false}};
|
|
48
|
+
const labelText = "{{labelText | safe}}";
|
|
49
|
+
const placeholder = hideLabel ? labelText : "{{placeholder}}";
|
|
50
|
+
|
|
51
|
+
vue.createApp({
|
|
52
|
+
components: { MdsFormItem, MdsRadio},
|
|
53
|
+
data() {
|
|
54
|
+
return {
|
|
55
|
+
id: "{{id | safe}}",
|
|
56
|
+
name: "vue-{{id}}",
|
|
57
|
+
selectedOption: "{{value | safe}}",
|
|
58
|
+
options: {{options | dump | safe}},
|
|
59
|
+
labelText,
|
|
60
|
+
hideLabel,
|
|
61
|
+
classes: "{{classes | safe}}",
|
|
62
|
+
helpText: "{{(helpText or '') | safe}}",
|
|
63
|
+
tooltipMessage: "{{(tooltipMessage or '') | safe}}",
|
|
64
|
+
validationError: "{{(validationError or '') | safe}}",
|
|
65
|
+
error: {{state === 'error'}},
|
|
66
|
+
optional: {{optional or false}},
|
|
67
|
+
disabled: {{disabled or false}},
|
|
68
|
+
};
|
|
69
|
+
},
|
|
70
|
+
}).use(MdsLibrary).mount('#vue-{{id}}');
|
|
71
|
+
</script>
|