@ons/design-system 70.0.8 → 70.0.10

package/components/timeout-panel/_macro.njk

@@ -1,22 +1,24 @@
 {% from "components/panel/_macro.njk" import onsPanel %}
 {% macro onsTimeoutPanel(params) %}
-    {% call onsPanel({
-        "id": params.id,
-        "classes": "ons-js-panel-with-countdown",
-        "variant": "warn",
-        "attributes": {
-            "data-redirect-url": params.redirectUrl,
-            "data-server-session-expires-at": params.sessionExpiresAt,
-            "data-countdown-text": params.countdownText,
-            "data-countdown-expired-text": params.countdownExpiredText,
-            "data-minutes-text-singular": params.minutesTextSingular,
-            "data-minutes-text-plural": params.minutesTextPlural,
-            "data-seconds-text-singular": params.secondsTextSingular,
-            "data-seconds-text-plural": params.secondsTextPlural,
-            "data-full-stop": params.endWithFullStop,
-            "aria-describedby": "timeout-time-remaining"
-        }
-    }) %}
+    {%
+        call onsPanel({
+            "id": params.id,
+            "classes": "ons-js-panel-with-countdown",
+            "variant": "warn",
+            "attributes": {
+                "data-redirect-url": params.redirectUrl,
+                "data-server-session-expires-at": params.sessionExpiresAt,
+                "data-countdown-text": params.countdownText,
+                "data-countdown-expired-text": params.countdownExpiredText,
+                "data-minutes-text-singular": params.minutesTextSingular,
+                "data-minutes-text-plural": params.minutesTextPlural,
+                "data-seconds-text-singular": params.secondsTextSingular,
+                "data-seconds-text-plural": params.secondsTextPlural,
+                "data-full-stop": params.endWithFullStop,
+                "aria-describedby": "timeout-time-remaining"
+            }
+        })
+    %}
         <noscript><p class="ons-js-nojs-text">{{ params.nojsText }}</p></noscript>
         <p class="ons-js-timeout-timer" aria-hidden="true" aria-relevant="additions"></p>
         <p class="ons-js-timeout-timer-acc ons-u-vh" role="status" id="timeout-time-remaining"></p>

package/components/timeout-panel/example-panel-with-timeout-warning.njk

@@ -1,13 +1,15 @@
 {% from "components/timeout-panel/_macro.njk" import onsTimeoutPanel %}
 
-{{ onsTimeoutPanel ({
-    "id": "countdown",
-    "redirectUrl": "#!",
-    "minutesTextSingular":"minute",
-    "minutesTextPlural":"minutes",
-    "secondsTextSingular":"second",
-    "secondsTextPlural":"seconds",
-    "countdownText":"For security, your answers will only be available to view for another",
-    "nojsText": "For security, your answers will only be available to view for another 1 minute",
-    "countdownExpiredText": "You are being signed out"
-}) }}
+{{
+    onsTimeoutPanel ({
+        "id": "countdown",
+        "redirectUrl": "#!",
+        "minutesTextSingular":"minute",
+        "minutesTextPlural":"minutes",
+        "secondsTextSingular":"second",
+        "secondsTextPlural":"seconds",
+        "countdownText":"For security, your answers will only be available to view for another",
+        "nojsText": "For security, your answers will only be available to view for another 1 minute",
+        "countdownExpiredText": "You are being signed out"
+    })
+}}

package/components/upload/_macro.njk

@@ -3,24 +3,28 @@
     {% from "components/field/_macro.njk" import onsField %}
 
     {% set field %}
-        {{ onsInput({
-            "id": params.id,
-            "type": "file",
-            "label": params.label,
-            "classes": "ons-input--upload" + (" ons-input--error" if params.error else ""),
-            "accept": params.accept,
-            "name": params.name,
-            "attributes": params.attributes,
-            "listeners": params.listeners
-        }) }}
+        {{
+            onsInput({
+                "id": params.id,
+                "type": "file",
+                "label": params.label,
+                "classes": "ons-input--upload" + (" ons-input--error" if params.error else ""),
+                "accept": params.accept,
+                "name": params.name,
+                "attributes": params.attributes,
+                "listeners": params.listeners
+            })
+        }}
     {% endset %}
 
-    {% call onsField({
-        "id": params.fieldId,
-        "classes": params.fieldClasses,
-        "dontWrap": params.dontWrap,
-        "error": params.error
-    }) %}
+    {%
+        call onsField({
+            "id": params.fieldId,
+            "classes": params.fieldClasses,
+            "dontWrap": params.dontWrap,
+            "error": params.error
+        })
+    %}
         {{ field | safe }}
     {% endcall %}
 {% endmacro %}

package/components/video/_macro.njk

@@ -3,7 +3,13 @@
 
     {% set linkContents %}
         {% if params.image.smallSrc %}
-            <img class="ons-video__img ons-u-mb-xs" {% if params.image.largeSrc %} srcset="{{ params.image.smallSrc }} 1x, {{ params.image.largeSrc }} 2x"{% endif %} src="{{ params.image.smallSrc }}" alt="{{ params.image.alt }}" loading="lazy">
+            <img
+                class="ons-video__img ons-u-mb-xs"
+                {% if params.image.largeSrc %}srcset="{{ params.image.smallSrc }} 1x, {{ params.image.largeSrc }} 2x"{% endif %}
+                src="{{ params.image.smallSrc }}"
+                alt="{{ params.image.alt }}"
+                loading="lazy"
+            />
         {% endif %}
         <span class="ons-video__link-text ons-u-mt-xs">{{ params.linkText }}</span>
     {% endset %}
@@ -16,6 +22,14 @@
                 "linkText": linkContents
             })
         }}
-        <iframe data-src="{{ params.videoEmbedUrl }}" title="{{ params.title }}" class="ons-video__iframe ons-js-video-iframe ons-u-d-no" src="about:blank" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+        <iframe
+            data-src="{{ params.videoEmbedUrl }}"
+            title="{{ params.title }}"
+            class="ons-video__iframe ons-js-video-iframe ons-u-d-no"
+            src="about:blank"
+            frameborder="0"
+            allow="accelerometer; encrypted-media; gyroscope; picture-in-picture"
+            allowfullscreen
+        ></iframe>
     </div>
 {%- endmacro -%}

package/components/video/example-video.njk

@@ -4,8 +4,8 @@
         "videoEmbedUrl": 'https://www.youtube.com/embed/OwYVwPPxPj4',
         "videoLinkURL": 'https://www.youtube.com/watch?v=OwYVwPPxPj4',
         "image": {
-            "largeSrc": '/patternlib-img/youtube-example-cover.png',
-            "smallSrc": '/patternlib-img/youtube-example-cover.png',
+            "largeSrc": '/ds-img/youtube-example-cover.png',
+            "smallSrc": '/ds-img/youtube-example-cover.png',
             "alt": "Youtube video"
         },
         "title": 'Transforming the way we produce statistics | Explaining the Dynamic Population Model | BSL',