From 89c6a28656386c9ab39dbc26909a842ca015696c Mon Sep 17 00:00:00 2001
From: Ed Ngai <edmund.ngai@salesforce.com>
Date: Wed, 7 Mar 2018 13:59:42 -0800
Subject: [PATCH] fix(card): update link to take full width of footer (#3116)

---
 ui/components/cards/base/_index.scss |  9 ++++++++
 ui/components/cards/base/example.jsx | 34 +++++++++++++++++++---------
 2 files changed, 32 insertions(+), 11 deletions(-)

diff --git a/ui/components/cards/base/_index.scss b/ui/components/cards/base/_index.scss
index 475f135d94..4065188b6c 100644
--- a/ui/components/cards/base/_index.scss
+++ b/ui/components/cards/base/_index.scss
@@ -88,6 +88,15 @@
   }
 }
 
+/**
+* @summary Actionable element within card footer
+* @selector .slds-card__footer-action
+* @restrict .slds-card__footer a
+*/
+.slds-card__footer-action {
+  display: block;
+}
+
 /**
  * Use class if card consumes any form of a tile
  *
diff --git a/ui/components/cards/base/example.jsx b/ui/components/cards/base/example.jsx
index 3608ce8773..f691498b2f 100644
--- a/ui/components/cards/base/example.jsx
+++ b/ui/components/cards/base/example.jsx
@@ -214,7 +214,7 @@ export let examples = [
           </table>
         </CardBody>
         <CardFooter>
-          <a href="javascript:void(0);">
+          <a className="slds-card__footer-action" href="javascript:void(0);">
             View All <span className="slds-assistive-text">entity type</span>
           </a>
         </CardFooter>
@@ -276,7 +276,7 @@ export let examples = [
           </ul>
         </CardBody>
         <CardFooter>
-          <a href="javascript:void(0);">
+          <a className="slds-card__footer-action" href="javascript:void(0);">
             View All <span className="slds-assistive-text">entity type</span>
           </a>
         </CardFooter>
@@ -303,7 +303,10 @@ export let examples = [
               </p>
             </CardBody>
             <CardFooter>
-              <a href="javascript:void(0);">
+              <a
+                className="slds-card__footer-action"
+                href="javascript:void(0);"
+              >
                 View All{' '}
                 <span className="slds-assistive-text">entity type</span>
               </a>
@@ -320,7 +323,10 @@ export let examples = [
               </p>
             </CardBody>
             <CardFooter>
-              <a href="javascript:void(0);">
+              <a
+                className="slds-card__footer-action"
+                href="javascript:void(0);"
+              >
                 View All{' '}
                 <span className="slds-assistive-text">entity type</span>
               </a>
@@ -337,7 +343,10 @@ export let examples = [
               </p>
             </CardBody>
             <CardFooter>
-              <a href="javascript:void(0);">
+              <a
+                className="slds-card__footer-action"
+                href="javascript:void(0);"
+              >
                 View All{' '}
                 <span className="slds-assistive-text">entity type</span>
               </a>
@@ -354,7 +363,10 @@ export let examples = [
               </p>
             </CardBody>
             <CardFooter>
-              <a href="javascript:void(0);">
+              <a
+                className="slds-card__footer-action"
+                href="javascript:void(0);"
+              >
                 View All{' '}
                 <span className="slds-assistive-text">entity type</span>
               </a>
@@ -362,7 +374,7 @@ export let examples = [
           </Card>
         </CardBody>
         <CardFooter>
-          <a href="javascript:void(0);">
+          <a className="slds-card__footer-action" href="javascript:void(0);">
             View All <span className="slds-assistive-text">entity type</span>
           </a>
         </CardFooter>
@@ -390,7 +402,7 @@ export let examples = [
             </p>
           </CardBody>
           <CardFooter>
-            <a href="javascript:void(0);">
+            <a className="slds-card__footer-action" href="javascript:void(0);">
               View All <span className="slds-assistive-text">entity type</span>
             </a>
           </CardFooter>
@@ -406,7 +418,7 @@ export let examples = [
             </p>
           </CardBody>
           <CardFooter>
-            <a href="javascript:void(0);">
+            <a className="slds-card__footer-action" href="javascript:void(0);">
               View All <span className="slds-assistive-text">entity type</span>
             </a>
           </CardFooter>
@@ -422,7 +434,7 @@ export let examples = [
             </p>
           </CardBody>
           <CardFooter>
-            <a href="javascript:void(0);">
+            <a className="slds-card__footer-action" href="javascript:void(0);">
               View All <span className="slds-assistive-text">entity type</span>
             </a>
           </CardFooter>
@@ -438,7 +450,7 @@ export let examples = [
             </p>
           </CardBody>
           <CardFooter>
-            <a href="javascript:void(0);">
+            <a className="slds-card__footer-action" href="javascript:void(0);">
               View All <span className="slds-assistive-text">entity type</span>
             </a>
           </CardFooter>