@ons/design-system 70.0.7 → 70.0.9

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 %}

package/components/quote/_macro.spec.js

@@ -6,68 +6,68 @@ import axe from '../../tests/helpers/axe';
 import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
 
 describe('macro: quote', () => {
-  it('passes jest-axe checks', async () => {
-    const $ = cheerio.load(
-      renderComponent('quote', {
-        text: 'Example quote text.',
-        ref: 'Example quote reference.',
-      }),
-    );
+    it('passes jest-axe checks', async () => {
+        const $ = cheerio.load(
+            renderComponent('quote', {
+                text: 'Example quote text.',
+                ref: 'Example quote reference.',
+            }),
+        );
 
-    const results = await axe($.html());
-    expect(results).toHaveNoViolations();
-  });
+        const results = await axe($.html());
+        expect(results).toHaveNoViolations();
+    });
 
-  it('has the provided `text` text', () => {
-    const $ = cheerio.load(
-      renderComponent('quote', {
-        text: 'Example quote text.',
-      }),
-    );
+    it('has the provided `text` text', () => {
+        const $ = cheerio.load(
+            renderComponent('quote', {
+                text: 'Example quote text.',
+            }),
+        );
 
-    expect($('.ons-quote__text').text().trim()).toBe('Example quote text.');
-  });
+        expect($('.ons-quote__text').text().trim()).toBe('Example quote text.');
+    });
 
-  it('has the provided `ref` text with a leading "—" character', () => {
-    const $ = cheerio.load(
-      renderComponent('quote', {
-        text: 'Example quote text.',
-        ref: 'Example quote reference.',
-      }),
-    );
+    it('has the provided `ref` text with a leading "—" character', () => {
+        const $ = cheerio.load(
+            renderComponent('quote', {
+                text: 'Example quote text.',
+                ref: 'Example quote reference.',
+            }),
+        );
 
-    expect($('.ons-quote__ref').text().trim()).toBe('— Example quote reference.');
-  });
+        expect($('.ons-quote__ref').text().trim()).toBe('— Example quote reference.');
+    });
 
-  it('has a default `textFontSize` of "l"', () => {
-    const $ = cheerio.load(
-      renderComponent('quote', {
-        text: 'Example quote text.',
-      }),
-    );
+    it('has a default `textFontSize` of "l"', () => {
+        const $ = cheerio.load(
+            renderComponent('quote', {
+                text: 'Example quote text.',
+            }),
+        );
 
-    expect($('.ons-quote__text').hasClass('ons-u-fs-l')).toBe(true);
-  });
+        expect($('.ons-quote__text').hasClass('ons-u-fs-l')).toBe(true);
+    });
 
-  it('has the provided `textFontSize`', () => {
-    const $ = cheerio.load(
-      renderComponent('quote', {
-        text: 'Example quote text.',
-        textFontSize: 's',
-      }),
-    );
+    it('has the provided `textFontSize`', () => {
+        const $ = cheerio.load(
+            renderComponent('quote', {
+                text: 'Example quote text.',
+                textFontSize: 's',
+            }),
+        );
 
-    expect($('.ons-quote__text').hasClass('ons-u-fs-s')).toBe(true);
-  });
+        expect($('.ons-quote__text').hasClass('ons-u-fs-s')).toBe(true);
+    });
 
-  it('has `quote` icon', () => {
-    const faker = templateFaker();
-    const iconsSpy = faker.spy('icon');
+    it('has `quote` icon', () => {
+        const faker = templateFaker();
+        const iconsSpy = faker.spy('icon');
 
-    faker.renderComponent('quote', {
-      text: 'Example quote text.',
-    });
+        faker.renderComponent('quote', {
+            text: 'Example quote text.',
+        });
 
-    expect(iconsSpy.occurrences[0].iconType).toBe('quote');
-  });
+        expect(iconsSpy.occurrences[0].iconType).toBe('quote');
+    });
 });

package/components/quote/_quote.scss

@@ -1,32 +1,32 @@
 .ons-quote {
-  background-size: 2rem;
-  margin: 0 0 1rem;
-  padding: 0 0 0 3em;
-  position: relative;
+    background-size: 2rem;
+    margin: 0 0 1rem;
+    padding: 0 0 0 3em;
+    position: relative;
 
-  &__text {
-    display: block;
-  }
+    &__text {
+        display: block;
+    }
 
-  &__ref {
-    @extend .ons-u-fs-s;
+    &__ref {
+        @extend .ons-u-fs-s;
 
-    color: var(--ons-color-text-light);
-    display: block;
-    margin-top: 0.5rem;
-    position: relative;
-  }
+        color: var(--ons-color-text-light);
+        display: block;
+        margin-top: 0.5rem;
+        position: relative;
+    }
 
-  .ons-icon {
-    fill: var(--ons-color-grey-75) !important;
-    height: 1.85rem;
-    left: 0;
-    position: absolute;
-    top: -0.125rem;
-    width: 1.85rem;
+    .ons-icon {
+        fill: var(--ons-color-grey-75) !important;
+        height: 1.85rem;
+        left: 0;
+        position: absolute;
+        top: -0.125rem;
+        width: 1.85rem;
 
-    @include mq(m) {
-      top: 0;
+        @include mq(m) {
+            top: 0;
+        }
     }
-  }
 }