Change Panel component title heading from h2 to h1

and allow the heading level to be customisable, as ometimes it needs to
be either h1 or h2.

Default is h1.

src/components/panel/README.md

@@ -14,6 +14,32 @@ Find out when to use the panel component in your service in the [GOV.UK Design S
 
 [Preview the panel component](http://govuk-frontend-review.herokuapp.com/components/panel/preview)
 
+#### Markup
+
+    <div class="govuk-panel govuk-panel--confirmation">
+      <h1 class="govuk-panel__title">
+        Application complete
+      </h1>
+
+      <div class="govuk-panel__body">
+        Your reference number: HDJ2123F
+      </div>
+
+    </div>
+
+#### Macro
+
+    {% from "panel/macro.njk" import govukPanel %}
+
+    {{ govukPanel({
+      "titleText": "Application complete",
+      "text": "Your reference number: HDJ2123F"
+    }) }}
+
+### Panel custom heading level
+
+[Preview the Panel custom heading level example](http://govuk-frontend-review.herokuapp.com/components/panel/custom-heading-level/preview)
+
 #### Markup
 
     <div class="govuk-panel govuk-panel--confirmation">
@@ -33,6 +59,7 @@ Find out when to use the panel component in your service in the [GOV.UK Design S
 
     {{ govukPanel({
       "titleText": "Application complete",
+      "headingLevel": 2,
       "text": "Your reference number: HDJ2123F"
     }) }}
 
@@ -92,6 +119,18 @@ If you are using Nunjucks,then macros take the following arguments
 
 <tr class="govuk-table__row">
 
+<th class="govuk-table__header" scope="row">headingLevel</th>
+
+<td class="govuk-table__cell ">number</td>
+
+<td class="govuk-table__cell ">no</td>
+
+<td class="govuk-table__cell ">Optional heading level, from 1 to 6\. Default is 1.</td>
+
+</tr>
+
+<tr class="govuk-table__row">
+
 <th class="govuk-table__header" scope="row">text (or) html</th>
 
 <td class="govuk-table__cell ">string</td>

src/components/panel/index.njk

@@ -50,6 +50,20 @@
         text: 'Text or HTML for the panel title. If `titleHtml` is provided, the `titleText` argument is ignored.'
       }
     ],
+    [
+      {
+        text: 'headingLevel'
+      },
+      {
+        text: 'number'
+      },
+      {
+        text: 'no'
+      },
+      {
+        text: 'Optional heading level, from 1 to 6. Default is 1.'
+      }
+    ],
     [
       {
         text: 'text (or) html'

src/components/panel/panel.yaml

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

src/components/panel/template.njk

@@ -1,9 +1,10 @@
+{% 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 %}>
-  <h2 class="govuk-panel__title">
+  <h{{ headingLevel }} class="govuk-panel__title">
     {{ params.titleHtml | safe if params.titleHtml else params.titleText }}
-  </h2>
+  </h{{ headingLevel }}>
   {% if params.html or params.text %}
   <div class="govuk-panel__body">
     {{ params.html | safe if params.html else params.text }}

src/components/panel/template.test.js

@@ -30,6 +30,22 @@ describe('Panel', () => {
     expect(panelTitle).toEqual('Application <strong>not</strong> complete')
   })
 
+  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('h1')
+  })
+
+  it('renders title as specified heading level', () => {
+    const $ = render('panel', {
+      titleLevel: 3
+    })
+    const panelTitleHeadingLevel = $('.govuk-panel__title')[0].name
+
+    expect(panelTitleHeadingLevel).toEqual('h3')
+  })
+
   it('allows title HTML to be passed un-escaped', () => {
     const $ = render('panel', {
       titleHtml: 'Application <strong>not</strong> complete'