Icon Row CMS Component

app/components/cms/icon_row_component.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class Cms::IconRowComponent < ViewComponent::Base
+  def initialize(icons:)
+    @icons = icons
+  end
+end

app/components/cms/icon_row_component/icon_row_component.html.erb

@@ -0,0 +1,16 @@
+<%= render GovGridRowComponent.new do |row|  %>
+  <%= row.with_column("full") do %>
+    <div class="cms-icon-row-component">
+      <% @icons.each do |icon| %>
+        <div class="cms-icon-row-component__icon">
+
+          <%= render Cms::ImageComponent.new(icon.image) %>
+          <div class="icon-row-component-icon__content">
+            <p class="govuk-body govuk-!-text-align-centre"><%= icon.text %></p>
+          </div>
+
+        </div>
+      <% end %>
+    </div>
+  <% end %>
+<% end %>

app/components/cms/icon_row_component/icon_row_component.scss

@@ -0,0 +1,18 @@
+
+.cms-icon-row-component {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+
+  &__icon {
+    flex: 0 0 150px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    img {
+      height: 30px;
+      margin-bottom: 1rem;
+    }
+  }
+}

app/services/cms/dynamic_components/icon.rb

@@ -0,0 +1,12 @@
+module Cms
+  module DynamicComponents
+    class Icon
+      attr_accessor :text, :image
+
+      def initialize(text:, image:)
+        @text = text
+        @image = image
+      end
+    end
+  end
+end

app/services/cms/dynamic_components/icon_block.rb

@@ -11,14 +11,5 @@ def render
         Cms::IconBlockComponent.new(icons:)
       end
     end
-
-    class Icon
-      attr_accessor :text, :image
-
-      def initialize(text:, image:)
-        @text = text
-        @image = image
-      end
-    end
   end
 end

app/services/cms/dynamic_components/icon_row.rb

@@ -0,0 +1,15 @@
+module Cms
+  module DynamicComponents
+    class IconRow
+      attr_accessor :icons
+
+      def initialize(icons:)
+        @icons = icons
+      end
+
+      def render
+        Cms::IconRowComponent.new(icons:)
+      end
+    end
+  end
+end

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

@@ -39,9 +39,17 @@ def self.generate_component(component_name, strapi_data)
               to_enrolment_testimonial(strapi_data)
             when "enrolment-split-course-card"
               to_enrolment_split_course_card(strapi_data)
+            when "icon-row"
+              to_icon_row(strapi_data)
             end
           end
 
+          def self.to_icon_row(strapi_data)
+            DynamicComponents::IconRow.new(
+              icons: strapi_data[:icons].map { to_icon(_1) }
+            )
+          end
+
           def self.to_enrolment_split_course_card(strapi_data)
             DynamicComponents::EnrolmentSplitCourseCard.new(
               card_content: to_content_block(strapi_data[:cardContent]),

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

@@ -0,0 +1,20 @@
+module Cms
+  module Providers
+    module Strapi
+      module Mocks
+        class Icon
+          def self.as_model
+            Factories::BlocksFactory.to_icon(generate_data)
+          end
+
+          def self.generate_data
+            {
+              iconText: Faker::Lorem.word,
+              iconImage: {data: Image.generate_raw_data}
+            }
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -11,19 +11,6 @@ def self.generate_data(icon_count: 1)
             Array.new(icon_count) { Icon.generate_data }
           end
         end
-
-        class Icon
-          def self.as_model
-            Factories::BlocksFactory.icon(generate_data)
-          end
-
-          def self.generate_data
-            {
-              iconText: Faker::Lorem.word,
-              iconImage: {data: Image.generate_raw_data}
-            }
-          end
-        end
       end
     end
   end

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

@@ -0,0 +1,21 @@
+module Cms
+  module Providers
+    module Strapi
+      module Queries
+        module Components
+          module Blocks
+            class IconRow < BaseComponentQuery
+              def self.name = "ComponentBlocksIconRow"
+
+              def self.base_fields
+                <<~GRAPHQL.freeze
+                  #{SharedFields.icon_block("icons")}
+                GRAPHQL
+              end
+            end
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -11,6 +11,7 @@ class DynamicZone
             Components::Blocks::FullWidthBanner,
             Components::Blocks::FullWidthText,
             Components::Blocks::HorizontalCard,
+            Components::Blocks::IconRow,
             Components::Blocks::NumberedIconList,
             Components::Blocks::NumericCardsSection,
             Components::Blocks::PictureCardSection,

spec/components/cms/icon_row_component_spec.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+require "rails_helper"
+
+RSpec.describe Cms::IconRowComponent, type: :component do
+  before do
+    render_inline(described_class.new(icons: Array.new(2) { Cms::Mocks::Icon.as_model }))
+  end
+
+  it "should render images" do
+    expect(page).to have_css(".cms-image", count: 2)
+  end
+
+  it "should render multiple icons" do
+    expect(page).to have_css(".cms-icon-row-component__icon", count: 2)
+  end
+end