Merge pull request #2356 from NCCE/2998-strapi-component---resource-card-title-optional

Make resource card title optional

Author: msquance-stem

app/components/cms/image_component.rb

@@ -7,6 +7,6 @@ def initialize(image, show_caption: true, link: nil, classes: [])
     @image = image
     @show_caption = show_caption
     @link = link
-    @classes = classes
+    @classes = ["cms-image"] + Array.wrap(classes)
   end
 end

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

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

app/components/cms/resource_card_component/resource_card_component.html.erb

@@ -1,12 +1,17 @@
 <%= content_tag :div, class: wrapper_classes do %>
-  <div class="cms-resource-card__top-content">
-    <div class="cms-resource-card__top-content-title">
-      <h2 class="govuk-heading-m"><%= @title %></h1>
+  <% if @title %>
+    <div class="cms-resource-card__top-content">
+      <div class="cms-resource-card__top-content-title">
+        <h2 class="govuk-heading-m"><%= @title %></h1>
+      </div>
+      <% if @icon %>
+        <div class="cms-resource-card__top-content-image">
+          <%= render Cms::ImageComponent.new(@icon) %>
+        </div>
+      <% end %>
     </div>
-    <div class="cms-resource-card__top-content-image">
-      <%= render Cms::ImageComponent.new(@icon) if @icon %>
-    </div>
-  </div>
+  <% end %>
+
   <div class="cms-resource-card__body-text">
     <%= render @body_text.render %>
   </div>

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 {

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) {

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

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