forked from binary-com/deriv-app
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[COJ]/account-v2/Likhith/feq-1107/create timeline component (binary-c…
…om#12610) * chore: initial setup * chore: initial setup * chore: configured webpack * fix: changed lint rules * chore: incorporated build config * chore: added stylelint file * chore: updated stylelint * refactor: incorporated review comments * fix: reverted webpack types * fix: build issue * chore: added sonarlint rules * chore: added a test component * fix: removed test component * chore: copied tailwind from tradershub * fix: dependency version mismatch * fix: added missing eslintignore file * chore: webpack config refactor (#60) Co-authored-by: “yauheni-kryzhyk-deriv” <“yauheni@deriv.me”> Co-authored-by: Likhith Kolayari <likhith@regentmarkets.com> * fix: build failure * fix: sonarcloud errors * fix: added tailwind styles * chore: types naming * feat: added a test component * fix: tailwind-config * refactor: build process * refactor: build process * fix: removed catastrophic backtracking regex * fix: incoporated review comments * fix: renamed version * feat: added flag to render account-v2 * fix: failing testcase * fix: failing testcase * fix: imports * chore: updated packages * fix: added prettier config * chore: created timeline component * chore: added deriv lib * fix: added mock stepper-form * fix: added styles * feat: created timeline component for mobile * fix: remove unintented changes * fix: resolved build issues * fix: resolved build issues * fix: resolved build issues * fix: resolved build issues * fix: added regex to remove lint rules for mock and classnames * fix: incorporated review comments --------- Co-authored-by: yauheni-deriv <103182683+yauheni-deriv@users.noreply.github.com> Co-authored-by: “yauheni-kryzhyk-deriv” <“yauheni@deriv.me”>
- Loading branch information
1 parent
0d357f1
commit c25f331
Showing
9 changed files
with
189 additions
and
6 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,2 +1,4 @@ | ||
dist/*.js | ||
*.config.* | ||
*.classnames.ts | ||
*.mock.* |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
37 changes: 37 additions & 0 deletions
37
packages/account-v2/src/components/form-progress/form-progress.classnames.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,37 @@ | ||
import { cva } from 'class-variance-authority'; | ||
|
||
const stepperBaseStyles = 'z-10 box-border flex h-800 w-800 items-center rounded-pill outline outline-2'; | ||
|
||
export const stepperVariants = cva(stepperBaseStyles, { | ||
variants: { | ||
isActive: { | ||
true: 'transition-all delay-700 duration-700 ease-out outline-solid-coral-700', | ||
false: 'outline-solid-grey-5', | ||
}, | ||
isFilled: { | ||
true: '', | ||
}, | ||
}, | ||
compoundVariants: [ | ||
{ | ||
isActive: false, | ||
isFilled: true, | ||
class: 'bg-solid-grey-5', | ||
}, | ||
{ | ||
isActive: true, | ||
isFilled: true, | ||
class: 'bg-solid-coral-700', | ||
}, | ||
], | ||
}); | ||
|
||
export const desktopStyle = { | ||
stepper: 'lg:flex lg:w-fit lg:items-end lg:gap-gap-lg', | ||
connector: | ||
'lg:h-2000 lg:w-100 lg:bg-[length:100%_200%] lg:bg-bottom lg:bg-gradient-to-b lg:aria-[current=true]:bg-top', | ||
}; | ||
|
||
export const mobileStyle = { | ||
connector: 'bg-[length:200%_100%] bg-right bg-gradient-to-r aria-[current=true]:bg-left w-auto h-general-2xs', | ||
}; |
66 changes: 66 additions & 0 deletions
66
packages/account-v2/src/components/form-progress/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,66 @@ | ||
import React, { useState } from 'react'; | ||
import { useBreakpoint } from '@deriv/quill-design'; | ||
import StepConnector from './step-connector'; | ||
import Stepper, { TStep } from './stepper'; | ||
|
||
type TFormProgressProps = { | ||
activeStep: number; | ||
steps: TStep[]; // [TODO]:Mock - Enable once isActive comes from Modal | ||
}; | ||
|
||
/** | ||
* @name FormProgress | ||
* @param steps - List of steps to be rendered | ||
* @returns React Component | ||
*/ | ||
export const FormProgress = ({ steps = [] }: TFormProgressProps) => { | ||
const [activeStep, setActiveStep] = useState(0); // [TODO]:Mock - remove once isActive comes from Modal | ||
|
||
const { isMobile } = useBreakpoint(); | ||
|
||
// [TODO]:Mock - remove once isActive comes from Modal | ||
const updateStep = (index: number) => { | ||
if (steps[index - 1]?.isFilled || index === 0) { | ||
setActiveStep(index + 1); | ||
} | ||
}; | ||
|
||
return ( | ||
<React.Fragment> | ||
{isMobile ? ( | ||
<React.Fragment> | ||
{' '} | ||
{/* [TODO]:Mock - remove Fragment once isActive comes from Modal*/} | ||
<div className='grid grid-flow-col gap-gap-2xs'> | ||
{steps.map((step, index) => ( | ||
<StepConnector isActive={index <= activeStep} key={step.title} /> | ||
))} | ||
</div> | ||
{/* [TODO]:Mock - remove button once isActive comes from Modal*/} | ||
<button | ||
onClick={() => { | ||
updateStep(activeStep); | ||
}} | ||
> | ||
Update | ||
</button> | ||
{/* [TODO]:Mock - remove Fragment once isActive comes from Modal*/} | ||
</React.Fragment> | ||
) : ( | ||
<React.Fragment> | ||
{steps.map((step, index) => ( | ||
<Stepper | ||
isActive={index <= activeStep} | ||
key={step.title} | ||
onClick={() => { | ||
if (steps[index - 1]?.isFilled || index === 0) setActiveStep(index); | ||
}} | ||
step={step} | ||
stepCount={index} | ||
/> | ||
))} | ||
</React.Fragment> | ||
)} | ||
</React.Fragment> | ||
); | ||
}; |
18 changes: 18 additions & 0 deletions
18
packages/account-v2/src/components/form-progress/step-connector.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
import React from 'react'; | ||
import { qtMerge } from '@deriv/quill-design'; | ||
import { desktopStyle, mobileStyle } from './form-progress.classnames'; | ||
|
||
const StepConnector = ({ isActive }: { isActive?: boolean }) => ( | ||
<div | ||
aria-current={isActive} | ||
className={qtMerge( | ||
'via-solid-grey-5 to-solid-grey-5 from-solid-coral-700 from-50% via-50% transition-all duration-700 ease-out', | ||
mobileStyle.connector, | ||
desktopStyle.connector | ||
)} | ||
> | ||
{' '} | ||
</div> | ||
); | ||
|
||
export default StepConnector; |
30 changes: 30 additions & 0 deletions
30
packages/account-v2/src/components/form-progress/stepper.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
import React from 'react'; | ||
import { qtMerge, Text } from '@deriv/quill-design'; | ||
import { StandaloneCheckBoldIcon } from '@deriv/quill-icons'; | ||
import { desktopStyle, stepperVariants } from './form-progress.classnames'; | ||
import StepConnector from './step-connector'; | ||
|
||
export type TStep = { isFilled: boolean; title: string }; | ||
|
||
type TStepperProps = { | ||
isActive: boolean; | ||
onClick: React.MouseEventHandler<HTMLSpanElement>; | ||
step: TStep; | ||
stepCount: number; // [TODO]:Mock - remove once isActive comes from Modal | ||
}; | ||
|
||
const Stepper = ({ isActive, onClick, step, stepCount }: TStepperProps) => ( | ||
<div aria-current={isActive} className={qtMerge('group relative justify-center', desktopStyle.stepper)}> | ||
<div className='flex flex-col items-center'> | ||
{stepCount !== 0 && <StepConnector isActive={isActive} />} | ||
<span className={stepperVariants({ isActive, isFilled: step.isFilled })}> | ||
{step.isFilled ? <StandaloneCheckBoldIcon fill={isActive ? '#fff' : '#000'} /> : null} | ||
</span> | ||
</div> | ||
<Text bold={isActive} className='relative top-200' onClick={onClick} size='sm'> | ||
{step.title} | ||
</Text> | ||
</div> | ||
); | ||
|
||
export default Stepper; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
export const stepProgress = [ | ||
{ title: 'Step 1', isFilled: true }, | ||
{ title: 'Step 2', isFilled: true }, | ||
{ title: 'Step 3', isFilled: false }, | ||
{ title: 'Step 4', isFilled: false }, | ||
]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters