@ons/design-system 70.0.8 → 70.0.9

package/components/table-of-contents/example-table-of-contents-sticky-full-page.njk

@@ -1,37 +1,38 @@
 ---
-title: "Example: Table of contents on full page"
+title: 'Example: Table of contents on full page'
 layout: ~
 ---
-{% from "components/table-of-contents/_macro.njk" import onsTableOfContents %}
 
+{% from "components/table-of-contents/_macro.njk" import onsTableOfContents %}
 {% extends "layout/_template.njk" %}
-
-{% set pageConfig = {
-    "header": {
-        "title": "What is the census?"
-    },
-    "breadcrumbs": {
-        "ariaLabel": 'Back',
-        "itemsList": [
-            {
-                "url": '/',
-                "id": "back-example-feedback-form-error",
-                "text": 'Back',
-                "attributes": {
-                    "data-attribute": "Example attribute"
+{%
+    set pageConfig = {
+        "header": {
+            "title": "What is the census?"
+        },
+        "breadcrumbs": {
+            "ariaLabel": 'Back',
+            "itemsList": [
+                {
+                    "url": '/',
+                    "id": "back-example-feedback-form-error",
+                    "text": 'Back',
+                    "attributes": {
+                        "data-attribute": "Example attribute"
+                    }
                 }
+            ]
+        },
+        "footer": {
+            "OGLLink": {
+                "pre": 'All content is available under the',
+                "link": 'Open Government Licence v3.0',
+                "url": 'https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/',
+                "post": ', except where otherwise stated'
             }
-        ]
-    },
-    "footer": {
-        "OGLLink": {
-            "pre": 'All content is available under the',
-            "link": 'Open Government Licence v3.0',
-            "url": 'https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/',
-            "post": ', except where otherwise stated'
         }
     }
-} %}
+%}
 
 {% block main %}
     <div class="ons-page__container ons-container">
@@ -69,42 +70,82 @@ layout: ~
             <div class="ons-grid__col ons-col-7@m ons-push-1@m">
                 <section id="section1">
                     <h2>What is the census?</h2>
-                    <p>The census is a survey that happens every 10 years and gives us a picture of all the people and households in England and Wales.</p>
+                    <p>
+                        The census is a survey that happens every 10 years and gives us a picture of all the people and households in
+                        England and Wales.
+                    </p>
 
-                    <p>Your answers to the census questions will help organisations make decisions on planning and funding public services in your area, including transport, education and healthcare.</p>
+                    <p>
+                        Your answers to the census questions will help organisations make decisions on planning and funding public services
+                        in your area, including transport, education and healthcare.
+                    </p>
                 </section>
                 <section id="section2">
                     <h2>The online census has now closed</h2>
                     <p>Census Day was on Sunday 21 March 2021.</p>
 
-                    <p>If you still have a paper census questionnaire, fill it in as soon as you can and return it to FREEPOST, Census 2021.</p>
+                    <p>
+                        If you still have a paper census questionnaire, fill it in as soon as you can and return it to FREEPOST, Census
+                        2021.
+                    </p>
                 </section>
                 <section id="section3">
                     <h2>What happens after Census Day</h2>
-                    <p>Two follow-up surveys, the <a href="#0">Census Coverage Survey</a> and the <a href="#0">Census Quality Survey</a>, help to improve the quality and accuracy of the census results.</p>
+                    <p>
+                        Two follow-up surveys, the <a href="#0">Census Coverage Survey</a> and the <a href="#0">Census Quality Survey</a>,
+                        help to improve the quality and accuracy of the census results.
+                    </p>
 
-                    <p>Over the next year, we work hard to process the answers from all the census questionnaires. This is so that we can publish the initial Census 2021 findings one year after the census and the main releases two years after the census.</p>
+                    <p>
+                        Over the next year, we work hard to process the answers from all the census questionnaires. This is so that we can
+                        publish the initial Census 2021 findings one year after the census and the main releases two years after the census.
+                    </p>
 
-                    <p>To make sure the Census 2021 statistics we publish meet the needs of those who use them, we also run an outputs consultation.</p>
+                    <p>
+                        To make sure the Census 2021 statistics we publish meet the needs of those who use them, we also run an outputs
+                        consultation.
+                    </p>
                 </section>
                 <section id="section4">
                     <h2>The census in Northern Ireland and Scotland</h2>
                     <p>The Office for National Statistics (ONS) runs the census in England and Wales.</p>
 
-                    <p>If you live in Northern Ireland, visit the Northern Ireland Statistics Agency (NISRA) census website to find out about the census for Northern Ireland.</p>
+                    <p>
+                        If you live in Northern Ireland, visit the Northern Ireland Statistics Agency (NISRA) census website to find out
+                        about the census for Northern Ireland.
+                    </p>
 
-                    <p>If you live in Scotland, visit the National Records of Scotland census website to find out how to take part in the census for Scotland.</p>
+                    <p>
+                        If you live in Scotland, visit the National Records of Scotland census website to find out how to take part in the
+                        census for Scotland.
+                    </p>
                 </section>
                 <section id="section5">
                     <h2>The last census</h2>
-                    <p>The last census took place in 2011. Many people and organisations used information from the 2011 Census in a variety of ways.</p>
+                    <p>
+                        The last census took place in 2011. Many people and organisations used information from the 2011 Census in a variety
+                        of ways.
+                    </p>
 
-                    <p>For example, Bristol City Council used it to inform decisions on how to fund local housing improvements. It was also essential for the charity Redbridge Council for Voluntary Services to help people from ethnic minority groups learn more about dementia.</p>
+                    <p>
+                        For example, Bristol City Council used it to inform decisions on how to fund local housing improvements. It was also
+                        essential for the charity Redbridge Council for Voluntary Services to help people from ethnic minority groups learn
+                        more about dementia.
+                    </p>
 
-                    <p>To read more about the benefits that information from the 2011 Census helped to create, visit the Office for National Statistics (ONS) website.</p>
-                    <p>The Census Coverage Survey (CCS) was a short, separate survey that we at the Office for National Statistics (ONS) started six to eight weeks after Census Day.</p>
+                    <p>
+                        To read more about the benefits that information from the 2011 Census helped to create, visit the Office for
+                        National Statistics (ONS) website.
+                    </p>
+                    <p>
+                        The Census Coverage Survey (CCS) was a short, separate survey that we at the Office for National Statistics (ONS)
+                        started six to eight weeks after Census Day.
+                    </p>
 
-                    <p>The CCS helps make sure everyone is counted and our census results are as accurate as possible. It asked similar questions to the main census, just fewer of them, at addresses in a selection of postcodes across England and Wales.</p>
+                    <p>
+                        The CCS helps make sure everyone is counted and our census results are as accurate as possible. It asked similar
+                        questions to the main census, just fewer of them, at addresses in a selection of postcodes across England and Wales.
+                    </p>
 
                     <p>The CCS has now closed.</p>
                 </section>

package/components/table-of-contents/example-table-of-contents-sticky.njk

@@ -29,14 +29,20 @@
                         }
                     ]
                 })
-            }}
+            -}}
         </div>
         <div class="ons-grid__col ons-col-7@m ons-push-1@m">
             <section id="section1">
                 <h2>What is the census?</h2>
-                <p>The census is a survey that happens every 10 years and gives us a picture of all the people and households in England and Wales.</p>
+                <p>
+                    The census is a survey that happens every 10 years and gives us a picture of all the people and households in England
+                    and Wales.
+                </p>
 
-                <p>Your answers to the census questions will help organisations make decisions on planning and funding public services in your area, including transport, education and healthcare.</p>
+                <p>
+                    Your answers to the census questions will help organisations make decisions on planning and funding public services in
+                    your area, including transport, education and healthcare.
+                </p>
             </section>
             <section id="section2">
                 <h2>The online census has now closed</h2>
@@ -46,30 +52,61 @@
             </section>
             <section id="section3">
                 <h2>What happens after Census Day</h2>
-                <p>Two follow-up surveys, the <a href="#0">Census Coverage Survey</a> and the <a href="#0">Census Quality Survey</a>, help to improve the quality and accuracy of the census results.</p>
+                <p>
+                    Two follow-up surveys, the <a href="#0">Census Coverage Survey</a> and the <a href="#0">Census Quality Survey</a>, help
+                    to improve the quality and accuracy of the census results.
+                </p>
 
-                <p>Over the next year, we work hard to process the answers from all the census questionnaires. This is so that we can publish the initial Census 2021 findings one year after the census and the main releases two years after the census.</p>
+                <p>
+                    Over the next year, we work hard to process the answers from all the census questionnaires. This is so that we can
+                    publish the initial Census 2021 findings one year after the census and the main releases two years after the census.
+                </p>
 
-                <p>To make sure the Census 2021 statistics we publish meet the needs of those who use them, we also run an outputs consultation.</p>
+                <p>
+                    To make sure the Census 2021 statistics we publish meet the needs of those who use them, we also run an outputs
+                    consultation.
+                </p>
             </section>
             <section id="section4">
                 <h2>The census in Northern Ireland and Scotland</h2>
                 <p>The Office for National Statistics (ONS) runs the census in England and Wales.</p>
 
-                <p>If you live in Northern Ireland, visit the Northern Ireland Statistics Agency (NISRA) census website to find out about the census for Northern Ireland.</p>
+                <p>
+                    If you live in Northern Ireland, visit the Northern Ireland Statistics Agency (NISRA) census website to find out about
+                    the census for Northern Ireland.
+                </p>
 
-                <p>If you live in Scotland, visit the National Records of Scotland census website to find out how to take part in the census for Scotland.</p>
+                <p>
+                    If you live in Scotland, visit the National Records of Scotland census website to find out how to take part in the
+                    census for Scotland.
+                </p>
             </section>
             <section id="section5">
                 <h2>The last census</h2>
-                <p>The last census took place in 2011. Many people and organisations used information from the 2011 Census in a variety of ways.</p>
+                <p>
+                    The last census took place in 2011. Many people and organisations used information from the 2011 Census in a variety of
+                    ways.
+                </p>
 
-                <p>For example, Bristol City Council used it to inform decisions on how to fund local housing improvements. It was also essential for the charity Redbridge Council for Voluntary Services to help people from ethnic minority groups learn more about dementia.</p>
+                <p>
+                    For example, Bristol City Council used it to inform decisions on how to fund local housing improvements. It was also
+                    essential for the charity Redbridge Council for Voluntary Services to help people from ethnic minority groups learn more
+                    about dementia.
+                </p>
 
-                <p>To read more about the benefits that information from the 2011 Census helped to create, visit the Office for National Statistics (ONS) website.</p>
-                <p>The Census Coverage Survey (CCS) was a short, separate survey that we at the Office for National Statistics (ONS) started six to eight weeks after Census Day.</p>
+                <p>
+                    To read more about the benefits that information from the 2011 Census helped to create, visit the Office for National
+                    Statistics (ONS) website.
+                </p>
+                <p>
+                    The Census Coverage Survey (CCS) was a short, separate survey that we at the Office for National Statistics (ONS)
+                    started six to eight weeks after Census Day.
+                </p>
 
-                <p>The CCS helps make sure everyone is counted and our census results are as accurate as possible. It asked similar questions to the main census, just fewer of them, at addresses in a selection of postcodes across England and Wales.</p>
+                <p>
+                    The CCS helps make sure everyone is counted and our census results are as accurate as possible. It asked similar
+                    questions to the main census, just fewer of them, at addresses in a selection of postcodes across England and Wales.
+                </p>
 
                 <p>The CCS has now closed.</p>
             </section>

package/components/tabs/_macro.njk

@@ -7,21 +7,27 @@
         {% endfor %}
     {% endset %}
 
-    <section class="{{ classes }}"
-        {% if params.noInitialActiveTab %}data-no-initial-active-tab="true"{% endif %}
-    >
+    <section class="{{ classes }}" {% if params.noInitialActiveTab %}data-no-initial-active-tab="true"{% endif %}>
         {% set titleTag = params.titleTag | default("h2") %}
-        <{{ titleTag }} class="ons-tabs__title ons-u-fs-r--b ons-u-mt-no{% if params.titleClasses %} {{ params.titleClasses }}{% endif %}">{{ params.title }}</{{ titleTag }}>
+        {% set openingTag = "<" + titleTag %}
+        {% set closingTag = "</" + titleTag + ">" %}
+        {{ openingTag | safe }}
+        class="ons-tabs__title ons-u-fs-r--b
+        ons-u-mt-no{{ ' ' + params.titleClasses if params.titleClasses else '' }}">{{ params.title }}{{ closingTag | safe }}
         <div>
             <ul class="ons-tabs__list">
+                <!-- prettier-ignore-start -->
                 {%- for tab in params.tabs -%}
-                    <li class="ons-tab__list-item"><a href="#{{ tab.id if tab.id else tab.title|trim|replace(' ','-')|lower}}" class="ons-tab"{% if tab.attributes %}{% for attribute, value in (tab.attributes.items() if tab.attributes is mapping and tab.attributes.items else tab.attributes) %} {{ attribute }}{% if value %}="{{ value }}"{% endif %} {% endfor %}{% endif %}>{{ tab.title }}{% if tab.hiddenSpan %}<span class='ons-u-vh'>{{tab.hiddenSpan}}</span>{% endif %}</a></li>
+                    <li class="ons-tab__list-item"><a href="#{{ tab.id if tab.id else tab.title|trim|replace(' ','-')|lower }}" class="ons-tab"{% if tab.attributes %}{% for attribute, value in (tab.attributes.items() if tab.attributes is mapping and tab.attributes.items else tab.attributes) %}{{ ' ' }}{{ attribute }}{% if value %}="{{ value }}"{% endif %}{% endfor %}{% endif %}>{{ tab.title }}{% if tab.hiddenSpan %}<span class="ons-u-vh">{{ tab.hiddenSpan }}</span>{% endif %}</a></li>
                 {%- endfor -%}
+                <!-- prettier-ignore-end -->
             </ul>
         </div>
         {% for tab in params.tabs %}
             <section id="{{ tab.id if tab.id else tab.title|trim|replace(' ','-')|lower }}" class="ons-tabs__panel">
-                {% if tab.showTitle %}<h2 id="{{ tab.title|trim|replace(' ','-')|lower + '-content-title' }}" class="ons-u-vh">{{ tab.title }}</h2>{% endif %}
+                {% if tab.showTitle %}
+                    <h2 id="{{ tab.title|trim|replace(' ','-')|lower + '-content-title' }}" class="ons-u-vh">{{ tab.title }}</h2>
+                {% endif %}
                 {{ tab.content | safe }}
             </section>
         {% endfor %}

package/components/tabs/example-tabs-details.njk

@@ -1,7 +1,7 @@
 <style>
-  .example-video-block {
-    border: solid 1px #707071;
-  }
+    .example-video-block {
+        border: solid 1px #707071;
+    }
 </style>
 
 <div class="example-video-block">
@@ -11,15 +11,14 @@
         "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',
         "linkText": 'Watch “Transforming the way we produce statistics | Explaining the Dynamic Population Model | BSL“ on Youtube'
         })
     }}
-
     {% from "components/tabs/_macro.njk" import onsTabs %}
     {{
         onsTabs({

package/components/text-indent/_macro.njk

@@ -1,5 +1,3 @@
 {% macro onsTextIndent(params) %}
-    <div class="ons-text-indent">
-        {{ caller() if caller else params.text | safe }}
-    </div>
+    <div class="ons-text-indent">{{ caller() if caller else params.text | safe }}</div>
 {% endmacro %}

package/components/textarea/_macro.njk

@@ -3,75 +3,78 @@
     {% from "components/field/_macro.njk" import onsField %}
     {% from "components/label/_macro.njk" import onsLabel %}
     {% from "components/char-check-limit/_macro.njk" import onsCharLimit %}
-
+    {% set textareaExclusiveClass = " ons-js-exclusive-group-item" if params.mutuallyExclusive %}
 
     {% set field %}
-        {% set textareaExclusiveClass = " ons-js-exclusive-group-item" if params.mutuallyExclusive else "" %}
-
         {% if params.label %}
-            {{ onsLabel({
-                "for": params.id,
-                "text": params.label.text,
-                "description": params.label.description,
-                "classes": params.label.classes
-            }) }}
+            {{
+                onsLabel({
+                    "for": params.id,
+                    "text": params.label.text,
+                    "description": params.label.description,
+                    "classes": params.label.classes
+                })
+            }}
         {% endif %}
 
         <textarea
             id="{{ params.id }}"
-            class="ons-input ons-input--textarea {% if params.error %} ons-input--error {% endif %}{% if params.charCheckLimit and params.charCheckLimit.limit %} ons-js-char-limit-input{% endif %}{{ textareaExclusiveClass }} {{ params.classes if params.classes }} {% if params.width %}ons-input--w-{{ params.width }}{% endif %}"
+            class="ons-input ons-input--textarea{{ ' ons-input--error' if params.error }}{{ ' ons-js-char-limit-input' if params.charCheckLimit and params.charCheckLimit.limit }}{{ textareaExclusiveClass }}{{ ' ' + params.classes if params.classes else '' }}{% if params.width %}{{ ' ' }}ons-input--w-{{ params.width }}{% endif %}"
             {% if params.name %}
-             name="{{ params.name }}"
+                name="{{ params.name }}"
             {% endif %}
             rows="{{ params.rows | default(8) }}"
             {% if params.charCheckLimit and params.charCheckLimit.limit %}
-                maxlength="{{ params.charCheckLimit.limit }}"
-                data-char-limit-ref="{{ params.id }}-lim"
+                maxlength="{{ params.charCheckLimit.limit }}" data-char-limit-ref="{{ params.id }}-lim"
                 aria-describedby="{{ params.id }}-lim"
             {% endif %}
-            {% if params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %}{{ attribute }}{% if value %}="{{ value }}"{% endif %} {% endfor %}{% endif %}
-        >{{ params.value if params.value }}</textarea>
+            {% if params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %}{{ ' ' }}{{ attribute }}{% if value %}="{{ value }}"{% endif %}{% endfor %}{% endif %}
+        >
+            {{- params.value if params.value -}}</textarea
+        >
 
         {% if params.charCheckLimit and params.charCheckLimit.limit %}
-            {% call onsCharLimit({
-                "id": params.id ~ "-lim",
-                "limit": params.charCheckLimit.limit,
-                "charCountSingular": params.charCheckLimit.charCountSingular,
-                "charCountPlural": params.charCheckLimit.charCountPlural
-            }) %}
+            {%
+                call onsCharLimit({
+                    "id": params.id ~ "-lim",
+                    "limit": params.charCheckLimit.limit,
+                    "charCountSingular": params.charCheckLimit.charCountSingular,
+                    "charCountPlural": params.charCheckLimit.charCountPlural
+                })
+            %}
             {% endcall %}
         {% endif %}
     {% endset %}
 
     {% if params.mutuallyExclusive %}
-        {% call onsMutuallyExclusive({
-            "id": params.fieldId,
-            "classes": params.fieldClasses,
-            "legend": params.legend,
-            "legendClasses": params.legendClasses,
-            "description": params.description,
-            "dontWrap": params.dontWrap,
-            "legendIsQuestionTitle": params.legendIsQuestionTitle,
-            "exclusiveOptions": params.mutuallyExclusive.exclusiveOptions,
-            "or": params.mutuallyExclusive.or,
-            "deselectMessage": params.mutuallyExclusive.deselectMessage,
-            "deselectGroupAdjective": params.mutuallyExclusive.deselectGroupAdjective,
-            "deselectExclusiveOptionAdjective": params.mutuallyExclusive.deselectExclusiveOptionAdjective,
-            "error": params.error
-        }) %}
-            {% call onsField({
+        {%
+            call onsMutuallyExclusive({
+                "id": params.fieldId,
+                "classes": params.fieldClasses,
+                "legend": params.legend,
+                "legendClasses": params.legendClasses,
+                "description": params.description,
+                "dontWrap": params.dontWrap,
+                "legendIsQuestionTitle": params.legendIsQuestionTitle,
+                "exclusiveOptions": params.mutuallyExclusive.exclusiveOptions,
+                "or": params.mutuallyExclusive.or,
+                "deselectMessage": params.mutuallyExclusive.deselectMessage,
+                "deselectGroupAdjective": params.mutuallyExclusive.deselectGroupAdjective,
+                "deselectExclusiveOptionAdjective": params.mutuallyExclusive.deselectExclusiveOptionAdjective,
                 "error": params.error
-            }) %}
-                {{ field | safe }}
-            {% endcall %}
+            })
+        %}
+            {{ field | safe }}
         {% endcall %}
     {% else %}
-        {% 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 %}
     {% endif %}

package/components/textarea/_macro.spec.js

@@ -285,16 +285,5 @@ describe('macro: textarea', () => {
                 error: EXAMPLE_TEXTAREA_WITH_MUTUALLY_EXCLUSIVE_WITH_ERROR.error,
             });
         });
-
-        it('still renders field component', () => {
-            const faker = templateFaker();
-            const fieldSpy = faker.spy('field');
-
-            faker.renderComponent('textarea', EXAMPLE_TEXTAREA_WITH_MUTUALLY_EXCLUSIVE_WITH_ERROR);
-
-            expect(fieldSpy.occurrences).toContainEqual({
-                error: EXAMPLE_TEXTAREA_WITH_MUTUALLY_EXCLUSIVE_WITH_ERROR.error,
-            });
-        });
     });
 });

package/components/timeline/_macro.njk

@@ -1,12 +1,13 @@
 {% macro onsTimeline(params) %}
-
     {% from "components/list/_macro.njk" import onsList %}
 
     <div class="ons-timeline{{ ' ' + params.classes if params.classes else '' }}">
         {% set titleTag = params.titleTag | default("h2") %}
+        {% set openingTag = "<" + titleTag %}
+        {% set closingTag = "</" + titleTag + ">" %}
         {% for item in params.items %}
             <div class="ons-timeline__item">
-                <{{ titleTag }} class="ons-timeline__heading">{{ item.heading }}</{{ titleTag }}>
+                {{ openingTag | safe }} class="ons-timeline__heading">{{ item.heading }}{{ closingTag | safe }}
                 {% if item.itemsList %}
                     <div class="ons-timeline__content">
                         {{
@@ -17,12 +18,9 @@
                         }}
                     </div>
                 {% elif item.content %}
-                    <div class="ons-timeline__content">
-                        {{ item.content | safe }}
-                    </div>
+                    <div class="ons-timeline__content">{{ item.content | safe }}</div>
                 {% endif %}
             </div>
         {% endfor %}
     </div>
-
 {% endmacro %}

package/components/timeout-modal/_macro.njk

@@ -1,24 +1,26 @@
 {% from "components/modal/_macro.njk" import onsModal %}
 {% macro onsTimeoutModal(params) %}
-    {% call onsModal({
-        "title": params.title,
-        "btnText": params.btnText,
-        "classes": "ons-js-timeout-modal",
-        "attributes": {
-            "data-redirect-url": params.redirectUrl,
-            "data-server-session-expires-at": params.sessionExpiresAt,
-            "data-show-modal-time": params.showModalTimeInSeconds,
-            "data-server-session-expiry-endpoint": params.serverSessionExpiryEndpoint,
-            "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 onsModal({
+            "title": params.title,
+            "btnText": params.btnText,
+            "classes": "ons-js-timeout-modal",
+            "attributes": {
+                "data-redirect-url": params.redirectUrl,
+                "data-server-session-expires-at": params.sessionExpiresAt,
+                "data-show-modal-time": params.showModalTimeInSeconds,
+                "data-server-session-expiry-endpoint": params.serverSessionExpiryEndpoint,
+                "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"
+            }
+        })
+    %}
         <p>{{ params.textFirstLine }}</p>
         <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-modal/example-timeout-modal.njk

@@ -1,18 +1,20 @@
 {% from "components/timeout-modal/_macro.njk" import onsTimeoutModal %}
 
 <div style="min-height:20rem;">
-{{ onsTimeoutModal({
-    "showModalTimeInSeconds": 60,
-    "redirectUrl": "#!",
-    "title": "You will be signed out soon",
-    "textFirstLine": "It appears you have been inactive for a while.",
-    "countdownText": "To protect your information, your progress will be saved and you will be signed out in",
-    "countdownExpiredText": "You are being signed out.",
-    "btnText": "Continue survey",
-    "minutesTextSingular": "minute",
-    "minutesTextPlural": "minutes",
-    "secondsTextSingular": "second",
-    "secondsTextPlural": "seconds",
-    "endWithFullStop": true
-}) }}
+    {{
+        onsTimeoutModal({
+            "showModalTimeInSeconds": 60,
+            "redirectUrl": "#!",
+            "title": "You will be signed out soon",
+            "textFirstLine": "It appears you have been inactive for a while.",
+            "countdownText": "To protect your information, your progress will be saved and you will be signed out in",
+            "countdownExpiredText": "You are being signed out.",
+            "btnText": "Continue survey",
+            "minutesTextSingular": "minute",
+            "minutesTextPlural": "minutes",
+            "secondsTextSingular": "second",
+            "secondsTextPlural": "seconds",
+            "endWithFullStop": true
+        })
+    }}
 </div>