Refactored component to use box color from strapi

A-Wheeto · A-Wheeto · commit 99003db5ffee · 2025-03-04T10:40:16.000Z
Updated mocks and testing
Added previews for new components
diff --git a/app/components/cms/two_column_video_section_component.rb b/app/components/cms/two_column_video_section_component.rb
@@ -1,19 +1,24 @@
 # frozen_string_literal: true
 
 class Cms::TwoColumnVideoSectionComponent < ViewComponent::Base
-  def initialize(left_column_content:, video:, right_column_content: nil, background_color: nil, left_column_button: nil)
+  def initialize(left_column_content:, video:, right_column_content: nil, background_color: nil, left_column_button: nil, box_color: nil)
     @left_column_content = left_column_content
     @video = video
     @right_column_content = right_column_content
     @background_color = background_color
     @left_column_button = left_column_button
+    @box_color = box_color
   end
 
-  def background_color_classes
-    if @background_color == "isaac"
-      "cms-two-column-video-section-component--wrapper__white"
+  def content_background_color_classes
+    classes = []
+
+    if @box_color
+      classes << "cms-two-column-video-section-component__wrapper--padded"
+      classes << "#{@box_color}-bg"
     else
-      "cms-two-column-video-section-component--wrapper"
+      classes << "cms-two-column-video-section-component__wrapper"
     end
+    classes
   end
 end
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
@@ -1,16 +1,16 @@
 <%= render GovGridRowComponent.new(background_color: @background_color, additional_classes: "cms-two-column-video-section-component") do |row|  %>
   <%= row.with_column("full") do %>
-    <%= content_tag :div, class: background_color_classes do %>
-      <div class="cms-two-column-video-section-component--left-content">
+    <%= content_tag :div, class: content_background_color_classes do %>
+      <div class="cms-two-column-video-section-component__left-content">
         <%= render @left_column_content.render %>
         <% if @left_column_button %>
           <%= render @left_column_button.render %>
         <% end %>
       </div>
-      <div class="cms-two-column-video-section-component--right-content">
+      <div class="cms-two-column-video-section-component__right-content">
         <%= render @video.render %>
         <% if @right_column_content %>
-          <div class="cms-two-column-video-section-component--right-text">
+          <div class="cms-two-column-video-section-component__right-text">
             <%= render @right_column_content.render %>
           </div>
         <% end %>
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,5 +1,5 @@
 .cms-two-column-video-section-component {
-  &--wrapper {
+  &__wrapper {
     display: flex;
     gap: 30px;
 
@@ -8,10 +8,9 @@
       gap: 15px;
     }
 
-    &__white {
+    &--padded {
       display: flex;
       gap: 30px;
-      background-color: $white;
       padding: 15px;
 
       @include govuk-media-query($until: tablet) {
@@ -21,7 +20,7 @@
     }
   }
 
-  &--left-content {
+  &__left-content {
     width: 50%;
     flex: 0 0 calc(50% - 15px);
 
@@ -30,7 +29,7 @@
     }
   }
 
-  &--right {
+  &__right {
     &-content {
       width: 50%;
       flex: 0 0 calc(50% - 15px);
diff --git a/app/services/cms/dynamic_components/two_column_video_section.rb b/app/services/cms/dynamic_components/two_column_video_section.rb
@@ -1,14 +1,15 @@
 module Cms
   module DynamicComponents
     class TwoColumnVideoSection
-      attr_accessor :left_column_content, :video, :right_column_content, :background_color, :left_column_button
+      attr_accessor :left_column_content, :video, :right_column_content, :background_color, :left_column_button, :box_color
 
-      def initialize(left_column_content:, video:, right_column_content:, background_color:, left_column_button:)
+      def initialize(left_column_content:, video:, right_column_content:, background_color:, left_column_button:, box_color:)
         @left_column_content = left_column_content
         @video = video
         @right_column_content = right_column_content
         @background_color = background_color
         @left_column_button = left_column_button
+        @box_color = box_color
       end
 
       def render
@@ -17,7 +18,8 @@ def render
           video:,
           right_column_content:,
           background_color:,
-          left_column_button:
+          left_column_button:,
+          box_color:
         )
       end
     end
diff --git a/app/services/cms/providers/strapi/factories/blocks_factory.rb b/app/services/cms/providers/strapi/factories/blocks_factory.rb
@@ -58,7 +58,8 @@ def self.to_two_column_video_section(strapi_data)
               video: to_embedded_video(strapi_data[:video]),
               right_column_content: to_content_block(strapi_data[:rightColumnContent]),
               background_color: extract_color_name(strapi_data, :bkColor),
-              left_column_button: to_ncce_button(strapi_data[:leftColumnButton])
+              left_column_button: to_ncce_button(strapi_data[:leftColumnButton]),
+              box_color: extract_color_name(strapi_data, :boxColor),
             )
           end
 
diff --git a/app/services/cms/providers/strapi/mocks/dynamic_components/two_column_video_section.rb b/app/services/cms/providers/strapi/mocks/dynamic_components/two_column_video_section.rb
@@ -9,6 +9,7 @@ class TwoColumnVideoSection < StrapiMock
             attribute(:leftColumnContent) { RichBlocks.generate_data }
             attribute(:rightColumnContent) { RichBlocks.generate_data }
             attribute(:bkColor) { ColorScheme.generate_data(name: "light_grey") }
+            attribute(:boxColor) { ColorScheme.generate_data(name: "white") }
             attribute(:video) { Cms::Mocks::DynamicComponents::EmbeddedVideo.generate_data }
             attribute(:leftColumnButton) { Cms::Mocks::NcceButton.generate_data }
           end
diff --git a/app/services/cms/providers/strapi/queries/components/blocks/two_column_video_section.rb b/app/services/cms/providers/strapi/queries/components/blocks/two_column_video_section.rb
@@ -13,6 +13,7 @@ def self.base_fields
                   rightColumnContent
                   #{ContentBlocks::EmbeddedVideo.embed(:video)}
                   #{SharedFields.color_theme(:bkColor)}
+                  #{SharedFields.color_theme(:boxColor)}
                   #{Buttons::NcceButton.embed(:leftColumnButton)}
                 GRAPHQL
               end
diff --git a/previews/components/cms/embedded_video_component_preview.rb b/previews/components/cms/embedded_video_component_preview.rb
@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+class Cms::EmbeddedVideoComponentPreview < ViewComponent::Preview
+  def local
+    render(
+      Cms::EmbeddedVideoComponent.new(
+        url: "https://static.teachcomputing.org/How_important_is_the_I_Belong_programme.mp4"
+      )
+    )
+  end
+
+  def youtube
+    render(
+      Cms::EmbeddedVideoComponent.new(
+        url: "https://www.youtube.com/watch?v=-fTboqiyjxk&list=PLwcV67XMdDdJT0TkvZo6cTDSR0uJgP3Ku"
+      )
+    )
+  end
+end
diff --git a/previews/components/cms/two_column_video_section_component_preview.rb b/previews/components/cms/two_column_video_section_component_preview.rb
@@ -0,0 +1,44 @@
+class Cms::TwoColumnVideoSectionComponentPreview < ViewComponent::Preview
+  layout "full-width"
+
+  def default
+    render Cms::TwoColumnVideoSectionComponent.new(
+      left_column_content: Cms::Mocks::RichBlocks.as_model,
+      video: Cms::Mocks::DynamicComponents::EmbeddedVideo.as_model
+    )
+  end
+
+  def with_right_column_content
+    render Cms::TwoColumnVideoSectionComponent.new(
+      left_column_content: Cms::Mocks::RichBlocks.as_model,
+      video: Cms::Mocks::DynamicComponents::EmbeddedVideo.as_model,
+      right_column_content: Cms::Mocks::RichBlocks.as_model
+    )
+  end
+
+  def with_background_color
+    render Cms::TwoColumnVideoSectionComponent.new(
+      left_column_content: Cms::Mocks::RichBlocks.as_model,
+      video: Cms::Mocks::DynamicComponents::EmbeddedVideo.as_model,
+      background_color: "isaac"
+    )
+  end
+
+  def with_button
+    render Cms::TwoColumnVideoSectionComponent.new(
+      left_column_content: Cms::Mocks::RichBlocks.as_model,
+      video: Cms::Mocks::DynamicComponents::EmbeddedVideo.as_model,
+      left_column_button: Cms::Mocks::NcceButton.as_model
+    )
+  end
+
+  def with_content_background_color
+    render Cms::TwoColumnVideoSectionComponent.new(
+      left_column_content: Cms::Mocks::RichBlocks.as_model,
+      video: Cms::Mocks::DynamicComponents::EmbeddedVideo.as_model,
+      left_column_button: Cms::Mocks::NcceButton.as_model,
+      background_color: "isaac",
+      box_color: "white"
+    )
+  end
+end
diff --git a/spec/components/cms/two_column_video_section_component_spec.rb b/spec/components/cms/two_column_video_section_component_spec.rb
@@ -52,17 +52,26 @@
     end
   end
 
-  context "with yellow background color" do
+  context "with background colors" do
     before do
       render_inline(described_class.new(
         left_column_content: Cms::Mocks::RichBlocks.as_model,
         video: Cms::Mocks::DynamicComponents::EmbeddedVideo.as_model,
-        background_color: "isaac"
+        background_color: "isaac",
+        box_color: "white"
       ))
     end
 
-    it "has white background color for content" do
-      expect(page).to have_css(".cms-two-column-video-section-component--wrapper__white")
+    it "has yellow background color" do
+      expect(page).to have_css(".isaac-bg")
+    end
+
+    it "has padded wrapper class" do
+      expect(page).to have_css(".cms-two-column-video-section-component__wrapper--padded")
+    end
+
+    it "has content background color" do
+      expect(page).to have_css(".white-bg")
     end
   end
 
diff --git a/spec/services/cms/providers/strapi/queries/components/blocks/two_column_video_section_spec.rb b/spec/services/cms/providers/strapi/queries/components/blocks/two_column_video_section_spec.rb
@@ -8,5 +8,6 @@
       bkColor
       video
       leftColumnButton
+      boxColor
     ]
 end

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`.cms-two-column-video-section-component {`
`2`		`- &--wrapper {`
	`2`	`+ &__wrapper {`
`3`	`3`	`display: flex;`
`4`	`4`	`gap: 30px;`
`5`	`5`
`@@ -8,10 +8,9 @@`
`8`	`8`	`gap: 15px;`
`9`	`9`	`}`
`10`	`10`
`11`		`- &__white {`
	`11`	`+ &--padded {`
`12`	`12`	`display: flex;`
`13`	`13`	`gap: 30px;`
`14`		`- background-color: $white;`
`15`	`14`	`padding: 15px;`
`16`	`15`
`17`	`16`	`@include govuk-media-query($until: tablet) {`
`@@ -21,7 +20,7 @@`
`21`	`20`	`}`
`22`	`21`	`}`
`23`	`22`
`24`		`- &--left-content {`
	`23`	`+ &__left-content {`
`25`	`24`	`width: 50%;`
`26`	`25`	`flex: 0 0 calc(50% - 15px);`
`27`	`26`
`@@ -30,7 +29,7 @@`
`30`	`29`	`}`
`31`	`30`	`}`
`32`	`31`
`33`		`- &--right {`
	`32`	`+ &__right {`
`34`	`33`	`&-content {`
`35`	`34`	`width: 50%;`
`36`	`35`	`flex: 0 0 calc(50% - 15px);`
Original file line number	Diff line number	Diff line change
`@@ -58,7 +58,8 @@ def self.to_two_column_video_section(strapi_data)`
`58`	`58`	`video: to_embedded_video(strapi_data[:video]),`
`59`	`59`	`right_column_content: to_content_block(strapi_data[:rightColumnContent]),`
`60`	`60`	`background_color: extract_color_name(strapi_data, :bkColor),`
`61`		`- left_column_button: to_ncce_button(strapi_data[:leftColumnButton])`
	`61`	`+ left_column_button: to_ncce_button(strapi_data[:leftColumnButton]),`
	`62`	`+ box_color: extract_color_name(strapi_data, :boxColor),`
`62`	`63`	`)`
`63`	`64`	`end`
`64`	`65`