@ons/design-system 70.0.7 → 70.0.9

package/components/relationships/_macro.spec.js

@@ -6,101 +6,101 @@ import axe from '../../tests/helpers/axe';
 import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
 
 const EXAMPLE_RELATIONSHIPS = {
-  playback: "Amanda Bloggs is Joe Bloggs' <strong>…</strong>",
-  name: 'relationship',
-  dontWrap: true,
-  legendIsQuestionTitle: true,
-  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',
-      },
-    },
-  ],
+    playback: "Amanda Bloggs is Joe Bloggs' <strong>…</strong>",
+    name: 'relationship',
+    dontWrap: true,
+    legendIsQuestionTitle: true,
+    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('macro: relationships', () => {
-  it('passes jest-axe checks', async () => {
-    const $ = cheerio.load(renderComponent('relationships', EXAMPLE_RELATIONSHIPS));
-
-    const results = await axe($.html());
-    expect(results).toHaveNoViolations();
-  });
-
-  it('has the expected `id` attribute', () => {
-    const $ = cheerio.load(
-      renderComponent('relationships', {
-        ...EXAMPLE_RELATIONSHIPS,
-        id: 'example-relationships',
-      }),
-    );
-
-    expect($('.ons-relationships').attr('id')).toBe('example-relationships');
-  });
-
-  it('has additionally provided style classes', () => {
-    const $ = cheerio.load(
-      renderComponent('relationships', {
-        ...EXAMPLE_RELATIONSHIPS,
-        classes: 'extra-class another-extra-class',
-      }),
-    );
-
-    expect($('.ons-relationships').hasClass('extra-class')).toBe(true);
-    expect($('.ons-relationships').hasClass('another-extra-class')).toBe(true);
-  });
-
-  it('has the provided `playback` text', () => {
-    const $ = cheerio.load(renderComponent('relationships', EXAMPLE_RELATIONSHIPS));
-
-    const playbackContent = $('.ons-relationships__playback').html().trim();
-    expect(playbackContent).toBe("Amanda Bloggs is Joe Bloggs' <strong>…</strong>");
-  });
-
-  it('has playback paragraph hidden initially', async () => {
-    const $ = cheerio.load(renderComponent('relationships', EXAMPLE_RELATIONSHIPS));
-
-    expect($('.ons-relationships__playback').hasClass('ons-u-d-no')).toBe(true);
-  });
-
-  it('renders the expected radio items the radios macro', () => {
-    const faker = templateFaker();
-    const radiosSpy = faker.spy('radios');
-
-    faker.renderComponent('relationships', EXAMPLE_RELATIONSHIPS);
-
-    expect(radiosSpy.occurrences[0]).toHaveProperty('name', 'relationship');
-    expect(radiosSpy.occurrences[0]).toHaveProperty('dontWrap', true);
-    expect(radiosSpy.occurrences[0]).toHaveProperty('legendIsQuestionTitle', true);
-    expect(radiosSpy.occurrences[0]).toHaveProperty('radios', EXAMPLE_RELATIONSHIPS.radios);
-  });
+    it('passes jest-axe checks', async () => {
+        const $ = cheerio.load(renderComponent('relationships', EXAMPLE_RELATIONSHIPS));
+
+        const results = await axe($.html());
+        expect(results).toHaveNoViolations();
+    });
+
+    it('has the expected `id` attribute', () => {
+        const $ = cheerio.load(
+            renderComponent('relationships', {
+                ...EXAMPLE_RELATIONSHIPS,
+                id: 'example-relationships',
+            }),
+        );
+
+        expect($('.ons-relationships').attr('id')).toBe('example-relationships');
+    });
+
+    it('has additionally provided style classes', () => {
+        const $ = cheerio.load(
+            renderComponent('relationships', {
+                ...EXAMPLE_RELATIONSHIPS,
+                classes: 'extra-class another-extra-class',
+            }),
+        );
+
+        expect($('.ons-relationships').hasClass('extra-class')).toBe(true);
+        expect($('.ons-relationships').hasClass('another-extra-class')).toBe(true);
+    });
+
+    it('has the provided `playback` text', () => {
+        const $ = cheerio.load(renderComponent('relationships', EXAMPLE_RELATIONSHIPS));
+
+        const playbackContent = $('.ons-relationships__playback').html().trim();
+        expect(playbackContent).toBe("Amanda Bloggs is Joe Bloggs' <strong>…</strong>");
+    });
+
+    it('has playback paragraph hidden initially', async () => {
+        const $ = cheerio.load(renderComponent('relationships', EXAMPLE_RELATIONSHIPS));
+
+        expect($('.ons-relationships__playback').hasClass('ons-u-d-no')).toBe(true);
+    });
+
+    it('renders the expected radio items the radios macro', () => {
+        const faker = templateFaker();
+        const radiosSpy = faker.spy('radios');
+
+        faker.renderComponent('relationships', EXAMPLE_RELATIONSHIPS);
+
+        expect(radiosSpy.occurrences[0]).toHaveProperty('name', 'relationship');
+        expect(radiosSpy.occurrences[0]).toHaveProperty('dontWrap', true);
+        expect(radiosSpy.occurrences[0]).toHaveProperty('legendIsQuestionTitle', true);
+        expect(radiosSpy.occurrences[0]).toHaveProperty('radios', EXAMPLE_RELATIONSHIPS.radios);
+    });
 });

package/components/relationships/_relationships.scss

@@ -1,13 +1,13 @@
 .ons-relationships {
-  &__playback {
-    border-bottom: 1px solid var(--ons-color-input-border);
-    border-top: 1px solid var(--ons-color-input-border);
-    margin: 2rem 0 0;
-    padding: 1rem 0;
+    &__playback {
+        border-bottom: 1px solid var(--ons-color-input-border);
+        border-top: 1px solid var(--ons-color-input-border);
+        margin: 2rem 0 0;
+        padding: 1rem 0;
 
-    @include mq('m') {
-      display: inline-block;
-      min-width: 20rem;
+        @include mq('m') {
+            display: inline-block;
+            min-width: 20rem;
+        }
     }
-  }
 }

package/components/relationships/example-relationships-error.njk

@@ -1,34 +1,38 @@
 ---
-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 %}
 {% from "components/panel/_macro.njk" import onsPanel %}
 {% from "components/list/_macro.njk" import onsList %}
-
-{% 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 onsPanel({
-        "title": "There is a problem with your answer",
-        "variant": "error"
-    }) %}
+    {%
+        call onsPanel({
+            "title": "There is a problem with your answer",
+            "variant": "error"
+        })
+    %}
         {{
             onsList({
                 "element": "ol",
@@ -42,168 +46,172 @@ layout: ~
             })
         }}
     {% endcall %}
-    {% 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,
-            "error": {
-                "id": "relationship-error",
-                "text": "Select a relationship"
-            },
-            "radios": [
-                {
-                    "id": "husband-wife-example-relationships-error",
-                    "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>"
-                    }
+    {%
+        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,
+                "error": {
+                    "id": "relationship-error",
+                    "text": "Select a relationship"
                 },
-                {
-                    "id": "civil-partner-example-relationships-error",
-                    "value": "civil-partner",
-                    "label": {
-                        "text": "Legally registered civil partner"
+                "radios": [
+                    {
+                        "id": "husband-wife-example-relationships-error",
+                        "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>legally registered civil partner</strong>",
-                        "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>legally registered civil partner</strong>"
-                    }
-                },
-                {
-                    "id": "partner-example-relationships-error",
-                    "value": "partner",
-                    "label": {
-                        "text": "Partner"
+                    {
+                        "id": "civil-partner-example-relationships-error",
+                        "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>partner</strong>",
-                        "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>partner</strong>"
-                    }
-                },
-                {
-                    "id": "son-daughter-example-relationships-error",
-                    "value": "son-daughter",
-                    "label": {
-                        "text": "Son or daughter"
+                    {
+                        "id": "partner-example-relationships-error",
+                        "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>son or daughter</strong>",
-                        "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>son or daughter</strong>"
-                    }
-                },
-                {
-                    "id": "stepchild-example-relationships-error",
-                    "value": "stepchild",
-                    "label": {
-                        "text": "Stepchild"
+                    {
+                        "id": "son-daughter-example-relationships-error",
+                        "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>stepchild</strong>",
-                        "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>stepchild</strong>"
-                    }
-                },
-                {
-                    "id": "brother-sister-example-relationships-error",
-                    "value": "brother-sister",
-                    "label": {
-                        "text": "Brother or sister"
+                    {
+                        "id": "stepchild-example-relationships-error",
+                        "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>brother or sister</strong>",
-                        "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>brother or sister</strong>"
-                    }
-                },
-                {
-                    "id": "stepbrother-stepsister-example-relationships-error",
-                    "value": "stepbrother-stepsister",
-                    "label": {
-                        "text": "Stepbrother or stepsister"
+                    {
+                        "id": "brother-sister-example-relationships-error",
+                        "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>stepbrother or sister</strong>",
-                        "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>stepbrother or sister</strong>"
-                    }
-                },
-                {
-                    "id": "mother-father-example-relationships-error",
-                    "value": "mother-father",
-                    "label": {
-                        "text": "Mother or father"
+                    {
+                        "id": "stepbrother-stepsister-example-relationships-error",
+                        "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-error",
-                    "value": "stepmother-stepfather",
-                    "label": {
-                        "text": "Stepmother or stepfather"
+                    {
+                        "id": "mother-father-example-relationships-error",
+                        "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-error",
-                    "value": "grandchild",
-                    "label": {
-                        "text": "Grandchild"
+                    {
+                        "id": "stepmother-stepfather-example-relationships-error",
+                        "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-error",
-                    "value": "grandparent",
-                    "label": {
-                        "text": "Grandparent"
+                    {
+                        "id": "grandchild-example-relationships-error",
+                        "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-error",
-                    "value": "other-relation",
-                    "label": {
-                        "text": "Other relation"
+                    {
+                        "id": "grandparent-example-relationships-error",
+                        "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-error",
-                    "value": "unrelated",
-                    "label": {
-                        "text": "Unrelated",
-                        "description": "Including foster child"
+                    {
+                        "id": "other-relation-example-relationships-error",
+                        "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-error",
+                        "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 %}