fix: card link hover and let right position switch

City-of-Helsinki · Jun 19, 2024 · a55183e · a55183e
1 parent 3877900
commit a55183e
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 12 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-helsinki-headless-cms",
-  "version": "1.0.0-alpha283",
+  "version": "1.0.0-alpha284",
   "description": "React components for displaying Headless CMS content according to guidelines set by HDS",
   "main": "cjs/index.js",
   "module": "index.js",

diff --git a/src/core/card/Card.tsx b/src/core/card/Card.tsx
@@ -130,8 +130,8 @@ export function Card({
         isCentered && styles.isCentered,
       )}
       style={style}
-      onMouseEnter={handleToggleActive}
-      onMouseLeave={handleToggleActive}
+      onMouseEnter={url && handleToggleActive}
+      onMouseLeave={url && handleToggleActive}
     >
       <BackgroundImage
         id={id}

diff --git a/src/core/card/card.module.scss b/src/core/card/card.module.scss
@@ -32,7 +32,7 @@
 
   &.responsive {
     flex-direction: row;
-    &.image-right {
+    &.image-left {
       flex-direction: row-reverse;
     }
   }
@@ -47,14 +47,14 @@
       flex-direction: row-reverse;
     }
 
-    &.image-right {
+    &.image-left {
       flex-direction: row-reverse;
       &.isCentered,
       &.isDelimited {
         flex-direction: row;
       }
     }
-    &.image-left {
+    &.image-right {
       flex-direction: row;
       &.isCentered,
       &.isDelimited {
@@ -112,7 +112,7 @@
     margin-bottom: 0;
     &.responsive {
       flex-direction: column;
-      &.image-right {
+      &.image-left {
         flex-direction: column;
         &.isCentered,
         &.isDelimited {
@@ -132,7 +132,7 @@
         flex-direction: row-reverse;
       }
 
-      &.image-right {
+      &.image-left {
         flex-direction: row-reverse;
         &.isCentered,
         &.isDelimited {
@@ -230,18 +230,18 @@
     &.isDelimited {
       @include respond_above(s) {
         width: 62.5%;
-        &.left {
+        &.right {
           margin-right: 37.5%;
         }
-        &.right {
+        &.left {
           margin-left: 37.5%;
         }
         @include respond_above(l) {
           width: 80%;
-          &.left {
+          &.right {
             margin-right: 20%;
           }
-          &.right {
+          &.left {
             margin-left: 20%;
           }
         }