Merge pull request #2007 from alphagov/image-card-heading-size

Image card link size option

CHANGELOG.md

@@ -9,6 +9,7 @@
 
 ## Unreleased
 
+* Image card link size option ([PR #2007](https://github.com/alphagov/govuk_publishing_components/pull/2007))
 * Update success notice component ([PR #1929](https://github.com/alphagov/govuk_publishing_components/pull/1929))
 * Tidy up success alert markup ([PR #2004](https://github.com/alphagov/govuk_publishing_components/pull/2004))
 

app/assets/stylesheets/govuk_publishing_components/components/_image-card.scss

@@ -59,12 +59,10 @@
 }
 
 .gem-c-image-card__title {
-  @include govuk-font(19, $weight: bold);
   margin: 0;
 }
 
 .gem-c-image-card__title-link {
-  @extend %govuk-link;
   text-decoration: none;
 
   &:hover {
@@ -136,7 +134,6 @@
   }
 
   .gem-c-image-card__list-item-link {
-    @extend %govuk-link;
     line-height: 1.35em;
   }
 
@@ -193,7 +190,6 @@
   }
 
   .gem-c-image-card__title {
-    @include govuk-font(24, $weight: bold);
     padding-bottom: govuk-spacing(2);
   }
 

app/views/govuk_publishing_components/components/_image_card.html.erb

@@ -6,6 +6,10 @@
   classes = "gem-c-image-card"
   classes << " gem-c-image-card--large" if card_helper.large
   classes << " gem-c-image-card--no-image" unless defined?(image_src)
+
+  font_size ||= card_helper.large ? 'm' : 's'
+  heading_class = %w[gem-c-image-card__title]
+  heading_class << shared_helper.get_heading_size(font_size, 's')
 %>
 <% if card_helper.href || card_helper.extra_links.any? %>
   <div class="<%= classes %> <%= brand_helper.brand_class %>"
@@ -14,16 +18,15 @@
     <div class="gem-c-image-card__text-wrapper">
       <div class="gem-c-image-card__header-and-context-wrapper">
         <% if card_helper.heading_text %>
-          <%= content_tag(shared_helper.get_heading_level,
-            class: "gem-c-image-card__title") do %>
-              <% if card_helper.href %>
-                <%= link_to card_helper.heading_text, card_helper.href,
-                  class: "gem-c-image-card__title-link #{brand_helper.color_class}",
-                  data: card_helper.href_data_attributes
-                %>
-              <% else %>
-                <%= card_helper.heading_text %>
-              <% end %>
+          <%= content_tag(shared_helper.get_heading_level, class: heading_class) do %>
+            <% if card_helper.href %>
+              <%= link_to card_helper.heading_text, card_helper.href,
+                class: "gem-c-image-card__title-link govuk-link #{brand_helper.color_class}",
+                data: card_helper.href_data_attributes
+              %>
+            <% else %>
+              <%= card_helper.heading_text %>
+            <% end %>
           <% end %>
         <% end %>
         <%= card_helper.context %>
@@ -34,7 +37,7 @@
           <% card_helper.extra_links.each do |link| %>
             <li class="gem-c-image-card__list-item">
               <%= link_to link[:text], link[:href],
-                class: "gem-c-image-card__list-item-link #{brand_helper.color_class}",
+                class: "gem-c-image-card__list-item-link govuk-link #{brand_helper.color_class}",
                 data: link[:data_attributes]
               %>
             </li>

app/views/govuk_publishing_components/components/docs/image_card.yml

@@ -35,6 +35,18 @@ examples:
       image_alt: "some meaningful alt text please"
       heading_text: "I am not a heading"
       heading_level: 0
+  with_different_link_size:
+    description: |
+      Set a different font size for the link. Uses the [GOV.UK Frontend heading sizes](https://design-system.service.gov.uk/styles/typography/#headings) but defaults to 19px for legacy reasons. Valid options are `xl`, `l`, `m` and `s`.
+
+      This option is not tied to the `heading_level` option in order to give flexibility.
+    data:
+      href: "/definitely-not-a-page"
+      image_src: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/62756/s300_courts-of-justice.JPG"
+      image_alt: "some meaningful alt text please"
+      heading_text: "I am a big link"
+      heading_level: 0
+      font_size: 'xl'
   with_more_information:
     data:
       href: "/also-not-a-page"

lib/govuk_publishing_components/presenters/shared_helper.rb

@@ -31,6 +31,16 @@ def get_heading_level
         "span"
       end
 
+      def get_heading_size(option, fallback)
+        govuk_class = "govuk-heading-"
+
+        if %w[xl l m s].include? option
+          "#{govuk_class}#{option}"
+        else
+          "#{govuk_class}#{fallback}"
+        end
+      end
+
       def t_locale(content, options = {})
         # Check if the content string has a translation
         content_translation_available = translation_present?(content)

spec/components/image_card_spec.rb

@@ -31,6 +31,21 @@ def component_name
     assert_select ".gem-c-image-card h2.gem-c-image-card__title", false
   end
 
+  it "shows the default link size correctly" do
+    render_component(href: "#", heading_text: "normal")
+    assert_select ".gem-c-image-card .gem-c-image-card__title.govuk-heading-s", text: "normal"
+  end
+
+  it "shows the default link size correctly with invalid input" do
+    render_component(href: "#", heading_text: "normal", font_size: "notvalid")
+    assert_select ".gem-c-image-card .gem-c-image-card__title.govuk-heading-s", text: "normal"
+  end
+
+  it "can do different link sizes" do
+    render_component(href: "#", heading_text: "bigger", font_size: "xl")
+    assert_select ".gem-c-image-card .gem-c-image-card__title.govuk-heading-xl", text: "bigger"
+  end
+
   it "shows description" do
     render_component(href: "#", description: "description")
     assert_select ".gem-c-image-card .gem-c-image-card__description", text: "description"