From db050cb370e9c2148bb73b3532d5276e3a5ad43a Mon Sep 17 00:00:00 2001 From: Michael Squance Date: Wed, 12 Mar 2025 17:00:41 +0000 Subject: [PATCH 1/3] New full width image banner component Couple of fixes to the generator --- .../cms/full_width_image_banner_component.rb | 18 +++++ ...full_width_image_banner_component.html.erb | 12 +++ .../full_width_image_banner_component.scss | 29 +++++++ .../blocks/full_width_image_banner.rb | 21 +++++ app/services/cms/models/image.rb | 2 +- .../strapi/factories/blocks_factory.rb | 12 +++ .../blocks/full_width_image_banner.rb | 21 +++++ .../blocks/full_width_image_banner.rb | 25 ++++++ .../providers/strapi/queries/dynamic_zone.rb | 1 + lib/generators/strapi/component_generator.rb | 8 +- .../mapping_test_template.rb.tt | 2 +- ...ll_width_image_banner_component_preview.rb | 13 +++ .../full_width_image_banner_component_spec.rb | 80 +++++++++++++++++++ .../blocks/full_width_image_banner_spec.rb | 13 +++ .../blocks/full_width_image_banner_spec.rb | 12 +++ 15 files changed, 263 insertions(+), 6 deletions(-) create mode 100644 app/components/cms/full_width_image_banner_component.rb create mode 100644 app/components/cms/full_width_image_banner_component/full_width_image_banner_component.html.erb create mode 100644 app/components/cms/full_width_image_banner_component/full_width_image_banner_component.scss create mode 100644 app/services/cms/dynamic_components/blocks/full_width_image_banner.rb create mode 100644 app/services/cms/providers/strapi/mocks/dynamic_components/blocks/full_width_image_banner.rb create mode 100644 app/services/cms/providers/strapi/queries/components/blocks/full_width_image_banner.rb create mode 100644 previews/components/cms/full_width_image_banner_component_preview.rb create mode 100644 spec/components/cms/full_width_image_banner_component_spec.rb create mode 100644 spec/services/cms/dynamic_components/blocks/full_width_image_banner_spec.rb create mode 100644 spec/services/cms/providers/strapi/queries/components/blocks/full_width_image_banner_spec.rb diff --git a/app/components/cms/full_width_image_banner_component.rb b/app/components/cms/full_width_image_banner_component.rb new file mode 100644 index 0000000000..3cb05cabdc --- /dev/null +++ b/app/components/cms/full_width_image_banner_component.rb @@ -0,0 +1,18 @@ +# 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 diff --git a/app/components/cms/full_width_image_banner_component/full_width_image_banner_component.html.erb b/app/components/cms/full_width_image_banner_component/full_width_image_banner_component.html.erb new file mode 100644 index 0000000000..7354e1a59a --- /dev/null +++ b/app/components/cms/full_width_image_banner_component/full_width_image_banner_component.html.erb @@ -0,0 +1,12 @@ +
+ <% if show_overlay? %> + <%= render GovGridRowComponent.new(padding: {top: 0, bottom: 0}) do |row| %> + <%= row.with_column("full") do %> +
+ <%= render SectionTitleWithIconComponent.new(text: @overlay_title, icon: @overlay_icon, text_size: :small) %> + <%= render @overlay_text.render %> +
+ <% end %> + <% end %> + <% end %> +
diff --git a/app/components/cms/full_width_image_banner_component/full_width_image_banner_component.scss b/app/components/cms/full_width_image_banner_component/full_width_image_banner_component.scss new file mode 100644 index 0000000000..7a1689e246 --- /dev/null +++ b/app/components/cms/full_width_image_banner_component/full_width_image_banner_component.scss @@ -0,0 +1,29 @@ +.cms-full-width-image-banner { + background-repeat: no-repeat; + background-size: cover; + aspect-ratio: 7/2; + min-height: 100px; + + &__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; + } +} \ No newline at end of file diff --git a/app/services/cms/dynamic_components/blocks/full_width_image_banner.rb b/app/services/cms/dynamic_components/blocks/full_width_image_banner.rb new file mode 100644 index 0000000000..1b39b45ee3 --- /dev/null +++ b/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 diff --git a/app/services/cms/models/image.rb b/app/services/cms/models/image.rb index 029a0f16ef..e079e05cf6 100644 --- a/app/services/cms/models/image.rb +++ b/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 diff --git a/app/services/cms/providers/strapi/factories/blocks_factory.rb b/app/services/cms/providers/strapi/factories/blocks_factory.rb index d5e0e51930..25bc26a8ca 100644 --- a/app/services/cms/providers/strapi/factories/blocks_factory.rb +++ b/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]), + 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) } diff --git a/app/services/cms/providers/strapi/mocks/dynamic_components/blocks/full_width_image_banner.rb b/app/services/cms/providers/strapi/mocks/dynamic_components/blocks/full_width_image_banner.rb new file mode 100644 index 0000000000..5909120a96 --- /dev/null +++ b/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 diff --git a/app/services/cms/providers/strapi/queries/components/blocks/full_width_image_banner.rb b/app/services/cms/providers/strapi/queries/components/blocks/full_width_image_banner.rb new file mode 100644 index 0000000000..b1c7bfc8ff --- /dev/null +++ b/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 diff --git a/app/services/cms/providers/strapi/queries/dynamic_zone.rb b/app/services/cms/providers/strapi/queries/dynamic_zone.rb index 4a32e69624..125cf252a9 100644 --- a/app/services/cms/providers/strapi/queries/dynamic_zone.rb +++ b/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, diff --git a/lib/generators/strapi/component_generator.rb b/lib/generators/strapi/component_generator.rb index d2dd5a164a..2c71fef69c 100644 --- a/lib/generators/strapi/component_generator.rb +++ b/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 diff --git a/lib/generators/strapi/component_templates/mapping_test_template.rb.tt b/lib/generators/strapi/component_templates/mapping_test_template.rb.tt index f38899efd1..04f49faa75 100644 --- a/lib/generators/strapi/component_templates/mapping_test_template.rb.tt +++ b/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 diff --git a/previews/components/cms/full_width_image_banner_component_preview.rb b/previews/components/cms/full_width_image_banner_component_preview.rb new file mode 100644 index 0000000000..ca0f637dba --- /dev/null +++ b/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 diff --git a/spec/components/cms/full_width_image_banner_component_spec.rb b/spec/components/cms/full_width_image_banner_component_spec.rb new file mode 100644 index 0000000000..069c26660a --- /dev/null +++ b/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 diff --git a/spec/services/cms/dynamic_components/blocks/full_width_image_banner_spec.rb b/spec/services/cms/dynamic_components/blocks/full_width_image_banner_spec.rb new file mode 100644 index 0000000000..4e0f5d0944 --- /dev/null +++ b/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 diff --git a/spec/services/cms/providers/strapi/queries/components/blocks/full_width_image_banner_spec.rb b/spec/services/cms/providers/strapi/queries/components/blocks/full_width_image_banner_spec.rb new file mode 100644 index 0000000000..9003d4f950 --- /dev/null +++ b/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 From 4504fe00b75136308229a02680e3ed8a9c3eef62 Mon Sep 17 00:00:00 2001 From: Michael Squance Date: Wed, 12 Mar 2025 17:01:11 +0000 Subject: [PATCH 2/3] Standardrb fixes --- app/components/cms/full_width_image_banner_component.rb | 1 - .../mocks/dynamic_components/blocks/full_width_image_banner.rb | 2 +- spec/components/cms/full_width_image_banner_component_spec.rb | 2 +- 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/app/components/cms/full_width_image_banner_component.rb b/app/components/cms/full_width_image_banner_component.rb index 3cb05cabdc..3b52f5f29d 100644 --- a/app/components/cms/full_width_image_banner_component.rb +++ b/app/components/cms/full_width_image_banner_component.rb @@ -14,5 +14,4 @@ def initialize(background_image:, overlay_title:, overlay_text:, overlay_icon:, def show_overlay? !@overlay_text.nil? || !@overlay_title.nil? end - end diff --git a/app/services/cms/providers/strapi/mocks/dynamic_components/blocks/full_width_image_banner.rb b/app/services/cms/providers/strapi/mocks/dynamic_components/blocks/full_width_image_banner.rb index 5909120a96..715c09f0cf 100644 --- a/app/services/cms/providers/strapi/mocks/dynamic_components/blocks/full_width_image_banner.rb +++ b/app/services/cms/providers/strapi/mocks/dynamic_components/blocks/full_width_image_banner.rb @@ -7,7 +7,7 @@ module Blocks class FullWidthImageBanner < StrapiMock strapi_component "blocks.full-width-image-banner" - attribute(:backgroundImage) {Cms::Mocks::Image.generate_raw_data } + 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 } diff --git a/spec/components/cms/full_width_image_banner_component_spec.rb b/spec/components/cms/full_width_image_banner_component_spec.rb index 069c26660a..b87892440c 100644 --- a/spec/components/cms/full_width_image_banner_component_spec.rb +++ b/spec/components/cms/full_width_image_banner_component_spec.rb @@ -4,7 +4,7 @@ RSpec.describe Cms::FullWidthImageBannerComponent, type: :component do let(:overlay_title) { Faker::Lorem.sentence } - let(:background_image) {Cms::Mocks::Image.as_model} + let(:background_image) { Cms::Mocks::Image.as_model } context "right side overlay" do before do From 381236e3f0fa16fc5a478cad0a0d1523de73f834 Mon Sep 17 00:00:00 2001 From: Michael Squance Date: Thu, 13 Mar 2025 09:45:03 +0000 Subject: [PATCH 3/3] mobile fixes --- .../full_width_image_banner_component.scss | 4 ++++ app/services/cms/providers/strapi/factories/blocks_factory.rb | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/app/components/cms/full_width_image_banner_component/full_width_image_banner_component.scss b/app/components/cms/full_width_image_banner_component/full_width_image_banner_component.scss index 7a1689e246..6c5705da4f 100644 --- a/app/components/cms/full_width_image_banner_component/full_width_image_banner_component.scss +++ b/app/components/cms/full_width_image_banner_component/full_width_image_banner_component.scss @@ -4,6 +4,10 @@ aspect-ratio: 7/2; min-height: 100px; + @include govuk-media-query($until: tablet) { + aspect-ratio: 3/2; + } + &__overlay { width: 30%; min-width: 235px; diff --git a/app/services/cms/providers/strapi/factories/blocks_factory.rb b/app/services/cms/providers/strapi/factories/blocks_factory.rb index 25bc26a8ca..443b0f9c79 100644 --- a/app/services/cms/providers/strapi/factories/blocks_factory.rb +++ b/app/services/cms/providers/strapi/factories/blocks_factory.rb @@ -70,7 +70,7 @@ 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]), + 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] )