Fixing Strapi Comms Issues

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 %>

app/components/cms/full_width_banner_component/full_width_banner_component.scss

@@ -103,5 +103,4 @@
       min-width: 300px;
     }
   }
-
 }

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>

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 %>

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">

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"

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">

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">

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;
+    }
+  }
 }

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 { 

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;

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

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