@ons/design-system 70.0.8 → 70.0.10

package/layout/_dsTemplate.njk

@@ -1,6 +1,6 @@
 {% from "components/autosuggest/_macro.njk" import onsAutosuggest %}
-
-{% set inputWithSearch = {
+{%
+    set inputWithSearch = {
          "id": 'search-field',
          "width": '20',
         "label": {
@@ -11,23 +11,25 @@
         "classes": "ons-input-search ons-input-search--icon ons-input-search--dark ons-u-mb-s",
         "accessiblePlaceholder": true,
         "autocomplete": "off"
-    } 
+    }
 %}
 
-{{ onsAutosuggest({
-    "id": "search-input-autosuggest",
-    "input": inputWithSearch,
-    "containerClasses": "ons-autosuggest--header",
-    "instructions": "Use up and down keys to navigate suggestions once you\'ve typed more than two characters. Use the enter key to select a suggestion. Touch device users, explore by touch or with swipe gestures.",
-    "ariaYouHaveSelected": "You have selected",
-    "ariaMinChars": "Enter 3 or more characters for suggestions.",
-    "ariaOneResult": "There is one suggestion available.",
-    "ariaNResults": "There are {n} suggestions available.",
-    "ariaLimitedResults": "Results have been limited to 10 suggestions. Type more characters to improve your search",
-    "moreResults": "Continue entering to improve suggestions",
-    "resultsTitle": "Suggestions",
-    "resultsTitleId": "results-suggestions",
-    "autosuggestData": "/examples/data/search-index.json",
-    "noResults": "No suggestions found",
-    "typeMore": "Continue entering to get suggestions"
-}) }}
+{{
+    onsAutosuggest({
+        "id": "search-input-autosuggest",
+        "input": inputWithSearch,
+        "containerClasses": "ons-autosuggest--header",
+        "instructions": "Use up and down keys to navigate suggestions once you\'ve typed more than two characters. Use the enter key to select a suggestion. Touch device users, explore by touch or with swipe gestures.",
+        "ariaYouHaveSelected": "You have selected",
+        "ariaMinChars": "Enter 3 or more characters for suggestions.",
+        "ariaOneResult": "There is one suggestion available.",
+        "ariaNResults": "There are {n} suggestions available.",
+        "ariaLimitedResults": "Results have been limited to 10 suggestions. Type more characters to improve your search",
+        "moreResults": "Continue entering to improve suggestions",
+        "resultsTitle": "Suggestions",
+        "resultsTitleId": "results-suggestions",
+        "autosuggestData": "/examples/data/search-index.json",
+        "noResults": "No suggestions found",
+        "typeMore": "Continue entering to get suggestions"
+    })
+}}

package/layout/_template.njk

@@ -1,7 +1,6 @@
 {% from "components/skip-to-content/_macro.njk" import onsSkipToContent %}
 {% from "components/header/_macro.njk" import onsHeader %}
 {% from "components/footer/_macro.njk" import onsFooter %}
-
 {% set currentLanguageISOCode = "en" %}
 
 {% if pageConfig and pageConfig.header.language and pageConfig.header.language.languages %}
@@ -14,8 +13,10 @@
 {% if pageConfig.cdn or release_version or designSystemVersion %}
     {# Production #}
     {% set cdn_url = (pageConfig.cdn.url if pageConfig.cdn and pageConfig.cdn.url) or "https://cdn.ons.gov.uk/sdc/design-system" %}
-    {% set slash = "" if cdn_url | last == "/" else
-        "/" %}
+    {%
+        set slash = "" if cdn_url | last == "/" else
+        "/"
+    %}
     {% set assetsURL = cdn_url + slash + ((pageConfig.cdn.version if pageConfig.cdn and pageConfig.cdn.version) or release_version or designSystemVersion) %}
 {% elif pageConfig.assetsURL %}
     {# Runner Dev #}
@@ -44,34 +45,40 @@
 
 {# Page columns #}
 {% set pageColNumber = pageConfig.pageColNumber | default("12") %}
-{% set pageColClasses = pageConfig.pageColClasses if pageConfig.pageColClasses else
-    '' %}
-{% set mainClasses = pageConfig.mainColClasses if pageConfig.mainColClasses else
-    '' %}
-{% set themeColor = pageConfig.themeColor if pageConfig.themeColor else
-    "#206095" %}
+{%
+    set pageColClasses = pageConfig.pageColClasses if pageConfig.pageColClasses else
+    ''
+%}
+{%
+    set mainClasses = pageConfig.mainColClasses if pageConfig.mainColClasses else
+    ''
+%}
+{%
+    set themeColor = pageConfig.themeColor if pageConfig.themeColor else
+    "#206095"
+%}
 <!doctype html>
 <html lang="{{ currentLanguageISOCode }}">
     <head>
-        <meta charset="utf-8">
-        <meta http-equiv="X-UA-Compatible" content="IE=edge">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <meta charset="utf-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
         <title>{{ page_title }}</title>
-        <link rel="stylesheet" href="{{ assetsURL }}/css/main.css">
-        <link rel="stylesheet" media="print" href="{{ assetsURL }}/css/print.css">
-        <meta name="theme-color" content="{{ themeColor }}"/>
+        <link rel="stylesheet" href="{{ assetsURL }}/css/main.css" />
+        <link rel="stylesheet" media="print" href="{{ assetsURL }}/css/print.css" />
+        <meta name="theme-color" content="{{ themeColor }}" />
         {% block meta %}
             {% if pageConfig.meta %}
                 {% if pageConfig.meta.description or pageConfig.description %}
-                    <meta name="description" content="{{ pageConfig.meta.description | default(pageConfig.description) }}">
+                    <meta name="description" content="{{ pageConfig.meta.description | default(pageConfig.description) }}" />
                 {% endif %}
 
                 <!-- Canonical -->
-                <link rel="canonical" href="{{ pageConfig.meta.canonicalUrl | default(pageConfig.absoluteUrl) }}">
+                <link rel="canonical" href="{{ pageConfig.meta.canonicalUrl | default(pageConfig.absoluteUrl) }}" />
 
                 {% if pageConfig.meta.hrefLangs %}
                     {% for item in pageConfig.meta.hrefLangs %}
-                        <link rel="alternate" href="{{ item.url }}" hreflang="{{ item.lang }}">
+                        <link rel="alternate" href="{{ item.url }}" hreflang="{{ item.lang }}" />
                     {% endfor %}
                 {% endif %}
             {% endif %}
@@ -79,49 +86,53 @@
 
         {% block social %}
             <!-- Open Graph -->
-            <meta property="og:type" content="website">
-            <meta property="og:url" content="{{ pageConfig.meta.canonicalUrl | default(pageConfig.absoluteUrl) }}">
-            <meta property="og:title" content="{{ pageConfig.title }}">
-            <meta property="og:image" content="{{ assetsURL }}/favicons/opengraph.png">
-            <meta property="og:image:type" content="image/png">
-            <meta property="og:image:width" content="1200">
-            <meta property="og:image:height" content="630">
-            <meta property="og:description" content="{{ pageConfig.meta.description | default(pageConfig.description) }}">
-            <meta property="og:site_name" content="{{ pageConfig.header.title | default(pageConfig.title) }}">
-            <meta property="og:locale" content="{{ currentLanguageISOCode }}">
+            <meta property="og:type" content="website" />
+            <meta property="og:url" content="{{ pageConfig.meta.canonicalUrl | default(pageConfig.absoluteUrl) }}" />
+            <meta property="og:title" content="{{ pageConfig.title }}" />
+            <meta property="og:image" content="{{ assetsURL }}/favicons/opengraph.png" />
+            <meta property="og:image:type" content="image/png" />
+            <meta property="og:image:width" content="1200" />
+            <meta property="og:image:height" content="630" />
+            <meta property="og:description" content="{{ pageConfig.meta.description | default(pageConfig.description) }}" />
+            <meta property="og:site_name" content="{{ pageConfig.header.title | default(pageConfig.title) }}" />
+            <meta property="og:locale" content="{{ currentLanguageISOCode }}" />
 
             {% if otherLanguageISOCode %}
-                <meta property="og:locale:alternate" content="{{ otherLanguageISOCode }}">
+                <meta property="og:locale:alternate" content="{{ otherLanguageISOCode }}" />
             {% endif %}
 
             {% if pageConfig.social %}
-                {% set twitterImagePath = pageConfig.social.twitterImage if pageConfig.social.twitterImage else
-                    assetsURL + '/favicons/twitter.png' %}
+                {%
+                    set twitterImagePath = pageConfig.social.twitterImage if pageConfig.social.twitterImage else
+                    assetsURL + '/favicons/twitter.png'
+                %}
                 <!-- Twitter -->
-                <meta name="twitter:card" content="summary">
-                <meta name="twitter:site" content="{{ pageConfig.social.twitterSite }}">
-                <meta name="twitter:url" content="{{ pageConfig.meta.canonicalUrl | default(pageConfig.absoluteUrl) }}">
-                <meta name="twitter:title" content="{{ pageConfig.social.title | default(pageConfig.title) }}">
-                <meta name="twitter:description" content="{{ pageConfig.social.description | default(pageConfig.description) }}">
-                <meta name="twitter:image" content="{{ twitterImagePath }}">
+                <meta name="twitter:card" content="summary" />
+                <meta name="twitter:site" content="{{ pageConfig.social.twitterSite }}" />
+                <meta name="twitter:url" content="{{ pageConfig.meta.canonicalUrl | default(pageConfig.absoluteUrl) }}" />
+                <meta name="twitter:title" content="{{ pageConfig.social.title | default(pageConfig.title) }}" />
+                <meta name="twitter:description" content="{{ pageConfig.social.description | default(pageConfig.description) }}" />
+                <meta name="twitter:image" content="{{ twitterImagePath }}" />
             {% endif %}
         {% endblock %}
 
         {% block favicons %}
             <!-- Favicons -->
-            <link rel="icon" type="image/x-icon" href="{{ assetsURL }}/favicons/favicon.ico">
-            <link rel="icon" type="image/png" href="{{ assetsURL }}/favicons/favicon-32x32.png" sizes="32x32">
-            <link rel="icon" type="image/png" href="{{ assetsURL }}/favicons/favicon-16x16.png" sizes="16x16">
-            <link rel="mask-icon" href="{{ assetsURL }}/favicons/safari-pinned-tab.svg" color="#000000">
-            <link rel="apple-touch-icon" type="image/png" href="{{ assetsURL }}/favicons/apple-touch-icon.png" sizes="180x180">
-            <link rel="manifest" href="{{ assetsURL }}/favicons/manifest.json">
+            <link rel="icon" type="image/x-icon" href="{{ assetsURL }}/favicons/favicon.ico" />
+            <link rel="icon" type="image/png" href="{{ assetsURL }}/favicons/favicon-32x32.png" sizes="32x32" />
+            <link rel="icon" type="image/png" href="{{ assetsURL }}/favicons/favicon-16x16.png" sizes="16x16" />
+            <link rel="mask-icon" href="{{ assetsURL }}/favicons/safari-pinned-tab.svg" color="#000000" />
+            <link rel="apple-touch-icon" type="image/png" href="{{ assetsURL }}/favicons/apple-touch-icon.png" sizes="180x180" />
+            <link rel="manifest" href="{{ assetsURL }}/favicons/manifest.json" />
         {% endblock %}
 
-        {% block head %}{% endblock %}
-
+        {% block head %}
+        {% endblock %}
     </head>
-    <body{% if pageConfig.bodyClasses %} class="{{ pageConfig.bodyClasses }}"{% endif %}>
-        <script{% if pageConfig.cspNonce %} nonce="{{ pageConfig.cspNonce }}"{% elif pageConfig.cspNonce is not defined and csp_nonce %} nonce="{{ csp_nonce() }}"{% endif %}>document.body.className = ((document.body.className) ? document.body.className + ' ons-js-enabled' : 'ons-js-enabled');</script>
+    <body {% if pageConfig.bodyClasses %}class="{{ pageConfig.bodyClasses }}"{% endif %}>
+        <!-- prettier-ignore-start -->
+        <script {% if pageConfig.cspNonce %}nonce="{{ pageConfig.cspNonce }}"{% elif pageConfig.cspNonce is not defined and csp_nonce %}nonce="{{ csp_nonce() }}"{% endif %}>document.body.className = ((document.body.className) ? document.body.className + ' ons-js-enabled' : 'ons-js-enabled');</script>
+        <!-- prettier-ignore-end -->
         {% block bodyStart %}{% endblock %}
         {% block body %}
             <div class="ons-page">
@@ -211,7 +222,8 @@
         {% endblock %}
         {% block bodyEnd %}{% endblock %}
 
-        <script{% if pageConfig.cspNonce %} nonce="{{ pageConfig.cspNonce }}"{% elif pageConfig.cspNonce is not defined and csp_nonce %} nonce="{{ csp_nonce() }}"{% endif %}>
+        <!-- prettier-ignore-start -->
+        <script {% if pageConfig.cspNonce %}nonce="{{ pageConfig.cspNonce }}"{% elif pageConfig.cspNonce is not defined and csp_nonce %}nonce="{{ csp_nonce() }}"{% endif %}>
             (function() {
                 var s = [ '{{ assetsURL }}/scripts/main.js' ],
                 c = document.createElement('script');
@@ -231,7 +243,9 @@
                 }
             })();
         </script>
+        <!-- prettier-ignore-end -->
 
-        {% block scripts %}{% endblock %}
+        {% block scripts %}
+        {% endblock %}
     </body>
 </html>

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@ons/design-system",
     "description": "ONS Design System built CSS, JS, and Nunjucks templates",
-    "version": "70.0.8",
+    "version": "70.0.10",
     "main": "index.js",
     "license": "MIT",
     "author": {
@@ -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",