From 2139204251429d8128c4438cfd24d93efdd437f1 Mon Sep 17 00:00:00 2001
From: hxtree <matthew.heroux@gmail.com>
Date: Mon, 18 Mar 2024 02:13:29 +0000
Subject: [PATCH] feat: add chevron animation onhover

Signed-off-by: hxtree <matthew.heroux@gmail.com>
---
 .../src/components/Card/BasicCard.tsx         | 21 +++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/clients/design-system/src/components/Card/BasicCard.tsx b/clients/design-system/src/components/Card/BasicCard.tsx
index 3c95f2f99..f58190dff 100644
--- a/clients/design-system/src/components/Card/BasicCard.tsx
+++ b/clients/design-system/src/components/Card/BasicCard.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { useState } from 'react';
 import './style.module.scss';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faArrowRight } from '@fortawesome/free-solid-svg-icons';
+import { faChevronRight, faArrowRight } from '@fortawesome/free-solid-svg-icons';
 import { CardRibbonColor } from './CardRibbonColor.type';
 
 export type BasicCardProps = {
@@ -18,6 +18,15 @@ export type BasicCardProps = {
 // TODO finish fleshing in basic card props
 export const BasicCard = (props: BasicCardProps): JSX.Element => {
   const { ribbonText, ribbonColor, title, imageSrc, testId, url, cta, children } = props;
+  const [isHovered, setIsHovered] = useState(false);
+
+  const handleMouseEnter = () => {
+    setIsHovered(true);
+  };
+
+  const handleMouseLeave = () => {
+    setIsHovered(false);
+  };
 
   const ribbonClasses = [
     'card-ribbon',
@@ -30,7 +39,11 @@ export const BasicCard = (props: BasicCardProps): JSX.Element => {
   }
 
   return (
-    <div className="card h-100 border-radius-4">
+    <div
+      className="card h-100 border-radius-4"
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
       <div className='card-thumbnail'>
         <div className="card-img-top-wrapper">
           <div className="card-img-top" style={{background: `url(${imageSrc})`}}/>
@@ -52,7 +65,7 @@ export const BasicCard = (props: BasicCardProps): JSX.Element => {
           {cta}
         </span>
         <span className="icon text-end flex-fill">
-            <FontAwesomeIcon icon={faArrowRight}/>
+            <FontAwesomeIcon icon={isHovered ? faArrowRight: faChevronRight} />
         </span>
       </div>
       <a href={url} className="stretched-link"></a>