fix: arrow and hover fixes for EsNavCtaCard (#1766)

Author: ericdouglaspratt

es-ds-components/app/components/es-nav-cta-card.vue

@@ -5,10 +5,17 @@ interface Props {
     subtitle?: string;
     target?: string;
 }
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
     subtitle: '',
     target: '_self',
 });
+
+const headingPartOne = computed(() => {
+    const arr = props.heading.split(' ');
+    arr.pop();
+    return arr.join(' ');
+});
+const headingPartTwo = computed(() => props.heading.split(' ').pop());
 </script>
 
 <template>
@@ -28,11 +35,14 @@ withDefaults(defineProps<Props>(), {
             </div>
         </div>
         <div>
-            <p class="align-items-center d-flex font-weight-bold mb-0 text-blue-600">
-                {{ heading }}
-                <icon-arrow-right
-                    aria-hidden="true"
-                    class="es-nav-cta-card-arrow flex-shrink-0 ml-25" />
+            <p class="font-weight-bold mb-0 text-blue-600">
+                {{ headingPartOne }}
+                <span class="text-nowrap">
+                    {{ headingPartTwo }}
+                    <icon-arrow-right
+                        aria-hidden="true"
+                        class="es-nav-cta-card-arrow flex-shrink-0 position-relative" />
+                </span>
             </p>
             <p
                 v-if="subtitle"
@@ -50,6 +60,12 @@ withDefaults(defineProps<Props>(), {
 .es-nav-cta-card {
     border-width: 1px;
 
+    /* override EsCard active state */
+    &:active {
+        border-color: variables.$blue-600;
+        box-shadow: 0 0 0 1px variables.$blue-600;
+    }
+
     /* only apply a hover state if the device supports mouse hover */
     @media (hover) {
         &:hover {
@@ -63,12 +79,22 @@ withDefaults(defineProps<Props>(), {
                 }
             }
 
+            /* move the arrow slightly to the right on hover */
             .es-nav-cta-card-arrow {
-                margin-left: 0.75rem !important;
+                transform: translateX(0.25rem);
             }
         }
     }
 
+    &-arrow {
+        /* vertically center the icon relative to the text */
+        top: -2px;
+
+        @media not (prefers-reduced-motion) {
+            transition: variables.$transition-base;
+        }
+    }
+
     &-icon {
         /* you cannot animate radial gradient backgrounds, so apply it to a pseudo element and fade it in on hover */
         &::after {
@@ -103,11 +129,5 @@ withDefaults(defineProps<Props>(), {
             transition: variables.$transition-base;
         }
     }
-
-    &-arrow {
-        @media not (prefers-reduced-motion) {
-            transition: variables.$transition-base;
-        }
-    }
 }
 </style>

es-ds-docs/app/pages/organisms/nav-cta-card.vue

@@ -70,22 +70,22 @@ onMounted(async () => {
                     xxl="5">
                     <es-nav-cta-card
                         class="mb-100"
-                        heading="Get an instant quote"
+                        heading="Plan energy recommendations"
                         href="https://www.energysage.com"
-                        subtitle="Free, personalized solar quotes that’ll save you thousands"
+                        subtitle="See energy recommendations for your home with just an address"
                         target="_blank">
                         <template #icon>
-                            <icon-solar aria-hidden="true" />
+                            <icon-house-line aria-hidden="true" />
                         </template>
                     </es-nav-cta-card>
 
                     <es-nav-cta-card
-                        heading="Plan energy recommendations"
+                        heading="Get solar quotes from trusted installers"
                         href="https://www.energysage.com"
-                        subtitle="See energy recommendations for your home with just an address"
+                        subtitle="Free, personalized solar quotes that’ll save you thousands"
                         target="_blank">
                         <template #icon>
-                            <icon-house-line aria-hidden="true" />
+                            <icon-solar aria-hidden="true" />
                         </template>
                     </es-nav-cta-card>
                 </es-col>

es-ds-styles/scss/_card.scss

@@ -294,9 +294,12 @@
       transition: color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out, transform .2s ease-in-out;
     }
 
-    &:hover {
-      border-color: variables.$card-interactive-hover-border-color;
-      text-decoration: none;
+    /* only apply a hover state if the device supports mouse hover */
+    @media (hover) {
+      &:hover {
+        border-color: variables.$card-interactive-hover-border-color;
+        text-decoration: none;
+      }
     }
 
     &:focus-visible {

es-ds-styles/scss/mixins/_hover.scss

@@ -10,7 +10,10 @@
 // Issue: https://github.com/twbs/bootstrap/issues/25195
 
 @mixin hover() {
-  &:hover { @content; }
+  /* only apply a hover state if the device supports mouse hover */
+  @media (hover) {
+    &:hover { @content; }
+  }
 }
 
 @mixin hover-focus() {