Fix Nunjucks HTML indentation: Tabs

[colinrotherham]

Tabs changes, split out from #4448 to partially resolve #3211

This PR adds | trim | indent(4) etc to tab items and panels to ensure nested HTML lines are indented, using:

• _tabListItem()
• _tabPanel()

[github-actions]

📋 Stats

File sizes

File	Size
dist/govuk-frontend-development.min.css	112.45 KiB
dist/govuk-frontend-development.min.js	38.58 KiB
packages/govuk-frontend/dist/govuk/all.bundle.js	78.74 KiB
packages/govuk-frontend/dist/govuk/all.bundle.mjs	73.99 KiB
packages/govuk-frontend/dist/govuk/all.mjs	3.86 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend-component.mjs	359 B
packages/govuk-frontend/dist/govuk/govuk-frontend.min.css	112.44 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend.min.js	38.57 KiB
packages/govuk-frontend/dist/govuk/i18n.mjs	5.38 KiB

Modules

File	Size
all.mjs	70.32 KiB
components/accordion/accordion.mjs	21.67 KiB
components/button/button.mjs	4.7 KiB
components/character-count/character-count.mjs	21.24 KiB
components/checkboxes/checkboxes.mjs	5.83 KiB
components/error-summary/error-summary.mjs	6.57 KiB
components/exit-this-page/exit-this-page.mjs	16.08 KiB
components/header/header.mjs	4.46 KiB
components/notification-banner/notification-banner.mjs	4.93 KiB
components/radios/radios.mjs	4.83 KiB
components/skip-link/skip-link.mjs	4.39 KiB
components/tabs/tabs.mjs	10.16 KiB

View stats and visualisations on the review app

---

Action run for cfd7c12

[github-actions]

Rendered HTML changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/components/tabs/template-default.html b/packages/govuk-frontend/dist/govuk/components/tabs/template-default.html
index 67c5d1b07..31cd5352b 100644
--- a/packages/govuk-frontend/dist/govuk/components/tabs/template-default.html
+++ b/packages/govuk-frontend/dist/govuk/components/tabs/template-default.html
@@ -3,118 +3,115 @@
     Contents
   </h2>
   <ul class="govuk-tabs__list">
-        <li class="govuk-tabs__list-item govuk-tabs__list-item--selected">
-          <a class="govuk-tabs__tab" href="#past-day">
-            Past day
-          </a>
-        </li>
-        <li class="govuk-tabs__list-item">
-          <a class="govuk-tabs__tab" href="#past-week">
-            Past week
-          </a>
-        </li>
-        <li class="govuk-tabs__list-item">
-          <a class="govuk-tabs__tab" href="#past-month">
-            Past month
-          </a>
-        </li>
-        <li class="govuk-tabs__list-item">
-          <a class="govuk-tabs__tab" href="#past-year">
-            Past year
-          </a>
-        </li>
+    <li class="govuk-tabs__list-item govuk-tabs__list-item--selected">
+      <a class="govuk-tabs__tab" href="#past-day">
+        Past day
+      </a>
+    </li>
+    <li class="govuk-tabs__list-item">
+      <a class="govuk-tabs__tab" href="#past-week">
+        Past week
+      </a>
+    </li>
+    <li class="govuk-tabs__list-item">
+      <a class="govuk-tabs__tab" href="#past-month">
+        Past month
+      </a>
+    </li>
+    <li class="govuk-tabs__list-item">
+      <a class="govuk-tabs__tab" href="#past-year">
+        Past year
+      </a>
+    </li>
   </ul>
-      <div class="govuk-tabs__panel" id="past-day">
-          <h2 class="govuk-heading-l">Past day</h2>
-<table class="govuk-table">
-  <thead class="govuk-table__head">
-    <tr class="govuk-table__row">
-      <th class="govuk-table__header" scope="col">Case manager</th>
-      <th class="govuk-table__header" scope="col">Cases opened</th>
-      <th class="govuk-table__header" scope="col">Cases closed</th>
-    </tr>
-  </thead>
-  <tbody class="govuk-table__body">
-    <tr class="govuk-table__row">
-      <td class="govuk-table__cell">David Francis</td>
-      <td class="govuk-table__cell">3</td>
-      <td class="govuk-table__cell">0</td>
-    </tr>
-    <tr class="govuk-table__row">
-      <td class="govuk-table__cell">Paul Farmer</td>
-      <td class="govuk-table__cell">1</td>
-      <td class="govuk-table__cell">0</td>
-    </tr>
-    <tr class="govuk-table__row">
-      <td class="govuk-table__cell">Rita Patel</td>
-      <td class="govuk-table__cell">2</td>
-      <td class="govuk-table__cell">0</td>
-    </tr>
-  </tbody>
-</table>
-
-      </div>
-      <div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="past-week">
-          <h2 class="govuk-heading-l">Past week</h2>
-<table class="govuk-table">
-  <thead class="govuk-table__head">
-    <tr class="govuk-table__row">
-      <th class="govuk-table__header" scope="col">Case manager</th>
-      <th class="govuk-table__header" scope="col">Cases opened</th>
-      <th class="govuk-table__header" scope="col">Cases closed</th>
-    </tr>
-  </thead>
-  <tbody class="govuk-table__body">
-    <tr class="govuk-table__row">
-      <td class="govuk-table__cell">David Francis</td>
-      <td class="govuk-table__cell">24</td>
-      <td class="govuk-table__cell">18</td>
-    </tr>
-    <tr class="govuk-table__row">
-      <td class="govuk-table__cell">Paul Farmer</td>
-      <td class="govuk-table__cell">16</td>
-      <td class="govuk-table__cell">20</td>
-    </tr>
-    <tr class="govuk-table__row">
-      <td class="govuk-table__cell">Rita Patel</td>
-      <td class="govuk-table__cell">24</td>
-      <td class="govuk-table__cell">27</td>
-    </tr>
-  </tbody>
-</table>
-
-      </div>
-      <div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="past-month">
-          <h2 class="govuk-heading-l">Past month</h2>
-<table class="govuk-table">
-  <thead class="govuk-table__head">
-    <tr class="govuk-table__row">
-      <th class="govuk-table__header" scope="col">Case manager</th>
-      <th class="govuk-table__header" scope="col">Cases opened</th>
-      <th class="govuk-table__header" scope="col">Cases closed</th>
-    </tr>
-  </thead>
-  <tbody class="govuk-table__body">
-    <tr class="govuk-table__row">
-      <td class="govuk-table__cell">David Francis</td>
-      <td class="govuk-table__cell">98</td>
-      <td class="govuk-table__cell">95</td>
-    </tr>
-    <tr class="govuk-table__row">
-      <td class="govuk-table__cell">Paul Farmer</td>
-      <td class="govuk-table__cell">122</td>
-      <td class="govuk-table__cell">131</td>
-    </tr>
-    <tr class="govuk-table__row">
-      <td class="govuk-table__cell">Rita Patel</td>
-      <td class="govuk-table__cell">126</td>
-      <td class="govuk-table__cell">142</td>
-    </tr>
-  </tbody>
-</table>
-
-      </div>
-      <div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="past-year">
-          <p class="govuk-body">There is no data for this year yet, check back later</p>
-      </div>
+  <div class="govuk-tabs__panel" id="past-day">
+    <h2 class="govuk-heading-l">Past day</h2>
+    <table class="govuk-table">
+      <thead class="govuk-table__head">
+        <tr class="govuk-table__row">
+          <th class="govuk-table__header" scope="col">Case manager</th>
+          <th class="govuk-table__header" scope="col">Cases opened</th>
+          <th class="govuk-table__header" scope="col">Cases closed</th>
+        </tr>
+      </thead>
+      <tbody class="govuk-table__body">
+        <tr class="govuk-table__row">
+          <td class="govuk-table__cell">David Francis</td>
+          <td class="govuk-table__cell">3</td>
+          <td class="govuk-table__cell">0</td>
+        </tr>
+        <tr class="govuk-table__row">
+          <td class="govuk-table__cell">Paul Farmer</td>
+          <td class="govuk-table__cell">1</td>
+          <td class="govuk-table__cell">0</td>
+        </tr>
+        <tr class="govuk-table__row">
+          <td class="govuk-table__cell">Rita Patel</td>
+          <td class="govuk-table__cell">2</td>
+          <td class="govuk-table__cell">0</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="past-week">
+    <h2 class="govuk-heading-l">Past week</h2>
+    <table class="govuk-table">
+      <thead class="govuk-table__head">
+        <tr class="govuk-table__row">
+          <th class="govuk-table__header" scope="col">Case manager</th>
+          <th class="govuk-table__header" scope="col">Cases opened</th>
+          <th class="govuk-table__header" scope="col">Cases closed</th>
+        </tr>
+      </thead>
+      <tbody class="govuk-table__body">
+        <tr class="govuk-table__row">
+          <td class="govuk-table__cell">David Francis</td>
+          <td class="govuk-table__cell">24</td>
+          <td class="govuk-table__cell">18</td>
+        </tr>
+        <tr class="govuk-table__row">
+          <td class="govuk-table__cell">Paul Farmer</td>
+          <td class="govuk-table__cell">16</td>
+          <td class="govuk-table__cell">20</td>
+        </tr>
+        <tr class="govuk-table__row">
+          <td class="govuk-table__cell">Rita Patel</td>
+          <td class="govuk-table__cell">24</td>
+          <td class="govuk-table__cell">27</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="past-month">
+    <h2 class="govuk-heading-l">Past month</h2>
+    <table class="govuk-table">
+      <thead class="govuk-table__head">
+        <tr class="govuk-table__row">
+          <th class="govuk-table__header" scope="col">Case manager</th>
+          <th class="govuk-table__header" scope="col">Cases opened</th>
+          <th class="govuk-table__header" scope="col">Cases closed</th>
+        </tr>
+      </thead>
+      <tbody class="govuk-table__body">
+        <tr class="govuk-table__row">
+          <td class="govuk-table__cell">David Francis</td>
+          <td class="govuk-table__cell">98</td>
+          <td class="govuk-table__cell">95</td>
+        </tr>
+        <tr class="govuk-table__row">
+          <td class="govuk-table__cell">Paul Farmer</td>
+          <td class="govuk-table__cell">122</td>
+          <td class="govuk-table__cell">131</td>
+        </tr>
+        <tr class="govuk-table__row">
+          <td class="govuk-table__cell">Rita Patel</td>
+          <td class="govuk-table__cell">126</td>
+          <td class="govuk-table__cell">142</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="past-year">
+    <p class="govuk-body">There is no data for this year yet, check back later</p>
+  </div>
 </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/tabs/template-tabs-with-anchor-in-panel.html b/packages/govuk-frontend/dist/govuk/components/tabs/template-tabs-with-anchor-in-panel.html
index 45cb26b27..9ea906404 100644
--- a/packages/govuk-frontend/dist/govuk/components/tabs/template-tabs-with-anchor-in-panel.html
+++ b/packages/govuk-frontend/dist/govuk/components/tabs/template-tabs-with-anchor-in-panel.html
@@ -3,26 +3,24 @@
     Contents
   </h2>
   <ul class="govuk-tabs__list">
-        <li class="govuk-tabs__list-item govuk-tabs__list-item--selected">
-          <a class="govuk-tabs__tab" href="#tab-1">
-            Tab 1
-          </a>
-        </li>
-        <li class="govuk-tabs__list-item">
-          <a class="govuk-tabs__tab" href="#tab-2">
-            Tab 2
-          </a>
-        </li>
+    <li class="govuk-tabs__list-item govuk-tabs__list-item--selected">
+      <a class="govuk-tabs__tab" href="#tab-1">
+        Tab 1
+      </a>
+    </li>
+    <li class="govuk-tabs__list-item">
+      <a class="govuk-tabs__tab" href="#tab-2">
+        Tab 2
+      </a>
+    </li>
   </ul>
-      <div class="govuk-tabs__panel" id="tab-1">
-          <h2 class="govuk-heading-l">Tab 1</h2>
-<p class="govuk-body">Testing that when you click the anchor it moves to the anchor point successfully</p>
-<p class="govuk-body"><a class="govuk-link" href="#anchor">Anchor</a></p>
-<p class="govuk-body"><a id="anchor" tabindex="0">Anchor Point</a></p>
-
-      </div>
-      <div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="tab-2">
-          <h2 class="govuk-heading-l">Tab 2</h2>
-
-      </div>
+  <div class="govuk-tabs__panel" id="tab-1">
+    <h2 class="govuk-heading-l">Tab 1</h2>
+    <p class="govuk-body">Testing that when you click the anchor it moves to the anchor point successfully</p>
+    <p class="govuk-body"><a class="govuk-link" href="#anchor">Anchor</a></p>
+    <p class="govuk-body"><a id="anchor" tabindex="0">Anchor Point</a></p>
+  </div>
+  <div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="tab-2">
+    <h2 class="govuk-heading-l">Tab 2</h2>
+  </div>
 </div>

---

Action run for cfd7c12

[github-actions]

Other changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/components/tabs/fixtures.json b/packages/govuk-frontend/dist/govuk/components/tabs/fixtures.json
index e0e9134ce..984d7117e 100644
--- a/packages/govuk-frontend/dist/govuk/components/tabs/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/tabs/fixtures.json
@@ -38,7 +38,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n        <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n          <a class=\"govuk-tabs__tab\" href=\"#past-day\">\n            Past day\n          </a>\n        </li>\n        <li class=\"govuk-tabs__list-item\">\n          <a class=\"govuk-tabs__tab\" href=\"#past-week\">\n            Past week\n          </a>\n        </li>\n        <li class=\"govuk-tabs__list-item\">\n          <a class=\"govuk-tabs__tab\" href=\"#past-month\">\n            Past month\n          </a>\n        </li>\n        <li class=\"govuk-tabs__list-item\">\n          <a class=\"govuk-tabs__tab\" href=\"#past-year\">\n            Past year\n          </a>\n        </li>\n  </ul>\n      <div class=\"govuk-tabs__panel\" id=\"past-day\">\n          <h2 class=\"govuk-heading-l\">Past day</h2>\n<table class=\"govuk-table\">\n  <thead class=\"govuk-table__head\">\n    <tr class=\"govuk-table__row\">\n      <th class=\"govuk-table__header\" scope=\"col\">Case manager</th>\n      <th class=\"govuk-table__header\" scope=\"col\">Cases opened</th>\n      <th class=\"govuk-table__header\" scope=\"col\">Cases closed</th>\n    </tr>\n  </thead>\n  <tbody class=\"govuk-table__body\">\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">David Francis</td>\n      <td class=\"govuk-table__cell\">3</td>\n      <td class=\"govuk-table__cell\">0</td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">Paul Farmer</td>\n      <td class=\"govuk-table__cell\">1</td>\n      <td class=\"govuk-table__cell\">0</td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">Rita Patel</td>\n      <td class=\"govuk-table__cell\">2</td>\n      <td class=\"govuk-table__cell\">0</td>\n    </tr>\n  </tbody>\n</table>\n\n      </div>\n      <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"past-week\">\n          <h2 class=\"govuk-heading-l\">Past week</h2>\n<table class=\"govuk-table\">\n  <thead class=\"govuk-table__head\">\n    <tr class=\"govuk-table__row\">\n      <th class=\"govuk-table__header\" scope=\"col\">Case manager</th>\n      <th class=\"govuk-table__header\" scope=\"col\">Cases opened</th>\n      <th class=\"govuk-table__header\" scope=\"col\">Cases closed</th>\n    </tr>\n  </thead>\n  <tbody class=\"govuk-table__body\">\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">David Francis</td>\n      <td class=\"govuk-table__cell\">24</td>\n      <td class=\"govuk-table__cell\">18</td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">Paul Farmer</td>\n      <td class=\"govuk-table__cell\">16</td>\n      <td class=\"govuk-table__cell\">20</td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">Rita Patel</td>\n      <td class=\"govuk-table__cell\">24</td>\n      <td class=\"govuk-table__cell\">27</td>\n    </tr>\n  </tbody>\n</table>\n\n      </div>\n      <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"past-month\">\n          <h2 class=\"govuk-heading-l\">Past month</h2>\n<table class=\"govuk-table\">\n  <thead class=\"govuk-table__head\">\n    <tr class=\"govuk-table__row\">\n      <th class=\"govuk-table__header\" scope=\"col\">Case manager</th>\n      <th class=\"govuk-table__header\" scope=\"col\">Cases opened</th>\n      <th class=\"govuk-table__header\" scope=\"col\">Cases closed</th>\n    </tr>\n  </thead>\n  <tbody class=\"govuk-table__body\">\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">David Francis</td>\n      <td class=\"govuk-table__cell\">98</td>\n      <td class=\"govuk-table__cell\">95</td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">Paul Farmer</td>\n      <td class=\"govuk-table__cell\">122</td>\n      <td class=\"govuk-table__cell\">131</td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">Rita Patel</td>\n      <td class=\"govuk-table__cell\">126</td>\n      <td class=\"govuk-table__cell\">142</td>\n    </tr>\n  </tbody>\n</table>\n\n      </div>\n      <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"past-year\">\n          <p class=\"govuk-body\">There is no data for this year yet, check back later</p>\n      </div>\n</div>"
+            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n    <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n      <a class=\"govuk-tabs__tab\" href=\"#past-day\">\n        Past day\n      </a>\n    </li>\n    <li class=\"govuk-tabs__list-item\">\n      <a class=\"govuk-tabs__tab\" href=\"#past-week\">\n        Past week\n      </a>\n    </li>\n    <li class=\"govuk-tabs__list-item\">\n      <a class=\"govuk-tabs__tab\" href=\"#past-month\">\n        Past month\n      </a>\n    </li>\n    <li class=\"govuk-tabs__list-item\">\n      <a class=\"govuk-tabs__tab\" href=\"#past-year\">\n        Past year\n      </a>\n    </li>\n  </ul>\n  <div class=\"govuk-tabs__panel\" id=\"past-day\">\n    <h2 class=\"govuk-heading-l\">Past day</h2>\n    <table class=\"govuk-table\">\n      <thead class=\"govuk-table__head\">\n        <tr class=\"govuk-table__row\">\n          <th class=\"govuk-table__header\" scope=\"col\">Case manager</th>\n          <th class=\"govuk-table__header\" scope=\"col\">Cases opened</th>\n          <th class=\"govuk-table__header\" scope=\"col\">Cases closed</th>\n        </tr>\n      </thead>\n      <tbody class=\"govuk-table__body\">\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell\">David Francis</td>\n          <td class=\"govuk-table__cell\">3</td>\n          <td class=\"govuk-table__cell\">0</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell\">Paul Farmer</td>\n          <td class=\"govuk-table__cell\">1</td>\n          <td class=\"govuk-table__cell\">0</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell\">Rita Patel</td>\n          <td class=\"govuk-table__cell\">2</td>\n          <td class=\"govuk-table__cell\">0</td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n  <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"past-week\">\n    <h2 class=\"govuk-heading-l\">Past week</h2>\n    <table class=\"govuk-table\">\n      <thead class=\"govuk-table__head\">\n        <tr class=\"govuk-table__row\">\n          <th class=\"govuk-table__header\" scope=\"col\">Case manager</th>\n          <th class=\"govuk-table__header\" scope=\"col\">Cases opened</th>\n          <th class=\"govuk-table__header\" scope=\"col\">Cases closed</th>\n        </tr>\n      </thead>\n      <tbody class=\"govuk-table__body\">\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell\">David Francis</td>\n          <td class=\"govuk-table__cell\">24</td>\n          <td class=\"govuk-table__cell\">18</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell\">Paul Farmer</td>\n          <td class=\"govuk-table__cell\">16</td>\n          <td class=\"govuk-table__cell\">20</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell\">Rita Patel</td>\n          <td class=\"govuk-table__cell\">24</td>\n          <td class=\"govuk-table__cell\">27</td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n  <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"past-month\">\n    <h2 class=\"govuk-heading-l\">Past month</h2>\n    <table class=\"govuk-table\">\n      <thead class=\"govuk-table__head\">\n        <tr class=\"govuk-table__row\">\n          <th class=\"govuk-table__header\" scope=\"col\">Case manager</th>\n          <th class=\"govuk-table__header\" scope=\"col\">Cases opened</th>\n          <th class=\"govuk-table__header\" scope=\"col\">Cases closed</th>\n        </tr>\n      </thead>\n      <tbody class=\"govuk-table__body\">\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell\">David Francis</td>\n          <td class=\"govuk-table__cell\">98</td>\n          <td class=\"govuk-table__cell\">95</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell\">Paul Farmer</td>\n          <td class=\"govuk-table__cell\">122</td>\n          <td class=\"govuk-table__cell\">131</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell\">Rita Patel</td>\n          <td class=\"govuk-table__cell\">126</td>\n          <td class=\"govuk-table__cell\">142</td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n  <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"past-year\">\n    <p class=\"govuk-body\">There is no data for this year yet, check back later</p>\n  </div>\n</div>"
         },
         {
             "name": "tabs-with-anchor-in-panel",
@@ -63,7 +63,7 @@
             "hidden": false,
             "description": "Ensure that anchors that are in tab panels work correctly",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n        <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n          <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n            Tab 1\n          </a>\n        </li>\n        <li class=\"govuk-tabs__list-item\">\n          <a class=\"govuk-tabs__tab\" href=\"#tab-2\">\n            Tab 2\n          </a>\n        </li>\n  </ul>\n      <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n          <h2 class=\"govuk-heading-l\">Tab 1</h2>\n<p class=\"govuk-body\">Testing that when you click the anchor it moves to the anchor point successfully</p>\n<p class=\"govuk-body\"><a class=\"govuk-link\" href=\"#anchor\">Anchor</a></p>\n<p class=\"govuk-body\"><a id=\"anchor\" tabindex=\"0\">Anchor Point</a></p>\n\n      </div>\n      <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"tab-2\">\n          <h2 class=\"govuk-heading-l\">Tab 2</h2>\n\n      </div>\n</div>"
+            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n    <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n      <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n        Tab 1\n      </a>\n    </li>\n    <li class=\"govuk-tabs__list-item\">\n      <a class=\"govuk-tabs__tab\" href=\"#tab-2\">\n        Tab 2\n      </a>\n    </li>\n  </ul>\n  <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n    <h2 class=\"govuk-heading-l\">Tab 1</h2>\n    <p class=\"govuk-body\">Testing that when you click the anchor it moves to the anchor point successfully</p>\n    <p class=\"govuk-body\"><a class=\"govuk-link\" href=\"#anchor\">Anchor</a></p>\n    <p class=\"govuk-body\"><a id=\"anchor\" tabindex=\"0\">Anchor Point</a></p>\n  </div>\n  <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"tab-2\">\n    <h2 class=\"govuk-heading-l\">Tab 2</h2>\n  </div>\n</div>"
         },
         {
             "name": "classes",
@@ -82,7 +82,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-tabs app-tabs--custom-modifier\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n        <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n          <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n            Tab 1\n          </a>\n        </li>\n  </ul>\n      <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n          <p class=\"govuk-body\">Information about tabs</p>\n      </div>\n</div>"
+            "html": "<div class=\"govuk-tabs app-tabs--custom-modifier\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n    <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n      <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n        Tab 1\n      </a>\n    </li>\n  </ul>\n  <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n    <p class=\"govuk-body\">Information about tabs</p>\n  </div>\n</div>"
         },
         {
             "name": "id",
@@ -101,7 +101,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div id=\"my-tabs\" class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n        <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n          <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n            Tab 1\n          </a>\n        </li>\n  </ul>\n      <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n          <p class=\"govuk-body\">Information about tabs</p>\n      </div>\n</div>"
+            "html": "<div id=\"my-tabs\" class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n    <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n      <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n        Tab 1\n      </a>\n    </li>\n  </ul>\n  <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n    <p class=\"govuk-body\">Information about tabs</p>\n  </div>\n</div>"
         },
         {
             "name": "title",
@@ -120,7 +120,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Custom title for Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n        <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n          <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n            Tab 1\n          </a>\n        </li>\n  </ul>\n      <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n          <p class=\"govuk-body\">Information about tabs</p>\n      </div>\n</div>"
+            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Custom title for Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n    <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n      <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n        Tab 1\n      </a>\n    </li>\n  </ul>\n  <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n    <p class=\"govuk-body\">Information about tabs</p>\n  </div>\n</div>"
         },
         {
             "name": "attributes",
@@ -141,7 +141,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-tabs\" data-attribute=\"my data value\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n        <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n          <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n            Tab 1\n          </a>\n        </li>\n  </ul>\n      <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n          <p class=\"govuk-body\">Information about tabs</p>\n      </div>\n</div>"
+            "html": "<div class=\"govuk-tabs\" data-attribute=\"my data value\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n    <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n      <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n        Tab 1\n      </a>\n    </li>\n  </ul>\n  <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n    <p class=\"govuk-body\">Information about tabs</p>\n  </div>\n</div>"
         },
         {
             "name": "item with attributes",
@@ -163,7 +163,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n        <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n          <a class=\"govuk-tabs__tab\" href=\"#tab-1\" data-attribute=\"my-attribute\" data-attribute-2=\"my-attribute-2\">\n            Tab 1\n          </a>\n        </li>\n  </ul>\n      <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n          <p class=\"govuk-body\">Information about tabs</p>\n      </div>\n</div>"
+            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n    <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n      <a class=\"govuk-tabs__tab\" href=\"#tab-1\" data-attribute=\"my-attribute\" data-attribute-2=\"my-attribute-2\">\n        Tab 1\n      </a>\n    </li>\n  </ul>\n  <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n    <p class=\"govuk-body\">Information about tabs</p>\n  </div>\n</div>"
         },
         {
             "name": "panel with attributes",
@@ -185,7 +185,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n        <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n          <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n            Tab 1\n          </a>\n        </li>\n  </ul>\n      <div class=\"govuk-tabs__panel\" id=\"tab-1\" data-attribute=\"my-attribute\" data-attribute-2=\"my-attribute-2\">\n          <p class=\"govuk-body\">Panel text</p>\n      </div>\n</div>"
+            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n    <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n      <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n        Tab 1\n      </a>\n    </li>\n  </ul>\n  <div class=\"govuk-tabs__panel\" id=\"tab-1\" data-attribute=\"my-attribute\" data-attribute-2=\"my-attribute-2\">\n    <p class=\"govuk-body\">Panel text</p>\n  </div>\n</div>"
         },
         {
             "name": "no item list",
@@ -234,7 +234,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n        <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n          <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n            Tab 1\n          </a>\n        </li>\n        <li class=\"govuk-tabs__list-item\">\n          <a class=\"govuk-tabs__tab\" href=\"#tab-2\">\n            Tab 2\n          </a>\n        </li>\n  </ul>\n      <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n          <p class=\"govuk-body\">Panel 1 content</p>\n      </div>\n      <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"tab-2\">\n          <p class=\"govuk-body\">Panel 2 content</p>\n      </div>\n</div>"
+            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n    <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n      <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n        Tab 1\n      </a>\n    </li>\n    <li class=\"govuk-tabs__list-item\">\n      <a class=\"govuk-tabs__tab\" href=\"#tab-2\">\n        Tab 2\n      </a>\n    </li>\n  </ul>\n  <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n    <p class=\"govuk-body\">Panel 1 content</p>\n  </div>\n  <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"tab-2\">\n    <p class=\"govuk-body\">Panel 2 content</p>\n  </div>\n</div>"
         },
         {
             "name": "idPrefix",
@@ -258,7 +258,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n        <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n          <a class=\"govuk-tabs__tab\" href=\"#custom-1\">\n            Tab 1\n          </a>\n        </li>\n        <li class=\"govuk-tabs__list-item\">\n          <a class=\"govuk-tabs__tab\" href=\"#custom-2\">\n            Tab 2\n          </a>\n        </li>\n  </ul>\n      <div class=\"govuk-tabs__panel\" id=\"custom-1\">\n          <p class=\"govuk-body\">Panel 1 content</p>\n      </div>\n      <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"custom-2\">\n          <p class=\"govuk-body\">Panel 2 content</p>\n      </div>\n</div>"
+            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n    <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n      <a class=\"govuk-tabs__tab\" href=\"#custom-1\">\n        Tab 1\n      </a>\n    </li>\n    <li class=\"govuk-tabs__list-item\">\n      <a class=\"govuk-tabs__tab\" href=\"#custom-2\">\n        Tab 2\n      </a>\n    </li>\n  </ul>\n  <div class=\"govuk-tabs__panel\" id=\"custom-1\">\n    <p class=\"govuk-body\">Panel 1 content</p>\n  </div>\n  <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"custom-2\">\n    <p class=\"govuk-body\">Panel 2 content</p>\n  </div>\n</div>"
         },
         {
             "name": "html as text",
@@ -283,7 +283,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n        <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n          <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n            Tab 1\n          </a>\n        </li>\n        <li class=\"govuk-tabs__list-item\">\n          <a class=\"govuk-tabs__tab\" href=\"#tab-2\">\n            Tab 2\n          </a>\n        </li>\n  </ul>\n      <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n          <p class=\"govuk-body\">&lt;p&gt;Panel 1 content&lt;/p&gt;</p>\n      </div>\n      <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"tab-2\">\n          <p class=\"govuk-body\">&lt;p&gt;Panel 2 content&lt;/p&gt;</p>\n      </div>\n</div>"
+            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n    <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n      <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n        Tab 1\n      </a>\n    </li>\n    <li class=\"govuk-tabs__list-item\">\n      <a class=\"govuk-tabs__tab\" href=\"#tab-2\">\n        Tab 2\n      </a>\n    </li>\n  </ul>\n  <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n    <p class=\"govuk-body\">&lt;p&gt;Panel 1 content&lt;/p&gt;</p>\n  </div>\n  <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"tab-2\">\n    <p class=\"govuk-body\">&lt;p&gt;Panel 2 content&lt;/p&gt;</p>\n  </div>\n</div>"
         },
         {
             "name": "html",
@@ -308,7 +308,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n        <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n          <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n            Tab 1\n          </a>\n        </li>\n        <li class=\"govuk-tabs__list-item\">\n          <a class=\"govuk-tabs__tab\" href=\"#tab-2\">\n            Tab 2\n          </a>\n        </li>\n  </ul>\n      <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n          <p>Panel 1 content</p>\n      </div>\n      <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"tab-2\">\n          <p>Panel 2 content</p>\n      </div>\n</div>"
+            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n    <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n      <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n        Tab 1\n      </a>\n    </li>\n    <li class=\"govuk-tabs__list-item\">\n      <a class=\"govuk-tabs__tab\" href=\"#tab-2\">\n        Tab 2\n      </a>\n    </li>\n  </ul>\n  <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n    <p>Panel 1 content</p>\n  </div>\n  <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"tab-2\">\n    <p>Panel 2 content</p>\n  </div>\n</div>"
         }
     ]
 }

---

Action run for cfd7c12

[domoscargin]

Nice - output looks real neat.

I like the macro approach - it makes the general gist of the template easier to read beyond just being helpful for indenting. Plus we seem to have already been using it on Summary List, so good precedent.