Add custom tag to notification banner heading (#533)

Adds an optional tag to the notification banner component's heading, so
that the user can easily customise the heading. This makes it easier for
users to create notification banners with the correct heading heirarchy.

Closes #531.

app/components/govuk_component/notification_banner_component.rb

@@ -31,18 +31,19 @@ def render?
   end
 
   class Heading < GovukComponent::Base
-    attr_reader :text, :link_href, :link_text
+    attr_reader :text, :link_href, :link_text, :tag
 
-    def initialize(text: nil, link_text: nil, link_href: nil, classes: [], html_attributes: {})
+    def initialize(text: nil, link_text: nil, link_href: nil, tag: 'p', classes: [], html_attributes: {})
       @text      = text
       @link_text = link_text
       @link_href = link_href
+      @tag       = tag
 
       super(classes:, html_attributes:)
     end
 
     def call
-      tag.div(**html_attributes) do
+      content_tag(tag, **html_attributes) do
         if text.present?
           safe_join([text, link].compact, " ")
         else

spec/components/govuk_component/notification_banner_component_spec.rb

@@ -25,22 +25,25 @@
         render_inline(described_class.new(**kwargs)) do |component|
           component.with_heading(**slot_kwargs)
           component.with_heading(text: 'More text here')
+          component.with_heading(tag: 'h3', text: "A heading with a custom tag")
           component.with_heading do
-            helper.tag.p('some special content')
+            helper.tag.span('some special content')
           end
         end
       end
 
       specify 'headings are rendered with content' do
         expect(rendered_content).to have_tag('div', with: { class: 'govuk-notification-banner__content' }) do
-          with_tag('div', with: { class: 'govuk-notification-banner__heading' }, text: /some text/) do
+          with_tag('p', with: { class: 'govuk-notification-banner__heading' }, text: /some text/) do
             with_tag('a', with: { class: 'govuk-notification-banner__link', href: '#look-at-me' }, text: 'With a link')
           end
 
-          with_tag('div', with: { class: 'govuk-notification-banner__heading' }, text: 'More text here')
+          with_tag('p', with: { class: 'govuk-notification-banner__heading' }, text: 'More text here')
 
-          with_tag('div', with: { class: 'govuk-notification-banner__heading' }) do
-            with_tag('p', text: 'some special content')
+          with_tag('h3', with: { class: 'govuk-notification-banner__heading' }, text: 'A heading with a custom tag')
+
+          with_tag('p', with: { class: 'govuk-notification-banner__heading' }) do
+            with_tag('span', text: 'some special content')
           end
         end
       end
@@ -217,6 +220,21 @@
       end
     end
 
+    describe 'custom heading tag' do
+      let(:heading_text) { 'What a nice heading' }
+      let(:heading_tag) { 'h3' }
+
+      before do
+        render_inline(described_class.new(**kwargs)) do |component|
+          component.with_heading(tag: heading_tag) { heading_text }
+        end
+      end
+
+      specify 'the title has the custom tag' do
+        expect(rendered_content).to have_tag(heading_tag, with: { class: 'govuk-notification-banner__heading' }, text: heading_text)
+      end
+    end
+
     context 'when disable_auto_focus is true' do
       let(:kwargs) { { title_text: title, disable_auto_focus: true } }