@ons/design-system 70.0.8 → 70.0.9

package/components/radios/_macro.njk

@@ -2,17 +2,19 @@
     {% from "components/fieldset/_macro.njk" import onsFieldset %}
     {% from "components/button/_macro.njk" import onsButton %}
     {% from "components/label/_macro.njk" import onsLabel %}
-    
-    {% call onsFieldset({
-        "id": params.id,
-        "classes": params.classes,
-        "legend": params.legend,
-        "legendClasses": params.legendClasses,
-        "description": params.description,
-        "dontWrap": params.dontWrap,
-        "legendIsQuestionTitle": params.legendIsQuestionTitle,
-        "error": params.error
-    }) %}
+
+    {%
+        call onsFieldset({
+            "id": params.id,
+            "classes": params.classes,
+            "legend": params.legend,
+            "legendClasses": params.legendClasses,
+            "description": params.description,
+            "dontWrap": params.dontWrap,
+            "legendIsQuestionTitle": params.legendIsQuestionTitle,
+            "error": params.error
+        })
+    %}
         <div class="ons-radios__items">
             {% for radio in params.radios %}
                 {% if params.or and loop.revindex0 == 0 %}
@@ -20,7 +22,7 @@
                 {% endif %}
                 <span class="ons-radios__item{{ " ons-radios__item--no-border" if params.borderless }}">
                     <span class="ons-radio{{ " ons-radio--no-border" if params.borderless }}">
-                        {%  if radio.other and radio.other.selectAllChildren == true %}
+                        {% if radio.other and radio.other.selectAllChildren == true %}
                             {% set selectAllClass = ' ons-js-select-all-children' %}
                         {% else %}
                             {% set selectAllClass = '' %}
@@ -28,24 +30,32 @@
                         <input
                             type="radio"
                             id="{{ radio.id }}"
-                            class="ons-radio__input ons-js-radio{{ ' ' + params.inputClasses if params.inputClasses else '' }}{{ ' ' + radio.classes if radio.classes else '' }}{{ ' ons-js-other' if radio.other else '' }}{{ selectAllClass }}"
+                            class="ons-radio__input ons-js-radio{{ ' ' + params.inputClasses if params.inputClasses else '' }}{{ ' ' + radio.classes if radio.classes else '' }}{{ ' ons-js-other' if radio.other }}{{ selectAllClass }}"
                             value="{{ radio.value }}"
                             name="{{ params.name }}"
-                            {% if radio.checked or (params.value is defined and params.value == radio.value) %} checked {% endif %}
-                            {% if radio.other and not radio.other.open %} aria-controls="{{ radio.id }}-other-wrap" aria-haspopup="true"{% endif %}
-                            {% if radio.attributes %}{% for attribute, value in (radio.attributes.items() if radio.attributes is mapping and radio.attributes.items else radio.attributes) %}{{ attribute }}{% if value %}="{{ value }}"{% endif %} {% endfor %}{% endif %}
-                        >
-                        {{ onsLabel({
-                            "id": radio.id + "-label",
-                            "for": radio.id,
-                            "inputType": "radio",
-                            "text": radio.label.text,
-                            "classes": "ons-radio__label " + radio.label.classes | default(''),
-                            "description": radio.label.description
-                        }) }}
+                            {% if radio.checked or (params.value is defined and params.value == radio.value) %}{{ ' ' }}checked{% endif %}
+                            {% if radio.other and not radio.other.open %}
+                                {{ ' ' }}aria-controls="{{ radio.id }}-other-wrap"
+                                aria-haspopup="true"
+                            {% endif %}
+                            {% if radio.attributes %}{% for attribute, value in (radio.attributes.items() if radio.attributes is mapping and radio.attributes.items else radio.attributes) %}{{ ' ' }}{{ attribute }}{% if value %}="{{ value }}"{% endif %}{% endfor %}{% endif %}
+                        />
+                        {{
+                            onsLabel({
+                                "id": radio.id + "-label",
+                                "for": radio.id,
+                                "inputType": "radio",
+                                "text": radio.label.text,
+                                "classes": "ons-radio__label" + (" " + radio.label.classes if radio.label.classes else ""),
+                                "description": radio.label.description
+                            })
+                        }}
                         {% if radio.other %}
                             {% set otherType = radio.other.otherType | default('input') %}
-                            <span class="ons-radio__other{{ " " + 'ons-radio__other--open' if radio.other.open else "" }}" id="{{ radio.id }}-other-wrap">
+                            <span
+                                class="ons-radio__other{{ ' ' + 'ons-radio__other--open' if radio.other.open else '' }}"
+                                id="{{ radio.id }}-other-wrap"
+                            >
                                 {% if otherType == "input" %}
                                     {% from "components/input/_macro.njk" import onsInput %}
                                     {{
@@ -119,6 +129,7 @@
                                         onsTextarea({
                                             "id": radio.other.id,
                                             "name": radio.other.name,
+                                            "value": radio.other.value,
                                             "label": {
                                                 "id": radio.other.id + "-label",
                                                 "text": radio.other.label.text,
@@ -138,20 +149,27 @@
                     </span>
                 </span>
                 {% if not loop.last %}
-                    <br>
+                    <br />
                 {% endif %}
             {% endfor %}
         </div>
         {% if params.clearRadios %}
-            {{ onsButton({
-                "text": params.clearRadios.text,
-                "name": params.clearRadios.name,
-                "type": "submit",
-                "classes": "ons-js-clear-btn ons-u-mt-s ons-u-db-no-js_enabled",
-                "variants": ["secondary", "small"]
-            }) }}
-            <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>
+            {{
+                onsButton({
+                    "text": params.clearRadios.text,
+                    "name": params.clearRadios.name,
+                    "type": "submit",
+                    "classes": "ons-js-clear-btn ons-u-mt-s ons-u-db-no-js_enabled",
+                    "variants": ["secondary", "small"]
+                })
+            }}
+            <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>
         {% endif %}
     {% endcall %}
-
 {% endmacro %}

package/components/radios/_macro.spec.js

@@ -122,6 +122,16 @@ const EXAMPLE_RADIO_ITEM_RADIOS = {
     },
 };
 
+const EXAMPLE_RADIO_ITEM_TEXTAREA_WITH_PRESET_VALUE = {
+    other: {
+        otherType: 'textarea',
+        checked: true,
+        id: 'other-textarea-input',
+        name: 'other-answer',
+        value: 'other answer',
+    },
+};
+
 describe('macro: radios', () => {
     it.each([
         ['plain', EXAMPLE_RADIO_ITEM],
@@ -537,6 +547,17 @@ describe('macro: radios', () => {
                 radios: EXAMPLE_RADIO_ITEM_RADIOS.other.radios,
             });
         });
+
+        it('renders "textarea" component with a preset value for item', () => {
+            const $ = cheerio.load(
+                renderComponent('radios', {
+                    ...EXAMPLE_RADIOS_MINIMAL,
+                    radios: [EXAMPLE_RADIO_ITEM_TEXTAREA_WITH_PRESET_VALUE],
+                }),
+            );
+
+            expect($('.ons-input--textarea').text()).toBe('other answer');
+        });
     });
 
     describe('clear radios button', () => {

package/components/radios/example-radios-with-clear-button-expanded.njk

@@ -3,10 +3,12 @@
 {% from "components/question/_macro.njk" import onsQuestion %}
 {% from "components/panel/_macro.njk" import onsPanel %}
 
-{% call onsQuestion({
-    "title": "What is your religion?",
-    "legendIsQuestionTitle": true
-}) %}
+{%
+    call onsQuestion({
+        "title": "What is your religion?",
+        "legendIsQuestionTitle": true
+    })
+%}
     {{
         onsPanel({
             "body": '<p>This question is <strong>voluntary</strong></p>',

package/components/radios/example-radios-with-clear-button.njk

@@ -3,10 +3,12 @@
 {% from "components/question/_macro.njk" import onsQuestion %}
 {% from "components/panel/_macro.njk" import onsPanel %}
 
-{% call onsQuestion({
-    "title": "What is your religion?",
-    "legendIsQuestionTitle": true
-}) %}
+{%
+    call onsQuestion({
+        "title": "What is your religion?",
+        "legendIsQuestionTitle": true
+    })
+%}
     {{
         onsPanel({
             "body": '<p>This question is <strong>voluntary</strong></p>',

package/components/radios/example-radios-with-descriptions.njk

@@ -1,11 +1,13 @@
 {% from "components/radios/_macro.njk" import onsRadios %}
 {% from "components/question/_macro.njk" import onsQuestion %}
 
-{% call onsQuestion({
-    "title": "What is your ethnic group or background?",
-    "classes": "ons-u-mt-no",
-    "legendIsQuestionTitle": true
-}) %}
+{%
+    call onsQuestion({
+        "title": "What is your ethnic group or background?",
+        "classes": "ons-u-mt-no",
+        "legendIsQuestionTitle": true
+    })
+%}
     {{
         onsRadios({
             "dontWrap": true,

package/components/radios/example-radios-with-revealed-select-expanded.njk

@@ -1,10 +1,12 @@
 {% from "components/question/_macro.njk" import onsQuestion %}
 {% from "components/radios/_macro.njk" import onsRadios %}
 
-{% call onsQuestion({
-    "title": "How would you like us to contact you?",
-    "legendIsQuestionTitle": true
-}) %}
+{%
+    call onsQuestion({
+        "title": "How would you like us to contact you?",
+        "legendIsQuestionTitle": true
+    })
+%}
     {{
         onsRadios({
             "dontWrap": true,

package/components/radios/example-radios-with-revealed-select.njk

@@ -1,10 +1,12 @@
 {% from "components/question/_macro.njk" import onsQuestion %}
 {% from "components/radios/_macro.njk" import onsRadios %}
 
-{% call onsQuestion({
-    "title": "How would you like us to contact you?",
-    "legendIsQuestionTitle": true
-}) %}
+{%
+    call onsQuestion({
+        "title": "How would you like us to contact you?",
+        "legendIsQuestionTitle": true
+    })
+%}
     {{
         onsRadios({
             "dontWrap": true,

package/components/radios/example-radios-with-revealed-text-area-expanded.njk

@@ -1,11 +1,13 @@
 {% from "components/radios/_macro.njk" import onsRadios %}
 {% from "components/question/_macro.njk" import onsQuestion %}
 
-{% call onsQuestion({
-    "title": "How do you usually travel to work?",
-    "classes": "ons-u-mt-no",
-    "legendIsQuestionTitle": true
-}) %}
+{%
+    call onsQuestion({
+        "title": "How do you usually travel to work?",
+        "classes": "ons-u-mt-no",
+        "legendIsQuestionTitle": true
+    })
+%}
     {{
         onsRadios({
             "dontWrap": true,

package/components/radios/example-radios-with-revealed-text-area.njk

@@ -1,11 +1,13 @@
 {% from "components/radios/_macro.njk" import onsRadios %}
 {% from "components/question/_macro.njk" import onsQuestion %}
 
-{% call onsQuestion({
-    "title": "How do you usually travel to work?",
-    "classes": "ons-u-mt-no",
-    "legendIsQuestionTitle": true
-}) %}
+{%
+    call onsQuestion({
+        "title": "How do you usually travel to work?",
+        "classes": "ons-u-mt-no",
+        "legendIsQuestionTitle": true
+    })
+%}
     {{
         onsRadios({
             "dontWrap": true,

package/components/radios/example-radios-with-revealed-text-input-expanded.njk

@@ -1,11 +1,13 @@
 {% from "components/radios/_macro.njk" import onsRadios %}
 {% from "components/question/_macro.njk" import onsQuestion %}
 
-{% call onsQuestion({
-    "title": "How do you usually travel to work?",
-    "classes": "ons-u-mt-no",
-    "legendIsQuestionTitle": true
-}) %}
+{%
+    call onsQuestion({
+        "title": "How do you usually travel to work?",
+        "classes": "ons-u-mt-no",
+        "legendIsQuestionTitle": true
+    })
+%}
     {{
         onsRadios({
             "dontWrap": true,

package/components/radios/example-radios-with-revealed-text-input.njk

@@ -1,11 +1,13 @@
 {% from "components/radios/_macro.njk" import onsRadios %}
 {% from "components/question/_macro.njk" import onsQuestion %}
 
-{% call onsQuestion({
-    "title": "How do you usually travel to work?",
-    "classes": "ons-u-mt-no",
-    "legendIsQuestionTitle": true
-}) %}
+{%
+    call onsQuestion({
+        "title": "How do you usually travel to work?",
+        "classes": "ons-u-mt-no",
+        "legendIsQuestionTitle": true
+    })
+%}
     {{
         onsRadios({
             "dontWrap": true,

package/components/radios/example-radios-with-separator.njk

@@ -1,10 +1,12 @@
 {% from "components/question/_macro.njk" import onsQuestion %}
 {% from "components/radios/_macro.njk" import onsRadios %}
 
-{% call onsQuestion({
-    "title": "How satisfied are you with this service?",
-    "legendIsQuestionTitle": true
-}) %}
+{%
+    call onsQuestion({
+        "title": "How satisfied are you with this service?",
+        "legendIsQuestionTitle": true
+    })
+%}
     {{
         onsRadios({
             "dontWrap": true,

package/components/radios/example-radios-with-visible-text-input.njk

@@ -1,11 +1,13 @@
 {% from "components/radios/_macro.njk" import onsRadios %}
 {% from "components/question/_macro.njk" import onsQuestion %}
 
-{% call onsQuestion({
-    "title": "Is the gender you identify with the same as your sex registered at birth?",
-    "classes": "ons-u-mt-no",
-    "legendIsQuestionTitle": true
-}) %}
+{%
+    call onsQuestion({
+        "title": "Is the gender you identify with the same as your sex registered at birth?",
+        "classes": "ons-u-mt-no",
+        "legendIsQuestionTitle": true
+    })
+%}
     {{
         onsRadios({
             "dontWrap": true,

package/components/radios/example-radios-without-border.njk

@@ -45,4 +45,3 @@
         ]
     })
 }}
-

package/components/radios/example-radios.njk

@@ -1,11 +1,13 @@
 {% from "components/radios/_macro.njk" import onsRadios %}
 {% from "components/question/_macro.njk" import onsQuestion %}
 
-{% call onsQuestion({
-    "title": "What type of accommodation do you live in?",
-    "classes": "ons-u-mt-no",
-    "legendIsQuestionTitle": true
-}) %}
+{%
+    call onsQuestion({
+        "title": "What type of accommodation do you live in?",
+        "classes": "ons-u-mt-no",
+        "legendIsQuestionTitle": true
+    })
+%}
     {{
         onsRadios({
             "name": "property-type",

package/components/related-content/_macro.njk

@@ -1,18 +1,18 @@
 {% macro onsRelatedContent(params) %}
-
-    {% if params.classes %}
-        {% set classes = ' ' + params.classes %}
-    {% endif %}
-
-    <aside class="ons-related-content{{ classes }}" aria-label="{{ params.ariaLabel | default("Related content") }}">
+    <aside
+        class="ons-related-content{{ ' ' + params.classes if params.classes else '' }}"
+        aria-label="{{ params.ariaLabel | default('Related content') }}"
+    >
         {% if params.rows %}
             {% from "components/related-content/_section-macro.njk" import onsRelatedContentSection %}
             {% from "components/list/_macro.njk" import onsList %}
             {% for row in params.rows %}
-                {% call onsRelatedContentSection({
-                    "title": row.title,
-                    "id": row.id
-                }) %}
+                {%
+                    call onsRelatedContentSection({
+                        "title": row.title,
+                        "id": row.id
+                    })
+                %}
                     <nav class="ons-related-content__navigation" aria-labelledby="{{ row.id }}">
                         {{
                             onsList({
@@ -30,5 +30,4 @@
             {{ caller() if caller }}
         {% endif %}
     </aside>
-
 {% endmacro %}

package/components/related-content/_section-macro.njk

@@ -1,10 +1,10 @@
 {% macro onsRelatedContentSection(params) %}
-  <div class="ons-related-content__section">
-    {% if params.title %}
-      <h2 class="ons-related-content__title ons-u-fs-r--b ons-u-mb-xs" {% if params.id %}id="{{ params.id }}"{% endif %}>{{ params.title }}</h2>
-    {% endif %}
-    <div class="ons-related-content__content">
-      {{ caller() if caller }}
+    <div class="ons-related-content__section">
+        {% if params.title %}
+            <h2 class="ons-related-content__title ons-u-fs-r--b ons-u-mb-xs" {% if params.id %}id="{{ params.id }}"{% endif %}>
+                {{ params.title }}
+            </h2>
+        {% endif %}
+        <div class="ons-related-content__content">{{ caller() if caller }}</div>
     </div>
-  </div>
 {% endmacro %}

package/components/related-content/example-related-content-general.njk

@@ -2,9 +2,11 @@
 {% from "components/related-content/_section-macro.njk" import onsRelatedContentSection %}
 {% from "components/list/_macro.njk" import onsList %}
 
-{% call onsRelatedContent({
-    "ariaLabel": 'Related content'
-}) %}
+{%
+    call onsRelatedContent({
+        "ariaLabel": 'Related content'
+    })
+%}
     {% call onsRelatedContentSection() %}
         <p class="ons-u-mb-xs">Telephone: 0800 587 2021</p>
 

package/components/related-content/example-related-content-multiple-rows-of-links.njk

@@ -1,51 +1,53 @@
 {% from "components/related-content/_macro.njk" import onsRelatedContent %}
 
-{{ onsRelatedContent({
-    "ariaLabel": 'Related content',
-    "rows": [
-        {
-            "id": 'related-help-with-the-census',
-            "title": 'Help with the census',
-            "itemsList": [
-                {
-                    "text": 'I’m moving house',
-                    "url": '#0'
-                },
-                {
-                    "text": 'What if I’m away or abroad on Census Day?',
-                    "url": '#0'
-                },
-                {
-                    "text": 'Get an access code or paper census',
-                    "url": '#0'
-                },
-                {
-                    "text": 'Find a census support centre',
-                    "url": '#0'
-                },
-                {
-                    "text": 'Languages',
-                    "url": '#0'
-                },
-                {
-                    "text": 'Accessibility',
-                    "url": '#0'
-                }
-            ]
-        },
-        {
-            "id": 'related-content',
-            "title": 'Related content',
-            "itemsList": [
-                {
-                    "text": 'How we will contact or visit you',
-                    "url": '#0'
-                },
-                {
-                    "text": 'Media enquiries',
-                    "url": '#0'
-                }
-            ]
-        }
-    ]
-}) }}
+{{
+    onsRelatedContent({
+        "ariaLabel": 'Related content',
+        "rows": [
+            {
+                "id": 'related-help-with-the-census',
+                "title": 'Help with the census',
+                "itemsList": [
+                    {
+                        "text": 'I’m moving house',
+                        "url": '#0'
+                    },
+                    {
+                        "text": 'What if I’m away or abroad on Census Day?',
+                        "url": '#0'
+                    },
+                    {
+                        "text": 'Get an access code or paper census',
+                        "url": '#0'
+                    },
+                    {
+                        "text": 'Find a census support centre',
+                        "url": '#0'
+                    },
+                    {
+                        "text": 'Languages',
+                        "url": '#0'
+                    },
+                    {
+                        "text": 'Accessibility',
+                        "url": '#0'
+                    }
+                ]
+            },
+            {
+                "id": 'related-content',
+                "title": 'Related content',
+                "itemsList": [
+                    {
+                        "text": 'How we will contact or visit you',
+                        "url": '#0'
+                    },
+                    {
+                        "text": 'Media enquiries',
+                        "url": '#0'
+                    }
+                ]
+            }
+        ]
+    })
+}}