Initial work setting up Footer in Strapi with queries, models and created a new view component

Basic styling and layout on the component completed

Author: A-Wheeto

app/components/cms/footer_component.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+class Cms::FooterComponent < ViewComponent::Base
+  def initialize(data:)
+    @data = data
+  end
+
+  def company_logo
+    @data.data_models.first
+  end
+
+  def funding_logo
+    @data.data_models.second
+  end
+
+  def link_blocks
+    @data.data_models.last.link_block
+  end
+end

app/components/cms/footer_component/footer_component.html.erb

@@ -0,0 +1,24 @@
+<%= render GovGridRowComponent.new(additional_classes: "cms-footer-component", padding: {top: 0, bottom: 0}) do |row| %>
+  <%= row.with_column("full") do %>
+    <div class="cms-footer-component-wrapper">
+      <div>
+        <%= render company_logo.render %>
+        <p class="govuk-body-s cms-footer-component--funding-text">Funded by</p>
+        <%= render funding_logo.render %>
+      </div>
+
+      <% link_blocks.each do |block| %>
+        <div class="cms-footer-component__link-block">
+          <% block[:links].each do |link| %>
+            <div>
+              <%= link_to link[:link_text], link[:url], class: "govuk-footer__link ncce-link ncce-link--on-dark" %>
+              <% if link[:icon][:data] %>
+                ICON
+              <% end %>
+            </div>
+          <% end %>
+        </div>
+      <% end %>
+    </div>
+  <% end %>
+<% end %>

app/components/cms/footer_component/footer_component.scss

@@ -0,0 +1,35 @@
+.cms-footer-component {
+  color: $white;
+  height: 100%;
+
+  img {
+    width: 125px;
+
+    @include govuk-media-query($until: desktop) {
+      width: 80px;
+    }
+  }
+
+  &--funding-text {
+    color: $white;
+    font-size: 14px;
+    margin: 10px 0;
+  }
+
+  &-wrapper {
+    display: flex;
+    justify-content: space-between;
+
+    @include govuk-media-query($until: desktop) {
+      flex-wrap: wrap;
+      justify-content: flex-start;
+      gap: 2rem;
+    }
+  }
+
+  &__link-block {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+}

app/controllers/application_controller.rb

@@ -5,6 +5,7 @@ class ApplicationController < ActionController::Base
 
   before_action :authenticate
   before_action :access_cms_header
+  before_action :access_cms_footer
 
   def authenticate
     return unless ENV["BASIC_AUTH_PASSWORD"]
@@ -20,6 +21,12 @@ def access_cms_header
     @cms_header = nil
   end
 
+  def access_cms_footer
+    @cms_footer = Cms::Singles::Footer.get
+  rescue ActiveRecord::RecordNotFound
+    @cms_footer = nil
+  end
+
   def authenticate_user!
     redirect_to(helpers.create_account_url) unless current_user
   end

app/services/cms/models/meta/footer.rb

@@ -0,0 +1,17 @@
+module Cms
+  module Models
+    module Meta
+      class Footer
+        attr_accessor :image
+
+        def initialize(image:)
+          @image = image
+        end
+
+        def render
+          Cms::FooterComponent.new(link_block:)
+        end
+      end
+    end
+  end
+end

app/services/cms/models/meta/footer_link_block.rb

@@ -0,0 +1,23 @@
+module Cms
+  module Models
+    module Meta
+      class FooterLinkBlock
+        attr_accessor :link_block
+
+        def initialize(link_block:)
+          @link_block = link_block
+        end
+
+        def process_blocks
+          @link_block.each do |block|
+            block
+          end
+        end
+
+        def render
+          Cms::FooterComponent.new(link_block:)
+        end
+      end
+    end
+  end
+end

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

@@ -14,7 +14,9 @@ module ModelFactory
             Models::DynamicZones::EnrichmentDynamicZone => :to_dynamic_zone,
             Models::Collections::EnrichmentList => :to_enrichment_list,
             Models::Images::FeaturedImage => :to_featured_image,
+            Models::Images::Image => :to_image,
             Models::Meta::HeaderMenu => :to_menu,
+            Models::Meta::FooterLinkBlock => :to_footer,
             Models::DynamicZones::HomepageDynamicZone => :to_dynamic_zone,
             Models::Meta::PageTitle => :to_page_title,
             Models::Meta::Seo => :to_seo,
@@ -131,6 +133,19 @@ def self.to_featured_image(strapi_data, _all_data, size = :large)
             }
           end
 
+          def self.to_image(strapi_data, _all_data, default_size = :medium)
+            return nil unless strapi_data.dig(:data, :attributes)
+
+            image_data = strapi_data[:data][:attributes]
+            {
+              url: image_data[:url],
+              alt: image_data[:alternativeText],
+              caption: image_data[:caption],
+              formats: image_data[:formats],
+              default_size:
+            }
+          end
+
           def self.to_menu(strapi_data, _all_data)
             {
               menu_items: strapi_data.map do |menu_item|
@@ -142,6 +157,16 @@ def self.to_menu(strapi_data, _all_data)
             }
           end
 
+          def self.to_footer(strapi_data, _all_data)
+            {
+              link_block: strapi_data.map do |link|
+                {
+                  links: link[:link].map { |l| {link_text: l[:linkText], url: l[:url], icon: l[:icon]} }
+                }
+              end
+            }
+          end
+
           def self.to_page_title(strapi_data, _all_data)
             {
               title: strapi_data[:title],

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

@@ -18,6 +18,8 @@ class BaseQuery
             Models::DynamicZones::EnrichmentDynamicZone => EnrichmentDynamicZone,
             Models::DynamicZones::HomepageDynamicZone => HomepageDynamicZone,
             Models::Images::FeaturedImage => FeaturedImage,
+            Models::Images::Image => Image,
+            Models::Meta::FooterLinkBlock => FooterLinkBlock,
             Models::Meta::HeaderMenu => HeaderMenu,
             Models::Meta::PageTitle => PageTitle,
             Models::Meta::Seo => Seo,

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

@@ -0,0 +1,21 @@
+module Cms
+  module Providers
+    module Strapi
+      module Queries
+        class FooterLinkBlock
+          def self.embed(name)
+            <<~GRAPHQL.freeze
+              #{name} {
+                link {
+                  linkText
+                  url
+                  #{SharedFields.image_fields("icon")}
+                }
+              }
+            GRAPHQL
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,15 @@
+module Cms
+  module Providers
+    module Strapi
+      module Queries
+        class Image
+          def self.embed(name)
+            <<~GRAPHQL.freeze
+              #{SharedFields.image_fields(name)}
+            GRAPHQL
+          end
+        end
+      end
+    end
+  end
+end