govuk_publishing_components 23.2.1 → 23.6.0

data/node_modules/govuk-frontend/govuk/components/tabs/_index.scss

@@ -1,5 +1,4 @@
 @include govuk-exports("govuk/component/tabs") {
-
   .govuk-tabs {
     @include govuk-responsive-margin(1, "top");
     @include govuk-responsive-margin(6, "bottom");
@@ -22,7 +21,7 @@
     @include govuk-font($size: 19);
     margin-left: govuk-spacing(5);
 
-    &::before {
+    &:before {
       @include govuk-text-colour;
       content: "\2014 "; // "— "
       margin-left: - govuk-spacing(5);
@@ -51,7 +50,6 @@
   .js-enabled {
 
     @include govuk-media-query($from: tablet) {
-
       .govuk-tabs__list {
         @include govuk-clearfix;
         margin-bottom: 0;
@@ -74,7 +72,7 @@
         background-color: govuk-colour("light-grey", $legacy: "grey-4");
         text-align: center;
 
-        &::before {
+        &:before {
           content: none;
         }
       }
@@ -108,7 +106,7 @@
 
         margin-bottom: 0;
 
-        &::after {
+        &:after {
           content: "";
           position: absolute;
           top: 0;
@@ -133,6 +131,5 @@
         display: none;
       }
     }
-
   }
 }

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

@@ -0,0 +1,229 @@
+{
+    "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": {
+                            "html": "<h2 class=\"govuk-heading-l\">Past year</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\">1380</td>\n      <td class=\"govuk-table__cell\">1472</td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">Paul Farmer</td>\n      <td class=\"govuk-table__cell\">1129</td>\n      <td class=\"govuk-table__cell\">1083</td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">Rita Patel</td>\n      <td class=\"govuk-table__cell\">1539</td>\n      <td class=\"govuk-table__cell\">1265</td>\n    </tr>\n  </tbody>\n</table>\n"
+                        }
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  \n  <ul class=\"govuk-tabs__list\">\n    \n      \n        \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      \n    \n      \n        \n        <li class=\"govuk-tabs__list-item\">\n          <a class=\"govuk-tabs__tab\" href=\"#past-week\">\n            Past week\n          </a>\n        </li>\n      \n    \n      \n        \n        <li class=\"govuk-tabs__list-item\">\n          <a class=\"govuk-tabs__tab\" href=\"#past-month\">\n            Past month\n          </a>\n        </li>\n      \n    \n      \n        \n        <li class=\"govuk-tabs__list-item\">\n          <a class=\"govuk-tabs__tab\" href=\"#past-year\">\n            Past year\n          </a>\n        </li>\n      \n    \n  </ul>\n  \n  \n    \n      \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    \n  \n    \n      \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    \n  \n    \n      \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    \n  \n    \n      \n      <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"past-year\">\n        <h2 class=\"govuk-heading-l\">Past year</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\">1380</td>\n      <td class=\"govuk-table__cell\">1472</td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">Paul Farmer</td>\n      <td class=\"govuk-table__cell\">1129</td>\n      <td class=\"govuk-table__cell\">1083</td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">Rita Patel</td>\n      <td class=\"govuk-table__cell\">1539</td>\n      <td class=\"govuk-table__cell\">1265</td>\n    </tr>\n  </tbody>\n</table>\n\n      </div>\n    \n  \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"
+                        }
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  \n  <ul class=\"govuk-tabs__list\">\n    \n      \n        \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      \n    \n      \n        \n        <li class=\"govuk-tabs__list-item\">\n          <a class=\"govuk-tabs__tab\" href=\"#tab-2\">\n            Tab 2\n          </a>\n        </li>\n      \n    \n  </ul>\n  \n  \n    \n      \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    \n  \n    \n      \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    \n  \n</div>"
+        },
+        {
+            "name": "classes",
+            "options": {
+                "classes": "app-tabs--custom-modifier"
+            },
+            "html": "<div class=\"govuk-tabs app-tabs--custom-modifier\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  \n  \n</div>"
+        },
+        {
+            "name": "id",
+            "options": {
+                "id": "my-tabs"
+            },
+            "html": "<div id=\"my-tabs\" class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  \n  \n</div>"
+        },
+        {
+            "name": "title",
+            "options": {
+                "title": "Custom title for Contents"
+            },
+            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Custom title for Contents\n  </h2>\n  \n  \n</div>"
+        },
+        {
+            "name": "attributes",
+            "options": {
+                "attributes": {
+                    "data-attribute": "my data value"
+                }
+            },
+            "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  \n  \n</div>"
+        },
+        {
+            "name": "item with attributes",
+            "options": {
+                "items": [
+                    {
+                        "id": "tab-1",
+                        "label": "Tab 1",
+                        "attributes": {
+                            "data-attribute": "my-attribute",
+                            "data-attribute-2": "my-attribute-2"
+                        }
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  \n  <ul class=\"govuk-tabs__list\">\n    \n      \n        \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      \n    \n  </ul>\n  \n  \n    \n      \n      <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n        \n      </div>\n    \n  \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"
+                            }
+                        }
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  \n  <ul class=\"govuk-tabs__list\">\n    \n      \n        \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      \n    \n  </ul>\n  \n  \n    \n      \n      <div class=\"govuk-tabs__panel\" id=\"tab-1\" data-attribute=\"my-attribute\" data-attribute-2=\"my-attribute-2\">\n        Panel text\n      </div>\n    \n  \n</div>"
+        },
+        {
+            "name": "no item list",
+            "options": {
+                "id": "my-tabs",
+                "classes": "app-tabs--custom-modifier"
+            },
+            "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  \n  \n</div>"
+        },
+        {
+            "name": "empty item list",
+            "options": {
+                "items": []
+            },
+            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  \n  \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"
+                        }
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  \n  <ul class=\"govuk-tabs__list\">\n    \n      \n        \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      \n    \n      \n    \n      \n    \n      \n    \n      \n        \n        <li class=\"govuk-tabs__list-item\">\n          <a class=\"govuk-tabs__tab\" href=\"#tab-2\">\n            Tab 2\n          </a>\n        </li>\n      \n    \n  </ul>\n  \n  \n    \n      \n      <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n        Panel 1 content\n      </div>\n    \n  \n    \n  \n    \n  \n    \n  \n    \n      \n      <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"tab-2\">\n        Panel 2 content\n      </div>\n    \n  \n</div>"
+        },
+        {
+            "name": "idPrefix",
+            "options": {
+                "idPrefix": "custom",
+                "items": [
+                    {
+                        "label": "Tab 1",
+                        "panel": {
+                            "text": "Panel 1 content"
+                        }
+                    },
+                    {
+                        "label": "Tab 2",
+                        "panel": {
+                            "text": "Panel 2 content"
+                        }
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  \n  <ul class=\"govuk-tabs__list\">\n    \n      \n        \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      \n    \n      \n        \n        <li class=\"govuk-tabs__list-item\">\n          <a class=\"govuk-tabs__tab\" href=\"#custom-2\">\n            Tab 2\n          </a>\n        </li>\n      \n    \n  </ul>\n  \n  \n    \n      \n      <div class=\"govuk-tabs__panel\" id=\"custom-1\">\n        Panel 1 content\n      </div>\n    \n  \n    \n      \n      <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"custom-2\">\n        Panel 2 content\n      </div>\n    \n  \n</div>"
+        },
+        {
+            "name": "html as text",
+            "options": {
+                "items": [
+                    {
+                        "label": "Tab 1",
+                        "panel": {
+                            "text": "<p>Panel 1 content</p>"
+                        }
+                    },
+                    {
+                        "label": "Tab 2",
+                        "panel": {
+                            "text": "<p>Panel 2 content</p>"
+                        }
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  \n  <ul class=\"govuk-tabs__list\">\n    \n      \n        \n        <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n          <a class=\"govuk-tabs__tab\" href=\"#-1\">\n            Tab 1\n          </a>\n        </li>\n      \n    \n      \n        \n        <li class=\"govuk-tabs__list-item\">\n          <a class=\"govuk-tabs__tab\" href=\"#-2\">\n            Tab 2\n          </a>\n        </li>\n      \n    \n  </ul>\n  \n  \n    \n      \n      <div class=\"govuk-tabs__panel\" id=\"-1\">\n        &lt;p&gt;Panel 1 content&lt;/p&gt;\n      </div>\n    \n  \n    \n      \n      <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"-2\">\n        &lt;p&gt;Panel 2 content&lt;/p&gt;\n      </div>\n    \n  \n</div>"
+        },
+        {
+            "name": "html",
+            "options": {
+                "items": [
+                    {
+                        "label": "Tab 1",
+                        "panel": {
+                            "html": "<p>Panel 1 content</p>"
+                        }
+                    },
+                    {
+                        "label": "Tab 2",
+                        "panel": {
+                            "html": "<p>Panel 2 content</p>"
+                        }
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  \n  <ul class=\"govuk-tabs__list\">\n    \n      \n        \n        <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n          <a class=\"govuk-tabs__tab\" href=\"#-1\">\n            Tab 1\n          </a>\n        </li>\n      \n    \n      \n        \n        <li class=\"govuk-tabs__list-item\">\n          <a class=\"govuk-tabs__tab\" href=\"#-2\">\n            Tab 2\n          </a>\n        </li>\n      \n    \n  </ul>\n  \n  \n    \n      \n      <div class=\"govuk-tabs__panel\" id=\"-1\">\n        <p>Panel 1 content</p>\n      </div>\n    \n  \n    \n      \n      <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"-2\">\n        <p>Panel 2 content</p>\n      </div>\n    \n  \n</div>"
+        }
+    ]
+}

data/node_modules/govuk-frontend/govuk/components/tag/_index.scss

@@ -83,5 +83,4 @@
     color: govuk-shade(govuk-colour("green"), 20);
     background: govuk-tint(govuk-colour("green"), 80);
   }
-
 }

data/node_modules/govuk-frontend/govuk/components/tag/fixtures.json

@@ -0,0 +1,117 @@
+{
+    "component": "tag",
+    "fixtures": [
+        {
+            "name": "default",
+            "options": {
+                "text": "alpha"
+            },
+            "html": "<strong class=\"govuk-tag\">\n  alpha\n</strong>"
+        },
+        {
+            "name": "inactive",
+            "options": {
+                "text": "alpha",
+                "classes": "govuk-tag--inactive"
+            },
+            "html": "<strong class=\"govuk-tag govuk-tag--inactive\">\n  alpha\n</strong>"
+        },
+        {
+            "name": "grey",
+            "options": {
+                "text": "Grey",
+                "classes": "govuk-tag--grey"
+            },
+            "html": "<strong class=\"govuk-tag govuk-tag--grey\">\n  Grey\n</strong>"
+        },
+        {
+            "name": "blue",
+            "options": {
+                "text": "Blue",
+                "classes": "govuk-tag--blue"
+            },
+            "html": "<strong class=\"govuk-tag govuk-tag--blue\">\n  Blue\n</strong>"
+        },
+        {
+            "name": "turquoise",
+            "options": {
+                "text": "Turquoise",
+                "classes": "govuk-tag--turquoise"
+            },
+            "html": "<strong class=\"govuk-tag govuk-tag--turquoise\">\n  Turquoise\n</strong>"
+        },
+        {
+            "name": "green",
+            "options": {
+                "text": "Green",
+                "classes": "govuk-tag--green"
+            },
+            "html": "<strong class=\"govuk-tag govuk-tag--green\">\n  Green\n</strong>"
+        },
+        {
+            "name": "purple",
+            "options": {
+                "text": "Purple",
+                "classes": "govuk-tag--purple"
+            },
+            "html": "<strong class=\"govuk-tag govuk-tag--purple\">\n  Purple\n</strong>"
+        },
+        {
+            "name": "pink",
+            "options": {
+                "text": "Pink",
+                "classes": "govuk-tag--pink"
+            },
+            "html": "<strong class=\"govuk-tag govuk-tag--pink\">\n  Pink\n</strong>"
+        },
+        {
+            "name": "red",
+            "options": {
+                "text": "Red",
+                "classes": "govuk-tag--red"
+            },
+            "html": "<strong class=\"govuk-tag govuk-tag--red\">\n  Red\n</strong>"
+        },
+        {
+            "name": "orange",
+            "options": {
+                "text": "Orange",
+                "classes": "govuk-tag--orange"
+            },
+            "html": "<strong class=\"govuk-tag govuk-tag--orange\">\n  Orange\n</strong>"
+        },
+        {
+            "name": "yellow",
+            "options": {
+                "text": "Yellow",
+                "classes": "govuk-tag--yellow"
+            },
+            "html": "<strong class=\"govuk-tag govuk-tag--yellow\">\n  Yellow\n</strong>"
+        },
+        {
+            "name": "attributes",
+            "options": {
+                "text": "Tag with attributes",
+                "attributes": {
+                    "data-test": "attribute",
+                    "id": "my-tag"
+                }
+            },
+            "html": "<strong class=\"govuk-tag\" data-test=\"attribute\" id=\"my-tag\">\n  Tag with attributes\n</strong>"
+        },
+        {
+            "name": "html as text",
+            "options": {
+                "text": "<span>alpha</span>"
+            },
+            "html": "<strong class=\"govuk-tag\">\n  &lt;span&gt;alpha&lt;/span&gt;\n</strong>"
+        },
+        {
+            "name": "html",
+            "options": {
+                "html": "<span>alpha</span>"
+            },
+            "html": "<strong class=\"govuk-tag\">\n  <span>alpha</span>\n</strong>"
+        }
+    ]
+}

data/node_modules/govuk-frontend/govuk/components/textarea/_index.scss

@@ -43,6 +43,5 @@
     &:focus {
       border-color: $govuk-input-border-colour;
     }
-
   }
 }

data/node_modules/govuk-frontend/govuk/components/textarea/fixtures.json

@@ -0,0 +1,199 @@
+{
+    "component": "textarea",
+    "fixtures": [
+        {
+            "name": "default",
+            "options": {
+                "name": "more-detail",
+                "id": "more-detail",
+                "label": {
+                    "text": "Can you provide more detail?"
+                }
+            },
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"more-detail\">\n    Can you provide more detail?\n  </label>\n\n\n  <textarea class=\"govuk-textarea\" id=\"more-detail\" name=\"more-detail\" rows=\"5\"></textarea>\n</div>"
+        },
+        {
+            "name": "with hint",
+            "options": {
+                "name": "more-detail",
+                "id": "more-detail",
+                "label": {
+                    "text": "Can you provide more detail?"
+                },
+                "hint": {
+                    "text": "Don't include personal or financial information, eg your National Insurance number or credit card details."
+                }
+            },
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"more-detail\">\n    Can you provide more detail?\n  </label>\n\n  \n  \n  <div id=\"more-detail-hint\" class=\"govuk-hint\">\n    Don&#39;t include personal or financial information, eg your National Insurance number or credit card details.\n  </div>\n\n\n  <textarea class=\"govuk-textarea\" id=\"more-detail\" name=\"more-detail\" rows=\"5\" aria-describedby=\"more-detail-hint\"></textarea>\n</div>"
+        },
+        {
+            "name": "with error message",
+            "options": {
+                "name": "no-ni-reason",
+                "id": "no-ni-reason",
+                "label": {
+                    "text": "Why can’t you provide a National Insurance number?"
+                },
+                "errorMessage": {
+                    "text": "You must provide an explanation"
+                }
+            },
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"no-ni-reason\">\n    Why can’t you provide a National Insurance number?\n  </label>\n\n\n  \n  \n  <span id=\"no-ni-reason-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> You must provide an explanation\n  </span>\n\n  <textarea class=\"govuk-textarea govuk-textarea--error\" id=\"no-ni-reason\" name=\"no-ni-reason\" rows=\"5\" aria-describedby=\"no-ni-reason-error\"></textarea>\n</div>"
+        },
+        {
+            "name": "with default value",
+            "options": {
+                "id": "full-address",
+                "name": "address",
+                "value": "221B Baker Street\nLondon\nNW1 6XE\n",
+                "label": {
+                    "text": "Full address"
+                }
+            },
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"full-address\">\n    Full address\n  </label>\n\n\n  <textarea class=\"govuk-textarea\" id=\"full-address\" name=\"address\" rows=\"5\">221B Baker Street\nLondon\nNW1 6XE\n</textarea>\n</div>"
+        },
+        {
+            "name": "with custom rows",
+            "options": {
+                "id": "full-address",
+                "name": "address",
+                "label": {
+                    "text": "Full address"
+                },
+                "rows": 8
+            },
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"full-address\">\n    Full address\n  </label>\n\n\n  <textarea class=\"govuk-textarea\" id=\"full-address\" name=\"address\" rows=\"8\"></textarea>\n</div>"
+        },
+        {
+            "name": "with label as page heading",
+            "options": {
+                "id": "textarea-with-page-heading",
+                "name": "address",
+                "label": {
+                    "text": "Full address",
+                    "isPageHeading": true
+                }
+            },
+            "html": "<div class=\"govuk-form-group\">\n  <h1 class=\"govuk-label-wrapper\">\n    <label class=\"govuk-label\" for=\"textarea-with-page-heading\">\n      Full address\n    </label>\n    </h1>\n\n\n  <textarea class=\"govuk-textarea\" id=\"textarea-with-page-heading\" name=\"address\" rows=\"5\"></textarea>\n</div>"
+        },
+        {
+            "name": "with optional form-group classes",
+            "options": {
+                "id": "textarea-with-page-heading",
+                "name": "address",
+                "label": {
+                    "text": "Full address"
+                },
+                "formGroup": {
+                    "classes": "extra-class"
+                }
+            },
+            "html": "<div class=\"govuk-form-group extra-class\">\n  <label class=\"govuk-label\" for=\"textarea-with-page-heading\">\n    Full address\n  </label>\n\n\n  <textarea class=\"govuk-textarea\" id=\"textarea-with-page-heading\" name=\"address\" rows=\"5\"></textarea>\n</div>"
+        },
+        {
+            "name": "with autocomplete attribute",
+            "options": {
+                "id": "textarea-with-autocomplete-attribute",
+                "name": "address",
+                "label": {
+                    "text": "Full address"
+                },
+                "autocomplete": "street-address"
+            },
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"textarea-with-autocomplete-attribute\">\n    Full address\n  </label>\n\n\n  <textarea class=\"govuk-textarea\" id=\"textarea-with-autocomplete-attribute\" name=\"address\" rows=\"5\" autocomplete=\"street-address\"></textarea>\n</div>"
+        },
+        {
+            "name": "with spellcheck enabled",
+            "options": {
+                "label": {
+                    "text": "Spellcheck is enabled"
+                },
+                "id": "textarea-with-spellcheck-enabled",
+                "name": "spellcheck",
+                "spellcheck": true
+            },
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"textarea-with-spellcheck-enabled\">\n    Spellcheck is enabled\n  </label>\n\n\n  <textarea class=\"govuk-textarea\" id=\"textarea-with-spellcheck-enabled\" name=\"spellcheck\" rows=\"5\" spellcheck=\"true\"></textarea>\n</div>"
+        },
+        {
+            "name": "with spellcheck disabled",
+            "options": {
+                "label": {
+                    "text": "Spellcheck is disabled"
+                },
+                "id": "textarea-with-spellcheck-disabled",
+                "name": "spellcheck",
+                "spellcheck": false
+            },
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"textarea-with-spellcheck-disabled\">\n    Spellcheck is disabled\n  </label>\n\n\n  <textarea class=\"govuk-textarea\" id=\"textarea-with-spellcheck-disabled\" name=\"spellcheck\" rows=\"5\" spellcheck=\"false\"></textarea>\n</div>"
+        },
+        {
+            "name": "classes",
+            "options": {
+                "classes": "app-textarea--custom-modifier"
+            },
+            "html": "<div class=\"govuk-form-group\">\n  \n\n\n  <textarea class=\"govuk-textarea app-textarea--custom-modifier\" id=\"\" name=\"\" rows=\"5\"></textarea>\n</div>"
+        },
+        {
+            "name": "attributes",
+            "options": {
+                "attributes": {
+                    "data-attribute": "my data value"
+                }
+            },
+            "html": "<div class=\"govuk-form-group\">\n  \n\n\n  <textarea class=\"govuk-textarea\" id=\"\" name=\"\" rows=\"5\" data-attribute=\"my data value\"></textarea>\n</div>"
+        },
+        {
+            "name": "with describedBy",
+            "options": {
+                "describedBy": "some-id"
+            },
+            "html": "<div class=\"govuk-form-group\">\n  \n\n\n  <textarea class=\"govuk-textarea\" id=\"\" name=\"\" rows=\"5\" aria-describedby=\"some-id\"></textarea>\n</div>"
+        },
+        {
+            "name": "with hint and described by",
+            "options": {
+                "describedBy": "some-id",
+                "hint": {
+                    "text": "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
+                }
+            },
+            "html": "<div class=\"govuk-form-group\">\n  \n\n  \n  \n  <div id=\"undefined-hint\" class=\"govuk-hint\">\n    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n  </div>\n\n\n  <textarea class=\"govuk-textarea\" id=\"\" name=\"\" rows=\"5\" aria-describedby=\"some-id undefined-hint\"></textarea>\n</div>"
+        },
+        {
+            "name": "with error message and described by",
+            "options": {
+                "describedBy": "some-id",
+                "id": "textarea-with-error",
+                "errorMessage": {
+                    "text": "Error message"
+                }
+            },
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  \n\n\n  \n  \n  <span id=\"textarea-with-error-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </span>\n\n  <textarea class=\"govuk-textarea govuk-textarea--error\" id=\"textarea-with-error\" name=\"\" rows=\"5\" aria-describedby=\"some-id textarea-with-error-error\"></textarea>\n</div>"
+        },
+        {
+            "name": "with hint and error message",
+            "options": {
+                "errorMessage": {
+                    "text": "Error message"
+                },
+                "hint": {
+                    "text": "Hint"
+                }
+            },
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  \n\n  \n  \n  <div id=\"undefined-hint\" class=\"govuk-hint\">\n    Hint\n  </div>\n\n\n  \n  \n  <span id=\"undefined-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </span>\n\n  <textarea class=\"govuk-textarea govuk-textarea--error\" id=\"\" name=\"\" rows=\"5\" aria-describedby=\"undefined-hint undefined-error\"></textarea>\n</div>"
+        },
+        {
+            "name": "with hint, error message and described by",
+            "options": {
+                "describedBy": "some-id",
+                "errorMessage": {
+                    "text": "Error message"
+                },
+                "hint": {
+                    "text": "Hint"
+                }
+            },
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  \n\n  \n  \n  <div id=\"undefined-hint\" class=\"govuk-hint\">\n    Hint\n  </div>\n\n\n  \n  \n  <span id=\"undefined-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </span>\n\n  <textarea class=\"govuk-textarea govuk-textarea--error\" id=\"\" name=\"\" rows=\"5\" aria-describedby=\"some-id undefined-hint undefined-error\"></textarea>\n</div>"
+        }
+    ]
+}