@ons/design-system 70.0.7 → 70.0.9

package/components/relationships/example-relationships.njk

@@ -1,185 +1,191 @@
 ---
-title: "Example: Third-person relationship question"
+title: 'Example: Third-person relationship question'
 layout: ~
 ---
+
 {% extends "layout/_template.njk" %}
 {% from "components/question/_macro.njk" import onsQuestion %}
 {% from "components/relationships/_macro.njk" import onsRelationships %}
-
-{% set pageConfig = {
-    "header": {
-        "title": "Relationships example"
-    },
-    "breadcrumbs": {
-        "ariaLabel": 'Breadcrumbs',
-        "itemsList": [
-            {
-                "url": '#0',
-                "text": 'Previous'
-            }
-        ]
+{%
+    set pageConfig = {
+        "header": {
+            "title": "Relationships example"
+        },
+        "breadcrumbs": {
+            "ariaLabel": 'Breadcrumbs',
+            "itemsList": [
+                {
+                    "url": '#0',
+                    "text": 'Previous'
+                }
+            ]
+        }
     }
-} %}
+%}
 
 {% block main %}
-    {% call onsQuestion({
-        "title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>…</strong>",
-        "description": "<p>Complete the sentence by selecting the appropriate relationship</p>",
-        "readDescriptionFirst": true,
-        "legendIsQuestionTitle": true,
-        "legendTitleClasses": "ons-js-relationships-legend",
-        "submitButton": true
-    }) %}
-        {{ onsRelationships({
-            "playback": "Amanda Bloggs is Joe Bloggs' <strong>…</strong>",
-            "name": "relationship",
-            "dontWrap": true,
-            "radios": [
-                {
-                    "id": "husband-wife-example-relationships",
-                    "value": "husband-wife",
-                    "label": {
-                        "text": "Husband or wife"
+    {%
+        call onsQuestion({
+            "title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>…</strong>",
+            "description": "<p>Complete the sentence by selecting the appropriate relationship</p>",
+            "readDescriptionFirst": true,
+            "legendIsQuestionTitle": true,
+            "legendTitleClasses": "ons-js-relationships-legend",
+            "submitButton": true
+        })
+    %}
+        {{
+            onsRelationships({
+                "playback": "Amanda Bloggs is Joe Bloggs' <strong>…</strong>",
+                "name": "relationship",
+                "dontWrap": true,
+                "radios": [
+                    {
+                        "id": "husband-wife-example-relationships",
+                        "value": "husband-wife",
+                        "label": {
+                            "text": "Husband or wife"
+                        },
+                        "attributes": {
+                            "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>husband or wife</strong>",
+                            "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>husband or wife</strong>"
+                        }
                     },
-                    "attributes": {
-                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>husband or wife</strong>",
-                        "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>husband or wife</strong>"
-                    }
-                },
-                {
-                    "id": "civil-partner-example-relationships",
-                    "value": "civil-partner",
-                    "label": {
-                        "text": "Legally registered civil partner"
+                    {
+                        "id": "civil-partner-example-relationships",
+                        "value": "civil-partner",
+                        "label": {
+                            "text": "Legally registered civil partner"
+                        },
+                        "attributes": {
+                            "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>legally registered civil partner</strong>",
+                            "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>legally registered civil partner</strong>"
+                        }
                     },
-                    "attributes": {
-                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>legally registered civil partner</strong>",
-                        "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>legally registered civil partner</strong>"
-                    }
-                },
-                {
-                    "id": "partner-example-relationships",
-                    "value": "partner",
-                    "label": {
-                        "text": "Partner"
+                    {
+                        "id": "partner-example-relationships",
+                        "value": "partner",
+                        "label": {
+                            "text": "Partner"
+                        },
+                        "attributes": {
+                            "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>partner</strong>",
+                            "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>partner</strong>"
+                        }
                     },
-                    "attributes": {
-                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>partner</strong>",
-                        "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>partner</strong>"
-                    }
-                },
-                {
-                    "id": "son-daughter-example-relationships",
-                    "value": "son-daughter",
-                    "label": {
-                        "text": "Son or daughter"
+                    {
+                        "id": "son-daughter-example-relationships",
+                        "value": "son-daughter",
+                        "label": {
+                            "text": "Son or daughter"
+                        },
+                        "attributes": {
+                            "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>son or daughter</strong>",
+                            "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>son or daughter</strong>"
+                        }
                     },
-                    "attributes": {
-                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>son or daughter</strong>",
-                        "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>son or daughter</strong>"
-                    }
-                },
-                {
-                    "id": "stepchild-example-relationships",
-                    "value": "stepchild",
-                    "label": {
-                        "text": "Stepchild"
+                    {
+                        "id": "stepchild-example-relationships",
+                        "value": "stepchild",
+                        "label": {
+                            "text": "Stepchild"
+                        },
+                        "attributes": {
+                            "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>stepchild</strong>",
+                            "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>stepchild</strong>"
+                        }
                     },
-                    "attributes": {
-                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>stepchild</strong>",
-                        "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>stepchild</strong>"
-                    }
-                },
-                {
-                    "id": "brother-sister-example-relationships",
-                    "value": "brother-sister",
-                    "label": {
-                        "text": "Brother or sister"
+                    {
+                        "id": "brother-sister-example-relationships",
+                        "value": "brother-sister",
+                        "label": {
+                            "text": "Brother or sister"
+                        },
+                        "attributes": {
+                            "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>brother or sister</strong>",
+                            "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>brother or sister</strong>"
+                        }
                     },
-                    "attributes": {
-                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>brother or sister</strong>",
-                        "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>brother or sister</strong>"
-                    }
-                },
-                {
-                    "id": "stepbrother-stepsister-example-relationships",
-                    "value": "stepbrother-stepsister",
-                    "label": {
-                        "text": "Stepbrother or stepsister"
-                    },
-                    "attributes": {
-                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>stepbrother or sister</strong>",
-                        "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>stepbrother or sister</strong>"
-                    }
-                },
-                {
-                    "id": "mother-father-example-relationships",
-                    "value": "mother-father",
-                    "label": {
-                        "text": "Mother or father"
+                    {
+                        "id": "stepbrother-stepsister-example-relationships",
+                        "value": "stepbrother-stepsister",
+                        "label": {
+                            "text": "Stepbrother or stepsister"
+                        },
+                        "attributes": {
+                            "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>stepbrother or sister</strong>",
+                            "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>stepbrother or sister</strong>"
+                        }
                     },
-                    "attributes": {
-                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>mother or father</strong>",
-                        "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>mother or father</strong>"
-                    }
-                },
-                {
-                    "id": "stepmother-stepfather-example-relationships",
-                    "value": "stepmother-stepfather",
-                    "label": {
-                        "text": "Stepmother or stepfather"
+                    {
+                        "id": "mother-father-example-relationships",
+                        "value": "mother-father",
+                        "label": {
+                            "text": "Mother or father"
+                        },
+                        "attributes": {
+                            "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>mother or father</strong>",
+                            "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>mother or father</strong>"
+                        }
                     },
-                    "attributes": {
-                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>stepmother or stepfather</strong>",
-                        "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>stepmother or stepfather</strong>"
-                    }
-                },
-                {
-                    "id": "grandchild-example-relationships",
-                    "value": "grandchild",
-                    "label": {
-                        "text": "Grandchild"
+                    {
+                        "id": "stepmother-stepfather-example-relationships",
+                        "value": "stepmother-stepfather",
+                        "label": {
+                            "text": "Stepmother or stepfather"
+                        },
+                        "attributes": {
+                            "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>stepmother or stepfather</strong>",
+                            "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>stepmother or stepfather</strong>"
+                        }
                     },
-                    "attributes": {
-                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>grandchild</strong>",
-                        "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>grandchild</strong>"
-                    }
-                },
-                {
-                    "id": "grandparent-example-relationships",
-                    "value": "grandparent",
-                    "label": {
-                        "text": "Grandparent"
+                    {
+                        "id": "grandchild-example-relationships",
+                        "value": "grandchild",
+                        "label": {
+                            "text": "Grandchild"
+                        },
+                        "attributes": {
+                            "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>grandchild</strong>",
+                            "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>grandchild</strong>"
+                        }
                     },
-                    "attributes": {
-                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>grandparents</strong>",
-                        "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>grandparents</strong>"
-                    }
-                },
-                {
-                    "id": "other-relation-example-relationships",
-                    "value": "other-relation",
-                    "label": {
-                        "text": "Other relation"
+                    {
+                        "id": "grandparent-example-relationships",
+                        "value": "grandparent",
+                        "label": {
+                            "text": "Grandparent"
+                        },
+                        "attributes": {
+                            "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>grandparents</strong>",
+                            "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>grandparents</strong>"
+                        }
                     },
-                    "attributes": {
-                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>other relation</strong>",
-                        "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>other relation</strong>"
-                    }
-                },
-                {
-                    "id": "unrelated-example-relationships",
-                    "value": "unrelated",
-                    "label": {
-                        "text": "Unrelated",
-                        "description": "Including foster child"
+                    {
+                        "id": "other-relation-example-relationships",
+                        "value": "other-relation",
+                        "label": {
+                            "text": "Other relation"
+                        },
+                        "attributes": {
+                            "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>other relation</strong>",
+                            "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>other relation</strong>"
+                        }
                     },
-                    "attributes": {
-                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is <strong>unrelated</strong> to Joe Bloggs",
-                        "data-playback": "Amanda Bloggs is <strong>unrelated</strong> to Joe Bloggs"
+                    {
+                        "id": "unrelated-example-relationships",
+                        "value": "unrelated",
+                        "label": {
+                            "text": "Unrelated",
+                            "description": "Including foster child"
+                        },
+                        "attributes": {
+                            "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is <strong>unrelated</strong> to Joe Bloggs",
+                            "data-playback": "Amanda Bloggs is <strong>unrelated</strong> to Joe Bloggs"
+                        }
                     }
-                }
-            ]
-        }) }}
+                ]
+            })
+        }}
     {% endcall %}
 {% endblock %}

package/components/relationships/relationships.dom.js

@@ -1,11 +1,11 @@
 import domready from '../../js/domready';
 
 domready(async () => {
-  const relationships = [...document.querySelectorAll('.ons-js-relationships')];
+    const relationships = [...document.querySelectorAll('.ons-js-relationships')];
 
-  if (relationships.length) {
-    const Relationships = (await import('./relationships')).default;
+    if (relationships.length) {
+        const Relationships = (await import('./relationships')).default;
 
-    relationships.forEach((element) => new Relationships(element));
-  }
+        relationships.forEach((element) => new Relationships(element));
+    }
 });

package/components/relationships/relationships.js

@@ -1,28 +1,28 @@
 export default class Relationships {
-  constructor(context) {
-    this.context = context;
-    this.legend = document.getElementById('question-title')
-      ? document.getElementById('question-title')
-      : document.getElementById('fieldset-legend-title');
-    this.radios = [...context.querySelectorAll('input[type=radio]')];
-    this.playback = context.querySelector('.ons-js-relationships-playback');
+    constructor(context) {
+        this.context = context;
+        this.legend = document.getElementById('question-title')
+            ? document.getElementById('question-title')
+            : document.getElementById('fieldset-legend-title');
+        this.radios = [...context.querySelectorAll('input[type=radio]')];
+        this.playback = context.querySelector('.ons-js-relationships-playback');
 
-    this.radios.forEach((radio) => radio.addEventListener('change', this.setPlayback.bind(this)));
+        this.radios.forEach((radio) => radio.addEventListener('change', this.setPlayback.bind(this)));
 
-    this.setPlayback();
+        this.setPlayback();
 
-    this.playback.classList.remove('ons-u-d-no');
-  }
+        this.playback.classList.remove('ons-u-d-no');
+    }
 
-  setPlayback() {
-    const radio = this.radios.find((radio) => radio.checked);
+    setPlayback() {
+        const radio = this.radios.find((radio) => radio.checked);
 
-    if (radio) {
-      const title = radio.getAttribute('data-title');
+        if (radio) {
+            const title = radio.getAttribute('data-title');
 
-      this.legend.innerHTML = title;
+            this.legend.innerHTML = title;
 
-      this.playback.innerHTML = radio.getAttribute('data-playback');
+            this.playback.innerHTML = radio.getAttribute('data-playback');
+        }
     }
-  }
 }

package/components/relationships/relationships.spec.js

@@ -1,84 +1,84 @@
 import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
 
 const EXAMPLE_RELATIONSHIPS = {
-  dontWrap: true,
-  playback: "Amanda Bloggs is Joe Bloggs' <strong>…</strong>",
-  name: 'relationship',
-  radios: [
-    {
-      id: 'grandparent',
-      value: 'grandparent',
-      label: {
-        text: 'Grandparent',
-      },
-      attributes: {
-        'data-title': 'Thinking of Joe Bloggs, Amanda Bloggs is their <strong>grandparents</strong>',
-        'data-playback': "Amanda Bloggs is Joe Bloggs' <strong>grandparents</strong>",
-      },
-    },
-    {
-      id: 'other-relation',
-      value: 'other-relation',
-      label: {
-        text: 'Other relation',
-      },
-      attributes: {
-        'data-title': 'Thinking of Joe Bloggs, Amanda Bloggs is their <strong>other relation</strong>',
-        'data-playback': "Amanda Bloggs is Joe Bloggs' <strong>other relation</strong>",
-      },
-    },
-    {
-      id: 'unrelated',
-      value: 'unrelated',
-      label: {
-        text: 'Unrelated',
-        description: 'Including foster child',
-      },
-      attributes: {
-        'data-title': 'Thinking of Joe Bloggs, Amanda Bloggs is <strong>unrelated</strong> to Joe Bloggs',
-        'data-playback': 'Amanda Bloggs is <strong>unrelated</strong> to Joe Bloggs',
-      },
-    },
-  ],
-};
-
-describe('script: relationships', () => {
-  beforeEach(async () => {
-    await setTestPage(
-      '/test',
-      renderComponent(
-        'question',
+    dontWrap: true,
+    playback: "Amanda Bloggs is Joe Bloggs' <strong>…</strong>",
+    name: 'relationship',
+    radios: [
         {
-          title: 'Thinking of Joe Bloggs, Amanda Bloggs is their <strong>…</strong>',
-          readDescriptionFirst: true,
-          legendIsQuestionTitle: true,
-          legendTitleClasses: 'ons-js-relationships-legend',
+            id: 'grandparent',
+            value: 'grandparent',
+            label: {
+                text: 'Grandparent',
+            },
+            attributes: {
+                'data-title': 'Thinking of Joe Bloggs, Amanda Bloggs is their <strong>grandparents</strong>',
+                'data-playback': "Amanda Bloggs is Joe Bloggs' <strong>grandparents</strong>",
+            },
         },
-        [renderComponent('relationships', EXAMPLE_RELATIONSHIPS)],
-      ),
-    );
-  });
-
-  describe('when the component initialises', () => {
-    it('then the playback paragraph should become visible', async () => {
-      const hasHideClass = await page.$eval('.ons-relationships__playback', (node) => node.classList.contains('ons-u-d-no'));
-      expect(hasHideClass).toBe(false);
-    });
-  });
+        {
+            id: 'other-relation',
+            value: 'other-relation',
+            label: {
+                text: 'Other relation',
+            },
+            attributes: {
+                'data-title': 'Thinking of Joe Bloggs, Amanda Bloggs is their <strong>other relation</strong>',
+                'data-playback': "Amanda Bloggs is Joe Bloggs' <strong>other relation</strong>",
+            },
+        },
+        {
+            id: 'unrelated',
+            value: 'unrelated',
+            label: {
+                text: 'Unrelated',
+                description: 'Including foster child',
+            },
+            attributes: {
+                'data-title': 'Thinking of Joe Bloggs, Amanda Bloggs is <strong>unrelated</strong> to Joe Bloggs',
+                'data-playback': 'Amanda Bloggs is <strong>unrelated</strong> to Joe Bloggs',
+            },
+        },
+    ],
+};
 
-  describe('when the user selects a relationship', () => {
+describe('script: relationships', () => {
     beforeEach(async () => {
-      await page.click('#other-relation');
+        await setTestPage(
+            '/test',
+            renderComponent(
+                'question',
+                {
+                    title: 'Thinking of Joe Bloggs, Amanda Bloggs is their <strong>…</strong>',
+                    readDescriptionFirst: true,
+                    legendIsQuestionTitle: true,
+                    legendTitleClasses: 'ons-js-relationships-legend',
+                },
+                [renderComponent('relationships', EXAMPLE_RELATIONSHIPS)],
+            ),
+        );
     });
 
-    it('the question title should be changed to reflect the relationship', async () => {
-      const headingText = await page.$eval('h1', (element) => element.innerHTML);
-      expect(headingText.trim()).toBe('Thinking of Joe Bloggs, Amanda Bloggs is their <strong>other relation</strong>');
+    describe('when the component initialises', () => {
+        it('then the playback paragraph should become visible', async () => {
+            const hasHideClass = await page.$eval('.ons-relationships__playback', (node) => node.classList.contains('ons-u-d-no'));
+            expect(hasHideClass).toBe(false);
+        });
     });
 
-    it('the playback should be changed to reflect the relationship', async () => {
-      const playbackText = await page.$eval('.ons-relationships__playback', (element) => element.innerHTML);
-      expect(playbackText.trim()).toBe("Amanda Bloggs is Joe Bloggs' <strong>other relation</strong>");
+    describe('when the user selects a relationship', () => {
+        beforeEach(async () => {
+            await page.click('#other-relation');
+        });
+
+        it('the question title should be changed to reflect the relationship', async () => {
+            const headingText = await page.$eval('h1', (element) => element.innerHTML);
+            expect(headingText.trim()).toBe('Thinking of Joe Bloggs, Amanda Bloggs is their <strong>other relation</strong>');
+        });
+
+        it('the playback should be changed to reflect the relationship', async () => {
+            const playbackText = await page.$eval('.ons-relationships__playback', (element) => element.innerHTML);
+            expect(playbackText.trim()).toBe("Amanda Bloggs is Joe Bloggs' <strong>other relation</strong>");
+        });
     });
-  });
 });