diff --git a/app/components/cms/button_block_component.rb b/app/components/cms/button_block_component.rb new file mode 100644 index 0000000000..8814b852f2 --- /dev/null +++ b/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 diff --git a/app/components/cms/button_block_component/button_block_component.html.erb b/app/components/cms/button_block_component/button_block_component.html.erb new file mode 100644 index 0000000000..03d194c97a --- /dev/null +++ b/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 %> +
+ <% end %> +<% end %> + diff --git a/app/components/cms/button_block_component/button_block_component.scss b/app/components/cms/button_block_component/button_block_component.scss new file mode 100644 index 0000000000..c22d9358d1 --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/app/components/cms/resource_card_component/resource_card_component.scss b/app/components/cms/resource_card_component/resource_card_component.scss index aeaaaf35e6..66e29d6f15 100644 --- a/app/components/cms/resource_card_component/resource_card_component.scss +++ b/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; + } } } + diff --git a/app/services/cms/dynamic_components/blocks/button_block.rb b/app/services/cms/dynamic_components/blocks/button_block.rb new file mode 100644 index 0000000000..56f7555e82 --- /dev/null +++ b/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 diff --git a/app/services/cms/providers/strapi/factories/blocks_factory.rb b/app/services/cms/providers/strapi/factories/blocks_factory.rb index 8ed7fbe410..5214a3dc2a 100644 --- a/app/services/cms/providers/strapi/factories/blocks_factory.rb +++ b/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]), diff --git a/app/services/cms/providers/strapi/mocks/dynamic_components/blocks/button_block.rb b/app/services/cms/providers/strapi/mocks/dynamic_components/blocks/button_block.rb new file mode 100644 index 0000000000..f89571f575 --- /dev/null +++ b/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 diff --git a/app/services/cms/providers/strapi/queries/components/blocks/button_block.rb b/app/services/cms/providers/strapi/queries/components/blocks/button_block.rb new file mode 100644 index 0000000000..ed2d3853e1 --- /dev/null +++ b/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 diff --git a/app/services/cms/providers/strapi/queries/dynamic_zone.rb b/app/services/cms/providers/strapi/queries/dynamic_zone.rb index e87bad2839..184a0338b0 100644 --- a/app/services/cms/providers/strapi/queries/dynamic_zone.rb +++ b/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, diff --git a/previews/components/cms/button_block_component_preview.rb b/previews/components/cms/button_block_component_preview.rb new file mode 100644 index 0000000000..20a89493df --- /dev/null +++ b/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 diff --git a/spec/components/cms/button_block_component_spec.rb b/spec/components/cms/button_block_component_spec.rb new file mode 100644 index 0000000000..d54a0364a0 --- /dev/null +++ b/spec/components/cms/button_block_component_spec.rb @@ -0,0 +1,93 @@ +# frozen_string_literal: true + +require "rails_helper" + +RSpec.describe Cms::ButtonBlockComponent, type: :component do + context "left alignment and no padding and not full width" do + before do + render_inline(described_class.new( + buttons: Array.new(2) { Cms::Mocks::NcceButton.as_model }, + background_color: "purple", + padding: false, + alignment: "left", + full_width: false + )) + end + + it "should render buttons" do + expect(page).to have_css(".govuk-button", count: 2) + end + + it "should set background color" do + expect(page).to have_css(".purple-bg") + end + + it "should be two-thirds column" do + expect(page).to have_css(".govuk-grid-column-two-thirds") + end + + it "should set alignment class" do + expect(page).to have_css(".cms-button-block--left") + end + + it "should set padding class" do + expect(page).to have_css("div[class*='govuk-!-padding-0']") + end + end + + context "right alignment and no padding and full width" do + before do + render_inline(described_class.new( + buttons: Array.new(2) { Cms::Mocks::NcceButton.as_model }, + background_color: "purple", + padding: false, + alignment: "right", + full_width: true + )) + end + + it "should render buttons" do + expect(page).to have_css(".govuk-button", count: 2) + end + + it "should set background color" do + expect(page).to have_css(".purple-bg") + end + + it "should be two-thirds column" do + expect(page).to have_css(".govuk-grid-column-full") + end + + it "should set alignment class" do + expect(page).to have_css(".cms-button-block--right") + end + end + + context "right alignment and padding and full width" do + before do + render_inline(described_class.new( + buttons: Array.new(2) { Cms::Mocks::NcceButton.as_model }, + background_color: "purple", + padding: true, + alignment: "center", + full_width: true + )) + end + + it "should render buttons" do + expect(page).to have_css(".govuk-button", count: 2) + end + + it "should set background color" do + expect(page).to have_css(".purple-bg") + end + + it "should be two-thirds column" do + expect(page).to have_css(".govuk-grid-column-full") + end + + it "should set alignment class" do + expect(page).to have_css(".cms-button-block--center") + end + end +end diff --git a/spec/services/cms/dynamic_components/blocks/button_block_spec.rb b/spec/services/cms/dynamic_components/blocks/button_block_spec.rb new file mode 100644 index 0000000000..9164e2dcbc --- /dev/null +++ b/spec/services/cms/dynamic_components/blocks/button_block_spec.rb @@ -0,0 +1,13 @@ +require "rails_helper" + +RSpec.describe Cms::DynamicComponents::Blocks::ButtonBlock do + before do + @comp = Cms::Providers::Strapi::Factories::ComponentFactory.process_component( + Cms::Mocks::DynamicComponents::Blocks::ButtonBlock.generate_raw_data + ) + end + + it "should render as Cms::ButtonBlockComponent" do + expect(@comp.render).to be_a(Cms::ButtonBlockComponent) + end +end diff --git a/spec/services/cms/providers/strapi/queries/components/blocks/button_block_spec.rb b/spec/services/cms/providers/strapi/queries/components/blocks/button_block_spec.rb new file mode 100644 index 0000000000..3d32b703b2 --- /dev/null +++ b/spec/services/cms/providers/strapi/queries/components/blocks/button_block_spec.rb @@ -0,0 +1,12 @@ +require "rails_helper" + +RSpec.describe Cms::Providers::Strapi::Queries::Components::Blocks::ButtonBlock do + it_should_behave_like "a strapi graphql component", + %w[ + buttons + bkColor + padding + alignment + fullWidth + ] +end