Refactored component to use shared css

Added css for background colours in rich text component

Author: A-Wheeto

app/components/cms/rich_text_block_component/rich_text_block_component.scss

@@ -96,3 +96,25 @@
     text-decoration: none;
   }
 }
+
+.purple-bg {
+  .cms-rich-text-block-component:not(.white-bg):not(.white-bg *) {
+    .govuk-body-m, .govuk-body-s {
+       color: $white;
+    }
+  }
+
+  .white-bg {
+    .govuk-body-m, .govuk-body-s {
+      color: $black;
+   }
+  }
+}
+
+.isaac-bg {
+  .cms-rich-text-block-component {
+    a {
+       color: $black;
+    }
+  }
+}

app/components/cms/two_column_video_section_component.rb

@@ -14,10 +14,10 @@ def content_background_color_classes
     classes = []
 
     if @box_color
-      classes << "cms-two-column-video-section-component__wrapper--padded"
+      classes << ["cms-two-column-video-section-component__wrapper--padded", "tc-row"]
       classes << "#{@box_color}-bg"
     else
-      classes << "cms-two-column-video-section-component__wrapper"
+      classes << ["cms-two-column-video-section-component__wrapper", "tc-row"]
     end
     classes
   end

app/components/cms/two_column_video_section_component/two_column_video_section_component.html.erb

@@ -1,13 +1,13 @@
 <%= 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: content_background_color_classes do %>
-      <div class="cms-two-column-video-section-component__left-content">
+      <div class="tc-row-half">
         <%= 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="tc-row-half">
         <%= 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,50 +1,17 @@
 .cms-two-column-video-section-component {
-  &__wrapper {
-    display: flex;
-    gap: 30px;
-
-    @include govuk-media-query($until: tablet) {
-      flex-direction: column;
-      gap: 15px;
-    }
+  video {
+    width: 100%;
+    height: auto;
+    display: block;
+  }
 
+  &__wrapper {
     &--padded {
-      display: flex;
-      gap: 30px;
       padding: 15px;
-
-      @include govuk-media-query($until: tablet) {
-        flex-direction: column;
-        gap: 15px;
-      }
     }
   }
 
-  &__left-content {
-    flex: 0 1 50%;
-
-    @include govuk-media-query($until: tablet) {
-      width: 100%;
-    }
-  }
-
-  &__right {
-    &-content {
-      flex: 0 1 50%
-
-      video {
-        width: 100%;
-        height: auto;
-        display: block;
-      }
-
-      @include govuk-media-query($until: tablet) {
-        width: 100%;
-      }
-    }
-
-    &-text {
+  &__right-text {
       margin-top: 20px;
-    }
   }
 }

app/webpacker/stylesheets/components/cms/_shared.scss

@@ -46,7 +46,10 @@
   .tc-row-one-third {
     flex: 1 1 calc(100% * 1/3);
   }
-  
+
+  .tc-row-half {
+    flex: 0 1 50%;
+  }
 }
 
 .cms-icon-row {
@@ -68,12 +71,12 @@
       box-shadow: none;
     }
   }
-  
+
 }
 
 .cms-dynamic-zone--bottom-padding {
 
   .tc-gov-grid-wrapper:last-child {
     padding-bottom: 40px;
   }
-}
+}