feat: Process cards link behaviour

components/Card/Card.module.scss

@@ -9,6 +9,7 @@
   filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.14));
 
   min-width: 290px;
+  margin-bottom: 16px;
 
   background: #ffffff;
   border-radius: 4px;

components/Card/ProjectCard.tsx

@@ -13,13 +13,12 @@ import { UserDots } from "./UserDots";
 import { getMyAccess } from "utils/getMyAccess";
 import styles from "./Card.module.scss";
 import { tag } from "@equinor/eds-icons";
-import { useRouter } from "next/router";
 import { vsmProject } from "../../interfaces/VsmProject";
+import Link from "next/link";
 
 export function ProjectCard(props: { vsm: vsmProject }): JSX.Element {
   const queryClient = useQueryClient();
   const [isMutatingFavourite, setIsMutatingFavourite] = useState(false);
-  const router = useRouter();
 
   const [visibleScrim, setVisibleScrim] = useState(false);
   const [visibleLabelScrim, setVisibleLabelScrim] = useState(false);
@@ -56,54 +55,42 @@ export function ProjectCard(props: { vsm: vsmProject }): JSX.Element {
 
   return (
     <>
-      <button
-        style={{
-          padding: "0",
-          marginBottom: "16px",
-          border: "none",
-          textAlign: "inherit",
-          display: "inherit",
-          backgroundColor: "unset",
-          width: "100%",
-        }}
-        onClick={() => router.push(`/process/${props.vsm.vsmProjectID}`)}
-      >
-        <div className={styles.card}>
-          <div className={styles.section}>
-            <ProjectCardHeader vsm={props.vsm} />
-            <Heart
-              isFavourite={props.vsm.isFavorite}
-              fave={() => faveMutation.mutate()}
-              unfave={() => unfaveMutation.mutate()}
-              isLoading={isMutatingFavourite}
-            />
-          </div>
-          <div className={`${styles.section} ${styles.labelSection}`}>
-            <Labels labels={props.vsm.labels} />
-          </div>
-          <div className={`${styles.section} ${styles.bottomSection}`}>
-            <UserDots
-              userAccesses={props.vsm.userAccesses}
-              setVisibleScrim={(any: boolean) => setVisibleScrim(any)}
-            />
-            {userCanEdit && (
-              <Tooltip title="Manage process labels" placement="right">
-                <Button
-                  color="primary"
-                  variant="ghost_icon"
-                  style={{ height: "30px", width: "30px" }}
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    setVisibleLabelScrim(true);
-                  }}
-                >
-                  <Icon data={tag} />
-                </Button>
-              </Tooltip>
-            )}
-          </div>
+      <Link href={`/process/${props.vsm.vsmProjectID}`} className={styles.card}>
+        <div className={styles.section}>
+          <ProjectCardHeader vsm={props.vsm} />
+          <Heart
+            isFavourite={props.vsm.isFavorite}
+            fave={() => faveMutation.mutate()}
+            unfave={() => unfaveMutation.mutate()}
+            isLoading={isMutatingFavourite}
+          />
+        </div>
+        <div className={`${styles.section} ${styles.labelSection}`}>
+          <Labels labels={props.vsm.labels} />
+        </div>
+        <div className={`${styles.section} ${styles.bottomSection}`}>
+          <UserDots
+            userAccesses={props.vsm.userAccesses}
+            setVisibleScrim={(any: boolean) => setVisibleScrim(any)}
+          />
+          {userCanEdit && (
+            <Tooltip title="Manage process labels" placement="right">
+              <Button
+                color="primary"
+                variant="ghost_icon"
+                style={{ height: "30px", width: "30px" }}
+                onClick={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  setVisibleLabelScrim(true);
+                }}
+              >
+                <Icon data={tag} />
+              </Button>
+            </Tooltip>
+          )}
         </div>
-      </button>
+      </Link>
 
       <Scrim
         open={visibleScrim}

components/Card/UserDots.tsx

@@ -20,6 +20,7 @@ export function UserDots(props: {
       <button
         className={styles.buttonUserDots}
         onClick={(e) => {
+          e.preventDefault();
           e.stopPropagation();
           setVisibleScrim(true);
         }}

components/Heart.tsx

@@ -10,6 +10,7 @@ export default function Heart(props: {
   unfave: () => void;
 }): JSX.Element {
   const handleClick = (e) => {
+    e.preventDefault();
     e.stopPropagation();
     props.isFavourite ? props.unfave() : props.fave();
   };

components/Labels/Labels.tsx

@@ -24,6 +24,7 @@ export default function Labels(props: { labels: processLabel[] }): JSX.Element {
           style={{ marginRight: "5px", marginBottom: "10px" }}
           key={label.id}
           onClick={(e) => {
+            e.preventDefault();
             e.stopPropagation();
             handleClickLabel(label.id.toString());
           }}

package.json

@@ -72,7 +72,7 @@
     "styled-components": "5.3.3"
   },
   "devDependencies": {
-    "@babel/core": "7.23.7",
+    "@babel/core": "^7.23.9",
     "@testing-library/jest-dom": "5.17.0",
     "@testing-library/react": "14.1.2",
     "babel-jest": "27.5.1",