Move screenshot config to YAML by domoscargin · Pull Request #6073 · alphagov/govuk-frontend

domoscargin · 2025-07-03T15:53:02Z

We may not want to screenshot default examples by, er, default. Move component screenshot config entirely to its fixtures YAML.

Note: I've removed redundant no-js tests, so there are 7 expected missing screenshots.

Partially resolves #6053

Variants

With the screenshot option overloaded, we can either take a standard snapshot, or set the page up in different ways with screenshot variants

This PR adds the variants:

default for taking a standard screenshot, no extra set up.
no-js for taking a screenshot with JavaScript disabled

Other variants I explored, or that we might want to explore include:

adding widths - we dismissed this as our snapshots are already taken at two widths by default and we don't gain much by tweaking that.
something to focus on visually hidden elements, or tab to the first element (which would reveal the skip link, for example)
A way to do more custom things (ie, interact with the page to set up a certain state) without hardcoding them in the snapshot logic

Non-component examples

This PR doesn't add any config for non-component examples (ie: they're still hardcoded in the screenshotting logic). My suggestion is just to add minimal YAML files to those examples and have everything run off YAML, rather than to use frontmatter in the example file itself.

github-actions · 2025-07-03T15:54:25Z

📋 Stats

File sizes

File	Size
dist/govuk-frontend-development.min.css	128.47 KiB
dist/govuk-frontend-development.min.js	48.07 KiB
packages/govuk-frontend/dist/govuk/all.bundle.js	102.17 KiB
packages/govuk-frontend/dist/govuk/all.bundle.mjs	95.95 KiB
packages/govuk-frontend/dist/govuk/all.mjs	1.28 KiB
packages/govuk-frontend/dist/govuk/component.mjs	1.67 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend.min.css	128.45 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend.min.js	48.05 KiB
packages/govuk-frontend/dist/govuk/i18n.mjs	5.55 KiB
packages/govuk-frontend/dist/govuk/init.mjs	6.89 KiB

Modules

File	Size (bundled)	Size (minified)
all.mjs	90.17 KiB	45.66 KiB
accordion.mjs	26.58 KiB	13.41 KiB
button.mjs	9.09 KiB	3.79 KiB
character-count.mjs	25.48 KiB	11 KiB
checkboxes.mjs	7.76 KiB	3.42 KiB
error-summary.mjs	10.99 KiB	4.55 KiB
exit-this-page.mjs	20.2 KiB	10.34 KiB
file-upload.mjs	20.83 KiB	11.11 KiB
header.mjs	6.47 KiB	3.27 KiB
notification-banner.mjs	9.35 KiB	3.71 KiB
password-input.mjs	18.16 KiB	8.34 KiB
radios.mjs	6.76 KiB	2.98 KiB
service-navigation.mjs	6.38 KiB	3.25 KiB
skip-link.mjs	6.34 KiB	2.76 KiB
tabs.mjs	11.98 KiB	6.66 KiB

View stats and visualisations on the review app

Action run for a246e59

github-actions · 2025-07-07T08:03:16Z

Other changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/components/accordion/fixtures.json b/packages/govuk-frontend/dist/govuk/components/accordion/fixtures.json
index bbb340a24..a20c2b74b 100644
--- a/packages/govuk-frontend/dist/govuk/components/accordion/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/accordion/fixtures.json
@@ -27,7 +27,12 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "screenshot": false,
+            "screenshot": {
+                "variants": [
+                    "default",
+                    "no-js"
+                ]
+            },
             "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"default-example\">\n  <div class=\"govuk-accordion__section\">\n    <div class=\"govuk-accordion__section-header\">\n      <h2 class=\"govuk-accordion__section-heading\">\n        <span class=\"govuk-accordion__section-button\" id=\"default-example-heading-1\">\n          Section A\n        </span>\n      </h2>\n    </div>\n    <div id=\"default-example-content-1\" class=\"govuk-accordion__section-content\">\n      <p class=\"govuk-body\">\n        We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.\n      </p>\n    </div>\n  </div>\n  <div class=\"govuk-accordion__section\">\n    <div class=\"govuk-accordion__section-header\">\n      <h2 class=\"govuk-accordion__section-heading\">\n        <span class=\"govuk-accordion__section-button\" id=\"default-example-heading-2\">\n          Section B\n        </span>\n      </h2>\n    </div>\n    <div id=\"default-example-content-2\" class=\"govuk-accordion__section-content\">\n      <ul class=\"govuk-list govuk-list--bullet\">\n        <li>Example item 2</li>\n      </ul>\n    </div>\n  </div>\n</div>"
         },
         {
diff --git a/packages/govuk-frontend/dist/govuk/components/back-link/fixtures.json b/packages/govuk-frontend/dist/govuk/components/back-link/fixtures.json
index ec54516a7..98bf243dc 100644
--- a/packages/govuk-frontend/dist/govuk/components/back-link/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/back-link/fixtures.json
@@ -7,7 +7,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "screenshot": false,
+            "screenshot": true,
             "html": "<a href=\"#\" class=\"govuk-back-link\">Back</a>"
         },
         {
diff --git a/packages/govuk-frontend/dist/govuk/components/breadcrumbs/fixtures.json b/packages/govuk-frontend/dist/govuk/components/breadcrumbs/fixtures.json
index 5da6f0a52..ab09cb476 100644
--- a/packages/govuk-frontend/dist/govuk/components/breadcrumbs/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/breadcrumbs/fixtures.json
@@ -18,7 +18,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "screenshot": false,
+            "screenshot": true,
             "html": "<nav class=\"govuk-breadcrumbs\" aria-label=\"Breadcrumb\">\n  <ol class=\"govuk-breadcrumbs__list\">\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section\">Section</a>\n    </li>\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section/sub-section\">Sub-section</a>\n    </li>\n  </ol>\n</nav>"
         },
         {
diff --git a/packages/govuk-frontend/dist/govuk/components/button/fixtures.json b/packages/govuk-frontend/dist/govuk/components/button/fixtures.json
index 389b32dea..832dcac21 100644
--- a/packages/govuk-frontend/dist/govuk/components/button/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/button/fixtures.json
@@ -9,7 +9,12 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "screenshot": false,
+            "screenshot": {
+                "variants": [
+                    "default",
+                    "no-js"
+                ]
+            },
             "html": "<button type=\"submit\" class=\"govuk-button\" data-module=\"govuk-button\">\n  Save and continue\n</button>"
         },
         {
diff --git a/packages/govuk-frontend/dist/govuk/components/character-count/fixtures.json b/packages/govuk-frontend/dist/govuk/components/character-count/fixtures.json
index 60babc3c8..287fc0093 100644
--- a/packages/govuk-frontend/dist/govuk/components/character-count/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/character-count/fixtures.json
@@ -13,7 +13,12 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "screenshot": false,
+            "screenshot": {
+                "variants": [
+                    "default",
+                    "no-js"
+                ]
+            },
             "html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  <label class=\"govuk-label\" for=\"more-detail\">\n    Can you provide more detail?\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"more-detail\" name=\"more-detail\" rows=\"5\" aria-describedby=\"more-detail-info\"></textarea>\n  <div id=\"more-detail-info\" class=\"govuk-hint govuk-character-count__message\">\n    You can enter up to 10 characters\n  </div>\n</div>"
         },
         {
diff --git a/packages/govuk-frontend/dist/govuk/components/checkboxes/fixtures.json b/packages/govuk-frontend/dist/govuk/components/checkboxes/fixtures.json
index 659c78202..254ba0aaf 100644
--- a/packages/govuk-frontend/dist/govuk/components/checkboxes/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/checkboxes/fixtures.json
@@ -23,7 +23,12 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "screenshot": false,
+            "screenshot": {
+                "variants": [
+                    "default",
+                    "no-js"
+                ]
+            },
             "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n    <div class=\"govuk-checkboxes__item\">\n      <input class=\"govuk-checkboxes__input\" id=\"nationality\" name=\"nationality\" type=\"checkbox\" value=\"british\">\n      <label class=\"govuk-label govuk-checkboxes__label\" for=\"nationality\">\n        British\n      </label>\n    </div>\n    <div class=\"govuk-checkboxes__item\">\n      <input class=\"govuk-checkboxes__input\" id=\"nationality-2\" name=\"nationality\" type=\"checkbox\" value=\"irish\">\n      <label class=\"govuk-label govuk-checkboxes__label\" for=\"nationality-2\">\n        Irish\n      </label>\n    </div>\n    <div class=\"govuk-checkboxes__item\">\n      <input class=\"govuk-checkboxes__input\" id=\"nationality-3\" name=\"nationality\" type=\"checkbox\" value=\"other\">\n      <label class=\"govuk-label govuk-checkboxes__label\" for=\"nationality-3\">\n        Citizen of another country\n      </label>\n    </div>\n  </div>\n</div>"
         },
         {
diff --git a/packages/govuk-frontend/dist/govuk/components/cookie-banner/fixtures.json b/packages/govuk-frontend/dist/govuk/components/cookie-banner/fixtures.json
index a768dfc3b..c032405f8 100644
--- a/packages/govuk-frontend/dist/govuk/components/cookie-banner/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/cookie-banner/fixtures.json
@@ -32,7 +32,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "screenshot": false,
+            "screenshot": true,
             "html": "<div class=\"govuk-cookie-banner\" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">\n  <div class=\"govuk-cookie-banner__message govuk-width-container\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <h2 class=\"govuk-cookie-banner__heading govuk-heading-m\">\n          Cookies on this government service\n        </h2>\n        <div class=\"govuk-cookie-banner__content\">\n          <p class=\"govuk-body\">We use analytics cookies to help understand how users use our service.</p>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"govuk-button-group\">\n      <button value=\"accept\" type=\"submit\" name=\"cookies\" class=\"govuk-button\" data-module=\"govuk-button\">\n        Accept analytics cookies\n      </button>\n      <button value=\"reject\" type=\"submit\" name=\"cookies\" class=\"govuk-button\" data-module=\"govuk-button\">\n        Reject analytics cookies\n      </button>\n      <a class=\"govuk-link\" href=\"/cookie-preferences\">View cookie preferences</a>\n    </div>\n\n  </div>\n</div>"
         },
         {
diff --git a/packages/govuk-frontend/dist/govuk/components/date-input/fixtures.json b/packages/govuk-frontend/dist/govuk/components/date-input/fixtures.json
index b1fd49ec5..7d8acd2df 100644
--- a/packages/govuk-frontend/dist/govuk/components/date-input/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/date-input/fixtures.json
@@ -9,7 +9,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "screenshot": false,
+            "screenshot": true,
             "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-date-input\" id=\"dob\">\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day\">\n          Day\n        </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month\">\n          Month\n        </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year\">\n          Year\n        </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n  </div>\n</div>"
         },
         {
diff --git a/packages/govuk-frontend/dist/govuk/components/details/fixtures.json b/packages/govuk-frontend/dist/govuk/components/details/fixtures.json
index eaac97378..b4375a55c 100644
--- a/packages/govuk-frontend/dist/govuk/components/details/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/details/fixtures.json
@@ -10,7 +10,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "screenshot": false,
+            "screenshot": true,
             "html": "<details class=\"govuk-details\">\n  <summary class=\"govuk-details__summary\">\n    <span class=\"govuk-details__summary-text\">\n      Help with nationality\n    </span>\n  </summary>\n  <div class=\"govuk-details__text\">\n    We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.\n  </div>\n</details>"
         },
         {
diff --git a/packages/govuk-frontend/dist/govuk/components/error-message/fixtures.json b/packages/govuk-frontend/dist/govuk/components/error-message/fixtures.json
index 4e06b4288..930a2c810 100644
--- a/packages/govuk-frontend/dist/govuk/components/error-message/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/error-message/fixtures.json
@@ -9,7 +9,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "screenshot": false,
+            "screenshot": true,
             "html": "<p class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> Error message about full name goes here\n</p>"
         },
         {
diff --git a/packages/govuk-frontend/dist/govuk/components/error-summary/fixtures.json b/packages/govuk-frontend/dist/govuk/components/error-summary/fixtures.json
index 68a3773f9..ecd11e1ab 100644
--- a/packages/govuk-frontend/dist/govuk/components/error-summary/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/error-summary/fixtures.json
@@ -19,7 +19,12 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "screenshot": false,
+            "screenshot": {
+                "variants": [
+                    "default",
+                    "no-js"
+                ]
+            },
             "html": "<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">\n      There is a problem\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n        <ul class=\"govuk-list govuk-error-summary__list\">\n          <li>\n            <a href=\"#example-error-1\">The date your passport was issued must be in the past</a>\n          </li>\n          <li>\n            <a href=\"#example-error-2\">Enter a postcode, like AA1 1AA</a>\n          </li>\n        </ul>\n    </div>\n  </div>\n</div>"
         },
         {
diff --git a/packages/govuk-frontend/dist/govuk/components/exit-this-page/fixtures.json b/packages/govuk-frontend/dist/govuk/components/exit-this-page/fixtures.json
index dfd8d4958..954481b82 100644
--- a/packages/govuk-frontend/dist/govuk/components/exit-this-page/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/exit-this-page/fixtures.json
@@ -12,7 +12,12 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "screenshot": false,
+            "screenshot": {
+                "variants": [
+                    "default",
+                    "no-js"
+                ]
+            },
             "html": "<div class=\"govuk-exit-this-page\" data-module=\"govuk-exit-this-page\">\n  <a href=\"/full-page-examples/announcements\" role=\"button\" draggable=\"false\" class=\"govuk-button govuk-button--warning govuk-exit-this-page__button govuk-js-exit-this-page-button\" data-module=\"govuk-button\" rel=\"nofollow noreferrer\">\n    <span class=\"govuk-visually-hidden\">Emergency</span> Exit this page\n  </a>\n</div>"
         },
         {
diff --git a/packages/govuk-frontend/dist/govuk/components/fieldset/fixtures.json b/packages/govuk-frontend/dist/govuk/components/fieldset/fixtures.json
index 85249d068..90ee92009 100644
--- a/packages/govuk-frontend/dist/govuk/components/fieldset/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/fieldset/fixtures.json
@@ -11,7 +11,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "screenshot": false,
+            "screenshot": true,
             "html": "<fieldset class=\"govuk-fieldset\">\n  <legend class=\"govuk-fieldset__legend\">\n    What is your address?\n  </legend>\n</fieldset>"
         },
         {
diff --git a/packages/govuk-frontend/dist/govuk/components/file-upload/fixtures.json b/packages/govuk-frontend/dist/govuk/components/file-upload/fixtures.json
index a3753586c..71ddae5e6 100644
--- a/packages/govuk-frontend/dist/govuk/components/file-upload/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/file-upload/fixtures.json
@@ -12,7 +12,12 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "screenshot": false,
+            "screenshot": {
+                "variants": [
+                    "default",
+                    "no-js"
+                ]
+            },
             "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"file-upload-1\">\n    Upload a file\n  </label>\n  <input class=\"govuk-file-upload\" id=\"file-upload-1\" name=\"file-upload-1\" type=\"file\">\n</div>"
         },
         {
@@ -170,7 +175,12 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "screenshot": true,
+            "screenshot": {
+                "variants": [
+                    "default",
+                    "no-js"
+                ]
+            },
             "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"file-upload-1\">\n    Upload a file\n  </label>\n  <div\n    class=\"govuk-drop-zone\"\n    data-module=\"govuk-file-upload\">\n  <input class=\"govuk-file-upload\" id=\"file-upload-1\" name=\"file-upload-1\" type=\"file\">\n  </div>\n</div>"
         },
         {
diff --git a/packages/govuk-frontend/dist/govuk/components/footer/fixtures.json b/packages/govuk-frontend/dist/govuk/components/footer/fixtures.json
index 1101bdff4..3d48d4c94 100644
--- a/packages/govuk-frontend/dist/govuk/components/footer/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/footer/fixtures.json
@@ -7,7 +7,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "screenshot": false,
+            "screenshot": true,
             "html": "<footer class=\"govuk-footer\">\n  <div class=\"govuk-width-container\">\n    <div class=\"govuk-footer__meta\">\n      <div class=\"govuk-footer__meta-item govuk-footer__meta-item--grow\">\n        <svg\n          aria-hidden=\"true\"\n          focusable=\"false\"\n          class=\"govuk-footer__licence-logo\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 483.2 195.7\"\n          height=\"17\"\n          width=\"41\"\n        >\n          <path\n            fill=\"currentColor\"\n            d=\"M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145\"\n          />\n        </svg>\n        <span class=\"govuk-footer__licence-description\">\n          All content is available under the\n          <a\n            class=\"govuk-footer__link\"\n            href=\"https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/\"\n            rel=\"license\"\n          >Open Government Licence v3.0</a>, except where otherwise stated\n        </span>\n      </div>\n      <div class=\"govuk-footer__meta-item\">\n        <a\n          class=\"govuk-footer__link govuk-footer__copyright-logo\"\n          href=\"https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/\"\n        >\n          © Crown copyright\n        </a>\n      </div>\n    </div>\n  </div>\n</footer>"
         },
         {
diff --git a/packages/govuk-frontend/dist/govuk/components/header/fixtures.json b/packages/govuk-frontend/dist/govuk/components/header/fixtures.json
index 019dc588f..c9d9d750b 100644
--- a/packages/govuk-frontend/dist/govuk/components/header/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/header/fixtures.json
@@ -7,7 +7,12 @@
             "hidden": false,
             "description": "The standard header as used on information pages on GOV.UK",
             "previewLayoutModifiers": [],
-            "screenshot": false,
+            "screenshot": {
+                "variants": [
+                    "default",
+                    "no-js"
+                ]
+            },
             "html": "<header class=\"govuk-header\" data-module=\"govuk-header\">\n  <div class=\"govuk-header__container govuk-width-container\">\n    <div class=\"govuk-header__logo\">\n      <a href=\"/\" class=\"govuk-header__link govuk-header__link--homepage\">\n        <svg\n            focusable=\"false\"\n            role=\"img\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 296 60\"\n            height=\"30\"\n            width=\"148\"\n            fill=\"currentcolor\" class=\"govuk-header__logotype\" aria-label=\"GOV.UK\"\n          ><title>GOV.UK</title>    <g>\n                <circle cx=\"20\" cy=\"17.6\" r=\"3.7\"/>\n                <circle cx=\"10.2\" cy=\"23.5\" r=\"3.7\"/>\n                <circle cx=\"3.7\" cy=\"33.2\" r=\"3.7\"/>\n                <circle cx=\"31.7\" cy=\"30.6\" r=\"3.7\"/>\n                <circle cx=\"43.3\" cy=\"17.6\" r=\"3.7\"/>\n                <circle cx=\"53.2\" cy=\"23.5\" r=\"3.7\"/>\n                <circle cx=\"59.7\" cy=\"33.2\" r=\"3.7\"/>\n                <circle cx=\"31.7\" cy=\"30.6\" r=\"3.7\"/>\n                <path d=\"M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z\"/>\n              </g>\n              <path d=\"M88.6,33.2c0,1.8.2,3.4.6,5s1.2,3,2,4.4c1,1.2,2,2.2,3.4,3s3,1.2,5,1.2,3.4-.2,4.6-.8,2.2-1.4,3-2.2,1.2-1.8,1.6-3c.2-1,.4-2,.4-3v-.4h-10.6v-6.4h18.8v23h-7.4v-5c-.6.8-1.2,1.6-2,2.2-.8.6-1.6,1.2-2.6,1.8-1,.4-2,.8-3.2,1.2s-2.4.4-3.6.4c-3,0-5.8-.6-8-1.6-2.4-1.2-4.4-2.6-6-4.6s-2.8-4.2-3.6-6.8c-.6-2.8-1-5.6-1-8.6s.4-5.8,1.4-8.4,2.2-4.8,4-6.8,3.8-3.4,6.2-4.6c2.4-1.2,5.2-1.6,8.2-1.6s3.8.2,5.6.6c1.8.4,3.4,1.2,4.8,2s2.8,1.8,3.8,3c1.2,1.2,2,2.6,2.8,4l-7.4,4.2c-.4-.8-1-1.8-1.6-2.4-.6-.8-1.2-1.4-2-2s-1.6-1-2.6-1.4-2.2-.4-3.4-.4c-2,0-3.6.4-5,1.2-1.4.8-2.6,1.8-3.4,3-1,1.2-1.6,2.8-2,4.4-.6,1.6-.8,3.8-.8,5.4ZM161.4,24.6c-.8-2.6-2.2-4.8-4-6.8s-3.8-3.4-6.2-4.6c-2.4-1.2-5.2-1.6-8.4-1.6s-5.8.6-8.4,1.6c-2.2,1.2-4.4,2.8-6,4.6-1.8,2-3,4.2-4,6.8-.8,2.6-1.4,5.4-1.4,8.4s.4,5.8,1.4,8.4c.8,2.6,2.2,4.8,4,6.8s3.8,3.4,6.2,4.6c2.4,1.2,5.2,1.6,8.4,1.6s5.8-.6,8.4-1.6c2.4-1.2,4.6-2.6,6.2-4.6,1.8-2,3-4.2,4-6.8.8-2.6,1.4-5.4,1.4-8.4-.2-3-.6-5.8-1.6-8.4h0ZM154,33.2c0,2-.2,3.8-.8,5.4-.4,1.6-1.2,3.2-2.2,4.4s-2.2,2.2-3.4,2.8c-1.4.6-3,1-4.8,1s-3.4-.4-4.8-1-2.6-1.6-3.4-2.8c-1-1.2-1.6-2.6-2.2-4.4-.4-1.6-.8-3.4-.8-5.4v-.2c0-2,.2-3.8.8-5.4.4-1.6,1.2-3.2,2.2-4.4,1-1.2,2.2-2.2,3.4-2.8,1.4-.6,3-1,4.8-1s3.4.4,4.8,1,2.6,1.6,3.4,2.8c1,1.2,1.6,2.6,2.2,4.4.4,1.6.8,3.4.8,5.4v.2ZM177.8,54l-11.8-42h9.4l8,31.4h.2l8-31.4h9.4l-11.8,42h-11.4,0ZM235.4,46.7c1.2,0,2.4-.2,3.4-.6,1-.4,2-.8,2.8-1.6s1.4-1.6,1.8-2.8c.4-1.2.6-2.4.6-4V11.8h8.2v27.2c0,2.4-.4,4.4-1.2,6.2s-2,3.4-3.6,4.8c-1.4,1.4-3.2,2.4-5.4,3-2,.8-4.4,1-6.8,1s-4.8-.4-6.8-1c-2-.8-3.8-1.8-5.4-3-1.6-1.4-2.6-3-3.6-4.8-.8-1.8-1.2-4-1.2-6.2V11.7h8.4v26c0,1.6.2,2.8.6,4,.4,1.2,1,2,1.8,2.8s1.6,1.2,2.8,1.6c1.2.4,2.2.6,3.6.6h0ZM261.4,11.9h8.4v18.2l14.8-18.2h10.4l-14.4,16.8,15.4,25.2h-9.8l-11-18.8-5.4,6v12.8h-8.4V11.9h0ZM206.2,44.2c-3,0-5.4,2.4-5.4,5.4s2.4,5.4,5.4,5.4,5.4-2.4,5.4-5.4-2.4-5.4-5.4-5.4Z\"/>\n          </svg>\n      </a>\n    </div>\n  </div>\n</header>"
         },
         {
diff --git a/packages/govuk-frontend/dist/govuk/components/hint/fixtures.json b/packages/govuk-frontend/dist/govuk/components/hint/fixtures.json
index 7ec940d8d..d310e18fc 100644
--- a/packages/govuk-frontend/dist/govuk/components/hint/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/hint/fixtures.json
@@ -9,7 +9,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "screenshot": false,
+            "screenshot": true,
             "html": "<div class=\"govuk-hint\">\n  It&#39;s on your National Insurance card, benefit letter, payslip or P60.\nFor example, &#39;QQ 12 34 56 C&#39;.\n\n</div>"
         },
         {
diff --git a/packages/govuk-frontend/dist/govuk/components/input/fixtures.json b/packages/govuk-frontend/dist/govuk/components/input/fixtures.json
index 7e33ab26b..d67cc4745 100644
--- a/packages/govuk-frontend/dist/govuk/components/input/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/input/fixtures.json
@@ -12,7 +12,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "screenshot": false,
+            "screenshot": true,
             "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"test-name\">\n    National Insurance number\n  </label>\n  <input class=\"govuk-input\" id=\"test-name\" name=\"test-name\" type=\"text\">\n</div>"
         },
         {
diff --git a/packages/govuk-frontend/dist/govuk/components/inset-text/fixtures.json b/packages/govuk-frontend/dist/govuk/components/inset-text/fixtures.json
index 1d0a526ac..7775c469f 100644
--- a/packages/govuk-frontend/dist/govuk/components/inset-text/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/inset-text/fixtures.json
@@ -9,7 +9,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "screenshot": false,
+            "screenshot": true,
             "html": "<div class=\"govuk-inset-text\">\n  It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.\n</div>"
         },
         {
diff --git a/packages/govuk-frontend/dist/govuk/components/label/fixtures.json b/packages/govuk-frontend/dist/govuk/components/label/fixtures.json
index 7ce10ed4c..3be2a216a 100644
--- a/packages/govuk-frontend/dist/govuk/components/label/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/label/fixtures.json
@@ -9,7 +9,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "screenshot": false,
+            "screenshot": true,
             "html": "<label class=\"govuk-label\">\n  National Insurance number\n</label>"
         },
         {
diff --git a/packages/govuk-frontend/dist/govuk/components/notification-banner/fixtures.json b/packages/govuk-frontend/dist/govuk/components/notification-banner/fixtures.json
index 9fa6b6052..88455f201 100644
--- a/packages/govuk-frontend/dist/govuk/components/notification-banner/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/notification-banner/fixtures.json
@@ -9,7 +9,12 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "screenshot": false,
+            "screenshot": {
+                "variants": [
+                    "default",
+                    "no-js"
+                ]
+            },
             "html": "<div class=\"govuk-notification-banner\" role=\"region\" aria-labelledby=\"govuk-notification-banner-title\" data-module=\"govuk-notification-banner\">\n  <div class=\"govuk-notification-banner__header\">\n    <h2 class=\"govuk-notification-banner__title\" id=\"govuk-notification-banner-title\">\n      Important\n    </h2>\n  </div>\n  <div class=\"govuk-notification-banner__content\">\n    <p class=\"govuk-notification-banner__heading\">\n      This publication was withdrawn on 7 March 2014.\n    </p>\n  </div>\n</div>"
         },
         {
diff --git a/packages/govuk-frontend/dist/govuk/components/pagination/fixtures.json b/packages/govuk-frontend/dist/govuk/components/pagination/fixtures.json
index dfb1faac1..aa47fd6e6 100644
--- a/packages/govuk-frontend/dist/govuk/components/pagination/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/pagination/fixtures.json
@@ -29,7 +29,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "screenshot": false,
+            "screenshot": true,
             "html": "<nav class=\"govuk-pagination\" aria-label=\"Pagination\">\n  <div class=\"govuk-pagination__prev\">\n    <a class=\"govuk-link govuk-pagination__link\" href=\"/previous\" rel=\"prev\">\n      <svg class=\"govuk-pagination__icon govuk-pagination__icon--prev\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n        <path d=\"m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z\"></path>\n      </svg>\n      <span class=\"govuk-pagination__link-title\">\n        Previous<span class=\"govuk-visually-hidden\"> page</span>\n      </span>\n    </a>\n  </div>\n  <ul class=\"govuk-pagination__list\">\n    <li class=\"govuk-pagination__item\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/page/1\" aria-label=\"Page 1\">\n        1\n      </a>\n    </li>\n    <li class=\"govuk-pagination__item govuk-pagination__item--current\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/page/2\" aria-label=\"Page 2\" aria-current=\"page\">\n        2\n      </a>\n    </li>\n    <li class=\"govuk-pagination__item\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/page/3\" aria-label=\"Page 3\">\n        3\n      </a>\n    </li>\n  </ul>\n  <div class=\"govuk-pagination__next\">\n    <a class=\"govuk-link govuk-pagination__link\" href=\"/next\" rel=\"next\">\n      <span class=\"govuk-pagination__link-title\">\n        Next<span class=\"govuk-visually-hidden\"> page</span>\n      </span>\n      <svg class=\"govuk-pagination__icon govuk-pagination__icon--next\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n        <path d=\"m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z\"></path>\n      </svg>\n    </a>\n  </div>\n</nav>"
         },
         {
diff --git a/packages/govuk-frontend/dist/govuk/components/panel/fixtures.json b/packages/govuk-frontend/dist/govuk/components/panel/fixtures.json
index 510c1fc81..adf8c08f2 100644
--- a/packages/govuk-frontend/dist/govuk/components/panel/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/panel/fixtures.json
@@ -10,7 +10,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "screenshot": false,
+            "screenshot": true,
             "html": "<div class=\"govuk-panel govuk-panel--confirmation\">\n  <h1 class=\"govuk-panel__title\">\n    Application complete\n  </h1>\n  <div class=\"govuk-panel__body\">\n    Your reference number: HDJ2123F\n  </div>\n</div>"
         },
         {
diff --git a/packages/govuk-frontend/dist/govuk/components/password-input/fixtures.json b/packages/govuk-frontend/dist/govuk/components/password-input/fixtures.json
index d1050ca4f..d4f8f381a 100644
--- a/packages/govuk-frontend/dist/govuk/components/password-input/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/password-input/fixtures.json
@@ -12,7 +12,12 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "screenshot": false,
+            "screenshot": {
+                "variants": [
+                    "default",
+                    "no-js"
+                ]
+            },
             "html": "<div class=\"govuk-form-group govuk-password-input\" data-module=\"govuk-password-input\">\n  <label class=\"govuk-label\" for=\"password\">\n    Password\n  </label>\n  <div class=\"govuk-input__wrapper govuk-password-input__wrapper\">\n    <input class=\"govuk-input govuk-password-input__input govuk-js-password-input-input\" id=\"password\" name=\"password\" type=\"password\" spellcheck=\"false\" autocomplete=\"current-password\" autocapitalize=\"none\">\n    <button type=\"button\" class=\"govuk-button govuk-button--secondary govuk-password-input__toggle govuk-js-password-input-toggle\" data-module=\"govuk-button\" aria-controls=\"password\" aria-label=\"Show password\" hidden>\n      Show\n    </button>\n  </div>\n</div>"
         },
         {
diff --git a/packages/govuk-frontend/dist/govuk/components/phase-banner/fixtures.json b/packages/govuk-frontend/dist/govuk/components/phase-banner/fixtures.json
index 90f18b730..4a00fc944 100644
--- a/packages/govuk-frontend/dist/govuk/components/phase-banner/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/phase-banner/fixtures.json
@@ -12,7 +12,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "screenshot": false,
+            "screenshot": true,
             "html": "<div class=\"govuk-phase-banner\">\n  <p class=\"govuk-phase-banner__content\">\n    <strong class=\"govuk-tag govuk-phase-banner__content__tag\">\n      Alpha\n    </strong>\n    <span class=\"govuk-phase-banner__text\">\n      This is a new service - your <a href=\"#\" class=\"govuk-link\">feedback</a> will help us to improve it.\n    </span>\n  </p>\n</div>"
         },
         {
diff --git a/packages/govuk-frontend/dist/govuk/components/radios/fixtures.json b/packages/govuk-frontend/dist/govuk/components/radios/fixtures.json
index ad20eb04a..65e309776 100644
--- a/packages/govuk-frontend/dist/govuk/components/radios/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/radios/fixtures.json
@@ -22,7 +22,12 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "screenshot": false,
+            "screenshot": {
+                "variants": [
+                    "default",
+                    "no-js"
+                ]
+            },
             "html": "<div class=\"govuk-form-group\">\n  <div id=\"example-default-hint\" class=\"govuk-hint\">\n    This includes changing your last name or spelling your name differently.\n  </div>\n  <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n    <div class=\"govuk-radios__item\">\n      <input class=\"govuk-radios__input\" id=\"example-default\" name=\"example-default\" type=\"radio\" value=\"yes\">\n      <label class=\"govuk-label govuk-radios__label\" for=\"example-default\">\n        Yes\n      </label>\n    </div>\n    <div class=\"govuk-radios__item\">\n      <input class=\"govuk-radios__input\" id=\"example-default-2\" name=\"example-default\" type=\"radio\" value=\"no\">\n      <label class=\"govuk-label govuk-radios__label\" for=\"example-default-2\">\n        No\n      </label>\n    </div>\n  </div>\n</div>"
         },
         {
@@ -189,7 +194,12 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "screenshot": true,
+            "screenshot": {
+                "variants": [
+                    "default",
+                    "no-js"
+                ]
+            },
             "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\">\n    <legend class=\"govuk-fieldset__legend\">\n      How do you want to sign in?\n    </legend>\n    <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n      <div class=\"govuk-radios__item\">\n        <input class=\"govuk-radios__input\" id=\"example-divider\" name=\"example\" type=\"radio\" value=\"government-gateway\">\n        <label class=\"govuk-label govuk-radios__label\" for=\"example-divider\">\n          Use Government Gateway\n        </label>\n      </div>\n      <div class=\"govuk-radios__item\">\n        <input class=\"govuk-radios__input\" id=\"example-divider-2\" name=\"example\" type=\"radio\" value=\"govuk-verify\">\n        <label class=\"govuk-label govuk-radios__label\" for=\"example-divider-2\">\n          Use GOV.UK Verify\n        </label>\n      </div>\n      <div class=\"govuk-radios__divider\">or</div>\n      <div class=\"govuk-radios__item\">\n        <input class=\"govuk-radios__input\" id=\"example-divider-4\" name=\"example\" type=\"radio\" value=\"create-account\">\n        <label class=\"govuk-label govuk-radios__label\" for=\"example-divider-4\">\n          Create an account\n        </label>\n      </div>\n    </div>\n  </fieldset>\n</div>"
         },
         {
@@ -226,7 +236,12 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "screenshot": true,
+            "screenshot": {
+                "variants": [
+                    "default",
+                    "no-js"
+                ]
+            },
             "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\">\n    <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n      <h1 class=\"govuk-fieldset__heading\">\n        How do you want to sign in?\n      </h1>\n    </legend>\n    <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n      <div class=\"govuk-radios__item\">\n        <input class=\"govuk-radios__input\" id=\"gateway\" name=\"gov\" type=\"radio\" value=\"gateway\" aria-describedby=\"gateway-item-hint\">\n        <label class=\"govuk-label govuk-radios__label\" for=\"gateway\">\n          Sign in with Government Gateway\n        </label>\n        <div id=\"gateway-item-hint\" class=\"govuk-hint govuk-radios__hint\">\n          You’ll have a user ID if you’ve registered for Self Assessment or filed a tax return online before.\n        </div>\n      </div>\n      <div class=\"govuk-radios__item\">\n        <input class=\"govuk-radios__input\" id=\"verify\" name=\"gov\" type=\"radio\" value=\"verify\" aria-describedby=\"verify-item-hint\">\n        <label class=\"govuk-label govuk-radios__label\" for=\"verify\">\n          Sign in with GOV.UK Verify\n        </label>\n        <div id=\"verify-item-hint\" class=\"govuk-hint govuk-radios__hint\">\n          You’ll have an account if you’ve already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity.\n        </div>\n      </div>\n    </div>\n  </fieldset>\n</div>"
         },
         {
@@ -439,7 +454,12 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "screenshot": true,
+            "screenshot": {
+                "variants": [
+                    "default",
+                    "no-js"
+                ]
+            },
             "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\">\n    <legend class=\"govuk-fieldset__legend\">\n      How do you want to be contacted?\n    </legend>\n    <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n      <div class=\"govuk-radios__item\">\n        <input class=\"govuk-radios__input\" id=\"how-contacted-checked\" name=\"how-contacted-checked\" type=\"radio\" value=\"email\" checked data-aria-controls=\"conditional-how-contacted-checked\">\n        <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-checked\">\n          Email\n        </label>\n      </div>\n      <div class=\"govuk-radios__conditional\" id=\"conditional-how-contacted-checked\">\n        <label class=\"govuk-label\" for=\"context-email\">Email</label>\n  <input class=\"govuk-input govuk-!-width-one-third\" name=\"context-email\" type=\"text\" id=\"context-email\">\n      </div>\n      <div class=\"govuk-radios__item\">\n        <input class=\"govuk-radios__input\" id=\"how-contacted-checked-2\" name=\"how-contacted-checked\" type=\"radio\" value=\"phone\" data-aria-controls=\"conditional-how-contacted-checked-2\">\n        <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-checked-2\">\n          Phone\n        </label>\n      </div>\n      <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-how-contacted-checked-2\">\n        <label class=\"govuk-label\" for=\"contact-phone\">Phone number</label>\n  <input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-phone\" type=\"text\" id=\"contact-phone\">\n      </div>\n      <div class=\"govuk-radios__item\">\n        <input class=\"govuk-radios__input\" id=\"how-contacted-checked-3\" name=\"how-contacted-checked\" type=\"radio\" value=\"text\" data-aria-controls=\"conditional-how-contacted-checked-3\">\n        <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-checked-3\">\n          Text message\n        </label>\n      </div>\n      <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-how-contacted-checked-3\">\n        <label class=\"govuk-label\" for=\"contact-text-message\">Mobile phone number</label>\n  <input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n      </div>\n    </div>\n  </fieldset>\n</div>"
         },
         {
@@ -605,7 +625,12 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "screenshot": true,
+            "screenshot": {
+                "variants": [
+                    "default",
+                    "no-js"
+                ]
+            },
             "html": "<div class=\"govuk-form-group govuk-radios--small\">\n  <fieldset class=\"govuk-fieldset\">\n    <legend class=\"govuk-fieldset__legend\">\n      How do you want to be contacted?\n    </legend>\n    <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n      <div class=\"govuk-radios__item\">\n        <input class=\"govuk-radios__input\" id=\"how-contacted-2\" name=\"how-contacted-2\" type=\"radio\" value=\"email\">\n        <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2\">\n          Email\n        </label>\n      </div>\n      <div class=\"govuk-radios__item\">\n        <input class=\"govuk-radios__input\" id=\"how-contacted-2-2\" name=\"how-contacted-2\" type=\"radio\" value=\"phone\">\n        <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2-2\">\n          Phone\n        </label>\n      </div>\n      <div class=\"govuk-radios__item\">\n        <input class=\"govuk-radios__input\" id=\"how-contacted-2-3\" name=\"how-contacted-2\" type=\"radio\" value=\"text\">\n        <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2-3\">\n          Text message\n        </label>\n      </div>\n    </div>\n  </fieldset>\n</div>"
         },
         {
@@ -910,7 +935,12 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "screenshot": true,
+            "screenshot": {
+                "variants": [
+                    "default",
+                    "no-js"
+                ]
+            },
             "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\">\n    <legend class=\"govuk-fieldset__legend\">\n      How do you want to sign in?\n    </legend>\n    <div class=\"govuk-radios govuk-radios--small\" data-module=\"govuk-radios\">\n      <div class=\"govuk-radios__item\">\n        <input class=\"govuk-radios__input\" id=\"example-small-divider\" name=\"example\" type=\"radio\" value=\"government-gateway\">\n        <label class=\"govuk-label govuk-radios__label\" for=\"example-small-divider\">\n          Use Government Gateway\n        </label>\n      </div>\n      <div class=\"govuk-radios__item\">\n        <input class=\"govuk-radios__input\" id=\"example-small-divider-2\" name=\"example\" type=\"radio\" value=\"govuk-verify\">\n        <label class=\"govuk-label govuk-radios__label\" for=\"example-small-divider-2\">\n          Use GOV.UK Verify\n        </label>\n      </div>\n      <div class=\"govuk-radios__divider\">or</div>\n      <div class=\"govuk-radios__item\">\n        <input class=\"govuk-radios__input\" id=\"example-small-divider-4\" name=\"example\" type=\"radio\" value=\"create-account\">\n        <label class=\"govuk-label govuk-radios__label\" for=\"example-small-divider-4\">\n          Create an account\n        </label>\n      </div>\n    </div>\n  </fieldset>\n</div>"
         },
         {
diff --git a/packages/govuk-frontend/dist/govuk/components/select/fixtures.json b/packages/govuk-frontend/dist/govuk/components/select/fixtures.json
index 418584363..715d62c0c 100644
--- a/packages/govuk-frontend/dist/govuk/components/select/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/select/fixtures.json
@@ -28,7 +28,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "screenshot": false,
+            "screenshot": true,
             "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"select-1\">\n    Label text goes here\n  </label>\n  <select class=\"govuk-select\" id=\"select-1\" name=\"select-1\">\n    <option value=\"1\">GOV.UK frontend option 1</option>\n    <option value=\"2\" selected>GOV.UK frontend option 2</option>\n    <option value=\"3\" disabled>GOV.UK frontend option 3</option>\n  </select>\n</div>"
         },
         {
diff --git a/packages/govuk-frontend/dist/govuk/components/service-navigation/fixtures.json b/packages/govuk-frontend/dist/govuk/components/service-navigation/fixtures.json
index 9dd8453a7..6e523b2d5 100644
--- a/packages/govuk-frontend/dist/govuk/components/service-navigation/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/service-navigation/fixtures.json
@@ -26,7 +26,12 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "screenshot": false,
+            "screenshot": {
+                "variants": [
+                    "default",
+                    "no-js"
+                ]
+            },
             "html": "<div class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n      <div class=\"govuk-width-container\">\n\n    <div class=\"govuk-service-navigation__container\">\n      \n\n      \n        <nav aria-label=\"Menu\" class=\"govuk-service-navigation__wrapper\">\n          <button type=\"button\" class=\"govuk-service-navigation__toggle govuk-js-service-navigation-toggle\" aria-controls=\"navigation\" hidden>\n            Menu\n          </button>\n\n          <ul class=\"govuk-service-navigation__list\" id=\"navigation\" >\n\n            \n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/1\">\n                                    \nNavigation item 1\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/2\">\n                                    \nNavigation item 2\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/3\">\n                                    \nNavigation item 3\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/4\">\n                                    \nNavigation item 4\n                  </a>\n              </li>\n\n            </ul>\n        </nav>\n    </div>\n\n    </div>\n\n  </div>"
         },
         {
diff --git a/packages/govuk-frontend/dist/govuk/components/skip-link/fixtures.json b/packages/govuk-frontend/dist/govuk/components/skip-link/fixtures.json
index f91e10c27..d161fc02f 100644
--- a/packages/govuk-frontend/dist/govuk/components/skip-link/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/skip-link/fixtures.json
@@ -10,7 +10,12 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "screenshot": false,
+            "screenshot": {
+                "variants": [
+                    "default",
+                    "no-js"
+                ]
+            },
             "html": "<a href=\"#test-target-element\" class=\"govuk-skip-link\" data-module=\"govuk-skip-link\">Skip to main content</a>"
         },
         {
diff --git a/packages/govuk-frontend/dist/govuk/components/summary-list/fixtures.json b/packages/govuk-frontend/dist/govuk/components/summary-list/fixtures.json
index e23ad4645..ca861e72f 100644
--- a/packages/govuk-frontend/dist/govuk/components/summary-list/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/summary-list/fixtures.json
@@ -34,7 +34,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "screenshot": false,
+            "screenshot": true,
             "html": "<dl class=\"govuk-summary-list\">\n  <div class=\"govuk-summary-list__row\">\n    <dt class=\"govuk-summary-list__key\">\n      Name\n    </dt>\n    <dd class=\"govuk-summary-list__value\">\n      Firstname Lastname\n    </dd>\n  </div>\n  <div class=\"govuk-summary-list__row\">\n    <dt class=\"govuk-summary-list__key\">\n      Date of birth\n    </dt>\n    <dd class=\"govuk-summary-list__value\">\n      13/08/1980\n    </dd>\n  </div>\n  <div class=\"govuk-summary-list__row\">\n    <dt class=\"govuk-summary-list__key\">\n      Contact information\n    </dt>\n    <dd class=\"govuk-summary-list__value\">\n      <p class=\"govuk-body\">\n        email@email.com\n      </p>\n      <p class=\"govuk-body\">\n        Address line 1<br>\n        Address line 2<br>\n        Address line 3<br>\n        Address line 4<br>\n        Address line 5\n      </p>\n    </dd>\n  </div>\n</dl>"
         },
         {
diff --git a/packages/govuk-frontend/dist/govuk/components/table/fixtures.json b/packages/govuk-frontend/dist/govuk/components/table/fixtures.json
index e82c9d4fd..666c49618 100644
--- a/packages/govuk-frontend/dist/govuk/components/table/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/table/fixtures.json
@@ -49,7 +49,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "screenshot": false,
+            "screenshot": true,
             "html": "<table class=\"govuk-table\">\n  <tbody class=\"govuk-table__body\">\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">January</td>\n      <td class=\"govuk-table__cell govuk-table__cell--numeric\">£85</td>\n      <td class=\"govuk-table__cell govuk-table__cell--numeric\">£95</td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">February</td>\n      <td class=\"govuk-table__cell govuk-table__cell--numeric\">£75</td>\n      <td class=\"govuk-table__cell govuk-table__cell--numeric\">£55</td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">March</td>\n      <td class=\"govuk-table__cell govuk-table__cell--numeric\">£165</td>\n      <td class=\"govuk-table__cell govuk-table__cell--numeric\">£125</td>\n    </tr>\n  </tbody>\n</table>"
         },
         {
diff --git a/packages/govuk-frontend/dist/govuk/components/tabs/fixtures.json b/packages/govuk-frontend/dist/govuk/components/tabs/fixtures.json
index c8ee18c19..0c1cc2e67 100644
--- a/packages/govuk-frontend/dist/govuk/components/tabs/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/tabs/fixtures.json
@@ -38,7 +38,12 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "screenshot": false,
+            "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>"
         },
         {
diff --git a/packages/govuk-frontend/dist/govuk/components/tag/fixtures.json b/packages/govuk-frontend/dist/govuk/components/tag/fixtures.json
index 88b136d28..43f8aadd4 100644
--- a/packages/govuk-frontend/dist/govuk/components/tag/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/tag/fixtures.json
@@ -9,7 +9,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "screenshot": false,
+            "screenshot": true,
             "html": "<strong class=\"govuk-tag\">\n  Alpha\n</strong>"
         },
         {
diff --git a/packages/govuk-frontend/dist/govuk/components/task-list/fixtures.json b/packages/govuk-frontend/dist/govuk/components/task-list/fixtures.json
index 7688bf944..aca5d27f3 100644
--- a/packages/govuk-frontend/dist/govuk/components/task-list/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/task-list/fixtures.json
@@ -43,7 +43,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "screenshot": false,
+            "screenshot": true,
             "html": "<ul class=\"govuk-task-list\">\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-1-status\">\n        Company Directors\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-1-status\">\n      Completed\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-2-status\">\n        Registered company details\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-2-status\">\n      <strong class=\"govuk-tag govuk-tag--blue\">\n        Incomplete\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-3-status\">\n        Business plan\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-3-status\">\n      <strong class=\"govuk-tag govuk-tag--blue\">\n        Incomplete\n      </strong>\n    </div>\n  </li>\n</ul>"
         },
         {
diff --git a/packages/govuk-frontend/dist/govuk/components/textarea/fixtures.json b/packages/govuk-frontend/dist/govuk/components/textarea/fixtures.json
index 7c6b52e7f..ed007c8e4 100644
--- a/packages/govuk-frontend/dist/govuk/components/textarea/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/textarea/fixtures.json
@@ -12,7 +12,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "screenshot": false,
+            "screenshot": true,
             "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"more-detail\">\n    Can you provide more detail?\n  </label>\n  <textarea class=\"govuk-textarea\" id=\"more-detail\" name=\"more-detail\" rows=\"5\"></textarea>\n</div>"
         },
         {
diff --git a/packages/govuk-frontend/dist/govuk/components/warning-text/fixtures.json b/packages/govuk-frontend/dist/govuk/components/warning-text/fixtures.json
index 6c4696288..9cecb80d6 100644
--- a/packages/govuk-frontend/dist/govuk/components/warning-text/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/warning-text/fixtures.json
@@ -10,7 +10,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "screenshot": false,
+            "screenshot": true,
             "html": "<div class=\"govuk-warning-text\">\n  <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n  <strong class=\"govuk-warning-text__text\">\n    <span class=\"govuk-visually-hidden\">Warning</span>\n    You can be fined up to £5,000 if you don’t register.\n  </strong>\n</div>"
         },
         {

Action run for a246e59

domoscargin · 2025-07-07T22:08:49Z

I've had a glance at adding "examples" to this setup, and there's options.

We have a function for gathering Full Page Examples, which makes use of frontmatter.

But for standard-strength examples, we tend to simply use directory names and go from there.

So we have some options:

Add frontmatter to the examples files, and create a function that apes the getFullPageExamples function, then check the resultant metadata for a screenshot property.
Add a YAML file to each relevant example directory, which would currently just contain a screenshot property. Search each of the example directories for this file, and if it's there, read it and screenshot if the property exists.
Maintain a separate list of examples to screenshot, grab the items out of this file and run through each similar to how we use the hardcoded array now.

I'd favour [2] for consistency in how we set config, but [1] might be a bit easier to set up. [3] would be the simplest, quick fix.

owenatgov

Looking good! I've got one code structure comment. I wonder if it's worth articulating somewhere what the intended strcture of screenshot is ie: variants with either default or no-js. It's not impossible to figure out from snooping around the code but useful as a documentation exercise. Doesn't have to be done in this PR necessarily.

Re: examples, I'm also happy with 2. Could be done as part of #6082?

owenatgov · 2025-07-08T08:28:04Z

-    const otherExamples = Object.keys(componentExamples).filter(
-      (key) => componentExamples[key].fixture.screenshot
+    const allExamples = await getExamples(componentName)
+    const componentExampleNames = Object.keys(allExamples).filter(


With the for's on line 30 and 36 and this filter we're looping 3 times. What do you think about moving the third loop here instead? So we'd get all the examples for each component, loop through them, check that allExamples[exampleName].fixture.screenshot exists and if so, run screenshotComponent.

This way we could also reuse fixture.screenshot.

Good points, both. I've added a bit to the JSDoc on the variants, and I've swapped out .filter for a for loop.

We may not want to screenshot default examples by, er, default. Move component screenshot config entirely to its fixtures YAML. With the screenshot option overloaded, we can either take a standard snapshot, or set the page up in different ways with screenshot variants

owenatgov

Build approved. Let's go.

Move screenshot config to YAML

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-6073 July 3, 2025 15:53 Inactive

domoscargin force-pushed the bk-screenshot-from-yaml branch from 61a28fe to cb33b66 Compare July 3, 2025 16:41

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-6073 July 3, 2025 16:41 Inactive

domoscargin force-pushed the bk-screenshot-from-yaml branch from cb33b66 to 4fabab6 Compare July 3, 2025 16:45

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-6073 July 3, 2025 16:46 Inactive

domoscargin commented Jul 3, 2025

View reviewed changes

Comment thread shared/tasks/browser.mjs

owenatgov reviewed Jul 4, 2025

View reviewed changes

Comment thread shared/tasks/browser.mjs

domoscargin commented Jul 4, 2025

View reviewed changes

Comment thread shared/tasks/browser.mjs

domoscargin force-pushed the bk-screenshot-from-yaml branch from 4fabab6 to 2ae75ed Compare July 7, 2025 07:35

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-6073 July 7, 2025 07:35 Inactive

domoscargin force-pushed the bk-screenshot-from-yaml branch from 2ae75ed to 8ba88d9 Compare July 7, 2025 07:38

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-6073 July 7, 2025 07:38 Inactive

domoscargin force-pushed the bk-screenshot-from-yaml branch from 8ba88d9 to 93c42c8 Compare July 7, 2025 07:49

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-6073 July 7, 2025 07:49 Inactive

domoscargin force-pushed the bk-screenshot-from-yaml branch from 0f56abf to d8b36bb Compare July 7, 2025 08:01

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-6073 July 7, 2025 08:01 Inactive

domoscargin force-pushed the bk-screenshot-from-yaml branch from d8b36bb to ac4aec1 Compare July 7, 2025 08:24

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-6073 July 7, 2025 08:24 Inactive

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-6073 July 7, 2025 08:27 Inactive

domoscargin force-pushed the bk-screenshot-from-yaml branch from 895fbcc to 08a586b Compare July 7, 2025 08:36

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-6073 July 7, 2025 08:36 Inactive

owenatgov mentioned this pull request Jul 7, 2025

Update examples for form input components #6079

Merged

domoscargin force-pushed the bk-screenshot-from-yaml branch from 08a586b to 3036554 Compare July 7, 2025 15:07

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-6073 July 7, 2025 15:07 Inactive

domoscargin force-pushed the bk-screenshot-from-yaml branch from 3036554 to a6a8686 Compare July 7, 2025 15:23

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-6073 July 7, 2025 15:23 Inactive

domoscargin changed the title ~~[WIP] Move screenshot config to YAML~~ Move screenshot config to YAML Jul 7, 2025

domoscargin closed this Jul 7, 2025

domoscargin linked an issue Jul 7, 2025 that may be closed by this pull request

Remove unnecessary "no-js" screenshots #6071

Closed

1 task

domoscargin force-pushed the bk-screenshot-from-yaml branch from fe119af to 40702f4 Compare July 7, 2025 21:40

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-6073 July 7, 2025 21:41 Inactive

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-6073 July 7, 2025 22:45 Inactive

domoscargin force-pushed the bk-screenshot-from-yaml branch from 7ca131a to 40702f4 Compare July 8, 2025 08:16

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-6073 July 8, 2025 08:16 Inactive

domoscargin force-pushed the bk-screenshot-from-yaml branch from 40702f4 to 91909e9 Compare July 8, 2025 08:25

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-6073 July 8, 2025 08:25 Inactive

owenatgov reviewed Jul 8, 2025

View reviewed changes

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-6073 July 8, 2025 08:59 Inactive

domoscargin force-pushed the bk-screenshot-from-yaml branch from 55cfed2 to 00bafa4 Compare July 8, 2025 09:07

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-6073 July 8, 2025 09:07 Inactive

domoscargin force-pushed the bk-screenshot-from-yaml branch from 00bafa4 to 936f82f Compare July 8, 2025 09:08

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-6073 July 8, 2025 09:09 Inactive

domoscargin force-pushed the bk-screenshot-from-yaml branch from 936f82f to 91909e9 Compare July 8, 2025 09:51

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-6073 July 8, 2025 09:52 Inactive

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-6073 July 8, 2025 09:58 Inactive

domoscargin force-pushed the bk-screenshot-from-yaml branch from 9327eb3 to ff9bc25 Compare July 8, 2025 10:18

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-6073 July 8, 2025 10:18 Inactive

domoscargin added 3 commits July 8, 2025 11:23

Move config to YAML

57f4bf2

Compatibility with previous tests

a246e59

domoscargin force-pushed the bk-screenshot-from-yaml branch from ff9bc25 to a246e59 Compare July 8, 2025 10:23

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-6073 July 8, 2025 10:23 Inactive

owenatgov approved these changes Jul 8, 2025

View reviewed changes

domoscargin merged commit 9afdcac into main Jul 8, 2025
49 checks passed

domoscargin deleted the bk-screenshot-from-yaml branch July 8, 2025 10:45

domoscargin mentioned this pull request Jul 8, 2025

Document our YAML configuration #6055

Open

2 tasks

domoscargin added a commit that referenced this pull request Oct 8, 2025

Merge pull request #6073 from alphagov/bk-screenshot-from-yaml

ad2be08

Move screenshot config to YAML

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Move screenshot config to YAML#6073

Move screenshot config to YAML#6073
domoscargin merged 3 commits into
mainfrom
bk-screenshot-from-yaml

domoscargin commented Jul 3, 2025 •

edited

Loading

Uh oh!

github-actions Bot commented Jul 3, 2025 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented Jul 7, 2025 •

edited

Loading

Uh oh!

domoscargin commented Jul 7, 2025

Uh oh!

owenatgov left a comment

Uh oh!

owenatgov Jul 8, 2025

Uh oh!

domoscargin Jul 8, 2025 •

edited

Loading

Uh oh!

owenatgov left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

domoscargin commented Jul 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Variants

Non-component examples

Uh oh!

github-actions Bot commented Jul 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📋 Stats

File sizes

Modules

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented Jul 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Other changes to npm package

Uh oh!

domoscargin commented Jul 7, 2025

Uh oh!

owenatgov left a comment

Choose a reason for hiding this comment

Uh oh!

owenatgov Jul 8, 2025

Choose a reason for hiding this comment

Uh oh!

domoscargin Jul 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

owenatgov left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

domoscargin commented Jul 3, 2025 •

edited

Loading

github-actions Bot commented Jul 3, 2025 •

edited

Loading

github-actions Bot commented Jul 7, 2025 •

edited

Loading

domoscargin Jul 8, 2025 •

edited

Loading