Fakultas Ilmu Komputer UI

Commit 4bdbccbc authored by Shafiya Adzhani's avatar Shafiya Adzhani
Browse files

[GREEN] implement stepper after using mock

parent 6ef45e64
Pipeline #72593 canceled with stages
import React from 'react' import React from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
const Stepper = ({currentPage, setCurrentPage}) => { const Stepper = ({currentPage, handleSubmit, onSubmit, register, setValue}) => {
return ( 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-28 pb-14"> <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-28 pb-14">
<div <div
className="flex flex-col justify-center items-center pt-1 relative" className="flex flex-col justify-center items-center pt-1 relative"
data-testid="step-1" data-testid="step-1"
> >
<button <form onSubmit={handleSubmit(onSubmit)}>
className={`reguler-text font-bold border-2 border-darkblue rounded-full h-9 w-9 flex items-center justify-center <input
name="page"
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
${ ${
currentPage == 1 currentPage == 1
? `bg-white text-darkblue` ? `bg-white text-darkblue`
: `bg-darkblue text-white` : `bg-darkblue text-white`
}`} }`}
data-testid={`${currentPage == 1 ? `step-1-white` : `step-1-blue`}`} data-testid={`${currentPage == 1 ? `step-1-white` : `step-1-blue`}`}
onClick={() => setCurrentPage(1)} onClick={() => {
> setValue('page', '1')
1 }}
</button> ></input>
</form>
<p className="small-text text-darkblue text-center font-bold absolute top-12"> <p className="small-text text-darkblue text-center font-bold absolute top-12">
Profile <br></br> Perusahaan Profile <br></br> Perusahaan
</p> </p>
...@@ -36,8 +42,13 @@ const Stepper = ({currentPage, setCurrentPage}) => { ...@@ -36,8 +42,13 @@ const Stepper = ({currentPage, setCurrentPage}) => {
className="flex flex-col justify-center items-center pt-1 relative" className="flex flex-col justify-center items-center pt-1 relative"
data-testid="step-2" data-testid="step-2"
> >
<button <form onSubmit={handleSubmit(onSubmit)}>
className={`reguler-text font-bold border-2 rounded-full h-10 w-10 flex items-center justify-center <input
name="page"
type="submit"
value="2"
ref={register({})}
className={`reguler-text font-bold border-2 rounded-full h-10 w-10 flex items-center justify-center
${ ${
currentPage == 1 && currentPage == 1 &&
`bg-gray-200 text-gray-400 border-gray-200` `bg-gray-200 text-gray-400 border-gray-200`
...@@ -50,17 +61,18 @@ const Stepper = ({currentPage, setCurrentPage}) => { ...@@ -50,17 +61,18 @@ const Stepper = ({currentPage, setCurrentPage}) => {
currentPage == 3 && currentPage == 3 &&
`bg-darkblue text-white border-darkblue` `bg-darkblue text-white border-darkblue`
}`} }`}
data-testid={`${ data-testid={`${
currentPage == 1 currentPage == 1
? `step-2-gray` ? `step-2-gray`
: currentPage == 2 : currentPage == 2
? `step-2-white` ? `step-2-white`
: `step-2-blue` : `step-2-blue`
}`} }`}
onClick={() => setCurrentPage(2)} onClick={() => {
> setValue('page', '2')
2 }}
</button> ></input>
</form>
<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
${ ${
...@@ -82,18 +94,24 @@ const Stepper = ({currentPage, setCurrentPage}) => { ...@@ -82,18 +94,24 @@ const Stepper = ({currentPage, setCurrentPage}) => {
className="flex flex-col justify-center items-center pt-1 relative" className="flex flex-col justify-center items-center pt-1 relative"
data-testid="step-3" data-testid="step-3"
> >
<button <form onSubmit={handleSubmit(onSubmit)}>
className={`reguler-text font-bold border-2 rounded-full h-10 w-10 flex items-center justify-center <input
name="page"
type="submit"
value="3"
className={`reguler-text font-bold border-2 rounded-full h-10 w-10 flex items-center justify-center
${ ${
currentPage == 3 currentPage == 3
? `bg-white text-darkblue border-darkblue` ? `bg-white text-darkblue border-darkblue`
: `bg-gray-200 text-gray-400 border-gray-200` : `bg-gray-200 text-gray-400 border-gray-200`
}`} }`}
data-testid={`${currentPage == 3 ? `step-3-white` : `step-3-gray`}`} data-testid={`${currentPage == 3 ? `step-3-white` : `step-3-gray`}`}
onClick={() => setCurrentPage(3)} onClick={() => {
> setValue('page', '3')
3 }}
</button> ref={register({})}
></input>
</form>
<p <p
className={`small-text text-center font-bold absolute top-12 className={`small-text text-center font-bold absolute top-12
${ ${
...@@ -109,7 +127,10 @@ const Stepper = ({currentPage, setCurrentPage}) => { ...@@ -109,7 +127,10 @@ const Stepper = ({currentPage, setCurrentPage}) => {
Stepper.propTypes = { Stepper.propTypes = {
currentPage: PropTypes.number, currentPage: PropTypes.number,
setCurrentPage: PropTypes.func, onSubmit: PropTypes.func,
register: PropTypes.func,
handleSubmit: PropTypes.func,
setValue: PropTypes.func,
} }
export default Stepper export default Stepper
Supports Markdown
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