From 150f1d2cd0467ae4e4cb273912b3e8e61f291e3c Mon Sep 17 00:00:00 2001 From: Vanita Barrett-Smith Date: Mon, 13 Jun 2022 16:48:07 +0100 Subject: [PATCH 1/5] Add missing classes to examples when isPageHeading is true Originally authored by @matthew-shaw --- src/govuk/components/character-count/character-count.yaml | 1 + src/govuk/components/checkboxes/checkboxes.yaml | 2 ++ src/govuk/components/file-upload/file-upload.yaml | 1 + src/govuk/components/input/input.yaml | 1 + src/govuk/components/radios/radios.yaml | 2 ++ src/govuk/components/select/select.yaml | 1 + src/govuk/components/textarea/textarea.yaml | 1 + 7 files changed, 9 insertions(+) diff --git a/src/govuk/components/character-count/character-count.yaml b/src/govuk/components/character-count/character-count.yaml index 0812619fde..7f092f3b32 100644 --- a/src/govuk/components/character-count/character-count.yaml +++ b/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 diff --git a/src/govuk/components/checkboxes/checkboxes.yaml b/src/govuk/components/checkboxes/checkboxes.yaml index 2c7c900145..064ac665b1 100644 --- a/src/govuk/components/checkboxes/checkboxes.yaml +++ b/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 diff --git a/src/govuk/components/file-upload/file-upload.yaml b/src/govuk/components/file-upload/file-upload.yaml index 5f8e195bec..7e596eef15 100644 --- a/src/govuk/components/file-upload/file-upload.yaml +++ b/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: diff --git a/src/govuk/components/input/input.yaml b/src/govuk/components/input/input.yaml index 071d87627e..3a701d4fef 100644 --- a/src/govuk/components/input/input.yaml +++ b/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 diff --git a/src/govuk/components/radios/radios.yaml b/src/govuk/components/radios/radios.yaml index 4559b810bd..81a5865e00 100644 --- a/src/govuk/components/radios/radios.yaml +++ b/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 diff --git a/src/govuk/components/select/select.yaml b/src/govuk/components/select/select.yaml index bf947dc867..85ad0445e6 100644 --- a/src/govuk/components/select/select.yaml +++ b/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: - diff --git a/src/govuk/components/textarea/textarea.yaml b/src/govuk/components/textarea/textarea.yaml index 2995d9be09..db9fa5555e 100644 --- a/src/govuk/components/textarea/textarea.yaml +++ b/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 From b188b8267fd9f10958d8c3feaa0226e28d324c31 Mon Sep 17 00:00:00 2001 From: Vanita Barrett-Smith Date: Mon, 13 Jun 2022 16:50:10 +0100 Subject: [PATCH 2/5] Add examples of various legend sizes for fieldset component Originally authored by @matthew-shaw --- src/govuk/components/fieldset/fieldset.yaml | 25 ++++++++++++++++++- .../components/fieldset/template.test.js | 2 +- 2 files changed, 25 insertions(+), 2 deletions(-) diff --git a/src/govuk/components/fieldset/fieldset.yaml b/src/govuk/components/fieldset/fieldset.yaml index 5f7e43721b..eadfe2fa95 100644 --- a/src/govuk/components/fieldset/fieldset.yaml +++ b/src/govuk/components/fieldset/fieldset.yaml @@ -50,12 +50,35 @@ examples: data: legend: text: What is your address? -- name: as page heading +- 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 - name: html fieldset content diff --git a/src/govuk/components/fieldset/template.test.js b/src/govuk/components/fieldset/template.test.js index 02f391364e..66c871a831 100644 --- a/src/govuk/components/fieldset/template.test.js +++ b/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?') From 7de1ecf02c6cac8efd3c64ddf5f4e5ea23efed96 Mon Sep 17 00:00:00 2001 From: Vanita Barrett-Smith Date: Mon, 13 Jun 2022 16:51:49 +0100 Subject: [PATCH 3/5] Add examples of various label sizes for label component Originally authored by @matthew-shaw --- src/govuk/components/label/label.yaml | 21 ++++++++++++++++++++- src/govuk/components/label/template.test.js | 2 +- 2 files changed, 21 insertions(+), 2 deletions(-) diff --git a/src/govuk/components/label/label.yaml b/src/govuk/components/label/label.yaml index d5cd6500aa..50e7049777 100644 --- a/src/govuk/components/label/label.yaml +++ b/src/govuk/components/label/label.yaml @@ -32,11 +32,30 @@ examples: data: classes: govuk-label--s text: National Insurance number - - name: as page heading + - 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 - name: empty diff --git a/src/govuk/components/label/template.test.js b/src/govuk/components/label/template.test.js index c022dc1814..82ca17e6a0 100644 --- a/src/govuk/components/label/template.test.js +++ b/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() From b17cb8d8062447848a0969286fd43a12686a5e71 Mon Sep 17 00:00:00 2001 From: Vanita Barrett-Smith Date: Mon, 13 Jun 2022 17:00:46 +0100 Subject: [PATCH 4/5] Add examples of label and fieldset text size, independent of page heading --- src/govuk/components/fieldset/fieldset.yaml | 20 ++++++++++++++++++++ src/govuk/components/label/label.yaml | 16 ++++++++++++++++ 2 files changed, 36 insertions(+) diff --git a/src/govuk/components/fieldset/fieldset.yaml b/src/govuk/components/fieldset/fieldset.yaml index eadfe2fa95..1b989233ce 100644 --- a/src/govuk/components/fieldset/fieldset.yaml +++ b/src/govuk/components/fieldset/fieldset.yaml @@ -50,6 +50,26 @@ examples: data: legend: text: What is your address? +- 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: diff --git a/src/govuk/components/label/label.yaml b/src/govuk/components/label/label.yaml index 50e7049777..dae503a454 100644 --- a/src/govuk/components/label/label.yaml +++ b/src/govuk/components/label/label.yaml @@ -32,6 +32,22 @@ examples: data: classes: govuk-label--s text: National Insurance number + - 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 From c6e81cf80ce8634cb1a53a0354b8fa64416bff1d Mon Sep 17 00:00:00 2001 From: Vanita Barrett-Smith Date: Tue, 14 Jun 2022 11:20:06 +0100 Subject: [PATCH 5/5] Add to changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index fe8ac5d7d9..1613b1548f 100644 --- a/CHANGELOG.md +++ b/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)