Merge pull request #2380 from NCCE/3018-curriculum-embed-component-for-strapi

msquance-stem · web-flow · commit 64f155805e20 · 2025-04-02T13:39:37.000+01:00
New Curriculum Key stages component
diff --git a/app/components/cms/curriculum_key_stages_component.rb 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
@@ -0,0 +1,24 @@
+<%= render GovGridRowComponent.new(background_color: @background_color, additional_classes: "cms-curriculum-key-stages") do |row| %>
+  <%= row.with_column("full") do %>
+    <h2 class="govuk-heading-m"><%= @title %></h2>
+    <div class="govuk-grid-row">
+      <% @key_stages.each do |key_stage| %>
+        <div class="govuk-grid-column-one-quarter">
+          <%= content_tag :div, class: box_classes(key_stage) do %>
+            <h3 class="govuk-heading-m curriculum-card__title">
+              <%= link_to key_stage.title, curriculum_key_stage_units_path(key_stage_slug: key_stage.slug), class: 'govuk-link ncce-link' %>
+            </h3>
+            <p class="govuk-body-s curriculum-card__details">
+              <span class='curriculum-card__year'><strong>Year <%= key_stage.years %></strong>,&nbsp;</span>
+              <span class='curriculum-card__age'>Age <%= key_stage.ages %></span>
+            </p>
+            <p class='govuk-body-s curriculum-card__counts'>
+              <span class='curriculum-card__unit'>Units: <%= key_stage.unit_count %></span>
+              <span class='curriculum-card__lesson'>Lessons: <%= key_stage.lesson_count %></span>
+            </p>
+          <% end %>
+        </div>
+      <% end %>
+    </div>
+  <% 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
@@ -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;
+    }
+  }
+}
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
@@ -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;
   }
diff --git a/app/services/cms/dynamic_components/blocks/curriculum_key_stages.rb 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 "does not render 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
@@ -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
@@ -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
@@ -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
 
