From 06a29a4d023cc169afe242ecd0606548a33df732 Mon Sep 17 00:00:00 2001
From: BharathTarento <bharath.kumar@tarento.cocom>
Date: Wed, 30 Nov 2022 11:08:55 +0530
Subject: [PATCH] changes in the model assigning to inspector
---
.../headings/HeadingSteps.module.css | 56 +++++++++++++++++++
src/components/headings/HeadingSteps.tsx | 25 +++++++++
src/components/headings/index.ts | 1 +
.../modal/InspectionScheduleModal.tsx | 16 +++++-
4 files changed, 95 insertions(+), 3 deletions(-)
create mode 100644 src/components/headings/HeadingSteps.module.css
create mode 100644 src/components/headings/HeadingSteps.tsx
diff --git a/src/components/headings/HeadingSteps.module.css b/src/components/headings/HeadingSteps.module.css
new file mode 100644
index 0000000..3f9fd99
--- /dev/null
+++ b/src/components/headings/HeadingSteps.module.css
@@ -0,0 +1,56 @@
+@import url("../../styles/colors.css");
+@import url("../../assets/fonts/fonts.css");
+:root {
+ --circle-size: clamp(1.5rem, 5vw, 3rem);
+ --spacing: clamp(0.25rem, 2vw, 0.5rem);
+}
+
+.heading_five {
+ color: var(--black-87);
+ font-family: "Lato-Bold";
+ font-size: 0.875rem;
+ letter-spacing: 0.25px;
+ line-height: 1.429;
+ padding-top: 0.3rem;
+}
+
+.heading_prefix_circle {
+ background-color: var(--white-90);
+ border-radius: 50%;
+ color: var(--blue-primary);
+ font-family: "Montserrat-SemiBold";
+ font-size: 1rem;
+ text-align: center;
+ padding-top: 0.20rem;
+ letter-spacing: 0.12px;
+ line-height: 1.5;
+ height: 1.875rem;
+ width: 1.875rem;
+ border: 1px solid var(--blue-primary);
+}
+
+.stepper {
+ --size: 3rem;
+ --spacing: -0.5rem;
+}
+
+.stepper__item {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ text-align: center;
+}
+.active_step {
+ background-color:var(--blue-primary);
+ color: #ffffff;
+}
+.stepper__item:not(:last-child):after {
+ content: "";
+ position: relative;
+ top: calc(var(--circle-size) / 3);
+ width: calc(100% - var(--circle-size) - calc(var(--spacing) * 2));
+ left: calc(48% + calc(var(--circle-size) / 2 + var(--spacing)));
+ height: 2px;
+ background-color: #e0e0e0;
+ order: -1;
+}
\ No newline at end of file
diff --git a/src/components/headings/HeadingSteps.tsx b/src/components/headings/HeadingSteps.tsx
new file mode 100644
index 0000000..3e384b5
--- /dev/null
+++ b/src/components/headings/HeadingSteps.tsx
@@ -0,0 +1,25 @@
+import styles from "./HeadingSteps.module.css";
+
+/**
+ * HeadingFive component renders
+ * larger variant of headings with prefix icon
+ */
+
+interface HeadingStepsProps {
+ stepsData: any;
+}
+
+export const HeadingSteps = ({ stepsData}: HeadingStepsProps) => {
+return(
+ <ul className={`${styles.stepper} d-flex flex-row justify-content-center align-items-center w-100`}>
+ {stepsData && stepsData.map((i:any) => {
+ return(
+ <li className={`${styles.stepper__item} d-flex flex-column justify-content-center align-items-center me-3`}>
+ <div className={`${styles.heading_prefix_circle} ${i.active?styles.active_step:''}`}>{i.count}</div>
+ <div className={`${styles.heading_five}`}>{i.label}</div>
+ </li>
+ )
+ })}
+ </ul>
+)
+};
diff --git a/src/components/headings/index.ts b/src/components/headings/index.ts
index 214ff41..58f93e4 100644
--- a/src/components/headings/index.ts
+++ b/src/components/headings/index.ts
@@ -2,3 +2,4 @@ export { HeadingOne } from "./HeadingOne";
export { HeadingTwo } from "./HeadingTwo";
export { HeadingFour } from "./HeadingFour";
export { HeadingFive } from "./HeadingFive";
+export { HeadingSteps } from "./HeadingSteps";
diff --git a/src/components/modal/InspectionScheduleModal.tsx b/src/components/modal/InspectionScheduleModal.tsx
index 955147c..9897954 100644
--- a/src/components/modal/InspectionScheduleModal.tsx
+++ b/src/components/modal/InspectionScheduleModal.tsx
@@ -5,7 +5,7 @@ import btnStyle from "../buttons/BtnOne.module.css";
import btnStyleTwo from "../buttons/BtnTwo.module.css";
import { SelectField, TextField } from "../form-elements";
import { BtnOne } from "../buttons";
-import { HeadingFive } from "../headings";
+import { HeadingFive, HeadingSteps } from "../headings";
import moment from "moment";
import { APP, LANG } from "../../constants";
import { ReviewService } from "../../services";
@@ -63,6 +63,15 @@ export const InspectionScheduleModal = ({
const [disableSubmit, setDisableSubmit] = useState(true);
let history = useHistory();
+ let stepsData = [{
+ label:'Schedule the inspection',
+ count: 1,
+ active: true
+ },{
+ label:'Schedule the inspection',
+ count: 2,
+ active: false
+ }]
useEffect(() => {
ReviewService.getAllInspectors().then(
@@ -384,12 +393,13 @@ export const InspectionScheduleModal = ({
<div className="modal-dialog modal-lg">
<div className={`${styles.custom_model_content} modal-content`}>
<div className={`${styles.custom_modal_footer} modal-header`}>
- <h5
+ {/* <h5
className={`${styles.custom_modal_title} modal-title`}
id="staticBackdropLabel"
>
{heading}
- </h5>
+ </h5> */}
+ <HeadingSteps stepsData={stepsData}></HeadingSteps>
</div>
{/* Body */}
--
GitLab