diff --git a/packages/govuk-frontend/src/govuk/components/label/label.yaml b/packages/govuk-frontend/src/govuk/components/label/label.yaml index 567150ce7f..6e15535d08 100644 --- a/packages/govuk-frontend/src/govuk/components/label/label.yaml +++ b/packages/govuk-frontend/src/govuk/components/label/label.yaml @@ -72,6 +72,11 @@ examples: options: text: National Insurance number isPageHeading: true + - name: as page heading with defined heading level + options: + text: National Insurance number + isPageHeading: true + headingLevel: 2 # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures - name: empty diff --git a/packages/govuk-frontend/src/govuk/components/label/template.njk b/packages/govuk-frontend/src/govuk/components/label/template.njk index 49a8985e08..02824a2428 100644 --- a/packages/govuk-frontend/src/govuk/components/label/template.njk +++ b/packages/govuk-frontend/src/govuk/components/label/template.njk @@ -10,9 +10,12 @@ {% endset -%} {% if params.isPageHeading %} -

+{#- Optional. The page heading level(1-6) to be used with ``isPageHeading` defaults to heading level 1-#} +{% set headingLevel = params.headingLevel if params.headingLevel else 1 %} + + {{ labelHtml | safe | trim | indent(2) }} -

+ {% else %} {{ labelHtml | safe | trim }} {% endif %} diff --git a/packages/govuk-frontend/src/govuk/components/label/template.test.js b/packages/govuk-frontend/src/govuk/components/label/template.test.js index 0abf76bf9f..370c9f6115 100644 --- a/packages/govuk-frontend/src/govuk/components/label/template.test.js +++ b/packages/govuk-frontend/src/govuk/components/label/template.test.js @@ -68,6 +68,13 @@ describe('Label', () => { expect($selector.length).toBeTruthy() }) + it('can be nested inside an heading tag using isPageHeading and headingLevel', () => { + const $ = render('label', examples['as page heading with defined level']) + + const $selector = $('h2 > .govuk-label') + expect($selector.length).toBeTruthy() + }) + it('allows additional attributes to be added to the component', () => { const $ = render('label', examples.attributes)