Merge pull request #2372 from NCCE/3002-strapi---issues-from-comms-meeting

msquance-stem · web-flow · commit b6d9a1a1a082 · 2025-04-02T12:47:23.000+01:00
Fixing Strapi Comms Issues
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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
 

Original file line number	Diff line number	Diff line change
`@@ -103,5 +103,4 @@`
`103`	`103`	`min-width: 300px;`
`104`	`104`	`}`
`105`	`105`	`}`
`106`		`-`
`107`	`106`	`}`
Original file line number	Diff line number	Diff line change
`@@ -85,7 +85,7 @@`
`85`	`85`	`.cms-button-container {`
`86`	`86`	`display: flex;`
`87`	`87`	`flex-direction: column;`
`88`		`- margin-top: 10px;`
	`88`	`+ margin-top: 1rem;`
`89`	`89`	`}`
`90`	`90`
`91`	`91`	`.cms {`