From baac6c14ce607bd35b9194c94f6fd722ef4e6dce Mon Sep 17 00:00:00 2001
From: Matt Simon <info@boxadesign.co.uk>
Date: Wed, 1 Feb 2023 13:56:05 +0000
Subject: [PATCH 01/18] Change concatenation method to be compatible with
 jinja2

---
 src/components/pagination/_macro.njk | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/pagination/_macro.njk b/src/components/pagination/_macro.njk
index 5376a4098a..3e545fa6ee 100644
--- a/src/components/pagination/_macro.njk
+++ b/src/components/pagination/_macro.njk
@@ -7,7 +7,7 @@
   {% endfor %}
 
   {% set totalPages = params.pages | length %}
-  {% set position = "Page " + currentPageIndex + " of " + totalPages %}
+  {% set position = "Page " ~ currentPageIndex ~ " of " ~ totalPages %}
   {% set lastPage = params.pages | last %}
   {% set firstPage = params.pages | first %}
 

From 5949eaa2a487768ab9bd3377dd9325b644bb817b Mon Sep 17 00:00:00 2001
From: Precious Onyenaucheya <precious.onyenaucheya@ons.gov.uk>
Date: Thu, 18 May 2023 10:49:17 +0100
Subject: [PATCH 02/18] make component compatible with jinja

---
 src/components/pagination/_macro.njk | 136 +++++++++++++--------------
 1 file changed, 68 insertions(+), 68 deletions(-)

diff --git a/src/components/pagination/_macro.njk b/src/components/pagination/_macro.njk
index 3e545fa6ee..389f55de3b 100644
--- a/src/components/pagination/_macro.njk
+++ b/src/components/pagination/_macro.njk
@@ -1,72 +1,72 @@
 {% macro onsPagination(params) %}
-  {% set currentPageIndex = "" %}
-  {% for page in params.pages %}
-      {% if page.current %}
-          {% set currentPageIndex = loop.index %}
-      {% endif %}
-  {% endfor %}
+    {% set currentPageIndex = "" %}
+    {% for page in params.pages %}
+        {% if page.current %}
+            {% set currentPageIndex = loop.index %}
+        {% endif %}
+    {% endfor %}
 
-  {% set totalPages = params.pages | length %}
-  {% set position = "Page " ~ currentPageIndex ~ " of " ~ totalPages %}
-  {% set lastPage = params.pages | last %}
-  {% set firstPage = params.pages | first %}
+    {% set totalPages = params.pages | length %}
+    {% set position = "Page " ~ currentPageIndex ~ " of " ~ totalPages %}
+    {% set lastPage = params.pages | last %}
+    {% set firstPage = params.pages | first %}
 
-  <nav class="ons-pagination {{ params.classes }}{% if params.hideRangeIndicator %} ons-pagination--no-indicator{% endif %}" aria-label="Pagination ({{ position }})">
-      <div class="ons-pagination__position">{{ position }}</div>
-      <ul class="ons-pagination__items">
-          {% if currentPageIndex != 1 %}
-              {% set prevPageIndex = currentPageIndex - 2 %}
-              <li class="ons-pagination__item ons-pagination__item--previous">
-                  <a href="{{ params.pages[prevPageIndex].url }}" class="ons-pagination__link" rel="prev" aria-label="Go to the previous page (Page {{ currentPageIndex - 1 }})">{{ params.previous }}</a>
-              </li>
-          {% endif %}
-          {% if currentPageIndex > 2 %}
-            <li class="ons-pagination__item{% if firstPage.current == true %} ons-pagination__item--current{% endif %}">
-                <a href="{{ firstPage.url }}" class="ons-pagination__link" aria-label="Go to the first page (Page 1)">1</a>
-            </li>
-          {% endif %}
-          {% if currentPageIndex > 4 %}
-              <li class="ons-pagination__item ons-pagination__item--gap">&hellip;</li>
-          {% endif %}
-          {% for page in params.pages %}
-              {% set showPage = false %}
-              {# Show the current, next and previous page
-              Show page 2 if the current page index is within the first 4 pages
-              Show the penultimate page if the current page index is within the last 4 pages  #}
-              {% if (loop.index == currentPageIndex) or (loop.index == currentPageIndex + 1) or (loop.index == currentPageIndex - 1) or (loop.index == 2 and currentPageIndex <= 4) or ((loop.index == totalPages - 1) and (currentPageIndex > totalPages - 4)) %}
-                {% set showPage = true %}                    
-              {% endif %}
-              {% if showPage == true %}
-                  <li class="ons-pagination__item{% if page.current == true %} ons-pagination__item--current{% endif %}">
-                      <a href="{{ page.url }}" class="ons-pagination__link"
-                          {%- if page.current -%}
-                              aria-current="true" aria-label="Current page ({{ position }})"
-                          {%- else -%}
-                              aria-label="Go to page {{ loop.index }}"
-                          {%- endif -%}
-                          {%- if loop.index == currentPageIndex - 1 -%}
-                              rel="prev"
-                          {%- endif -%}
-                          {%- if loop.index == currentPageIndex + 1 -%}
-                              rel="next"
-                          {%- endif -%}
-                      >{{ loop.index }}</a>
-                  </li>
-              {% endif %}
-          {% endfor %}
-          {% if currentPageIndex < totalPages - 3 %}
-              <li class="ons-pagination__item ons-pagination__item--gap">&hellip;</li>
-          {% endif %}
-          {% if currentPageIndex < totalPages - 1 %}
-            <li class="ons-pagination__item{% if lastPage.current == true %} ons-pagination__item--current{% endif %}">
-                <a href="{{ lastPage.url }}" class="ons-pagination__link" aria-label="Go to the last page (Page {{ totalPages }})">{{ totalPages }}</a>
-            </li>
-          {% endif %}
-          {% if totalPages > 1 and totalPages != currentPageIndex %}
-              <li class="ons-pagination__item ons-pagination__item--next">
-                  <a href="{{ params.pages[currentPageIndex].url }}" class="ons-pagination__link" rel="next" aria-label="Go to the next page (Page {{ currentPageIndex + 1 }})">{{ params.next }}</a>
-              </li>
-          {% endif %}
-      </ul>
-  </nav>
+    <nav class="ons-pagination {{ params.classes }}{% if params.hideRangeIndicator %} ons-pagination--no-indicator{% endif %}" aria-label="Pagination ({{ position }})">
+        <div class="ons-pagination__position">{{ position }}</div>
+        <ul class="ons-pagination__items">
+            {% if currentPageIndex != 1 %}
+                {% set prevPageIndex = currentPageIndex|int - 2 %}
+                <li class="ons-pagination__item ons-pagination__item--previous">
+                    <a href="{{ params.pages[prevPageIndex].url }}" class="ons-pagination__link" rel="prev" aria-label="Go to the previous page (Page {{ currentPageIndex|int - 1 }})">{{ params.previous }}</a>
+                </li>
+            {% endif %}
+            {% if currentPageIndex|int > 2 %}
+                <li class="ons-pagination__item{% if firstPage.current == true %} ons-pagination__item--current{% endif %}">
+                    <a href="{{ firstPage.url }}" class="ons-pagination__link" aria-label="Go to the first page (Page 1)">1</a>
+                </li>
+            {% endif %}
+            {% if currentPageIndex|int > 4 %}
+                <li class="ons-pagination__item ons-pagination__item--gap">&hellip;</li>
+            {% endif %}
+            {% for page in params.pages %}
+                {% set showPage = false %}
+                {# Show the current, next and previous page
+                Show page 2 if the current page index is within the first 4 pages
+                Show the penultimate page if the current page index is within the last 4 pages  #}
+                {% if (loop.index == currentPageIndex) or (loop.index == currentPageIndex|int + 1) or (loop.index == currentPageIndex|int - 1) or (loop.index == 2 and currentPageIndex|int <= 4) or ((loop.index == totalPages|int - 1) and (currentPageIndex|int > totalPages|int - 4)) %}
+                    {% set showPage = true %}
+                {% endif %}
+                {% if showPage == true %}
+                    <li class="ons-pagination__item{% if page.current == true %} ons-pagination__item--current{% endif %}">
+                        <a href="{{ page.url }}" class="ons-pagination__link"
+                            {%- if page.current -%}
+                                aria-current="true" aria-label="Current page ({{ position }})"
+                            {%- else -%}
+                                aria-label="Go to page {{ loop.index }}"
+                            {%- endif -%}
+                            {%- if loop.index == currentPageIndex|int - 1 -%}
+                                rel="prev"
+                            {%- endif -%}
+                            {%- if loop.index == currentPageIndex|int + 1 -%}
+                                rel="next"
+                            {%- endif -%}
+                        >{{ loop.index }}</a>
+                    </li>
+                {% endif %}
+            {% endfor %}
+            {% if currentPageIndex|int < totalPages|int - 3 %}
+                <li class="ons-pagination__item ons-pagination__item--gap">&hellip;</li>
+            {% endif %}
+            {% if currentPageIndex|int < totalPages|int - 1 %}
+                <li class="ons-pagination__item{% if lastPage.current == true %} ons-pagination__item--current{% endif %}">
+                    <a href="{{ lastPage.url }}" class="ons-pagination__link" aria-label="Go to the last page (Page {{ totalPages }})">{{ totalPages }}</a>
+                </li>
+            {% endif %}
+            {% if totalPages|int > 1 and totalPages != currentPageIndex %}
+                <li class="ons-pagination__item ons-pagination__item--next">
+                    <a href="{{ params.pages[currentPageIndex].url }}" class="ons-pagination__link" rel="next" aria-label="Go to the next page (Page {{ currentPageIndex|int + 1 }})">{{ params.next }}</a>
+                </li>
+            {% endif %}
+        </ul>
+    </nav>
 {% endmacro %}

From d85c52d996288f6d5a42fcdb91e54e4198929e93 Mon Sep 17 00:00:00 2001
From: Precious Onyenaucheya <precious.onyenaucheya@ons.gov.uk>
Date: Fri, 9 Jun 2023 10:40:37 +0100
Subject: [PATCH 03/18] refactor pagination

---
 src/components/pagination/_macro-options.md   |  8 +--
 src/components/pagination/_macro.njk          | 18 ++---
 .../pagination/example-pagination-first.njk   |  4 +-
 .../pagination/example-pagination-last.njk    |  4 +-
 ...ple-pagination-with-no-range-indicator.njk |  4 +-
 .../pagination/example-pagination.njk         | 72 +++++++++----------
 6 files changed, 53 insertions(+), 57 deletions(-)

diff --git a/src/components/pagination/_macro-options.md b/src/components/pagination/_macro-options.md
index 714ebd41a3..f7ef495dc3 100644
--- a/src/components/pagination/_macro-options.md
+++ b/src/components/pagination/_macro-options.md
@@ -5,10 +5,10 @@
 | next               | string        | true     | Text label for the “Next” link                                     |
 | classes            | string        | false    | Classes to add to the pagination HTML `nav` element                |
 | hideRangeIndicator | boolean       | false    | Set to “true” to hide the range indicator on viewports &geq; 740px |
+| currentPageNumber  | integer       | true     | Sets the current page number                                       |
 
 ## Page
 
-| Name    | Type    | Required | Description                                             |
-| ------- | ------- | -------- | ------------------------------------------------------- |
-| url     | string  | true     | The URL for the HTML `href` attribute for the page link |
-| current | boolean | false    | Set to “true” for the current loaded page link          |
+| Name | Type   | Required | Description                                             |
+| ---- | ------ | -------- | ------------------------------------------------------- |
+| url  | string | true     | The URL for the HTML `href` attribute for the page link |
diff --git a/src/components/pagination/_macro.njk b/src/components/pagination/_macro.njk
index 389f55de3b..f792624da1 100644
--- a/src/components/pagination/_macro.njk
+++ b/src/components/pagination/_macro.njk
@@ -1,15 +1,11 @@
 {% macro onsPagination(params) %}
-    {% set currentPageIndex = "" %}
-    {% for page in params.pages %}
-        {% if page.current %}
-            {% set currentPageIndex = loop.index %}
-        {% endif %}
-    {% endfor %}
-
+    {% set currentPageIndex = params.currentPageNumber %}
     {% set totalPages = params.pages | length %}
     {% set position = "Page " ~ currentPageIndex ~ " of " ~ totalPages %}
     {% set lastPage = params.pages | last %}
     {% set firstPage = params.pages | first %}
+    {% set prevPageIndex = currentPageIndex - 1 %}
+    {% set nextPageIndex = currentPageIndex + 1 %}
 
     <nav class="ons-pagination {{ params.classes }}{% if params.hideRangeIndicator %} ons-pagination--no-indicator{% endif %}" aria-label="Pagination ({{ position }})">
         <div class="ons-pagination__position">{{ position }}</div>
@@ -21,7 +17,7 @@
                 </li>
             {% endif %}
             {% if currentPageIndex|int > 2 %}
-                <li class="ons-pagination__item{% if firstPage.current == true %} ons-pagination__item--current{% endif %}">
+                <li class="ons-pagination__item{% if firstPage.url == params.pages[currentPageIndex-1].url %} ons-pagination__item--current{% endif %}">
                     <a href="{{ firstPage.url }}" class="ons-pagination__link" aria-label="Go to the first page (Page 1)">1</a>
                 </li>
             {% endif %}
@@ -37,9 +33,9 @@
                     {% set showPage = true %}
                 {% endif %}
                 {% if showPage == true %}
-                    <li class="ons-pagination__item{% if page.current == true %} ons-pagination__item--current{% endif %}">
+                    <li class="ons-pagination__item{% if page.url == params.pages[currentPageIndex-1].url %} ons-pagination__item--current{% endif %}">
                         <a href="{{ page.url }}" class="ons-pagination__link"
-                            {%- if page.current -%}
+                            {%- if page.url == params.pages[currentPageIndex-1].url -%}
                                 aria-current="true" aria-label="Current page ({{ position }})"
                             {%- else -%}
                                 aria-label="Go to page {{ loop.index }}"
@@ -58,7 +54,7 @@
                 <li class="ons-pagination__item ons-pagination__item--gap">&hellip;</li>
             {% endif %}
             {% if currentPageIndex|int < totalPages|int - 1 %}
-                <li class="ons-pagination__item{% if lastPage.current == true %} ons-pagination__item--current{% endif %}">
+                <li class="ons-pagination__item{% if lastPage.url == params.pages[currentPageIndex-1].url == true %} ons-pagination__item--current{% endif %}">
                     <a href="{{ lastPage.url }}" class="ons-pagination__link" aria-label="Go to the last page (Page {{ totalPages }})">{{ totalPages }}</a>
                 </li>
             {% endif %}
diff --git a/src/components/pagination/example-pagination-first.njk b/src/components/pagination/example-pagination-first.njk
index f3a1019f2b..750dd9a43e 100644
--- a/src/components/pagination/example-pagination-first.njk
+++ b/src/components/pagination/example-pagination-first.njk
@@ -5,10 +5,10 @@
         "previous": "Previous",
         "next": "Next",
         "hideRangeIndicator": true,
+        "currentPageNumber": 1,
         "pages": [
             {
-                "url": "#page1",
-                "current": true
+                "url": "#page1"
             },
             {
                 "url": "#page2"
diff --git a/src/components/pagination/example-pagination-last.njk b/src/components/pagination/example-pagination-last.njk
index 6d5671cd94..03e5b09d9f 100644
--- a/src/components/pagination/example-pagination-last.njk
+++ b/src/components/pagination/example-pagination-last.njk
@@ -5,6 +5,7 @@
         "previous": "Previous",
         "next": "Next",
         "hideRangeIndicator": true,
+        "currentPageNumber": 4,
         "pages": [
             {
                 "url": "#page1"
@@ -16,8 +17,7 @@
                 "url": "#page3"
             },
             {
-                "url": "#page4",
-                "current": true
+                "url": "#page4"
             }
         ]
     })
diff --git a/src/components/pagination/example-pagination-with-no-range-indicator.njk b/src/components/pagination/example-pagination-with-no-range-indicator.njk
index d2bae72926..e84c770a51 100644
--- a/src/components/pagination/example-pagination-with-no-range-indicator.njk
+++ b/src/components/pagination/example-pagination-with-no-range-indicator.njk
@@ -5,6 +5,7 @@
         "previous": "Previous",
         "next": "Next",
         "hideRangeIndicator": true,
+        "currentPageNumber": 5,
         "pages": [
             {
                 "url": "#page1"
@@ -19,8 +20,7 @@
                 "url": "#page4"
             },
             {
-                "url": "#page5",
-                "current": true
+                "url": "#page5"
             },
             {
                 "url": "#page6"
diff --git a/src/components/pagination/example-pagination.njk b/src/components/pagination/example-pagination.njk
index 1db700d605..3c40c4c743 100644
--- a/src/components/pagination/example-pagination.njk
+++ b/src/components/pagination/example-pagination.njk
@@ -4,112 +4,112 @@
     onsPagination({
         "previous": "Previous",
         "next": "Next",
+        "currentPageNumber": 5,
         "pages": [
             {
-                "url": "#0"
+                "url": "#1"
             },
             {
-                "url": "#0"
+                "url": "#2"
             },
             {
-                "url": "#0"
+                "url": "#3"
             },
             {
-                "url": "#0"
+                "url": "#4"
             },
             {
-                "url": "#0",
-                "current": true
+                "url": "#5"
             },
             {
-                "url": "#0"
+                "url": "#6"
             },
             {
-                "url": "#0"
+                "url": "#7"
             },
             {
-                "url": "#0"
+                "url": "#8"
             },
             {
-                "url": "#0"
+                "url": "#9"
             },
             {
-                "url": "#0"
+                "url": "#10"
             },
             {
-                "url": "#0"
+                "url": "#11"
             },
             {
-                "url": "#0"
+                "url": "#12"
             },
             {
-                "url": "#0"
+                "url": "#13"
             },
             {
-                "url": "#0"
+                "url": "#14"
             },
             {
-                "url": "#0"
+                "url": "#15"
             },
             {
-                "url": "#0"
+                "url": "#16"
             },
             {
-                "url": "#0"
+                "url": "#17"
             },
             {
-                "url": "#0"
+                "url": "#18"
             },
             {
-                "url": "#0"
+                "url": "#19"
             },
             {
-                "url": "#0"
+                "url": "#20"
             },
             {
-                "url": "#0"
+                "url": "#21"
             },
             {
-                "url": "#0"
+                "url": "#22"
             },
             {
-                "url": "#0"
+                "url": "#23"
             },
             {
-                "url": "#0"
+                "url": "#24"
             },
             {
-                "url": "#0"
+                "url": "#25"
             },
             {
-                "url": "#0"
+                "url": "#26"
             },
             {
-                "url": "#0"
+                "url": "#27"
             },
             {
-                "url": "#0"
+                "url": "#28"
             },
             {
-                "url": "#0"
+                "url": "#29"
             },
             {
-                "url": "#0"
+                "url": "#30"
             },
             {
-                "url": "#0"
+                "url": "#31"
             },
             {
-                "url": "#0"
+                "url": "#32"
             },
             {
-                "url": "#0"
+                "url": "#33"
             },
             {
-                "url": "#0"
+                "url": "#34"
             },
             {
-                "url": "#0"
+                "url": "#35"
             }
         ]
     })

From e1e067294ee766679351d0478b6f2aa57df370d5 Mon Sep 17 00:00:00 2001
From: Precious Onyenaucheya <precious.onyenaucheya@ons.gov.uk>
Date: Fri, 9 Jun 2023 10:59:21 +0100
Subject: [PATCH 04/18] fix failing tests

---
 src/components/pagination/_macro.spec.js | 34 +++++++++++++-----------
 1 file changed, 18 insertions(+), 16 deletions(-)

diff --git a/src/components/pagination/_macro.spec.js b/src/components/pagination/_macro.spec.js
index d25a462799..53aa7800e5 100644
--- a/src/components/pagination/_macro.spec.js
+++ b/src/components/pagination/_macro.spec.js
@@ -12,7 +12,8 @@ const PAGINATION_PREV_NEXT_LABELS = {
 
 const EXAMPLE_PAGINATION_MINIMAL = {
   ...PAGINATION_PREV_NEXT_LABELS,
-  pages: [{ url: '/page/1', current: true }],
+  currentPageNumber: 1,
+  pages: [{ url: '/page/1' }],
 };
 
 describe('macro: pagination', () => {
@@ -54,7 +55,8 @@ describe('macro: pagination', () => {
     const $ = cheerio.load(
       renderComponent('pagination', {
         ...PAGINATION_PREV_NEXT_LABELS,
-        pages: [{ url: '/page/1', current: true }],
+        currentPageNumber: 1,
+        pages: [{ url: '/page/1' }],
       }),
     );
 
@@ -85,7 +87,8 @@ describe('macro: pagination', () => {
     const $ = cheerio.load(
       renderComponent('pagination', {
         ...PAGINATION_PREV_NEXT_LABELS,
-        pages: [{ url: '/page/1', current: true }, { url: '/page/2' }],
+        currentPageNumber: 1,
+        pages: [{ url: '/page/1' }, { url: '/page/2' }],
       }),
     );
 
@@ -118,7 +121,8 @@ describe('macro: pagination', () => {
     const $ = cheerio.load(
       renderComponent('pagination', {
         ...PAGINATION_PREV_NEXT_LABELS,
-        pages: [{ url: '/page/1' }, { url: '/page/2', current: true }],
+        currentPageNumber: 2,
+        pages: [{ url: '/page/1' }, { url: '/page/2' }],
       }),
     );
 
@@ -151,7 +155,8 @@ describe('macro: pagination', () => {
     const $ = cheerio.load(
       renderComponent('pagination', {
         ...PAGINATION_PREV_NEXT_LABELS,
-        pages: [{ url: '/page/1' }, { url: '/page/2', current: true }, { url: '/page/3' }],
+        currentPageNumber: 2,
+        pages: [{ url: '/page/1' }, { url: '/page/2' }, { url: '/page/3' }],
       }),
     );
 
@@ -186,7 +191,8 @@ describe('macro: pagination', () => {
     const $ = cheerio.load(
       renderComponent('pagination', {
         ...PAGINATION_PREV_NEXT_LABELS,
-        pages: [{ url: '/page/1' }, { url: '/page/2', current: true }, { url: '/page/3' }, { url: '/page/4' }, { url: '/page/5' }],
+        currentPageNumber: 2,
+        pages: [{ url: '/page/1' }, { url: '/page/2' }, { url: '/page/3' }, { url: '/page/4' }, { url: '/page/5' }],
       }),
     );
 
@@ -223,14 +229,8 @@ describe('macro: pagination', () => {
     const $ = cheerio.load(
       renderComponent('pagination', {
         ...PAGINATION_PREV_NEXT_LABELS,
-        pages: [
-          { url: '/page/1' },
-          { url: '/page/2', current: true },
-          { url: '/page/3' },
-          { url: '/page/4' },
-          { url: '/page/5' },
-          { url: '/page/6' },
-        ],
+        currentPageNumber: 2,
+        pages: [{ url: '/page/1' }, { url: '/page/2' }, { url: '/page/3' }, { url: '/page/4' }, { url: '/page/5' }, { url: '/page/6' }],
       }),
     );
 
@@ -267,12 +267,13 @@ describe('macro: pagination', () => {
     const $ = cheerio.load(
       renderComponent('pagination', {
         ...PAGINATION_PREV_NEXT_LABELS,
+        currentPageNumber: 5,
         pages: [
           { url: '/page/1' },
           { url: '/page/2' },
           { url: '/page/3' },
           { url: '/page/4' },
-          { url: '/page/5', current: true },
+          { url: '/page/5' },
           { url: '/page/6' },
           { url: '/page/7' },
           { url: '/page/8' },
@@ -318,6 +319,7 @@ describe('macro: pagination', () => {
     const $ = cheerio.load(
       renderComponent('pagination', {
         ...PAGINATION_PREV_NEXT_LABELS,
+        currentPageNumber: 10,
         pages: [
           { url: '/page/1' },
           { url: '/page/2' },
@@ -328,7 +330,7 @@ describe('macro: pagination', () => {
           { url: '/page/7' },
           { url: '/page/8' },
           { url: '/page/9' },
-          { url: '/page/10', current: true },
+          { url: '/page/10' },
           { url: '/page/11' },
         ],
       }),

From 4a6bfcbbc09cc1debffc3edf8ebe88d350d471ec Mon Sep 17 00:00:00 2001
From: Precious Onyenaucheya <precious.onyenaucheya@ons.gov.uk>
Date: Fri, 9 Jun 2023 12:58:55 +0100
Subject: [PATCH 05/18] fix failing tests

---
 src/patterns/news/example-category.njk | 44 ++++++++--------
 src/patterns/news/example-landing.njk  | 72 +++++++++++++-------------
 2 files changed, 58 insertions(+), 58 deletions(-)

diff --git a/src/patterns/news/example-category.njk b/src/patterns/news/example-category.njk
index 36dcec6af3..b75585b7f4 100644
--- a/src/patterns/news/example-category.njk
+++ b/src/patterns/news/example-category.njk
@@ -140,70 +140,70 @@ layout: ~
                 onsPagination({
                     "previous": "Previous",
                     "next": "Next",
+                    "currentPageNumber": 1,
                     "pages": [
                         {
-                            "url": "#0",
-                            "current": true
+                            "url": "#1"
                         },
                         {
-                            "url": "#0"
+                            "url": "#2"
                         },
                         {
-                            "url": "#0"
+                            "url": "#3"
                         },
                         {
-                            "url": "#0"
+                            "url": "#4"
                         },
                         {
-                            "url": "#0"
+                            "url": "#5"
                         },
                         {
-                            "url": "#0"
+                            "url": "#6"
                         },
                         {
-                            "url": "#0"
+                            "url": "#7"
                         },
                         {
-                            "url": "#0"
+                            "url": "#8"
                         },
                         {
-                            "url": "#0"
+                            "url": "#9"
                         },
                         {
-                            "url": "#0"
+                            "url": "#10"
                         },
                         {
-                            "url": "#0"
+                            "url": "#11"
                         },
                         {
-                            "url": "#0"
+                            "url": "#12"
                         },
                         {
-                            "url": "#0"
+                            "url": "#13"
                         },
                         {
-                            "url": "#0"
+                            "url": "#14"
                         },
                         {
-                            "url": "#0"
+                            "url": "#15"
                         },
                         {
-                            "url": "#0"
+                            "url": "#16"
                         },
                         {
-                            "url": "#0"
+                            "url": "#17"
                         },
                         {
-                            "url": "#0"
+                            "url": "#18"
                         },
                         {
-                            "url": "#0"
+                            "url": "#19"
                         },
                         {
-                            "url": "#0"
+                            "url": "#20"
                         },
                         {
-                            "url": "#0"
+                            "url": "#21"
                         }
                     ]
                 })
diff --git a/src/patterns/news/example-landing.njk b/src/patterns/news/example-landing.njk
index c63eb43f24..e4beabedbf 100644
--- a/src/patterns/news/example-landing.njk
+++ b/src/patterns/news/example-landing.njk
@@ -164,112 +164,112 @@ layout: ~
                     onsPagination({
                         "previous": "Previous",
                         "next": "Next",
+                        "currentPageNumber": 1,
                         "pages": [
                             {
-                                "url": "#0",
-                                "current": true
+                                "url": "#1"
                             },
                             {
-                                "url": "#0"
+                                "url": "#2"
                             },
                             {
-                                "url": "#0"
+                                "url": "#3"
                             },
                             {
-                                "url": "#0"
+                                "url": "#4"
                             },
                             {
-                                "url": "#0"
+                                "url": "#5"
                             },
                             {
-                                "url": "#0"
+                                "url": "#6"
                             },
                             {
-                                "url": "#0"
+                                "url": "#7"
                             },
                             {
-                                "url": "#0"
+                                "url": "#8"
                             },
                             {
-                                "url": "#0"
+                                "url": "#9"
                             },
                             {
-                                "url": "#0"
+                                "url": "#10"
                             },
                             {
-                                "url": "#0"
+                                "url": "#11"
                             },
                             {
-                                "url": "#0"
+                                "url": "#12"
                             },
                             {
-                                "url": "#0"
+                                "url": "#13"
                             },
                             {
-                                "url": "#0"
+                                "url": "#14"
                             },
                             {
-                                "url": "#0"
+                                "url": "#15"
                             },
                             {
-                                "url": "#0"
+                                "url": "#16"
                             },
                             {
-                                "url": "#0"
+                                "url": "#17"
                             },
                             {
-                                "url": "#0"
+                                "url": "#18"
                             },
                             {
-                                "url": "#0"
+                                "url": "#19"
                             },
                             {
-                                "url": "#0"
+                                "url": "#20"
                             },
                             {
-                                "url": "#0"
+                                "url": "#21"
                             },
                             {
-                                "url": "#0"
+                                "url": "#22"
                             },
                             {
-                                "url": "#0"
+                                "url": "#23"
                             },
                             {
-                                "url": "#0"
+                                "url": "#24"
                             },
                             {
-                                "url": "#0"
+                                "url": "#25"
                             },
                             {
-                                "url": "#0"
+                                "url": "#26"
                             },
                             {
-                                "url": "#0"
+                                "url": "#27"
                             },
                             {
-                                "url": "#0"
+                                "url": "#28"
                             },
                             {
-                                "url": "#0"
+                                "url": "#29"
                             },
                             {
-                                "url": "#0"
+                                "url": "#30"
                             },
                             {
-                                "url": "#0"
+                                "url": "#31"
                             },
                             {
-                                "url": "#0"
+                                "url": "#32"
                             },
                             {
-                                "url": "#0"
+                                "url": "#33"
                             },
                             {
-                                "url": "#0"
+                                "url": "#34"
                             },
                             {
-                                "url": "#0"
+                                "url": "#35"
                             }
                         ]
                     })

From da1de9a57bef516056625654446b1acc5076ea29 Mon Sep 17 00:00:00 2001
From: Precious Onyenaucheya <precious.onyenaucheya@ons.gov.uk>
Date: Fri, 9 Jun 2023 14:05:20 +0100
Subject: [PATCH 06/18] rename component

---
 config/components.json                        |  2 +-
 .../_images.scss => image/_image.scss}        |  0
 .../{images => image}/_macro-options.md       |  0
 src/components/{images => image}/_macro.njk   |  0
 .../{images => image}/_macro.spec.js          | 26 +++++++++----------
 .../example-images-for-regular-screens.njk    |  2 +-
 .../example-images-for-retina-screens.njk     |  2 +-
 src/patterns/news/example-article.njk         |  2 +-
 src/scss/main.scss                            |  2 +-
 9 files changed, 18 insertions(+), 18 deletions(-)
 rename src/components/{images/_images.scss => image/_image.scss} (100%)
 rename src/components/{images => image}/_macro-options.md (100%)
 rename src/components/{images => image}/_macro.njk (100%)
 rename src/components/{images => image}/_macro.spec.js (76%)
 rename src/components/{images => image}/example-images-for-regular-screens.njk (79%)
 rename src/components/{images => image}/example-images-for-retina-screens.njk (82%)

diff --git a/config/components.json b/config/components.json
index 18b2961ac0..0018b27912 100644
--- a/config/components.json
+++ b/config/components.json
@@ -12,7 +12,7 @@
   "icons": {
     "macroName": "onsIcon"
   },
-  "images": {
+  "image": {
     "macroName": "onsImage"
   },
   "lists": {
diff --git a/src/components/images/_images.scss b/src/components/image/_image.scss
similarity index 100%
rename from src/components/images/_images.scss
rename to src/components/image/_image.scss
diff --git a/src/components/images/_macro-options.md b/src/components/image/_macro-options.md
similarity index 100%
rename from src/components/images/_macro-options.md
rename to src/components/image/_macro-options.md
diff --git a/src/components/images/_macro.njk b/src/components/image/_macro.njk
similarity index 100%
rename from src/components/images/_macro.njk
rename to src/components/image/_macro.njk
diff --git a/src/components/images/_macro.spec.js b/src/components/image/_macro.spec.js
similarity index 76%
rename from src/components/images/_macro.spec.js
rename to src/components/image/_macro.spec.js
index 091c40c9f3..6bf0cc63b4 100644
--- a/src/components/images/_macro.spec.js
+++ b/src/components/image/_macro.spec.js
@@ -16,16 +16,16 @@ const EXAMPLE_IMAGE_IMAGE_MINIMAL = {
   },
 };
 
-describe('macro: images', () => {
+describe('macro: image', () => {
   it('outputs a `figure` element', () => {
-    const $ = cheerio.load(renderComponent('images', EXAMPLE_IMAGE_URL_MINIMAL));
+    const $ = cheerio.load(renderComponent('image', EXAMPLE_IMAGE_URL_MINIMAL));
 
     expect($('.ons-figure')[0].tagName).toBe('figure');
   });
 
   it('outputs a `figurecaption` element when `caption` is provided', () => {
     const $ = cheerio.load(
-      renderComponent('images', {
+      renderComponent('image', {
         ...EXAMPLE_IMAGE_URL_MINIMAL,
         caption: 'Example image caption',
       }),
@@ -36,7 +36,7 @@ describe('macro: images', () => {
 
   it('outputs a `figurecaption` element with provided `caption` text', () => {
     const $ = cheerio.load(
-      renderComponent('images', {
+      renderComponent('image', {
         ...EXAMPLE_IMAGE_URL_MINIMAL,
         caption: 'Example image caption',
       }),
@@ -51,27 +51,27 @@ describe('macro: images', () => {
 
   describe('mode: url', () => {
     it('passes jest-axe checks', async () => {
-      const $ = cheerio.load(renderComponent('images', EXAMPLE_IMAGE_URL_MINIMAL));
+      const $ = cheerio.load(renderComponent('image', EXAMPLE_IMAGE_URL_MINIMAL));
 
       const results = await axe($.html());
       expect(results).toHaveNoViolations();
     });
 
     it('outputs an `img` element', () => {
-      const $ = cheerio.load(renderComponent('images', EXAMPLE_IMAGE_URL_MINIMAL));
+      const $ = cheerio.load(renderComponent('image', EXAMPLE_IMAGE_URL_MINIMAL));
 
       expect($('.ons-figure__image')[0].tagName).toBe('img');
     });
 
     it('outputs an `img` element with the expected `src`', () => {
-      const $ = cheerio.load(renderComponent('images', EXAMPLE_IMAGE_URL_MINIMAL));
+      const $ = cheerio.load(renderComponent('image', EXAMPLE_IMAGE_URL_MINIMAL));
 
       expect($('.ons-figure__image').attr('src')).toBe('example.png');
     });
 
     it('outputs an `img` element with the expected alt text', () => {
       const $ = cheerio.load(
-        renderComponent('images', {
+        renderComponent('image', {
           ...EXAMPLE_IMAGE_URL_MINIMAL,
           alt: 'Example alt text',
         }),
@@ -83,33 +83,33 @@ describe('macro: images', () => {
 
   describe('mode: image', () => {
     it('passes jest-axe checks', async () => {
-      const $ = cheerio.load(renderComponent('images', EXAMPLE_IMAGE_IMAGE_MINIMAL));
+      const $ = cheerio.load(renderComponent('image', EXAMPLE_IMAGE_IMAGE_MINIMAL));
 
       const results = await axe($.html());
       expect(results).toHaveNoViolations();
     });
 
     it('outputs an `img` element', () => {
-      const $ = cheerio.load(renderComponent('images', EXAMPLE_IMAGE_IMAGE_MINIMAL));
+      const $ = cheerio.load(renderComponent('image', EXAMPLE_IMAGE_IMAGE_MINIMAL));
 
       expect($('.ons-figure__image')[0].tagName).toBe('img');
     });
 
     it('outputs an `img` element with the expected `srcset`', () => {
-      const $ = cheerio.load(renderComponent('images', EXAMPLE_IMAGE_IMAGE_MINIMAL));
+      const $ = cheerio.load(renderComponent('image', EXAMPLE_IMAGE_IMAGE_MINIMAL));
 
       expect($('.ons-figure__image').attr('srcset')).toBe('example-small.png 1x, example-large.png 2x');
     });
 
     it('outputs an `img` element with the expected `src`', () => {
-      const $ = cheerio.load(renderComponent('images', EXAMPLE_IMAGE_IMAGE_MINIMAL));
+      const $ = cheerio.load(renderComponent('image', EXAMPLE_IMAGE_IMAGE_MINIMAL));
 
       expect($('.ons-figure__image').attr('src')).toBe('example-small.png');
     });
 
     it('outputs an `img` element with the expected alt text', () => {
       const $ = cheerio.load(
-        renderComponent('images', {
+        renderComponent('image', {
           ...EXAMPLE_IMAGE_IMAGE_MINIMAL,
           alt: 'Example alt text',
         }),
diff --git a/src/components/images/example-images-for-regular-screens.njk b/src/components/image/example-images-for-regular-screens.njk
similarity index 79%
rename from src/components/images/example-images-for-regular-screens.njk
rename to src/components/image/example-images-for-regular-screens.njk
index a8831c3fd1..3fc8484b45 100644
--- a/src/components/images/example-images-for-regular-screens.njk
+++ b/src/components/image/example-images-for-regular-screens.njk
@@ -1,4 +1,4 @@
-{% from "components/images/_macro.njk" import onsImage %}
+{% from "components/image/_macro.njk" import onsImage %}
 {{
     onsImage({
         "url": '/img/small/woman-in-purple-dress-shirt.jpg',
diff --git a/src/components/images/example-images-for-retina-screens.njk b/src/components/image/example-images-for-retina-screens.njk
similarity index 82%
rename from src/components/images/example-images-for-retina-screens.njk
rename to src/components/image/example-images-for-retina-screens.njk
index eab29f8ae5..ef4d6e3943 100644
--- a/src/components/images/example-images-for-retina-screens.njk
+++ b/src/components/image/example-images-for-retina-screens.njk
@@ -1,4 +1,4 @@
-{% from "components/images/_macro.njk" import onsImage %}
+{% from "components/image/_macro.njk" import onsImage %}
 {{
     onsImage({
         "image": {
diff --git a/src/patterns/news/example-article.njk b/src/patterns/news/example-article.njk
index 3a25f3f2ee..cee31d1ab9 100644
--- a/src/patterns/news/example-article.njk
+++ b/src/patterns/news/example-article.njk
@@ -4,7 +4,7 @@ layout: ~
 ---
 {% extends "layout/_template.njk" %}
 {% from "components/lists/_macro.njk" import onsList %}
-{% from "components/images/_macro.njk" import onsImage %}
+{% from "components/image/_macro.njk" import onsImage %}
 {% from "components/related-content/_macro.njk" import onsRelatedContent %}
 {% from "components/share-page/_macro.njk" import onsSharePage %}
 {% from "components/content-pagination/_macro.njk" import onsContentPagination %}
diff --git a/src/scss/main.scss b/src/scss/main.scss
index c81c27584b..bd70dbf770 100644
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@@ -27,7 +27,7 @@
 @import '../components/header/header';
 @import '../components/hero/hero';
 @import '../components/icons/icons';
-@import '../components/images/images';
+@import '../components/image/image';
 @import '../components/input/input-type';
 @import '../components/input/input';
 @import '../components/label/label';

From 3fcdd7467b1a118dc24a7b5c445b54d6eff7b4a1 Mon Sep 17 00:00:00 2001
From: Precious Onyenaucheya <precious.onyenaucheya@ons.gov.uk>
Date: Fri, 9 Jun 2023 14:56:35 +0100
Subject: [PATCH 07/18] approve visual test

---
 .../image/example-images-for-regular-screens.njk       |  8 --------
 .../image/example-images-for-retina-screens.njk        | 10 ----------
 2 files changed, 18 deletions(-)
 delete mode 100644 src/components/image/example-images-for-regular-screens.njk
 delete mode 100644 src/components/image/example-images-for-retina-screens.njk

diff --git a/src/components/image/example-images-for-regular-screens.njk b/src/components/image/example-images-for-regular-screens.njk
deleted file mode 100644
index 3fc8484b45..0000000000
--- a/src/components/image/example-images-for-regular-screens.njk
+++ /dev/null
@@ -1,8 +0,0 @@
-{% from "components/image/_macro.njk" import onsImage %}
-{{
-    onsImage({
-        "url": '/img/small/woman-in-purple-dress-shirt.jpg',
-        "alt": 'Woman in a purple dress shirt using a laptop',
-        "caption": 'Image 1 - Woman in a purple dress shirt using a laptop'
-    })
-}}
diff --git a/src/components/image/example-images-for-retina-screens.njk b/src/components/image/example-images-for-retina-screens.njk
deleted file mode 100644
index ef4d6e3943..0000000000
--- a/src/components/image/example-images-for-retina-screens.njk
+++ /dev/null
@@ -1,10 +0,0 @@
-{% from "components/image/_macro.njk" import onsImage %}
-{{
-    onsImage({
-        "image": {
-            "smallSrc": '/img/small/woman-in-purple-dress-shirt.jpg',
-            "largeSrc": '/img/large/woman-in-purple-dress-shirt.jpg'
-        },
-        "caption": 'Image 1 - Woman in a purple dress shirt using a laptop'
-    })
-}}

From 7bd6b6e4faeeb12071c9d147e0b2f2d06faca352 Mon Sep 17 00:00:00 2001
From: Precious Onyenaucheya <precious.onyenaucheya@ons.gov.uk>
Date: Fri, 9 Jun 2023 15:01:00 +0100
Subject: [PATCH 08/18] approve visual test

---
 ...-image-for-regular-screens_0_document_0_desktop.png |  3 +++
 ...e-image-for-regular-screens_0_document_1_tablet.png |  3 +++
 ...e-image-for-regular-screens_0_document_2_mobile.png |  3 +++
 ...e-image-for-retina-screens_0_document_0_desktop.png |  3 +++
 ...le-image-for-retina-screens_0_document_1_tablet.png |  3 +++
 ...le-image-for-retina-screens_0_document_2_mobile.png |  3 +++
 ...images-for-regular-screens_0_document_0_desktop.png |  3 +++
 ...-images-for-regular-screens_0_document_1_tablet.png |  3 +++
 ...-images-for-regular-screens_0_document_2_mobile.png |  3 +++
 ...-images-for-retina-screens_0_document_0_desktop.png |  3 +++
 ...e-images-for-retina-screens_0_document_1_tablet.png |  3 +++
 ...e-images-for-retina-screens_0_document_2_mobile.png |  3 +++
 .../image/example-image-for-regular-screens.njk        |  8 ++++++++
 .../image/example-image-for-retina-screens.njk         | 10 ++++++++++
 14 files changed, 54 insertions(+)
 create mode 100644 backstop_data/bitmaps_reference/ds-vr-test__components_image_example-image-for-regular-screens_0_document_0_desktop.png
 create mode 100644 backstop_data/bitmaps_reference/ds-vr-test__components_image_example-image-for-regular-screens_0_document_1_tablet.png
 create mode 100644 backstop_data/bitmaps_reference/ds-vr-test__components_image_example-image-for-regular-screens_0_document_2_mobile.png
 create mode 100644 backstop_data/bitmaps_reference/ds-vr-test__components_image_example-image-for-retina-screens_0_document_0_desktop.png
 create mode 100644 backstop_data/bitmaps_reference/ds-vr-test__components_image_example-image-for-retina-screens_0_document_1_tablet.png
 create mode 100644 backstop_data/bitmaps_reference/ds-vr-test__components_image_example-image-for-retina-screens_0_document_2_mobile.png
 create mode 100644 backstop_data/bitmaps_reference/ds-vr-test__components_image_example-images-for-regular-screens_0_document_0_desktop.png
 create mode 100644 backstop_data/bitmaps_reference/ds-vr-test__components_image_example-images-for-regular-screens_0_document_1_tablet.png
 create mode 100644 backstop_data/bitmaps_reference/ds-vr-test__components_image_example-images-for-regular-screens_0_document_2_mobile.png
 create mode 100644 backstop_data/bitmaps_reference/ds-vr-test__components_image_example-images-for-retina-screens_0_document_0_desktop.png
 create mode 100644 backstop_data/bitmaps_reference/ds-vr-test__components_image_example-images-for-retina-screens_0_document_1_tablet.png
 create mode 100644 backstop_data/bitmaps_reference/ds-vr-test__components_image_example-images-for-retina-screens_0_document_2_mobile.png
 create mode 100644 src/components/image/example-image-for-regular-screens.njk
 create mode 100644 src/components/image/example-image-for-retina-screens.njk

diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_image_example-image-for-regular-screens_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_image_example-image-for-regular-screens_0_document_0_desktop.png
new file mode 100644
index 0000000000..a06a16cf9f
--- /dev/null
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_image_example-image-for-regular-screens_0_document_0_desktop.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9b4e537c199381dbfb2e84fcd1b35362a86078e488345da76b9a866c1348250b
+size 436423
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_image_example-image-for-regular-screens_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_image_example-image-for-regular-screens_0_document_1_tablet.png
new file mode 100644
index 0000000000..3b3837611d
--- /dev/null
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_image_example-image-for-regular-screens_0_document_1_tablet.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:82188b2f7f7fcbc06ca8d274937c95c578b04a4ddf7071aeb575a3e4dd571a13
+size 417139
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_image_example-image-for-regular-screens_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_image_example-image-for-regular-screens_0_document_2_mobile.png
new file mode 100644
index 0000000000..7b7fd06457
--- /dev/null
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_image_example-image-for-regular-screens_0_document_2_mobile.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:33af11d0ab2ba81871775f21aed3d9d5692d5a9ed526b54f4cc401b2acbede09
+size 139714
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_image_example-image-for-retina-screens_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_image_example-image-for-retina-screens_0_document_0_desktop.png
new file mode 100644
index 0000000000..a06a16cf9f
--- /dev/null
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_image_example-image-for-retina-screens_0_document_0_desktop.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9b4e537c199381dbfb2e84fcd1b35362a86078e488345da76b9a866c1348250b
+size 436423
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_image_example-image-for-retina-screens_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_image_example-image-for-retina-screens_0_document_1_tablet.png
new file mode 100644
index 0000000000..3b3837611d
--- /dev/null
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_image_example-image-for-retina-screens_0_document_1_tablet.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:82188b2f7f7fcbc06ca8d274937c95c578b04a4ddf7071aeb575a3e4dd571a13
+size 417139
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_image_example-image-for-retina-screens_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_image_example-image-for-retina-screens_0_document_2_mobile.png
new file mode 100644
index 0000000000..7b7fd06457
--- /dev/null
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_image_example-image-for-retina-screens_0_document_2_mobile.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:33af11d0ab2ba81871775f21aed3d9d5692d5a9ed526b54f4cc401b2acbede09
+size 139714
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_image_example-images-for-regular-screens_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_image_example-images-for-regular-screens_0_document_0_desktop.png
new file mode 100644
index 0000000000..a06a16cf9f
--- /dev/null
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_image_example-images-for-regular-screens_0_document_0_desktop.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9b4e537c199381dbfb2e84fcd1b35362a86078e488345da76b9a866c1348250b
+size 436423
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_image_example-images-for-regular-screens_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_image_example-images-for-regular-screens_0_document_1_tablet.png
new file mode 100644
index 0000000000..3b3837611d
--- /dev/null
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_image_example-images-for-regular-screens_0_document_1_tablet.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:82188b2f7f7fcbc06ca8d274937c95c578b04a4ddf7071aeb575a3e4dd571a13
+size 417139
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_image_example-images-for-regular-screens_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_image_example-images-for-regular-screens_0_document_2_mobile.png
new file mode 100644
index 0000000000..7b7fd06457
--- /dev/null
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_image_example-images-for-regular-screens_0_document_2_mobile.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:33af11d0ab2ba81871775f21aed3d9d5692d5a9ed526b54f4cc401b2acbede09
+size 139714
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_image_example-images-for-retina-screens_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_image_example-images-for-retina-screens_0_document_0_desktop.png
new file mode 100644
index 0000000000..a06a16cf9f
--- /dev/null
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_image_example-images-for-retina-screens_0_document_0_desktop.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9b4e537c199381dbfb2e84fcd1b35362a86078e488345da76b9a866c1348250b
+size 436423
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_image_example-images-for-retina-screens_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_image_example-images-for-retina-screens_0_document_1_tablet.png
new file mode 100644
index 0000000000..3b3837611d
--- /dev/null
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_image_example-images-for-retina-screens_0_document_1_tablet.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:82188b2f7f7fcbc06ca8d274937c95c578b04a4ddf7071aeb575a3e4dd571a13
+size 417139
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_image_example-images-for-retina-screens_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_image_example-images-for-retina-screens_0_document_2_mobile.png
new file mode 100644
index 0000000000..7b7fd06457
--- /dev/null
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_image_example-images-for-retina-screens_0_document_2_mobile.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:33af11d0ab2ba81871775f21aed3d9d5692d5a9ed526b54f4cc401b2acbede09
+size 139714
diff --git a/src/components/image/example-image-for-regular-screens.njk b/src/components/image/example-image-for-regular-screens.njk
new file mode 100644
index 0000000000..3fc8484b45
--- /dev/null
+++ b/src/components/image/example-image-for-regular-screens.njk
@@ -0,0 +1,8 @@
+{% from "components/image/_macro.njk" import onsImage %}
+{{
+    onsImage({
+        "url": '/img/small/woman-in-purple-dress-shirt.jpg',
+        "alt": 'Woman in a purple dress shirt using a laptop',
+        "caption": 'Image 1 - Woman in a purple dress shirt using a laptop'
+    })
+}}
diff --git a/src/components/image/example-image-for-retina-screens.njk b/src/components/image/example-image-for-retina-screens.njk
new file mode 100644
index 0000000000..ef4d6e3943
--- /dev/null
+++ b/src/components/image/example-image-for-retina-screens.njk
@@ -0,0 +1,10 @@
+{% from "components/image/_macro.njk" import onsImage %}
+{{
+    onsImage({
+        "image": {
+            "smallSrc": '/img/small/woman-in-purple-dress-shirt.jpg',
+            "largeSrc": '/img/large/woman-in-purple-dress-shirt.jpg'
+        },
+        "caption": 'Image 1 - Woman in a purple dress shirt using a laptop'
+    })
+}}

From 0538fa3212f6c544c46b5b948c491263c7281c93 Mon Sep 17 00:00:00 2001
From: Precious Onyenaucheya <precious.onyenaucheya@ons.gov.uk>
Date: Mon, 12 Jun 2023 08:43:07 +0100
Subject: [PATCH 09/18] fix PR comment

---
 src/components/pagination/_macro.njk | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/components/pagination/_macro.njk b/src/components/pagination/_macro.njk
index f792624da1..0504680835 100644
--- a/src/components/pagination/_macro.njk
+++ b/src/components/pagination/_macro.njk
@@ -1,6 +1,6 @@
 {% macro onsPagination(params) %}
-    {% set currentPageIndex = params.currentPageNumber %}
-    {% set totalPages = params.pages | length %}
+    {% set currentPageIndex = params.currentPageNumber|int %}
+    {% set totalPages = params.pages | length|int %}
     {% set position = "Page " ~ currentPageIndex ~ " of " ~ totalPages %}
     {% set lastPage = params.pages | last %}
     {% set firstPage = params.pages | first %}
@@ -11,17 +11,17 @@
         <div class="ons-pagination__position">{{ position }}</div>
         <ul class="ons-pagination__items">
             {% if currentPageIndex != 1 %}
-                {% set prevPageIndex = currentPageIndex|int - 2 %}
+                {% set prevPageIndex = currentPageIndex - 2 %}
                 <li class="ons-pagination__item ons-pagination__item--previous">
-                    <a href="{{ params.pages[prevPageIndex].url }}" class="ons-pagination__link" rel="prev" aria-label="Go to the previous page (Page {{ currentPageIndex|int - 1 }})">{{ params.previous }}</a>
+                    <a href="{{ params.pages[prevPageIndex].url }}" class="ons-pagination__link" rel="prev" aria-label="Go to the previous page (Page {{ currentPageIndex - 1 }})">{{ params.previous }}</a>
                 </li>
             {% endif %}
-            {% if currentPageIndex|int > 2 %}
+            {% if currentPageIndex > 2 %}
                 <li class="ons-pagination__item{% if firstPage.url == params.pages[currentPageIndex-1].url %} ons-pagination__item--current{% endif %}">
                     <a href="{{ firstPage.url }}" class="ons-pagination__link" aria-label="Go to the first page (Page 1)">1</a>
                 </li>
             {% endif %}
-            {% if currentPageIndex|int > 4 %}
+            {% if currentPageIndex > 4 %}
                 <li class="ons-pagination__item ons-pagination__item--gap">&hellip;</li>
             {% endif %}
             {% for page in params.pages %}
@@ -29,7 +29,7 @@
                 {# Show the current, next and previous page
                 Show page 2 if the current page index is within the first 4 pages
                 Show the penultimate page if the current page index is within the last 4 pages  #}
-                {% if (loop.index == currentPageIndex) or (loop.index == currentPageIndex|int + 1) or (loop.index == currentPageIndex|int - 1) or (loop.index == 2 and currentPageIndex|int <= 4) or ((loop.index == totalPages|int - 1) and (currentPageIndex|int > totalPages|int - 4)) %}
+                {% if (loop.index == currentPageIndex) or (loop.index == currentPageIndex + 1) or (loop.index == currentPageIndex - 1) or (loop.index == 2 and currentPageIndex <= 4) or ((loop.index == totalPages - 1) and (currentPageIndex > totalPages - 4)) %}
                     {% set showPage = true %}
                 {% endif %}
                 {% if showPage == true %}
@@ -40,27 +40,27 @@
                             {%- else -%}
                                 aria-label="Go to page {{ loop.index }}"
                             {%- endif -%}
-                            {%- if loop.index == currentPageIndex|int - 1 -%}
+                            {%- if loop.index == currentPageIndex - 1 -%}
                                 rel="prev"
                             {%- endif -%}
-                            {%- if loop.index == currentPageIndex|int + 1 -%}
+                            {%- if loop.index == currentPageIndex + 1 -%}
                                 rel="next"
                             {%- endif -%}
                         >{{ loop.index }}</a>
                     </li>
                 {% endif %}
             {% endfor %}
-            {% if currentPageIndex|int < totalPages|int - 3 %}
+            {% if currentPageIndex < totalPages - 3 %}
                 <li class="ons-pagination__item ons-pagination__item--gap">&hellip;</li>
             {% endif %}
-            {% if currentPageIndex|int < totalPages|int - 1 %}
+            {% if currentPageIndex < totalPages - 1 %}
                 <li class="ons-pagination__item{% if lastPage.url == params.pages[currentPageIndex-1].url == true %} ons-pagination__item--current{% endif %}">
                     <a href="{{ lastPage.url }}" class="ons-pagination__link" aria-label="Go to the last page (Page {{ totalPages }})">{{ totalPages }}</a>
                 </li>
             {% endif %}
-            {% if totalPages|int > 1 and totalPages != currentPageIndex %}
+            {% if totalPages > 1 and totalPages != currentPageIndex %}
                 <li class="ons-pagination__item ons-pagination__item--next">
-                    <a href="{{ params.pages[currentPageIndex].url }}" class="ons-pagination__link" rel="next" aria-label="Go to the next page (Page {{ currentPageIndex|int + 1 }})">{{ params.next }}</a>
+                    <a href="{{ params.pages[currentPageIndex].url }}" class="ons-pagination__link" rel="next" aria-label="Go to the next page (Page {{ currentPageIndex + 1 }})">{{ params.next }}</a>
                 </li>
             {% endif %}
         </ul>

From 0aef567f01744a8c561be493cc2522d8301fc428 Mon Sep 17 00:00:00 2001
From: Precious Onyenaucheya <precious.onyenaucheya@ons.gov.uk>
Date: Mon, 12 Jun 2023 10:59:29 +0100
Subject: [PATCH 10/18] revert examples url to previous state

---
 src/components/pagination/_macro.njk          |  8 +--
 .../pagination/example-pagination-first.njk   |  8 +--
 .../pagination/example-pagination-last.njk    |  8 +--
 ...ple-pagination-with-no-range-indicator.njk | 20 +++---
 .../pagination/example-pagination.njk         | 70 +++++++++----------
 5 files changed, 57 insertions(+), 57 deletions(-)

diff --git a/src/components/pagination/_macro.njk b/src/components/pagination/_macro.njk
index 0504680835..1edf6057b9 100644
--- a/src/components/pagination/_macro.njk
+++ b/src/components/pagination/_macro.njk
@@ -17,7 +17,7 @@
                 </li>
             {% endif %}
             {% if currentPageIndex > 2 %}
-                <li class="ons-pagination__item{% if firstPage.url == params.pages[currentPageIndex-1].url %} ons-pagination__item--current{% endif %}">
+                <li class="ons-pagination__item{% if firstPage == params.pages[currentPageIndex-1] %} ons-pagination__item--current{% endif %}">
                     <a href="{{ firstPage.url }}" class="ons-pagination__link" aria-label="Go to the first page (Page 1)">1</a>
                 </li>
             {% endif %}
@@ -33,9 +33,9 @@
                     {% set showPage = true %}
                 {% endif %}
                 {% if showPage == true %}
-                    <li class="ons-pagination__item{% if page.url == params.pages[currentPageIndex-1].url %} ons-pagination__item--current{% endif %}">
+                    <li class="ons-pagination__item{% if page == params.pages[currentPageIndex-1] %} ons-pagination__item--current{% endif %}">
                         <a href="{{ page.url }}" class="ons-pagination__link"
-                            {%- if page.url == params.pages[currentPageIndex-1].url -%}
+                            {%- if page == params.pages[currentPageIndex-1] -%}
                                 aria-current="true" aria-label="Current page ({{ position }})"
                             {%- else -%}
                                 aria-label="Go to page {{ loop.index }}"
@@ -54,7 +54,7 @@
                 <li class="ons-pagination__item ons-pagination__item--gap">&hellip;</li>
             {% endif %}
             {% if currentPageIndex < totalPages - 1 %}
-                <li class="ons-pagination__item{% if lastPage.url == params.pages[currentPageIndex-1].url == true %} ons-pagination__item--current{% endif %}">
+                <li class="ons-pagination__item{% if lastPage == params.pages[currentPageIndex-1] == true %} ons-pagination__item--current{% endif %}">
                     <a href="{{ lastPage.url }}" class="ons-pagination__link" aria-label="Go to the last page (Page {{ totalPages }})">{{ totalPages }}</a>
                 </li>
             {% endif %}
diff --git a/src/components/pagination/example-pagination-first.njk b/src/components/pagination/example-pagination-first.njk
index 750dd9a43e..6edb64a423 100644
--- a/src/components/pagination/example-pagination-first.njk
+++ b/src/components/pagination/example-pagination-first.njk
@@ -8,16 +8,16 @@
         "currentPageNumber": 1,
         "pages": [
             {
-                "url": "#page1"
+                "url": "#0"
             },
             {
-                "url": "#page2"
+                "url": "#0"
             },
             {
-                "url": "#page3"
+                "url": "#0"
             },
             {
-                "url": "#page4"
+                "url": "#0"
             }
         ]
     })
diff --git a/src/components/pagination/example-pagination-last.njk b/src/components/pagination/example-pagination-last.njk
index 03e5b09d9f..929e0b0748 100644
--- a/src/components/pagination/example-pagination-last.njk
+++ b/src/components/pagination/example-pagination-last.njk
@@ -8,16 +8,16 @@
         "currentPageNumber": 4,
         "pages": [
             {
-                "url": "#page1"
+                "url": "#0"
             },
             {
-                "url": "#page2"
+                "url": "#0"
             },
             {
-                "url": "#page3"
+                "url": "#0"
             },
             {
-                "url": "#page4"
+                "url": "#0"
             }
         ]
     })
diff --git a/src/components/pagination/example-pagination-with-no-range-indicator.njk b/src/components/pagination/example-pagination-with-no-range-indicator.njk
index e84c770a51..888d250abb 100644
--- a/src/components/pagination/example-pagination-with-no-range-indicator.njk
+++ b/src/components/pagination/example-pagination-with-no-range-indicator.njk
@@ -8,34 +8,34 @@
         "currentPageNumber": 5,
         "pages": [
             {
-                "url": "#page1"
+                "url": "#0"
             },
             {
-                "url": "#page2"
+                "url": "#0"
             },
             {
-                "url": "#page3"
+                "url": "#0"
             },
             {
-                "url": "#page4"
+                "url": "#0"
             },
             {
-                "url": "#page5"
+                "url": "#0"
             },
             {
-                "url": "#page6"
+                "url": "#0"
             },
             {
-                "url": "#page7"
+                "url": "#0"
             },
             {
-                "url": "#page8"
+                "url": "#0"
             },
             {
-                "url": "#page9"
+                "url": "#0"
             },
             {
-                "url": "#page10"
+                "url": "#0"
             }
         ]
     })
diff --git a/src/components/pagination/example-pagination.njk b/src/components/pagination/example-pagination.njk
index 3c40c4c743..ebd3e75efd 100644
--- a/src/components/pagination/example-pagination.njk
+++ b/src/components/pagination/example-pagination.njk
@@ -7,109 +7,109 @@
         "currentPageNumber": 5,
         "pages": [
             {
-                "url": "#1"
+                "url": "#0"
             },
             {
-                "url": "#2"
+                "url": "#0"
             },
             {
-                "url": "#3"
+                "url": "#0"
             },
             {
-                "url": "#4"
+                "url": "#0"
             },
             {
-                "url": "#5"
+                "url": "#0"
             },
             {
-                "url": "#6"
+                "url": "#0"
             },
             {
-                "url": "#7"
+                "url": "#0"
             },
             {
-                "url": "#8"
+                "url": "#0"
             },
             {
-                "url": "#9"
+                "url": "#0"
             },
             {
-                "url": "#10"
+                "url": "#0"
             },
             {
-                "url": "#11"
+                "url": "#0"
             },
             {
-                "url": "#12"
+                "url": "#0"
             },
             {
-                "url": "#13"
+                "url": "#0"
             },
             {
-                "url": "#14"
+                "url": "#0"
             },
             {
-                "url": "#15"
+                "url": "#0"
             },
             {
-                "url": "#16"
+                "url": "#0"
             },
             {
-                "url": "#17"
+                "url": "#0"
             },
             {
-                "url": "#18"
+                "url": "#0"
             },
             {
-                "url": "#19"
+                "url": "#0"
             },
             {
-                "url": "#20"
+                "url": "#0"
             },
             {
-                "url": "#21"
+                "url": "#0"
             },
             {
-                "url": "#22"
+                "url": "#0"
             },
             {
-                "url": "#23"
+                "url": "#0"
             },
             {
-                "url": "#24"
+                "url": "#0"
             },
             {
-                "url": "#25"
+                "url": "#0"
             },
             {
-                "url": "#26"
+                "url": "#0"
             },
             {
-                "url": "#27"
+                "url": "#0"
             },
             {
-                "url": "#28"
+                "url": "#0"
             },
             {
-                "url": "#29"
+                "url": "#0"
             },
             {
-                "url": "#30"
+                "url": "#0"
             },
             {
-                "url": "#31"
+                "url": "#0"
             },
             {
-                "url": "#32"
+                "url": "#0"
             },
             {
-                "url": "#33"
+                "url": "#0"
             },
             {
-                "url": "#34"
+                "url": "#0"
             },
             {
-                "url": "#35"
+                "url": "#0"
             }
         ]
     })

From 2476d308740aeea01a51e93352811764f1b31fd6 Mon Sep 17 00:00:00 2001
From: Precious Onyenaucheya <precious.onyenaucheya@ons.gov.uk>
Date: Mon, 12 Jun 2023 15:58:32 +0100
Subject: [PATCH 11/18] make compatible with jinja

---
 src/components/pagination/_macro.njk | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/pagination/_macro.njk b/src/components/pagination/_macro.njk
index 1edf6057b9..d66255ac4a 100644
--- a/src/components/pagination/_macro.njk
+++ b/src/components/pagination/_macro.njk
@@ -17,7 +17,7 @@
                 </li>
             {% endif %}
             {% if currentPageIndex > 2 %}
-                <li class="ons-pagination__item{% if firstPage == params.pages[currentPageIndex-1] %} ons-pagination__item--current{% endif %}">
+                <li class="ons-pagination__item{% if (currentPageIndex == 1) %} ons-pagination__item--current{% endif %}">
                     <a href="{{ firstPage.url }}" class="ons-pagination__link" aria-label="Go to the first page (Page 1)">1</a>
                 </li>
             {% endif %}
@@ -33,9 +33,9 @@
                     {% set showPage = true %}
                 {% endif %}
                 {% if showPage == true %}
-                    <li class="ons-pagination__item{% if page == params.pages[currentPageIndex-1] %} ons-pagination__item--current{% endif %}">
+                    <li class="ons-pagination__item{% if loop.index == currentPageIndex %} ons-pagination__item--current{% endif %}">
                         <a href="{{ page.url }}" class="ons-pagination__link"
-                            {%- if page == params.pages[currentPageIndex-1] -%}
+                            {%- if loop.index == currentPageIndex -%}
                                 aria-current="true" aria-label="Current page ({{ position }})"
                             {%- else -%}
                                 aria-label="Go to page {{ loop.index }}"
@@ -54,7 +54,7 @@
                 <li class="ons-pagination__item ons-pagination__item--gap">&hellip;</li>
             {% endif %}
             {% if currentPageIndex < totalPages - 1 %}
-                <li class="ons-pagination__item{% if lastPage == params.pages[currentPageIndex-1] == true %} ons-pagination__item--current{% endif %}">
+                <li class="ons-pagination__item{% if currentPageIndex == totalPages %} ons-pagination__item--current{% endif %}">
                     <a href="{{ lastPage.url }}" class="ons-pagination__link" aria-label="Go to the last page (Page {{ totalPages }})">{{ totalPages }}</a>
                 </li>
             {% endif %}

From a3cb1ea519d530adab2edfe83704762ed2f8ead6 Mon Sep 17 00:00:00 2001
From: Precious Onyenaucheya <precious.onyenaucheya@ons.gov.uk>
Date: Tue, 13 Jun 2023 10:06:28 +0100
Subject: [PATCH 12/18] resolve comment

---
 src/patterns/news/example-category.njk | 42 ++++++++--------
 src/patterns/news/example-landing.njk  | 70 +++++++++++++-------------
 2 files changed, 56 insertions(+), 56 deletions(-)

diff --git a/src/patterns/news/example-category.njk b/src/patterns/news/example-category.njk
index b75585b7f4..0ec3602cd3 100644
--- a/src/patterns/news/example-category.njk
+++ b/src/patterns/news/example-category.njk
@@ -143,67 +143,67 @@ layout: ~
                     "currentPageNumber": 1,
                     "pages": [
                         {
-                            "url": "#1"
+                            "url": "#0"
                         },
                         {
-                            "url": "#2"
+                            "url": "#0"
                         },
                         {
-                            "url": "#3"
+                            "url": "#0"
                         },
                         {
-                            "url": "#4"
+                            "url": "#0"
                         },
                         {
-                            "url": "#5"
+                            "url": "#0"
                         },
                         {
-                            "url": "#6"
+                            "url": "#0"
                         },
                         {
-                            "url": "#7"
+                            "url": "#0"
                         },
                         {
-                            "url": "#8"
+                            "url": "#0"
                         },
                         {
-                            "url": "#9"
+                            "url": "#0"
                         },
                         {
-                            "url": "#10"
+                            "url": "#0"
                         },
                         {
-                            "url": "#11"
+                            "url": "#0"
                         },
                         {
-                            "url": "#12"
+                            "url": "#0"
                         },
                         {
-                            "url": "#13"
+                            "url": "#0"
                         },
                         {
-                            "url": "#14"
+                            "url": "#0"
                         },
                         {
-                            "url": "#15"
+                            "url": "#0"
                         },
                         {
-                            "url": "#16"
+                            "url": "#0"
                         },
                         {
-                            "url": "#17"
+                            "url": "#0"
                         },
                         {
-                            "url": "#18"
+                            "url": "#0"
                         },
                         {
-                            "url": "#19"
+                            "url": "#0"
                         },
                         {
-                            "url": "#20"
+                            "url": "#0"
                         },
                         {
-                            "url": "#21"
+                            "url": "#0"
                         }
                     ]
                 })
diff --git a/src/patterns/news/example-landing.njk b/src/patterns/news/example-landing.njk
index e4beabedbf..6b390a69c9 100644
--- a/src/patterns/news/example-landing.njk
+++ b/src/patterns/news/example-landing.njk
@@ -167,109 +167,109 @@ layout: ~
                         "currentPageNumber": 1,
                         "pages": [
                             {
-                                "url": "#1"
+                                "url": "#0"
                             },
                             {
-                                "url": "#2"
+                                "url": "#0"
                             },
                             {
-                                "url": "#3"
+                                "url": "#0"
                             },
                             {
-                                "url": "#4"
+                                "url": "#0"
                             },
                             {
-                                "url": "#5"
+                                "url": "#0"
                             },
                             {
-                                "url": "#6"
+                                "url": "#0"
                             },
                             {
-                                "url": "#7"
+                                "url": "#0"
                             },
                             {
-                                "url": "#8"
+                                "url": "#0"
                             },
                             {
-                                "url": "#9"
+                                "url": "#0"
                             },
                             {
-                                "url": "#10"
+                                "url": "#0"
                             },
                             {
-                                "url": "#11"
+                                "url": "#0"
                             },
                             {
-                                "url": "#12"
+                                "url": "#0"
                             },
                             {
-                                "url": "#13"
+                                "url": "#0"
                             },
                             {
-                                "url": "#14"
+                                "url": "#0"
                             },
                             {
-                                "url": "#15"
+                                "url": "#0"
                             },
                             {
-                                "url": "#16"
+                                "url": "#0"
                             },
                             {
-                                "url": "#17"
+                                "url": "#0"
                             },
                             {
-                                "url": "#18"
+                                "url": "#0"
                             },
                             {
-                                "url": "#19"
+                                "url": "#0"
                             },
                             {
-                                "url": "#20"
+                                "url": "#0"
                             },
                             {
-                                "url": "#21"
+                                "url": "#0"
                             },
                             {
-                                "url": "#22"
+                                "url": "#0"
                             },
                             {
-                                "url": "#23"
+                                "url": "#0"
                             },
                             {
-                                "url": "#24"
+                                "url": "#0"
                             },
                             {
-                                "url": "#25"
+                                "url": "#0"
                             },
                             {
-                                "url": "#26"
+                                "url": "#0"
                             },
                             {
-                                "url": "#27"
+                                "url": "#0"
                             },
                             {
-                                "url": "#28"
+                                "url": "#0"
                             },
                             {
-                                "url": "#29"
+                                "url": "#0"
                             },
                             {
-                                "url": "#30"
+                                "url": "#0"
                             },
                             {
-                                "url": "#31"
+                                "url": "#0"
                             },
                             {
-                                "url": "#32"
+                                "url": "#0"
                             },
                             {
-                                "url": "#33"
+                                "url": "#0"
                             },
                             {
-                                "url": "#34"
+                                "url": "#0"
                             },
                             {
-                                "url": "#35"
+                                "url": "#0"
                             }
                         ]
                     })

From 96860c4bcc194efc598ab1626fcf2c7fe4f1ef0a Mon Sep 17 00:00:00 2001
From: William <will.cowen@and.digital>
Date: Tue, 13 Jun 2023 16:04:35 +0100
Subject: [PATCH 13/18] removed name attribute from div and dl elements

---
 src/components/message/_macro-options.md | 2 --
 src/components/message/_macro.njk        | 4 ++--
 src/components/message/_macro.spec.js    | 1 -
 3 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/components/message/_macro-options.md b/src/components/message/_macro-options.md
index 6c8ad88d87..80bde186e7 100644
--- a/src/components/message/_macro-options.md
+++ b/src/components/message/_macro-options.md
@@ -2,7 +2,6 @@
 | -------------- | ------ | -------- | ---------------------------------------------------------------------- |
 | type           | string | true     | Set to “sent” or “received” to style message type                      |
 | id             | string | false    | The HTML `id` of the message header metadata element                   |
-| name           | string | false    | The HTML `name` attribute for the message header metadata element      |
 | fromLabel      | string | true     | Label for the “From” prefix in the message header metadata element     |
 | fromValue      | string | true     | Value of the “From” sender name in the message header metadata element |
 | fromId         | string | false    | The HTML `id` of the `fromValue` element                               |
@@ -15,4 +14,3 @@
 | unreadLink     | string | false    | The URL for the “Mark unread” link element’s `href` attribute          |
 | unreadLinkId   | string | false    | The HTML `id` of the “Mark unread” link element                        |
 | messageID      | string | false    | The HTML `id` of the message body                                      |
-| messageName    | string | false    | The HTML `name` attribute of the message body                          |
diff --git a/src/components/message/_macro.njk b/src/components/message/_macro.njk
index a1de2762d3..b70e26e02d 100644
--- a/src/components/message/_macro.njk
+++ b/src/components/message/_macro.njk
@@ -1,7 +1,7 @@
 {%- macro onsMessage(params) -%}
   <div class="ons-message ons-message--{{ params.type }}">
     <div class="ons-message__head">
-      <dl class="ons-message__metadata" {% if params.id %} id="{{ params.id }}"{% endif %} {% if params.name %} name="{{ params.name }}"{% endif %}>
+      <dl class="ons-message__metadata" {% if params.id %} id="{{ params.id }}"{% endif %}>
         <div class="ons-message__sender">
           <dt class="ons-message__term ons-u-fw-b">{{ params.fromLabel }}:</dt>
           <dd class="ons-message__value ons-u-fw-b" {% if params.fromId %} id="{{ params.fromId }}"{% endif %} {% if params.fromName %} name="{{ params.fromName }}"{% endif %}>{{ params.fromValue }}</dd>
@@ -15,7 +15,7 @@
           <a class="ons-message__unread-link" {% if params.unreadLinkId %}id="{{ params.unreadLinkId }}"{% endif %} href="{{ params.unreadLink }}">{{ params.unreadLinkText }}</a>
       {% endif %}
     </div>
-    <div class="ons-message__body" {% if params.messageID %} id="{{ params.messageID }}"{% endif %} {% if params.messageName %} name="{{ params.messageName }}"{% endif %}>
+    <div class="ons-message__body" {% if params.messageID %} id="{{ params.messageID }}"{% endif %}>
       {{ caller() }}
     </div>
   </div>
diff --git a/src/components/message/_macro.spec.js b/src/components/message/_macro.spec.js
index b2e00ef9b6..fecfb6f5e2 100644
--- a/src/components/message/_macro.spec.js
+++ b/src/components/message/_macro.spec.js
@@ -18,7 +18,6 @@ const EXAMPLE_MESSAGE = {
   unreadLink: 'https://example.com/message/1',
   unreadLinkText: 'Unread message',
   id: 'message1',
-  name: 'example-message-1',
   fromId: 'from1',
   sentId: 'sent1',
   unreadLinkId: 'unreadLink1',

From 59d371f0a6870730335d520edecd3b56cc2368e1 Mon Sep 17 00:00:00 2001
From: Alec Hamilton <alec.hamilton@ext.ons.gov.uk>
Date: Wed, 14 Jun 2023 10:26:10 +0100
Subject: [PATCH 14/18] feat: removed if statements from macro

---
 src/components/table/_macro.njk | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/table/_macro.njk b/src/components/table/_macro.njk
index acbc612f39..fb3d4ff1cb 100644
--- a/src/components/table/_macro.njk
+++ b/src/components/table/_macro.njk
@@ -32,9 +32,9 @@
                 </thead>
                 <tbody class="ons-table__body">
                     {% for tr in params.trs %}
-                    <tr class="ons-table__row{{ " ons-table__row--highlight" if tr.highlight }}" {% if tr.name %} name="{{ tr.name }}"{% endif %} {% if tr.id %} id="{{ tr.id }}"{% endif %}>
+                    <tr class="ons-table__row{{ " ons-table__row--highlight" if tr.highlight }}" {% if tr.id %} id="{{ tr.id }}"{% endif %}>
                         {% for td in tr.tds %}
-                        <td class="ons-table__cell{{ ' ' + td.tdClasses if td.tdClasses }}{{ " ons-table__cell--numeric" if td.numeric }}" {% if td.id %} id="{{ td.id }}"{% endif %} {% if td.name %} name="{{ td.name }}"{% endif %} {% if td.data %} data-th="{{ td.data }}"{% endif %} {% if td.dataSort %} data-sort-value="{{ td.dataSort }}"{% endif %}>
+                        <td class="ons-table__cell{{ ' ' + td.tdClasses if td.tdClasses }}{{ " ons-table__cell--numeric" if td.numeric }}" {% if td.id %} id="{{ td.id }}"{% endif %} {% if td.data %} data-th="{{ td.data }}"{% endif %} {% if td.dataSort %} data-sort-value="{{ td.dataSort }}"{% endif %}>
                             {% if td.form %}
                                 <form action="{{ td.form.action }}" method="{{ td.form.method | default('POST')}}">
                                     {{

From 817b91886f79187ba4bba2e3aeccf4a3797a9ccd Mon Sep 17 00:00:00 2001
From: Alec Hamilton <alec.hamilton@ext.ons.gov.uk>
Date: Wed, 14 Jun 2023 10:29:21 +0100
Subject: [PATCH 15/18] feat: removed name from example and updated macro
 options

---
 src/components/table/_macro-options.md       | 2 --
 src/components/table/example-table-basic.njk | 1 -
 2 files changed, 3 deletions(-)

diff --git a/src/components/table/_macro-options.md b/src/components/table/_macro-options.md
index 34520714fb..8325cea2f4 100644
--- a/src/components/table/_macro-options.md
+++ b/src/components/table/_macro-options.md
@@ -28,7 +28,6 @@
 | --------- | ----------- | -------- | --------------------------------------------------- |
 | tds       | Array`<td>` | true     | An array of `td` [cell elements](#td) for each `tr` |
 | id        | string      | false    | The HTML `id` of the `tr` element                   |
-| name      | string      | false    | The HTML `name` attribute for the `tr` element      |
 | highlight | boolean     | false    | Set to “true” to highlight the row                  |
 
 ## td
@@ -37,7 +36,6 @@
 | --------- | -------------- | ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------- |
 | tdClasses | string         | false                                      | Classes to add to the `td` element                                                                                                    |
 | id        | string         | false                                      | The HTML `id` of the `td` element                                                                                                     |
-| name      | string         | false                                      | The HTML `name` attribute for the `td` element                                                                                        |
 | data      | string         | false (unless “responsive” variant is set) | Set to the corresponding `th` header cell when using the “responsive” variant                                                         |
 | dataSort  | integer        | false                                      | Set the numerical order of a table cell in a column when using the “sortable” variant                                                 |
 | value     | string         | false                                      | The content for the `td` cell                                                                                                         |
diff --git a/src/components/table/example-table-basic.njk b/src/components/table/example-table-basic.njk
index 7a89c688ce..025d142786 100644
--- a/src/components/table/example-table-basic.njk
+++ b/src/components/table/example-table-basic.njk
@@ -19,7 +19,6 @@
                 "tds": [
                     {
                         "value": "Cell A1",
-                        "name": "cell-name"
                     },
                     {
                         "value": "Cell B1"

From e3c587bd4694ae77523e8bb0479754b9333219b3 Mon Sep 17 00:00:00 2001
From: Alec Hamilton <alec.hamilton@ext.ons.gov.uk>
Date: Wed, 14 Jun 2023 10:35:53 +0100
Subject: [PATCH 16/18] fix: fixed basic table crashing

---
 src/components/table/example-table-basic.njk | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/table/example-table-basic.njk b/src/components/table/example-table-basic.njk
index 025d142786..d74beab74a 100644
--- a/src/components/table/example-table-basic.njk
+++ b/src/components/table/example-table-basic.njk
@@ -18,7 +18,7 @@
             {
                 "tds": [
                     {
-                        "value": "Cell A1",
+                        "value": "Cell A1"
                     },
                     {
                         "value": "Cell B1"

From a86b505807186df0a648e42a2a592812587c7740 Mon Sep 17 00:00:00 2001
From: Precious Onyenaucheya <precious.onyenaucheya@ons.gov.uk>
Date: Wed, 14 Jun 2023 21:43:02 +0100
Subject: [PATCH 17/18] refactor to remove duplicate identifier

---
 src/components/tabs/_macro.njk | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/tabs/_macro.njk b/src/components/tabs/_macro.njk
index a1ff4694b3..d6c97441f8 100644
--- a/src/components/tabs/_macro.njk
+++ b/src/components/tabs/_macro.njk
@@ -15,12 +15,12 @@
 
         <ul class="ons-tabs__list">
             {%- for tab in params.tabs -%}
-                <li class="ons-tab__list-item"><a href="#{{ tab.id if tab.id else 'tabId' ~ loop.index }}" class="ons-tab" data-ga="click" data-ga-category="tabs" data-ga-action="Show: {{ tab.title }}" data-ga-label="Show: {{ tab.title }}">{{ tab.title }}{% if tab.hiddenSpan %}<span class='ons-u-d-no'>{{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" data-ga="click" data-ga-category="tabs" data-ga-action="Show: {{ tab.title }}" data-ga-label="Show: {{ tab.title }}">{{ tab.title }}{% if tab.hiddenSpan %}<span class='ons-u-d-no'>{{tab.hiddenSpan}}</span>{% endif %}</a></li>
             {%- endfor -%}
         </ul>
 
         {% for tab in params.tabs %}
-            <section id="{{ tab.id if tab.id else 'tabId' ~ loop.index }}" class="ons-tabs__panel">
+            <section id="{{ tab.id if tab.id else tab.title|trim|replace(' ','-')|lower }}" class="ons-tabs__panel">
                 {{ tab.content | safe }}
             </section>
         {% endfor %}

From 4176c4ececd8fed1ada174819371e9d510f38d8a Mon Sep 17 00:00:00 2001
From: Precious Onyenaucheya <precious.onyenaucheya@ons.gov.uk>
Date: Wed, 14 Jun 2023 22:05:40 +0100
Subject: [PATCH 18/18] fix failing test

---
 src/components/tabs/_macro.spec.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/tabs/_macro.spec.js b/src/components/tabs/_macro.spec.js
index abdf3c578c..dff4c20f7d 100644
--- a/src/components/tabs/_macro.spec.js
+++ b/src/components/tabs/_macro.spec.js
@@ -88,8 +88,8 @@ describe('macro: tabs', () => {
   it('has default tab id attribute values when identifiers are not provided', () => {
     const $ = cheerio.load(renderComponent('tabs', EXAMPLE_TABS_WITHOUT_TAB_IDS));
 
-    expect($('.ons-tabs__panel:first').attr('id')).toBe('tabId1');
-    expect($('.ons-tabs__panel:last').attr('id')).toBe('tabId2');
+    expect($('.ons-tabs__panel:first').attr('id')).toBe('tab-1');
+    expect($('.ons-tabs__panel:last').attr('id')).toBe('tab-2');
   });
 
   it('has expected label text in tab links and visually hidden span in tab 1', () => {