Merge pull request #2332 from NCCE/2995-strapi-component-update---page-title

Update Strapi page title with background colour and I belong flag

Author: msquance-stem

app/components/cms/page_title_component.rb

@@ -1,11 +1,13 @@
 # frozen_string_literal: true
 
 class Cms::PageTitleComponent < ViewComponent::Base
-  def initialize(title:, sub_text: nil, title_image: nil, title_video_url: nil, status_message: nil)
+  def initialize(title:, sub_text: nil, title_image: nil, title_video_url: nil, status_message: nil, background_color: nil, i_belong_flag: false)
     @title = title
     @sub_text = sub_text
     @title_image = title_image
     @title_video_url = title_video_url
     @status_message = status_message
+    @background_color = background_color.presence || "lime-green"
+    @i_belong_flag = i_belong_flag
   end
 end

app/components/cms/page_title_component/page_title_component.html.erb

@@ -1,4 +1,4 @@
-<%= render GovGridRowComponent.new(background_color: "lime-green", padding: {top: 7, bottom: 7}) do |row| %>
+<%= render GovGridRowComponent.new(background_color: @background_color, padding: {top: 7, bottom: 7}) do |row| %>
   <%= row.with_column("full") do %>
 
     <div class="page-title__wrapper">
@@ -26,6 +26,10 @@
           <div class="page-title__media">
             <%= render Cms::ImageComponent.new(@title_image, show_caption: false) %>
           </div>
+        <% elsif @i_belong_flag %>
+          <div class="page-title__i-belong-flag">
+            <%= render IBelongFlagComponent.new %>
+          </div>
         <% end %>
       </div>
     </div>

app/components/cms/page_title_component/page_title_component.scss

@@ -22,7 +22,7 @@
     background-color: $white;
     display: flex;
     flex-direction: column;
-    
+
     @include govuk-media-query($from: tablet) {
       flex-direction: row;
     }
@@ -87,4 +87,23 @@
       }
     }
   }
+
+  &__i-belong-flag {
+    display: none; // no logo in mobile
+    grid-area: logo;
+    .i-belong-flag {
+      position: relative;
+    }
+    @include govuk-media-query($from: desktop) {
+      display: block;
+      text-align: right;
+      img {
+        margin: 0 2rem 2rem auto;
+      }
+    }
+
+    img {
+      display: block;
+    }
+  }
 }

app/services/cms/models/page_title.rb

@@ -1,17 +1,19 @@
 module Cms
   module Models
     class PageTitle
-      attr_accessor :title, :sub_text, :title_image, :title_video_url
+      attr_accessor :title, :sub_text, :title_image, :title_video_url, :background_color, :i_belong_flag
 
-      def initialize(title:, sub_text:, title_image: nil, title_video_url: nil)
+      def initialize(title:, sub_text:, title_image: nil, title_video_url: nil, background_color: nil, i_belong_flag: false)
         @title = title
         @sub_text = sub_text
         @title_image = title_image
         @title_video_url = title_video_url
+        @background_color = background_color
+        @i_belong_flag = i_belong_flag
       end
 
       def render
-        Cms::PageTitleComponent.new(title:, sub_text:, title_image:, title_video_url:)
+        Cms::PageTitleComponent.new(title:, sub_text:, title_image:, title_video_url:, background_color:, i_belong_flag:)
       end
     end
   end

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

@@ -45,7 +45,9 @@ def self.process_model(mapping, all_data)
                 title: strapi_data[:title],
                 sub_text: strapi_data[:subText],
                 title_image: to_image(strapi_data, :titleImage),
-                title_video_url: strapi_data[:titleVideoUrl]
+                title_video_url: strapi_data[:titleVideoUrl],
+                background_color: extract_color_name(strapi_data, :bkColor),
+                i_belong_flag: strapi_data[:iBelongFlag]
               )
             elsif model_class == Models::BlogPreview
               to_blog_preview(strapi_data)

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

@@ -5,6 +5,10 @@ module Mocks
         class PageTitle < StrapiMock
           attribute(:title) { Faker::Lorem.words(number: 5) }
           attribute(:subText) { nil }
+          attribute(:titleImage) { nil }
+          attribute(:titleVideoUrl) { nil }
+          attribute(:bkColor) { nil }
+          attribute(:iBelongFlag) { false }
         end
       end
     end

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

@@ -10,6 +10,8 @@ def self.embed(name)
                 subText
                 titleVideoUrl
                 #{SharedFields.image_fields("titleImage")}
+                #{SharedFields.color_theme(:bkColor)}
+                iBelongFlag
               }
             GRAPHQL
           end

previews/components/cms/page_title_component_preview.rb

@@ -24,4 +24,21 @@ def with_video
       title_video_url: "https://www.youtube.com/watch?v=-fTboqiyjxk&list=PLwcV67XMdDdJT0TkvZo6cTDSR0uJgP3Ku"
     ))
   end
+
+  def with_background_color
+    render(Cms::PageTitleComponent.new(
+      title: "Page title",
+      sub_text: "Welcome to the page",
+      background_color: "orange"
+    ))
+  end
+
+  def with_i_belong_flag
+    render(Cms::PageTitleComponent.new(
+      title: "Page title",
+      sub_text: "Welcome to the page",
+      background_color: "orange",
+      i_belong_flag: true
+    ))
+  end
 end

spec/components/cms/page_title_component_spec.rb

@@ -23,6 +23,14 @@
     it "doesnt render status_message container when non present" do
       expect(page).not_to have_css(".page-title__status-message")
     end
+
+    it "applies the default background color" do
+      expect(page).to have_css(".lime-green-bg")
+    end
+
+    it "doesnt render i belong flag when false" do
+      expect(page).to_not have_css(".i-belong-flag")
+    end
   end
 
   context "With Media" do
@@ -82,4 +90,24 @@
       expect(page).to have_css(".page-title__status-message", text: "You completed")
     end
   end
+
+  context "with background color" do
+    before do
+      render_inline(described_class.new(title: "Page title", background_color: "orange"))
+    end
+
+    it "applies the background class" do
+      expect(page).to have_css(".orange-bg")
+    end
+  end
+
+  context "with i belong flag" do
+    before do
+      render_inline(described_class.new(title: "Page title", i_belong_flag: true))
+    end
+
+    it "renders the i belong image" do
+      expect(page).to have_css(".i-belong-flag")
+    end
+  end
 end

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

@@ -0,0 +1,13 @@
+require "rails_helper"
+
+RSpec.describe Cms::Providers::Strapi::Queries::PageTitle do
+  it_should_behave_like "a strapi graphql embed", {key: "pageTitle",
+    required_fields: %w[
+      title
+      subText
+      titleImage
+      titleVideoUrl
+      bkColor
+      iBelongFlag
+    ]}
+end