@ons/design-system 70.0.8 → 70.0.10

package/components/checkboxes/example-checkboxes-with-revealed-checkboxes.njk

@@ -1,86 +1,86 @@
 {% from "components/checkboxes/_macro.njk" import onsCheckboxes %}
 
-    {{
-        onsCheckboxes({
-            "legend": "Content type",
-            "checkboxesLabel": "Show only:",
-            "borderless": true,
-            "name": "dietary",
-            "checkboxes": [
-                {
-                    "id": "data-example-with-revealed-checkboxes",
-                    "label": {
-                        "text": "Data (309)"
-                    },
-                    "value": "data",
-                    "other": {
-                        "otherType": "checkboxes",
-                        "selectAllChildren": true,
-                        "legend": "Data type",
-                        "legendClasses": "ons-u-vh",
-                        "name": "name",
-                        "checkboxes": [
-                            {
-                                "id": "datasets-example-with-revealed-checkboxes",
-                                "label": {
-                                    "text": "Datasets (100)"
-                                },
-                                "value": "datasets"
+{{
+    onsCheckboxes({
+        "legend": "Content type",
+        "checkboxesLabel": "Show only:",
+        "borderless": true,
+        "name": "dietary",
+        "checkboxes": [
+            {
+                "id": "data-example-with-revealed-checkboxes",
+                "label": {
+                    "text": "Data (309)"
+                },
+                "value": "data",
+                "other": {
+                    "otherType": "checkboxes",
+                    "selectAllChildren": true,
+                    "legend": "Data type",
+                    "legendClasses": "ons-u-vh",
+                    "name": "name",
+                    "checkboxes": [
+                        {
+                            "id": "datasets-example-with-revealed-checkboxes",
+                            "label": {
+                                "text": "Datasets (100)"
                             },
-                            {
-                                "id": "timeseries-example-with-revealed-checkboxes",
-                                "label": {
-                                    "text": "Timeseries (20)"
-                                },
-                                "value": "timeseries"
+                            "value": "datasets"
+                        },
+                        {
+                            "id": "timeseries-example-with-revealed-checkboxes",
+                            "label": {
+                                "text": "Timeseries (20)"
                             },
-                            {
-                                "id": "requested-example-with-revealed-checkboxes",
-                                "label": {
-                                    "text": "User requested data (17)"
-                                },
-                                "value": "requested"
-                            }
-                        ]
-                    }
-                },
-                {
-                    "id": "publications-example-with-revealed-checkboxes",
-                    "label": {
-                        "text": "Publications (137)"
-                    },
-                    "value": "publications",
-                    "other": {
-                        "otherType": "checkboxes",
-                        "selectAllChildren": true,
-                        "legend": "Publication type",
-                        "legendClasses": "ons-u-vh",
-                        "name": "name",
-                        "checkboxes": [
-                            {
-                                "id": "press-release-example-with-revealed-checkboxes",
-                                "label": {
-                                    "text": "Press release (100)"
-                                },
-                                "value": "pressrelease"
+                            "value": "timeseries"
+                        },
+                        {
+                            "id": "requested-example-with-revealed-checkboxes",
+                            "label": {
+                                "text": "User requested data (17)"
                             },
-                            {
-                                "id": "bulletin-example-with-revealed-checkboxes",
-                                "label": {
-                                    "text": "Bulletin (20)"
-                                },
-                                "value": "bulletin"
-                            }
-                        ]
-                    }
+                            "value": "requested"
+                        }
+                    ]
+                }
+            },
+            {
+                "id": "publications-example-with-revealed-checkboxes",
+                "label": {
+                    "text": "Publications (137)"
                 },
-                {
-                    "id": "areas-example-with-revealed-checkboxes",
-                    "label": {
-                        "text": "Areas (0)"
-                    },
-                    "value": "areas"
+                "value": "publications",
+                "other": {
+                    "otherType": "checkboxes",
+                    "selectAllChildren": true,
+                    "legend": "Publication type",
+                    "legendClasses": "ons-u-vh",
+                    "name": "name",
+                    "checkboxes": [
+                        {
+                            "id": "press-release-example-with-revealed-checkboxes",
+                            "label": {
+                                "text": "Press release (100)"
+                            },
+                            "value": "pressrelease"
+                        },
+                        {
+                            "id": "bulletin-example-with-revealed-checkboxes",
+                            "label": {
+                                "text": "Bulletin (20)"
+                            },
+                            "value": "bulletin"
+                        }
+                    ]
                 }
-            ]
-        })
-    }}
+            },
+            {
+                "id": "areas-example-with-revealed-checkboxes",
+                "label": {
+                    "text": "Areas (0)"
+                },
+                "value": "areas"
+            }
+        ]
+    })
+}}

package/components/checkboxes/example-checkboxes-with-revealed-select-expanded.njk

@@ -1,11 +1,13 @@
 {% from "components/question/_macro.njk" import onsQuestion %}
 {% from "components/checkboxes/_macro.njk" import onsCheckboxes %}
 
-{% call onsQuestion({
-    "title": "How would you like us to contact you?",
-    "legendIsQuestionTitle": true,
-    "classes": "ons-u-mt-no"
-}) %}
+{%
+    call onsQuestion({
+        "title": "How would you like us to contact you?",
+        "legendIsQuestionTitle": true,
+        "classes": "ons-u-mt-no"
+    })
+%}
     {{
         onsCheckboxes({
             "checkboxesLabel": "Select all that apply",

package/components/checkboxes/example-checkboxes-with-revealed-select.njk

@@ -1,11 +1,13 @@
 {% from "components/question/_macro.njk" import onsQuestion %}
 {% from "components/checkboxes/_macro.njk" import onsCheckboxes %}
 
-{% call onsQuestion({
-    "title": "How would you like us to contact you?",
-    "legendIsQuestionTitle": true,
-    "classes": "ons-u-mt-no"
-}) %}
+{%
+    call onsQuestion({
+        "title": "How would you like us to contact you?",
+        "legendIsQuestionTitle": true,
+        "classes": "ons-u-mt-no"
+    })
+%}
     {{
         onsCheckboxes({
             "checkboxesLabel": "Select all that apply",

package/components/checkboxes/example-checkboxes-with-revealed-text-input-expanded.njk

@@ -1,11 +1,13 @@
 {% from "components/question/_macro.njk" import onsQuestion %}
 {% from "components/checkboxes/_macro.njk" import onsCheckboxes %}
 
-{% call onsQuestion({
-    "title": "Do you have any dietary requirements?",
-    "legendIsQuestionTitle": true,
-    "classes": "ons-u-mt-no"
-}) %}
+{%
+    call onsQuestion({
+        "title": "Do you have any dietary requirements?",
+        "legendIsQuestionTitle": true,
+        "classes": "ons-u-mt-no"
+    })
+%}
     {{
         onsCheckboxes({
             "checkboxesLabel": "Select all that apply",

package/components/checkboxes/example-checkboxes-with-revealed-text-input.njk

@@ -1,11 +1,13 @@
 {% from "components/question/_macro.njk" import onsQuestion %}
 {% from "components/checkboxes/_macro.njk" import onsCheckboxes %}
 
-{% call onsQuestion({
-    "title": "Do you have any dietary requirements?",
-    "legendIsQuestionTitle": true,
-    "classes": "ons-u-mt-no"
-}) %}
+{%
+    call onsQuestion({
+        "title": "Do you have any dietary requirements?",
+        "legendIsQuestionTitle": true,
+        "classes": "ons-u-mt-no"
+    })
+%}
     {{
         onsCheckboxes({
             "checkboxesLabel": "Select all that apply",

package/components/checkboxes/example-checkboxes-with-select-all-button.njk

@@ -1,11 +1,13 @@
 {% from "components/question/_macro.njk" import onsQuestion %}
 {% from "components/checkboxes/_macro.njk" import onsCheckboxes %}
 
-{% call onsQuestion({
-    "title": "What devices do you own?",
-    "legendIsQuestionTitle": true,
-    "classes": "ons-u-mt-no"
-}) %}
+{%
+    call onsQuestion({
+        "title": "What devices do you own?",
+        "legendIsQuestionTitle": true,
+        "classes": "ons-u-mt-no"
+    })
+%}
     {{
         onsCheckboxes({
             "checkboxesLabel": "Select all that apply",

package/components/checkboxes/example-checkboxes-with-visible-text-input.njk

@@ -1,11 +1,13 @@
 {% from "components/question/_macro.njk" import onsQuestion %}
 {% from "components/checkboxes/_macro.njk" import onsCheckboxes %}
 
-{% call onsQuestion({
-    "title": "Do you have any dietary requirements?",
-    "legendIsQuestionTitle": true,
-    "classes": "ons-u-mt-no"
-}) %}
+{%
+    call onsQuestion({
+        "title": "Do you have any dietary requirements?",
+        "legendIsQuestionTitle": true,
+        "classes": "ons-u-mt-no"
+    })
+%}
     {{
         onsCheckboxes({
             "checkboxesLabel": "Select all that apply",

package/components/checkboxes/example-checkboxes.njk

@@ -1,11 +1,13 @@
 {% from "components/question/_macro.njk" import onsQuestion %}
 {% from "components/checkboxes/_macro.njk" import onsCheckboxes %}
 
-{% call onsQuestion({
-    "title": "What devices do you own?",
-    "legendIsQuestionTitle": true,
-    "classes": "ons-u-mt-no"
-}) %}
+{%
+    call onsQuestion({
+        "title": "What devices do you own?",
+        "legendIsQuestionTitle": true,
+        "classes": "ons-u-mt-no"
+    })
+%}
     {{
         onsCheckboxes({
             "checkboxesLabel": "Select all that apply",

package/components/content-pagination/_macro.njk

@@ -1,34 +1,36 @@
 {% macro onsContentPagination(params) %}
-  <nav class="ons-content-pagination" aria-label="{{ params.ariaLabel | default("Guide pagination") }}">
-    <ul class="ons-content-pagination__list">
-      {% for contentPaginationItem in params.contentPaginationItems %}
-        <li class="ons-content-pagination__item">
-          <a href="{{ contentPaginationItem.url }}" class="ons-content-pagination__link" rel="{{ contentPaginationItem.rel }}">
-            <span class="ons-content-pagination__link-title">
-                {%- if contentPaginationItem.rel == 'prev' %}
-                  {% from "components/icon/_macro.njk" import onsIcon %}
-                  {{-
-                      onsIcon({
-                          "iconType": 'arrow-previous',
-                          "iconSize": 'm'
-                      })
-                  -}}
-                {% else %}
-                  {% from "components/icon/_macro.njk" import onsIcon %}
-                  {{-
-                      onsIcon({
-                          "iconType": 'arrow-next',
-                          "iconSize": 'm'
-                      })
-                  -}}
-                {% endif -%}
-              <span class="ons-content-pagination__link-text">{{ contentPaginationItem.text }}</span>
-            </span>
-            <span class="ons-content-pagination__link-divider ons-u-vh">{{ contentPaginationItem.bridgingText | default("page in this guide is:") }}</span>
-            <span class="ons-content-pagination__link-label">{{ contentPaginationItem.label }}</span>
-          </a>
-        </li>
-      {% endfor %}
-    </ul>
-  </nav>
+    <nav class="ons-content-pagination" aria-label="{{ params.ariaLabel | default("Guide pagination") }}">
+        <ul class="ons-content-pagination__list">
+            {% for contentPaginationItem in params.contentPaginationItems %}
+                <li class="ons-content-pagination__item">
+                    <a href="{{ contentPaginationItem.url }}" class="ons-content-pagination__link" rel="{{ contentPaginationItem.rel }}">
+                        <span class="ons-content-pagination__link-title">
+                            {%- if contentPaginationItem.rel == 'prev' -%}
+                                {% from "components/icon/_macro.njk" import onsIcon %}
+                                {{-
+                                    onsIcon({
+                                        "iconType": 'arrow-previous',
+                                        "iconSize": 'm'
+                                    })
+                                -}}
+                            {% else %}
+                                {% from "components/icon/_macro.njk" import onsIcon %}
+                                {{-
+                                    onsIcon({
+                                        "iconType": 'arrow-next',
+                                        "iconSize": 'm'
+                                    })
+                                -}}
+                            {%- endif -%}
+                            <span class="ons-content-pagination__link-text">{{ contentPaginationItem.text }}</span>
+                        </span>
+                        <span class="ons-content-pagination__link-divider ons-u-vh"
+                            >{{ contentPaginationItem.bridgingText | default("page in this guide is:") }}</span
+                        >
+                        <span class="ons-content-pagination__link-label">{{ contentPaginationItem.label }}</span>
+                    </a>
+                </li>
+            {% endfor %}
+        </ul>
+    </nav>
 {% endmacro %}

package/components/content-pagination/example-content-pagination.njk

@@ -1,20 +1,20 @@
 {% from "components/content-pagination/_macro.njk" import onsContentPagination %}
 
 {{-
-  onsContentPagination({
-    "contentPaginationItems": [
-      {
-        "rel": 'prev',
-        "text": 'Previous',
-        "url": '#0',
-        "label": 'Overview'
-      },
-      {
-        "rel": 'next',
-        "text": 'Next',
-        "url": '#0',
-        "label": 'Who should take part and why'
-      }
-    ]
-  })
-}}
+    onsContentPagination({
+      "contentPaginationItems": [
+        {
+          "rel": 'prev',
+          "text": 'Previous',
+          "url": '#0',
+          "label": 'Overview'
+        },
+        {
+          "rel": 'next',
+          "text": 'Next',
+          "url": '#0',
+          "label": 'Who should take part and why'
+        }
+      ]
+    })
+-}}

package/components/cookies-banner/_macro.njk

@@ -40,15 +40,18 @@
     {% else %}
         {% set settingsLinkURL = '#0' %}
     {% endif %}
-
     {% set statementText = beforeLinkStatementText + ' <a href="' + settingsLinkURL + '">' + afterLinkStatementText %}
     {% set preferencesText = beforeLinkPreferencesURL + ' <a href="' + settingsLinkURL + '">' + afterLinkPreferencesURL %}
 
     <div class="ons-cookies-banner" role="region" aria-label="{{ params.ariaLabel | default(ariaLabel) }}">
-        <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }} ons-cookies-banner__primary">
+        <div
+            class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }} ons-cookies-banner__primary"
+        >
             <div class="ons-grid">
                 <div class="ons-grid__col ons-col-8@m">
-                    <h2 class="ons-cookies-banner__title ons-u-mb-xs">{{ params.statementTitle | default(statementTitle) }} {{ params.serviceName | default(serviceName) }}</h2>
+                    <h2 class="ons-cookies-banner__title ons-u-mb-xs">
+                        {{ params.statementTitle | default(statementTitle) }} {{ params.serviceName | default(serviceName) }}
+                    </h2>
                     <div class="ons-cookies-banner__statement">{{ params.statementText | default(statementText) | safe }}</div>
                 </div>
             </div>
@@ -78,14 +81,24 @@
                     }}
                 </div>
                 <div class="ons-grid__col">
-                    <a class="ons-cookies-banner__link" href="{{ settingsLinkURL }}">{{ params.settingsLinkText | default(settingsLinkText) }}</a>
+                    <a class="ons-cookies-banner__link" href="{{ settingsLinkURL }}"
+                        >{{ params.settingsLinkText | default(settingsLinkText) }}</a
+                    >
                 </div>
             </div>
         </div>
-        <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }} ons-cookies-banner__confirmation ons-u-d-no">
+        <div
+            class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }} ons-cookies-banner__confirmation ons-u-d-no"
+        >
             <div class="ons-grid ons-grid--flex ons-grid--between ons-grid--gutterless ons-grid--no-wrap@s ons-grid--vertical-center">
                 <div class="ons-grid__col ons-grid__col--flex ons-col-auto ons-u-flex-shrink@s">
-                    <p class="ons-cookies-banner__desc ons-u-mb-no@s ons-u-mr-s@s"><span class="ons-js-accepted-text ons-u-d-no">{{ params.acceptedText | default(acceptedText) | safe }} </span><span class="ons-js-rejected-text ons-u-d-no">{{ params.rejectedText | default(rejectedText) | safe }} </span><span class="ons-cookies-banner__preferences-text">{{ params.preferencesText | default(preferencesText) | safe }}</span></p>
+                    <p class="ons-cookies-banner__desc ons-u-mb-no@s ons-u-mr-s@s">
+                        <span class="ons-js-accepted-text ons-u-d-no">{{ params.acceptedText | default(acceptedText) | safe }} </span
+                        ><span class="ons-js-rejected-text ons-u-d-no">{{ params.rejectedText | default(rejectedText) | safe }} </span
+                        ><span class="ons-cookies-banner__preferences-text"
+                            >{{ params.preferencesText | default(preferencesText) | safe }}</span
+                        >
+                    </p>
                 </div>
                 <div class="ons-grid__col">
                     {{

package/components/cookies-banner/example-cookies-banner-cymraeg.njk

@@ -1,6 +1,7 @@
 ---
-"fullWidth": true
+'fullWidth': true
 ---
+
 {% from "components/cookies-banner/_macro.njk" import onsCookiesBanner %}
 {{
     onsCookiesBanner({

package/components/cookies-banner/example-cookies-banner.njk

@@ -1,7 +1,6 @@
 ---
-"fullWidth": true
+'fullWidth': true
 ---
+
 {% from "components/cookies-banner/_macro.njk" import onsCookiesBanner %}
-{{
-    onsCookiesBanner()
-}}
+{{ onsCookiesBanner() }}