Merge pull request #2371 from NCCE/2985-button-container-in-strapi

Button Container

Author: msquance-stem

app/components/cms/button_block_component.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+class Cms::ButtonBlockComponent < ViewComponent::Base
+  def initialize(buttons:, background_color:, padding:, alignment:, full_width:)
+    @buttons = buttons
+    @background_color = background_color
+    @padding = padding
+    @alignment = alignment
+    @full_width = full_width
+  end
+
+  def column_size
+    return "full" if @full_width
+    "two-thirds"
+  end
+
+  def alignment_class
+    "cms-button-block--#{@alignment}"
+  end
+
+  def padding
+    return {all: 0} unless @padding
+    {}
+  end
+end

app/components/cms/button_block_component/button_block_component.html.erb

@@ -0,0 +1,10 @@
+<%= render GovGridRowComponent.new(background_color: @background_color, padding:) do |row|  %>
+  <%= row.with_column(column_size) do %>
+    <div class="cms-button-block <%= alignment_class %>">
+      <% @buttons.each do |button| %>
+        <%= render button.render %>
+      <% end %>
+    </div>
+  <% end %>
+<% end %>
+

app/components/cms/button_block_component/button_block_component.scss

@@ -0,0 +1,23 @@
+.cms-button-block {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  gap: 15px;
+
+  @include govuk-media-query($until: tablet) {
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  &--right {
+    justify-content: flex-end;
+  }
+
+  &--left {
+    justify-content: flex-start;
+  }
+
+  &--center {
+    justify-content: center;
+  }
+}

app/components/cms/resource_card_component/resource_card_component.scss

@@ -41,13 +41,14 @@
   &__body-text {
     flex-grow: 1;
   }
-}
 
-.ncce-button--white {
-  width: 100%;
-  margin: 24px 0 0;
+  .ncce-button--white {
+    width: 100%;
+    margin: 24px 0 0;
 
-  @include govuk-media-query($until: tablet) {
-    margin-top: 12px;
+    @include govuk-media-query($until: tablet) {
+      margin-top: 12px;
+    }
   }
 }
+

app/services/cms/dynamic_components/blocks/button_block.rb

@@ -0,0 +1,21 @@
+module Cms
+  module DynamicComponents
+    module Blocks
+      class ButtonBlock
+        attr_accessor :buttons, :background_color, :padding, :alignment, :full_width
+
+        def initialize(buttons:, background_color:, padding:, alignment:, full_width:)
+          @buttons = buttons
+          @background_color = background_color
+          @padding = padding
+          @alignment = alignment
+          @full_width = full_width
+        end
+
+        def render
+          Cms::ButtonBlockComponent.new(buttons:, background_color:, padding:, alignment:, full_width:)
+        end
+      end
+    end
+  end
+end

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

@@ -65,9 +65,21 @@ def self.generate_component(component_name, strapi_data)
               to_programme_card_wrapper(strapi_data)
             when "secondary-question-bank"
               DynamicComponents::SecondaryQuestionBank.new(title: strapi_data[:title])
+            when "button-block"
+              to_button_block(strapi_data)
             end
           end
 
+          def self.to_button_block(strapi_data)
+            DynamicComponents::Blocks::ButtonBlock.new(
+              buttons: strapi_data[:buttons].map { to_ncce_button(_1) },
+              background_color: extract_color_name(strapi_data, :bkColor),
+              padding: strapi_data[:padding],
+              alignment: strapi_data[:alignment],
+              full_width: strapi_data[:fullWidth]
+            )
+          end
+
           def self.to_text_with_testimonial(strapi_data)
             DynamicComponents::Blocks::TextWithTestimonial.new(
               text_content: to_content_block(strapi_data[:textContent]),

app/services/cms/providers/strapi/mocks/dynamic_components/blocks/button_block.rb

@@ -0,0 +1,21 @@
+module Cms
+  module Providers
+    module Strapi
+      module Mocks
+        module DynamicComponents
+          module Blocks
+            class ButtonBlock < StrapiMock
+              strapi_component "blocks.button-block"
+
+              attribute(:buttons) { Array.new(3) { NcceButton.generate_data } }
+              attribute(:bkColor) { ColorScheme.generate_data(name: "light_grey") }
+              attribute(:padding) { false }
+              attribute(:alignment) { "left" }
+              attribute(:fullWidth) { false }
+            end
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,25 @@
+module Cms
+  module Providers
+    module Strapi
+      module Queries
+        module Components
+          module Blocks
+            class ButtonBlock < BaseComponentQuery
+              def self.name = "ComponentBlocksButtonBlock"
+
+              def self.base_fields
+                <<~GRAPHQL.freeze
+                  #{Buttons::NcceButton.embed(:buttons)}
+                  #{SharedFields.color_theme(:bkColor)}
+                  padding
+                  alignment
+                  fullWidth
+                GRAPHQL
+              end
+            end
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -4,6 +4,7 @@ module Strapi
       module Queries
         class DynamicZone
           COMPONENTS = [
+            Components::Blocks::ButtonBlock,
             Components::Blocks::CommunityActivityList,
             Components::Blocks::CourseCardsSection,
             Components::Blocks::EnrolmentSplitCourseCard,

previews/components/cms/button_block_component_preview.rb

@@ -0,0 +1,53 @@
+# frozen_string_literal: true
+
+class Cms::ButtonBlockComponentPreview < ViewComponent::Preview
+  def with_padding_not_full_width_left_align
+    render(Cms::ButtonBlockComponent.new(
+      buttons: Array.new(2) { Cms::Mocks::NcceButton.as_model },
+      background_color: nil,
+      padding: true,
+      full_width: false,
+      alignment: "left"
+    ))
+  end
+
+  def with_padding_full_width_center
+    render(Cms::ButtonBlockComponent.new(
+      buttons: Array.new(2) { Cms::Mocks::NcceButton.as_model },
+      background_color: nil,
+      padding: true,
+      full_width: true,
+      alignment: "center"
+    ))
+  end
+
+  def with_padding_not_full_width_center
+    render(Cms::ButtonBlockComponent.new(
+      buttons: Array.new(2) { Cms::Mocks::NcceButton.as_model },
+      background_color: nil,
+      padding: true,
+      full_width: false,
+      alignment: "center"
+    ))
+  end
+
+  def with_padding_full_width_right
+    render(Cms::ButtonBlockComponent.new(
+      buttons: Array.new(2) { Cms::Mocks::NcceButton.as_model },
+      background_color: nil,
+      padding: true,
+      full_width: true,
+      alignment: "right"
+    ))
+  end
+
+  def with_padding_not_full_width_right
+    render(Cms::ButtonBlockComponent.new(
+      buttons: Array.new(2) { Cms::Mocks::NcceButton.as_model },
+      background_color: nil,
+      padding: true,
+      full_width: false,
+      alignment: "right"
+    ))
+  end
+end