-
-
<%= @title %>
+ <% if @title %>
+
+
+
<%= @title %>
+
+ <% if @icon %>
+
+ <%= render Cms::ImageComponent.new(@icon) %>
+
+ <% end %>
- <%= render Cms::ImageComponent.new(@icon) if @icon %>
-
-
+ <% end %>
+
<%= render @body_text.render %>
diff --git a/app/components/cms/resource_card_component/resource_card_component.scss b/app/components/cms/resource_card_component/resource_card_component.scss
index c730f5ac20..aeaaaf35e6 100644
--- a/app/components/cms/resource_card_component/resource_card_component.scss
+++ b/app/components/cms/resource_card_component/resource_card_component.scss
@@ -12,10 +12,18 @@
display: flex;
justify-content: space-between;
margin-bottom: 10px;
+ gap: 10px;
- &-image img {
- max-width: 100%;
- height: auto;
+ &-image {
+ .cms-image {
+ width: 50px;
+
+ img {
+ width: 100%;
+ height: auto;
+ object-fit: contain;
+ }
+ }
}
@include govuk-media-query($until: tablet) {
@@ -28,10 +36,6 @@
object-position: center;
}
}
-
- &-title {
- padding-right: 10px;
- }
}
&__body-text {
diff --git a/previews/components/cms/resource_card_component_preview.rb b/previews/components/cms/resource_card_component_preview.rb
index c6d3021048..93b6067d18 100644
--- a/previews/components/cms/resource_card_component_preview.rb
+++ b/previews/components/cms/resource_card_component_preview.rb
@@ -18,6 +18,40 @@ def default
))
end
+ def with_icons
+ card_section = Cms::Mocks::ResourceCardSection.as_model(
+ resource_cards: Array.new(3) {
+ Cms::Mocks::ResourceCard.generate_data(
+ color_theme: {data: Cms::Mocks::ColorScheme.generate_data(name: "standard")},
+ icon: {data: Cms::Mocks::Image.generate_raw_data}
+ )
+ }
+ )
+ render(Cms::CardWrapperComponent.new(
+ title: card_section.title,
+ cards_block: card_section.cards_block,
+ background_color: nil,
+ cards_per_row: 3
+ ))
+ end
+
+ def no_title
+ card_section = Cms::Mocks::ResourceCardSection.as_model(
+ resource_cards: Array.new(3) {
+ Cms::Mocks::ResourceCard.generate_data(
+ color_theme: {data: Cms::Mocks::ColorScheme.generate_data(name: "standard")},
+ title: nil
+ )
+ }
+ )
+ render(Cms::CardWrapperComponent.new(
+ title: card_section.title,
+ cards_block: card_section.cards_block,
+ background_color: nil,
+ cards_per_row: 3
+ ))
+ end
+
def with_color_theme
card_section = Cms::Mocks::ResourceCardSection.as_model(
resource_cards: Array.new(3) {
diff --git a/spec/components/cms/image_component_spec.rb b/spec/components/cms/image_component_spec.rb
index 695c17b78e..7704f95bf9 100644
--- a/spec/components/cms/image_component_spec.rb
+++ b/spec/components/cms/image_component_spec.rb
@@ -17,6 +17,10 @@
expect(page).to have_css("img")
end
+ it "should set default class" do
+ expect(page).to have_css(".cms-image")
+ end
+
it "should have link" do
expect(page).to have_link(href: "https://www.google.com")
end
@@ -68,4 +72,32 @@
expect(page).not_to have_text(caption)
end
end
+
+ context "with additional classes" do
+ context "as string" do
+ before do
+ render_inline(described_class.new(
+ Cms::Mocks::Image.as_model(caption:),
+ classes: "another-class"
+ ))
+ end
+
+ it "should add both classes" do
+ expect(page).to have_css(".cms-image.another-class")
+ end
+ end
+
+ context "as array" do
+ before do
+ render_inline(described_class.new(
+ Cms::Mocks::Image.as_model(caption:),
+ classes: ["another-class", "second-class"]
+ ))
+ end
+
+ it "should add both of them" do
+ expect(page).to have_css(".cms-image.another-class.second-class")
+ end
+ end
+ end
end
diff --git a/spec/components/cms/resource_card_component_spec.rb b/spec/components/cms/resource_card_component_spec.rb
index 4fd68d9be5..cf2e80030d 100644
--- a/spec/components/cms/resource_card_component_spec.rb
+++ b/spec/components/cms/resource_card_component_spec.rb
@@ -41,7 +41,7 @@
context "has only the required values" do
before do
render_inline(described_class.new(
- title: "Card title",
+ title: nil,
icon: nil,
color_theme: nil,
body_text: body_text,
@@ -50,6 +50,10 @@
))
end
+ it "does not render header section" do
+ expect(page).to_not have_css(".cms-resource-card__top-content")
+ end
+
it "does not render an icon" do
expect(page).to_not have_css("img")
end