Merge pull request #2304 from NCCE/2963-strapi-banner-component

Strapi banner component

Author: msquance-stem

app/components/cms/full_width_banner_component.rb

@@ -3,7 +3,7 @@
 class Cms::FullWidthBannerComponent < ViewComponent::Base
   delegate :cms_image, to: :helpers
 
-  def initialize(text_content:, image:, image_side:, image_link:, title:, background_color: nil, buttons: [], show_bottom_border: false)
+  def initialize(text_content:, image:, image_side:, image_link:, title:, background_color: nil, buttons: [], show_bottom_border: false, i_belong_flag: false, corner_flourish: false)
     @text_content = text_content
     @image = image
     @image_side = image_side
@@ -12,6 +12,8 @@ def initialize(text_content:, image:, image_side:, image_link:, title:, backgrou
     @background_color = background_color
     @buttons = buttons
     @show_bottom_border = show_bottom_border
+    @i_belong_flag = i_belong_flag
+    @corner_flourish = corner_flourish
   end
 
   def wrapper_classes

app/components/cms/full_width_banner_component/full_width_banner_component.html.erb

@@ -9,11 +9,17 @@
 
       <% if @image %>
         <div class="cms-full-width-banner__media">
+          <% if @i_belong_flag %>
+            <%= content_tag(:div, nil, class: "cms-full-width-banner__media--with-flag") %>
+          <% end %>
+          <% if @corner_flourish %>
+            <%= content_tag(:div, nil, class: "cms-full-width-banner__media--with-flourish-#{@image_side}") %>
+          <% end %>
           <%= render Cms::ImageComponent.new(@image, show_caption: false, link: @image_link) %>
         </div>
       <% end %>
 
-      <div class="cms-full-width-banner__content">
+      <div class="cms-full-width-banner__content white-bg">
         <%= render @text_content.render %>
 
         <% if @buttons %>
@@ -24,6 +30,7 @@
           </div>
         <% end %>
       </div>
+
     <% end %>
   <% end %>
 <% end %>

app/components/cms/full_width_banner_component/full_width_banner_component.scss

@@ -12,38 +12,81 @@
 }
 
 .cms-full-width-banner {
+  display: flex;
+  flex-direction: row;
 
   &.right-align {
     flex-direction: row-reverse;
   }
 
-  display: flex;
-
-  flex-direction: row;
-  gap: 15px;
-
   @include govuk-media-query($until: tablet) {
     flex-direction: column;
-    gap: 0px;
+
+    &.right-align {
+      flex-direction: column;
+    }
   }
 
   &__media {
     flex: 0 0 calc(100% * 1/3);
-    padding: 10px;
+    position: relative;
+
+    &--with-flag {
+      position: absolute;
+      top: 0;
+      left: 5px;
+      height: 97px;
+      width: 79px;
+      display: block;
+      background-image: url("../images/logos/i_belong_flag.svg");
+      background-size: 100%;
+      background-repeat: no-repeat;
+    }
+
+    &--with-flourish {
+      position: relative;
+
+      &-left,
+      &-right {
+        position: absolute;
+        bottom: 0;
+        height: 163px;
+        width: 162px;
+        display: block;
+        background-image: url("../images/components/cms/full_width_banner_component/flourish.svg");
+      }
+
+      &-left {
+        left: 0;
+      }
+
+      &-right {
+        right: 0;
+        transform: scaleX(-1);
+      }
+    }
+
+    .cms-image {
+      display: flex;
+      width: 100%;
+      height: 100%
+    }
 
     img {
       width: 100%;
+      height: 100%;
+      object-fit: cover;
     }
+
   }
-  
+
   &__content {
     flex: 1 1 calc(100% * 2/3);
-    padding: 20px 0px;
+    padding: 20px 20px;
 
     .govuk-button {
       min-width: 300px;
     }
-
   }
 
-}
+}

app/components/cms/question_and_answer_component/question_and_answer_component.scss

@@ -53,10 +53,10 @@ $avatar_size: 32px;
         bottom: 12px;
         left: -7px;
         box-sizing: border-box;
-        
+
         border: 8px solid black;
         border-color: transparent transparent white white;
-        
+
         transform-origin: center;
         transform: rotate(45deg);
         box-shadow: -4px 4px 6px -3px #0000004D;
@@ -116,10 +116,10 @@ $avatar_size: 32px;
         bottom: 12px;
         right: -7px;
         box-sizing: border-box;
-        
+
         border: 8px solid black;
         border-color: transparent transparent white white;
-        
+
         transform-origin: center;
         transform: rotate(-135deg);
         box-shadow: -4px 4px 6px -3px #0000004D;
@@ -133,7 +133,7 @@ $avatar_size: 32px;
       }
 
       &.answer-with-background {
-        background-image: url("../images/components/cms_question_and_answer_component/background_triangle.svg");
+        background-image: url("../images/components/cms/question_and_answer_component/background_triangle.svg");
         background-position: top right;
         background-repeat: no-repeat;
       }
@@ -168,4 +168,4 @@ $avatar_size: 32px;
     }
   }
 
-}
+}

app/services/cms/dynamic_components/full_width_banner.rb

@@ -1,9 +1,9 @@
 module Cms
   module DynamicComponents
     class FullWidthBanner
-      attr_accessor :text_content, :image, :image_side, :buttons, :image_link, :title, :background_color, :show_bottom_border
+      attr_accessor :text_content, :image, :image_side, :buttons, :image_link, :title, :background_color, :show_bottom_border, :i_belong_flag, :corner_flourish
 
-      def initialize(text_content:, title:, image: nil, image_side: :left, image_link: nil, background_color: :white, buttons: [], show_bottom_border: false)
+      def initialize(text_content:, title:, image: nil, image_side: :left, image_link: nil, background_color: :white, buttons: [], show_bottom_border: false, i_belong_flag: false, corner_flourish: false)
         @text_content = text_content
         @image = image
         @image_side = image_side
@@ -12,6 +12,8 @@ def initialize(text_content:, title:, image: nil, image_side: :left, image_link:
         @title = title
         @buttons = buttons
         @show_bottom_border = show_bottom_border
+        @i_belong_flag = i_belong_flag
+        @corner_flourish = corner_flourish
       end
 
       def render
@@ -23,7 +25,9 @@ def render
           background_color:,
           buttons:,
           title:,
-          show_bottom_border:
+          show_bottom_border:,
+          i_belong_flag:,
+          corner_flourish:
         )
       end
     end

app/services/cms/providers/strapi/factories/blocks_factory.rb

@@ -154,7 +154,9 @@ def self.to_full_width_banner(strapi_data)
               image_link: strapi_data[:imageLink],
               buttons: strapi_data[:buttons] ? strapi_data[:buttons].map { to_ncce_button(_1) } : [],
               title: strapi_data[:sectionTitle],
-              show_bottom_border: strapi_data[:showBottomBorder]
+              show_bottom_border: strapi_data[:showBottomBorder],
+              i_belong_flag: strapi_data[:iBelongFlag],
+              corner_flourish: strapi_data[:imageCornerFlourish]
             )
           end
 

app/services/cms/providers/strapi/mocks/full_width_banner.rb

@@ -10,6 +10,8 @@ class FullWidthBanner < StrapiMock
           attribute(:backgroundColor) { {name: "white"} }
           attribute(:imageSide) { "right" }
           attribute(:buttons) { nil }
+          attribute(:i_belong_flag) { false }
+          attribute(:corner_flourish) { false }
         end
       end
     end

app/webpacker/images/components/cms/full_width_banner_component/flourish.svg

@@ -7,7 +7,7 @@ def default
       title: "Banner title",
       background_color: :white,
       image: Cms::Mocks::Image.as_model,
-      image_side: :left,
+      image_side: "left",
       image_link: nil,
       buttons: []
     ))
@@ -19,9 +19,35 @@ def with_button
       text_content: Cms::Mocks::RichBlocks.as_model,
       background_color: :white,
       image: Cms::Mocks::Image.as_model,
-      image_side: :left,
+      image_side: "left",
       image_link: nil,
       buttons: [Cms::Mocks::NcceButton.as_model]
     ))
   end
+
+  def with_i_belong_flag
+    render(Cms::FullWidthBannerComponent.new(
+      title: "Banner title",
+      text_content: Cms::Mocks::RichBlocks.as_model,
+      background_color: :white,
+      image: Cms::Mocks::Image.as_model,
+      image_side: "right",
+      image_link: nil,
+      buttons: [Cms::Mocks::NcceButton.as_model],
+      i_belong_flag: true
+    ))
+  end
+
+  def with_corner_flourish
+    render(Cms::FullWidthBannerComponent.new(
+      title: "Banner title",
+      text_content: Cms::Mocks::RichBlocks.as_model,
+      background_color: :white,
+      image: Cms::Mocks::Image.as_model,
+      image_side: "left",
+      image_link: nil,
+      buttons: [Cms::Mocks::NcceButton.as_model],
+      corner_flourish: true
+    ))
+  end
 end