Merge pull request #1370 from prezly/feature/dev-21920-fix-bea-card-interactivity

[DEV-21920] Fix - boxed card interactivity

Author: fgyimah

src/components/StoryCards/StoryCard.module.scss

@@ -1,11 +1,11 @@
 .container {
     position: relative;
+    text-decoration: none;
 
     @include desktop-up {
         &:hover .image {
             transform: scale(1.05);
         }
-
     }
 }
 
@@ -57,14 +57,22 @@
 }
 
 .content {
+    position: relative;
     padding: $spacing-4 0;
 }
 
+.linkOverlay {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+}
+
 .title {
     margin: 0;
     font-size: 1.625rem;
     line-height: 140%;
     font-weight: $font-weight-semi-bold;
+    color: var(--prezly-text-color);
 
     @include tablet-up {
         @include ensure-max-text-height(3, 140%);
@@ -75,22 +83,13 @@
     }
 }
 
-.titleLink {
-    text-decoration: none;
-    color: var(--prezly-text-color);
-}
-
 .subtitle {
     @include ensure-max-text-height(3, 160%);
 
     margin: $spacing-2 0 0;
     font-size: 1rem;
     line-height: 160%;
     font-weight: $font-weight-regular;
-}
-
-.subtitleLink {
-    text-decoration: none;
     color: var(--prezly-text-color-secondary);
 }
 
@@ -166,6 +165,15 @@
         border: 0;
     }
 
+    &:hover {
+        @include shadow-xs;
+    }
+
+    &.vertical {
+        display: grid;
+        grid-template-rows: auto 1fr;
+    }
+
     &.vertical .imageWrapper {
         border-bottom: 1px solid var(--prezly-border-color);
     }
@@ -181,7 +189,7 @@
     .title {
         @include heading-3;
     }
-    
+
     @include mobile-only {
         .content {
             padding: $spacing-4;
@@ -224,3 +232,8 @@
         }
     }
 }
+
+.categories {
+    position: relative;
+    z-index: 2;
+}

src/components/StoryCards/StoryCard.tsx

@@ -84,10 +84,12 @@ export function StoryCard({
                 />
             </Link>
             <div className={styles.content}>
+                <Link aria-label={titleAsString} className={styles.linkOverlay} href={href} />
                 <div className={styles.meta}>
                     {hasCategories && (
                         <CategoriesList
                             categories={translatedCategories}
+                            className={styles.categories}
                             external={external}
                             isStatic
                             showAllCategories
@@ -100,17 +102,9 @@ export function StoryCard({
                         [styles.expanded]: !showSubtitle || !subtitle,
                     })}
                 >
-                    <Link href={href} className={styles.titleLink}>
-                        {title}
-                    </Link>
+                    {title}
                 </HeadingTag>
-                {showSubtitle && subtitle && (
-                    <p className={styles.subtitle}>
-                        <Link href={href} className={styles.subtitleLink}>
-                            {subtitle}
-                        </Link>
-                    </p>
-                )}
+                {showSubtitle && subtitle && <p className={styles.subtitle}>{subtitle}</p>}
                 {showDate && publishedAt && (
                     <div className={styles.date}>
                         <FormattedDate value={publishedAt} />

src/styles/mixins/_shadows.scss

@@ -1,3 +1,7 @@
+@mixin shadow-xs {
+    box-shadow: $shadow-xs;
+}
+
 @mixin shadow-s {
     box-shadow: $shadow-s;
 }

src/styles/variables/_shadows.scss

@@ -1,3 +1,4 @@
+$shadow-xs: 0px 0px 12px rgba(55, 65, 81, 8%);
 $shadow-s: 0 1px 2px rgb(17 24 39 / 6%), 0 1px 3px rgb(17 24 39 / 10%);
 $shadow-m: 0 2px 4px rgb(17 24 39 / 6%), 0 4px 6px rgb(17 24 39 / 10%);
 $shadow-l: 0 10px 15px rgb(17 24 39 / 10%), 0 4px 6px rgb(17 24 39 / 5%);