From d1c41f8415932b79ccafb06d90a5d0f521a467c7 Mon Sep 17 00:00:00 2001 From: Michael Squance Date: Fri, 21 Mar 2025 14:50:22 +0000 Subject: [PATCH 1/4] Creating the button block component --- app/components/cms/button_block_component.rb | 26 +++++ .../button_block_component.html.erb | 10 ++ .../button_block_component.scss | 23 +++++ .../dynamic_components/blocks/button_block.rb | 21 ++++ .../strapi/factories/blocks_factory.rb | 12 +++ .../dynamic_components/blocks/button_block.rb | 21 ++++ .../queries/components/blocks/button_block.rb | 25 +++++ .../providers/strapi/queries/dynamic_zone.rb | 1 + .../cms/button_block_component_preview.rb | 53 ++++++++++ .../cms/button_block_component_spec.rb | 96 +++++++++++++++++++ .../blocks/button_block_spec.rb | 13 +++ .../components/blocks/button_block_spec.rb | 12 +++ 12 files changed, 313 insertions(+) create mode 100644 app/components/cms/button_block_component.rb create mode 100644 app/components/cms/button_block_component/button_block_component.html.erb create mode 100644 app/components/cms/button_block_component/button_block_component.scss create mode 100644 app/services/cms/dynamic_components/blocks/button_block.rb create mode 100644 app/services/cms/providers/strapi/mocks/dynamic_components/blocks/button_block.rb create mode 100644 app/services/cms/providers/strapi/queries/components/blocks/button_block.rb create mode 100644 previews/components/cms/button_block_component_preview.rb create mode 100644 spec/components/cms/button_block_component_spec.rb create mode 100644 spec/services/cms/dynamic_components/blocks/button_block_spec.rb create mode 100644 spec/services/cms/providers/strapi/queries/components/blocks/button_block_spec.rb diff --git a/app/components/cms/button_block_component.rb b/app/components/cms/button_block_component.rb new file mode 100644 index 0000000000..f1b3f0e6c5 --- /dev/null +++ b/app/components/cms/button_block_component.rb @@ -0,0 +1,26 @@ +# 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 + 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..ffd3e960e3 --- /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) do %> +
+ <% @buttons.each do |button| %> + <%= render button.render %> + <% end %> +
+ <% 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/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..5a7b66e77d 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..f67d0c0c23 --- /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..d477fd089c --- /dev/null +++ b/spec/components/cms/button_block_component_spec.rb @@ -0,0 +1,96 @@ +# 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 From 69925d183e69c4b71de6f05c568eb79e192d46b8 Mon Sep 17 00:00:00 2001 From: Michael Squance Date: Fri, 21 Mar 2025 14:55:35 +0000 Subject: [PATCH 2/4] standardrb fixes --- app/components/cms/button_block_component.rb | 3 +-- .../cms/providers/strapi/factories/blocks_factory.rb | 2 +- .../components/cms/button_block_component_preview.rb | 10 +++++----- spec/components/cms/button_block_component_spec.rb | 3 --- 4 files changed, 7 insertions(+), 11 deletions(-) diff --git a/app/components/cms/button_block_component.rb b/app/components/cms/button_block_component.rb index f1b3f0e6c5..c331c79609 100644 --- a/app/components/cms/button_block_component.rb +++ b/app/components/cms/button_block_component.rb @@ -19,8 +19,7 @@ def alignment_class end def padding - return { all: 0 } unless @padding + return {all: 0} unless @padding {} 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 5a7b66e77d..5214a3dc2a 100644 --- a/app/services/cms/providers/strapi/factories/blocks_factory.rb +++ b/app/services/cms/providers/strapi/factories/blocks_factory.rb @@ -72,7 +72,7 @@ def self.generate_component(component_name, strapi_data) def self.to_button_block(strapi_data) DynamicComponents::Blocks::ButtonBlock.new( - buttons: strapi_data[:buttons].map{ to_ncce_button(_1) }, + 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], diff --git a/previews/components/cms/button_block_component_preview.rb b/previews/components/cms/button_block_component_preview.rb index f67d0c0c23..20a89493df 100644 --- a/previews/components/cms/button_block_component_preview.rb +++ b/previews/components/cms/button_block_component_preview.rb @@ -8,7 +8,7 @@ def with_padding_not_full_width_left_align padding: true, full_width: false, alignment: "left" - )) + )) end def with_padding_full_width_center @@ -18,7 +18,7 @@ def with_padding_full_width_center padding: true, full_width: true, alignment: "center" - )) + )) end def with_padding_not_full_width_center @@ -28,7 +28,7 @@ def with_padding_not_full_width_center padding: true, full_width: false, alignment: "center" - )) + )) end def with_padding_full_width_right @@ -38,7 +38,7 @@ def with_padding_full_width_right padding: true, full_width: true, alignment: "right" - )) + )) end def with_padding_not_full_width_right @@ -48,6 +48,6 @@ def with_padding_not_full_width_right 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 index d477fd089c..d54a0364a0 100644 --- a/spec/components/cms/button_block_component_spec.rb +++ b/spec/components/cms/button_block_component_spec.rb @@ -3,7 +3,6 @@ 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( @@ -34,7 +33,6 @@ 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 @@ -92,5 +90,4 @@ expect(page).to have_css(".cms-button-block--center") end end - end From 610a4afa013337b9d5bf01cd80b47321ead9eac9 Mon Sep 17 00:00:00 2001 From: Michael Squance Date: Mon, 24 Mar 2025 15:18:40 +0000 Subject: [PATCH 3/4] Moved white button css in resource card as it was effecting other components --- .../resource_card_component.scss | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) 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; + } } } + From f32571ad3589a5613b92e15c94849d3918342fb2 Mon Sep 17 00:00:00 2001 From: Michael Squance Date: Tue, 25 Mar 2025 12:05:25 +0000 Subject: [PATCH 4/4] Improving method name --- app/components/cms/button_block_component.rb | 2 +- .../cms/button_block_component/button_block_component.html.erb | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/components/cms/button_block_component.rb b/app/components/cms/button_block_component.rb index c331c79609..8814b852f2 100644 --- a/app/components/cms/button_block_component.rb +++ b/app/components/cms/button_block_component.rb @@ -9,7 +9,7 @@ def initialize(buttons:, background_color:, padding:, alignment:, full_width:) @full_width = full_width end - def column + def column_size return "full" if @full_width "two-thirds" 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 index ffd3e960e3..03d194c97a 100644 --- a/app/components/cms/button_block_component/button_block_component.html.erb +++ b/app/components/cms/button_block_component/button_block_component.html.erb @@ -1,5 +1,5 @@ <%= render GovGridRowComponent.new(background_color: @background_color, padding:) do |row| %> - <%= row.with_column(column) do %> + <%= row.with_column(column_size) do %>
<% @buttons.each do |button| %> <%= render button.render %>