From dd3f4d0d1530df861541f3a1974d900dcbc2e066 Mon Sep 17 00:00:00 2001 From: Michael Squance Date: Fri, 14 Mar 2025 13:59:57 +0000 Subject: [PATCH 1/4] Allowing resource card to have optional title. We will not show icon unless we have a title Sorted bad print of [] in image component class --- app/components/cms/image_component.rb | 2 +- .../image_component/image_component.html.erb | 4 +-- .../resource_card_component.html.erb | 19 +++++++---- .../resource_card_component.scss | 18 ++++++---- .../cms/resource_card_component_preview.rb | 34 +++++++++++++++++++ 5 files changed, 60 insertions(+), 17 deletions(-) diff --git a/app/components/cms/image_component.rb b/app/components/cms/image_component.rb index 066d2eabc3..f60f8ffa9f 100644 --- a/app/components/cms/image_component.rb +++ b/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 diff --git a/app/components/cms/image_component/image_component.html.erb b/app/components/cms/image_component/image_component.html.erb index 9ee797b6a6..0c2dd82fd6 100644 --- a/app/components/cms/image_component/image_component.html.erb +++ b/app/components/cms/image_component/image_component.html.erb @@ -1,8 +1,8 @@ -
+<%= content_tag :div, class: @classes do %> <%= link_to_if(@link, cms_image(@image), @link) %> <% if @show_caption && !@image.caption.blank?%>

<%= @image.caption %>

<% end %> -
+<% end %> diff --git a/app/components/cms/resource_card_component/resource_card_component.html.erb b/app/components/cms/resource_card_component/resource_card_component.html.erb index 89e2cbf163..2fb1658d29 100644 --- a/app/components/cms/resource_card_component/resource_card_component.html.erb +++ b/app/components/cms/resource_card_component/resource_card_component.html.erb @@ -1,12 +1,17 @@ <%= content_tag :div, class: wrapper_classes do %> -
-
-

<%= @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) { From e297802e63d5775b3f7c935e56dec6541de608f5 Mon Sep 17 00:00:00 2001 From: Michael Squance Date: Fri, 14 Mar 2025 14:56:18 +0000 Subject: [PATCH 2/4] Adding test cases --- spec/components/cms/image_component_spec.rb | 34 +++++++++++++++++++ .../cms/resource_card_component_spec.rb | 6 +++- 2 files changed, 39 insertions(+), 1 deletion(-) diff --git a/spec/components/cms/image_component_spec.rb b/spec/components/cms/image_component_spec.rb index 695c17b78e..5ba844ffc5 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,34 @@ 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 them" 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 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 From d8a97f1fe0390a72946dacb9ad87bc8819be601c Mon Sep 17 00:00:00 2001 From: Michael Squance Date: Fri, 14 Mar 2025 15:16:08 +0000 Subject: [PATCH 3/4] standardrb fixes --- spec/components/cms/image_component_spec.rb | 2 -- 1 file changed, 2 deletions(-) diff --git a/spec/components/cms/image_component_spec.rb b/spec/components/cms/image_component_spec.rb index 5ba844ffc5..f5661ad097 100644 --- a/spec/components/cms/image_component_spec.rb +++ b/spec/components/cms/image_component_spec.rb @@ -74,7 +74,6 @@ end context "with additional classes" do - context "as string" do before do render_inline(described_class.new( @@ -100,6 +99,5 @@ expect(page).to have_css(".cms-image.another-class.second-class") end end - end end From 1f8c0856b367fd740778acb977649a356fd1e634 Mon Sep 17 00:00:00 2001 From: Michael Squance Date: Tue, 18 Mar 2025 15:53:21 +0000 Subject: [PATCH 4/4] Improving test descriptions --- spec/components/cms/image_component_spec.rb | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/spec/components/cms/image_component_spec.rb b/spec/components/cms/image_component_spec.rb index f5661ad097..7704f95bf9 100644 --- a/spec/components/cms/image_component_spec.rb +++ b/spec/components/cms/image_component_spec.rb @@ -82,7 +82,7 @@ )) end - it "should add them" do + it "should add both classes" do expect(page).to have_css(".cms-image.another-class") end end @@ -95,7 +95,7 @@ )) end - it "should add them" do + it "should add both of them" do expect(page).to have_css(".cms-image.another-class.second-class") end end