Move screenshot config to YAML

packages/govuk-frontend/src/govuk/components/accordion/accordion.yaml

@@ -94,6 +94,10 @@ params:
 
 examples:
   - name: default
+    screenshot:
+      variants:
+        - default
+        - no-js
     options:
       id: default-example
       items:

packages/govuk-frontend/src/govuk/components/back-link/back-link.yaml

@@ -22,6 +22,7 @@ params:
 
 examples:
   - name: default
+    screenshot: true
     options: {}
   - name: with custom text
     options:

packages/govuk-frontend/src/govuk/components/breadcrumbs/breadcrumbs.yaml

@@ -39,6 +39,7 @@ params:
 
 examples:
   - name: default
+    screenshot: true
     options:
       items:
         - text: Section

packages/govuk-frontend/src/govuk/components/button/button.yaml

@@ -55,6 +55,10 @@ params:
 
 examples:
   - name: default
+    screenshot:
+      variants:
+        - default
+        - no-js
     options:
       text: Save and continue
   - name: disabled

packages/govuk-frontend/src/govuk/components/character-count/character-count.yaml

@@ -133,6 +133,10 @@ params:
 
 examples:
   - name: default
+    screenshot:
+      variants:
+        - default
+        - no-js
     options:
       name: more-detail
       maxlength: 10

packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.yaml

@@ -163,6 +163,10 @@ accessibilityCriteria: |
 
 examples:
   - name: default
+    screenshot:
+      variants:
+        - default
+        - no-js
     options:
       name: nationality
       items:

packages/govuk-frontend/src/govuk/components/cookie-banner/cookie-banner.yaml

@@ -88,6 +88,7 @@ params:
 
 examples:
   - name: default
+    screenshot: true
     options:
       messages:
         - headingText: Cookies on this government service

packages/govuk-frontend/src/govuk/components/date-input/date-input.yaml

@@ -109,6 +109,7 @@ params:
 
 examples:
   - name: default
+    screenshot: true
     options:
       id: dob
   - name: complete question

packages/govuk-frontend/src/govuk/components/details/details.yaml

@@ -38,6 +38,7 @@ params:
 
 examples:
   - name: default
+    screenshot: true
     options:
       summaryText: Help with nationality
       text: We need to know your nationality so we can work out which elections

packages/govuk-frontend/src/govuk/components/error-message/error-message.yaml

@@ -40,6 +40,7 @@ accessibilityCriteria: |
 
 examples:
   - name: default
+    screenshot: true
     options:
       text: Error message about full name goes here
 

packages/govuk-frontend/src/govuk/components/error-summary/error-summary.yaml

@@ -58,6 +58,10 @@ accessibilityCriteria: |
 
 examples:
   - name: default
+    screenshot:
+      variants:
+        - default
+        - no-js
     options:
       titleText: There is a problem
       errorList:

packages/govuk-frontend/src/govuk/components/exit-this-page/exit-this-page.yaml

@@ -42,6 +42,10 @@ params:
 
 examples:
   - name: default
+    screenshot:
+      variants:
+        - default
+        - no-js
     options:
       redirectUrl: '/full-page-examples/announcements'
       id: null

packages/govuk-frontend/src/govuk/components/fieldset/fieldset.yaml

@@ -47,6 +47,7 @@ params:
 
 examples:
   - name: default
+    screenshot: true
     options:
       legend:
         text: What is your address?

packages/govuk-frontend/src/govuk/components/file-upload/file-upload.yaml

@@ -117,6 +117,10 @@ params:
 
 examples:
   - name: default
+    screenshot:
+      variants:
+        - default
+        - no-js
     options:
       name: file-upload-1
       label:
@@ -187,7 +191,10 @@ examples:
       formGroup:
         classes: extra-class
   - name: enhanced
-    screenshot: true
+    screenshot:
+      variants:
+        - default
+        - no-js
     options:
       id: file-upload-1
       name: file-upload-1

packages/govuk-frontend/src/govuk/components/footer/footer.yaml

@@ -144,6 +144,7 @@ accessibilityCriteria: |
 
 examples:
   - name: default
+    screenshot: true
     options: {}
 
   - name: with custom HTML content licence and copyright notice

packages/govuk-frontend/src/govuk/components/header/header.yaml

@@ -112,6 +112,10 @@ accessibilityCriteria: |
 
 examples:
   - name: default
+    screenshot:
+      variants:
+        - default
+        - no-js
     description: The standard header as used on information pages on GOV.UK
     options: {}
 

packages/govuk-frontend/src/govuk/components/hint/hint.yaml

@@ -36,6 +36,7 @@ accessibilityCriteria: |
 
 examples:
   - name: default
+    screenshot: true
     options:
       text: |
         It's on your National Insurance card, benefit letter, payslip or P60.

packages/govuk-frontend/src/govuk/components/input/input.yaml

@@ -163,6 +163,7 @@ params:
 
 examples:
   - name: default
+    screenshot: true
     options:
       label:
         text: National Insurance number

packages/govuk-frontend/src/govuk/components/inset-text/inset-text.yaml

@@ -26,6 +26,7 @@ params:
 
 examples:
   - name: default
+    screenshot: true
     options:
       text: It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.
   - name: with html

packages/govuk-frontend/src/govuk/components/label/label.yaml

@@ -26,6 +26,7 @@ params:
 
 examples:
   - name: default
+    screenshot: true
     options:
       text: National Insurance number
   - name: with bold text

packages/govuk-frontend/src/govuk/components/notification-banner/notification-banner.yaml

@@ -54,6 +54,10 @@ params:
 
 examples:
   - name: default
+    screenshot:
+      variants:
+        - default
+        - no-js
     options:
       text: This publication was withdrawn on 7 March 2014.
   - name: paragraph as html heading

packages/govuk-frontend/src/govuk/components/pagination/pagination.yaml

@@ -93,6 +93,7 @@ params:
 
 examples:
   - name: default
+    screenshot: true
     options:
       previous:
         href: '/previous'

packages/govuk-frontend/src/govuk/components/panel/panel.yaml

@@ -34,6 +34,7 @@ params:
 
 examples:
   - name: default
+    screenshot: true
     options:
       titleHtml: Application complete
       text: 'Your reference number: HDJ2123F'

packages/govuk-frontend/src/govuk/components/password-input/password-input.yaml

@@ -121,6 +121,10 @@ params:
 
 examples:
   - name: default
+    screenshot:
+      variants:
+        - default
+        - no-js
     options:
       label:
         text: Password

packages/govuk-frontend/src/govuk/components/phase-banner/phase-banner.yaml

@@ -23,6 +23,7 @@ params:
 
 examples:
   - name: default
+    screenshot: true
     options:
       tag:
         text: Alpha

packages/govuk-frontend/src/govuk/components/radios/radios.yaml

@@ -151,6 +151,10 @@ accessibilityCriteria: |
 
 examples:
   - name: default
+    screenshot:
+      variants:
+        - default
+        - no-js
     options:
       name: example-default
       hint:
@@ -242,7 +246,10 @@ examples:
             For properties that are within a geographical area defined by a local council
 
   - name: with a divider
-    screenshot: true
+    screenshot:
+      variants:
+        - default
+        - no-js
     options:
       idPrefix: example-divider
       name: example
@@ -259,7 +266,10 @@ examples:
           text: Create an account
 
   - name: with hints on items
-    screenshot: true
+    screenshot:
+      variants:
+        - default
+        - no-js
     options:
       idPrefix: gov
       name: gov
@@ -397,7 +407,10 @@ examples:
               <input class="govuk-input govuk-!-width-one-third" name="contact-text-message" type="text" id="contact-text-message">
 
   - name: with conditional item checked
-    screenshot: true
+    screenshot:
+      variants:
+        - default
+        - no-js
     options:
       idPrefix: 'how-contacted-checked'
       name: 'how-contacted-checked'
@@ -507,7 +520,10 @@ examples:
               <input class="govuk-input govuk-!-width-one-third" name="contact-text-message" type="text" id="contact-text-message">
 
   - name: small
-    screenshot: true
+    screenshot:
+      variants:
+        - default
+        - no-js
     options:
       idPrefix: 'how-contacted-2'
       name: 'how-contacted-2'
@@ -681,7 +697,10 @@ examples:
           text: funkiness
 
   - name: small with a divider
-    screenshot: true
+    screenshot:
+      variants:
+        - default
+        - no-js
     options:
       idPrefix: example-small-divider
       name: example

packages/govuk-frontend/src/govuk/components/select/select.yaml

@@ -109,6 +109,7 @@ params:
 
 examples:
   - name: default
+    screenshot: true
     options:
       name: select-1
       label:

packages/govuk-frontend/src/govuk/components/service-navigation/service-navigation.yaml

@@ -98,6 +98,10 @@ previewLayout: full-width
 
 examples:
   - name: default
+    screenshot:
+      variants:
+        - default
+        - no-js
     options:
       navigation:
         - href: '#/1'

packages/govuk-frontend/src/govuk/components/skip-link/skip-link.yaml

@@ -22,6 +22,10 @@ params:
 
 examples:
   - name: default
+    screenshot:
+      variants:
+        - default
+        - no-js
     options:
       text: Skip to main content
       href: '#test-target-element'

packages/govuk-frontend/src/govuk/components/summary-list/summary-list.yaml

@@ -163,6 +163,7 @@ params:
 
 examples:
   - name: default
+    screenshot: true
     options:
       rows:
         - key:

packages/govuk-frontend/src/govuk/components/table/table.yaml

@@ -88,6 +88,7 @@ params:
 
 examples:
   - name: default
+    screenshot: true
     options:
       rows:
         - - text: January

packages/govuk-frontend/src/govuk/components/tabs/tabs.yaml

@@ -56,6 +56,10 @@ params:
 
 examples:
   - name: default
+    screenshot:
+      variants:
+        - default
+        - no-js
     options:
       items:
         - label: Past day

packages/govuk-frontend/src/govuk/components/tag/tag.yaml

@@ -18,6 +18,7 @@ params:
 
 examples:
   - name: default
+    screenshot: true
     options:
       text: Alpha
   - name: grey

packages/govuk-frontend/src/govuk/components/task-list/task-list.yaml

@@ -79,6 +79,7 @@ params:
 
 examples:
   - name: default
+    screenshot: true
     options:
       items:
         - title:

packages/govuk-frontend/src/govuk/components/textarea/textarea.yaml

@@ -96,6 +96,7 @@ params:
 
 examples:
   - name: default
+    screenshot: true
     options:
       name: more-detail
       label: