From 57d502fa5387cd8f57689220fb5a490cb04cd192 Mon Sep 17 00:00:00 2001 From: Michael Squance Date: Tue, 25 Mar 2025 11:22:53 +0000 Subject: [PATCH 1/4] Making new curriculum key stages component --- .../cms/curriculum_key_stages_component.rb | 29 ++++++++ .../curriculum_key_stages_component.html.erb | 24 +++++++ .../curriculum_key_stages_component.scss | 57 ++++++++++++++++ .../blocks/curriculum_key_stages.rb | 18 +++++ .../strapi/factories/blocks_factory.rb | 9 +++ .../blocks/curriculum_key_stages.rb | 18 +++++ .../blocks/curriculum_key_stages.rb | 22 +++++++ .../providers/strapi/queries/dynamic_zone.rb | 1 + .../stylesheets/components/cms/_shared.scss | 4 +- .../curriculum_key_stage_component_preview.rb | 7 ++ .../curriculum_key_stage_component_spec.rb | 66 +++++++++++++++++++ .../blocks/curriculum_key_stages_spec.rb | 18 +++++ .../blocks/curriculum_key_stages_spec.rb | 9 +++ spec/support/curriculum/curriculum_stubs.rb | 2 +- 14 files changed, 282 insertions(+), 2 deletions(-) create mode 100644 app/components/cms/curriculum_key_stages_component.rb create mode 100644 app/components/cms/curriculum_key_stages_component/curriculum_key_stages_component.html.erb create mode 100644 app/components/cms/curriculum_key_stages_component/curriculum_key_stages_component.scss create mode 100644 app/services/cms/dynamic_components/blocks/curriculum_key_stages.rb create mode 100644 app/services/cms/providers/strapi/mocks/dynamic_components/blocks/curriculum_key_stages.rb create mode 100644 app/services/cms/providers/strapi/queries/components/blocks/curriculum_key_stages.rb create mode 100644 previews/components/cms/curriculum_key_stage_component_preview.rb create mode 100644 spec/components/cms/curriculum_key_stage_component_spec.rb create mode 100644 spec/services/cms/dynamic_components/blocks/curriculum_key_stages_spec.rb create mode 100644 spec/services/cms/providers/strapi/queries/components/blocks/curriculum_key_stages_spec.rb diff --git a/app/components/cms/curriculum_key_stages_component.rb b/app/components/cms/curriculum_key_stages_component.rb new file mode 100644 index 0000000000..44e8427108 --- /dev/null +++ b/app/components/cms/curriculum_key_stages_component.rb @@ -0,0 +1,29 @@ +# frozen_string_literal: true + +class Cms::CurriculumKeyStagesComponent < ViewComponent::Base + delegate :cms_color_theme_class, to: :helpers + + def initialize(title:, background_color:) + @title = title + @background_color = background_color + + @key_stages = begin + CurriculumClient::Queries::KeyStage.all.key_stages + rescue + [] + end + end + + def box_classes(key_stage) + classes = ["curriculum-card"] + classes << if ["1", "2"].include?(key_stage.level) + cms_color_theme_class("orange", "left") + else + cms_color_theme_class("green", "left") + end + end + + def render? + @key_stages.any? + end +end diff --git a/app/components/cms/curriculum_key_stages_component/curriculum_key_stages_component.html.erb b/app/components/cms/curriculum_key_stages_component/curriculum_key_stages_component.html.erb new file mode 100644 index 0000000000..9ca9279db8 --- /dev/null +++ b/app/components/cms/curriculum_key_stages_component/curriculum_key_stages_component.html.erb @@ -0,0 +1,24 @@ +<%= render GovGridRowComponent.new(background_color: @background_color, additional_classes: "cms-curriculum-key-stages") do |row| %> + <%= row.with_column("full") do %> +

<%= @title %>

+
+ <% @key_stages.each do |key_stage| %> +
+ <%= content_tag :div, class: box_classes(key_stage) do %> +

+ <%= link_to key_stage.title, curriculum_key_stage_units_path(key_stage_slug: key_stage.slug), class: 'govuk-link ncce-link' %> +

+

+ Year <%= key_stage.years %>,  + Age <%= key_stage.ages %> +

+

+ Units: <%= key_stage.unit_count %> + Lessons: <%= key_stage.lesson_count %> +

+ <% end %> +
+ <% end %> +
+ <% end %> +<% end %> diff --git a/app/components/cms/curriculum_key_stages_component/curriculum_key_stages_component.scss b/app/components/cms/curriculum_key_stages_component/curriculum_key_stages_component.scss new file mode 100644 index 0000000000..7308396317 --- /dev/null +++ b/app/components/cms/curriculum_key_stages_component/curriculum_key_stages_component.scss @@ -0,0 +1,57 @@ +.cms-curriculum-key-stages { + + .curriculum-card { + background-color: $concrete; + border-left-style: solid; + border-left-width: 9px; + display: flex; + flex-direction: column; + justify-content: center; + + padding: 20px 10px; + position: relative; + + @include govuk-media-query($from: tablet) { + margin-bottom: 0; + min-height: 5.5rem; + } + + @include govuk-media-query($from: desktop) { + padding: 20px 10px 20px 25px; + min-height: inherit; + } + + &__title { + font-weight: 500; + margin-bottom: 0.5rem; + margin-top: 0; + + @include govuk-media-query($from: desktop) { + margin-bottom: 1rem; + } + } + + &__details { + display: flex; + flex-wrap: wrap; + margin-bottom: 0; + flex-direction: row; + + @include govuk-media-query($from: tablet) { + flex-direction: column; + } + + @include govuk-media-query($from: desktop) { + flex-direction: row; + } + } + + &__counts { + padding-top: 16px; + display: flex; + flex-wrap: wrap; + margin-bottom: 0; + flex-direction: column; + } + } +} \ No newline at end of file diff --git a/app/services/cms/dynamic_components/blocks/curriculum_key_stages.rb b/app/services/cms/dynamic_components/blocks/curriculum_key_stages.rb new file mode 100644 index 0000000000..774329c52d --- /dev/null +++ b/app/services/cms/dynamic_components/blocks/curriculum_key_stages.rb @@ -0,0 +1,18 @@ +module Cms + module DynamicComponents + module Blocks + class CurriculumKeyStages + attr_accessor :title, :background_color + + def initialize(title:, background_color:) + @title = title + @background_color = background_color + end + + def render + Cms::CurriculumKeyStagesComponent.new(title:, background_color:) + 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 ea108d0ba2..44556744a2 100644 --- a/app/services/cms/providers/strapi/factories/blocks_factory.rb +++ b/app/services/cms/providers/strapi/factories/blocks_factory.rb @@ -69,6 +69,8 @@ def self.generate_component(component_name, strapi_data) to_button_block(strapi_data) when "feedback-banner" to_feedback_banner(strapi_data) + when "curriculum-key-stages" + to_curriculum_key_stages(strapi_data) end end @@ -99,6 +101,13 @@ def self.to_text_with_testimonial(strapi_data) ) end + def self.to_curriculum_key_stages(strapi_data) + DynamicComponents::Blocks::CurriculumKeyStages.new( + title: strapi_data[:title], + background_color: extract_color_name(strapi_data, :bkColor) + ) + end + def self.to_full_width_image_banner(strapi_data) DynamicComponents::Blocks::FullWidthImageBanner.new( background_image: to_image(strapi_data, :backgroundImage, default_size: :original), diff --git a/app/services/cms/providers/strapi/mocks/dynamic_components/blocks/curriculum_key_stages.rb b/app/services/cms/providers/strapi/mocks/dynamic_components/blocks/curriculum_key_stages.rb new file mode 100644 index 0000000000..68edc62b07 --- /dev/null +++ b/app/services/cms/providers/strapi/mocks/dynamic_components/blocks/curriculum_key_stages.rb @@ -0,0 +1,18 @@ +module Cms + module Providers + module Strapi + module Mocks + module DynamicComponents + module Blocks + class CurriculumKeyStages < StrapiMock + strapi_component "blocks.curriculum-key-stages" + + attribute(:title) { Faker::Lorem.sentence } + attribute(:bkColor) { nil } + end + end + end + end + end + end +end diff --git a/app/services/cms/providers/strapi/queries/components/blocks/curriculum_key_stages.rb b/app/services/cms/providers/strapi/queries/components/blocks/curriculum_key_stages.rb new file mode 100644 index 0000000000..6186dbcf17 --- /dev/null +++ b/app/services/cms/providers/strapi/queries/components/blocks/curriculum_key_stages.rb @@ -0,0 +1,22 @@ +module Cms + module Providers + module Strapi + module Queries + module Components + module Blocks + class CurriculumKeyStages < BaseComponentQuery + def self.name = "ComponentBlocksCurriculumKeyStages" + + def self.base_fields + <<~GRAPHQL.freeze + cks__title: title + bkColor + 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 95b9c5f423..5938cfa421 100644 --- a/app/services/cms/providers/strapi/queries/dynamic_zone.rb +++ b/app/services/cms/providers/strapi/queries/dynamic_zone.rb @@ -7,6 +7,7 @@ class DynamicZone Components::Blocks::ButtonBlock, Components::Blocks::CommunityActivityList, Components::Blocks::CourseCardsSection, + Components::Blocks::CurriculumKeyStages, Components::Blocks::EnrolmentSplitCourseCard, Components::Blocks::EnrolmentTestimonial, Components::Blocks::FeedbackBanner, diff --git a/app/webpacker/stylesheets/components/cms/_shared.scss b/app/webpacker/stylesheets/components/cms/_shared.scss index 3e9d318553..96d73b6162 100644 --- a/app/webpacker/stylesheets/components/cms/_shared.scss +++ b/app/webpacker/stylesheets/components/cms/_shared.scss @@ -12,7 +12,9 @@ "standard": $lime-green, "i-belong": $orange, "isaac": $brand-yellow, - "cqf": $pink + "cqf": $pink, + "orange": $orange, + "green": $lime-green ); $sides: ("left", "right", "top", "bottom"); diff --git a/previews/components/cms/curriculum_key_stage_component_preview.rb b/previews/components/cms/curriculum_key_stage_component_preview.rb new file mode 100644 index 0000000000..cc4e3085b7 --- /dev/null +++ b/previews/components/cms/curriculum_key_stage_component_preview.rb @@ -0,0 +1,7 @@ +# frozen_string_literal: true + +class Cms::CurriculumKeyStagesComponentPreview < ViewComponent::Preview + def default + render(Cms::CurriculumKeyStagesComponent.new(title: "title", bk_color: "bk_color")) + end +end diff --git a/spec/components/cms/curriculum_key_stage_component_spec.rb b/spec/components/cms/curriculum_key_stage_component_spec.rb new file mode 100644 index 0000000000..bfc7cc10ca --- /dev/null +++ b/spec/components/cms/curriculum_key_stage_component_spec.rb @@ -0,0 +1,66 @@ +# frozen_string_literal: true + +require "rails_helper" + +RSpec.describe Cms::CurriculumKeyStagesComponent, type: :component do + let(:key_stages_json_response) { File.new("spec/support/curriculum/responses/key_stages.json").read } + + before do + client = CurriculumClient::Connection.connect(ENV.fetch("CURRICULUM_TEST_SCHEMA_PATH")) + allow(CurriculumClient::Connection).to receive(:connect).and_return(client) + end + + context "when curriculum is enabled" do + before do + stub_a_valid_request(key_stages_json_response) + render_inline(described_class.new( + title: "Choose resources by key stage", + background_color: nil + )) + end + it "renders the title" do + expect(page).to have_css("h2.govuk-heading-m", text: "Choose resources by key stage") + end + it "renders the key stages" do + expect(page).to have_css(".curriculum-card", count: 4) + end + + it "sets key_stage 1 and 2 cards to orange" do + expect(page).to have_css(".cms-color-theme__border--orange-left", text: "Key Stage 1") + expect(page).to have_css(".cms-color-theme__border--orange-left", text: "Key Stage 2") + end + + it "sets key_stage 3 and 4 cards to green" do + expect(page).to have_css(".cms-color-theme__border--green-left", text: "Key Stage 3") + expect(page).to have_css(".cms-color-theme__border--green-left", text: "Key Stage 4") + end + + end + context "when curriculum returns no keyStages" do + before do + stub_a_valid_request("{\"data\": { \"keyStages\": [] }}") + render_inline(described_class.new( + title: "Choose resources by key stage", + background_color: nil + )) + end + + it "renders the title" do + expect(page).not_to have_css("h2.govuk-heading-m", text: "Choose resources by key stage") + end + end + + context "when curriculum returns an error" do + before do + stub_an_invalid_request + render_inline(described_class.new( + title: "Choose resources by key stage", + background_color: nil + )) + end + + it "renders the title" do + expect(page).not_to have_css("h2.govuk-heading-m", text: "Choose resources by key stage") + end + end +end diff --git a/spec/services/cms/dynamic_components/blocks/curriculum_key_stages_spec.rb b/spec/services/cms/dynamic_components/blocks/curriculum_key_stages_spec.rb new file mode 100644 index 0000000000..5e5ea09508 --- /dev/null +++ b/spec/services/cms/dynamic_components/blocks/curriculum_key_stages_spec.rb @@ -0,0 +1,18 @@ +require "rails_helper" + +RSpec.describe Cms::DynamicComponents::Blocks::CurriculumKeyStages do + let(:key_stages_json_response) { File.new("spec/support/curriculum/responses/key_stages.json").read } + + before do + client = CurriculumClient::Connection.connect(ENV.fetch("CURRICULUM_TEST_SCHEMA_PATH")) + allow(CurriculumClient::Connection).to receive(:connect).and_return(client) + stub_a_valid_request(key_stages_json_response) + @comp = Cms::Providers::Strapi::Factories::ComponentFactory.process_component( + Cms::Mocks::DynamicComponents::Blocks::CurriculumKeyStages.generate_raw_data + ) + end + + it "should render as Cms::CurriculumKeyStagesComponent" do + expect(@comp.render).to be_a(Cms::CurriculumKeyStagesComponent) + end +end diff --git a/spec/services/cms/providers/strapi/queries/components/blocks/curriculum_key_stages_spec.rb b/spec/services/cms/providers/strapi/queries/components/blocks/curriculum_key_stages_spec.rb new file mode 100644 index 0000000000..9c87442ae1 --- /dev/null +++ b/spec/services/cms/providers/strapi/queries/components/blocks/curriculum_key_stages_spec.rb @@ -0,0 +1,9 @@ +require "rails_helper" + +RSpec.describe Cms::Providers::Strapi::Queries::Components::Blocks::CurriculumKeyStages do + it_should_behave_like "a strapi graphql component", + %w[ + title + bkColor + ] +end diff --git a/spec/support/curriculum/curriculum_stubs.rb b/spec/support/curriculum/curriculum_stubs.rb index 6b4b1ec51f..1ab54ebffd 100644 --- a/spec/support/curriculum/curriculum_stubs.rb +++ b/spec/support/curriculum/curriculum_stubs.rb @@ -19,7 +19,7 @@ def stub_a_valid_schema_request def stub_an_invalid_request(status = 404) stub_request(:post, URL) .to_return( - {status:, body: response, headers: {}} + {status:, body: "{}", headers: {}} ) end From 6996d5a9d02eb3dbdb13eaacd639bb7852c8a7ca Mon Sep 17 00:00:00 2001 From: Michael Squance Date: Tue, 25 Mar 2025 11:36:06 +0000 Subject: [PATCH 2/4] standard fixes --- spec/components/cms/curriculum_key_stage_component_spec.rb | 1 - 1 file changed, 1 deletion(-) diff --git a/spec/components/cms/curriculum_key_stage_component_spec.rb b/spec/components/cms/curriculum_key_stage_component_spec.rb index bfc7cc10ca..4af69022a5 100644 --- a/spec/components/cms/curriculum_key_stage_component_spec.rb +++ b/spec/components/cms/curriculum_key_stage_component_spec.rb @@ -34,7 +34,6 @@ expect(page).to have_css(".cms-color-theme__border--green-left", text: "Key Stage 3") expect(page).to have_css(".cms-color-theme__border--green-left", text: "Key Stage 4") end - end context "when curriculum returns no keyStages" do before do From a7e771875cc045191ef2b98216fa24cfa44373f3 Mon Sep 17 00:00:00 2001 From: Michael Squance Date: Wed, 2 Apr 2025 12:11:03 +0000 Subject: [PATCH 3/4] Addressing PR comments --- spec/components/cms/curriculum_key_stage_component_spec.rb | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/spec/components/cms/curriculum_key_stage_component_spec.rb b/spec/components/cms/curriculum_key_stage_component_spec.rb index 4af69022a5..bf9c38207f 100644 --- a/spec/components/cms/curriculum_key_stage_component_spec.rb +++ b/spec/components/cms/curriculum_key_stage_component_spec.rb @@ -35,6 +35,7 @@ expect(page).to have_css(".cms-color-theme__border--green-left", text: "Key Stage 4") end end + context "when curriculum returns no keyStages" do before do stub_a_valid_request("{\"data\": { \"keyStages\": [] }}") @@ -44,7 +45,7 @@ )) end - it "renders the title" do + it "does not render the title" do expect(page).not_to have_css("h2.govuk-heading-m", text: "Choose resources by key stage") end end From 11a1e45dc1c476341e2a75c1ea9f786f6ff1cc5b Mon Sep 17 00:00:00 2001 From: Michael Squance Date: Wed, 2 Apr 2025 12:28:25 +0000 Subject: [PATCH 4/4] Fixing styling on the homepage card link --- .../horizontal_link_card_component.scss | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/app/components/cms/horizontal_link_card_component/horizontal_link_card_component.scss b/app/components/cms/horizontal_link_card_component/horizontal_link_card_component.scss index 8aed012f6c..b28fb7e38e 100644 --- a/app/components/cms/horizontal_link_card_component/horizontal_link_card_component.scss +++ b/app/components/cms/horizontal_link_card_component/horizontal_link_card_component.scss @@ -3,6 +3,13 @@ padding: 20px; border-left-width: 13px; + .ncce-link { + color: $hyper-link-blue; + &:visited { + color: $hyper-link-blue; + } + } + h2 { @extend .govuk-heading-m; }