Fakultas Ilmu Komputer UI

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

[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'
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
......
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