Convert gcse-cs-support page to Strapi

app/components/cms/card_wrapper_component.rb

@@ -1,8 +1,9 @@
 # frozen_string_literal: true
 
 class Cms::CardWrapperComponent < ViewComponent::Base
-  def initialize(cards_block:, cards_per_row:, title: nil, background_color: nil, title_as_paragraph: false)
+  def initialize(cards_block:, cards_per_row:, title: nil, sub_text: nil, background_color: nil, title_as_paragraph: false)
     @title = title
+    @sub_text = sub_text
     @cards_block = cards_block
     @cards_per_row = cards_per_row
     @background_color = background_color

app/components/cms/card_wrapper_component/card_wrapper_component.html.erb

@@ -1,6 +1,9 @@
 <%= render GovGridRowComponent.new(background_color: @background_color) do |row|  %>
   <%= row.with_column("full") do %>
     <%= title_html if @title %>
+    <% if @sub_text %>
+      <p class="govuk-body-m"><%= @sub_text %></p>
+    <% end %>
     <div class="cms-card-wrapper__grid" style="<%= cards_per_row %>">
       <% @cards_block.each do |card| %>
         <div class="cms-card-wrapper__card">

app/components/cms/testimonial_component.rb

@@ -1,10 +1,19 @@
 # frozen_string_literal: true
 
 class Cms::TestimonialComponent < ViewComponent::Base
-  def initialize(name:, job_title:, avatar:, quote:)
+  delegate :dark_background?, to: :helpers
+
+  def initialize(name:, job_title:, avatar:, quote:, background_color: nil)
     @name = name
     @job_title = job_title
     @avatar = avatar
     @quote = quote
+    @background_color = background_color
+  end
+
+  def job_title_classes
+    return "job-title--light" if dark_background?(@background_color)
+
+    "job-title"
   end
 end

app/components/cms/testimonial_component/testimonial_component.html.erb

@@ -10,7 +10,7 @@
       <span class="name">
         <%= @name %>
       </span>
-      <span class="job-title">
+      <span class="<%= job_title_classes %>">
         <%= @job_title %>
       </span>
     </div>

app/components/cms/testimonial_component/testimonial_component.scss

@@ -45,7 +45,12 @@
       .job-title {
         @include govuk-font($size: 16);
         color: $grey-storm;
+
+        &--light {
+          @include govuk-font($size: 16);
+          color: $white;
+        }
       }
     }
   }
-}
+}

app/components/cms/testimonial_row_component/testimonial_row_component.html.erb

@@ -6,7 +6,7 @@
 
     <div class="cms-testimonials-row">
       <% @testimonials.each do |testimonial| %>
-       <%= render testimonial.render %>
+       <%= render testimonial.render(background_color: @background_color) %>
       <% end %>
     </div>
 

app/components/cms/testimonial_row_component/testimonial_row_component.scss

@@ -2,4 +2,8 @@
   display: flex;
   flex-direction: row;
   gap: 30px;
-}
+
+  @include govuk-media-query($until: tablet) {
+    flex-direction: column;
+  }
+}

app/helpers/application_helper.rb

@@ -65,4 +65,8 @@ def govuk_spacing_processing(options, type)
     classes << "govuk-!-#{type}-#{options[:all]}" unless options[:all].nil?
     classes
   end
+
+  def dark_background?(background_color)
+    %w[purple].include?(background_color)
+  end
 end

app/helpers/navigation_helper.rb

@@ -25,7 +25,7 @@ def header_navigation
          {text: "Funding", link: cms_page_path("funding"), label: "Bursaries"},
          {text: "Computing Hubs", link: hubs_path, label: "Computing hubs"},
          {text: "I Belong programme", link: about_i_belong_path, label: "i-belong"},
-         {text: "GCSE Computer Science support", link: non_gcse_path, label: "GCSE support"},
+         {text: "GCSE Computer Science support", link: cms_page_path("gcse-cs-support"), label: "GCSE support"},
          {text: "Computing Clusters", link: cms_page_path("computing-clusters"), label: "Computing clusters"},
          {text: "School Trusts", link: cms_page_path("school-trusts"), label: "School trusts"}
        ]},

app/services/cms/dynamic_components/card_wrapper.rb

@@ -1,18 +1,19 @@
 module Cms
   module DynamicComponents
     class CardWrapper
-      attr_accessor :title, :cards_block, :cards_per_row, :background_color, :title_as_paragraph
+      attr_accessor :title, :sub_text, :cards_block, :cards_per_row, :background_color, :title_as_paragraph
 
-      def initialize(title:, cards_block:, cards_per_row:, background_color:, title_as_paragraph:)
+      def initialize(title:, sub_text:, cards_block:, cards_per_row:, background_color:, title_as_paragraph:)
         @title = title
+        @sub_text = sub_text
         @cards_block = cards_block
         @cards_per_row = cards_per_row
         @background_color = background_color
         @title_as_paragraph = title_as_paragraph
       end
 
       def render
-        Cms::CardWrapperComponent.new(title:, cards_block:, cards_per_row:, background_color:, title_as_paragraph:)
+        Cms::CardWrapperComponent.new(title:, sub_text:, cards_block:, cards_per_row:, background_color:, title_as_paragraph:)
       end
     end
   end

app/services/cms/dynamic_components/testimonial.rb

@@ -10,8 +10,8 @@ def initialize(name:, job_title:, avatar:, quote:)
         @quote = quote
       end
 
-      def render
-        Cms::TestimonialComponent.new(name:, job_title:, avatar:, quote:)
+      def render(background_color: nil)
+        Cms::TestimonialComponent.new(name:, job_title:, avatar:, quote:, background_color:)
       end
     end
   end

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

@@ -115,6 +115,7 @@ def self.to_resource_card_array(strapi_data)
           def self.to_card_wrapper(strapi_data, cards_block, title_as_paragraph: false)
             DynamicComponents::CardWrapper.new(
               title: strapi_data[:sectionTitle],
+              sub_text: strapi_data[:subText],
               cards_block: cards_block,
               cards_per_row: strapi_data[:cardsPerRow],
               background_color: extract_color_name(strapi_data, :bkColor),

app/services/cms/providers/strapi/mocks/resource_card_section.rb

@@ -6,6 +6,7 @@ class ResourceCardSection < StrapiMock
           strapi_component "blocks.resource-card-section"
           attribute(:cardsPerRow) { 3 }
           attribute(:sectionTitle) { Faker::Lorem.sentence }
+          attribute(:subText) { Faker::Lorem.sentence }
           attribute(:colorTheme) { nil }
           attribute(:resourceCards) { Array.new(3) { ResourceCard.generate_data } }
         end

app/views/pages/home/_confidence.html.erb

@@ -37,8 +37,8 @@
     </div>
 
     <div class="ncce-confidence__card">
-      <%= link_to image_pack_tag('media/images/home/card_non_gcse.jpg', loading: 'lazy', alt: 'School students playing with robots'), non_gcse_path, class: 'ncce-confidence__icon', aria_label: 'Link to GCSE Computer Science support' %>
-      <%= link_to t("pages.home.confidence.non_gcse.title"), non_gcse_path, class: "ncce-confidence__link" %>
+      <%= link_to image_pack_tag('media/images/home/card_non_gcse.jpg', loading: 'lazy', alt: 'School students playing with robots'), cms_page_path("gcse-cs-support"), class: 'ncce-confidence__icon', aria_label: 'Link to GCSE Computer Science support' %>
+      <%= link_to t("pages.home.confidence.non_gcse.title"), cms_page_path("gcse-cs-support"), class: "ncce-confidence__link" %>
       <p class="ncce-confidence__description">
         <%= t("pages.home.confidence.non_gcse.description") %>
       </p>

app/views/pages/secondary-senior-leaders.html.erb

@@ -3,7 +3,7 @@
 <% meta_tag :url, request.original_url %>
 
 <%# Hero: Support for primary senior leaders %>
-<%= render 'components/hero', 
+<%= render 'components/hero',
   hero_title: t('.hero.title'),
   subtitle: t('.hero.subtitle'),
   colour: 'lime-green-bg', full_width: true %>
@@ -44,12 +44,12 @@
         <div class="govuk-grid-column-two-thirds senior-leaders">
 
           <%= render partial: 'pages/computing_quality_framework' %>
-         
+
         </div>
         <div class="govuk-grid-column-one-third">
           <%= render AsideComponent.new(
             title: "Not currently offering GCSE Computer Science?",
-            text: "We have additional funding and subject matter expert support available to schools and colleges with an ambition to add GCSE Computer Science as an option to their students. #{link_to 'Find out more', non_gcse_url, class: "govuk-button ncce-button--white senior-aside-button govuk-!-margin-top-3"}".html_safe
+            text: "We have additional funding and subject matter expert support available to schools and colleges with an ambition to add GCSE Computer Science as an option to their students. #{link_to 'Find out more', cms_page_path("gcse-cs-support"), class: "govuk-button ncce-button--white senior-aside-button govuk-!-margin-top-3"}".html_safe
           ) %>
 
           <%= render AsideComponent.new(
@@ -141,7 +141,7 @@
               {
                 class_name: 'bordered-card--secondary-cert',
                 title: t('.resources.cards.enrichment.title'),
-                text: t('.resources.cards.enrichment.text.html', 
+                text: t('.resources.cards.enrichment.text.html',
                   teaching_link: link_to('Teaching secondary computing certificate', secondary_certificate_url)),
                 link: {
                   link_title: t('.resources.cards.enrichment.link.title'),

app/views/pages/secondary-toolkit.html.erb

@@ -67,7 +67,7 @@
         <div class="govuk-grid-column-full">
           <h2 class="govuk-heading-l"><%= t(".supporting.title") %></h2>
           <p class="govuk-body"><%= t(".supporting.para_1") %></p>
-          <%= link_to "Find out more", non_gcse_path, class: "govuk-button button button--inverted" %>
+          <%= link_to "Find out more", cms_page_path("gcse-cs-support"), class: "govuk-button button button--inverted" %>
         </div>
       </div>
     </div>

config/routes.rb

@@ -197,7 +197,6 @@
   get "/tech-careers-videos", to: "pages#page", as: :tech_careers_videos, defaults: {page_slug: "tech-careers-videos"}
   get "/i-belong", to: "pages#i_belong", as: :about_i_belong, defaults: {page_slug: "i-belong"}
   get "/computing-teaching-schools-support", to: redirect("/gcse-cs-support")
-  get "/gcse-cs-support", to: "pages#non_gcse", as: :non_gcse, defaults: {page_slug: "gcse-cs-support"}
   get "/isaac-computer-science", to: "pages#isaac_computer_science", as: :about_isaac_computer_science, defaults: {page_slug: "isaac-computer-science"}
   get "/gender-balance", to: "pages#page", as: :gender_balance, defaults: {page_slug: "gender-balance"}
   get "/get-involved", to: "pages#page", as: :get_involved, defaults: {page_slug: "get-involved"}

spec/components/cms/card_wrapper_component_spec.rb

@@ -9,10 +9,11 @@ def resource_cards(number_of_cards)
     })
   end
 
-  context "with one card and no title" do
+  context "with one card and no title and no sub text" do
     before do
       render_inline(described_class.new(
         title: nil,
+        sub_text: nil,
         cards_per_row: 3,
         cards_block: resource_cards(1).cards_block
       ))
@@ -25,6 +26,10 @@ def resource_cards(number_of_cards)
     it "does not render a title" do
       expect(page).to have_css(".govuk-heading-m", count: 1)
     end
+
+    it "does not render the sub text" do
+      expect(page).to have_css(".govuk-body-m", count: 1)
+    end
   end
 
   context "with three cards" do
@@ -41,10 +46,11 @@ def resource_cards(number_of_cards)
     end
   end
 
-  context "with a title and background color" do
+  context "with a title and sub text and background color" do
     before do
       render_inline(described_class.new(
         title: "Section Title",
+        sub_text: "Sub text",
         cards_per_row: 3,
         cards_block: resource_cards(1).cards_block,
         background_color: "light-grey"
@@ -55,6 +61,10 @@ def resource_cards(number_of_cards)
       expect(page).to have_text("Section Title")
     end
 
+    it "has the sub text" do
+      expect(page).to have_text("Sub text")
+    end
+
     it "has a background color" do
       expect(page).to have_css(".light-grey-bg")
     end

spec/components/cms/testimonial_component_spec.rb

@@ -32,4 +32,20 @@
   it "should render the quote text" do
     expect(page).to have_css(".cms-rich-text-block-component")
   end
+
+  context "with dark background color" do
+    before do
+      render_inline(described_class.new(
+        name:,
+        job_title:,
+        avatar:,
+        quote:,
+        background_color: "purple"
+      ))
+    end
+
+    it "should have the light job title class" do
+      expect(page).to have_css(".job-title--light")
+    end
+  end
 end