Change Card Behaviour (#840)

Change behaviour of cards so the heading is dependent on page tier.

Co-authored-by: dfeetenby <[email protected]>

.gitignore

@@ -60,3 +60,7 @@ uml/*.*
 !uml/*.puml
 
 nscacert.pem
+
+# YARD documentation files
+*.yardoc
+

app/assets/stylesheets/card.scss

@@ -1,7 +1,8 @@
 .hf-card {
   &-container {
     background-color: govuk-colour('light-grey');
-    border-bottom: 3px solid govuk-organisation-colour('department-for-education', false);
+    border-bottom: 3px solid
+      govuk-organisation-colour('department-for-education', false);
   }
 
   a {
@@ -11,15 +12,21 @@
       color: $govuk-text-colour;
     }
 
-    .hf-card-details h3 {
+    .hf-card-details h2,
+    h3 {
       color: $light-blue-link;
     }
 
     &:hover .hf-card-container {
-      background-color: govuk-organisation-colour('department-for-education', false);
+      background-color: govuk-organisation-colour(
+        'department-for-education',
+        false
+      );
 
-      .hf-card-details p, h3 {
-          color: govuk-colour('white');
+      .hf-card-details p,
+      .hf-card-details h2,
+      .hf-card-details h3 {
+        color: govuk-colour('white');
       }
     }
   }

app/views/pages/_card.html.slim

@@ -3,9 +3,12 @@
     a href=card.path
       .hf-card-container
         = card_thumbnail(card)
-
         .hf-card-details
-          h3.govuk-heading-m
-            = card.title
+          - if card.tier1?
+            h3.govuk-heading-m
+              = card.title
+          - else
+            h2.govuk-heading-m
+              = card.title
           p.govuk-body
             = card.meta_description || card.hero_description

spec/system/cards_spec.rb

@@ -0,0 +1,31 @@
+RSpec.describe 'Card heading levels based on tier' do
+  describe 'Homepage renders h3 for tier1 card' do
+    before do
+      visit '/homepage'
+    end
+
+    it 'renders h3 for tier1 card' do
+      all('.hf-card-details').each do |card|
+        within card do
+          expect(page).to have_css('h3.govuk-heading-m', text: 'Card Title')
+          expect(page).not_to have_css('h2.govuk-heading-m')
+        end
+      end
+    end
+  end
+
+  describe 'Section page renders h2 for tier2 card' do
+    before do
+      visit '/section-page'
+    end
+
+    it 'renders h2 for tier2 card' do
+      all('.hf-card-details').each do |card|
+        within card do
+          expect(page).to have_css('h2.govuk-heading-m', text: 'Card Title')
+          expect(page).not_to have_css('h3.govuk-heading-m')
+        end
+      end
+    end
+  end
+end