[COJ]/account-v2/Likhith/feq-1107/create timeline component

packages/account-v2/.eslintignore

@@ -1,2 +1,4 @@
 dist/*.js
 *.config.*
+*.classnames.ts
+*.mock.*

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',

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 = () => (
     <APIProvider standalone>
-        <div className=' text-solid-slate-500 text-heading-h1'>Account V2</div>
-        <div className='p-300'>
-            <BrandDerivLogoCoralIcon height='120px' width='120px' />
-        </div>
+        <BreakpointProvider>
+            <div className='text-heading-h1 text-solid-slate-500'>Account V2</div>
+            <div className='p-300'>
+                <BrandDerivLogoCoralIcon height='120px' width='120px' />
+            </div>
+            {/* [TODO]:Mock - Remove hardcoded initial value once isActive comes from Modal */}
+            <FormProgress steps={stepProgress} activeStep={1} /> 
+        </BreakpointProvider>
     </APIProvider>
 );
 

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-800',
+    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: 'h-100 bg-[length:200%_100%] bg-right bg-gradient-to-r aria-[current=true]:bg-left w-auto',
+};

packages/account-v2/src/components/form-progress/index.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { useBreakpoint } from '@deriv/quill-design';
+import Stepper, { TStep } from './stepper';
+import StepConnector from './step-connector';
+
+type TFormProgressProps = {
+    steps: Array<TStep>;
+    activeStep: number; // [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] = React.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-75'>
+                        {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
+                            key={step.title}
+                            step={step}
+                            stepCount={index}
+                            isActive={index <= activeStep}
+                            onClick={() => {
+                                if (steps[index - 1]?.isFilled || index === 0) setActiveStep(index);
+                            }}
+                        />
+                    ))}
+                </React.Fragment>
+            )}
+        </React.Fragment>
+    );
+};

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 }) => (
+    <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;

packages/account-v2/src/components/form-progress/stepper.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Text, qtMerge } from '@deriv/quill-design';
+import { StandaloneCheckBoldIcon } from '@deriv/quill-icons';
+import StepConnector from './step-connector';
+import { stepperVariants, desktopStyle } from './form-progress.classnames';
+
+export type TStep = { title: string; isFilled: boolean };
+
+type TStepperProps = {
+    isActive: boolean;
+    step: TStep;
+    stepCount: number;
+    onClick: React.MouseEventHandler<HTMLSpanElement>; // [TODO]:Mock - remove once isActive comes from Modal
+};
+
+const Stepper = ({ isActive, step, stepCount, onClick }: TStepperProps) => (
+    <div className={qtMerge('group relative justify-center', desktopStyle.stepper)} aria-current={isActive}>
+        <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} size='sm' className='relative top-200' onClick={onClick}>
+            {step.title}
+        </Text>
+    </div>
+);
+
+export default Stepper;

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 },
+];

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;