Course Cards Component

app/components/cms/card_wrapper_component.rb

@@ -1,9 +1,9 @@
 # frozen_string_literal: true
 
 class Cms::CardWrapperComponent < ViewComponent::Base
-  def initialize(cards_block:, cards_per_row:, title: nil, sub_text: nil, background_color: nil, title_as_paragraph: false)
+  def initialize(cards_block:, cards_per_row:, title: nil, intro_text: nil, background_color: nil, title_as_paragraph: false)
     @title = title
-    @sub_text = sub_text
+    @intro_text = intro_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,8 +1,10 @@
 <%= 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>
+    <% if @intro_text %>
+      <div class="govuk-!-margin-bottom-3">
+        <%= render @intro_text.render %>
+      </div>
     <% end %>
     <div class="cms-card-wrapper__grid" style="<%= cards_per_row %>">
       <% @cards_block.each do |card| %>

app/components/cms/course_card_component.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+class Cms::CourseCardComponent < ViewComponent::Base
+  delegate :course_type_short, :course_meta_icon_class,
+    :course_duration_text,
+    to: :helpers
+
+  def initialize(title:, banner_text:, course:, description:, image:)
+    @title = title
+    @banner_text = banner_text
+    @course = course
+    @description = description
+    @image = image
+  end
+
+  def render?
+    @course.present?
+  end
+end

app/components/cms/course_card_component/course_card_component.html.erb

@@ -0,0 +1,30 @@
+<div class="courses-cms-card">
+
+  <div class="courses-cms-card__image-wrapper">
+    <%= render Cms::ImageComponent.new(@image, show_caption: false, classes: "courses-cms-card__image") %>
+    <% if @banner_text %>
+      <span class="govuk-body-s courses-cms-card__banner">
+        <%= @banner_text.upcase %>
+      </span>
+    <% end %>
+  </div>
+
+  <%= link_to @title, course_path(id: @course.activity_code, name: @course.title.parameterize), class: 'govuk-!-font-weight-bold govuk-body ncce-link' %>
+  <div class="courses-cms-card__details">
+    <p class="govuk-body">
+      <%= render @description.render %>
+    </p>
+    <div class="courses-cms-card__icons">
+      <div>
+        <span class="govuk-body-s <%= course_meta_icon_class(@course) %> courses-cms-card__type">
+          <%= course_type_short(@course) %>
+        </span>
+      </div>
+      <div>
+        <%= content_tag :span, class: ['govuk-body-s', 'icon-clock', 'courses-cms-card__time', { 'govuk-!-margin-left-0': "".blank? }] do %>
+          <%= course_duration_text(@course) %>
+        <% end %>
+      </div>
+    </div>
+  </div>
+</div>

app/components/cms/course_card_component/course_card_component.scss

@@ -0,0 +1,70 @@
+
+.courses-cms-card {
+
+  &__image-wrapper {
+    margin-bottom: 12px;
+    max-height: 175px;
+    overflow: hidden;
+    position: relative;
+
+    @include govuk-media-query($from: tablet) {
+      margin-bottom: 8px;
+      max-height: unset;
+    }
+  }
+
+  &__banner {
+    background: $purple-dark;
+    color: $white;
+    font-weight: bold;
+    font-size: 14px;
+    left: 0;
+    padding: 2px 8px;
+    position: absolute;
+    top: 0;
+  }
+
+  &__image {
+    img {
+      width: 100%;
+      height: 190px;
+      object-fit: cover;
+    }
+  }
+
+  &__details {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+
+  &__icons {
+    height: 22px;
+    padding: 10px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
+  &__type {
+    display: inline-block;
+    margin-bottom: 0;
+    background-size: 16px 16px;
+
+    @include govuk-media-query($from: tablet) {
+      background-size: 20px 20px;
+    }
+  }
+
+  &__time {
+    display: inline-block;
+    margin-bottom: 0;
+    background-size: 16px 16px;
+
+    @include govuk-media-query($from: tablet) {
+      background-size: 20px 20px;
+    }
+  }
+}
+
+

app/components/cms/horizontal_card_component.rb

@@ -3,7 +3,7 @@
 class Cms::HorizontalCardComponent < ViewComponent::Base
   delegate :cms_color_theme_class, to: :helpers
 
-  def initialize(title:, body_blocks:, image: nil, image_link: nil, color_theme: nil, icon_block: nil, spacing: nil, external_title: nil)
+  def initialize(title:, body_blocks:, image: nil, image_link: nil, color_theme: nil, icon_block: nil, spacing: nil, external_title: nil, background_color: nil)
     @title = title
     @body_blocks = body_blocks
     @image = image
@@ -12,6 +12,7 @@ def initialize(title:, body_blocks:, image: nil, image_link: nil, color_theme: n
     @icon_block = icon_block
     @spacing = spacing&.downcase
     @external_title = external_title
+    @background_color = background_color
   end
 
   def padding

app/components/cms/horizontal_card_component/horizontal_card_component.html.erb

@@ -1,4 +1,4 @@
-<%= render GovGridRowComponent.new(additional_classes: "cms-horizontal-card", padding: padding) do |row|  %>
+<%= render GovGridRowComponent.new(additional_classes: "cms-horizontal-card", padding: padding, background_color: @background_color) do |row|  %>
   <%= row.with_column("full") do %>
     <% if @external_title %>
       <h2 class="govuk-heading-m"><%= @external_title %></h2>
@@ -7,7 +7,7 @@
       <div class="horizontal-card-component__content">
         <h1 class="govuk-heading-m"><%= @title %></h1>
         <%= render @body_blocks.render %>
-        <%= render @icon_block.render if @icon_block%>
+        <%= render @icon_block.render if @icon_block&.icons&.any? %>
       </div>
       <% if @image %>
         <div class="horizontal-card-component__image">

app/components/cms/image_component.rb

@@ -3,9 +3,10 @@
 class Cms::ImageComponent < ViewComponent::Base
   delegate :cms_image, to: :helpers
 
-  def initialize(image, show_caption: true, link: nil)
+  def initialize(image, show_caption: true, link: nil, classes: [])
     @image = image
     @show_caption = show_caption
     @link = link
+    @classes = classes
   end
 end

app/components/cms/image_component/image_component.html.erb

@@ -1,4 +1,4 @@
-<div class="cms-image">
+<div class="cms-image <%= @classes %>">
   <%= link_to_if(@link, cms_image(@image), @link) %>
   <% if @show_caption && !@image.caption.blank?%>
     <p class="govuk-body-s govuk-!-margin-bottom-0">

app/components/cms/rich_text_block_component.rb

@@ -86,7 +86,7 @@ def call
       if @blocks[:text] == "---"
         content_tag(:hr)
       elsif @blocks[:code]
-        content_tag(:div, @blocks[:text].html_safe, class: classes)
+        content_tag(:span, @blocks[:text].html_safe, class: classes)
       else
         content_tag(:span, sanitize(@blocks[:text]), class: classes)
       end

app/helpers/courses_helper.rb

@@ -108,6 +108,12 @@ def course_subtitle_text(course)
     "#{type} course"
   end
 
+  def course_type_short(course)
+    return "Online" if course.online_cpd
+    return "Live remote" if course.remote_delivered_cpd
+    "Face to face"
+  end
+
   def course_type(course)
     return "Free online course" if course.online_cpd
 

app/services/cms/dynamic_components/card_wrapper.rb

@@ -1,19 +1,19 @@
 module Cms
   module DynamicComponents
     class CardWrapper
-      attr_accessor :title, :sub_text, :cards_block, :cards_per_row, :background_color, :title_as_paragraph
+      attr_accessor :title, :intro_text, :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:)
+      def initialize(title:, intro_text:, cards_block:, cards_per_row:, background_color:, title_as_paragraph:)
         @title = title
-        @sub_text = sub_text
+        @intro_text = intro_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:, sub_text:, cards_block:, cards_per_row:, background_color:, title_as_paragraph:)
+        Cms::CardWrapperComponent.new(title:, intro_text:, cards_block:, cards_per_row:, background_color:, title_as_paragraph:)
       end
     end
   end

app/services/cms/dynamic_components/course_card.rb

@@ -0,0 +1,23 @@
+module Cms
+  module DynamicComponents
+    class CourseCard
+      attr_accessor :title, :banner_text, :course, :description, :image
+
+      def initialize(title:, banner_text:, course_code:, description:, image:)
+        @title = title
+        @banner_text = banner_text
+        @description = description
+        @image = image
+        @course = begin
+          Achiever::Course::Template.find_by_activity_code(course_code)
+        rescue ActiveRecord::RecordNotFound
+          nil
+        end
+      end
+
+      def render
+        Cms::CourseCardComponent.new(title:, banner_text:, course:, description:, image:)
+      end
+    end
+  end
+end

app/services/cms/dynamic_components/horizontal_card.rb

@@ -1,9 +1,9 @@
 module Cms
   module DynamicComponents
     class HorizontalCard
-      attr_accessor :title, :body_blocks, :image, :image_link, :color_theme, :icon_block, :spacing, :external_title
+      attr_accessor :title, :body_blocks, :image, :image_link, :color_theme, :icon_block, :spacing, :external_title, :background_color
 
-      def initialize(title:, body_blocks:, image:, image_link:, color_theme:, icon_block:, spacing:, external_title:)
+      def initialize(title:, body_blocks:, image:, image_link:, color_theme:, icon_block:, spacing:, external_title:, background_color:)
         @title = title
         @body_blocks = body_blocks
         @image = image
@@ -12,10 +12,11 @@ def initialize(title:, body_blocks:, image:, image_link:, color_theme:, icon_blo
         @icon_block = icon_block
         @spacing = spacing
         @external_title = external_title
+        @background_color = background_color
       end
 
       def render
-        Cms::HorizontalCardComponent.new(title:, body_blocks:, image:, image_link:, color_theme:, icon_block:, spacing:, external_title:)
+        Cms::HorizontalCardComponent.new(title:, body_blocks:, image:, image_link:, color_theme:, icon_block:, spacing:, external_title:, background_color:)
       end
     end
   end

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

@@ -23,6 +23,8 @@ def self.generate_component(component_name, strapi_data)
               to_question_and_answer(strapi_data)
             when "resource-card-section"
               to_card_wrapper(strapi_data, to_resource_card_array(strapi_data[:resourceCards]))
+            when "course-cards-section"
+              to_card_wrapper(strapi_data, to_course_card_array(strapi_data[:cards]))
             when "split-horizontal-card"
               to_split_horizontal_card(strapi_data)
             when "testimonial-row"
@@ -112,12 +114,24 @@ def self.to_resource_card_array(strapi_data)
             end
           end
 
+          def self.to_course_card_array(strapi_data)
+            strapi_data.map do |card_data|
+              DynamicComponents::CourseCard.new(
+                title: card_data[:title],
+                banner_text: card_data[:bannerText],
+                course_code: card_data[:courseCode],
+                description: to_content_block(card_data[:description]),
+                image: to_image(card_data, :image, default_size: :medium)
+              )
+            end
+          end
+
           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],
+              intro_text: to_content_block(strapi_data[:introText].presence || []),
               cards_block: cards_block,
-              cards_per_row: strapi_data[:cardsPerRow],
+              cards_per_row: strapi_data[:cardsPerRow].presence || 3,
               background_color: extract_color_name(strapi_data, :bkColor),
               title_as_paragraph:
             )
@@ -153,7 +167,8 @@ def self.to_horizontal_card(strapi_data)
               color_theme: extract_color_name(strapi_data, :colorTheme),
               icon_block: to_icon_block(strapi_data[:iconBlock]),
               spacing: strapi_data[:spacing],
-              external_title: strapi_data[:externalTitle]
+              external_title: strapi_data[:externalTitle],
+              background_color: extract_color_name(strapi_data, :bkColor)
             )
           end
 

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

@@ -0,0 +1,15 @@
+module Cms
+  module Providers
+    module Strapi
+      module Mocks
+        class CourseCardSection < StrapiMock
+          strapi_component "blocks.course-cards-section"
+
+          attribute(:sectionTitle) { Faker::Lorem.sentence }
+          attribute(:introText) { RichBlocks.generate_data }
+          attribute(:cards) { Array.new(3) { DynamicComponents::CourseCard.generate_data } }
+        end
+      end
+    end
+  end
+end

app/services/cms/providers/strapi/mocks/dynamic_components/course_card.rb

@@ -0,0 +1,19 @@
+module Cms
+  module Providers
+    module Strapi
+      module Mocks
+        module DynamicComponents
+          class CourseCard < StrapiMock
+            strapi_component "content-blocks.course-card"
+
+            attribute(:title) { Faker::Lorem.words(number: 5).join(" ") }
+            attribute(:bannerText) { Faker::Lorem.words(number: 3).join(" ") }
+            attribute(:image) { Image.generate_data }
+            attribute(:description) { RichBlocks.generate_data }
+            attribute(:courseCode) { "CP199" }
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -9,8 +9,8 @@ class Image
             thumbnail: [250, 100]
           }
 
-          def self.as_model
-            Factories::ModelFactory.as_image(generate_data)
+          def self.as_model(caption: nil)
+            Factories::ModelFactory.as_image(generate_data(caption:))
           end
 
           def self.generate_raw_data(caption: nil)

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

@@ -6,7 +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(:introText) { RichBlocks.generate_data }
           attribute(:colorTheme) { nil }
           attribute(:resourceCards) { Array.new(3) { ResourceCard.generate_data } }
         end