Add formatting for Nunjucks files

.prettierrc.yml

@@ -1,3 +1,7 @@
-singleQuote: true
-printWidth: 140
-trailingComma: all
+{
+    'plugins': ['prettier-plugin-jinja-template'],
+    'singleQuote': true,
+    'printWidth': 140,
+    'trailingComma': all,
+    'overrides': [{ 'files': ['*.html', '*.njk'], 'options': { 'parser': 'jinja-template' } }],
+}

package.json

@@ -43,7 +43,7 @@
             "prettier --write",
             "yarn run stylelint-fix"
         ],
-        "*.{yml,yaml}": [
+        "*.{yml,yaml,njk,html}": [
             "prettier --write"
         ]
     },
@@ -109,7 +109,8 @@
         "postcss": "^8.3.5",
         "postcss-url": "^10.1.3",
         "prepend-file": "^2.0.1",
-        "prettier": "^3.0.0",
+        "prettier": "^3.2.5",
+        "prettier-plugin-jinja-template": "^1.4.0",
         "puppeteer": "^21.0.2",
         "remark-cli": "^12.0.0",
         "remark-lint": "^9.1.2",

src/components/access-code/_macro.njk

@@ -7,41 +7,47 @@
     {% set maxlength = params.maxlength | default(16) + extraSpaces %}
 
     {% set content %}
-        {{ onsInput({
-            "id": params.id,
-            "type": params.type,
-            "name": params.name,
-            "classes": "ons-access-code__input ons-js-access-code" + (" ons-u-mb-xs" if params.postTextboxLinkText else ""),
-            "label": params.label,
-            "attributes": {
-                "maxlength": maxlength,
-                "data-group-size": groupSize,
-                "autocomplete": "off",
-                "autocapitalize": "characters"
-            },
-            "fieldClasses": "ons-question__answer",
-            "error": params.error,
-            "postTextboxLinkText": params.postTextboxLinkText,
-            "postTextboxLinkUrl": params.postTextboxLinkUrl
-        }) }}
+        {{
+            onsInput({
+                "id": params.id,
+                "type": params.type,
+                "name": params.name,
+                "classes": "ons-access-code__input ons-js-access-code" + (" ons-u-mb-xs" if params.postTextboxLinkText else ""),
+                "label": params.label,
+                "attributes": {
+                    "maxlength": maxlength,
+                    "data-group-size": groupSize,
+                    "autocomplete": "off",
+                    "autocapitalize": "characters"
+                },
+                "fieldClasses": "ons-question__answer",
+                "error": params.error,
+                "postTextboxLinkText": params.postTextboxLinkText,
+                "postTextboxLinkUrl": params.postTextboxLinkUrl
+            })
+        }}
     {% endset %}
 
     {% if not params.error %}
-        {% call onsPanel({
-            "classes": "ons-u-mb-s" + (' ' + params.classes if params.classes else '')
-        }) %}
+        {%
+            call onsPanel({
+                "classes": "ons-u-mb-s" + (" " + params.classes if params.classes else "")
+            })
+        %}
             {{ content | safe }}
         {% endcall %}
     {% else %}
         {{ content | safe }}
     {% endif %}
 
     {% if params.securityMessage %}
-        {% call onsPanel({
-            "variant": "bare",
-            "iconType": "lock",
-            "classes": "ons-u-mb-s"
-        }) %}
+        {%
+            call onsPanel({
+                "variant": "bare",
+                "iconType": "lock",
+                "classes": "ons-u-mb-s"
+            })
+        %}
             {{ params.securityMessage }}
         {% endcall %}
     {% endif %}

src/components/access-code/example-access-code-error.njk

@@ -1,22 +1,26 @@
 ---
-title: "Example: Access code error"
+title: 'Example: Access code error'
 layout: ~
 ---
+
 {% extends "layout/_template.njk" %}
 {% from "components/access-code/_macro.njk" import onsAccessCode %}
 {% from "components/button/_macro.njk" import onsButton %}
 {% from "components/panel/_macro.njk" import onsPanel %}
 {% from "components/details/_macro.njk" import onsDetails %}
-
-{% set pageConfig = {
-    "title": "Study title"
-} %}
+{%
+    set pageConfig = {
+        "title": "Study title"
+    }
+%}
 
 {% block main %}
-    {% call onsPanel({
-        "title": "There is a problem with this page",
-        "variant": "error"
-    }) %}
+    {%
+        call onsPanel({
+            "title": "There is a problem with this page",
+            "variant": "error"
+        })
+    %}
         {% from "components/list/_macro.njk" import onsList %}
         {{
             onsList({
@@ -34,46 +38,54 @@ layout: ~
 
     <h1 class="ons-u-mt-l">Start study</h1>
 
-    {{ onsAccessCode({
-        "id": "access-code",
-        "name": "access-code",
-        "postTextboxLinkText": "Where to find your access code",
-        "postTextboxLinkUrl": "#0",
-        "label": {
-            "text": "Enter your 16-character access code",
-            "description": "Keep this code safe. You will need to enter it every time you access your survey"
-        },
-        "securityMessage": "Your personal information is protected by law and will be kept confidential",
-        "error": {
-            "id": "access-code-error",
-            "text": "Enter an access code"
-        }
-    }) }}
+    {{
+        onsAccessCode({
+            "id": "access-code",
+            "name": "access-code",
+            "postTextboxLinkText": "Where to find your access code",
+            "postTextboxLinkUrl": "#0",
+            "label": {
+                "text": "Enter your 16-character access code",
+                "description": "Keep this code safe. You will need to enter it every time you access your survey"
+            },
+            "securityMessage": "Your personal information is protected by law and will be kept confidential",
+            "error": {
+                "id": "access-code-error",
+                "text": "Enter an access code"
+            }
+        })
+    }}
 
-    {{ onsButton({
-        "text": "Access study",
-        "classes": "ons-u-mb-xl"
-    }) }}
+    {{
+        onsButton({
+            "text": "Access study",
+            "classes": "ons-u-mb-xl"
+        })
+    }}
 
     <h2>If you do not have an access code</h2>
     <p>
-        If you have lost or not received an access code, you can <a href="#0">request a new access code</a>.
-        This can be sent to you by text or post.
+        If you have lost or not received an access code, you can <a href="#0">request a new access code</a>. This can be sent to you by text
+        or post.
     </p>
 
     {% set content %}
         <p>If you need to answer separately from the people you live with, you can <a href="#0">request an individual access code</a>.</p>
-        {% call onsPanel({
-            "variant": "warn"
-        }) %}
+        {%
+            call onsPanel({
+                "variant": "warn"
+            })
+        %}
             Someone in your household must still complete a study using this household access code
         {% endcall %}
     {% endset %}
 
-    {% call onsDetails({
-        "id": "details-access-code-error",
-        "title": "Need to answer separately from your household?"
-    }) %}
+    {%
+        call onsDetails({
+            "id": "details-access-code-error",
+            "title": "Need to answer separately from your household?"
+        })
+    %}
         {{ content | safe }}
     {% endcall %}
 {% endblock %}

src/components/access-code/example-access-code.njk

@@ -1,58 +1,68 @@
 ---
-title: "Example: Access code"
+title: 'Example: Access code'
 layout: ~
 ---
+
 {% extends "layout/_template.njk" %}
 {% from "components/access-code/_macro.njk" import onsAccessCode %}
 {% from "components/button/_macro.njk" import onsButton %}
 {% from "components/panel/_macro.njk" import onsPanel %}
 {% from "components/details/_macro.njk" import onsDetails %}
-
-{% set pageConfig = {
-    "header": {
-        "title": "Study title"
+{%
+    set pageConfig = {
+        "header": {
+            "title": "Study title"
+        }
     }
-} %}
+%}
 
 {% block main %}
     <h1 class="ons-u-mt-l">Start study</h1>
 
-    {{ onsAccessCode({
-        "id": "access-code-example",
-        "name": "access-code",
-        "postTextboxLinkText": "Where to find your access code",
-        "postTextboxLinkUrl": "#0",
-        "label": {
-            "text": "Enter your 16-character access code",
-            "description": "Keep this code safe. You will need to enter it every time you access your study"
-        },
-        "securityMessage": "Your personal information is protected by law and will be kept confidential"
-    }) }}
+    {{
+        onsAccessCode({
+            "id": "access-code-example",
+            "name": "access-code",
+            "postTextboxLinkText": "Where to find your access code",
+            "postTextboxLinkUrl": "#0",
+            "label": {
+                "text": "Enter your 16-character access code",
+                "description": "Keep this code safe. You will need to enter it every time you access your study"
+            },
+            "securityMessage": "Your personal information is protected by law and will be kept confidential"
+        })
+    }}
 
-    {{ onsButton({
-        "text": "Access study",
-        "classes": "ons-u-mb-xl"
-    }) }}
+    {{
+        onsButton({
+            "text": "Access study",
+            "classes": "ons-u-mb-xl"
+        })
+    }}
 
     <h2>If you do not have an access code</h2>
     <p>
-        If you have lost or not received an access code, you can <a href="#0">request a new access code</a>.
-        This can be sent to you by text or post.
+        If you have lost or not received an access code, you can <a href="#0">request a new access code</a>. This can be sent to you by text
+        or post.
     </p>
 
     {% set content %}
         <p>If you need to answer separately from the people you live with, you can <a href="#0">request an individual access code</a>.</p>
-        {% call onsPanel({
-            "variant": "warn"
-        }) %}
+        {%
+            call onsPanel({
+                "variant": "warn"
+            })
+        %}
             Someone in your household must still complete a study using this household access code
         {% endcall %}
     {% endset %}
 
-    {% call onsDetails({
-        "id": "details",
-        "title": "Need to answer separately from your household?"
-    }) %}
+    {%
+        call onsDetails({
+            "id": "details",
+            "title": "Need to answer separately from your household?"
+        })
+    %}
         {{ content | safe }}
     {% endcall %}
 {% endblock %}

src/components/accordion/_macro.njk

@@ -1,15 +1,16 @@
 {% macro onsAccordion(params) %}
     {% from "components/details/_macro.njk" import onsDetails %}
 
-    <div id="{{params.id}}" class="ons-accordion{{ ' ' + params.classes if params.classes }}">
+    <div id="{{ params.id }}" class="ons-accordion{{ ' ' + params.classes if params.classes else '' }}">
         {% if params.allButton %}
             {% from "components/button/_macro.njk" import onsButton %}
             {% set attributes = params.allButton.attributes | default({}) %}
-
-            {% set attributes = attributes | setAttributes({
-                "data-close-all": params.allButton.close,
-                "data-group": params.id
-            }) %}
+            {%
+                set attributes = attributes | setAttributes({
+                    "data-close-all": params.allButton.close,
+                    "data-group": params.id
+                })
+            %}
 
             {{
                 onsButton({

src/components/accordion/example-accordion-open.njk

@@ -1,7 +1,6 @@
 {% from "components/accordion/_macro.njk" import onsAccordion %}
 {% from "components/checkboxes/_macro.njk" import onsCheckboxes %}
 
-
 {% set content1 %}
     {{
         onsCheckboxes({