From 43efbcd5d3b473929c1a3308740fc422c73ce9fe Mon Sep 17 00:00:00 2001
From: David Biddle <david.biddle@digital.cabinet-office.gov.uk>
Date: Wed, 17 Apr 2024 14:33:11 +0100
Subject: [PATCH] Add custom tag to notification banner heading

Add 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 hierarchy.
---
 .../notification_banner_component.rb          |  7 +++--
 .../notification_banner_component_spec.rb     | 28 +++++++++++++++----
 2 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/app/components/govuk_component/notification_banner_component.rb b/app/components/govuk_component/notification_banner_component.rb
index 46cc7343..e1bbae80 100644
--- a/app/components/govuk_component/notification_banner_component.rb
+++ b/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
diff --git a/spec/components/govuk_component/notification_banner_component_spec.rb b/spec/components/govuk_component/notification_banner_component_spec.rb
index 413540c1..c1f36624 100644
--- a/spec/components/govuk_component/notification_banner_component_spec.rb
+++ b/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 } }