@ons/design-system 70.0.8 → 70.0.10

package/components/related-content/example-related-content-social-media.njk

@@ -1,40 +1,42 @@
 {% from "components/related-content/_macro.njk" import onsRelatedContent %}
 
-{{ onsRelatedContent({
-    "ariaLabel": 'Social media links',
-    "rows": [
-        {
-            "id": 'follow-us',
-            "title": 'Follow us',
-            "variants": 'social',
-            "iconPosition": 'before',
-            "iconSize": 'xxl',
-            "itemsList": [
-                {
-                    "url": '#0',
-                    "text": 'Twitter',
-                    "iconType": 'twitter',
-                    "rel": 'noreferrer external'
-                },
-                {
-                    "url": '#0',
-                    "text": 'Facebook',
-                    "iconType": 'facebook',
-                    "rel": 'noreferrer external'
-                },
-                {
-                    "url": '#0',
-                    "text": 'Instagram',
-                    "iconType": 'instagram',
-                    "rel": 'noreferrer external'
-                },
-                {
-                    "url": '#0',
-                    "text": 'LinkedIn',
-                    "iconType": 'linkedin',
-                    "rel": 'noreferrer external'
-                }
-            ]
-        }
-    ]
-}) }}
+{{
+    onsRelatedContent({
+        "ariaLabel": 'Social media links',
+        "rows": [
+            {
+                "id": 'follow-us',
+                "title": 'Follow us',
+                "variants": 'social',
+                "iconPosition": 'before',
+                "iconSize": 'xxl',
+                "itemsList": [
+                    {
+                        "url": '#0',
+                        "text": 'Twitter',
+                        "iconType": 'twitter',
+                        "rel": 'noreferrer external'
+                    },
+                    {
+                        "url": '#0',
+                        "text": 'Facebook',
+                        "iconType": 'facebook',
+                        "rel": 'noreferrer external'
+                    },
+                    {
+                        "url": '#0',
+                        "text": 'Instagram',
+                        "iconType": 'instagram',
+                        "rel": 'noreferrer external'
+                    },
+                    {
+                        "url": '#0',
+                        "text": 'LinkedIn',
+                        "iconType": 'linkedin',
+                        "rel": 'noreferrer external'
+                    }
+                ]
+            }
+        ]
+    })
+}}

package/components/relationships/_macro.njk

@@ -3,15 +3,17 @@
 {% macro onsRelationships(params) %}
     <div
         {% if params.id %}id="{{ params.id }}"{% endif %}
-        class="ons-relationships ons-js-relationships{% if params.classes %} {{ params.classes }}{% endif %}"
+        class="ons-relationships ons-js-relationships{{ ' ' + params.classes if params.classes else '' }}"
     >
-        {{ onsRadios({
-            "name": params.name,
-            "dontWrap": params.dontWrap,
-            "legendIsQuestionTitle": params.legendIsQuestionTitle,
-            "radios": params.radios,
-            "error": params.error
-        }) }}
+        {{
+            onsRadios({
+                "name": params.name,
+                "dontWrap": params.dontWrap,
+                "legendIsQuestionTitle": params.legendIsQuestionTitle,
+                "radios": params.radios,
+                "error": params.error
+            })
+        }}
         <p class="ons-relationships__playback ons-js-relationships-playback ons-u-d-no" aria-live="polite">{{ params.playback | safe }}</p>
     </div>
 {% endmacro %}

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