From 4af463df00d92b3db5b2051a9e6ae76be37b2c7a Mon Sep 17 00:00:00 2001
From: Michael Squance <m.squance@stem.org.uk>
Date: Fri, 21 Mar 2025 16:21:05 +0000
Subject: [PATCH] Making header sizes more consitent (page title h1, section
 headings h2, card/other headings h3) Making links on purple behaviour better
 Vertical alignment for videos in the 2 video column Adding some spacing above
 buttons in full width banner

---
 .../full_width_banner_component.html.erb      |  2 +-
 .../full_width_banner_component.scss          |  1 -
 .../horizontal_card_component.html.erb        |  2 +-
 .../picture_card_component.html.erb           |  2 +-
 .../resource_card_component.html.erb          |  2 +-
 .../cms/rich_text_block_component.rb          |  2 +-
 .../testimonial_row_component.html.erb        |  2 +-
 ...wo_column_video_section_component.html.erb |  6 ++++--
 .../two_column_video_section_component.scss   | 17 ++++++++++-----
 .../stylesheets/components/cms/_shared.scss   |  2 +-
 .../stylesheets/settings/_links.scss          | 21 +++++++++++++++++++
 .../cms/picture_card_component_spec.rb        |  2 +-
 .../cms/rich_text_block_component_spec.rb     | 16 ++++++++++++--
 13 files changed, 59 insertions(+), 18 deletions(-)

diff --git a/app/components/cms/full_width_banner_component/full_width_banner_component.html.erb b/app/components/cms/full_width_banner_component/full_width_banner_component.html.erb
index 1a845e979c..22372a2a54 100644
--- a/app/components/cms/full_width_banner_component/full_width_banner_component.html.erb
+++ b/app/components/cms/full_width_banner_component/full_width_banner_component.html.erb
@@ -23,7 +23,7 @@
         <%= render @text_content.render %>
 
         <% if @buttons %>
-          <div class="cms-full-width-banner__content-buttons">
+          <div class="cms-full-width-banner__content-buttons cms-button-container">
             <% @buttons.each do |button| %>
               <%= render button.render %>
             <% end %>
diff --git a/app/components/cms/full_width_banner_component/full_width_banner_component.scss b/app/components/cms/full_width_banner_component/full_width_banner_component.scss
index 476993c652..5485922ae0 100644
--- a/app/components/cms/full_width_banner_component/full_width_banner_component.scss
+++ b/app/components/cms/full_width_banner_component/full_width_banner_component.scss
@@ -103,5 +103,4 @@
       min-width: 300px;
     }
   }
-
 }
diff --git a/app/components/cms/horizontal_card_component/horizontal_card_component.html.erb b/app/components/cms/horizontal_card_component/horizontal_card_component.html.erb
index 41eb0f61e4..c06f836626 100644
--- a/app/components/cms/horizontal_card_component/horizontal_card_component.html.erb
+++ b/app/components/cms/horizontal_card_component/horizontal_card_component.html.erb
@@ -5,7 +5,7 @@
     <% end %>
     <%= content_tag :div, class: wrapper_classes do %>
       <div class="horizontal-card-component__content">
-        <h1 class="govuk-heading-m"><%= @title %></h1>
+        <h3 class="govuk-heading-m"><%= @title %></h3>
         <%= render @body_blocks.render %>
         <%= render @icon_block.render if @icon_block&.icons&.any? %>
       </div>
diff --git a/app/components/cms/picture_card_component/picture_card_component.html.erb b/app/components/cms/picture_card_component/picture_card_component.html.erb
index ec07ee85c8..9465cab972 100644
--- a/app/components/cms/picture_card_component/picture_card_component.html.erb
+++ b/app/components/cms/picture_card_component/picture_card_component.html.erb
@@ -3,7 +3,7 @@
     <%= render Cms::ImageComponent.new(@image, show_caption: false, link: @link) %>
   <% end %>
   <div class="cms-picture-card__title">
-    <h2 class="govuk-heading-m"><%= link_to_if @link, @title, @link, class: "cms-picture-card__link" %></h2>
+    <h3 class="govuk-heading-m"><%= link_to_if @link, @title, @link, class: "cms-picture-card__link" %></h3>
   </div>
   <div class="cms-picture-card__text">
     <%= render @body_text.render %>
diff --git a/app/components/cms/resource_card_component/resource_card_component.html.erb b/app/components/cms/resource_card_component/resource_card_component.html.erb
index 2fb1658d29..20565e205b 100644
--- a/app/components/cms/resource_card_component/resource_card_component.html.erb
+++ b/app/components/cms/resource_card_component/resource_card_component.html.erb
@@ -2,7 +2,7 @@
   <% if @title %>
     <div class="cms-resource-card__top-content">
       <div class="cms-resource-card__top-content-title">
-        <h2 class="govuk-heading-m"><%= @title %></h1>
+        <h3 class="govuk-heading-m"><%= @title %></h3>
       </div>
       <% if @icon %>
         <div class="cms-resource-card__top-content-image">
diff --git a/app/components/cms/rich_text_block_component.rb b/app/components/cms/rich_text_block_component.rb
index 55428eb3e1..673d547af9 100644
--- a/app/components/cms/rich_text_block_component.rb
+++ b/app/components/cms/rich_text_block_component.rb
@@ -73,7 +73,7 @@ class Heading < Cms::RichTextBlockComponent
     def heading_class
       if @blocks[:level] == 1
         "govuk-heading-l"
-      elsif @blocks[:level] == 2
+      elsif @blocks[:level] == 2 || @blocks[:level] == 3
         "govuk-heading-m"
       else
         "govuk-heading-s"
diff --git a/app/components/cms/testimonial_row_component/testimonial_row_component.html.erb b/app/components/cms/testimonial_row_component/testimonial_row_component.html.erb
index 2d06b599cc..dbac367d5a 100644
--- a/app/components/cms/testimonial_row_component/testimonial_row_component.html.erb
+++ b/app/components/cms/testimonial_row_component/testimonial_row_component.html.erb
@@ -1,7 +1,7 @@
 <%= render GovGridRowComponent.new(additional_classes: wrapper_classes) do |row| %>
   <%= row.with_column("full") do %>
     <% if @title %>
-      <h1 class="govuk-heading-m"><%= @title %></h1>
+      <h2 class="govuk-heading-m"><%= @title %></h2>
     <% end %>
 
     <div class="cms-testimonials-row">
diff --git a/app/components/cms/two_column_video_section_component/two_column_video_section_component.html.erb b/app/components/cms/two_column_video_section_component/two_column_video_section_component.html.erb
index 3950fd6500..3e53c7664f 100644
--- a/app/components/cms/two_column_video_section_component/two_column_video_section_component.html.erb
+++ b/app/components/cms/two_column_video_section_component/two_column_video_section_component.html.erb
@@ -4,10 +4,12 @@
       <div class="tc-row-half">
         <%= render @left_column_content.render %>
         <% if @left_column_button %>
-          <%= render @left_column_button.render %>
+          <div class="cms-button-container">
+            <%= render @left_column_button.render %>
+          </div>
         <% end %>
       </div>
-      <div class="tc-row-half">
+      <div class="tc-row-half cms-two-column-video-section-component__video-wrapper">
         <%= render @video.render %>
         <% if @right_column_content %>
           <div class="cms-two-column-video-section-component__right-text">
diff --git a/app/components/cms/two_column_video_section_component/two_column_video_section_component.scss b/app/components/cms/two_column_video_section_component/two_column_video_section_component.scss
index dbc616bf7a..0ba9697d44 100644
--- a/app/components/cms/two_column_video_section_component/two_column_video_section_component.scss
+++ b/app/components/cms/two_column_video_section_component/two_column_video_section_component.scss
@@ -1,9 +1,4 @@
 .cms-two-column-video-section-component {
-  video {
-    width: 100%;
-    height: auto;
-    display: block;
-  }
 
   &__wrapper {
     &--padded {
@@ -14,4 +9,16 @@
   &__right-text {
       margin-top: 20px;
   }
+
+  &__video-wrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    video {
+      width: 100%;
+      height: auto;
+      display: block;
+    }
+  }
 }
diff --git a/app/webpacker/stylesheets/components/cms/_shared.scss b/app/webpacker/stylesheets/components/cms/_shared.scss
index c5d089bd4b..3e9d318553 100644
--- a/app/webpacker/stylesheets/components/cms/_shared.scss
+++ b/app/webpacker/stylesheets/components/cms/_shared.scss
@@ -85,7 +85,7 @@
 .cms-button-container {
   display: flex;
   flex-direction: column;
-  margin-top: 10px;
+  margin-top: 1rem;
 }
 
 .cms { 
diff --git a/app/webpacker/stylesheets/settings/_links.scss b/app/webpacker/stylesheets/settings/_links.scss
index 18dcb142ef..71eda4b122 100644
--- a/app/webpacker/stylesheets/settings/_links.scss
+++ b/app/webpacker/stylesheets/settings/_links.scss
@@ -41,6 +41,27 @@ a:not([class]) {
   }
 }
 
+.purple-bg {
+  .ncce-link {
+    &:link {
+      color: $white;
+    }
+    &:visited {
+      color: $white;
+    }
+    &:hover {
+      color: $white;
+    }
+    &:focus {
+      color: $white;
+      box-shadow: 0 -2px $brand-yellow, 0 2px $brand-yellow;
+    }
+    &:active {
+      color: $ncce-grey;
+    }
+  }
+}
+
 .ncce-link__icon {
   height: 30px;
   margin-right: 10px;
diff --git a/spec/components/cms/picture_card_component_spec.rb b/spec/components/cms/picture_card_component_spec.rb
index 962aa58db3..fd9c7f33c0 100644
--- a/spec/components/cms/picture_card_component_spec.rb
+++ b/spec/components/cms/picture_card_component_spec.rb
@@ -34,7 +34,7 @@
     end
 
     it "has a linked title" do
-      expect(page).to have_css("h2 a")
+      expect(page).to have_css("h3 a")
     end
 
     it "applies the ribbon class" do
diff --git a/spec/components/cms/rich_text_block_component_spec.rb b/spec/components/cms/rich_text_block_component_spec.rb
index 4a2098427a..69d2621e5d 100644
--- a/spec/components/cms/rich_text_block_component_spec.rb
+++ b/spec/components/cms/rich_text_block_component_spec.rb
@@ -46,7 +46,7 @@
     expect(page).to have_css(".govuk-heading-l", text: "Heading world!")
   end
 
-  it "renders a medium heading" do
+  it "renders a medium heading for h2" do
     render_inline(described_class.new(blocks: [
       type: "heading",
       level: 2,
@@ -58,7 +58,7 @@
     expect(page).to have_css(".govuk-heading-m", text: "Heading world!")
   end
 
-  it "renders a small heading" do
+  it "renders a medium heading or h3" do
     render_inline(described_class.new(blocks: [
       type: "heading",
       level: 3,
@@ -67,6 +67,18 @@
       ]
     ]))
 
+    expect(page).to have_css(".govuk-heading-m", text: "Heading world!")
+  end
+
+  it "renders a small heading" do
+    render_inline(described_class.new(blocks: [
+      type: "heading",
+      level: 4,
+      children: [
+        {type: "text", text: "Heading world!"}
+      ]
+    ]))
+
     expect(page).to have_css(".govuk-heading-s", text: "Heading world!")
   end