@ons/design-system 70.0.8 → 70.0.10

package/components/phase-banner/example-phase-banner-beta.njk

@@ -1,6 +1,7 @@
 ---
-"fullWidth": true
+'fullWidth': true
 ---
+
 {% from "components/phase-banner/_macro.njk" import onsPhaseBanner %}
 {% from "components/external-link/_macro.njk" import onsExternalLink %}
 
@@ -15,6 +16,6 @@
 
 {{
     onsPhaseBanner({
-        "html": "This is a new service. To help us improve it, " + feedbackLink
-  })
+          "html": "This is a new service. To help us improve it, " + feedbackLink
+    })
 }}

package/components/question/_macro.njk

@@ -1,16 +1,26 @@
 {% macro onsQuestion(params) %}
 
-    {%- set titleHtml -%}{% if params.readDescriptionFirst == true and params.description %}
-            <div class="ons-question__description ons-u-vh">{{ params.description | safe }} </div>{% endif %}{{- params.title | safe -}}
+    {%- set titleHtml -%}
+        {%- if params.readDescriptionFirst == true and params.description -%}
+            <div class="ons-question__description ons-u-vh">{{- params.description | safe -}}</div>
+            {{- ' ' -}}
+        {%- endif -%}{{- params.title | safe -}}
     {%- endset -%}
 
-    {%- set descHtml -%}{% if params.readDescriptionFirst == true %}
-            <div aria-hidden="true" {% if params.legendIsQuestionTitle is not defined %}class="ons-question__description ons-question__description--aria-hidden"{% endif %}>{{- params.description | safe -}}</div>
+    {%- set descHtml -%}
+        {%- if params.readDescriptionFirst == true -%}
+            <div
+                aria-hidden="true"
+                {% if params.legendIsQuestionTitle is not defined %}class="ons-question__description ons-question__description--aria-hidden"{% endif %}
+            >
+                {{- params.description | safe -}}
+            </div>
         {% elif params.legendIsQuestionTitle is not defined %}
             <div class="ons-question__description ons-u-mb-m">{{- params.description | safe -}}</div>
         {% else %}
             {{- params.description | safe -}}
-        {% endif %}{%- endset -%}
+        {%- endif -%}
+    {%- endset -%}
 
     {% set instHtml %}
         <div class="ons-question__instruction ons-u-mb-m">{{ params.instruction | safe }}</div>
@@ -19,13 +29,15 @@
     {% if params.definition %}
         {% set questionDefinition %}
             {% from "components/details/_macro.njk" import onsDetails %}
-            {% call onsDetails({
-                "id": params.definition.id,
-                "classes": 'ons-u-mb-m',
-                "title": params.definition.title,
-                "headingAttributes": params.definition.headingAttributes,
-                "contentAttributes": params.definition.contentAttributes
-            }) %}
+            {%
+                call onsDetails({
+                    "id": params.definition.id,
+                    "classes": 'ons-u-mb-m',
+                    "title": params.definition.title,
+                    "headingAttributes": params.definition.headingAttributes,
+                    "contentAttributes": params.definition.contentAttributes
+                })
+            %}
                 {% if params.definition.content %}
                     {{ params.definition.content | safe }}
                 {% endif %}
@@ -36,11 +48,13 @@
     {% if params.guidance %}
         {% set questionGuidance %}
             {% from "components/panel/_macro.njk" import onsPanel %}
-            {% call onsPanel({
-                "id": params.guidance.id,
-                "classes": "ons-question-guidance ons-u-mb-m",
-                "attributes": params.guidance.attributes
-            }) %}
+            {%
+                call onsPanel({
+                    "id": params.guidance.id,
+                    "classes": "ons-question-guidance ons-u-mb-m",
+                    "attributes": params.guidance.attributes
+                })
+            %}
                 {% if params.guidance.content %}
                     {{ params.guidance.content | safe }}
                 {% endif %}
@@ -58,24 +72,26 @@
                                 "itemsList": item.itemsList
                             })
                         }}
-                    {% endfor -%}
-                {% endif -%}
+                    {%- endfor -%}
+                {%- endif -%}
             {% endcall %}
         {% endset %}
     {% endif %}
 
     <div
-        {% if params.id %} id="{{ params.id }}"{% endif %}
-        class="ons-question ons-u-mb-l{% if params.classes %} {{ params.classes }}{% endif %}"
-        {% if params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %}{{ attribute }}{% if value %}="{{ value }}"{% endif %} {% endfor %}{% endif %}
+        {% if params.id %}id="{{ params.id }}"{% endif %}
+        class="ons-question ons-u-mb-l{{ ' ' + params.classes if params.classes else '' }}"
+        {% if params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %}{{ ' ' }}{{ attribute }}{% if value %}="{{ value }}"{% endif %}{% endfor %}{% endif %}
     >
         {% set additionalContent %}
             {% if params.warning %}
                 {% from "components/panel/_macro.njk" import onsPanel %}
-                {% call onsPanel({
-                    "id": params.warning.id,
-                    "variant": "warn"
-                }) %}
+                {%
+                    call onsPanel({
+                        "id": params.warning.id,
+                        "variant": "warn"
+                    })
+                %}
                     <p>{{ params.warning.body }}</p>
                 {% endcall %}
             {% endif %}
@@ -99,22 +115,21 @@
             {# Resolves caller issue in Jinja: https://github.com/pallets/jinja/issues/371 #}
             {% set content = caller() if caller %}
             <div class="ons-question__answer ons-u-mb-m">
-                {% call onsFieldset({
-                    "legendIsQuestionTitle": params.legendIsQuestionTitle,
-                    "legend": titleHtml,
-                    "description": descHtml if params.description else '',
-                    "legendClasses": params.legendClasses,
-                    "legendTitleClasses": params.legendTitleClasses
-                }) %}
+                {%
+                    call onsFieldset({
+                        "legendIsQuestionTitle": params.legendIsQuestionTitle,
+                        "legend": titleHtml,
+                        "description": descHtml if params.description,
+                        "legendClasses": params.legendClasses,
+                        "legendTitleClasses": params.legendTitleClasses
+                    })
+                %}
                     {{- additionalContent | safe -}}
                     {{ content }}
                 {% endcall %}
             </div>
-
         {% else %}
-            <h1 id="question-title" class="ons-question__title">
-                {{- titleHtml | safe -}}
-            </h1>
+            <h1 id="question-title" class="ons-question__title">{{- titleHtml | safe -}}</h1>
 
             {% if params.description %}
                 {{- descHtml | safe -}}
@@ -122,20 +137,20 @@
 
             {{- additionalContent | safe -}}
 
-            <div class="ons-question__answer ons-u-mb-m">
-                {{ caller() if caller }}
-            </div>
+            <div class="ons-question__answer ons-u-mb-m">{{ caller() if caller }}</div>
         {% endif %}
 
         {% if params.justification %}
             {% from "components/details/_macro.njk" import onsDetails %}
-            {% call onsDetails({
-                "id": params.justification.id,
-                "classes": 'ons-u-mb-m',
-                "title": params.justification.title | default('Why we ask this question'),
-                "headingAttributes": params.justification.headingAttributes,
-                "contentAttributes": params.justification.contentAttributes
-            }) %}
+            {%
+                call onsDetails({
+                    "id": params.justification.id,
+                    "classes": 'ons-u-mb-m',
+                    "title": params.justification.title | default('Why we ask this question'),
+                    "headingAttributes": params.justification.headingAttributes,
+                    "contentAttributes": params.justification.contentAttributes
+                })
+            %}
                 {{ params.justification.content | safe }}
             {% endcall %}
         {% endif %}

package/components/question/example-question-ccs.njk

@@ -1,47 +1,52 @@
 ---
-title: "Example: Question with an interviewer instruction"
+title: 'Example: Question with an interviewer instruction'
 layout: ~
 ---
+
 {% extends "layout/_template.njk" %}
 {% from "components/question/_macro.njk" import onsQuestion %}
 {% from "components/input/_macro.njk" import onsInput %}
-
-{% set pageConfig = {
-    "header": {
-        "title": "Interviewer led question example"
-    },
-    "breadcrumbs": {
-        "ariaLabel": 'Breadcrumbs',
-        "itemsList": [
-            {
-                "url": '#0',
-                "text": 'Previous'
-            }
-        ]
+{%
+    set pageConfig = {
+        "header": {
+            "title": "Interviewer led question example"
+        },
+        "breadcrumbs": {
+            "ariaLabel": 'Breadcrumbs',
+            "itemsList": [
+                {
+                    "url": '#0',
+                    "text": 'Previous'
+                }
+            ]
+        }
     }
-} %}
+%}
 
 {% block main %}
-    {% call onsQuestion({
-        "title": "How many visitors do you have staying overnight at 3 Severn Road on Sunday 21 March 2021?",
-        "description": "<p>A visitor is anyone aged <strong>16 years or over</strong> who usually lives at another address. Enter “0” if there are no visitors staying overnight.</p>",
-        "instruction": "<p>Tell respondent to turn to <strong>Showcard 2</strong> or show them the following Electronic Showcard</p>",
-        "definition": {
-            "title": "Electronic Showcard",
-            "content": "<p>Visitor information is collected to ensure that everyone is counted, in order to produce accurate estimates of the population, to facilitate effective planning and funding decisions</p>"
-        },
-        "submitButton": true
-    }) %}
-
-        {{ onsInput({
-            "id": "number-of-visitors",
-            "name": "number-of-visitors",
-            "type": "number",
-            "width": "2",
-            "label": {
-                "text": "Number of visitors"
-            }
-        }) }}
+    {%
+        call onsQuestion({
+            "title": "How many visitors do you have staying overnight at 3 Severn Road on Sunday 21 March 2021?",
+            "description": "<p>A visitor is anyone aged <strong>16 years or over</strong> who usually lives at another address. Enter “0” if there are no visitors staying overnight.</p>",
+            "instruction": "<p>Tell respondent to turn to <strong>Showcard 2</strong> or show them the following Electronic Showcard</p>",
+            "definition": {
+                "title": "Electronic Showcard",
+                "content": "<p>Visitor information is collected to ensure that everyone is counted, in order to produce accurate estimates of the population, to facilitate effective planning and funding decisions</p>"
+            },
+            "submitButton": true
+        })
+    %}
 
+        {{
+            onsInput({
+                "id": "number-of-visitors",
+                "name": "number-of-visitors",
+                "type": "number",
+                "width": "2",
+                "label": {
+                    "text": "Number of visitors"
+                }
+            })
+        }}
     {% endcall %}
 {% endblock %}

package/components/question/example-question-fieldset.njk

@@ -1,96 +1,100 @@
 ---
-title: "Example: Question as a fieldset"
+title: 'Example: Question as a fieldset'
 layout: ~
 ---
+
 {% extends "layout/_template.njk" %}
 {% from "components/question/_macro.njk" import onsQuestion %}
 {% from "components/radios/_macro.njk" import onsRadios %}
-
-{% set pageConfig = {
-    "header": {
-        "title": "Question example"
-    },
-    "breadcrumbs": {
-        "ariaLabel": 'Breadcrumbs',
-        "itemsList": [
-            {
-                "url": '#0',
-                "text": 'Previous'
-            }
-        ]
-    }
-} %}
-
-{% set questionTitle = "On 1 May 2016, what was the number of employees for Bolt and Ratchet?" %}
-
-{% block main %}
-    {% call onsQuestion({
-        "title": questionTitle,
-        "description": "<p>This is all employees aged 16 years or over that your organisation employs</p>",
-        "definition": {
-            "title": "What we mean by “employee”",
-            "content": "<p>An employee is a person that your organisation directly pays from its payroll(s), in return for carrying out a full-time or part-time job</p>"
+{%
+    set pageConfig = {
+        "header": {
+            "title": "Question example"
         },
-        "guidance": {
-            "lists": [
-                {
-                    "listHeading": "Include:",
-                    "itemsList": [
-                        {
-                            "text": "all employees in Great Britain (England, Scotland and Wales), both full and part-time, who received pay in the relevant period"
-                        }
-                    ]
-                },
+        "breadcrumbs": {
+            "ariaLabel": 'Breadcrumbs',
+            "itemsList": [
                 {
-                    "listHeading": "Exclude:",
-                    "itemsList": [
-                        {
-                            "text": "trainees on government schemes"
-                        },
-                        {
-                            "text": "employees working abroad unless paid directly from this business’s GB payroll"
-                        }
-                    ]
+                    "url": '#0',
+                    "text": 'Previous'
                 }
             ]
-        },
-        "justification": {
-            "title": "Why we ask this question",
-            "content": "<p>We ask this question in order to understand the size of organisations in the UK</p>"
-        },
-        "submitButton": true
-    }) %}
+        }
+    }
+%}
+{% set questionTitle = "On 1 May 2016, what was the number of employees for Bolt and Ratchet?" %}
 
-        {{ onsRadios({
-            "id": "number-of-employees",
-            "name": "number-of-employees",
-            "legend": questionTitle,
-            "legendClasses": "ons-u-vh",
-            "radios": [
-                {
-                    "id": "number-of-employees-1-9",
-                    "label": {
-                        "text": "1 – 9 employees"
+{% block main %}
+    {%
+        call onsQuestion({
+            "title": questionTitle,
+            "description": "<p>This is all employees aged 16 years or over that your organisation employs</p>",
+            "definition": {
+                "title": "What we mean by “employee”",
+                "content": "<p>An employee is a person that your organisation directly pays from its payroll(s), in return for carrying out a full-time or part-time job</p>"
+            },
+            "guidance": {
+                "lists": [
+                    {
+                        "listHeading": "Include:",
+                        "itemsList": [
+                            {
+                                "text": "all employees in Great Britain (England, Scotland and Wales), both full and part-time, who received pay in the relevant period"
+                            }
+                        ]
                     },
-                    "value": "1-9"
-                },
-                {
-                    "id": "number-of-employees-10-49",
-                    "label": {
-                        "text": "10 – 49 employees"
+                    {
+                        "listHeading": "Exclude:",
+                        "itemsList": [
+                            {
+                                "text": "trainees on government schemes"
+                            },
+                            {
+                                "text": "employees working abroad unless paid directly from this business’s GB payroll"
+                            }
+                        ]
+                    }
+                ]
+            },
+            "justification": {
+                "title": "Why we ask this question",
+                "content": "<p>We ask this question in order to understand the size of organisations in the UK</p>"
+            },
+            "submitButton": true
+        })
+    %}
+
+        {{
+            onsRadios({
+                "id": "number-of-employees",
+                "name": "number-of-employees",
+                "legend": questionTitle,
+                "legendClasses": "ons-u-vh",
+                "radios": [
+                    {
+                        "id": "number-of-employees-1-9",
+                        "label": {
+                            "text": "1 – 9 employees"
+                        },
+                        "value": "1-9"
                     },
-                    "value": "10-49"
-                },
-                {
-                    "id": "number-of-employees-50-100",
-                    "label": {
-                        "text": "50 – 100+ employees",
-                        "description": "Include multi-corporations"
+                    {
+                        "id": "number-of-employees-10-49",
+                        "label": {
+                            "text": "10 – 49 employees"
+                        },
+                        "value": "10-49"
                     },
-                    "value": "50-100"
-                }
-            ]
-        }) }}
-
+                    {
+                        "id": "number-of-employees-50-100",
+                        "label": {
+                            "text": "50 – 100+ employees",
+                            "description": "Include multi-corporations"
+                        },
+                        "value": "50-100"
+                    }
+                ]
+            })
+        }}
     {% endcall %}
 {% endblock %}

package/components/question/example-question-interviewer-note.njk

@@ -1,35 +1,38 @@
 ---
-title: "Example: Interstitial page with interviewer note"
+title: 'Example: Interstitial page with interviewer note'
 layout: ~
 ---
-{# TO DO: To be used in a new 'Interstitial' page pattern #}
 
+{# TO DO: To be used in a new 'Interstitial' page pattern #}
 {% extends "layout/_template.njk" %}
 {% from "components/question/_macro.njk" import onsQuestion %}
-
-{% set pageConfig = {
-    "header": {
-        "title": "Interviewer led interstitial"
-    },
-    "breadcrumbs": {
-        "ariaLabel": 'Breadcrumbs',
-        "itemsList": [
-            {
-                "url": '#0',
-                "text": 'Previous'
-            }
-        ]
+{%
+    set pageConfig = {
+        "header": {
+            "title": "Interviewer led interstitial"
+        },
+        "breadcrumbs": {
+            "ariaLabel": 'Breadcrumbs',
+            "itemsList": [
+                {
+                    "url": '#0',
+                    "text": 'Previous'
+                }
+            ]
+        }
     }
-} %}
+%}
 
 {% block main %}
-    {% call onsQuestion({
-        "title": "<mark>Interviewer note:</mark>Who to interview",
-        "instruction": "<p>Only interview a person who was usually living at the property on <strong>Sunday 21 March 2021</strong>.</p><p>If none of those house members are available, you must save and sign out and return to the address to interview one of them at a later date.</p>",
-        "submitButton": {
-            "variants": "timer",
-            "text": "Continue"
-        }
-    }) %}
+    {%
+        call onsQuestion({
+            "title": "<mark>Interviewer note:</mark>Who to interview",
+            "instruction": "<p>Only interview a person who was usually living at the property on <strong>Sunday 21 March 2021</strong>.</p><p>If none of those house members are available, you must save and sign out and return to the address to interview one of them at a later date.</p>",
+            "submitButton": {
+                "variants": "timer",
+                "text": "Continue"
+            }
+        })
+    %}
     {% endcall %}
 {% endblock %}

package/components/question/example-question-no-fieldset.njk

@@ -1,44 +1,50 @@
 ---
-title: "Example: Question without a fieldset"
+title: 'Example: Question without a fieldset'
 layout: ~
 ---
+
 {% extends "layout/_template.njk" %}
 {% from "components/question/_macro.njk" import onsQuestion %}
 {% from "components/input/_macro.njk" import onsInput %}
-
-{% set pageConfig = {
-    "header": {
-        "title": "Question example"
-    },
-    "breadcrumbs": {
-        "ariaLabel": 'Breadcrumbs',
-        "itemsList": [
-            {
-                "url": '#0',
-                "text": 'Previous'
-            }
-        ]
+{%
+    set pageConfig = {
+        "header": {
+            "title": "Question example"
+        },
+        "breadcrumbs": {
+            "ariaLabel": 'Breadcrumbs',
+            "itemsList": [
+                {
+                    "url": '#0',
+                    "text": 'Previous'
+                }
+            ]
+        }
     }
-} %}
+%}
 
 {% block main %}
-    {% call onsQuestion({
-        "title": "How many visitors are staying overnight at 3 Severn Road on 13 May 2019?",
-        "description": "<p>Enter “0” if there are no visitors staying overnight</p>",
-        "justification": {
-            "title": "Why we ask this question",
-            "content": "<p>Visitor information is collected to ensure that everyone is counted, in order to produce accurate estimates of the population, to facilitate effective planning and funding decisions.</p>"
-        },
-        "submitButton": true
-    }) %}
-        {{ onsInput({
-            "id": "number-of-visitors",
-            "name": "number-of-visitors",
-            "type": "number",
-            "width": "2",
-            "label": {
-                "text": "Number of visitors"
-            }
-        }) }}
+    {%
+        call onsQuestion({
+            "title": "How many visitors are staying overnight at 3 Severn Road on 13 May 2019?",
+            "description": "<p>Enter “0” if there are no visitors staying overnight</p>",
+            "justification": {
+                "title": "Why we ask this question",
+                "content": "<p>Visitor information is collected to ensure that everyone is counted, in order to produce accurate estimates of the population, to facilitate effective planning and funding decisions.</p>"
+            },
+            "submitButton": true
+        })
+    %}
+        {{
+            onsInput({
+                "id": "number-of-visitors",
+                "name": "number-of-visitors",
+                "type": "number",
+                "width": "2",
+                "label": {
+                    "text": "Number of visitors"
+                }
+            })
+        }}
     {% endcall %}
 {% endblock %}

package/components/quote/_macro.njk

@@ -6,7 +6,9 @@
                 "iconType": 'quote'
             })
         -}}
-        <span class="ons-quote__text ons-u-fs-{{ params.textFontSize if params.textFontSize else 'l' }}">{{ caller() if caller else params.text | safe }}</span>
+        <span class="ons-quote__text ons-u-fs-{{ params.textFontSize if params.textFontSize else 'l' }}"
+            >{{ caller() if caller else params.text | safe }}</span
+        >
         {% if params.ref %}<span class="ons-quote__ref">&mdash; {{ params.ref | safe }}</span>{% endif %}
     </blockquote>
 {% endmacro %}