From 92454c4f461dd1785eb513ab660fc296f1872b15 Mon Sep 17 00:00:00 2001
From: Nathan Rogan <rolorogan@gmail.com>
Date: Wed, 17 Feb 2021 12:44:27 +0000
Subject: [PATCH] feat: content card updates (#95)

* components update

* update: brand guidelines link

* added last few components

* update: shields

* update: ds preview image

* update: cdn links with version

* update: banner bg colour to transparent

* update: remove header v2 and cards from patterns

* remove: custom accordion

* update: make table bg transparent

* update: dropdown arrow data:image

* Revert "feat: Ds1.1 - Design System Updates"

* Revert "Revert "feat: Ds1.1 - Design System Updates"" (#74)

* fix: build directory (#80)

* remove: cloudcdn reference

* remove: baseurl reference

* remove: github pages dir

* remove: staging & ghpages build

* update: content cards (#94)

Co-authored-by: Nathan Rogan <nathanroagn@centro.org.uk>

Co-authored-by: Chris <790945+chr1se@users.noreply.github.com>
Co-authored-by: Nathan Rogan <nathanroagn@centro.org.uk>
---
 .../components/content-card/_content-card.njk | 10 ++---
 .../content-card/_content-card.scss           | 44 +++++++++++++++----
 2 files changed, 40 insertions(+), 14 deletions(-)

diff --git a/src/wmcads/components/content-card/_content-card.njk b/src/wmcads/components/content-card/_content-card.njk
index 758fae6e..848bfb33 100755
--- a/src/wmcads/components/content-card/_content-card.njk
+++ b/src/wmcads/components/content-card/_content-card.njk
@@ -7,23 +7,23 @@
 {# HTML content #}
 {% set html = params.html if params.html else "
     <div class=\"wmcads-p-sm\">
-    <h3>Where the adventure starts</h3>
-    <p>Whatever your plans this holiday, get there with our great range of family tickets and discount vouchers.</p>
+    <h2>Lorem ipsum dolor sit amet</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
     </div>
 " %}
 
 {# This macro checks if it's being called inside a {% call %} tag #}
 {# It's an easier way to pass in larger html content  #}
-<{{tag}}{{attributes | safe}} class="wmcads-content-card{{" blue" if params.isCta else "" }}">
+<{{tag}}{{attributes | safe}} class="wmcads-content-card{{"--blue" if params.isCta else "" }}">
     {% if(params.src) %}
-        <img src="https://www.wmca.org.uk/media/3415/wmca-bournville-131.jpg?anchor=center&mode=crop&width=590&height=150&rnd=132122595620000000" alt="content image">
+        <img src="https://www.wmca.org.uk/media/3415/wmca-bournville-131.jpg?anchor=center&mode=crop&width=1180&height=300&rnd=132122595620000000" alt="content image">
     {% endif %}
     {% if(params.isCta) %}
         <div class="wmcads-p-sm">
             <svg>
                 <use xlink:href="#wmcads-general-toolkit" href="#wmcads-general-toolkit"></use>
             </svg>
-            <h3>Where the adventure starts</h3>
+            <h2>Lorem ipsum dolor sit amet</h2>
         </div>
     {% else %}
         {%- if caller -%}
diff --git a/src/wmcads/components/content-card/_content-card.scss b/src/wmcads/components/content-card/_content-card.scss
index b963fb0c..9b8ecca7 100755
--- a/src/wmcads/components/content-card/_content-card.scss
+++ b/src/wmcads/components/content-card/_content-card.scss
@@ -1,3 +1,15 @@
+//accessibility styles
+@mixin accessibility-hover {
+  h2 {
+    text-decoration: underline;
+  }
+
+  &:hover,
+  &:focus {
+    box-shadow: inset 0 0 0 1px get-color(primary);
+  }
+}
+
 .wmcads-content-card {
   display: block;
   min-height: 150px;
@@ -6,15 +18,29 @@
   background-color: $white;
   text-decoration: none;
 
-  svg {
-    width: 60px;
-    height: 60px;
-    fill: $white;
+  @at-root a#{&} {
+    display: block;
+    color: get-color(text);
+    text-decoration: none;
+    @include accessibility-hover;
+  }
+
+  // Modifiers
+  &--blue {
+    display: block;
+    border-bottom: 0;
+    color: $white;
+    background: get-color(cta);
+
+    h2 {
+      color: $white;
+    }
+
+    svg {
+      width: 60px;
+      height: 60px;
+      fill: $white;
+    }
   }
-}
 
-.wmcads-content-card.blue {
-  border-bottom: 0;
-  color: $white;
-  background: get-color(cta);
 }