Skip to content

Commit aaa9339

Browse files
msquance-stemmsquance-stem
committed
Creating new card type, course card
1 parent 392932f commit aaa9339

File tree

18 files changed

+271
-23
lines changed

18 files changed

+271
-23
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: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
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+
<% render @intro_text.render %>
66
<% end %>
77
<div class="cms-card-wrapper__grid" style="<%= cards_per_row %>">
88
<% @cards_block.each do |card| %>

‎app/components/cms/course_card_component.rb‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
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+
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: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
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+
}
31+
}
32+
33+
&__details {
34+
display: flex;
35+
flex-direction: column;
36+
justify-content: space-between;
37+
}
38+
39+
&__icons {
40+
height: 22px;
41+
padding: 10px;
42+
display: flex;
43+
flex-direction: row;
44+
justify-content: space-between;
45+
}
46+
47+
&__type {
48+
display: inline-block;
49+
margin-bottom: 0;
50+
background-size: 16px 16px;
51+
display: inline-block;
52+
margin-bottom: 0;
53+
@include govuk-media-query($from: tablet) {
54+
background-size: 20px 20px;
55+
}
56+
}
57+
58+
&__time {
59+
display: inline-block;
60+
margin-bottom: 0;
61+
background-size: 16px 16px;
62+
@include govuk-media-query($from: tablet) {
63+
background-size: 20px 20px;
64+
}
65+
}
66+
}
67+
68+

‎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/helpers/courses_helper.rb‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,12 @@ def course_subtitle_text(course)
108108
"#{type} course"
109109
end
110110

111+
def course_type_short(course)
112+
return "Online" if course.online_cpd
113+
return "Live remote" if course.remote_delivered_cpd
114+
"Face to face"
115+
end
116+
111117
def course_type(course)
112118
return "Free online course" if course.online_cpd
113119

‎app/services/cms/dynamic_components/card_wrapper.rb‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
module Cms
22
module DynamicComponents
33
class CardWrapper
4-
attr_accessor :title, :sub_text, :cards_block, :cards_per_row, :background_color, :title_as_paragraph
4+
attr_accessor :title, :intro_text, :cards_block, :cards_per_row, :background_color, :title_as_paragraph
55

6-
def initialize(title:, sub_text:, cards_block:, cards_per_row:, background_color:, title_as_paragraph:)
6+
def initialize(title:, intro_text:, cards_block:, cards_per_row:, background_color:, title_as_paragraph:)
77
@title = title
8-
@sub_text = sub_text
8+
@intro_text = intro_text
99
@cards_block = cards_block
1010
@cards_per_row = cards_per_row
1111
@background_color = background_color
1212
@title_as_paragraph = title_as_paragraph
1313
end
1414

1515
def render
16-
Cms::CardWrapperComponent.new(title:, sub_text:, cards_block:, cards_per_row:, background_color:, title_as_paragraph:)
16+
Cms::CardWrapperComponent.new(title:, intro_text:, cards_block:, cards_per_row:, background_color:, title_as_paragraph:)
1717
end
1818
end
1919
end

‎app/services/cms/dynamic_components/course_card.rb‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
module Cms
2+
module DynamicComponents
3+
class CourseCard
4+
attr_accessor :title, :banner_text, :course, :description, :image
5+
6+
def initialize(title:, banner_text:, course_code:, description:, image:)
7+
@title = title
8+
@banner_text = banner_text
9+
@description = description
10+
@image = image
11+
@course = Achiever::Course::Template.find_by_activity_code(course_code)
12+
end
13+
14+
def render
15+
Cms::CourseCardComponent.new(title:, banner_text:, course:, description:, image:)
16+
end
17+
end
18+
end
19+
end

0 commit comments

Comments
 (0)