@ons/design-system 70.0.8 → 70.0.9

package/components/date-input/_macro.njk

@@ -2,7 +2,7 @@
 {% from "components/input/_macro.njk" import onsInput %}
 
 {% macro onsDateInput(params) %}
-    {% set exclusiveClass = " ons-js-exclusive-group-item" if params.mutuallyExclusive else "" %}
+    {% set exclusiveClass = " ons-js-exclusive-group-item" if params.mutuallyExclusive %}
     {%- set numberOfFields = 0 -%}
 
     {%- if params.day -%}
@@ -19,75 +19,83 @@
 
     {% set fields %}
         {% if params.day %}
-            {{ onsInput({
-                "id": params.id + "-day",
-                "type": "number",
-                "name": params.day.name,
-                "classes": (" ons-input--error" if (params.error and params.day.error) or (params.error and not params.day.error and not params.month.error and not params.year.error) else "") + exclusiveClass | default(""),
-                "width": "2",
-                "maxLength": 2,
-                "attributes": params.day.attributes,
-                "label": {
-                    "text": params.day.label.text if numberOfFields > 1 else params.legendOrLabel,
-                    "description": params.day.label.description if numberOfFields > 1 else params.description,
-                    "id": params.id + "-day-label"
-                },
-                "value": params.day.value,
-                "error": params.error if numberOfFields < 2
-            }) }}
+            {{
+                onsInput({
+                    "id": params.id + "-day",
+                    "type": "number",
+                    "name": params.day.name,
+                    "classes": (" ons-input--error" if (params.error and params.day.error) or (params.error and not params.day.error and not params.month.error and not params.year.error) else "") + exclusiveClass | default(""),
+                    "width": "2",
+                    "maxLength": 2,
+                    "attributes": params.day.attributes,
+                    "label": {
+                        "text": params.day.label.text if numberOfFields > 1 else params.legendOrLabel,
+                        "description": params.day.label.description if numberOfFields > 1 else params.description,
+                        "id": params.id + "-day-label"
+                    },
+                    "value": params.day.value,
+                    "error": params.error if numberOfFields < 2
+                })
+            }}
         {% endif %}
 
         {% if params.month %}
-            {{ onsInput({
-                "id": params.id + "-month",
-                "type": "number",
-                "name": params.month.name,
-                "classes": (" ons-input--error" if (params.error and params.month.error) or (params.error and not params.day.error and not params.month.error and not params.year.error) else "") + exclusiveClass | default(""),
-                "width": "2",
-                "maxLength": 2,
-                "attributes": params.month.attributes,
-                "label": {
-                    "text": params.month.label.text if numberOfFields > 1 else params.legendOrLabel,
-                    "description": params.month.label.description if numberOfFields > 1 else params.description,
-                    "id": params.id + "-month-label"
-                },
-                "value": params.month.value,
-                "error": params.error if numberOfFields < 2
-            }) }}
+            {{
+                onsInput({
+                    "id": params.id + "-month",
+                    "type": "number",
+                    "name": params.month.name,
+                    "classes": (" ons-input--error" if (params.error and params.month.error) or (params.error and not params.day.error and not params.month.error and not params.year.error) else "") + exclusiveClass | default(""),
+                    "width": "2",
+                    "maxLength": 2,
+                    "attributes": params.month.attributes,
+                    "label": {
+                        "text": params.month.label.text if numberOfFields > 1 else params.legendOrLabel,
+                        "description": params.month.label.description if numberOfFields > 1 else params.description,
+                        "id": params.id + "-month-label"
+                    },
+                    "value": params.month.value,
+                    "error": params.error if numberOfFields < 2
+                })
+            }}
         {% endif %}
 
         {% if params.year %}
-            {{ onsInput({
-                "id": params.id + "-year",
-                "type": "number",
-                "name": params.year.name,
-                "classes": (" ons-input--error" if (params.error and params.year.error) or (params.error and not params.day.error and not params.month.error and not params.year.error) else "") + exclusiveClass | default(""),
-                "width": "4",
-                "maxLength": 4,
-                "attributes": params.year.attributes,
-                "label": {
-                    "text": params.year.label.text if numberOfFields > 1 else params.legendOrLabel,
-                    "description": params.year.label.description if numberOfFields > 1 else params.description,
-                    "id": params.id + "-year-label"
-                },
-                "value": params.year.value,
-                "error": params.error if numberOfFields < 2
-            }) }}
+            {{
+                onsInput({
+                    "id": params.id + "-year",
+                    "type": "number",
+                    "name": params.year.name,
+                    "classes": (" ons-input--error" if (params.error and params.year.error) or (params.error and not params.day.error and not params.month.error and not params.year.error) else "") + exclusiveClass | default(""),
+                    "width": "4",
+                    "maxLength": 4,
+                    "attributes": params.year.attributes,
+                    "label": {
+                        "text": params.year.label.text if numberOfFields > 1 else params.legendOrLabel,
+                        "description": params.year.label.description if numberOfFields > 1 else params.description,
+                        "id": params.id + "-year-label"
+                    },
+                    "value": params.year.value,
+                    "error": params.error if numberOfFields < 2
+                })
+            }}
         {% endif %}
     {% endset %}
 
-    {{ onsMultipleInputFields({
-        "id": params.id,
-        "legendOrLabel": params.legendOrLabel,
-        "description": params.description,
-        "mutuallyExclusive": params.mutuallyExclusive,
-        "numberOfFields": numberOfFields,
-        "fields": fields,
-        "error": params.error,
-        "legend": params.legendOrLabel,
-        "dontWrap": params.dontWrap,
-        "classes": params.classes,
-        "legendClasses": params.legendClasses,
-        "legendIsQuestionTitle": params.legendIsQuestionTitle
-    }) }}
+    {{
+        onsMultipleInputFields({
+            "id": params.id,
+            "legendOrLabel": params.legendOrLabel,
+            "description": params.description,
+            "mutuallyExclusive": params.mutuallyExclusive,
+            "numberOfFields": numberOfFields,
+            "fields": fields,
+            "error": params.error,
+            "legend": params.legendOrLabel,
+            "dontWrap": params.dontWrap,
+            "classes": params.classes,
+            "legendClasses": params.legendClasses,
+            "legendIsQuestionTitle": params.legendIsQuestionTitle
+        })
+    }}
 {% endmacro %}

package/components/date-input/example-date-input-error-for-single-field.njk

@@ -1,4 +1,3 @@
-
 {% from "components/date-input/_macro.njk" import onsDateInput %}
 {{
     onsDateInput({

package/components/date-input/example-date-input-error.njk

@@ -1,4 +1,3 @@
-
 {% from "components/date-input/_macro.njk" import onsDateInput %}
 {{
     onsDateInput({

package/components/description-list/_macro.njk

@@ -1,14 +1,23 @@
 {% macro onsDescriptionList(params) %}
-  <dl class="ons-description-list ons-description-list__items ons-grid ons-grid--gutterless ons-u-cf{{ (' ' + params.classes) if params.classes }}"{% if params.id %} id="{{ params.id }}" {% endif %}{% if params.descriptionListLabel %} title="{{ params.descriptionListLabel }}" aria-label="{{ params.descriptionListLabel }}"{% endif %}>
-    {% for item in params.itemsList %}
-      {% if item.term | length %}
-          <dt class="ons-description-list__term ons-grid__col ons-col-{{ params.termCol }}@m">{{ item.term }}</dt>
-      {% endif %}
-        {% for descriptionItem in item.descriptions %}
-          {% if descriptionItem.description | length %}
-            <dd {% if descriptionItem.id %}id="{{ descriptionItem.id }}" {% endif %}class="ons-description-list__value ons-grid__col ons-col-{{ params.descriptionCol }}@m">{{ descriptionItem.description }}</dd>
-          {% endif %}
+    <dl
+        class="ons-description-list ons-description-list__items ons-grid ons-grid--gutterless ons-u-cf{{ " " + params.classes if params.classes else "" }}"
+        {% if params.id %}id="{{ params.id }}"{% endif %}{% if params.descriptionListLabel %}
+            title="{{ params.descriptionListLabel }}" aria-label="{{ params.descriptionListLabel }}"
+        {% endif %}
+    >
+        {% for item in params.itemsList %}
+            {% if item.term | length %}
+                <dt class="ons-description-list__term ons-grid__col ons-col-{{ params.termCol }}@m">{{ item.term }}</dt>
+            {% endif %}
+            {% for descriptionItem in item.descriptions %}
+                {% if descriptionItem.description | length %}
+                    <dd
+                        {% if descriptionItem.id %}id="{{ descriptionItem.id }}"{% endif %}class="ons-description-list__value ons-grid__col ons-col-{{ params.descriptionCol }}@m"
+                    >
+                        {{- descriptionItem.description -}}
+                    </dd>
+                {% endif %}
+            {% endfor %}
         {% endfor %}
-    {% endfor %}
-  </dl>
+    </dl>
 {% endmacro %}

package/components/details/_macro.njk

@@ -1,28 +1,35 @@
 {% macro onsDetails(params) %}
     <div
         id="{{ params.id }}"
-        class="ons-details ons-js-details{% if params.isAccordion %} ons-details--accordion{% endif %}{% if params.classes %} {{ params.classes }}{% endif %}"
-        {% if params.group %} data-group="{{ params.group }}"{% 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 %}
-        {% if params.saveState %} data-save-state="true"{% endif %}
-        {% if params.open %} data-open="true"{% endif %}
+        class="ons-details ons-js-details{{ ' ons-details--accordion' if params.isAccordion }}{{ ' ' + params.classes if params.classes else '' }}"
+        {% if params.group %}{{ ' ' }}data-group="{{ params.group }}"{% 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 %}
+        {% if params.saveState %}{{ ' ' }}data-save-state="true"{% endif %}
+        {% if params.open %}{{ ' ' }}data-open="true"{% endif %}
     >
         <div
-            class="ons-details__heading ons-js-details-heading" role="button"
-            {% if params.headingAttributes %}{% for attribute, value in (params.headingAttributes.items() if params.headingAttributes is mapping and params.headingAttributes.items else params.headingAttributes) %}{{ attribute }}{% if value %}="{{ value }}"{% endif %} {% endfor %}{% endif %}
+            class="ons-details__heading ons-js-details-heading"
+            role="button"
+            {% if params.headingAttributes %}{% for attribute, value in (params.headingAttributes.items() if params.headingAttributes is mapping and params.headingAttributes.items else params.headingAttributes) %}{{ ' ' }}{{ attribute }}{% if value %}="{{ value }}"{% endif %}{% endfor %}{% endif %}
         >
             {% set titleTag = params.titleTag | default("h2") %}
-            <{{ titleTag }} class="ons-details__title">{{ params.title }}</{{ titleTag }}>
+            {% set openingTag = "<" + titleTag %}
+            {% set closingTag = "</" + titleTag + ">" %}
+            {{ openingTag | safe }}
+            class="ons-details__title">{{ params.title }}{{ closingTag | safe }}
             <span class="ons-details__icon">
                 {% from "components/icon/_macro.njk" import onsIcon %}
                 {{-
                     onsIcon({
                         "iconType": "chevron"
                     })
-                -}}</span>
+                -}}</span
+            >
         </div>
-        <div id="{{ params.id }}-content" class="ons-details__content ons-js-details-content"
-            {% if params.contentAttributes %}{% for attribute, value in (params.contentAttributes.items() if params.contentAttributes is mapping and params.contentAttributes.items else params.contentAttributes) %}{{ attribute }}{% if value %}="{{ value }}"{% endif %} {% endfor %}{% endif %}
+        <div
+            id="{{ params.id }}-content"
+            class="ons-details__content ons-js-details-content"
+            {% if params.contentAttributes %}{% for attribute, value in (params.contentAttributes.items() if params.contentAttributes is mapping and params.contentAttributes.items else params.contentAttributes) %}{{ ' ' }}{{ attribute }}{% if value %}="{{ value }}"{% endif %}{% endfor %}{% endif %}
         >
             {{ params.content | safe }}{{ caller() if caller }}
         </div>

package/components/details/example-details-with-warning.njk

@@ -1,16 +1,21 @@
 {% from "components/details/_macro.njk" import onsDetails %}
 {% from "components/panel/_macro.njk" import onsPanel %}
 
-{% call onsDetails({
-    "id": "details-example-with-warning",
-    "title": "Need to answer separately from your household?"
-}) %}
-
-    <p>If you need to answer separately from the people you live with, you can <a href="#0">request an individual access code</a> to start a separate survey.</p>
-    {% call onsPanel({
-        "variant": "warn"
-    }) %}
+{%
+    call onsDetails({
+        "id": "details-example-with-warning",
+        "title": "Need to answer separately from your household?"
+    })
+%}
+    <p>
+        If you need to answer separately from the people you live with, you can <a href="#0">request an individual access code</a> to start
+        a separate survey.
+    </p>
+    {%
+        call onsPanel({
+            "variant": "warn"
+        })
+    %}
         Someone in your household must still complete a survey using a household access code
     {% endcall %}
-
 {% endcall %}

package/components/document-list/_macro.njk

@@ -1,110 +1,119 @@
 {% macro onsDocumentList(params) %}
-    <ul{% if params.id %} id="{{ params.id }}"{% endif %} class="ons-document-list{{ ' ' + params.classes if params.classes else '' }}"{% if params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %} {{attribute}}="{{value}}"{% endfor %}{% endif %}>
+    <ul
+        {% if params.id %}id="{{ params.id }}"{% endif %}class="ons-document-list{{ ' ' + params.classes if params.classes else '' }}"
+        {% if params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %}{{ ' ' }}{{ attribute }}="{{ value }}"{% endfor %}{% endif %}
+    >
         {% for document in params.documents %}
-
-        <li class="ons-document-list__item{{ ' ons-document-list__item--featured' if document.featured }}{{ ' ons-document-list__item--full-width' if document.featured and document.fullWidth == true }}{{ ' ' + document.classes if document.classes else '' }}"{% if document.attributes %}{% for attribute, value in (document.attributes.items() if document.attributes is mapping and document.attributes.items else document.attributes) %} {{attribute}}="{{value}}"{% endfor %}{% endif %}>
-
-            {% if document.featured and document.fullWidth == true %}
-
-                <div class="ons-container{{ ' ons-container--wide' if document.wide == true }}">
-
-            {% endif %}
-
-                    {% if document.thumbnail %}
-
-                        <div class="ons-document-list__item-image{%- if document.metadata.file %} ons-document-list__item-image--file{% endif %}" aria-hidden="true">
-                            <a class="ons-document-list__image-link{{ ' ons-document-list__image-link--placeholder' if not document.thumbnail.smallSrc }}" href="{{ document.url }}" tabindex="-1">
-                                {% if document.thumbnail.smallSrc and document.thumbnail.largeSrc %}
-                                    <img srcset="{{ document.thumbnail.smallSrc }} 1x, {{ document.thumbnail.largeSrc }} 2x" src="{{ document.thumbnail.smallSrc }}" alt="" loading="lazy">
-                                {% endif %}
-                            </a>
-                        </div>
-
-                    {% endif %}
-
-                    <div class="ons-document-list__item-content">
-
-                        <div class="ons-document-list__item-header{{ ' ons-document-list__item-header--reverse' if document.showMetadataFirst == true }}">
-
-                            {% set titleTag = params.titleTag | default("h2") %}
-
-                            <{{ titleTag }} class="ons-document-list__item-title ons-u-fs-m ons-u-mt-no ons-u-mb-xs">
-                                <a href="{{ document.url }}">{{ document.title }}
-                                {%- if document.metadata and document.metadata.file %}
+            {% set titleTag = params.titleTag | default("h2") %}
+            {% set openingTag = "<" + titleTag %}
+            {% set closingTag = "</" + titleTag + ">" %}
+            {% set documentItem %}
+                {% if document.thumbnail %}
+                    <div
+                        class="ons-document-list__item-image{{ ' ons-document-list__item-image--file' if document.metadata.file }}"
+                        aria-hidden="true"
+                    >
+                        <a
+                            class="ons-document-list__image-link{{ ' ons-document-list__image-link--placeholder' if not document.thumbnail.smallSrc }}"
+                            href="{{ document.url }}"
+                            tabindex="-1"
+                        >
+                            {% if document.thumbnail.smallSrc and document.thumbnail.largeSrc %}
+                                <img
+                                    srcset="{{ document.thumbnail.smallSrc }} 1x, {{ document.thumbnail.largeSrc }} 2x"
+                                    src="{{ document.thumbnail.smallSrc }}"
+                                    alt=""
+                                    loading="lazy"
+                                />
+                            {% endif %}
+                        </a>
+                    </div>
+                {% endif %}
+
+                <div class="ons-document-list__item-content">
+                    <div
+                        class="ons-document-list__item-header{{ ' ons-document-list__item-header--reverse' if document.showMetadataFirst == true }}"
+                    >
+                        {{ openingTag | safe }} class="ons-document-list__item-title ons-u-fs-m ons-u-mt-no ons-u-mb-xs">
+                        <a href="{{ document.url }}"
+                            >{{ document.title }}
+                            {%- if document.metadata and document.metadata.file -%}
                                 <span class="ons-u-vh">
-                                    {% set fileMetadataItems = [
+                                    {%
+                                        set fileMetadataItems = [
                                         document.metadata.file.fileType + ' document download' if document.metadata.file.fileType,
                                         document.metadata.file.fileSize if document.metadata.file.fileSize,
                                         document.metadata.file.filePages if document.metadata.file.filePages ]
                                     %}
-
                                     , {{ fileMetadataItems | join(', ') }}
-
+                                </span>
+                            {% endif %}
+                        </a>
+                        {{ closingTag | safe }}
+
+                        {%- if document.metadata -%}
+                            <ul class="ons-document-list__item-metadata{{ ' ons-u-mb-xs' if document.description else ' ons-u-mb-no' }}">
+                                {%- if document.metadata.date -%}
+                                    <li class="ons-document-list__item-attribute">
+                                        {% set prefixClass = "ons-u-fw-b" if document.metadata.date.showPrefix == true else "ons-u-vh" %}
+                                        <span class="{{ prefixClass }}">{{ document.metadata.date.prefix | default("Published") }}: </span>
+                                        {%- if document.metadata.date.iso -%}
+                                            <time datetime="{{ document.metadata.date.iso }}">{{ document.metadata.date.short }}</time>
+                                        {%- endif -%}
+                                    </li>
                                 {% endif %}
 
-                                </span></a>
-                            </{{ titleTag }}>
-
-                            {%- if document.metadata %}
-
-                                <ul class="ons-document-list__item-metadata{% if document.description %} ons-u-mb-xs{% else %} ons-u-mb-no{% endif %}">
-
-                                    {%- if document.metadata.date %}
-                                        <li class="ons-document-list__item-attribute">
-                                            {% set prefixClasses = "ons-u-fw-b" if document.metadata.date.showPrefix == true else "ons-u-vh" %}
-                                            <span class="{{ prefixClasses }}">{{ document.metadata.date.prefix | default("Published") }}: </span>
-                                            {% if document.metadata.date.iso -%}
-                                                <time datetime="{{ document.metadata.date.iso }}">{{ document.metadata.date.short }}</time>
-                                            {%- endif %}
-                                        </li>
-                                    {% endif %}
-
-                                    {%- if document.metadata.type and document.metadata.type.text %}
-                                        <li class="ons-document-list__item-attribute{%- if document.metadata.file %} ons-u-mr-no{% endif %}">
-                                            {%- if document.metadata.type.url %}
-                                                <a class="ons-document-list__attribute-link" href="{{ document.metadata.type.url }}">
-                                            {% endif %}
-                                                    <span {% if not document.metadata.file and not document.metadata.type.url %}class="ons-u-fw-b"{% endif %}>{{ document.metadata.type.text }}{%- if document.metadata.type.ref %}: {% elif document.metadata.file %},{% endif %}</span>
-                                            {%- if document.metadata.type.url %}
-                                                </a>
-                                            {% endif %}
-                                            {%- if document.metadata.type.ref %}
-                                                <span>{{ document.metadata.type.ref }}</span>
-                                            {% endif %}
-                                        </li>
-                                    {% endif %}
-
-                                    {%- if document.metadata.file and document.metadata.file.fileType %}
-
-                                        <li class="ons-document-list__item-attribute" aria-hidden="true">
-                                            {% set fileMetadataItems = [
-                                                document.metadata.file.fileType if document.metadata.file.fileType,
-                                                document.metadata.file.fileSize if document.metadata.file.fileSize,
-                                                document.metadata.file.filePages if document.metadata.file.filePages ]
-                                             %}
-                                            {{ fileMetadataItems | join(', ') }}
-                                        </li>
-
-                                    {% endif -%}
-                                </ul>
-
-                            {% endif %}
-                        </div>
+                                {%- if document.metadata.type and document.metadata.type.text -%}
+                                    <li class="ons-document-list__item-attribute{{ ' ons-u-mr-no' if document.metadata.file }}">
+                                        {% set metadataType %}
+                                            <span
+                                                {% if not document.metadata.file and not document.metadata.type.url %}class="ons-u-fw-b"{% endif %}
+                                                >{{ document.metadata.type.text }}{%- if document.metadata.type.ref -%}:{% elif document.metadata.file %},{% endif %}</span
+                                            >
+                                        {% endset %}
+                                        {%- if document.metadata.type.url -%}
+                                            <a class="ons-document-list__attribute-link" href="{{ document.metadata.type.url }}">
+                                                {{ metadataType | safe }}
+                                            </a>
+                                        {% else %}
+                                            {{ metadataType | safe }}
+                                        {% endif %}
+                                        {%- if document.metadata.type.ref -%}
+                                            <span>{{ document.metadata.type.ref }}</span>
+                                        {% endif %}
+                                    </li>
+                                {% endif %}
 
-                        {% if document.description %}
-                            <div class="ons-document-list__item-description">{{ document.description | safe }}</div>
+                                {%- if document.metadata.file and document.metadata.file.fileType -%}
+                                    <li class="ons-document-list__item-attribute" aria-hidden="true">
+                                        {%
+                                            set fileMetadataItems = [
+                                            document.metadata.file.fileType if document.metadata.file.fileType,
+                                            document.metadata.file.fileSize if document.metadata.file.fileSize,
+                                            document.metadata.file.filePages if document.metadata.file.filePages ]
+                                        %}
+                                        {{ fileMetadataItems | join(', ') }}
+                                    </li>
+                                {%- endif -%}
+                            </ul>
                         {% endif %}
-
                     </div>
-
-            {% if document.featured and document.fullWidth == true %}
-
+                    {% if document.description %}
+                        <div class="ons-document-list__item-description">{{ document.description | safe }}</div>
+                    {% endif %}
                 </div>
-
-            {% endif %}
-
-        </li>
+            {% endset %}
+
+            <li
+                class="ons-document-list__item{{ ' ons-document-list__item--featured' if document.featured }}{{ ' ons-document-list__item--full-width' if document.featured and document.fullWidth == true }}{{ ' ' + document.classes if document.classes else '' }}"
+                {% if document.attributes %}{% for attribute, value in (document.attributes.items() if document.attributes is mapping and document.attributes.items else document.attributes) %}{{ ' ' }}{{ attribute }}="{{ value }}"{% endfor %}{% endif %}
+            >
+                {% if document.featured and document.fullWidth == true %}
+                    <div class="ons-container{{ ' ons-container--wide' if document.wide == true }}">{{ documentItem | safe }}</div>
+                {% else %}
+                    {{ documentItem | safe }}
+                {% endif %}
+            </li>
         {% endfor %}
     </ul>
-
 {% endmacro %}

package/components/document-list/example-document-list-article-featured.njk

@@ -1,31 +1,33 @@
 ---
-"fullWidth": true
+'fullWidth': true
 ---
 
 {% from "components/document-list/_macro.njk" import onsDocumentList %}
 
-{{ onsDocumentList({
-    "documents": [
-        {
-            "featured": true,
-            "fullWidth": true,
-            "thumbnail": {
-                "smallSrc": '/img/small/census-monuments-lights-featured.jpg',
-                "largeSrc": '/img/large/census-monuments-lights-featured.jpg'
-            },
-            "url": '#0',
-            "title": 'Landmarks are lighting up purple to mark Census Day',
-            "metadata": {
-                "type": {
-                    "text": 'Press releases',
-                    "url": '#0'
+{{
+    onsDocumentList({
+        "documents": [
+            {
+                "featured": true,
+                "fullWidth": true,
+                "thumbnail": {
+                    "smallSrc": '/img/small/census-monuments-lights-featured.jpg',
+                    "largeSrc": '/img/large/census-monuments-lights-featured.jpg'
                 },
-                "date": {
-                    "iso": '2022-01-01',
-                    "short": '1 January 2022'
-                }
-            },
-            "description": 'Hundreds of buildings & landmarks across England and Wales are lighting up purple this weekend to celebrate the census and its importance to communities.'
-        }
-    ]
-}) }}
+                "url": '#0',
+                "title": 'Landmarks are lighting up purple to mark Census Day',
+                "metadata": {
+                    "type": {
+                        "text": 'Press releases',
+                        "url": '#0'
+                    },
+                    "date": {
+                        "iso": '2022-01-01',
+                        "short": '1 January 2022'
+                    }
+                },
+                "description": 'Hundreds of buildings & landmarks across England and Wales are lighting up purple this weekend to celebrate the census and its importance to communities.'
+            }
+        ]
+    })
+}}