feat(stepper): add props to differentiate a completed step

fix(Stepper): added check icon

src/app/options/App/Onboarding/OnboardingAtoms/OnboardingSteps/OnboardingStep.tsx

@@ -1,6 +1,7 @@
 import React, { ReactNode } from 'react';
 import styled from 'styled-components';
 import { Theme } from 'app/theme';
+import Check from 'components/atoms/icons/Check';
 
 interface OnboardingStepContainer {
   active: boolean;
@@ -40,16 +41,33 @@ const OnboardingStepContainer = styled.li<OnboardingStepContainer>`
     }
   }
 `;
+
+const Step = styled.span`
+  margin-right: 10px;
+  font-size: 32px;
+`;
+
 interface OnboardingStepProps {
-  step: string;
+  step: number;
   active: boolean;
+  totalSteps: number;
   children: ReactNode;
 }
 
-const OnboardingStep = ({ step, active, children }: OnboardingStepProps) => (
-  <OnboardingStepContainer active={active}>
-    {step} - {children}
-  </OnboardingStepContainer>
-);
+const OnboardingStep = ({
+  step,
+  active,
+  children,
+  totalSteps
+}: OnboardingStepProps) => {
+  const isStepCompleted = () => !active && step < totalSteps;
+
+  return (
+    <OnboardingStepContainer active={active}>
+      <Step>{!isStepCompleted() ? <>{String(step)}</> : <Check />}</Step>
+      {children}
+    </OnboardingStepContainer>
+  );
+};
 
 export default OnboardingStep;

src/app/options/App/Onboarding/OnboardingAtoms/OnboardingSteps/OnboardingSteps.tsx

@@ -20,10 +20,10 @@ interface OnboardingStepsProps {
 
 const OnboardingSteps = ({ activeStep }: OnboardingStepsProps) => (
   <OnboardingStepsList>
-    <OnboardingStep step={String(1)} active={activeStep === 1}>
+    <OnboardingStep step={1} active={activeStep === 1} totalSteps={2}>
       Découvrir et accepter l&apos;évolution
     </OnboardingStep>
-    <OnboardingStep step={String(2)} active={activeStep === 2}>
+    <OnboardingStep step={2} active={activeStep === 2} totalSteps={2}>
       Choisir vos contributeurs
     </OnboardingStep>
   </OnboardingStepsList>

src/components/atoms/icons/Check.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+export default () => (
+  <svg width="28.417" height="27.713">
+    <path
+      fill="#2b891a"
+      d="M10.278 27.713a3.024 3.024 0 0 1-2.3-1.056L.723 18.192a3.023 3.023 0 0 1 4.591-3.935l4.743 5.533L25.051 1.715c2.32-3.25 4.749-1.45 2.418 1.814L12.738 26.447a3.024 3.024 0 0 1-2.327 1.263 2.95 2.95 0 0 1-.133.003z"
+    />
+  </svg>
+);