govuk_tech_docs 6.6.0.rc.local.tested → 6.6.0

data/node_modules/govuk-frontend/dist/govuk/components/table/macro-options.json

@@ -0,0 +1,132 @@
+[
+    {
+        "name": "rows",
+        "type": "array",
+        "required": true,
+        "description": "The rows within the table component.",
+        "params": [
+            {
+                "name": "text",
+                "type": "string",
+                "required": true,
+                "description": "If `html` is set, this is not required. Text for cells in table rows. If `html` is provided, the `text` option will be ignored."
+            },
+            {
+                "name": "html",
+                "type": "string",
+                "required": true,
+                "description": "If `text` is set, this is not required. HTML for cells in table rows. If `html` is provided, the `text` option will be ignored."
+            },
+            {
+                "name": "format",
+                "type": "string",
+                "required": false,
+                "description": "Specify format of a cell. Currently we only use \"numeric\"."
+            },
+            {
+                "name": "classes",
+                "type": "string",
+                "required": false,
+                "description": "Classes to add to the table row cell."
+            },
+            {
+                "name": "colspan",
+                "type": "integer",
+                "required": false,
+                "description": "Specify how many columns a cell extends."
+            },
+            {
+                "name": "rowspan",
+                "type": "integer",
+                "required": false,
+                "description": "Specify how many rows a cell extends."
+            },
+            {
+                "name": "attributes",
+                "type": "object",
+                "required": false,
+                "description": "HTML attributes (for example data attributes) to add to the table cell."
+            }
+        ]
+    },
+    {
+        "name": "head",
+        "type": "array",
+        "required": false,
+        "description": "Can be used to add a row of table header cells (`<th>`) at the top of the table component.",
+        "params": [
+            {
+                "name": "text",
+                "type": "string",
+                "required": false,
+                "description": "If `html` is set, this is not required. Text for table head cells. If `html` is provided, the `text` option will be ignored."
+            },
+            {
+                "name": "html",
+                "type": "string",
+                "required": false,
+                "description": "If `text` is set, this is not required. HTML for table head cells. If `html` is provided, the `text` option will be ignored."
+            },
+            {
+                "name": "format",
+                "type": "string",
+                "required": false,
+                "description": "Specify format of a cell. Currently we only use \"numeric\"."
+            },
+            {
+                "name": "classes",
+                "type": "string",
+                "required": false,
+                "description": "Classes to add to the table head cell."
+            },
+            {
+                "name": "colspan",
+                "type": "integer",
+                "required": false,
+                "description": "Specify how many columns a cell extends."
+            },
+            {
+                "name": "rowspan",
+                "type": "integer",
+                "required": false,
+                "description": "Specify how many rows a cell extends."
+            },
+            {
+                "name": "attributes",
+                "type": "object",
+                "required": false,
+                "description": "HTML attributes (for example data attributes) to add to the table cell."
+            }
+        ]
+    },
+    {
+        "name": "caption",
+        "type": "string",
+        "required": false,
+        "description": "Caption text."
+    },
+    {
+        "name": "captionClasses",
+        "type": "string",
+        "required": false,
+        "description": "Classes for caption text size. Classes should correspond to the available typography heading classes."
+    },
+    {
+        "name": "firstCellIsHeader",
+        "type": "boolean",
+        "required": false,
+        "description": "If set to `true`, the first cell in each row will be a table header (`<th>`)."
+    },
+    {
+        "name": "classes",
+        "type": "string",
+        "required": false,
+        "description": "Classes to add to the table container."
+    },
+    {
+        "name": "attributes",
+        "type": "object",
+        "required": false,
+        "description": "HTML attributes (for example data attributes) to add to the table container."
+    }
+]

data/node_modules/govuk-frontend/dist/govuk/components/table/macro.njk

@@ -0,0 +1,3 @@
+{% macro govukTable(params) %}
+  {%- include "./template.njk" -%}
+{% endmacro %}

data/node_modules/govuk-frontend/dist/govuk/components/table/template-default.html

@@ -0,0 +1,19 @@
+<table class="govuk-table">
+  <tbody class="govuk-table__body">
+    <tr class="govuk-table__row">
+      <td class="govuk-table__cell">January</td>
+      <td class="govuk-table__cell govuk-table__cell--numeric">£85</td>
+      <td class="govuk-table__cell govuk-table__cell--numeric">£95</td>
+    </tr>
+    <tr class="govuk-table__row">
+      <td class="govuk-table__cell">February</td>
+      <td class="govuk-table__cell govuk-table__cell--numeric">£75</td>
+      <td class="govuk-table__cell govuk-table__cell--numeric">£55</td>
+    </tr>
+    <tr class="govuk-table__row">
+      <td class="govuk-table__cell">March</td>
+      <td class="govuk-table__cell govuk-table__cell--numeric">£165</td>
+      <td class="govuk-table__cell govuk-table__cell--numeric">£125</td>
+    </tr>
+  </tbody>
+</table>

data/node_modules/govuk-frontend/dist/govuk/components/table/template-with-head-and-caption.html

@@ -0,0 +1,27 @@
+<table class="govuk-table">
+  <caption class="govuk-table__caption govuk-table__caption--m">Caption 1: Months and rates</caption>
+  <thead class="govuk-table__head">
+    <tr class="govuk-table__row">
+      <th scope="col" class="govuk-table__header">Month you apply</th>
+      <th scope="col" class="govuk-table__header govuk-table__header--numeric">Rate for bicycles</th>
+      <th scope="col" class="govuk-table__header govuk-table__header--numeric">Rate for vehicles</th>
+    </tr>
+  </thead>
+  <tbody class="govuk-table__body">
+    <tr class="govuk-table__row">
+      <th scope="row" class="govuk-table__header">January</th>
+      <td class="govuk-table__cell govuk-table__cell--numeric">£85</td>
+      <td class="govuk-table__cell govuk-table__cell--numeric">£95</td>
+    </tr>
+    <tr class="govuk-table__row">
+      <th scope="row" class="govuk-table__header">February</th>
+      <td class="govuk-table__cell govuk-table__cell--numeric">£75</td>
+      <td class="govuk-table__cell govuk-table__cell--numeric">£55</td>
+    </tr>
+    <tr class="govuk-table__row">
+      <th scope="row" class="govuk-table__header">March</th>
+      <td class="govuk-table__cell govuk-table__cell--numeric">£165</td>
+      <td class="govuk-table__cell govuk-table__cell--numeric">£125</td>
+    </tr>
+  </tbody>
+</table>

data/node_modules/govuk-frontend/dist/govuk/components/table/template-with-head.html

@@ -0,0 +1,26 @@
+<table class="govuk-table">
+  <thead class="govuk-table__head">
+    <tr class="govuk-table__row">
+      <th scope="col" class="govuk-table__header">Month you apply</th>
+      <th scope="col" class="govuk-table__header govuk-table__header--numeric">Rate for bicycles</th>
+      <th scope="col" class="govuk-table__header govuk-table__header--numeric">Rate for vehicles</th>
+    </tr>
+  </thead>
+  <tbody class="govuk-table__body">
+    <tr class="govuk-table__row">
+      <td class="govuk-table__cell">January</td>
+      <td class="govuk-table__cell govuk-table__cell--numeric">£85</td>
+      <td class="govuk-table__cell govuk-table__cell--numeric">£95</td>
+    </tr>
+    <tr class="govuk-table__row">
+      <td class="govuk-table__cell">February</td>
+      <td class="govuk-table__cell govuk-table__cell--numeric">£75</td>
+      <td class="govuk-table__cell govuk-table__cell--numeric">£55</td>
+    </tr>
+    <tr class="govuk-table__row">
+      <td class="govuk-table__cell">March</td>
+      <td class="govuk-table__cell govuk-table__cell--numeric">£165</td>
+      <td class="govuk-table__cell govuk-table__cell--numeric">£125</td>
+    </tr>
+  </tbody>
+</table>

data/node_modules/govuk-frontend/dist/govuk/components/table/template.njk

@@ -0,0 +1,57 @@
+{% from "../../macros/attributes.njk" import govukAttributes -%}
+
+<table class="govuk-table
+  {%- if params.classes %} {{ params.classes }}{% endif %}"
+  {{- govukAttributes(params.attributes) }}>
+{% if params.caption %}
+  <caption class="govuk-table__caption
+    {%- if params.captionClasses %} {{ params.captionClasses }}{% endif %}">
+    {{- params.caption -}}
+  </caption>
+{% endif %}
+{% if params.head %}
+  <thead class="govuk-table__head">
+    <tr class="govuk-table__row">
+    {% for item in params.head %}
+      <th scope="col" class="govuk-table__header
+        {%- if item.format %} govuk-table__header--{{ item.format }}{% endif %}
+        {%- if item.classes %} {{ item.classes }}{% endif %}"
+        {%- if item.colspan %} colspan="{{ item.colspan }}"{% endif %}
+        {%- if item.rowspan %} rowspan="{{ item.rowspan }}"{% endif %}
+        {{- govukAttributes(item.attributes) }}>
+          {{- item.html | safe if item.html else item.text -}}
+        </th>
+    {% endfor %}
+    </tr>
+  </thead>
+{% endif %}
+  <tbody class="govuk-table__body">
+{% for row in params.rows %}
+  {% if row %}
+    <tr class="govuk-table__row">
+    {% for cell in row %}
+      {% set commonAttributes %}
+        {%- if cell.colspan %} colspan="{{ cell.colspan }}"{% endif %}
+        {%- if cell.rowspan %} rowspan="{{ cell.rowspan }}"{% endif %}
+        {{- govukAttributes(cell.attributes) -}}
+      {% endset %}
+      {% if loop.first and params.firstCellIsHeader %}
+      <th scope="row" class="govuk-table__header
+        {%- if cell.classes %} {{ cell.classes }}{% endif %}"
+        {{- commonAttributes | safe }}>
+        {{- cell.html | safe if cell.html else cell.text -}}
+      </th>
+      {% else %}
+      <td class="govuk-table__cell
+        {%- if cell.format %} govuk-table__cell--{{ cell.format }}{% endif %}
+        {%- if cell.classes %} {{ cell.classes }}{% endif %}"
+        {{- commonAttributes | safe }}>
+        {{- cell.html | safe if cell.html else cell.text -}}
+      </td>
+      {% endif %}
+    {% endfor %}
+    </tr>
+  {% endif %}
+{% endfor %}
+  </tbody>
+</table>

data/node_modules/govuk-frontend/dist/govuk/components/tabs/README.md

@@ -0,0 +1,15 @@
+# Tabs
+
+## Installation
+
+See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
+
+## Guidance and Examples
+
+Find out when to use the tabs component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/tabs).
+
+## Component options
+
+Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
+
+See [options table](https://design-system.service.gov.uk/components/tabs/#options-tabs-example) for details.

data/node_modules/govuk-frontend/dist/govuk/components/tabs/fixtures.json

@@ -0,0 +1,333 @@
+{
+    "component": "tabs",
+    "fixtures": [
+        {
+            "name": "default",
+            "options": {
+                "items": [
+                    {
+                        "label": "Past day",
+                        "id": "past-day",
+                        "panel": {
+                            "html": "<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"
+                        }
+                    },
+                    {
+                        "label": "Past week",
+                        "id": "past-week",
+                        "panel": {
+                            "html": "<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"
+                        }
+                    },
+                    {
+                        "label": "Past month",
+                        "id": "past-month",
+                        "panel": {
+                            "html": "<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"
+                        }
+                    },
+                    {
+                        "label": "Past year",
+                        "id": "past-year",
+                        "panel": {
+                            "text": "There is no data for this year yet, check back later"
+                        }
+                    }
+                ]
+            },
+            "hidden": false,
+            "description": "",
+            "pageTemplateOptions": {},
+            "screenshot": {
+                "variants": [
+                    "default",
+                    "no-js"
+                ]
+            },
+            "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": "classes",
+            "options": {
+                "classes": "app-tabs--custom-modifier",
+                "items": [
+                    {
+                        "label": "Tab 1",
+                        "id": "tab-1",
+                        "panel": {
+                            "text": "Information about tabs"
+                        }
+                    }
+                ]
+            },
+            "hidden": true,
+            "description": "",
+            "pageTemplateOptions": {},
+            "screenshot": false,
+            "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",
+            "options": {
+                "id": "my-tabs",
+                "items": [
+                    {
+                        "label": "Tab 1",
+                        "id": "tab-1",
+                        "panel": {
+                            "text": "Information about tabs"
+                        }
+                    }
+                ]
+            },
+            "hidden": true,
+            "description": "",
+            "pageTemplateOptions": {},
+            "screenshot": false,
+            "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",
+            "options": {
+                "title": "Custom title for Contents",
+                "items": [
+                    {
+                        "label": "Tab 1",
+                        "id": "tab-1",
+                        "panel": {
+                            "text": "Information about tabs"
+                        }
+                    }
+                ]
+            },
+            "hidden": true,
+            "description": "",
+            "pageTemplateOptions": {},
+            "screenshot": false,
+            "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",
+            "options": {
+                "attributes": {
+                    "data-attribute": "my data value"
+                },
+                "items": [
+                    {
+                        "label": "Tab 1",
+                        "id": "tab-1",
+                        "panel": {
+                            "text": "Information about tabs"
+                        }
+                    }
+                ]
+            },
+            "hidden": true,
+            "description": "",
+            "pageTemplateOptions": {},
+            "screenshot": false,
+            "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",
+            "options": {
+                "items": [
+                    {
+                        "id": "tab-1",
+                        "label": "Tab 1",
+                        "panel": {
+                            "text": "Information about tabs"
+                        },
+                        "attributes": {
+                            "data-attribute": "my-attribute",
+                            "data-attribute-2": "my-attribute-2"
+                        }
+                    }
+                ]
+            },
+            "hidden": true,
+            "description": "",
+            "pageTemplateOptions": {},
+            "screenshot": false,
+            "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",
+            "options": {
+                "items": [
+                    {
+                        "id": "tab-1",
+                        "label": "Tab 1",
+                        "panel": {
+                            "text": "Panel text",
+                            "attributes": {
+                                "data-attribute": "my-attribute",
+                                "data-attribute-2": "my-attribute-2"
+                            }
+                        }
+                    }
+                ]
+            },
+            "hidden": true,
+            "description": "",
+            "pageTemplateOptions": {},
+            "screenshot": false,
+            "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",
+            "options": {
+                "id": "my-tabs",
+                "classes": "app-tabs--custom-modifier"
+            },
+            "hidden": true,
+            "description": "",
+            "pageTemplateOptions": {},
+            "screenshot": false,
+            "html": "<div id=\"my-tabs\" class=\"govuk-tabs app-tabs--custom-modifier\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n</div>"
+        },
+        {
+            "name": "empty item list",
+            "options": {
+                "items": []
+            },
+            "hidden": true,
+            "description": "",
+            "pageTemplateOptions": {},
+            "screenshot": false,
+            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n</div>"
+        },
+        {
+            "name": "with falsy values",
+            "options": {
+                "items": [
+                    {
+                        "label": "Tab 1",
+                        "id": "tab-1",
+                        "panel": {
+                            "text": "Panel 1 content"
+                        }
+                    },
+                    null,
+                    false,
+                    "",
+                    {
+                        "label": "Tab 2",
+                        "id": "tab-2",
+                        "panel": {
+                            "text": "Panel 2 content"
+                        }
+                    }
+                ]
+            },
+            "hidden": true,
+            "description": "",
+            "pageTemplateOptions": {},
+            "screenshot": false,
+            "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",
+            "options": {
+                "idPrefix": "custom",
+                "items": [
+                    {
+                        "label": "Tab 1",
+                        "panel": {
+                            "text": "Panel 1 content"
+                        }
+                    },
+                    {
+                        "label": "Tab 2",
+                        "panel": {
+                            "text": "Panel 2 content"
+                        }
+                    }
+                ]
+            },
+            "hidden": true,
+            "description": "",
+            "pageTemplateOptions": {},
+            "screenshot": false,
+            "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",
+            "options": {
+                "items": [
+                    {
+                        "label": "Tab 1",
+                        "id": "tab-1",
+                        "panel": {
+                            "text": "<p>Panel 1 content</p>"
+                        }
+                    },
+                    {
+                        "label": "Tab 2",
+                        "id": "tab-2",
+                        "panel": {
+                            "text": "<p>Panel 2 content</p>"
+                        }
+                    }
+                ]
+            },
+            "hidden": true,
+            "description": "",
+            "pageTemplateOptions": {},
+            "screenshot": false,
+            "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",
+            "options": {
+                "items": [
+                    {
+                        "label": "Tab 1",
+                        "id": "tab-1",
+                        "panel": {
+                            "html": "<p>Panel 1 content</p>"
+                        }
+                    },
+                    {
+                        "label": "Tab 2",
+                        "id": "tab-2",
+                        "panel": {
+                            "html": "<p>Panel 2 content</p>"
+                        }
+                    }
+                ]
+            },
+            "hidden": true,
+            "description": "",
+            "pageTemplateOptions": {},
+            "screenshot": false,
+            "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>"
+        },
+        {
+            "name": "tabs-with-anchor-in-panel",
+            "options": {
+                "items": [
+                    {
+                        "label": "Tab 1",
+                        "id": "tab-1",
+                        "panel": {
+                            "html": "<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"
+                        }
+                    },
+                    {
+                        "label": "Tab 2",
+                        "id": "tab-2",
+                        "panel": {
+                            "html": "<h2 class=\"govuk-heading-l\">Tab 2</h2>\n"
+                        }
+                    }
+                ]
+            },
+            "hidden": false,
+            "description": "Ensure that anchors that are in tab panels work correctly",
+            "pageTemplateOptions": {},
+            "screenshot": false,
+            "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>"
+        }
+    ]
+}