Merge branch 'PBI-4-IUMK' into 'staging'

Implement stepper hover

See merge request !12

src/components/Stepper/Stepper.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 const Stepper = ({currentPage, handleSubmit, onSubmit, register, setValue}) => {
   return (
     <div
-      className="flex flex-row justify-between items-center px-12 lg:px-48 lg:px-36 xl:px-48 2xl:px-48 mx-42 lg:mx-64 xl:mx-72 2xl:mx-72 pt-12 pb-14"
+      className="flex flex-row justify-between items-center px-4 lg:px-36 xl:px-48 2xl:px-48 mx-42 lg:mx-64 xl:mx-72 2xl:mx-72 pt-12 pb-14"
       data-testid="stepper"
     >
       <div
@@ -17,11 +17,11 @@ const Stepper = ({currentPage, handleSubmit, onSubmit, register, setValue}) => {
             type="submit"
             value="1"
             ref={register({})}
-            className={`reguler-text font-bold border-2 border-darkblue rounded-full h-9 w-9 flex items-center justify-center
+            className={`reguler-text font-bold border-2 border-darkblue rounded-full h-9 w-9 flex items-center justify-center cursor-pointer
                       ${
                         currentPage == 1
-                          ? `bg-white text-darkblue`
-                          : `bg-darkblue text-white`
+                          ? `bg-white text-darkblue hover:bg-darkblue hover:text-white`
+                          : `bg-darkblue text-white hover:bg-white hover:text-darkblue`
                       }`}
             data-testid={`${currentPage == 1 ? `step-1-white` : `step-1-blue`}`}
             onClick={() => {
@@ -42,7 +42,7 @@ const Stepper = ({currentPage, handleSubmit, onSubmit, register, setValue}) => {
                         }`}
       ></div>
       <div
-        className="flex flex-col justify-center items-center pt-1 relative"
+        className="group flex flex-col justify-center items-center pt-1 relative"
         data-testid="step-2"
       >
         <form onSubmit={handleSubmit(onSubmit)}>
@@ -51,18 +51,18 @@ const Stepper = ({currentPage, handleSubmit, onSubmit, register, setValue}) => {
             type="submit"
             value="2"
             ref={register({})}
-            className={`reguler-text font-bold border-2 rounded-full h-10 w-10 flex items-center justify-center
+            className={`reguler-text font-bold border-2 rounded-full h-10 w-10 flex items-center justify-center cursor-pointer
                         ${
                           currentPage == 1 &&
-                          `bg-gray-200 text-gray-400 border-gray-200`
+                          `bg-gray-200 text-gray-400 border-gray-200 group-hover:bg-darkblue hover:text-white`
                         }
                         ${
                           currentPage == 2 &&
-                          `bg-white text-darkblue border-darkblue`
+                          `bg-white text-darkblue border-darkblue group-hover:bg-darkblue hover:text-white`
                         }
                         ${
                           currentPage == 3 &&
-                          `bg-darkblue text-white border-darkblue`
+                          `bg-darkblue text-white border-darkblue hover:bg-white hover:text-darkblue`
                         }`}
             data-testid={`${
               currentPage == 1
@@ -79,7 +79,9 @@ const Stepper = ({currentPage, handleSubmit, onSubmit, register, setValue}) => {
         <p
           className={`small-text text-gray-400 text-center font-bold absolute top-12
                         ${
-                          currentPage == 1 ? `text-gray-400` : `text-darkblue`
+                          currentPage == 1
+                            ? `text-gray-400 group-hover:text-darkblue`
+                            : `text-darkblue`
                         }`}
         >
           Informasi <br></br> Tambahan
@@ -94,7 +96,7 @@ const Stepper = ({currentPage, handleSubmit, onSubmit, register, setValue}) => {
                         }`}
       ></div>
       <div
-        className="flex flex-col justify-center items-center pt-1 relative"
+        className="group flex flex-col justify-center items-center pt-1 relative"
         data-testid="step-3"
       >
         <form onSubmit={handleSubmit(onSubmit)}>
@@ -102,11 +104,11 @@ const Stepper = ({currentPage, handleSubmit, onSubmit, register, setValue}) => {
             name="page"
             type="submit"
             value="3"
-            className={`reguler-text font-bold border-2 rounded-full h-10 w-10 flex items-center justify-center
+            className={`reguler-text font-bold border-2 rounded-full h-10 w-10 flex items-center justify-center cursor-pointer
                         ${
                           currentPage == 3
-                            ? `bg-white text-darkblue border-darkblue`
-                            : `bg-gray-200 text-gray-400 border-gray-200`
+                            ? `bg-white text-darkblue border-darkblue group-hover:bg-darkblue hover:text-white`
+                            : `bg-gray-200 text-gray-400 border-gray-200 group-hover:bg-darkblue hover:text-white`
                         }`}
             data-testid={`${currentPage == 3 ? `step-3-white` : `step-3-gray`}`}
             onClick={() => {
@@ -118,7 +120,9 @@ const Stepper = ({currentPage, handleSubmit, onSubmit, register, setValue}) => {
         <p
           className={`small-text text-center font-bold absolute top-12
                         ${
-                          currentPage == 3 ? `text-darkblue` : `text-gray-400`
+                          currentPage == 3
+                            ? `text-darkblue`
+                            : `text-gray-400 group-hover:text-darkblue`
                         }`}
         >
           Kirim