govuk_publishing_components 39.2.5 → 40.0.0

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

@@ -0,0 +1,314 @@
+{
+    "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": "",
+            "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>"
+        },
+        {
+            "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",
+            "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>"
+        },
+        {
+            "name": "classes",
+            "options": {
+                "classes": "app-tabs--custom-modifier",
+                "items": [
+                    {
+                        "label": "Tab 1",
+                        "id": "tab-1",
+                        "panel": {
+                            "text": "Information about tabs"
+                        }
+                    }
+                ]
+            },
+            "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>"
+        },
+        {
+            "name": "id",
+            "options": {
+                "id": "my-tabs",
+                "items": [
+                    {
+                        "label": "Tab 1",
+                        "id": "tab-1",
+                        "panel": {
+                            "text": "Information about tabs"
+                        }
+                    }
+                ]
+            },
+            "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>"
+        },
+        {
+            "name": "title",
+            "options": {
+                "title": "Custom title for Contents",
+                "items": [
+                    {
+                        "label": "Tab 1",
+                        "id": "tab-1",
+                        "panel": {
+                            "text": "Information about tabs"
+                        }
+                    }
+                ]
+            },
+            "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>"
+        },
+        {
+            "name": "attributes",
+            "options": {
+                "attributes": {
+                    "data-attribute": "my data value"
+                },
+                "items": [
+                    {
+                        "label": "Tab 1",
+                        "id": "tab-1",
+                        "panel": {
+                            "text": "Information about tabs"
+                        }
+                    }
+                ]
+            },
+            "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>"
+        },
+        {
+            "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": "",
+            "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>"
+        },
+        {
+            "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": "",
+            "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>"
+        },
+        {
+            "name": "no item list",
+            "options": {
+                "id": "my-tabs",
+                "classes": "app-tabs--custom-modifier"
+            },
+            "hidden": true,
+            "description": "",
+            "previewLayoutModifiers": [],
+            "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": "",
+            "previewLayoutModifiers": [],
+            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n</div>"
+        },
+        {
+            "name": "with falsey 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": "",
+            "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>"
+        },
+        {
+            "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": "",
+            "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>"
+        },
+        {
+            "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": "",
+            "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>"
+        },
+        {
+            "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": "",
+            "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>"
+        }
+    ]
+}

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

@@ -0,0 +1,84 @@
+[
+    {
+        "name": "id",
+        "type": "string",
+        "required": false,
+        "description": "This is used for the main component and to compose the ID attribute for each item."
+    },
+    {
+        "name": "idPrefix",
+        "type": "string",
+        "required": false,
+        "description": "Optional prefix. This is used to prefix the `id` attribute for each tab item and panel, separated by `-`."
+    },
+    {
+        "name": "title",
+        "type": "string",
+        "required": false,
+        "description": "Title for the tabs table of contents."
+    },
+    {
+        "name": "items",
+        "type": "array",
+        "required": true,
+        "description": "The individual tabs within the tabs component.",
+        "params": [
+            {
+                "name": "id",
+                "type": "string",
+                "required": true,
+                "description": "Specific ID attribute for the tab item. If omitted, then `idPrefix` string is required instead."
+            },
+            {
+                "name": "label",
+                "type": "string",
+                "required": true,
+                "description": "The text label of a tab item."
+            },
+            {
+                "name": "attributes",
+                "type": "object",
+                "required": false,
+                "description": "HTML attributes (for example data attributes) to add to the tab."
+            },
+            {
+                "name": "panel",
+                "description": "The contents of each tab within the tabs component. This is referenced as a panel.",
+                "type": "object",
+                "required": true,
+                "params": [
+                    {
+                        "name": "text",
+                        "type": "string",
+                        "required": true,
+                        "description": "If `html` is set, this is not required. Text to use within each tab panel. 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 to use within each tab panel. If `html` is provided, the `text` option will be ignored."
+                    },
+                    {
+                        "name": "attributes",
+                        "type": "object",
+                        "required": false,
+                        "description": "HTML attributes (for example data attributes) to add to the tab panel."
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        "name": "classes",
+        "type": "string",
+        "required": false,
+        "description": "Classes to add to the tabs component."
+    },
+    {
+        "name": "attributes",
+        "type": "object",
+        "required": false,
+        "description": "HTML attributes (for example data attributes) to add to the tabs component."
+    }
+]