Fakultas Ilmu Komputer UI

Commit 8ed64267 authored by Lia Yuliana's avatar Lia Yuliana
Browse files

[CHORES] implement hover on Stepper

parent 03306d27
Pipeline #73964 passed with stages
in 11 minutes and 44 seconds
...@@ -4,7 +4,7 @@ import PropTypes from 'prop-types' ...@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
const Stepper = ({currentPage, handleSubmit, onSubmit, register, setValue}) => { const Stepper = ({currentPage, handleSubmit, onSubmit, register, setValue}) => {
return ( return (
<div <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" data-testid="stepper"
> >
<div <div
...@@ -17,11 +17,11 @@ const Stepper = ({currentPage, handleSubmit, onSubmit, register, setValue}) => { ...@@ -17,11 +17,11 @@ const Stepper = ({currentPage, handleSubmit, onSubmit, register, setValue}) => {
type="submit" type="submit"
value="1" value="1"
ref={register({})} 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 currentPage == 1
? `bg-white text-darkblue` ? `bg-white text-darkblue hover:bg-darkblue hover:text-white`
: `bg-darkblue text-white` : `bg-darkblue text-white hover:bg-white hover:text-darkblue`
}`} }`}
data-testid={`${currentPage == 1 ? `step-1-white` : `step-1-blue`}`} data-testid={`${currentPage == 1 ? `step-1-white` : `step-1-blue`}`}
onClick={() => { onClick={() => {
...@@ -42,7 +42,7 @@ const Stepper = ({currentPage, handleSubmit, onSubmit, register, setValue}) => { ...@@ -42,7 +42,7 @@ const Stepper = ({currentPage, handleSubmit, onSubmit, register, setValue}) => {
}`} }`}
></div> ></div>
<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" data-testid="step-2"
> >
<form onSubmit={handleSubmit(onSubmit)}> <form onSubmit={handleSubmit(onSubmit)}>
...@@ -51,18 +51,18 @@ const Stepper = ({currentPage, handleSubmit, onSubmit, register, setValue}) => { ...@@ -51,18 +51,18 @@ const Stepper = ({currentPage, handleSubmit, onSubmit, register, setValue}) => {
type="submit" type="submit"
value="2" value="2"
ref={register({})} 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 && 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 && currentPage == 2 &&
`bg-white text-darkblue border-darkblue` `bg-white text-darkblue border-darkblue group-hover:bg-darkblue hover:text-white`
} }
${ ${
currentPage == 3 && currentPage == 3 &&
`bg-darkblue text-white border-darkblue` `bg-darkblue text-white border-darkblue hover:bg-white hover:text-darkblue`
}`} }`}
data-testid={`${ data-testid={`${
currentPage == 1 currentPage == 1
...@@ -79,7 +79,9 @@ const Stepper = ({currentPage, handleSubmit, onSubmit, register, setValue}) => { ...@@ -79,7 +79,9 @@ const Stepper = ({currentPage, handleSubmit, onSubmit, register, setValue}) => {
<p <p
className={`small-text text-gray-400 text-center font-bold absolute top-12 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 Informasi <br></br> Tambahan
...@@ -94,7 +96,7 @@ const Stepper = ({currentPage, handleSubmit, onSubmit, register, setValue}) => { ...@@ -94,7 +96,7 @@ const Stepper = ({currentPage, handleSubmit, onSubmit, register, setValue}) => {
}`} }`}
></div> ></div>
<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" data-testid="step-3"
> >
<form onSubmit={handleSubmit(onSubmit)}> <form onSubmit={handleSubmit(onSubmit)}>
...@@ -102,11 +104,11 @@ const Stepper = ({currentPage, handleSubmit, onSubmit, register, setValue}) => { ...@@ -102,11 +104,11 @@ const Stepper = ({currentPage, handleSubmit, onSubmit, register, setValue}) => {
name="page" name="page"
type="submit" type="submit"
value="3" 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 currentPage == 3
? `bg-white text-darkblue border-darkblue` ? `bg-white text-darkblue border-darkblue group-hover:bg-darkblue hover:text-white`
: `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`
}`} }`}
data-testid={`${currentPage == 3 ? `step-3-white` : `step-3-gray`}`} data-testid={`${currentPage == 3 ? `step-3-white` : `step-3-gray`}`}
onClick={() => { onClick={() => {
...@@ -118,7 +120,9 @@ const Stepper = ({currentPage, handleSubmit, onSubmit, register, setValue}) => { ...@@ -118,7 +120,9 @@ const Stepper = ({currentPage, handleSubmit, onSubmit, register, setValue}) => {
<p <p
className={`small-text text-center font-bold absolute top-12 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 Kirim
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment