From a5addb34d26dd814b0a0bbc51bcc0971bf356655 Mon Sep 17 00:00:00 2001
From: Jen Downs <hello@jendowns.com>
Date: Wed, 13 Nov 2019 11:18:46 -0600
Subject: [PATCH 1/4] fix(resource-card): if no href provided, render as a div

---
 .../src/components/ResourceCard/ResourceCard.js          | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/gatsby-theme-carbon/src/components/ResourceCard/ResourceCard.js b/packages/gatsby-theme-carbon/src/components/ResourceCard/ResourceCard.js
index f0bb3c008..538fc3cb0 100755
--- a/packages/gatsby-theme-carbon/src/components/ResourceCard/ResourceCard.js
+++ b/packages/gatsby-theme-carbon/src/components/ResourceCard/ResourceCard.js
@@ -96,10 +96,9 @@ export default class ResourceCard extends React.Component {
       [`${prefix}--aspect-ratio--4x3`]: aspectRatio === '4:3',
     });
 
-    const carbonTileclassNames = classnames(
-      [`${prefix}--tile`],
-      [`${prefix}--tile--clickable`]
-    );
+    const carbonTileclassNames = classnames([`${prefix}--tile`], {
+      [`${prefix}--tile--clickable`]: href !== undefined,
+    });
 
     const cardContent = (
       <>
@@ -127,7 +126,7 @@ export default class ResourceCard extends React.Component {
     );
 
     let cardContainer;
-    if (disabled === true) {
+    if (disabled === true || href === undefined) {
       cardContainer = <div className={carbonTileclassNames}>{cardContent}</div>;
     } else if (isLink === true) {
       cardContainer = (

From 800d82210bd692c630120b533489bb8497543ddc Mon Sep 17 00:00:00 2001
From: Jen Downs <hello@jendowns.com>
Date: Wed, 13 Nov 2019 11:19:09 -0600
Subject: [PATCH 2/4] fix(feature-card): do not pass href to inner
 resourcecard, update focus styles

---
 .../src/components/FeatureCard/FeatureCard.js            | 1 -
 .../src/components/FeatureCard/feature-card.scss         | 9 +++++++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/gatsby-theme-carbon/src/components/FeatureCard/FeatureCard.js b/packages/gatsby-theme-carbon/src/components/FeatureCard/FeatureCard.js
index 03bc331e3..8f1190f60 100755
--- a/packages/gatsby-theme-carbon/src/components/FeatureCard/FeatureCard.js
+++ b/packages/gatsby-theme-carbon/src/components/FeatureCard/FeatureCard.js
@@ -95,7 +95,6 @@ export default class FeatureCard extends React.Component {
               title={title}
               subTitle={subTitle}
               aspectRatio="2:1"
-              href={href}
               actionIcon={actionIcon}
               color={color}
               disabled={disabled}
diff --git a/packages/gatsby-theme-carbon/src/components/FeatureCard/feature-card.scss b/packages/gatsby-theme-carbon/src/components/FeatureCard/feature-card.scss
index 2c34cbc5e..7053042ae 100644
--- a/packages/gatsby-theme-carbon/src/components/FeatureCard/feature-card.scss
+++ b/packages/gatsby-theme-carbon/src/components/FeatureCard/feature-card.scss
@@ -20,6 +20,7 @@
 .#{$prefix}--feature-card__img {
   position: relative;
 }
+
 .#{$prefix}--feature-card:hover
   .#{$prefix}--feature-card__link
   .#{$prefix}--tile {
@@ -33,6 +34,14 @@
   background: $carbon--gray-80; //$hover-ui for gray 90 theme
 }
 
+.#{$prefix}--feature-card__link:focus {
+  outline: none;
+
+  .gatsby-resp-image-wrapper {
+    @include focus-outline;
+  }
+}
+
 // Display image at square aspect ratio only on mobile
 .#{$prefix}--feature-card__img.#{$prefix}--aspect-ratio--1x1 {
   @include carbon--breakpoint('md') {

From b42c01b6e6f36d63f29ae284dd632a1ab47029ea Mon Sep 17 00:00:00 2001
From: Jen Downs <hello@jendowns.com>
Date: Tue, 19 Nov 2019 13:37:09 -0600
Subject: [PATCH 3/4] fix(feature-card): update focus outline

---
 .../src/components/FeatureCard/feature-card.scss               | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/gatsby-theme-carbon/src/components/FeatureCard/feature-card.scss b/packages/gatsby-theme-carbon/src/components/FeatureCard/feature-card.scss
index 7053042ae..01454edc0 100644
--- a/packages/gatsby-theme-carbon/src/components/FeatureCard/feature-card.scss
+++ b/packages/gatsby-theme-carbon/src/components/FeatureCard/feature-card.scss
@@ -38,7 +38,8 @@
   outline: none;
 
   .gatsby-resp-image-wrapper {
-    @include focus-outline;
+    // No outline offset, because it will not show.
+    outline: 2px solid $focus;
   }
 }
 

From 3844605b09833b08dca606cb4f7b05f468c126b8 Mon Sep 17 00:00:00 2001
From: Vince Picone <Vincent.Patrick.Picone@ibm.com>
Date: Tue, 19 Nov 2019 14:17:28 -0600
Subject: [PATCH 4/4] fix: use different focus style target

---
 .../src/components/FeatureCard/FeatureCard.js                 | 4 +++-
 .../src/components/FeatureCard/feature-card.scss              | 4 ++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/gatsby-theme-carbon/src/components/FeatureCard/FeatureCard.js b/packages/gatsby-theme-carbon/src/components/FeatureCard/FeatureCard.js
index 8f1190f60..ba59786c4 100755
--- a/packages/gatsby-theme-carbon/src/components/FeatureCard/FeatureCard.js
+++ b/packages/gatsby-theme-carbon/src/components/FeatureCard/FeatureCard.js
@@ -76,7 +76,9 @@ export default class FeatureCard extends React.Component {
             <div
               className={`${prefix}--feature-card__img ${prefix}--aspect-ratio--1x1`}
             >
-              <div className={`${prefix}--aspect-ratio--object`}>
+              <div
+                className={`${prefix}--aspect-ratio--object ${prefix}--feature-background`}
+              >
                 {children}
               </div>
             </div>
diff --git a/packages/gatsby-theme-carbon/src/components/FeatureCard/feature-card.scss b/packages/gatsby-theme-carbon/src/components/FeatureCard/feature-card.scss
index 01454edc0..e80421efe 100644
--- a/packages/gatsby-theme-carbon/src/components/FeatureCard/feature-card.scss
+++ b/packages/gatsby-theme-carbon/src/components/FeatureCard/feature-card.scss
@@ -37,9 +37,9 @@
 .#{$prefix}--feature-card__link:focus {
   outline: none;
 
-  .gatsby-resp-image-wrapper {
-    // No outline offset, because it will not show.
+  .#{$prefix}--feature-background > * {
     outline: 2px solid $focus;
+    outline-offset: 2px;
   }
 }