Allow labels and legends to be rendered on mutually exclusive fields (#…

…482)
ONSdigital · Jul 1, 2019 · 9dfc38e · 9dfc38e
1 parent d0c2de1
commit 9dfc38e
Show file tree

Hide file tree

Showing 8 changed files with 9 additions and 4 deletions.
diff --git a/src/components/input/_macro.njk b/src/components/input/_macro.njk
@@ -42,12 +42,12 @@
             "classes": params.fieldClasses,
             "legendClasses": params.legendClasses,
             "noField": params.noField,
-            "legend": params.label.text if params.mutuallyExclusive,
+            "legend": params.legend or params.label.text if params.mutuallyExclusive,
             "dontVisuallyHideLegend": params.dontVisuallyHideLegend,
             "description": params.label.description if params.mutuallyExclusive,
             "mutuallyExclusive": params.mutuallyExclusive
         }) %}
-            {% if params.label and not params.mutuallyExclusive %}
+            {% if params.label and not (params.mutuallyExclusive and not params.legend) %}
                 {{
                     onsLabel({
                         "for": params.id,

diff --git a/src/components/mutually-exclusive/examples/checkboxes/index.njk b/src/components/mutually-exclusive/examples/checkboxes/index.njk
@@ -2,6 +2,7 @@
 {{ 
     onsCheckboxes({
         "legend": "What type of central heating do you have?",
+        "dontVisuallyHideLegend": true,
         "checkboxesLabel": "Select all that apply",
         "name": "mutually-exclusive",
         "checkboxes": [

diff --git a/src/components/mutually-exclusive/examples/date-input/index.njk b/src/components/mutually-exclusive/examples/date-input/index.njk
@@ -3,6 +3,7 @@
     onsDateInput({
         "id": "date-mutually-exclusive",
         "legend": "When did you leave your last paid job?",
+        "dontVisuallyHideLegend": true,
         "description": "For example, 31 3 2018",
         "day": {
             "label": {

diff --git a/src/components/mutually-exclusive/examples/email/index.njk b/src/components/mutually-exclusive/examples/email/index.njk
@@ -4,6 +4,7 @@
     onsInput({
         "id": "email",
         "type": "email",
+        "dontVisuallyHideLegend": true,
         "label": {
             "text": "Enter an email"
         },

diff --git a/src/components/mutually-exclusive/examples/number/index.njk b/src/components/mutually-exclusive/examples/number/index.njk
@@ -5,6 +5,7 @@
         "id": "currency",
         "type": "number",
         "classes": "input--w-5",
+        "dontVisuallyHideLegend": true,
         "attributes": {
             "min": 0
         },

diff --git a/src/components/mutually-exclusive/examples/textarea/index.njk b/src/components/mutually-exclusive/examples/textarea/index.njk
@@ -5,6 +5,7 @@
         "id": "feedback",
         "name": "feedback",
         "classes": "input--w-30",
+        "dontVisuallyHideLegend": true,
         "label": {
             "text": "Why did you leave your last job?"
         },

diff --git a/src/components/select/_macro.njk b/src/components/select/_macro.njk
@@ -5,7 +5,7 @@
 
     {% call onsField({
         "id": params.fieldId,
-        "legend": params.label.text if params.mutuallyExclusive,
+        "legend": params.legend or params.label.text if params.mutuallyExclusive,
         "dontVisuallyHideLegend": params.dontVisuallyHideLegend,
         "description": params.label.description if params.mutuallyExclusive,
         "mutuallyExclusive": params.mutuallyExclusive,

diff --git a/src/components/textarea/_macro.njk b/src/components/textarea/_macro.njk
@@ -3,7 +3,7 @@
 
     {% call onsField({
         "id": params.fieldId,
-        "legend": params.label.text if params.mutuallyExclusive,
+        "legend": params.legend or params.label.text if params.mutuallyExclusive,
         "dontVisuallyHideLegend": params.dontVisuallyHideLegend,
         "description": params.label.description if params.mutuallyExclusive,
         "mutuallyExclusive": params.mutuallyExclusive,