Merge pull request #2338 from NCCE/2990-strapi-component---horizontal-card-with-aside

Strapi component - Horizontal card with asides

Author: msquance-stem

app/components/cms/horizontal_card_with_asides_component.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+class Cms::HorizontalCardWithAsidesComponent < Cms::WithAsidesComponent
+  delegate :cms_color_theme_class, to: :helpers
+
+  def initialize(text:, aside_sections:, button: nil, background_color: nil, color_theme: nil)
+    super(aside_sections:)
+    @text = text
+    @button = button
+    @background_color = background_color
+    @color_theme = color_theme
+  end
+
+  def wrapper_classes
+    classes = ["horizontal-card-with-asides-component__wrapper white-bg"]
+    classes << cms_color_theme_class(@color_theme, "left") if @color_theme
+    classes
+  end
+end

app/components/cms/horizontal_card_with_asides_component/horizontal_card_with_asides_component.html.erb

@@ -0,0 +1,14 @@
+<%= render GovGridRowComponent.new(background_color: @background_color) do |row| %>
+  <%= row.with_column("two-thirds") do %>
+    <%= content_tag :div, class: wrapper_classes do %>
+      <%= render @text.render %>
+      <% if @button %>
+        <%= render @button.render %>
+      <% end %>
+    <% end %>
+  <% end %>
+
+  <%= row.with_column("one-third") do %>
+    <%= render_parent %>
+  <% end %>
+<% end %>

app/components/cms/horizontal_card_with_asides_component/horizontal_card_with_asides_component.scss

@@ -0,0 +1,6 @@
+.horizontal-card-with-asides-component {
+  &__wrapper {
+    border-width: 10px;
+    padding: 30px;
+  }
+}

app/services/cms/dynamic_components/horizontal_card_with_asides.rb

@@ -0,0 +1,19 @@
+module Cms
+  module DynamicComponents
+    class HorizontalCardWithAsides
+      attr_accessor :text, :button, :aside_sections, :background_color, :color_theme
+
+      def initialize(text:, button:, aside_sections:, background_color:, color_theme:)
+        @text = text
+        @button = button
+        @aside_sections = aside_sections
+        @background_color = background_color
+        @color_theme = color_theme
+      end
+
+      def render
+        Cms::HorizontalCardWithAsidesComponent.new(text:, button:, aside_sections:, background_color:, color_theme:)
+      end
+    end
+  end
+end

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

@@ -53,6 +53,8 @@ def self.generate_component(component_name, strapi_data)
               to_card_wrapper(strapi_data, to_video_card_array(strapi_data[:videoCards]))
             when "full-width-image-banner"
               to_full_width_image_banner(strapi_data)
+            when "horizontal-card-with-asides"
+              to_horizontal_card_with_asides(strapi_data)
             end
           end
 
@@ -76,6 +78,16 @@ def self.to_full_width_image_banner(strapi_data)
             )
           end
 
+          def self.to_horizontal_card_with_asides(strapi_data)
+            DynamicComponents::HorizontalCardWithAsides.new(
+              text: to_content_block(strapi_data[:textContent]),
+              button: to_ncce_button(strapi_data[:button]),
+              aside_sections: extract_aside_sections(strapi_data, param_name: :asides),
+              background_color: extract_color_name(strapi_data, :bkColor),
+              color_theme: extract_color_name(strapi_data, :theme)
+            )
+          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/horizontal_card_with_asides.rb

@@ -0,0 +1,19 @@
+module Cms
+  module Providers
+    module Strapi
+      module Mocks
+        module DynamicComponents
+          class HorizontalCardWithAsides < StrapiMock
+            strapi_component "blocks.horizontal-card-with-asides"
+
+            attribute(:textContent) { RichBlocks.generate_data }
+            attribute(:bkColor) { ColorScheme.generate_data(name: "light_grey") }
+            attribute(:theme) { ColorScheme.generate_data(name: "light_grey") }
+            attribute(:button) { Cms::Mocks::NcceButton.generate_data }
+            attribute(:asides) { Cms::Mocks::AsideSection.generate_aside_list }
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,25 @@
+module Cms
+  module Providers
+    module Strapi
+      module Queries
+        module Components
+          module Blocks
+            class HorizontalCardWithAsides < BaseComponentQuery
+              def self.name = "ComponentBlocksHorizontalCardWithAsides"
+
+              def self.base_fields
+                <<~GRAPHQL.freeze
+                  textContent
+                  #{SharedFields.aside_sections(:asides)}
+                  #{Buttons::NcceButton.embed(:button)}
+                  #{SharedFields.color_theme("theme")}
+                  #{SharedFields.color_theme("bkColor")}
+                GRAPHQL
+              end
+            end
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -12,6 +12,7 @@ class DynamicZone
             Components::Blocks::FullWidthImageBanner,
             Components::Blocks::FullWidthText,
             Components::Blocks::HorizontalCard,
+            Components::Blocks::HorizontalCardWithAsides,
             Components::Blocks::IconRow,
             Components::Blocks::NumberedIconList,
             Components::Blocks::NumericCardsSection,

previews/components/cms/horizontal_card_with_asides_component_preview.rb

@@ -0,0 +1,12 @@
+class Cms::HorizontalCardWithAsidesComponentPreview < ViewComponent::Preview
+  layout "full-width"
+
+  def default
+    render(Cms::HorizontalCardWithAsidesComponent.new(
+      text: Cms::Mocks::RichBlocks.as_model,
+      aside_sections: [],
+      background_color: "light-grey",
+      color_theme: "standard"
+    ))
+  end
+end

spec/components/cms/horizontal_card_with_asides_component_spec.rb

@@ -0,0 +1,88 @@
+# frozen_string_literal: true
+
+require "rails_helper"
+
+RSpec.describe Cms::HorizontalCardWithAsidesComponent, type: :component do
+  context "with aside" do
+    before do
+      stub_strapi_aside_section("test-aside")
+
+      render_inline(described_class.new(
+        text: Cms::Mocks::RichBlocks.as_model,
+        aside_sections: [{slug: "test-aside"}]
+      ))
+    end
+
+    it "renders the aside" do
+      expect(page).to have_css(".aside-component")
+    end
+
+    it "renders the rich text" do
+      expect(page).to have_css(".cms-rich-text-block-component")
+    end
+  end
+
+  context "with multiple asides" do
+    before do
+      stub_strapi_aside_section("test-aside")
+      stub_strapi_aside_section("test-aside2")
+
+      render_inline(described_class.new(
+        text: Cms::Mocks::RichBlocks.as_model,
+        aside_sections: [{slug: "test-aside"}, {slug: "test-aside2"}]
+      ))
+    end
+
+    it "renders multiple asides" do
+      expect(page).to have_css(".aside-component", count: 2)
+    end
+
+    context "with background color" do
+      before do
+        stub_strapi_aside_section("test-aside")
+
+        render_inline(described_class.new(
+          text: Cms::Mocks::RichBlocks.as_model,
+          aside_sections: [{slug: "test-aside"}],
+          background_color: "orange"
+        ))
+      end
+
+      it "renders the background color class" do
+        expect(page).to have_css(".orange-bg")
+      end
+    end
+
+    context "with color theme" do
+      before do
+        stub_strapi_aside_section("test-aside")
+
+        render_inline(described_class.new(
+          text: Cms::Mocks::RichBlocks.as_model,
+          aside_sections: [{slug: "test-aside"}],
+          color_theme: "standard"
+        ))
+      end
+
+      it "renders the cms theme class" do
+        expect(page).to have_css(".cms-color-theme__border--standard-left")
+      end
+    end
+
+    context "with button" do
+      before do
+        stub_strapi_aside_section("test-aside")
+
+        render_inline(described_class.new(
+          text: Cms::Mocks::RichBlocks.as_model,
+          aside_sections: [{slug: "test-aside"}],
+          button: Cms::Mocks::NcceButton.as_model
+        ))
+      end
+
+      it "renders the button" do
+        expect(page).to have_css(".govuk-button")
+      end
+    end
+  end
+end