Hirad/ Onboarding progress bar (#6345)

* Finished onboarding progress bar

* Changed the justify content from space-evenly to center

* Added our component to the main index.js file

packages/components/src/components/progress-bar-onboarding/index.ts

@@ -0,0 +1,4 @@
+import ProgressBarOnboarding from './progress-bar-onboarding';
+import './progress-bar-onboarding.scss';
+
+export default ProgressBarOnboarding;

packages/components/src/components/progress-bar-onboarding/progress-bar-onboarding.scss

@@ -0,0 +1,20 @@
+.progress-bar {
+    display: flex;
+    justify-content: center;
+    cursor: pointer;
+
+    &-rectangle {
+        width: 2.5rem;
+        height: 0.8rem;
+        background-color: $color-red;
+        border-radius: 1rem;
+    }
+
+    &-circle {
+        width: 0.8rem;
+        height: 0.8rem;
+        margin: 0 0.4rem;
+        border-radius: 50%;
+        background-color: $color-grey;
+    }
+}

packages/components/src/components/progress-bar-onboarding/progress-bar-onboarding.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import './progress-bar-onboarding.scss';
+
+type TProgressBarOnboarding = {
+    step: number;
+    amount_of_steps: Array<string>;
+    setStep: React.Dispatch<React.SetStateAction<number>>;
+};
+
+const ProgressBarOnboarding = ({ step, amount_of_steps, setStep }: TProgressBarOnboarding) => {
+    return (
+        <div className='progress-bar'>
+            {amount_of_steps.map((st, index) => {
+                const active = step === index + 1;
+
+                return (
+                    <div
+                        key={st}
+                        onClick={() => setStep(index + 1)}
+                        className={active ? 'progress-bar-rectangle' : 'progress-bar-circle'}
+                    />
+                );
+            })}
+        </div>
+    );
+};
+
+export default ProgressBarOnboarding;

packages/components/src/index.js

@@ -82,6 +82,7 @@ export { default as PopoverMobile } from './components/popover-mobile';
 export { default as Popup } from './components/popup';
 export { default as PopoverMessageCheckbox } from './components/popover-message-checkbox';
 export { default as ProgressBar } from './components/progress-bar';
+export { default as ProgressBarOnboarding } from './components/progress-bar-onboarding';
 export { default as ProgressIndicator } from './components/progress-indicator';
 export { default as ProgressSlider } from './components/progress-slider';
 export { default as ProgressSliderMobile } from './components/progress-slider-mobile';