Full Width Image Banner

app/components/cms/full_width_image_banner_component.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+class Cms::FullWidthImageBannerComponent < ViewComponent::Base
+  delegate :cms_url, to: :helpers
+
+  def initialize(background_image:, overlay_title:, overlay_text:, overlay_icon:, overlay_side:)
+    @background_image = background_image
+    @overlay_title = overlay_title
+    @overlay_text = overlay_text
+    @overlay_icon = overlay_icon
+    @overlay_side = overlay_side
+  end
+
+  def show_overlay?
+    !@overlay_text.nil? || !@overlay_title.nil?
+  end
+end

app/components/cms/full_width_image_banner_component/full_width_image_banner_component.html.erb

@@ -0,0 +1,12 @@
+<div class="cms-full-width-image-banner" style="background-image: url(<%= cms_url(@background_image.image_url) %>)">
+  <% if show_overlay? %>
+    <%= render GovGridRowComponent.new(padding: {top: 0, bottom: 0}) do |row| %>
+      <%= row.with_column("full") do %>
+        <div class="cms-full-width-image-banner__overlay cms-full-width-image-banner__overlay--<%= @overlay_side %>">
+          <%= render SectionTitleWithIconComponent.new(text: @overlay_title, icon: @overlay_icon, text_size: :small) %>
+          <%= render @overlay_text.render %>
+        </div>
+      <% end %>
+    <% end %>
+  <% end %>
+</div>

app/components/cms/full_width_image_banner_component/full_width_image_banner_component.scss

@@ -0,0 +1,33 @@
+.cms-full-width-image-banner {
+  background-repeat: no-repeat;
+  background-size: cover;
+  aspect-ratio: 7/2;
+  min-height: 100px;
+
+  @include govuk-media-query($until: tablet) {
+    aspect-ratio: 3/2;
+  }
+
+  &__overlay {
+    width: 30%;
+    min-width: 235px;
+    max-width: 300px;
+    background-color: $light-blue;
+    padding: 15px;
+    top: 0;
+    margin: 0;
+    position: absolute;
+
+    &--right {
+      right: 15px;
+    }
+
+    &--left {
+      left: 15px;
+    }
+  }
+
+  .govuk-grid-column-full {
+    position: relative;
+  }
+}

app/services/cms/dynamic_components/blocks/full_width_image_banner.rb

@@ -0,0 +1,21 @@
+module Cms
+  module DynamicComponents
+    module Blocks
+      class FullWidthImageBanner
+        attr_accessor :background_image, :overlay_title, :overlay_text, :overlay_icon, :overlay_side
+
+        def initialize(background_image:, overlay_title:, overlay_text:, overlay_icon:, overlay_side:)
+          @background_image = background_image
+          @overlay_title = overlay_title
+          @overlay_text = overlay_text
+          @overlay_icon = overlay_icon
+          @overlay_side = overlay_side
+        end
+
+        def render
+          Cms::FullWidthImageBannerComponent.new(background_image:, overlay_title:, overlay_text:, overlay_icon:, overlay_side:)
+        end
+      end
+    end
+  end
+end

app/services/cms/models/image.rb

@@ -13,7 +13,7 @@ def initialize(url:, alt:, caption:, formats:, default_size:)
       end
 
       def image_url
-        if formats&.has_key? default_size.to_sym
+        if formats&.has_key?(default_size.to_sym)
           formats[default_size.to_sym][:url]
         else
           url

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

@@ -51,6 +51,8 @@ def self.generate_component(component_name, strapi_data)
               to_two_column_picture_section(strapi_data)
             when "video-cards-section"
               to_card_wrapper(strapi_data, to_video_card_array(strapi_data[:videoCards]))
+            when "full-width-image-banner"
+              to_full_width_image_banner(strapi_data)
             end
           end
 
@@ -64,6 +66,16 @@ def self.to_text_with_testimonial(strapi_data)
             )
           end
 
+          def self.to_full_width_image_banner(strapi_data)
+            DynamicComponents::Blocks::FullWidthImageBanner.new(
+              background_image: to_image(strapi_data, :backgroundImage, default_size: :original),
+              overlay_title: strapi_data[:overlayTitle],
+              overlay_text: to_content_block(strapi_data[:overlayText], paragraph_class: "govuk-body-s"),
+              overlay_icon: to_image(strapi_data, :overlayIcon, default_size: :small),
+              overlay_side: strapi_data[:overlaySide]
+            )
+          end
+
           def self.to_icon_row(strapi_data)
             DynamicComponents::IconRow.new(
               icons: strapi_data[:icons].map { to_icon(_1) }

app/services/cms/providers/strapi/mocks/dynamic_components/blocks/full_width_image_banner.rb

@@ -0,0 +1,21 @@
+module Cms
+  module Providers
+    module Strapi
+      module Mocks
+        module DynamicComponents
+          module Blocks
+            class FullWidthImageBanner < StrapiMock
+              strapi_component "blocks.full-width-image-banner"
+
+              attribute(:backgroundImage) { Cms::Mocks::Image.generate_raw_data }
+              attribute(:overlayTitle) { Faker::Lorem.sentence }
+              attribute(:overlayText) { Cms::Mocks::RichBlocks.generate_data }
+              attribute(:overlayIcon) { Cms::Mocks::Image.generate_raw_data }
+              attribute(:overlaySide) { "right" }
+            end
+          end
+        end
+      end
+    end
+  end
+end

app/services/cms/providers/strapi/queries/components/blocks/full_width_image_banner.rb

@@ -0,0 +1,25 @@
+module Cms
+  module Providers
+    module Strapi
+      module Queries
+        module Components
+          module Blocks
+            class FullWidthImageBanner < BaseComponentQuery
+              def self.name = "ComponentBlocksFullWidthImageBanner"
+
+              def self.base_fields
+                <<~GRAPHQL.freeze
+                  #{SharedFields.image_fields(:backgroundImage)}
+                  overlayTitle
+                  overlayText
+                  #{SharedFields.image_fields(:overlayIcon)}
+                  overlaySide
+                GRAPHQL
+              end
+            end
+          end
+        end
+      end
+    end
+  end
+end

app/services/cms/providers/strapi/queries/dynamic_zone.rb

@@ -9,6 +9,7 @@ class DynamicZone
             Components::Blocks::EnrolmentSplitCourseCard,
             Components::Blocks::EnrolmentTestimonial,
             Components::Blocks::FullWidthBanner,
+            Components::Blocks::FullWidthImageBanner,
             Components::Blocks::FullWidthText,
             Components::Blocks::HorizontalCard,
             Components::Blocks::IconRow,

lib/generators/strapi/component_generator.rb

@@ -49,7 +49,7 @@ def create_data_text
     def run_view_component_generator
       Rails::Generators.invoke(
         "component",
-        ["Cms::#{@component_name_class}", *@rails_param_names, "--test-framework=rspec", "--sidecar"].compact,
+        ["Cms::#{@component_name_class}", *@rails_param_names, "--test-framework=rspec", "--sidecar", "--preview"].compact,
         behaviour: :invoke,
         destination_root:
       )
@@ -84,15 +84,15 @@ def print_method_defintions
 
     def factory_key
       <<~RUBY
-        when "#{@component_strapi_name}":
+        when "#{@component_strapi_name}"
           to_#{@component_filename}(strapi_data)
       RUBY
     end
 
     def method_defintion
       <<~RUBY
-        def to_#{@component_filename}(strapi_data)
-          DynamicsComponents::Blocks::#{@component_name_class}.new(
+        def self.to_#{@component_filename}(strapi_data)
+          DynamicComponents::Blocks::#{@component_name_class}.new(
             #{@strapi_params.map { "#{_1.underscore}: strapi_data[:#{_1}]" }.join(",\n\s\s\s\s")}
           )
         end

lib/generators/strapi/component_templates/mapping_test_template.rb.tt

@@ -2,7 +2,7 @@ require "rails_helper"
 
 RSpec.describe Cms::DynamicComponents::<%= @component_type_class %>::<%= @component_name_class %> do
   before do
-    @comp = Cms::Providers::Strapi::Factories::<%= @component_type_class %>Factory.process_component(
+    @comp = Cms::Providers::Strapi::Factories::ComponentFactory.process_component(
       Cms::Mocks::DynamicComponents::<%= @component_type_class %>::<%= @component_name_class %>.generate_raw_data
     )
   end

previews/components/cms/full_width_image_banner_component_preview.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+class Cms::FullWidthImageBannerComponentPreview < ViewComponent::Preview
+  def default
+    render(Cms::FullWidthImageBannerComponent.new(
+      overlay_title: Faker::Lorem.sentence,
+      background_image: Cms::Mocks::Image.as_model,
+      overlay_icon: Cms::Mocks::Image.as_model,
+      overlay_text: Cms::Mocks::RichBlocks.as_model,
+      overlay_side: "right"
+    ))
+  end
+end

spec/components/cms/full_width_image_banner_component_spec.rb

@@ -0,0 +1,80 @@
+# frozen_string_literal: true
+
+require "rails_helper"
+
+RSpec.describe Cms::FullWidthImageBannerComponent, type: :component do
+  let(:overlay_title) { Faker::Lorem.sentence }
+  let(:background_image) { Cms::Mocks::Image.as_model }
+
+  context "right side overlay" do
+    before do
+      render_inline(described_class.new(
+        overlay_title:,
+        background_image:,
+        overlay_icon: Cms::Mocks::Image.as_model,
+        overlay_text: Cms::Mocks::RichBlocks.as_model,
+        overlay_side: "right"
+      ))
+    end
+
+    it "should render the component" do
+      expect(page).to have_css(".cms-full-width-image-banner")
+    end
+
+    it "should render overlay title as h3" do
+      expect(page).to have_css("h3", text: overlay_title)
+    end
+
+    it "should add background image url to banner" do
+      expect(page).to have_css(".cms-full-width-image-banner[style*='background-image: url(#{background_image.image_url}']")
+    end
+
+    it "should render body text" do
+      expect(page).to have_css(".cms-rich-text-block-component")
+    end
+
+    it "should render the overlay" do
+      expect(page).to have_css(".cms-full-width-image-banner__overlay--right")
+    end
+  end
+
+  context "left side overlay" do
+    before do
+      render_inline(described_class.new(
+        overlay_title:,
+        background_image: Cms::Mocks::Image.as_model,
+        overlay_icon: Cms::Mocks::Image.as_model,
+        overlay_text: Cms::Mocks::RichBlocks.as_model,
+        overlay_side: "left"
+      ))
+    end
+
+    it "should render the component" do
+      expect(page).to have_css(".cms-full-width-image-banner")
+    end
+
+    it "should render the overlay" do
+      expect(page).to have_css(".cms-full-width-image-banner__overlay--left")
+    end
+  end
+
+  context "no overlay" do
+    before do
+      render_inline(described_class.new(
+        overlay_title: nil,
+        background_image: Cms::Mocks::Image.as_model,
+        overlay_icon: nil,
+        overlay_text: nil,
+        overlay_side: "left"
+      ))
+    end
+
+    it "should render the component" do
+      expect(page).to have_css(".cms-full-width-image-banner")
+    end
+
+    it "should not render the overlay" do
+      expect(page).not_to have_css(".cms-full-width-image-banner__overlay--left")
+    end
+  end
+end

spec/services/cms/dynamic_components/blocks/full_width_image_banner_spec.rb

@@ -0,0 +1,13 @@
+require "rails_helper"
+
+RSpec.describe Cms::DynamicComponents::Blocks::FullWidthImageBanner do
+  before do
+    @comp = Cms::Providers::Strapi::Factories::ComponentFactory.process_component(
+      Cms::Mocks::DynamicComponents::Blocks::FullWidthImageBanner.generate_raw_data
+    )
+  end
+
+  it "should render as Cms::FullWidthImageBannerComponent" do
+    expect(@comp.render).to be_a(Cms::FullWidthImageBannerComponent)
+  end
+end

spec/services/cms/providers/strapi/queries/components/blocks/full_width_image_banner_spec.rb

@@ -0,0 +1,12 @@
+require "rails_helper"
+
+RSpec.describe Cms::Providers::Strapi::Queries::Components::Blocks::FullWidthImageBanner do
+  it_should_behave_like "a strapi graphql component",
+    %w[
+      backgroundImage
+      overlayTitle
+      overlayText
+      overlayIcon
+      overlaySide
+    ]
+end