Merge pull request #6079 from alphagov/form-inputs-examples

Update examples for form input components

Author: owenatgov

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

@@ -143,16 +143,6 @@ examples:
       label:
         text: Can you provide more detail?
 
-  - name: with custom textarea description
-    description: with textarea description translated into Welsh.
-    options:
-      name: custom-textarea-description
-      id: custom-textarea-description
-      maxlength: 10
-      label:
-        text: Can you provide more detail?
-      textareaDescriptionText: Gallwch ddefnyddio hyd at %{count} nod
-
   - name: with hint
     options:
       name: with-hint
@@ -164,16 +154,6 @@ examples:
         text: Don't include personal or financial information, eg your
           National Insurance number or credit card details.
 
-  - name: with error
-    options:
-      name: with-error
-      id: with-error
-      maxlength: 10
-      label:
-        text: Can you provide more detail?
-      errorMessage:
-        text: Please provide more detail
-
   - name: with hint and error
     options:
       name: with-error
@@ -249,29 +229,17 @@ examples:
       label:
         text: Full address
 
-  - name: with translations
+  # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures
+  - name: with custom textarea description
+    hidden: true
+    description: with textarea description translated into Welsh.
     options:
-      id: with-translations
-      name: with-translations
+      name: custom-textarea-description
+      id: custom-textarea-description
       maxlength: 10
       label:
-        text: Full address
-      charactersUnderLimitText:
-        other: '%{count} characters to go'
-        one: 'One character to go'
-      charactersAtLimitText: 'Zero characters left'
-      charactersOverLimitText:
-        other: '%{count} characters too many'
-        one: 'One character too many'
-      wordsUnderLimitText:
-        other: '%{count} words to go'
-        one: 'One word to go'
-      wordsAtLimitText: 'Zero words left'
-      wordsOverLimitText:
-        other: '%{count} words too many'
-        one: 'One word too many'
-
-  # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures
+        text: Can you provide more detail?
+      textareaDescriptionText: Gallwch ddefnyddio hyd at %{count} nod
   - name: classes
     hidden: true
     options:
@@ -396,3 +364,25 @@ examples:
       name: no-maximum
       label:
         text: Full address
+  - name: with translations
+    hidden: true
+    options:
+      id: with-translations
+      name: with-translations
+      maxlength: 10
+      label:
+        text: Full address
+      charactersUnderLimitText:
+        other: '%{count} characters to go'
+        one: 'One character to go'
+      charactersAtLimitText: 'Zero characters left'
+      charactersOverLimitText:
+        other: '%{count} characters too many'
+        one: 'One character too many'
+      wordsUnderLimitText:
+        other: '%{count} words to go'
+        one: 'One word to go'
+      wordsAtLimitText: 'Zero words left'
+      wordsOverLimitText:
+        other: '%{count} words too many'
+        one: 'One word too many'

packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.puppeteer.test.js

@@ -90,11 +90,7 @@ describe('Checkboxes', () => {
         let $inputs
 
         beforeAll(async () => {
-          await render(
-            page,
-            'checkboxes',
-            examples['with conditional item checked']
-          )
+          await render(page, 'checkboxes', examples['with pre-checked values'])
 
           $component = await page.$('.govuk-checkboxes')
           $inputs = await $component.$$('.govuk-checkboxes__input')
@@ -111,7 +107,7 @@ describe('Checkboxes', () => {
         })
 
         it('has no conditional content revealed that is associated with an unchecked input', async () => {
-          const $input = $inputs[$inputs.length - 1] // Last input, unchecked
+          const $input = $inputs[1] // second input, unchecked
           const $conditional = await $component.$(
             `[id="${await getAttribute($input, 'aria-controls')}"]`
           )