diff --git a/packages/account-v2/.eslintignore b/packages/account-v2/.eslintignore index e0ea1d17ac5d..60d4d5c8c6fe 100644 --- a/packages/account-v2/.eslintignore +++ b/packages/account-v2/.eslintignore @@ -1,2 +1,4 @@ dist/*.js *.config.* +*.classnames.ts +*.mock.* diff --git a/packages/account-v2/.eslintrc.js b/packages/account-v2/.eslintrc.js index d15b4c6385ed..cb5fe72635d2 100644 --- a/packages/account-v2/.eslintrc.js +++ b/packages/account-v2/.eslintrc.js @@ -25,7 +25,14 @@ module.exports = { 'typescript-sort-keys', ], root: true, - ignorePatterns: ['**/node_modules/**', '**/dist/**', '**/*.js', '**/*.config.*'], + ignorePatterns: [ + '**/node_modules/**', + '**/dist/**', + '**/*.js', + '**/*.config.*', + '**/*.classnames.ts', + '**/*.mock.*', + ], rules: { '@typescript-eslint/array-type': 'error', '@typescript-eslint/no-explicit-any': 'error', diff --git a/packages/account-v2/src/App.tsx b/packages/account-v2/src/App.tsx index f6cec65bcd41..dc3f8c377dbb 100644 --- a/packages/account-v2/src/App.tsx +++ b/packages/account-v2/src/App.tsx @@ -2,13 +2,20 @@ import React from 'react'; import { APIProvider } from '@deriv/api'; import { BrandDerivLogoCoralIcon } from '@deriv/quill-icons'; import './index.scss'; +import { BreakpointProvider } from '@deriv/quill-design'; +import { FormProgress } from './components/form-progress'; +import { stepProgress } from './mocks/form-progress.mock'; const App: React.FC = () => ( -
Account V2
-
- -
+ +
Account V2
+
+ +
+ {/* [TODO]:Mock - Remove hardcoded initial value once isActive comes from Modal */} + + ); diff --git a/packages/account-v2/src/components/form-progress/form-progress.classnames.ts b/packages/account-v2/src/components/form-progress/form-progress.classnames.ts new file mode 100644 index 000000000000..8c6666d30856 --- /dev/null +++ b/packages/account-v2/src/components/form-progress/form-progress.classnames.ts @@ -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', +}; diff --git a/packages/account-v2/src/components/form-progress/index.tsx b/packages/account-v2/src/components/form-progress/index.tsx new file mode 100644 index 000000000000..a83813027a17 --- /dev/null +++ b/packages/account-v2/src/components/form-progress/index.tsx @@ -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 ( + + {isMobile ? ( + + {' '} + {/* [TODO]:Mock - remove Fragment once isActive comes from Modal*/} +
+ {steps.map((step, index) => ( + + ))} +
+ {/* [TODO]:Mock - remove button once isActive comes from Modal*/} + + {/* [TODO]:Mock - remove Fragment once isActive comes from Modal*/} + + ) : ( + + {steps.map((step, index) => ( + { + if (steps[index - 1]?.isFilled || index === 0) setActiveStep(index); + }} + step={step} + stepCount={index} + /> + ))} + + )} + + ); +}; diff --git a/packages/account-v2/src/components/form-progress/step-connector.tsx b/packages/account-v2/src/components/form-progress/step-connector.tsx new file mode 100644 index 000000000000..6c5ef317214d --- /dev/null +++ b/packages/account-v2/src/components/form-progress/step-connector.tsx @@ -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 }) => ( +
+ {' '} +
+); + +export default StepConnector; diff --git a/packages/account-v2/src/components/form-progress/stepper.tsx b/packages/account-v2/src/components/form-progress/stepper.tsx new file mode 100644 index 000000000000..4da3095c6f21 --- /dev/null +++ b/packages/account-v2/src/components/form-progress/stepper.tsx @@ -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; + step: TStep; + stepCount: number; // [TODO]:Mock - remove once isActive comes from Modal +}; + +const Stepper = ({ isActive, onClick, step, stepCount }: TStepperProps) => ( +
+
+ {stepCount !== 0 && } + + {step.isFilled ? : null} + +
+ + {step.title} + +
+); + +export default Stepper; diff --git a/packages/account-v2/src/mocks/form-progress.mock.ts b/packages/account-v2/src/mocks/form-progress.mock.ts new file mode 100644 index 000000000000..2409752b3f98 --- /dev/null +++ b/packages/account-v2/src/mocks/form-progress.mock.ts @@ -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 }, +]; diff --git a/packages/account-v2/tailwind.config.ts b/packages/account-v2/tailwind.config.ts index 78c3c65754f0..e32af19ada41 100644 --- a/packages/account-v2/tailwind.config.ts +++ b/packages/account-v2/tailwind.config.ts @@ -5,7 +5,17 @@ export default { content: ['./src/**/*.{js,jsx,ts,tsx}'], presets: [QuillTailwindConfig], theme: { - extend: {}, + extend: { + colors: { + solid: { + grey: { + '1': '#999999', + '5': '#d6dadb', + '6': '#d6d6d6', + }, + }, + }, + }, }, plugins: [], } satisfies Config;