Merge pull request #2659 from alphagov/add-label-classes

Add missing label and legend classes to HTML fixtures

CHANGELOG.md

@@ -20,6 +20,7 @@ We’ve made fixes to GOV.UK Frontend in the following pull requests:
 - [#2640: Add top padding to accordion section](https://github.com/alphagov/govuk-frontend/pull/2640)
 - [#2644: Allow users to use require.resolve to import GOV.UK Frontend JavaScript](https://github.com/alphagov/govuk-frontend/pull/2644)
 - [#2647: Allow users to import sass files via Webpack sass-loader](https://github.com/alphagov/govuk-frontend/pull/2647)
+- [#2659: Add missing label and legend classes to HTML fixtures](https://github.com/alphagov/govuk-frontend/pull/2659)
 
 ## 4.1.0 (Feature release)
 

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

@@ -135,6 +135,7 @@ examples:
       maxlength: 10
       label:
         text: Full address
+        classes: govuk-label--l
         isPageHeading: true
 
   - name: with word count

src/govuk/components/checkboxes/checkboxes.yaml

@@ -202,6 +202,7 @@ examples:
     fieldset:
       legend:
         text: How do you want to sign in?
+        classes: govuk-fieldset__legend--l
         isPageHeading: true
     items:
       - name: gateway
@@ -223,6 +224,7 @@ examples:
     fieldset:
       legend:
         text: How do you want to sign in?
+        classes: govuk-fieldset__legend--l
         isPageHeading: true
     items:
       - name: gateway

src/govuk/components/fieldset/fieldset.yaml

@@ -50,11 +50,54 @@ examples:
   data:
     legend:
       text: What is your address?
-- name: as page heading
+- name: styled as xl text
   data:
     legend:
       text: What is your address?
       classes: govuk-fieldset__legend--xl
+- name: styled as large text
+  data:
+    legend:
+      text: What is your address?
+      classes: govuk-fieldset__legend--l
+- name: styled as medium text
+  data:
+    legend:
+      text: What is your address?
+      classes: govuk-fieldset__legend--m
+- name: styled as small text
+  data:
+    legend:
+      text: What is your address?
+      classes: govuk-fieldset__legend--s
+- name: as page heading xl
+  data:
+    legend:
+      text: What is your address?
+      classes: govuk-fieldset__legend--xl
+      isPageHeading: true
+- name: as page heading l
+  data:
+    legend:
+      text: What is your address?
+      classes: govuk-fieldset__legend--l
+      isPageHeading: true
+- name: as page heading m
+  data:
+    legend:
+      text: What is your address?
+      classes: govuk-fieldset__legend--m
+      isPageHeading: true
+- name: as page heading s
+  data:
+    legend:
+      text: What is your address?
+      classes: govuk-fieldset__legend--s
+      isPageHeading: true
+- name: as page heading without class
+  data:
+    legend:
+      text: What is your address?
       isPageHeading: true
 
 # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures

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

@@ -67,7 +67,7 @@ describe('fieldset', () => {
   })
 
   it('nests the legend text in an H1 if the legend is a page heading', () => {
-    const $ = render('fieldset', examples['as page heading'])
+    const $ = render('fieldset', examples['as page heading l'])
 
     const $headingInsideLegend = $('.govuk-fieldset__legend > h1')
     expect($headingInsideLegend.text().trim()).toBe('What is your address?')

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

@@ -86,6 +86,7 @@ examples:
     name: file-upload-1
     label:
       text: Upload a file
+      classes: govuk-label--l
       isPageHeading: true
 - name: with optional form-group classes
   data:

src/govuk/components/input/input.yaml

@@ -202,6 +202,7 @@ examples:
     data:
       label:
         text: National Insurance number
+        classes: govuk-label--l
         isPageHeading: true
       id: input-with-page-heading
       name: test-name

src/govuk/components/label/label.yaml

@@ -32,10 +32,45 @@ examples:
     data:
       classes: govuk-label--s
       text: National Insurance number
-  - name: as page heading
+  - name: styled as xl text
     data:
       text: National Insurance number
       classes: govuk-label--xl
+  - name: styled as large text
+    data:
+      text: National Insurance number
+      classes: govuk-label--l
+  - name: styled as medium text
+    data:
+      text: National Insurance number
+      classes: govuk-label--m
+  - name: styled as small text
+    data:
+      text: National Insurance number
+      classes: govuk-label--s
+  - name: as page heading xl
+    data:
+      text: National Insurance number
+      classes: govuk-label--xl
+      isPageHeading: true
+  - name: as page heading l
+    data:
+      text: National Insurance number
+      classes: govuk-label--l
+      isPageHeading: true
+  - name: as page heading m
+    data:
+      text: National Insurance number
+      classes: govuk-label--m
+      isPageHeading: true
+  - name: as page heading s
+    data:
+      text: National Insurance number
+      classes: govuk-label--s
+      isPageHeading: true
+  - name: as page heading without class
+    data:
+      text: National Insurance number
       isPageHeading: true
 
 # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures

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

@@ -69,7 +69,7 @@ describe('Label', () => {
     })
 
     it('can be nested inside an H1 using isPageHeading', () => {
-      const $ = render('label', examples['as page heading'])
+      const $ = render('label', examples['as page heading l'])
 
       const $selector = $('h1 > .govuk-label')
       expect($selector.length).toBeTruthy()

src/govuk/components/radios/radios.yaml

@@ -142,6 +142,7 @@ examples:
     fieldset:
       legend:
         text: How do you want to sign in?
+        classes: govuk-fieldset__legend--l
         isPageHeading: true
     items:
       - value: gateway
@@ -220,6 +221,7 @@ examples:
     fieldset:
       legend:
         text: How do you want to sign in?
+        classes: govuk-fieldset__legend--l
         isPageHeading: true
     items:
       - value: gateway

src/govuk/components/select/select.yaml

@@ -114,6 +114,7 @@ examples:
       name: select-3
       label:
         text: Label text goes here
+        classes: govuk-label--l
         isPageHeading: true
       items:
         -

src/govuk/components/textarea/textarea.yaml

@@ -110,6 +110,7 @@ examples:
       name: address
       label:
         text: Full address
+        classes: govuk-label--l
         isPageHeading: true
 
   - name: with optional form-group classes