@ons/design-system 49.2.0 → 50.0.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.
Files changed (11) hide show
  1. package/components/checkboxes/_checkbox-macro.njk +2 -2
  2. package/components/checkboxes/_macro.njk +2 -2
  3. package/components/date-input/_macro.njk +2 -2
  4. package/components/input/_macro.njk +2 -2
  5. package/components/mutually-exclusive/_macro.njk +37 -20
  6. package/components/mutually-exclusive/mutually-exclusive.js +32 -23
  7. package/components/radios/_macro.njk +101 -102
  8. package/components/textarea/_macro.njk +2 -2
  9. package/package.json +1 -1
  10. package/scripts/main.es5.js +1 -1
  11. package/scripts/main.js +1 -1
package/components/checkboxes/_checkbox-macro.njk CHANGED
@@ -1,11 +1,11 @@
1
1
  {% macro onsCheckbox(params) %}
2
2
  {% from "components/label/_macro.njk" import onsLabel %}
3
3
 
4
- <span class="ons-checkbox{% if params.hideLabel is defined and params.hideLabel == true %} ons-checkbox--no-label{% endif %} {{ params.classes }}">
4
+ <span class="ons-checkbox{% if params.hideLabel is defined and params.hideLabel == true %} ons-checkbox--no-label{% endif %}{{ ' ' + params.classes if params.classes and params.classes is defined else '' }}">
5
5
  <input
6
6
  type="checkbox"
7
7
  id="{{ params.id }}"
8
- class="ons-checkbox__input ons-js-checkbox {{ params.inputClasses }}"
8
+ class="ons-checkbox__input ons-js-checkbox{{ ' ' + params.inputClasses if params.inputClasses and params.inputClasses is defined else '' }}"
9
9
  value="{{ params.value }}"
10
10
  {% if params.disabled is defined and params.disabled == true %}disabled aria-disabled="true"{%endif %}
11
11
  {% if params.name is defined and params.name %} name="{{ params.name }}"{% endif %}
package/components/checkboxes/_macro.njk CHANGED
@@ -114,11 +114,11 @@
114
114
  "attributes": params.attributes,
115
115
  "dontWrap": params.dontWrap,
116
116
  "legendIsQuestionTitle": params.legendIsQuestionTitle,
117
- "checkbox": params.mutuallyExclusive.checkbox,
117
+ "exclusiveOptions": params.mutuallyExclusive.exclusiveOptions,
118
118
  "or": params.mutuallyExclusive.or,
119
119
  "deselectMessage": params.mutuallyExclusive.deselectMessage,
120
120
  "deselectGroupAdjective": params.mutuallyExclusive.deselectGroupAdjective,
121
- "deselectCheckboxAdjective": params.mutuallyExclusive.deselectCheckboxAdjective,
121
+ "deselectExclusiveOptionAdjective": params.mutuallyExclusive.deselectExclusiveOptionAdjective,
122
122
  "error": params.error
123
123
  }) %}
124
124
  {{ fields | safe }}
package/components/date-input/_macro.njk CHANGED
@@ -96,11 +96,11 @@
96
96
  "classes": params.classes,
97
97
  "dontWrap": params.dontWrap if numberOfFields > 1 else true,
98
98
  "legendIsQuestionTitle": params.legendIsQuestionTitle,
99
- "checkbox": params.mutuallyExclusive.checkbox,
99
+ "exclusiveOptions": params.mutuallyExclusive.exclusiveOptions,
100
100
  "or": params.mutuallyExclusive.or,
101
101
  "deselectMessage": params.mutuallyExclusive.deselectMessage,
102
102
  "deselectGroupAdjective": params.mutuallyExclusive.deselectGroupAdjective,
103
- "deselectCheckboxAdjective": params.mutuallyExclusive.deselectCheckboxAdjective,
103
+ "deselectExclusiveOptionAdjective": params.mutuallyExclusive.deselectExclusiveOptionAdjective,
104
104
  "error": params.error
105
105
  }) %}
106
106
  {{ fields | safe }}
package/components/input/_macro.njk CHANGED
@@ -132,11 +132,11 @@
132
132
  "description": params.description,
133
133
  "dontWrap": params.dontWrap,
134
134
  "legendIsQuestionTitle": params.legendIsQuestionTitle,
135
- "checkbox": params.mutuallyExclusive.checkbox,
135
+ "exclusiveOptions": params.mutuallyExclusive.exclusiveOptions,
136
136
  "or": params.mutuallyExclusive.or,
137
137
  "deselectMessage": params.mutuallyExclusive.deselectMessage,
138
138
  "deselectGroupAdjective": params.mutuallyExclusive.deselectGroupAdjective,
139
- "deselectCheckboxAdjective": params.mutuallyExclusive.deselectCheckboxAdjective,
139
+ "deselectExclusiveOptionAdjective": params.mutuallyExclusive.deselectExclusiveOptionAdjective,
140
140
  "error": params.error,
141
141
  "autosuggestResults": params.autosuggestResults
142
142
  }) %}
package/components/mutually-exclusive/_macro.njk CHANGED
@@ -2,9 +2,11 @@
2
2
  {% macro onsMutuallyExclusive(params) %}
3
3
  {% from "components/fieldset/_macro.njk" import onsFieldset %}
4
4
  {% from "components/checkboxes/_checkbox-macro.njk" import onsCheckbox %}
5
+ {% from "components/radios/_macro.njk" import onsRadios %}
5
6
 
6
7
  {# Resolves caller issue in jijna: https://github.com/pallets/jinja/issues/371 #}
7
8
  {% set content = caller() %}
9
+ {% set exclusiveOptionsLength = params.exclusiveOptions | length %}
8
10
 
9
11
  {% call onsFieldset({
10
12
  "id": params.id,
@@ -22,26 +24,41 @@
22
24
  {% if params.autosuggestResults is defined and params.autosuggestResults %}
23
25
  {{ params.autosuggestResults | safe }}
24
26
  {% endif %}
25
- <p class="ons-checkboxes--mutually-exclusive__item ons-u-mt-s">
26
- <span class="ons-checkboxes__label ons-u-fs-r--b" aria-hidden="true">{{ params.or }}</span>
27
- {{
28
- onsCheckbox({
29
- "id": params.checkbox.id,
30
- "name": params.checkbox.name,
31
- "value": params.checkbox.value,
32
- "checked": params.checkbox.checked,
33
- "classes": params.checkbox.classes,
34
- "attributes": params.checkbox.attributes,
35
- "deselectMessage": params.deselectMessage,
36
- "inputClasses": "ons-js-exclusive-checkbox",
37
- "label": {
38
- "text": '<span class="ons-u-vh">' + params.or + ', </span> ' + params.checkbox.label.text,
39
- "description": params.checkbox.label.description
40
- }
41
- })
42
- }}
43
- </p>
44
- <span class="ons-js-exclusive-alert ons-u-vh" role="alert" aria-live="polite" data-group-adjective="{{ params.deselectGroupAdjective }}" data-checkbox-adjective="{{ params.deselectCheckboxAdjective }}"></span>
27
+ {% if exclusiveOptionsLength == 1 %}
28
+ <p class="ons-checkboxes--mutually-exclusive__item ons-u-mt-s">
29
+ <span class="ons-checkboxes__label ons-u-fs-r--b" aria-hidden="true">{{ params.or }}</span>
30
+ {{
31
+ onsCheckbox({
32
+ "id": params.exclusiveOptions[0].id,
33
+ "name": params.exclusiveOptions[0].name,
34
+ "value": params.exclusiveOptions[0].value,
35
+ "checked": params.exclusiveOptions[0].checked,
36
+ "classes": params.exclusiveOptions[0].classes,
37
+ "attributes": params.exclusiveOptions[0].attributes,
38
+ "deselectMessage": params.deselectMessage,
39
+ "inputClasses": "ons-js-exclusive-option",
40
+ "label": {
41
+ "text": '<span class="ons-u-vh">' + params.or + ', </span> ' + params.exclusiveOptions[0].label.text,
42
+ "description": params.exclusiveOptions[0].label.description
43
+ }
44
+ })
45
+ }}
46
+ </p>
47
+ {% elif exclusiveOptionsLength > 1 %}
48
+ <p class="ons-checkboxes--mutually-exclusive__item ons-u-mt-s">
49
+ <span class="ons-checkboxes__label ons-u-fs-r--b" aria-hidden="true">{{ params.or }}</span>
50
+ {{
51
+ onsRadios({
52
+ "dontWrap": true,
53
+ "radios": params.exclusiveOptions,
54
+ "inputClasses": "ons-js-exclusive-option",
55
+ "name": "mutuallyExclusiveRadio",
56
+ "deselectMessage": params.deselectMessage
57
+ })
58
+ }}
59
+ </p>
60
+ {% endif %}
61
+ <span class="ons-js-exclusive-alert ons-u-vh" role="alert" aria-live="polite" data-group-adjective="{{ params.deselectGroupAdjective }}" data-option-adjective="{{ params.deselectExclusiveOptionAdjective }}"></span>
45
62
  </div>
46
63
  {% endcall %}
47
64
  {% endmacro %}
package/components/mutually-exclusive/mutually-exclusive.js CHANGED
@@ -1,8 +1,8 @@
1
1
  const exclusiveGroupItemClass = 'ons-js-exclusive-group-item';
2
- const checkboxClass = 'ons-js-exclusive-checkbox';
2
+ const optionClass = 'ons-js-exclusive-option';
3
3
  const voiceOverAlertClass = 'ons-js-exclusive-alert';
4
4
  const groupAttrAdjective = 'data-group-adjective';
5
- const checkboxAttrAdjective = 'data-checkbox-adjective';
5
+ const optionAttrAdjective = 'data-option-adjective';
6
6
  const inputAbbrClass = 'ons-js-input-abbr';
7
7
  const inputLegendClass = 'ons-js-input-legend';
8
8
 
@@ -19,28 +19,28 @@ export default class MutuallyExclusive {
19
19
  exclusive: false,
20
20
  }));
21
21
 
22
- const checkboxElement = context.querySelector(`.${checkboxClass}`);
23
- this.checkbox = {
24
- element: checkboxElement,
25
- label: context.querySelector(`label[for=${checkboxElement.id}]`),
26
- labelText: this.getElementLabelText(checkboxElement),
27
- hasValue: this.inputHasValue(checkboxElement),
22
+ const exclusiveElements = [...context.getElementsByClassName(optionClass)];
23
+ this.numberOfExclusiveElements = exclusiveElements.length;
24
+ this.exclusiveElements = exclusiveElements.map(element => ({
25
+ element,
26
+ label: context.querySelector(`label[for=${element.id}]`),
27
+ labelText: this.getElementLabelText(element),
28
+ hasValue: this.inputHasValue(element),
28
29
  exclusive: true,
29
- };
30
+ }));
30
31
 
31
- this.allInputs = [...this.groupInputs, this.checkbox];
32
+ this.allInputs = [...this.groupInputs, ...this.exclusiveElements];
32
33
  this.voiceOverAlertElement = context.querySelector(`.${voiceOverAlertClass}`);
33
34
  this.groupAdjective = this.voiceOverAlertElement.getAttribute(groupAttrAdjective);
34
- this.checkboxAdjective = this.voiceOverAlertElement.getAttribute(checkboxAttrAdjective);
35
- this.deselectMessage = this.checkbox.element.getAttribute('data-deselect-message');
35
+ this.optionAttrAdjective = this.voiceOverAlertElement.getAttribute(optionAttrAdjective);
36
+ this.deselectMessage = this.exclusiveElements[0].element.getAttribute('data-deselect-message');
36
37
 
37
38
  this.bindEventListeners();
38
39
  }
39
40
 
40
41
  bindEventListeners() {
41
42
  this.allInputs.forEach(input => {
42
- const event = input.element.type === 'checkbox' ? 'click' : 'input';
43
-
43
+ const event = ['checkbox', 'radio'].includes(input.element.type) ? 'click' : 'input';
44
44
  input.element.addEventListener(event, () => this.handleValueChange(input));
45
45
  });
46
46
  }
@@ -61,7 +61,7 @@ export default class MutuallyExclusive {
61
61
  .forEach(input => {
62
62
  input.hasValue = false;
63
63
 
64
- if (input.element.type === 'checkbox') {
64
+ if (['checkbox', 'radio'].includes(input.element.type)) {
65
65
  input.element.checked = false;
66
66
  this.triggerEvent(input.element, 'change');
67
67
  } else {
@@ -70,11 +70,13 @@ export default class MutuallyExclusive {
70
70
  }
71
71
  });
72
72
  } else if (!input.exclusive) {
73
- const input = this.allInputs.find(input => input.exclusive);
74
- adjective = this.checkboxAdjective;
73
+ const inputs = this.allInputs.filter(input => input.exclusive);
74
+ adjective = this.optionAttrAdjective;
75
75
 
76
- input.hasValue = false;
77
- input.element.checked = false;
76
+ inputs.forEach(input => {
77
+ input.hasValue = false;
78
+ input.element.checked = false;
79
+ });
78
80
 
79
81
  this.triggerEvent(input.element, 'change');
80
82
  }
@@ -117,7 +119,7 @@ export default class MutuallyExclusive {
117
119
  }
118
120
 
119
121
  inputHasValue(input) {
120
- if (input.type === 'checkbox') {
122
+ if (['checkbox', 'radio'].includes(input.type)) {
121
123
  return !!input.checked;
122
124
  } else {
123
125
  return !!input.value.trim().length;
@@ -142,7 +144,7 @@ export default class MutuallyExclusive {
142
144
  deselectMessageElement.innerHTML = `. ${this.deselectMessage}`;
143
145
 
144
146
  this.deselectMessageElement = deselectMessageElement;
145
- this.checkbox.label.appendChild(deselectMessageElement);
147
+ this.exclusiveElements[0].label.appendChild(deselectMessageElement);
146
148
  } else if (this.deselectMessageElement && !groupElementSelected) {
147
149
  this.deselectMessageElement.remove();
148
150
  this.deselectMessageElement = null;
@@ -150,8 +152,15 @@ export default class MutuallyExclusive {
150
152
  }
151
153
 
152
154
  triggerEvent(input, eventType) {
153
- const event = document.createEvent('HTMLEvents');
154
- event.initEvent(eventType, false, true);
155
+ let event;
156
+ if (typeof Event === 'function') {
157
+ event = new Event(eventType, { bubbles: false, cancelable: true });
158
+ } else {
159
+ // IE11 requires a custom event
160
+ event = document.createEvent('HTMLEvents');
161
+ event.initEvent(eventType, false, true);
162
+ }
163
+
155
164
  input.dispatchEvent(event);
156
165
  }
157
166
  }
package/components/radios/_macro.njk CHANGED
@@ -13,30 +13,29 @@
13
13
  "legendIsQuestionTitle": params.legendIsQuestionTitle,
14
14
  "error": params.error
15
15
  }) %}
16
- <div class="ons-radios__items">
17
- {% for radio in params.radios %}
18
- {% if params.or is defined and params.or and loop.revindex0 == 0 %}
19
- <span class="ons-radios__label ons-u-mt-s ons-u-fs-r--b" aria-hidden="true">{{ params.or }}
20
- </span>
21
- {% endif %}
22
- <span class="ons-radios__item{{ " ons-radios__item--no-border" if params.borderless }}">
23
- <span class="ons-radio{{ " ons-radio--no-border" if params.borderless }}">
24
- {% if radio.other is defined and radio.other and radio.other.selectAllChildren is defined and radio.other.selectAllChildren == true %}
25
- {% set selectAllClass = ' ons-js-select-all-children' %}
26
- {% else %}
27
- {% set selectAllClass = '' %}
16
+ <div class="ons-radios__items">
17
+ {% for radio in params.radios %}
18
+ {% if params.or is defined and params.or and loop.revindex0 == 0 %}
19
+ <span class="ons-radios__label ons-u-mt-s ons-u-fs-r--b" aria-hidden="true">{{ params.or }}</span>
28
20
  {% endif %}
29
- <input
21
+ <span class="ons-radios__item{{ " ons-radios__item--no-border" if params.borderless }}">
22
+ <span class="ons-radio{{ " ons-radio--no-border" if params.borderless }}">
23
+ {% if radio.other is defined and radio.other and radio.other.selectAllChildren is defined and radio.other.selectAllChildren == true %}
24
+ {% set selectAllClass = ' ons-js-select-all-children' %}
25
+ {% else %}
26
+ {% set selectAllClass = '' %}
27
+ {% endif %}
28
+ <input
30
29
  type="radio"
31
30
  id="{{ radio.id }}"
32
- class="ons-radio__input ons-js-radio{{ ' ' + radio.classes if radio.classes else '' }}{{ ' ons-js-other' if radio.other else '' }}{{ selectAllClass }}"
31
+ class="ons-radio__input ons-js-radio{{ ' ' + params.inputClasses if params.inputClasses and params.inputClasses is defined else '' }}{{ ' ' + radio.classes if radio.classes else '' }}{{ ' ons-js-other' if radio.other else '' }}{{ selectAllClass }}"
33
32
  value="{{ radio.value }}"
34
33
  name="{{ params.name }}"
35
34
  {% if (radio.checked is defined and radio.checked) or (params.value is defined and params.value == radio.value) %} checked {% endif %}
36
35
  {% if radio.other is defined and radio.other and not radio.other.open %} aria-controls="{{ radio.id }}-other-wrap" aria-haspopup="true"{% endif %}
37
36
  {% if radio.attributes is defined and radio.attributes %}{% for attribute, value in (radio.attributes.items() if radio.attributes is mapping and radio.attributes.items else radio.attributes) %}{{ attribute }}{% if value is defined and value %}="{{ value }}"{% endif %} {% endfor %}{% endif %}
38
37
  >
39
- {{ onsLabel({
38
+ {{ onsLabel({
40
39
  "id": radio.id + "-label",
41
40
  "for": radio.id,
42
41
  "inputType": "radio",
@@ -44,100 +43,100 @@
44
43
  "classes": "ons-radio__label " + radio.label.classes | default(''),
45
44
  "description": radio.label.description
46
45
  }) }}
47
- {% if radio.other is defined and radio.other %}
48
- {% set otherType = radio.other.otherType | default('input') %}
49
- <span class="ons-radio__other{{ " " + 'ons-radio__other--open' if radio.other.open else "" }}" id="{{ radio.id }}-other-wrap">
50
- {% if otherType == "input" %}
51
- {% from "components/input/_macro.njk" import onsInput %}
52
- {{
53
- onsInput({
54
- "id": radio.other.id,
55
- "name": radio.other.name,
56
- "type": radio.other.type,
57
- "required": radio.other.required,
58
- "classes": ("ons-input--error" if params.error else "") + radio.other.classes | default(''),
59
- "width": radio.other.width | default('auto'),
60
- "attributes": radio.other.attributes,
61
- "label": {
62
- "id": radio.other.id + "-label",
63
- "text": radio.other.label.text,
64
- "classes": 'ons-u-fw-n'
65
- },
66
- "dontWrap": true,
67
- "value": radio.other.value
68
- })
69
- }}
70
- {% elif otherType == "select" %}
71
- {% from "components/select/_macro.njk" import onsSelect %}
72
- {{
73
- onsSelect({
74
- "id": radio.other.id,
75
- "name": radio.other.name,
76
- "options": radio.other.options,
77
- "classes": ("ons-input--error" if params.error else "") + radio.other.classes | default(''),
78
- "label": {
79
- "id": radio.other.id + "-label",
80
- "text": radio.other.label.text,
81
- "classes": 'ons-u-fw-n'
82
- },
83
- "dontWrap": true,
84
- "value": radio.other.value,
85
- "select": {
86
- "error": params.error
87
- }
88
- })
89
- }}
90
- {% elif otherType == "checkboxes" %}
91
- {% from "components/checkboxes/_macro.njk" import onsCheckboxes %}
92
- {{
93
- onsCheckboxes({
94
- "id": radio.other.id,
95
- "name": radio.other.name,
96
- "checked": radio.other.checked,
97
- "borderless": true,
98
- "legend": radio.other.legend,
99
- "legendClasses": radio.other.legendClasses,
100
- "attributes": radio.other.attributes,
101
- "classes": "ons-js-other-fieldset",
102
- "checkboxes": radio.other.checkboxes,
103
- "autoSelect": radio.other.autoSelect,
104
- "selectAllChildren": radio.other.selectAllChildren
105
- })
106
- }}
107
- {% elif otherType == "radios" %}
108
- {% from "components/radios/_macro.njk" import onsRadios %}
109
- {{
110
- onsRadios({
111
- "id": radio.other.id,
112
- "name": radio.other.name,
113
- "borderless": true,
114
- "legend": radio.other.legend,
115
- "legendClasses": radio.other.legendClasses | default('') + ' ons-u-mb-xs',
116
- "attributes": radio.other.attributes,
117
- "classes": "ons-js-other-fieldset",
118
- "radios": radio.other.radios
119
- })
120
- }}
121
- {% endif %}
122
- </span>
123
- {% endif %}
46
+ {% if radio.other is defined and radio.other %}
47
+ {% set otherType = radio.other.otherType | default('input') %}
48
+ <span class="ons-radio__other{{ " " + 'ons-radio__other--open' if radio.other.open else "" }}" id="{{ radio.id }}-other-wrap">
49
+ {% if otherType == "input" %}
50
+ {% from "components/input/_macro.njk" import onsInput %}
51
+ {{
52
+ onsInput({
53
+ "id": radio.other.id,
54
+ "name": radio.other.name,
55
+ "type": radio.other.type,
56
+ "required": radio.other.required,
57
+ "classes": ("ons-input--error" if params.error else "") + radio.other.classes | default(''),
58
+ "width": radio.other.width | default('auto'),
59
+ "attributes": radio.other.attributes,
60
+ "label": {
61
+ "id": radio.other.id + "-label",
62
+ "text": radio.other.label.text,
63
+ "classes": 'ons-u-fw-n'
64
+ },
65
+ "dontWrap": true,
66
+ "value": radio.other.value
67
+ })
68
+ }}
69
+ {% elif otherType == "select" %}
70
+ {% from "components/select/_macro.njk" import onsSelect %}
71
+ {{
72
+ onsSelect({
73
+ "id": radio.other.id,
74
+ "name": radio.other.name,
75
+ "options": radio.other.options,
76
+ "classes": ("ons-input--error" if params.error else "") + radio.other.classes | default(''),
77
+ "label": {
78
+ "id": radio.other.id + "-label",
79
+ "text": radio.other.label.text,
80
+ "classes": 'ons-u-fw-n'
81
+ },
82
+ "dontWrap": true,
83
+ "value": radio.other.value,
84
+ "select": {
85
+ "error": params.error
86
+ }
87
+ })
88
+ }}
89
+ {% elif otherType == "checkboxes" %}
90
+ {% from "components/checkboxes/_macro.njk" import onsCheckboxes %}
91
+ {{
92
+ onsCheckboxes({
93
+ "id": radio.other.id,
94
+ "name": radio.other.name,
95
+ "checked": radio.other.checked,
96
+ "borderless": true,
97
+ "legend": radio.other.legend,
98
+ "legendClasses": radio.other.legendClasses,
99
+ "attributes": radio.other.attributes,
100
+ "classes": "ons-js-other-fieldset",
101
+ "checkboxes": radio.other.checkboxes,
102
+ "autoSelect": radio.other.autoSelect,
103
+ "selectAllChildren": radio.other.selectAllChildren
104
+ })
105
+ }}
106
+ {% elif otherType == "radios" %}
107
+ {% from "components/radios/_macro.njk" import onsRadios %}
108
+ {{
109
+ onsRadios({
110
+ "id": radio.other.id,
111
+ "name": radio.other.name,
112
+ "borderless": true,
113
+ "legend": radio.other.legend,
114
+ "legendClasses": radio.other.legendClasses | default('') + ' ons-u-mb-xs',
115
+ "attributes": radio.other.attributes,
116
+ "classes": "ons-js-other-fieldset",
117
+ "radios": radio.other.radios
118
+ })
119
+ }}
120
+ {% endif %}
121
+ </span>
122
+ {% endif %}
123
+ </span>
124
124
  </span>
125
- </span>
126
- {% if not loop.last %}
127
- <br>
128
- {% endif %}
129
- {% endfor %}
130
- </div>
131
- {% if params.clearRadios is defined and params.clearRadios %}
132
- {{ onsButton({
125
+ {% if not loop.last %}
126
+ <br>
127
+ {% endif %}
128
+ {% endfor %}
129
+ </div>
130
+ {% if params.clearRadios is defined and params.clearRadios %}
131
+ {{ onsButton({
133
132
  "text": params.clearRadios.text,
134
133
  "name": params.clearRadios.name,
135
134
  "type": "submit",
136
135
  "classes": "ons-js-clear-btn ons-u-mt-s ons-u-db-no-js_enabled",
137
136
  "variants": ["secondary", "small"]
138
137
  }) }}
139
- <span class="ons-js-clear-radio-alert ons-u-vh" role="alert" aria-live="polite" data-clear="{{ params.clearRadios.ariaClearText }}" data-cleared="{{ params.clearRadios.ariaClearedText }}"></span>
140
- {% endif %}
138
+ <span class="ons-js-clear-radio-alert ons-u-vh" role="alert" aria-live="polite" data-clear="{{ params.clearRadios.ariaClearText }}" data-cleared="{{ params.clearRadios.ariaClearedText }}"></span>
139
+ {% endif %}
141
140
  {% endcall %}
142
141
 
143
142
  {% endmacro %}
package/components/textarea/_macro.njk CHANGED
@@ -50,11 +50,11 @@
50
50
  "description": params.description,
51
51
  "dontWrap": params.dontWrap,
52
52
  "legendIsQuestionTitle": params.legendIsQuestionTitle,
53
- "checkbox": params.mutuallyExclusive.checkbox,
53
+ "exclusiveOptions": params.mutuallyExclusive.exclusiveOptions,
54
54
  "or": params.mutuallyExclusive.or,
55
55
  "deselectMessage": params.mutuallyExclusive.deselectMessage,
56
56
  "deselectGroupAdjective": params.mutuallyExclusive.deselectGroupAdjective,
57
- "deselectCheckboxAdjective": params.mutuallyExclusive.deselectCheckboxAdjective,
57
+ "deselectExclusiveOptionAdjective": params.mutuallyExclusive.deselectExclusiveOptionAdjective,
58
58
  "error": params.error
59
59
  }) %}
60
60
  {% call onsField({
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@ons/design-system",
3
3
  "description": "ONS Design System built CSS, JS, and Nunjucks templates",
4
- "version": "49.2.0",
4
+ "version": "50.0.0",
5
5
  "main": "index.js",
6
6
  "license": "MIT",
7
7
  "author": {