Skip to content

Commit 5d605b4

Browse files
msquance-stemmsquance-stem
authored
Merge pull request #2302 from NCCE/2958-course-card
Course Cards Component
2 parents 962dbe1 + 59d3ab7 commit 5d605b4

File tree

58 files changed

+507
-45
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

58 files changed

+507
-45
lines changed

‎app/components/cms/card_wrapper_component.rb‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
# frozen_string_literal: true
22

33
class Cms::CardWrapperComponent < ViewComponent::Base
4-
def initialize(cards_block:, cards_per_row:, title: nil, sub_text: nil, background_color: nil, title_as_paragraph: false)
4+
def initialize(cards_block:, cards_per_row:, title: nil, intro_text: nil, background_color: nil, title_as_paragraph: false)
55
@title = title
6-
@sub_text = sub_text
6+
@intro_text = intro_text
77
@cards_block = cards_block
88
@cards_per_row = cards_per_row
99
@background_color = background_color

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
<%= render GovGridRowComponent.new(background_color: @background_color) do |row| %>
22
<%= row.with_column("full") do %>
33
<%= title_html if @title %>
4-
<% if @sub_text %>
5-
<p class="govuk-body-m"><%= @sub_text %></p>
4+
<% if @intro_text %>
5+
<div class="govuk-!-margin-bottom-3">
6+
<%= render @intro_text.render %>
7+
</div>
68
<% end %>
79
<div class="cms-card-wrapper__grid" style="<%= cards_per_row %>">
810
<% @cards_block.each do |card| %>

‎app/components/cms/course_card_component.rb‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
# frozen_string_literal: true
2+
3+
class Cms::CourseCardComponent < ViewComponent::Base
4+
delegate :course_type_short, :course_meta_icon_class,
5+
:course_duration_text,
6+
to: :helpers
7+
8+
def initialize(title:, banner_text:, course:, description:, image:)
9+
@title = title
10+
@banner_text = banner_text
11+
@course = course
12+
@description = description
13+
@image = image
14+
end
15+
16+
def render?
17+
@course.present?
18+
end
19+
end

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

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<div class="courses-cms-card">
2+
3+
<div class="courses-cms-card__image-wrapper">
4+
<%= render Cms::ImageComponent.new(@image, show_caption: false, classes: "courses-cms-card__image") %>
5+
<% if @banner_text %>
6+
<span class="govuk-body-s courses-cms-card__banner">
7+
<%= @banner_text.upcase %>
8+
</span>
9+
<% end %>
10+
</div>
11+
12+
<%= link_to @title, course_path(id: @course.activity_code, name: @course.title.parameterize), class: 'govuk-!-font-weight-bold govuk-body ncce-link' %>
13+
<div class="courses-cms-card__details">
14+
<p class="govuk-body">
15+
<%= render @description.render %>
16+
</p>
17+
<div class="courses-cms-card__icons">
18+
<div>
19+
<span class="govuk-body-s <%= course_meta_icon_class(@course) %> courses-cms-card__type">
20+
<%= course_type_short(@course) %>
21+
</span>
22+
</div>
23+
<div>
24+
<%= content_tag :span, class: ['govuk-body-s', 'icon-clock', 'courses-cms-card__time', { 'govuk-!-margin-left-0': "".blank? }] do %>
25+
<%= course_duration_text(@course) %>
26+
<% end %>
27+
</div>
28+
</div>
29+
</div>
30+
</div>

‎app/components/cms/course_card_component/course_card_component.scss‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
2+
.courses-cms-card {
3+
4+
&__image-wrapper {
5+
margin-bottom: 12px;
6+
max-height: 175px;
7+
overflow: hidden;
8+
position: relative;
9+
10+
@include govuk-media-query($from: tablet) {
11+
margin-bottom: 8px;
12+
max-height: unset;
13+
}
14+
}
15+
16+
&__banner {
17+
background: $purple-dark;
18+
color: $white;
19+
font-weight: bold;
20+
font-size: 14px;
21+
left: 0;
22+
padding: 2px 8px;
23+
position: absolute;
24+
top: 0;
25+
}
26+
27+
&__image {
28+
img {
29+
width: 100%;
30+
height: 190px;
31+
object-fit: cover;
32+
}
33+
}
34+
35+
&__details {
36+
display: flex;
37+
flex-direction: column;
38+
justify-content: space-between;
39+
}
40+
41+
&__icons {
42+
height: 22px;
43+
padding: 10px;
44+
display: flex;
45+
flex-direction: row;
46+
justify-content: space-between;
47+
}
48+
49+
&__type {
50+
display: inline-block;
51+
margin-bottom: 0;
52+
background-size: 16px 16px;
53+
54+
@include govuk-media-query($from: tablet) {
55+
background-size: 20px 20px;
56+
}
57+
}
58+
59+
&__time {
60+
display: inline-block;
61+
margin-bottom: 0;
62+
background-size: 16px 16px;
63+
64+
@include govuk-media-query($from: tablet) {
65+
background-size: 20px 20px;
66+
}
67+
}
68+
}
69+
70+

‎app/components/cms/horizontal_card_component.rb‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
class Cms::HorizontalCardComponent < ViewComponent::Base
44
delegate :cms_color_theme_class, to: :helpers
55

6-
def initialize(title:, body_blocks:, image: nil, image_link: nil, color_theme: nil, icon_block: nil, spacing: nil, external_title: nil)
6+
def initialize(title:, body_blocks:, image: nil, image_link: nil, color_theme: nil, icon_block: nil, spacing: nil, external_title: nil, background_color: nil)
77
@title = title
88
@body_blocks = body_blocks
99
@image = image
@@ -12,6 +12,7 @@ def initialize(title:, body_blocks:, image: nil, image_link: nil, color_theme: n
1212
@icon_block = icon_block
1313
@spacing = spacing&.downcase
1414
@external_title = external_title
15+
@background_color = background_color
1516
end
1617

1718
def padding

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<%= render GovGridRowComponent.new(additional_classes: "cms-horizontal-card", padding: padding) do |row| %>
1+
<%= render GovGridRowComponent.new(additional_classes: "cms-horizontal-card", padding: padding, background_color: @background_color) do |row| %>
22
<%= row.with_column("full") do %>
33
<% if @external_title %>
44
<h2 class="govuk-heading-m"><%= @external_title %></h2>
@@ -7,7 +7,7 @@
77
<div class="horizontal-card-component__content">
88
<h1 class="govuk-heading-m"><%= @title %></h1>
99
<%= render @body_blocks.render %>
10-
<%= render @icon_block.render if @icon_block%>
10+
<%= render @icon_block.render if @icon_block&.icons&.any? %>
1111
</div>
1212
<% if @image %>
1313
<div class="horizontal-card-component__image">

‎app/components/cms/image_component.rb‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,10 @@
33
class Cms::ImageComponent < ViewComponent::Base
44
delegate :cms_image, to: :helpers
55

6-
def initialize(image, show_caption: true, link: nil)
6+
def initialize(image, show_caption: true, link: nil, classes: [])
77
@image = image
88
@show_caption = show_caption
99
@link = link
10+
@classes = classes
1011
end
1112
end

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="cms-image">
1+
<div class="cms-image <%= @classes %>">
22
<%= link_to_if(@link, cms_image(@image), @link) %>
33
<% if @show_caption && !@image.caption.blank?%>
44
<p class="govuk-body-s govuk-!-margin-bottom-0">

‎app/components/cms/rich_text_block_component.rb‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ def call
8686
if @blocks[:text] == "---"
8787
content_tag(:hr)
8888
elsif @blocks[:code]
89-
content_tag(:div, @blocks[:text].html_safe, class: classes)
89+
content_tag(:span, @blocks[:text].html_safe, class: classes)
9090
else
9191
content_tag(:span, sanitize(@blocks[:text]), class: classes)
9292
end

0 commit comments

Comments
 (0)