Set panel component's title heading level to 1 as default

CHANGELOG.md

@@ -4,13 +4,16 @@
 
 💥 Breaking changes:
 
-- Pull Request Title goes here
+- Set panel component's title heading level to 1 as default
 
-  Description goes here (optional)
+  We think the panel title should be the h1 in the majority of cases, 
+  so we made it the default. 
 
-  To migrate you need to change: X
+  If you have need to change the Panel component heading to something
+  other than h1, you can do so by specifying `headingLevel: <number>`
+  in the Nunjucks macro.
 
-  ([PR #N](https://github.com/alphagov/govuk-frontend/pull/N))
+  ([PR #967](https://github.com/alphagov/govuk-frontend/pull/967))
 
 🆕 New features:
 

src/components/panel/README.md

@@ -17,9 +17,9 @@ Find out when to use the panel component in your service in the [GOV.UK Design S
 #### Markup
 
     <div class="govuk-panel govuk-panel--confirmation">
-      <h2 class="govuk-panel__title">
+      <h1 class="govuk-panel__title">
         Application complete
-      </h2>
+      </h1>
 
       <div class="govuk-panel__body">
         Your reference number: HDJ2123F
@@ -43,9 +43,9 @@ Find out when to use the panel component in your service in the [GOV.UK Design S
 #### Markup
 
     <div class="govuk-panel govuk-panel--confirmation">
-      <h1 class="govuk-panel__title">
+      <h2 class="govuk-panel__title">
         Application complete
-      </h1>
+      </h2>
 
       <div class="govuk-panel__body">
         Your reference number: HDJ2123F
@@ -59,7 +59,7 @@ Find out when to use the panel component in your service in the [GOV.UK Design S
 
     {{ govukPanel({
       "titleText": "Application complete",
-      "headingLevel": 1,
+      "headingLevel": 2,
       "text": "Your reference number: HDJ2123F"
     }) }}
 

src/components/panel/panel.yaml

@@ -6,5 +6,5 @@ examples:
 - name: custom heading level
   data:
     titleText: Application complete
-    headingLevel: 1
+    headingLevel: 2
     text: 'Your reference number: HDJ2123F'

src/components/panel/template.njk

@@ -1,5 +1,4 @@
-{#- TODO: Change default title heading level to 1 - https://github.com/alphagov/govuk-frontend/issues/864 -#}
-{% set headingLevel = params.headingLevel if params.headingLevel else 2 %}
+{% set headingLevel = params.headingLevel if params.headingLevel else 1 %}
 <div class="govuk-panel govuk-panel--confirmation
   {%- if params.classes %} {{ params.classes }}{% endif %}"
   {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>

src/components/panel/template.test.js

@@ -30,11 +30,11 @@ describe('Panel', () => {
     expect(panelTitle).toEqual('Application <strong>not</strong> complete')
   })
 
-  it('renders title as h2 (as the default heading level)', () => {
+  it('renders title as h1 (as the default heading level)', () => {
     const $ = render('panel', examples.default)
     const panelTitleHeadingLevel = $('.govuk-panel__title')[0].name
 
-    expect(panelTitleHeadingLevel).toEqual('h2')
+    expect(panelTitleHeadingLevel).toEqual('h1')
   })
 
   it('renders title as specified heading level', () => {