From 76c063dbfe9047bea9b6d3ce9b87f604bdfeb9e2 Mon Sep 17 00:00:00 2001
From: paola-p <>
Date: Tue, 5 Dec 2023 19:28:08 +0100
Subject: [PATCH] feat(components/navigation/TotalLayoutStepper): create
 stepper for the total layout component, adjust logic to dynamically show or
 hide steps according to the step form values

---
 .../src/layout/TotalLayout/TotalLayout.js     |  85 +++++++--
 .../layout/TotalLayout/TotalLayout.stories.js | 174 +++++-------------
 .../TotalLayoutBody/TotalLayoutBody.js        |  19 +-
 .../layout/TotalLayout/TotalLayoutFooter.js   |   7 +-
 .../TotalLayoutHeader/TotalLayoutHeader.js    |   4 +-
 .../TotalLayoutHeader/crossIcon.js            |  12 ++
 .../TotalLayoutStepContainer.js               |   2 +-
 .../TotalLayoutStepContainer.styles.js        |   2 +-
 .../layout/TotalLayout/mock/BasicDataForm.js  |  78 ++++++++
 .../layout/TotalLayout/mock/ContentForm.js    |  62 +++++++
 .../layout/TotalLayout/mock/OptionalForm.js   |  35 ++++
 .../TotalLayoutProgress/CurrentIcon.js        |   9 +
 .../TotalLayoutProgress.js                    |  59 ++++++
 .../TotalLayoutProgress.styles.js             |  98 ++++++++++
 .../TotalLayoutStep/TotalLayoutStep.js        |  44 +++++
 .../TotalLayoutStep/TotalLayoutStep.styles.js |  35 ++++
 .../TotalLayoutStepper.constants.js           |   4 +
 .../TotalLayoutStepper/TotalLayoutStepper.js  |  80 ++++++++
 .../TotalLayoutStepper/TotalLayoutStepper.mdx |  48 +++++
 .../TotalLayoutStepper.stories.js             |  40 ++++
 .../TotalLayoutStepper.styles.js              |   0
 .../navigation/TotalLayoutStepper/index.js    |   2 +
 packages/components/src/navigation/index.js   |   1 +
 23 files changed, 749 insertions(+), 151 deletions(-)
 create mode 100644 packages/components/src/layout/TotalLayout/TotalLayoutHeader/crossIcon.js
 create mode 100644 packages/components/src/layout/TotalLayout/mock/BasicDataForm.js
 create mode 100644 packages/components/src/layout/TotalLayout/mock/ContentForm.js
 create mode 100644 packages/components/src/layout/TotalLayout/mock/OptionalForm.js
 create mode 100644 packages/components/src/navigation/TotalLayoutStepper/TotalLayoutProgress/CurrentIcon.js
 create mode 100644 packages/components/src/navigation/TotalLayoutStepper/TotalLayoutProgress/TotalLayoutProgress.js
 create mode 100644 packages/components/src/navigation/TotalLayoutStepper/TotalLayoutProgress/TotalLayoutProgress.styles.js
 create mode 100644 packages/components/src/navigation/TotalLayoutStepper/TotalLayoutStep/TotalLayoutStep.js
 create mode 100644 packages/components/src/navigation/TotalLayoutStepper/TotalLayoutStep/TotalLayoutStep.styles.js
 create mode 100644 packages/components/src/navigation/TotalLayoutStepper/TotalLayoutStepper.constants.js
 create mode 100644 packages/components/src/navigation/TotalLayoutStepper/TotalLayoutStepper.js
 create mode 100644 packages/components/src/navigation/TotalLayoutStepper/TotalLayoutStepper.mdx
 create mode 100644 packages/components/src/navigation/TotalLayoutStepper/TotalLayoutStepper.stories.js
 create mode 100644 packages/components/src/navigation/TotalLayoutStepper/TotalLayoutStepper.styles.js
 create mode 100644 packages/components/src/navigation/TotalLayoutStepper/index.js

diff --git a/packages/components/src/layout/TotalLayout/TotalLayout.js b/packages/components/src/layout/TotalLayout/TotalLayout.js
index 5627ed7ee..dde4d9b47 100644
--- a/packages/components/src/layout/TotalLayout/TotalLayout.js
+++ b/packages/components/src/layout/TotalLayout/TotalLayout.js
@@ -9,30 +9,61 @@ import { TOTAL_LAYOUT_DEFAULT_PROPS, TOTAL_LAYOUT_PROP_TYPES } from './TotalLayo
 
 const useTotalLayout = () => {
   const [activeStep, setActiveStep] = React.useState(0);
-  return { activeStep, setActiveStep };
+  const [completedSteps, setCompletedSteps] = React.useState([]);
+  const [stepsInfo, setStepsInfo] = React.useState([]);
+  return {
+    activeStep,
+    setActiveStep,
+    completedSteps,
+    setCompletedSteps,
+    stepsInfo,
+    setStepsInfo,
+  };
 };
 
 const TotalLayout = ({
   Header,
   showStepper,
-  Steps,
-  stepsInfo,
+  initialStepsInfo,
   activeStep = 0,
   setActiveStep = () => {},
+  completedSteps = [],
+  setCompletedSteps = () => {},
   minStepNumberForDraftSave,
   onSave,
   footerActionsLabels,
   footerFinalActions,
+  stepsInfo,
+  setStepsInfo,
 }) => {
   const form = useFormContext();
   const [topScroll, setTopScroll] = React.useState(false);
   const [showFooterShadow, setShowFooterShadow] = React.useState(false);
+  const [lastValidStep, setLastValidStep] = React.useState(false);
 
-  const totalSteps = Steps.length;
   const footerLeftOffset = showStepper && 192 + 16; // Stepper plus margin (16) : margin
   const bodyRef = React.useRef();
   const { classes } = TotalLayoutStyles({ topScroll }, { name: 'TotalLayout' });
 
+  const Steps = React.useMemo(() => initialStepsInfo.map((step) => step.stepComponent), []);
+  const totalSteps = Steps.length;
+
+  // Get relevant info from initialStepsInfo when first rendering for further manipulation
+  React.useEffect(() => {
+    setStepsInfo(
+      initialStepsInfo.map(({ validationSchema, stepComponent, ...props }) => ({ ...props })),
+    );
+  }, []);
+
+  // Find the last valid step
+  React.useEffect(() => {
+    const lastValidStepIndex = stepsInfo.reduce(
+      (lastIndex, step, index) => (step.showStep ? index : lastIndex),
+      -1,
+    );
+    setLastValidStep(lastValidStepIndex);
+  }, [stepsInfo, activeStep]);
+
   // Define scroll and window resizing behavior
   const handleScroll = () => {
     const div = bodyRef.current;
@@ -48,7 +79,6 @@ const TotalLayout = ({
         setShowFooterShadow(false);
     }
   };
-
   React.useEffect(() => {
     const body = bodyRef.current;
     if (body) {
@@ -64,12 +94,40 @@ const TotalLayout = ({
   }, [bodyRef.current, handleScroll]);
 
   // Set and validate active step
+  const getNextValidStep = (index) => {
+    while (index < totalSteps) {
+      if (stepsInfo[index].showStep) {
+        return index;
+      }
+      index += 1;
+    }
+    return index - 1;
+  };
+
+  const getPreviousValidStep = (index) => {
+    while (index >= 0) {
+      if (stepsInfo[index].showStep) {
+        return index;
+      }
+      index -= 1;
+    }
+    return index;
+  };
+
   const handleNext = async () => {
-    setActiveStep(activeStep + 1);
+    setCompletedSteps((prevCompletedSteps) => [...prevCompletedSteps, activeStep]);
+    setActiveStep((prevActiveStep) => getNextValidStep(prevActiveStep + 1));
     window.scrollTo(0, 0, { behavior: 'smooth' });
   };
-  const handlePrev = () => {
-    setActiveStep(activeStep - 1);
+  const handlePrev = async () => {
+    const isValidStep = await form.trigger();
+    if (!isValidStep && completedSteps.includes(activeStep)) {
+      setCompletedSteps((prevCompletedSteps) =>
+        prevCompletedSteps.filter((step) => step !== activeStep),
+      );
+    }
+
+    setActiveStep((prevActiveStep) => getPreviousValidStep(prevActiveStep - 1));
     window.scrollTo(0, 0, { behavior: 'smooth' });
   };
   const validateAndAct = async (action, ...actionArgs) => {
@@ -79,7 +137,7 @@ const TotalLayout = ({
     }
   };
 
-  // Set final actions to pass validation before execution
+  // Set final actions to be validated before execution
   const finalActions = [];
   if (footerFinalActions?.length) {
     footerFinalActions.forEach(({ label, action }) => {
@@ -99,6 +157,8 @@ const TotalLayout = ({
             stepsInfo={stepsInfo}
             activeStep={activeStep}
             scrollRef={bodyRef}
+            completedSteps={completedSteps}
+            lastValidStep={lastValidStep}
           >
             {Steps[activeStep]}
           </Body>
@@ -106,7 +166,6 @@ const TotalLayout = ({
         <Box className={classes.footerContainer} noFlex>
           <Footer
             leftOffset={footerLeftOffset}
-            totalSteps={totalSteps}
             activeStep={activeStep}
             showFooterShadow={showFooterShadow}
             onBack={handlePrev}
@@ -115,6 +174,7 @@ const TotalLayout = ({
             footerActionsLabels={footerActionsLabels}
             minStepNumberForDraftSave={minStepNumberForDraftSave}
             onSave={() => validateAndAct(onSave)}
+            isLastStep={lastValidStep === activeStep}
           />
         </Box>
       </Stack>
@@ -132,8 +192,11 @@ DONE:
 - arreglar footer en pequeñito
 - save draft es dinámico. Pasar el stepNumberForDraftSave
 - Pasar labels dinámicamente -> para los botones de footer
-TODO:
 - Vertical Stepper! Crear un TotalLayoutStepper a partir del VerticalStepper
+TODO:
+- Steps se muestran dinámicamente en el stepper
+- onCancel para el header y Modal. Genérica, reutilizable.
+- Toast de confirmación al guardar borrador.
 - aplicar efecto a las sombras del header
 - Tidy: una carpeta para cada componente con sus constantes y estilos, etc.
 - Al final: P r o p s   d e    t o d o
diff --git a/packages/components/src/layout/TotalLayout/TotalLayout.stories.js b/packages/components/src/layout/TotalLayout/TotalLayout.stories.js
index dba7e581f..a1629fa47 100644
--- a/packages/components/src/layout/TotalLayout/TotalLayout.stories.js
+++ b/packages/components/src/layout/TotalLayout/TotalLayout.stories.js
@@ -1,17 +1,16 @@
 import React from 'react';
-import { useForm, FormProvider, useFormContext, Controller } from 'react-hook-form';
+import { useForm, FormProvider } from 'react-hook-form';
 import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Box } from '@mantine/core';
 import { PluginAssignmentsIcon } from '@bubbles-ui/icons/solid';
-import { ContextContainer } from '../ContextContainer';
 import { TotalLayout, useTotalLayout } from './TotalLayout';
 import { TotalLayoutHeader } from './TotalLayoutHeader/TotalLayoutHeader';
-import { TotalLayoutStepContainer as StepContainer } from './TotalLayoutStepContainer/TotalLayoutStepContainer';
-import { Button, DropdownButton, InputWrapper, Switch, TextInput, Textarea } from '../../form';
 import { TOTAL_LAYOUT_DEFAULT_PROPS } from './TotalLayout.constants';
-import { Stack } from '../Stack';
 import mdx from './TotalLayout.mdx';
+import BasicDataForm from './mock/BasicDataForm';
+import ContentForm from './mock/ContentForm';
+import OptionalForm from './mock/OptionalForm';
 
 export default {
   title: 'Molecules/Layout/TotalLayout',
@@ -31,133 +30,22 @@ export default {
   },
 };
 
-// Every step must use the useFormContext() hook in order to access the form state, (to show errors, i.e), and methods
-const BasicDataForm = () => {
-  const {
-    watch,
-    formState: { errors },
-  } = useFormContext();
-  const formValues = watch();
-
-  return (
-    <StepContainer stepName={'Basic Data'}>
-      <form>
-        <ContextContainer spacing={10}>
-          <ContextContainer title="Presentación" subtitle="Imagen destacada" spacing={4}>
-            <Stack direction="row" spacing={3}>
-              <Button variant={'link'} onClick={() => console.log('Showing library drawer')} noFlex>
-                Buscar en la biblioteca
-              </Button>
-              <Button variant={'link'} onClick={() => console.log('Subiendo imagen')} noFlex>
-                Subir Imagen
-              </Button>
-            </Stack>
-            <Controller
-              name="title"
-              render={({ field }) => <TextInput label={'Título'} error={errors.title} {...field} />}
-            />
-            <Controller
-              name="description"
-              render={({ field }) => <Textarea label={'Descripción'} {...field} />}
-            />
-          </ContextContainer>
-          <ContextContainer title="Programas y Asignaturas" spacing={4}>
-            <Controller
-              name="program"
-              render={({ field }) => (
-                <InputWrapper label={'Programa'}>
-                  <DropdownButton
-                    style={{ width: '30%' }}
-                    variant="outline"
-                    data={[
-                      {
-                        label: 'Program 1',
-                        onClick: () => console.log('Item 1 clicked', formValues),
-                      },
-                      {
-                        label: 'Program 2',
-                        onClick: () => console.log('Program 2 clicked', formValues),
-                      },
-                    ]}
-                    {...field}
-                  >
-                    Seleccionar Programa
-                  </DropdownButton>
-                </InputWrapper>
-              )}
-            />
-          </ContextContainer>
-          <ContextContainer title="Otros" spacing={4}>
-            <Controller
-              name="tags"
-              render={({ field }) => <TextInput label={'Etiquetas'} {...field} />}
-            />
-            <Controller
-              name="color"
-              render={({ field }) => <Textarea label={'Color'} {...field} />}
-            />
-          </ContextContainer>
-        </ContextContainer>
-      </form>
-    </StepContainer>
-  );
-};
-const ContentsForm = () => {
-  const {
-    formState: { errors },
-  } = useFormContext();
-  return (
-    <StepContainer stepName={'Contenidos'}>
-      <form>
-        <ContextContainer spacing={10}>
-          <ContextContainer title="Enunciado" subtitle="Imagen de apoyo" spacing={4}>
-            <Stack direction="row" spacing={3}>
-              <Button
-                variant={'link'}
-                onClick={() => console.log('Buscando imagen en biblioteca')}
-                noFlex
-              >
-                Buscar en la biblioteca
-              </Button>
-              <Button variant={'link'} onClick={() => console.log('Subiendo imagen')} noFlex>
-                Subir Imagen
-              </Button>
-            </Stack>
-            <Controller
-              name="instructions"
-              render={({ field }) => (
-                <Textarea label={'Texto del enunciado'} error={errors.instructions} {...field} />
-              )}
-            />
-            <Switch label="Añadir desarrollo" />
-          </ContextContainer>
-          <ContextContainer title="Entregables" spacing={4}>
-            <Controller
-              name="deliverables"
-              render={({ field }) => (
-                <Switch
-                  label="Esta tarea requiere de la entrega de algún tipo de archivo, documento o enlace"
-                  {...field}
-                />
-              )}
-            />
-          </ContextContainer>
-        </ContextContainer>
-      </form>
-    </StepContainer>
-  );
-};
-
 // The page must take care of wrapping the TotalLayout within a FormProvider
 const Template = () => {
   const totalLayoutProps = useTotalLayout();
 
-  // Prepare StepsInfo & Form
-  const stepsInfo = [
+  // React.useEffect(() => {
+  //   if (totalLayoutProps.activeStep === 0) {
+  //     totalLayoutProps.setCompletedSteps([]);
+  //   }
+  // }, [totalLayoutProps.activeStep]);
+
+  const initialStepsInfo = [
     {
       label: 'Basic Data',
       badge: null,
       status: null,
+      showStep: true, // Define if by default this step must be shown, it's expected/recommended that the fisrt step is always set to true
       validationSchema: z.object({
         title: z.string({ required_error: 'Title is required' }).min(1),
         description: z.string().optional(),
@@ -165,25 +53,54 @@ const Template = () => {
         tags: z.string().optional(),
         color: z.string().optional(),
       }),
+      // Steps can use the any form methods with the useFormContext hook (from react-hook-form)
       stepComponent: <BasicDataForm key={'basicDataForm'} />,
     },
     {
       label: 'Content',
       badge: null,
       status: null,
+      showStep: true,
       validationSchema: z.object({
         instructions: z.string({ required_error: 'Instructions are required' }).min(1),
         deliverables: z.boolean().optional(),
       }),
-      stepComponent: <ContentsForm key={'contentsForm'} />,
+      stepComponent: <ContentForm key={'contentForm'} />,
+    },
+    {
+      label: 'Optional',
+      badge: null,
+      status: null,
+      showStep: false,
+      validationSchema: z.object({
+        optionalField: z.string().min(1),
+      }),
+      stepComponent: <OptionalForm key={'optionalForm'} />,
+    },
+    {
+      label: 'tal cosa',
+      badge: null,
+      status: null,
+      showStep: true,
+      validationSchema: z.object({}),
     },
   ];
 
+  // Prepare Form
   const formMethods = useForm({
-    resolver: zodResolver(stepsInfo[totalLayoutProps.activeStep].validationSchema),
+    resolver: zodResolver(initialStepsInfo[totalLayoutProps.activeStep]?.validationSchema),
   });
   const formValues = formMethods.watch();
-  const Steps = React.useMemo(() => stepsInfo.map((step) => step.stepComponent), [formMethods]);
+
+  React.useEffect(() => {
+    if (formValues.addOptionalStep !== undefined) {
+      const current = [...totalLayoutProps.stepsInfo];
+      const updatedStepsInfo = current.map((step, i) =>
+        i === 2 ? { ...step, showStep: formValues.addOptionalStep } : step,
+      );
+      totalLayoutProps.setStepsInfo(updatedStepsInfo);
+    }
+  }, [formValues.addOptionalStep]);
 
   // Prepare Header
   const buildHeader = () => (
@@ -239,12 +156,11 @@ const Template = () => {
           {...totalLayoutProps}
           Header={() => buildHeader()}
           showStepper
-          stepsInfo={stepsInfo}
-          Steps={Steps}
           footerActionsLabels={footerActionsLabels}
           footerFinalActions={footerFinalActions}
           minStepNumberForDraftSave={1}
           onSave={handleOnSave}
+          initialStepsInfo={initialStepsInfo}
         />
       </Box>
     </FormProvider>
diff --git a/packages/components/src/layout/TotalLayout/TotalLayoutBody/TotalLayoutBody.js b/packages/components/src/layout/TotalLayout/TotalLayoutBody/TotalLayoutBody.js
index f9d210ff7..1b0aa6b75 100644
--- a/packages/components/src/layout/TotalLayout/TotalLayoutBody/TotalLayoutBody.js
+++ b/packages/components/src/layout/TotalLayout/TotalLayoutBody/TotalLayoutBody.js
@@ -5,9 +5,17 @@ import {
   TOTAL_LAYOUT_BODY_PROP_TYPES,
   TOTAL_LAYOUT_BODY_DEFAULT_PROPS,
 } from './TotalLayoutBody.constants';
-import { VerticalStepper } from '../../../navigation';
+import { TotalLayoutStepper as Stepper } from '../../../navigation';
 
-const TotalLayoutBody = ({ showStepper, children, stepsInfo, activeStep, scrollRef }) => (
+const TotalLayoutBody = ({
+  showStepper,
+  children,
+  stepsInfo,
+  activeStep,
+  completedSteps,
+  scrollRef,
+  lastValidStep,
+}) => (
   <Stack
     ref={scrollRef}
     justifyContent="center"
@@ -28,7 +36,12 @@ const TotalLayoutBody = ({ showStepper, children, stepsInfo, activeStep, scrollR
           marginRight: 16,
         }}
       >
-        <VerticalStepper data={stepsInfo} currentStep={activeStep} />
+        <Stepper
+          data={stepsInfo}
+          activeStep={activeStep}
+          completedSteps={completedSteps}
+          lastValidStep={lastValidStep}
+        />
       </Box>
     )}
     <Box style={{ width: 928 }}>{children}</Box>
diff --git a/packages/components/src/layout/TotalLayout/TotalLayoutFooter.js b/packages/components/src/layout/TotalLayout/TotalLayoutFooter.js
index 09a3ac14d..a54411d81 100644
--- a/packages/components/src/layout/TotalLayout/TotalLayoutFooter.js
+++ b/packages/components/src/layout/TotalLayout/TotalLayoutFooter.js
@@ -8,7 +8,6 @@ import { TOTAL_LAYOUT_FOOTER_PROP_TYPES } from './TotalLayout.constants';
 
 const TotalLayoutFooter = ({
   leftOffset,
-  totalSteps,
   activeStep,
   showFooterShadow,
   onBack,
@@ -17,16 +16,16 @@ const TotalLayoutFooter = ({
   footerActionsLabels,
   minStepNumberForDraftSave,
   onSave,
+  isLastStep,
 }) => {
   const { classes } = TotalLayoutFooterStyles(
     { showFooterShadow, leftOffset },
-    { name: 'TotalLayoutFooter' }
+    { name: 'TotalLayoutFooter' },
   );
 
   const renderFinalActions = () => {
     // It's not the final step
-    if (activeStep < totalSteps - 1)
-      return <Button onClick={onNext}>{footerActionsLabels.next}</Button>;
+    if (!isLastStep) return <Button onClick={onNext}>{footerActionsLabels.next}</Button>;
 
     // It's the final step and there's more than one final action
     if (finalActions?.length > 1) {
diff --git a/packages/components/src/layout/TotalLayout/TotalLayoutHeader/TotalLayoutHeader.js b/packages/components/src/layout/TotalLayout/TotalLayoutHeader/TotalLayoutHeader.js
index c34ceaf8e..5b8a54deb 100644
--- a/packages/components/src/layout/TotalLayout/TotalLayoutHeader/TotalLayoutHeader.js
+++ b/packages/components/src/layout/TotalLayout/TotalLayoutHeader/TotalLayoutHeader.js
@@ -1,5 +1,4 @@
 import { useFormContext } from 'react-hook-form';
-import { StarIcon } from '@bubbles-ui/icons/solid';
 import { Stack } from '../../Stack';
 import { Text } from '../../../typography';
 import { Button } from '../../../form';
@@ -9,6 +8,7 @@ import {
   TOTAL_LAYOUT_HEADER_DEFAULT_PROPS,
 } from './TotalLayoutHeader.constants';
 import { TotalLayoutHeaderStyles } from './TotalLayoutHeader.styles';
+import CrossIcon from './crossIcon';
 
 const TotalLayoutHeader = ({ title, icon, formTitlePlaceholder, children, compact = false }) => {
   const { watch } = useFormContext();
@@ -46,7 +46,7 @@ const TotalLayoutHeader = ({ title, icon, formTitlePlaceholder, children, compac
         </Stack>
         {/* CANCEL BUTTON */}
         <Stack alingItems="center">
-          <Button variant="link" type="button" leftIcon={<StarIcon />}>
+          <Button variant="link" type="button" leftIcon={<CrossIcon />}>
             Cancelar
           </Button>
         </Stack>
diff --git a/packages/components/src/layout/TotalLayout/TotalLayoutHeader/crossIcon.js b/packages/components/src/layout/TotalLayout/TotalLayoutHeader/crossIcon.js
new file mode 100644
index 000000000..756b0f6a7
--- /dev/null
+++ b/packages/components/src/layout/TotalLayout/TotalLayoutHeader/crossIcon.js
@@ -0,0 +1,12 @@
+const CrossIcon = () => (
+  <svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M6.85231 7.80307C7.11486 8.06563 7.54053 8.06563 7.80308 7.80309C8.06563 7.54054 8.06563 7.11485 7.80308 6.8523L4.95077 4.00001L7.8031 1.14768C8.06563 0.885124 8.06563 0.459462 7.8031 0.196908C7.54055 -0.0656256 7.11486 -0.0656462 6.85233 0.196908L4 3.04924L1.14769 0.196908C0.885132 -0.0656256 0.459449 -0.0656256 0.196915 0.196908C-0.0656385 0.459462 -0.0656385 0.885124 0.196915 1.14768L3.04923 4.00001L0.196915 6.8523C-0.065618 7.11485 -0.065618 7.54052 0.196915 7.80307C0.459469 8.06563 0.885153 8.06563 1.14769 7.80307L4 4.95078L6.85231 7.80307Z"
+      fill="#0C1F22"
+    />
+  </svg>
+);
+
+export default CrossIcon;
diff --git a/packages/components/src/layout/TotalLayout/TotalLayoutStepContainer/TotalLayoutStepContainer.js b/packages/components/src/layout/TotalLayout/TotalLayoutStepContainer/TotalLayoutStepContainer.js
index 85c35c114..7239af793 100644
--- a/packages/components/src/layout/TotalLayout/TotalLayoutStepContainer/TotalLayoutStepContainer.js
+++ b/packages/components/src/layout/TotalLayout/TotalLayoutStepContainer/TotalLayoutStepContainer.js
@@ -16,7 +16,7 @@ const TotalLayoutStepContainer = ({ stepName, children }) => {
           {stepName}
         </Text>
       )}
-      <Stack className={classes.formContainer} fullWidth>
+      <Stack className={classes.formContainer} fullWidth fullHeight>
         {children}
       </Stack>
     </Stack>
diff --git a/packages/components/src/layout/TotalLayout/TotalLayoutStepContainer/TotalLayoutStepContainer.styles.js b/packages/components/src/layout/TotalLayout/TotalLayoutStepContainer/TotalLayoutStepContainer.styles.js
index ecb08eabc..bc30dc88d 100644
--- a/packages/components/src/layout/TotalLayout/TotalLayoutStepContainer/TotalLayoutStepContainer.styles.js
+++ b/packages/components/src/layout/TotalLayout/TotalLayoutStepContainer/TotalLayoutStepContainer.styles.js
@@ -4,8 +4,8 @@ const TotalLayoutStepContainerStyles = createStyles((theme) => ({
   root: {},
   stepContainer: {
     padding: '24px 0 0 0 ',
-    height: '100%',
     width: '928px',
+    height: '100vh',
   },
   formContainer: { backgroundColor: 'white', padding: '24px' },
   stepName: {
diff --git a/packages/components/src/layout/TotalLayout/mock/BasicDataForm.js b/packages/components/src/layout/TotalLayout/mock/BasicDataForm.js
new file mode 100644
index 000000000..693a3954f
--- /dev/null
+++ b/packages/components/src/layout/TotalLayout/mock/BasicDataForm.js
@@ -0,0 +1,78 @@
+import { Controller, useFormContext } from 'react-hook-form';
+import { Button, DropdownButton, InputWrapper, TextInput, Textarea } from '../../../form';
+import { ContextContainer } from '../../ContextContainer';
+import { Stack } from '../../Stack';
+import { TotalLayoutStepContainer } from '../TotalLayoutStepContainer/TotalLayoutStepContainer';
+
+const BasicDataForm = () => {
+  const {
+    watch,
+    formState: { errors },
+  } = useFormContext();
+  const formValues = watch();
+
+  return (
+    <TotalLayoutStepContainer stepName={'Basic Data'}>
+      <form>
+        <ContextContainer spacing={10}>
+          <ContextContainer title="Presentación" subtitle="Imagen destacada" spacing={4}>
+            <Stack direction="row" spacing={3}>
+              <Button variant={'link'} onClick={() => console.log('Showing library drawer')} noFlex>
+                Buscar en la biblioteca
+              </Button>
+              <Button variant={'link'} onClick={() => console.log('Subiendo imagen')} noFlex>
+                Subir Imagen
+              </Button>
+            </Stack>
+            <Controller
+              name="title"
+              render={({ field }) => <TextInput label={'Título'} error={errors.title} {...field} />}
+            />
+            <Controller
+              name="description"
+              render={({ field }) => <Textarea label={'Descripción'} {...field} />}
+            />
+          </ContextContainer>
+          <ContextContainer title="Programas y Asignaturas" spacing={4}>
+            <Controller
+              name="program"
+              render={({ field }) => (
+                <InputWrapper label={'Programa'}>
+                  <DropdownButton
+                    style={{ width: '30%' }}
+                    variant="outline"
+                    data={[
+                      {
+                        label: 'Program 1',
+                        onClick: () => console.log('Item 1 clicked', formValues),
+                      },
+                      {
+                        label: 'Program 2',
+                        onClick: () => console.log('Program 2 clicked', formValues),
+                      },
+                    ]}
+                    {...field}
+                  >
+                    Seleccionar Programa
+                  </DropdownButton>
+                </InputWrapper>
+              )}
+            />
+          </ContextContainer>
+          <ContextContainer title="Otros" spacing={4}>
+            <Controller
+              name="tags"
+              render={({ field }) => <TextInput label={'Etiquetas'} {...field} />}
+            />
+            <Controller
+              name="color"
+              render={({ field }) => <Textarea label={'Color'} {...field} />}
+            />
+          </ContextContainer>
+        </ContextContainer>
+      </form>
+    </TotalLayoutStepContainer>
+  );
+};
+
+export default BasicDataForm;
diff --git a/packages/components/src/layout/TotalLayout/mock/ContentForm.js b/packages/components/src/layout/TotalLayout/mock/ContentForm.js
new file mode 100644
index 000000000..14391fd7b
--- /dev/null
+++ b/packages/components/src/layout/TotalLayout/mock/ContentForm.js
@@ -0,0 +1,62 @@
+import { Controller, useFormContext } from 'react-hook-form';
+import { Button, Switch, Textarea } from '../../../form';
+import { ContextContainer } from '../../ContextContainer';
+import { Stack } from '../../Stack';
+import { TotalLayoutStepContainer } from '../TotalLayoutStepContainer/TotalLayoutStepContainer';
+
+const ContentForm = () => {
+  const {
+    watch,
+    formState: { errors },
+  } = useFormContext();
+
+  const form = watch();
+  return (
+    <TotalLayoutStepContainer stepName={'Contenidos'}>
+      <form>
+        <ContextContainer spacing={10}>
+          <ContextContainer title="Enunciado" subtitle="Imagen de apoyo" spacing={4}>
+            <Stack direction="row" spacing={3}>
+              <Button
+                variant={'link'}
+                onClick={() => console.log('Buscando imagen en biblioteca')}
+                noFlex
+              >
+                Buscar en la biblioteca
+              </Button>
+              <Button variant={'link'} onClick={() => console.log('Subiendo imagen')} noFlex>
+                Subir Imagen
+              </Button>
+            </Stack>
+            <Controller
+              name="instructions"
+              render={({ field }) => (
+                <Textarea label={'Texto del enunciado'} error={errors.instructions} {...field} />
+              )}
+            />
+            <Controller
+              name="addOptionalStep"
+              render={({ field }) => (
+                <Switch label="Añadir paso opcional" checked={form.addOptionalStep} {...field} />
+              )}
+            />
+          </ContextContainer>
+          <ContextContainer title="Entregables" spacing={4}>
+            <Controller
+              name="deliverables"
+              render={({ field }) => (
+                <Switch
+                  label="Esta tarea requiere de la entrega de algún tipo de archivo, documento o enlace"
+                  checked={form.deliverables}
+                  {...field}
+                />
+              )}
+            />
+          </ContextContainer>
+        </ContextContainer>
+      </form>
+    </TotalLayoutStepContainer>
+  );
+};
+
+export default ContentForm;
diff --git a/packages/components/src/layout/TotalLayout/mock/OptionalForm.js b/packages/components/src/layout/TotalLayout/mock/OptionalForm.js
new file mode 100644
index 000000000..2fb35cc2b
--- /dev/null
+++ b/packages/components/src/layout/TotalLayout/mock/OptionalForm.js
@@ -0,0 +1,35 @@
+import { Controller, useFormContext } from 'react-hook-form';
+import { ContextContainer } from '../../ContextContainer';
+import { TotalLayoutStepContainer } from '../TotalLayoutStepContainer/TotalLayoutStepContainer';
+import { TextInput } from '../../../form';
+
+const OptionalForm = () => {
+  const {
+    watch,
+    formState: { errors },
+  } = useFormContext();
+  const formValues = watch();
+
+  return (
+    <TotalLayoutStepContainer stepName={'Optional Form'}>
+      <form>
+        <ContextContainer spacing={10}>
+          <ContextContainer title="Forma Opcional" spacing={4}>
+            <Controller
+              name="optionalField"
+              render={({ field }) => (
+                <TextInput
+                  label={'Información adicional'}
+                  error={errors.optionalField}
+                  {...field}
+                />
+              )}
+            />
+          </ContextContainer>
+        </ContextContainer>
+      </form>
+    </TotalLayoutStepContainer>
+  );
+};
+
+export default OptionalForm;
diff --git a/packages/components/src/navigation/TotalLayoutStepper/TotalLayoutProgress/CurrentIcon.js b/packages/components/src/navigation/TotalLayoutStepper/TotalLayoutProgress/CurrentIcon.js
new file mode 100644
index 000000000..19bcebf7f
--- /dev/null
+++ b/packages/components/src/navigation/TotalLayoutStepper/TotalLayoutProgress/CurrentIcon.js
@@ -0,0 +1,9 @@
+import React from 'react';
+
+const StepperCurrentIcon = () => (
+  <svg width="6" height="6" viewBox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="3" cy="3" r="3" fill="#0C1F22" />
+  </svg>
+);
+
+export default StepperCurrentIcon;
diff --git a/packages/components/src/navigation/TotalLayoutStepper/TotalLayoutProgress/TotalLayoutProgress.js b/packages/components/src/navigation/TotalLayoutStepper/TotalLayoutProgress/TotalLayoutProgress.js
new file mode 100644
index 000000000..755f6f679
--- /dev/null
+++ b/packages/components/src/navigation/TotalLayoutStepper/TotalLayoutProgress/TotalLayoutProgress.js
@@ -0,0 +1,59 @@
+import React from 'react';
+import { CheckIcon, RemoveBoldIcon } from '@bubbles-ui/icons/solid';
+import { Box } from '../../../layout/Box';
+import { TotalLayoutProgressStyles } from './TotalLayoutProgress.styles';
+import StepperCurrentIcon from './CurrentIcon';
+
+const TotalLayoutProgress = ({ state, position, isCurrent, isCompleted }) => {
+  const { classes } = TotalLayoutProgressStyles(
+    { position, isCurrent, isCompleted, state },
+    { name: 'Progress' },
+  );
+
+  const renderProgressIcon = () => {
+    switch (state) {
+      case 'incomplete':
+        return (
+          <Box className={classes.progressContainer}>
+            <Box className={classes.incompleteBar} />
+            <Box className={classes.incompleteIcon} />
+          </Box>
+        );
+      case 'completed':
+        return (
+          <Box className={classes.progressContainer}>
+            <Box className={classes.filledBar} />
+            <CheckIcon height={16} width={16} className={classes.completedIcon} />
+          </Box>
+        );
+      case 'KO':
+        return (
+          <Box className={classes.progressContainer}>
+            <Box className={classes.filledBar} />
+            <RemoveBoldIcon height={16} width={16} className={classes.KOIcon} />
+          </Box>
+        );
+      default:
+        break;
+    }
+    return null;
+  };
+
+  return (
+    <Box className={classes.root}>
+      {isCurrent ? (
+        <Box className={classes.progressContainer}>
+          <Box className={classes.currentBarUp} />
+          <Box height={16} width={16} className={classes.currentIconContainer}>
+            <StepperCurrentIcon className={classes.currentIcon} />
+          </Box>
+          <Box className={classes.currentBarDown} />
+        </Box>
+      ) : (
+        renderProgressIcon()
+      )}
+    </Box>
+  );
+};
+
+export default TotalLayoutProgress;
diff --git a/packages/components/src/navigation/TotalLayoutStepper/TotalLayoutProgress/TotalLayoutProgress.styles.js b/packages/components/src/navigation/TotalLayoutStepper/TotalLayoutProgress/TotalLayoutProgress.styles.js
new file mode 100644
index 000000000..9081a04eb
--- /dev/null
+++ b/packages/components/src/navigation/TotalLayoutStepper/TotalLayoutProgress/TotalLayoutProgress.styles.js
@@ -0,0 +1,98 @@
+import { createStyles } from '@mantine/styles';
+
+const TotalLayoutProgressStyles = createStyles(
+  (theme, { position, isCurrent, isCompleted, state }) => {
+    const isFirst = position === 'start';
+    const isLast = position === 'end';
+
+    return {
+      root: { minHeight: 50, minWidth: 24 },
+      progressContainer: {
+        height: 50,
+        width: 24,
+        marginRight: 8,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        position: 'relative',
+      },
+      filledBar: {
+        position: 'absolute',
+        height: isLast ? 25 : 50,
+        width: 1,
+        backgroundColor: theme.other.stepper?.background?.color?.completed,
+        top: isFirst ? 25 : 0,
+      },
+      incompleteBar: {
+        position: 'absolute',
+        top: isFirst ? 25 : 0,
+        height: isLast ? 25 : 50,
+        width: 1,
+        backgroundColor: theme.other.stepper?.background?.color?.default,
+      },
+      currentBarUp: {
+        position: 'absolute',
+        top: isFirst ? 25 : 0,
+        height: 25,
+        width: 1,
+        zIndex: 0,
+        backgroundColor: theme.other.stepper?.background?.color?.completed,
+        transition: 'height 0.2s ease-in-out',
+      },
+      currentBarDown: {
+        display: isLast && 'none',
+        position: 'absolute',
+        top: 25,
+        height: 25,
+        width: 1,
+        zIndex: 0,
+        backgroundColor: isCompleted
+          ? theme.other.stepper?.background?.color?.completed
+          : theme.other.stepper?.background?.color?.default,
+        transition: 'height 0.2s ease-in-out',
+      },
+      currentIconContainer: {
+        width: 16,
+        height: 16,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        zIndex: 1,
+        borderRadius: '50%',
+        border: `2px solid ${theme.other.stepper?.background?.color?.completed}`,
+        color: theme.other.stepper?.color?.icon || '#0C1F22',
+        backgroundColor: theme.stepper?.background?.color?.['active--reverse'] || '#F1FFBD',
+      },
+      currentIcon: {
+        zIndex: 2,
+        color: theme.other.stepper?.color?.icon || '#0C1F22',
+      },
+      completedIcon: {
+        backgroundColor: theme.other.stepper?.background?.color?.completed,
+        borderRadius: '50%',
+        zIndex: 1,
+        color: theme.other.stepper?.color?.icon || '#0C1F22',
+        padding: 4,
+      },
+      incompleteIcon: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        zIndex: 1,
+        width: 16,
+        height: 16,
+        borderRadius: '50%',
+        backgroundColor: theme.other.stepper?.background?.color?.default,
+      },
+      KOIcon: {
+        backgroundColor: theme.colors.fatic01,
+        borderRadius: '50%',
+        zIndex: 1,
+        color: theme.colors.mainWhite,
+        padding: 4,
+      },
+    };
+  },
+);
+
+export { TotalLayoutProgressStyles };
diff --git a/packages/components/src/navigation/TotalLayoutStepper/TotalLayoutStep/TotalLayoutStep.js b/packages/components/src/navigation/TotalLayoutStepper/TotalLayoutStep/TotalLayoutStep.js
new file mode 100644
index 000000000..dcff57433
--- /dev/null
+++ b/packages/components/src/navigation/TotalLayoutStepper/TotalLayoutStep/TotalLayoutStep.js
@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { Badge } from '../../../informative';
+import { Stack } from '../../../layout/Stack';
+import { Text } from '../../../typography';
+import TotalLayoutProgress from '../TotalLayoutProgress/TotalLayoutProgress';
+import { TotalLayoutStepStyles } from './TotalLayoutStep.styles';
+
+const TotalLayoutStep = ({ state, label, badge, isActive, position }) => {
+  const isCompleted = state === 'completed' || state === 'KO';
+  const { classes } = TotalLayoutStepStyles(
+    {
+      isActive,
+      isCompleted,
+    },
+    { name: 'Step' },
+  );
+
+  return (
+    <Stack style={{ height: 50 }}>
+      <TotalLayoutProgress
+        style={{ width: 24 }}
+        state={state}
+        position={position}
+        isCurrent={isActive}
+        isCompleted={isCompleted}
+      />
+      <Stack className={classes.labelContainer} alignItems="center">
+        <Text className={classes.label}>{label}</Text>
+        {badge && (
+          <Badge
+            className={classes.badge}
+            label={badge}
+            severity={'success'}
+            radius={'default'}
+            closable={false}
+            size={'xs'}
+          />
+        )}
+      </Stack>
+    </Stack>
+  );
+};
+
+export default TotalLayoutStep;
diff --git a/packages/components/src/navigation/TotalLayoutStepper/TotalLayoutStep/TotalLayoutStep.styles.js b/packages/components/src/navigation/TotalLayoutStepper/TotalLayoutStep/TotalLayoutStep.styles.js
new file mode 100644
index 000000000..fa9c5d413
--- /dev/null
+++ b/packages/components/src/navigation/TotalLayoutStepper/TotalLayoutStep/TotalLayoutStep.styles.js
@@ -0,0 +1,35 @@
+import { createStyles } from '@mantine/styles';
+
+const TotalLayoutStepStyles = createStyles((theme, { isActive, isCompleted }) => {
+  const getLabelStyle = () => {
+    if (isActive)
+      return {
+        ...theme.other.stepper.content.typo,
+        color: 'black',
+      };
+    if (isCompleted && !isActive)
+      return {
+        ...theme.other.stepper.content.typo,
+        color: '#0C1F22',
+        fontWeight: 400,
+      };
+    return {
+      ...theme.other.stepper.content['typo-pending'],
+      color: theme.other.stepper.content.color.default.value,
+    };
+  };
+
+  return {
+    root: {},
+    labelContainer: {
+      minHeight: 50,
+      maxWidth: 156,
+    },
+    label: getLabelStyle(),
+    badge: {
+      marginLeft: '12px',
+    },
+  };
+});
+
+export { TotalLayoutStepStyles };
diff --git a/packages/components/src/navigation/TotalLayoutStepper/TotalLayoutStepper.constants.js b/packages/components/src/navigation/TotalLayoutStepper/TotalLayoutStepper.constants.js
new file mode 100644
index 000000000..effb7b5cd
--- /dev/null
+++ b/packages/components/src/navigation/TotalLayoutStepper/TotalLayoutStepper.constants.js
@@ -0,0 +1,4 @@
+import PropTypes from 'prop-types';
+
+export const TOTAL_LAYOUT_STEPPER_PROP_TYPES = {};
+export const TOTAL_LAYOUT_STEPPER_DEFAULT_PROPS = {};
diff --git a/packages/components/src/navigation/TotalLayoutStepper/TotalLayoutStepper.js b/packages/components/src/navigation/TotalLayoutStepper/TotalLayoutStepper.js
new file mode 100644
index 000000000..49978ee05
--- /dev/null
+++ b/packages/components/src/navigation/TotalLayoutStepper/TotalLayoutStepper.js
@@ -0,0 +1,80 @@
+import React from 'react';
+import {
+  TOTAL_LAYOUT_STEPPER_DEFAULT_PROPS,
+  TOTAL_LAYOUT_STEPPER_PROP_TYPES,
+} from './TotalLayoutStepper.constants';
+import TotalLayoutStep from './TotalLayoutStep/TotalLayoutStep';
+import { Stack } from '../../layout/Stack';
+
+const TotalLayoutStepper = ({
+  data = [],
+  activeStep,
+  completedSteps: completedStepsProp,
+  lastValidStep,
+}) => {
+  const [completedSteps, setCompletedSteps] = React.useState(completedStepsProp || []);
+  const isMounted = React.useRef(false);
+
+  const getStepState = (step, index) => {
+    if (completedSteps.includes(index)) {
+      return step.status || 'completed';
+    }
+    if (index === activeStep) return 'current';
+    return 'incomplete';
+  };
+
+  const getStepPosition = (index) => {
+    if (index === 0) return 'start';
+    if (index === data.length - 1) return 'end';
+    if (index === lastValidStep) return 'end';
+    return 'middle';
+  };
+
+  const renderSteps = () => {
+    const stepsToShow = [];
+    data.forEach((step, index) => {
+      const stepProps = {
+        label: step.label,
+        state: getStepState(step, index),
+        badge: step.badge,
+        isActive: index === activeStep,
+      };
+
+      if (step.showStep)
+        stepsToShow.push(
+          <React.Fragment key={`step-${step.label}`}>
+            <TotalLayoutStep {...stepProps} position={getStepPosition(index)} />
+          </React.Fragment>,
+        );
+    });
+    return stepsToShow;
+  };
+
+  // Effects ----------------------------------------------------------
+  React.useEffect(() => {
+    isMounted.current = true;
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
+
+  // Completed steps
+  React.useEffect(() => {
+    if (!isMounted) return;
+    setCompletedSteps([...new Set(completedStepsProp)]);
+  }, [completedStepsProp]);
+
+  return (
+    <Stack
+      style={{ width: 192, height: '100vh', background: '#f8f9fb', paddingTop: 24 }}
+      direction="column"
+    >
+      {renderSteps()}
+    </Stack>
+  );
+};
+
+TotalLayoutStepper.defaultProps = TOTAL_LAYOUT_STEPPER_DEFAULT_PROPS;
+TotalLayoutStepper.propTypes = TOTAL_LAYOUT_STEPPER_PROP_TYPES;
+
+export { TotalLayoutStepper };
diff --git a/packages/components/src/navigation/TotalLayoutStepper/TotalLayoutStepper.mdx b/packages/components/src/navigation/TotalLayoutStepper/TotalLayoutStepper.mdx
new file mode 100644
index 000000000..cb03ed5bc
--- /dev/null
+++ b/packages/components/src/navigation/TotalLayoutStepper/TotalLayoutStepper.mdx
@@ -0,0 +1,48 @@
+import { Story, Props, Source, Preview } from '@storybook/addon-docs';
+import { Box } from '@mantine/core';
+import * as stories from './TotalLayoutStepper.stories.js';
+import { TotalLayoutStepper } from './TotalLayoutStepper.js';
+import { ThemeProvider } from './../../ThemeProvider';
+
+# **name**
+
+[Source code](<https://github.com/leemonade/bubbles/tree/main/packages/components/layout/TotalLayout>)
+
+## Table of Contents
+
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+
+- [Overview](#overview)
+- [Component API](#component-api)
+- [References](#references)
+- [Feedback](#feedback)
+
+## Overview
+
+**name** is ...
+
+<ThemeProvider>
+  <TotalLayout>Total layout</TotalLayout>
+</ThemeProvider>
+
+## Component API
+
+<Preview>
+  <Story id="molecules-layout-total-layout-total-layout-header--playground" />
+</Preview>
+
+<Props of={TotalLayout} />
+
+## References
+
+[MDN: ARIA **name**(sentenceCase) role](<https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/total-layout_role>)
+
+[W3: Role attribute](https://www.w3.org/WAI/PF/HTML/wiki/RoleAttribute)
+
+[W3: ARIA **name**(sentenceCase) role example](<https://www.w3.org/TR/2016/WD-wai-aria-practices-1.1-20160317/examples/total-layout/total-layout.html>)
+
+## Feedback
+
+Help us improve this component by providing feedback, asking questions on Slack, or updating this file on
+[GitHub](<https://github.com/leemonade/bubbles/edit/main/packages/components/layout/TotalLayout.mdx>)
diff --git a/packages/components/src/navigation/TotalLayoutStepper/TotalLayoutStepper.stories.js b/packages/components/src/navigation/TotalLayoutStepper/TotalLayoutStepper.stories.js
new file mode 100644
index 000000000..441d04e50
--- /dev/null
+++ b/packages/components/src/navigation/TotalLayoutStepper/TotalLayoutStepper.stories.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import { TotalLayoutStepper } from './TotalLayoutStepper';
+import { TOTAL_LAYOUT_STEPPER_DEFAULT_PROPS } from './TotalLayoutStepper.constants';
+import mdx from './TotalLayoutStepper.mdx';
+
+export default {
+  title: 'Molecules/Layout/TotalLayout/TotalLayoutStepper',
+  parameters: {
+    component: TotalLayoutStepper,
+    docs: {
+      page: mdx,
+    },
+    design: {
+      type: 'figma',
+      // url: 'https://www.figma.com/file/kcSXz3QZFByFDTumNgzPpV/?node-id=2962%3A31342',
+    },
+  },
+  argTypes: {},
+};
+
+const mockData = [
+  { label: 'Basic Data Step', badge: null, status: 'completed' },
+  { label: 'Content Step', badge: null, status: 'completed' },
+  { label: 'Other Step', badge: null, status: null },
+  { label: 'This is a very, very, very long name. Is not it?', badge: null, status: null },
+];
+
+const Template = (props) => <TotalLayoutStepper {...props} />;
+
+export const Playground = Template.bind({});
+
+Playground.args = {
+  // myBooleanProp: false,
+  // mySelectProp: 'Hello'
+  ...TOTAL_LAYOUT_STEPPER_DEFAULT_PROPS,
+  autoCompleteOnNext: true,
+  data: mockData,
+  currentStep: 2,
+  completedSteps: [0, 1],
+};
diff --git a/packages/components/src/navigation/TotalLayoutStepper/TotalLayoutStepper.styles.js b/packages/components/src/navigation/TotalLayoutStepper/TotalLayoutStepper.styles.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/components/src/navigation/TotalLayoutStepper/index.js b/packages/components/src/navigation/TotalLayoutStepper/index.js
new file mode 100644
index 000000000..1e9d5724a
--- /dev/null
+++ b/packages/components/src/navigation/TotalLayoutStepper/index.js
@@ -0,0 +1,2 @@
+export * from './TotalLayoutStepper';
+export * from './TotalLayoutStepper.constants';
diff --git a/packages/components/src/navigation/index.js b/packages/components/src/navigation/index.js
index c20fd7678..c3304ad43 100644
--- a/packages/components/src/navigation/index.js
+++ b/packages/components/src/navigation/index.js
@@ -1,4 +1,5 @@
 export * from './HorizontalStepper';
+export * from './TotalLayoutStepper';
 export * from './VerticalStepper';
 export * from './Breadcrumbs';
 export * from './Spotlight';