From 98a52fb0ca4b3ff27c2d92b81a7610191c0753fe Mon Sep 17 00:00:00 2001
From: andresin87 <andresin87@gmail.com>
Date: Fri, 27 Sep 2024 16:38:54 +0200
Subject: [PATCH] fix(components/molecule/stepper): stepper label style
 aligment

---
 .../demo/articles/ArticleDesignAlignment.js      | 16 ++++++++++++++--
 .../molecule/stepper/src/Stepper/Stepper.js      |  5 +++++
 .../molecule/stepper/src/styles/index.scss       |  1 +
 3 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/components/molecule/stepper/demo/articles/ArticleDesignAlignment.js b/components/molecule/stepper/demo/articles/ArticleDesignAlignment.js
index c25daad95..d97c0a88e 100644
--- a/components/molecule/stepper/demo/articles/ArticleDesignAlignment.js
+++ b/components/molecule/stepper/demo/articles/ArticleDesignAlignment.js
@@ -22,7 +22,7 @@ import MoleculeStepper, {moleculeStepperAlignment, moleculeStepperDesign} from '
 import LoremIpsum from '../LoremIpsum.js'
 
 const steps = 5
-const step = Math.ceil(steps / 2)
+const initialStep = Math.ceil(steps / 2)
 const labels = Array(steps)
   .fill()
   .map((v, index) => <LoremIpsum units="words" count={2} format="plain" />)
@@ -30,6 +30,9 @@ const labels = Array(steps)
 const ArticleDesignAlignment = ({className}) => {
   const [design, setDesign] = useState()
   const [alignment, setAlignment] = useState()
+  const [step, setStep] = useState(initialStep)
+  const onChange = (_, {step}) => setStep(step)
+
   return (
     <Article className={className}>
       <H2>Design and Alignment</H2>
@@ -87,6 +90,7 @@ const ArticleDesignAlignment = ({className}) => {
                           labels={labels}
                           design={moleculeStepperDesignValue}
                           alignment={moleculeStepperAlignmentValue}
+                          onChange={onChange}
                         />
                       </Cell>
                     ))}
@@ -109,6 +113,7 @@ const ArticleDesignAlignment = ({className}) => {
                             labels={labels}
                             design={moleculeStepperDesignValue}
                             alignment={moleculeStepperAlignmentValue}
+                            onChange={onChange}
                           />
                         </Cell>
                       </Fragment>
@@ -162,7 +167,14 @@ const ArticleDesignAlignment = ({className}) => {
             alignContent: 'center'
           }}
         >
-          <MoleculeStepper steps={steps} step={step} labels={labels} design={design} alignment={alignment} />
+          <MoleculeStepper
+            steps={steps}
+            step={step}
+            labels={labels}
+            design={design}
+            alignment={alignment}
+            onChange={onChange}
+          />
         </Cell>
       </Grid>
     </Article>
diff --git a/components/molecule/stepper/src/Stepper/Stepper.js b/components/molecule/stepper/src/Stepper/Stepper.js
index acd0aa78d..67be95053 100644
--- a/components/molecule/stepper/src/Stepper/Stepper.js
+++ b/components/molecule/stepper/src/Stepper/Stepper.js
@@ -39,6 +39,11 @@ const Stepper = ({children, steps: stepsNumber, step: currentStep, showLabel, la
         visited={index + 1 < currentStep}
         current={currentStep === index + 1}
         label={labels[index]}
+        {...{
+          ...(onChange && {
+            onClick: (event, {step}) => onChange(event, {step})
+          })
+        }}
       />
     ))
 }
diff --git a/components/molecule/stepper/src/styles/index.scss b/components/molecule/stepper/src/styles/index.scss
index 04b361494..fef251043 100644
--- a/components/molecule/stepper/src/styles/index.scss
+++ b/components/molecule/stepper/src/styles/index.scss
@@ -36,6 +36,7 @@ $base-class: '.sui-MoleculeStepper';
           row-gap: $sz-base;
         }
         &-horizontal {
+          align-items: flex-end;
           position: relative;
           gap: $sz-base;
         }