Default example only uses required fields

src/govuk/components/accordion/accordion.yaml

@@ -53,9 +53,6 @@ examples:
 - name: default
   data:
     id: default-example
-    classes: myClass
-    attributes:
-      data-attribute: value
     items:
       - heading:
           text: Section A
@@ -94,6 +91,7 @@ examples:
             <ul class="govuk-list govuk-list--bullet">
               <li>Example item 2</li>
             </ul>
+
 - name: with one section open
   data:
     id: one-section-open-example
@@ -149,6 +147,25 @@ examples:
           html: <a class="govuk-link" href="#">Link B</a>
 
 # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures
+- name: classes
+  hidden: true
+  data:
+    classes: myClass
+    items:
+      - heading:
+          text: Section A
+        content:
+          text: Some content
+- name: attributes
+  hidden: true
+  data:
+    attributes:
+      data-attribute: value
+    items:
+      - heading:
+          text: Section A
+        content:
+          text: Some content
 - name: custom heading level
   hidden: true
   data:

src/govuk/components/accordion/template.test.js

@@ -10,70 +10,64 @@ const { render, getExamples } = require('../../../../lib/jest-helpers')
 const examples = getExamples('accordion')
 
 describe('Accordion', () => {
-  describe('by default', () => {
+  describe('default example', () => {
     it('passes accessibility tests', async () => {
       const $ = render('accordion', examples.default)
 
       const results = await axe($.html())
       expect(results).toHaveNoViolations()
     })
 
-    it('renders with specified heading level', () => {
-      const $ = render('accordion', examples['custom heading level'])
-      const $componentHeading = $('.govuk-accordion__section-heading')
-
-      expect($componentHeading.get(0).tagName).toEqual('h3')
-    })
-
     it('renders with heading button text', () => {
       const $ = render('accordion', examples.default)
       const $componentHeadingButton = $('.govuk-accordion__section-button')
 
       expect($componentHeadingButton.html().trim()).toEqual('Section A')
     })
 
-    it('renders with heading button html', () => {
-      const $ = render('accordion', examples['heading html'])
-      const $componentHeadingButton = $('.govuk-accordion__section-button')
-
-      expect($componentHeadingButton.html().trim()).toEqual('<span class="myClass">Section A</span>')
-    })
-
     it('renders with content', () => {
       const $ = render('accordion', examples.default)
       const $componentContent = $('.govuk-accordion__section-content').first()
 
       expect($componentContent.text().trim()).toEqual('Example item 1')
     })
 
-    it('renders list without falsely values', () => {
-      const $ = render('accordion', examples['with falsey values'])
-      const $component = $('.govuk-accordion')
-      const $items = $component.find('.govuk-accordion__section')
-
-      expect($items.length).toEqual(2)
-    })
-
-    it('renders with classes', () => {
+    it('renders with id', () => {
       const $ = render('accordion', examples.default)
 
       const $component = $('.govuk-accordion')
-      expect($component.hasClass('myClass')).toBeTruthy()
+      expect($component.attr('id')).toEqual('default-example')
     })
+  })
 
-    it('renders with id', () => {
-      const $ = render('accordion', examples.default)
+  describe('custom options', () => {
+    it('renders with classes', () => {
+      const $ = render('accordion', examples.classes)
 
       const $component = $('.govuk-accordion')
-      expect($component.attr('id')).toEqual('default-example')
+      expect($component.hasClass('myClass')).toBeTruthy()
     })
 
     it('renders with attributes', () => {
-      const $ = render('accordion', examples.default)
+      const $ = render('accordion', examples.attributes)
       const $component = $('.govuk-accordion')
       expect($component.attr('data-attribute')).toEqual('value')
     })
 
+    it('renders with specified heading level', () => {
+      const $ = render('accordion', examples['custom heading level'])
+      const $componentHeading = $('.govuk-accordion__section-heading')
+
+      expect($componentHeading.get(0).tagName).toEqual('h3')
+    })
+
+    it('renders with heading button html', () => {
+      const $ = render('accordion', examples['heading html'])
+      const $componentHeadingButton = $('.govuk-accordion__section-button')
+
+      expect($componentHeadingButton.html().trim()).toEqual('<span class="myClass">Section A</span>')
+    })
+
     it('renders with section expanded class', () => {
       const $ = render('accordion', examples['with one section open'])
       const $componentSection = $('.govuk-accordion__section').first()
@@ -87,5 +81,13 @@ describe('Accordion', () => {
 
       expect($componentSummary.text().trim()).toEqual('Additional description')
     })
+
+    it('renders list without falsely values', () => {
+      const $ = render('accordion', examples['with falsey values'])
+      const $component = $('.govuk-accordion')
+      const $items = $component.find('.govuk-accordion__section')
+
+      expect($items.length).toEqual(2)
+    })
   })
 })

src/govuk/components/breadcrumbs/template.test.js

@@ -10,36 +10,39 @@ const { render, getExamples } = require('../../../../lib/jest-helpers')
 const examples = getExamples('breadcrumbs')
 
 describe('Breadcrumbs', () => {
-  describe('by default', () => {
+  describe('default example', () => {
     it('passes accessibility tests', async () => {
       const $ = render('breadcrumbs', examples.default)
 
       const results = await axe($.html())
       expect(results).toHaveNoViolations()
     })
 
-    it('renders with classes', () => {
-      const $ = render('breadcrumbs', examples.classes)
+    it('renders with items', () => {
+      const $ = render('breadcrumbs', examples.default)
 
-      const $component = $('.govuk-breadcrumbs')
-      expect($component.hasClass('app-breadcrumbs--custom-modifier')).toBeTruthy()
+      const $items = $('.govuk-breadcrumbs__list-item')
+      expect($items.length).toEqual(2)
     })
 
-    it('renders with attributes', () => {
-      const $ = render('breadcrumbs', examples.attributes)
-
-      const $component = $('.govuk-breadcrumbs')
-      expect($component.attr('id')).toEqual('my-navigation')
-      expect($component.attr('role')).toEqual('navigation')
+    it('renders 2 items', () => {
+      const $ = render('breadcrumbs', examples.default)
+      const $items = $('.govuk-breadcrumbs__list-item')
+      expect($items.length).toEqual(2)
     })
 
-    it('renders with items', () => {
+    it('renders item with anchor', () => {
       const $ = render('breadcrumbs', examples.default)
 
-      const $items = $('.govuk-breadcrumbs__list-item')
-      expect($items.length).toEqual(2)
+      const $anchor = $('.govuk-breadcrumbs__list-item a').first()
+      expect($anchor.get(0).tagName).toEqual('a')
+      expect($anchor.attr('class')).toEqual('govuk-breadcrumbs__link')
+      expect($anchor.attr('href')).toEqual('/section')
+      expect($anchor.text()).toEqual('Section')
     })
+  })
 
+  describe('custom options', () => {
     it('renders item with text', () => {
       const $ = render('breadcrumbs', examples['with last breadcrumb as current page'])
 
@@ -54,51 +57,48 @@ describe('Breadcrumbs', () => {
       expect($item.html()).toEqual('<span>Section 1</span>')
     })
 
-    it('renders item anchor with attributes', () => {
-      const $ = render('breadcrumbs', examples['item attributes'])
-
-      const $breadcrumbLink = $('.govuk-breadcrumbs__link')
-      expect($breadcrumbLink.attr('data-attribute')).toEqual('my-attribute')
-      expect($breadcrumbLink.attr('data-attribute-2')).toEqual('my-attribute-2')
-    })
-
     it('renders item with html', () => {
       const $ = render('breadcrumbs', examples.html)
 
       const $item = $('.govuk-breadcrumbs__list-item').first()
       expect($item.html()).toEqual('<em>Section 1</em>')
     })
 
-    it('renders item with anchor', () => {
-      const $ = render('breadcrumbs', examples.default)
-
-      const $anchor = $('.govuk-breadcrumbs__list-item a').first()
-      expect($anchor.get(0).tagName).toEqual('a')
-      expect($anchor.attr('class')).toEqual('govuk-breadcrumbs__link')
-      expect($anchor.attr('href')).toEqual('/section')
-      expect($anchor.text()).toEqual('Section')
-    })
-
     it('renders item with html inside anchor', () => {
       const $ = render('breadcrumbs', examples.html)
 
       const $anchor = $('.govuk-breadcrumbs__list-item a').last()
       expect($anchor.html()).toEqual('<em>Section 2</em>')
     })
 
+    it('renders item anchor with attributes', () => {
+      const $ = render('breadcrumbs', examples['item attributes'])
+
+      const $breadcrumbLink = $('.govuk-breadcrumbs__link')
+      expect($breadcrumbLink.attr('data-attribute')).toEqual('my-attribute')
+      expect($breadcrumbLink.attr('data-attribute-2')).toEqual('my-attribute-2')
+    })
+
+    it('renders with classes', () => {
+      const $ = render('breadcrumbs', examples.classes)
+
+      const $component = $('.govuk-breadcrumbs')
+      expect($component.hasClass('app-breadcrumbs--custom-modifier')).toBeTruthy()
+    })
+
+    it('renders with attributes', () => {
+      const $ = render('breadcrumbs', examples.attributes)
+
+      const $component = $('.govuk-breadcrumbs')
+      expect($component.attr('id')).toEqual('my-navigation')
+      expect($component.attr('role')).toEqual('navigation')
+    })
+
     it('renders item as collapse on mobile if specified', () => {
       const $ = render('breadcrumbs', examples['with collapse on mobile'])
 
       const $component = $('.govuk-breadcrumbs')
       expect($component.hasClass('govuk-breadcrumbs--collapse-on-mobile')).toBeTruthy()
     })
   })
-
-  describe('default example', () => {
-    it('renders 2 items', () => {
-      const $ = render('breadcrumbs', examples.default)
-      const $items = $('.govuk-breadcrumbs__list-item')
-      expect($items.length).toEqual(2)
-    })
-  })
 })

src/govuk/components/button/template.test.js

@@ -10,22 +10,24 @@ const { render, getExamples } = require('../../../../lib/jest-helpers')
 const examples = getExamples('button')
 
 describe('Button', () => {
-  it('default example passes accessibility tests', async () => {
-    const $ = render('button', examples.default)
+  describe('default example', () => {
+    it('passes accessibility tests', async () => {
+      const $ = render('button', examples.default)
 
-    const results = await axe($.html())
-    expect(results).toHaveNoViolations()
-  })
+      const results = await axe($.html())
+      expect(results).toHaveNoViolations()
+    })
 
-  describe('button element', () => {
     it('renders the default example', () => {
       const $ = render('button', examples.default)
 
       const $component = $('.govuk-button')
       expect($component.get(0).tagName).toEqual('button')
       expect($component.text()).toContain('Save and continue')
     })
+  })
 
+  describe('custom options', () => {
     it('renders with attributes', () => {
       const $ = render('button', examples.attributes)
 

src/govuk/components/character-count/template.test.js

@@ -12,21 +12,14 @@ const examples = getExamples('character-count')
 const WORD_BOUNDARY = '\\b'
 
 describe('Character count', () => {
-  describe('by default', () => {
+  describe('default example', () => {
     it('passes accessibility tests', async () => {
       const $ = render('character-count', examples.default)
 
       const results = await axe($.html())
       expect(results).toHaveNoViolations()
     })
 
-    it('renders with classes', () => {
-      const $ = render('character-count', examples.classes)
-
-      const $component = $('.govuk-js-character-count')
-      expect($component.hasClass('app-character-count--custom-modifier')).toBeTruthy()
-    })
-
     it('renders with id', () => {
       const $ = render('character-count', examples.default)
 
@@ -41,18 +34,27 @@ describe('Character count', () => {
       expect($component.attr('name')).toEqual('more-detail')
     })
 
-    it('renders with rows', () => {
-      const $ = render('character-count', examples['with custom rows'])
+    it('renders with default number of rows', () => {
+      const $ = render('character-count', examples.default)
 
       const $component = $('.govuk-js-character-count')
-      expect($component.attr('rows')).toEqual('8')
+      expect($component.attr('rows')).toEqual('5')
     })
+  })
 
-    it('renders with default number of rows', () => {
-      const $ = render('character-count', examples.default)
+  describe('custom options', () => {
+    it('renders with classes', () => {
+      const $ = render('character-count', examples.classes)
 
       const $component = $('.govuk-js-character-count')
-      expect($component.attr('rows')).toEqual('5')
+      expect($component.hasClass('app-character-count--custom-modifier')).toBeTruthy()
+    })
+
+    it('renders with rows', () => {
+      const $ = render('character-count', examples['with custom rows'])
+
+      const $component = $('.govuk-js-character-count')
+      expect($component.attr('rows')).toEqual('8')
     })
 
     it('renders with value', () => {

src/govuk/components/checkboxes/checkboxes.yaml

@@ -112,13 +112,7 @@ accessibilityCriteria: |
 examples:
 - name: default
   data:
-    idPrefix: nationality
     name: nationality
-    fieldset:
-      legend:
-        text: What is your nationality?
-    hint:
-      text: If you have dual nationality, select all options that are relevant to you.
     items:
       - value: british
         text: British
@@ -547,10 +541,11 @@ examples:
         text: another thing
 
 # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures
-- name: with minimum name and items
+- name: with idPrefix
   hidden: true
   data:
     name: example-name
+    idPrefix: nationality
     items:
       - value: 1
         text: Option 1