Resolve PR comment and implement the stepper component to match mater…

…ial UI design requirement and improve demos
Capgemini · Nov 26, 2024 · 612d999 · 612d999
1 parent 8696e89
commit 612d999
Show file tree

Hide file tree

Showing 8 changed files with 598 additions and 595 deletions.
diff --git a/example/src/components/StepperDemo.tsx b/example/src/components/StepperDemo.tsx
@@ -7,19 +7,12 @@ import {
 } from '@capgeminiuk/dcx-react-library';
 import './stepper.scss';
 
-const StepperDemo: React.FC = () => {
+const StepperDemo = () => {
   const [activeStepHorizontal, setActiveStepHorizontal] = useState(0);
   const [activeStepVertical, setActiveStepVertical] = useState(0);
   const [activeStepCustomSeparator, setActiveStepCustomSeparator] = useState(0);
   const [activeStepItems, setActiveStepItems] = useState(0);
 
-  const handleStepChange = (
-    setter: React.Dispatch<React.SetStateAction<number>>,
-    step: number
-  ) => {
-    setter(step);
-  };
-
   const steps = [
     {
       header: 'Campaign Settings',
@@ -285,8 +278,8 @@ const StepperDemo: React.FC = () => {
 
   const renderStepper = (
     activeStep: number,
-    setter: React.Dispatch<React.SetStateAction<number>>,
-    items: any[],
+    setActiveStep: React.Dispatch<React.SetStateAction<number>>,
+    steps: { header: string; content: React.ReactNode }[],
     orientation: 'horizontal' | 'vertical',
     customSeparator: JSX.Element | undefined = undefined
   ) => (
@@ -295,36 +288,90 @@ const StepperDemo: React.FC = () => {
       selectedStep={activeStep}
       separator={customSeparator || <hr className="separator" />}
     >
-      {items.map((item, index) => (
+      {steps.map((step, index) => (
         <Step
           key={index}
           className={`step ${activeStep === index ? 'active' : ''}`}
+          style={{ display: orientation === 'horizontal' ? 'inline-flex' : 'flex' }}
         >
-          <StepHeader className="step-header">
-            <div className="step-number" aria-label={`Step ${index + 1}`}>
-              {activeStep > index ? '✔️' : index + 1}
+          <StepHeader onClick={() => setActiveStep(index)} style={{ cursor: 'pointer', display: 'flex', alignItems: 'center' }}>
+            <div style={{
+              width: '30px',
+              height: '30px',
+              borderRadius: '50%',
+              backgroundColor: activeStep >= index ? '#1976d2' : '#D1D0CE',
+              color: 'white',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              marginRight: '10px',
+              fontSize: '14px',
+              fontWeight: 'bold'
+            }}>
+              {activeStep > index ? '✓' : index + 1}
             </div>
-            {item.header}
+            <div style={{ fontSize: '16px', fontWeight: 'bold', color: '#333' }}>{step.header}</div>
           </StepHeader>
-          <StepContent className="step-content">
-            <div>{item.content}</div>
-            <div className="button-container">
+          <StepContent>
+            <div>{step.content}</div>
+            <div className="button-container" style={{ display: 'flex', justifyContent: 'center', marginTop: '20px' }}>
               {index > 0 && (
                 <button
-                  onClick={() => handleStepChange(setter, index - 1)}
+                  onClick={() => setActiveStep(index - 1)}
                   aria-label="Previous Step"
+                  style={{
+                    padding: '10px 20px',
+                    fontSize: '14px',
+                    backgroundColor: '#1976d2',
+                    color: 'white',
+                    border: 'none',
+                    borderRadius: '4px',
+                    cursor: 'pointer',
+                    margin: '0 5px',
+                    boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
+                  }}
                 >
                   Prev
                 </button>
               )}
-              {index < items.length - 1 && (
+              {index < steps.length - 1 && (
                 <button
-                  onClick={() => handleStepChange(setter, index + 1)}
+                  onClick={() => setActiveStep(index + 1)}
                   aria-label="Next Step"
+                  style={{
+                    padding: '10px 20px',
+                    fontSize: '14px',
+                    backgroundColor: '#1976d2',
+                    color: 'white',
+                    border: 'none',
+                    borderRadius: '4px',
+                    cursor: 'pointer',
+                    margin: '0 5px',
+                    boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
+                  }}
                 >
                   Next
                 </button>
               )}
+              {index === steps.length - 1 && (
+                <button
+                  onClick={() => alert('Form Submitted')}
+                  aria-label="Submit Form"
+                  style={{
+                    padding: '10px 20px',
+                    fontSize: '14px',
+                    backgroundColor: '#28a745',
+                    color: 'white',
+                    border: 'none',
+                    borderRadius: '4px',
+                    cursor: 'pointer',
+                    margin: '0 5px',
+                    boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
+                  }}
+                >
+                  Submit
+                </button>
+              )}
             </div>
           </StepContent>
         </Step>
@@ -333,22 +380,12 @@ const StepperDemo: React.FC = () => {
   );
 
   return (
-    <div className="stepper-demo">
+    <div style={{ padding: '20px', backgroundColor: '#f9f9f9', borderRadius: '8px', boxShadow: '0 2px 10px rgba(0, 0, 0, 0.1)' }}>
       <h1>Horizontal Stepper</h1>
-      {renderStepper(
-        activeStepHorizontal,
-        setActiveStepHorizontal,
-        steps,
-        'horizontal'
-      )}
+      {renderStepper(activeStepHorizontal, setActiveStepHorizontal, steps, 'horizontal')}
 
       <h1>Vertical Stepper</h1>
-      {renderStepper(
-        activeStepVertical,
-        setActiveStepVertical,
-        steps,
-        'vertical'
-      )}
+      {renderStepper(activeStepVertical, setActiveStepVertical, steps, 'vertical')}
 
       <h1>Stepper with Custom Separator</h1>
       {renderStepper(
@@ -360,9 +397,14 @@ const StepperDemo: React.FC = () => {
       )}
 
       <h1>Order Process Stepper</h1>
-      {renderStepper(activeStepItems, setActiveStepItems, items, 'horizontal')}
+      {renderStepper(
+        activeStepItems,
+        setActiveStepItems,
+        items,
+        'horizontal'
+      )}
     </div>
   );
 };
 
-export default StepperDemo;
+export default StepperDemo;
diff --git a/example/src/components/stepper.scss b/example/src/components/stepper.scss
@@ -1,82 +1,99 @@
-.stepper-demo {
-  padding: 20px;
+.dcx-stepper {
+  width: 100%;
+  margin-bottom: 40px;
 }
 
-.dcx-horizontal-stepper {
+.dcx-horizontal-stepper .dcx-header-container {
   display: flex;
   flex-direction: row;
-  align-items: start;
+  align-items: flex-start;
   justify-content: space-between;
   flex-wrap: nowrap;
 }
 
-.dcx-vertical-stepper {
+.dcx-vertical-stepper .dcx-header-container {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
 }
 
-.step {
+.dcx-header-wrapper {
   display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  padding: 10px;
-  margin-right: 20px;
+  align-items: center;
+  margin-bottom: 10px;
 }
 
-.step-header {
+.dcx-step-header {
+  cursor: pointer;
   display: flex;
   align-items: center;
   font-weight: bold;
-  margin-bottom: 10px;
+  font-size: 16px;
+  color: #333;
 }
 
-.step-number {
-  width: 25px;
-  height: 25px;
-  color: white;
+.dcx-step-header .step-number {
+  width: 30px;
+  height: 30px;
   border-radius: 50%;
-  background-color: rgba(0, 0, 0, 0.54);
+  background-color: #d1d0ce;
+  color: white;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-right: 10px;
+  font-size: 14px;
+  font-weight: bold;
 }
 
-.step-content {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
+.dcx-step-header .step-number.active {
+  background-color: #1976d2;
 }
 
-.separator,
-.custom-separator {
-  margin: 0 10px;
-  border: 0;
-  height: 1px;
-  background: #ccc;
+.dcx-step-content {
+  display: none;
 }
 
-.button-container {
-  display: flex;
-  justify-content: space-between;
-  margin-top: 15px;
-  width: 100%;
+.dcx-step-content.dcx-visible-content {
+  display: block;
+}
+
+.dcx-content-container {
+  margin-top: 20px;
 }
 
-.button-container button {
-  padding: 8px 16px;
-  background-color: #007bff;
+.step-button {
+  padding: 10px 20px;
+  font-size: 14px;
+  background-color: #1976d2;
   color: white;
   border: none;
   border-radius: 4px;
   cursor: pointer;
+  margin: 0 5px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  transition: background-color 0.3s ease;
 }
 
-.button-container button:hover {
+.step-button:hover {
   background-color: #0056b3;
 }
 
+.step-button.submit {
+  background-color: #28a745;
+}
+
+.step-button.submit:hover {
+  background-color: #218838;
+}
+
+.custom-separator {
+  margin: 0 10px;
+  border: 0;
+  height: 1px;
+  background: #ccc;
+}
+
 .form-label {
   display: flex;
   flex-direction: column;
@@ -96,10 +113,9 @@
   margin-top: 10px;
 }
 
-.step-separator {
-  border: 0;
-  height: 1px;
-  background: #ccc;
-  margin: 20px 0;
+.custom-separator {
   width: 100%;
+  border: 0;
+  border-top: 1px solid #ccc;
+  margin: 10px 0;
 }