feat(TotalLayout): StepContainer with Fullwidth

fix(VerticalStepper): Current state instead of Completed when item is active
leemonade · Jan 15, 2024 · b27a3ea · b27a3ea
1 parent 76efcb6
commit b27a3ea
Show file tree

Hide file tree

Showing 7 changed files with 16 additions and 9 deletions.
diff --git a/...omponents/src/layout/TotalLayout/TotalLayoutFooterContainer/TotalLayoutFooterContainer.js b/...omponents/src/layout/TotalLayout/TotalLayoutFooterContainer/TotalLayoutFooterContainer.js
@@ -11,10 +11,11 @@ const TotalLayoutFooterContainer = ({
   leftZone,
   rightZone,
   children,
+  fullWidth,
 }) => {
   const [showFooterBorder, setShowFooterBorder] = React.useState(false);
   const { classes } = TotalLayoutFooterContainerStyles(
-    { showFooterBorder, leftOffset, fixed },
+    { showFooterBorder, leftOffset, fixed, fullWidth },
     { name: 'TotalLayoutFooterContainer' },
   );
 
@@ -72,6 +73,7 @@ TotalLayoutFooterContainer.propTypes = {
   rightZone: PropTypes.node,
   children: PropTypes.node,
   fixed: PropTypes.bool,
+  fullWidth: PropTypes.bool,
 };
 
 export { TotalLayoutFooterContainer };
diff --git a/...ts/src/layout/TotalLayout/TotalLayoutFooterContainer/TotalLayoutFooterContainer.styles.js b/...ts/src/layout/TotalLayout/TotalLayoutFooterContainer/TotalLayoutFooterContainer.styles.js
@@ -1,10 +1,10 @@
 import { createStyles } from '@mantine/styles';
 
 const TotalLayoutFooterContainerStyles = createStyles(
-  (theme, { showFooterBorder, leftOffset, fixed }) => ({
+  (theme, { showFooterBorder, leftOffset, fullWidth, fixed }) => ({
     root: {},
     footer: {
-      width: 928,
+      width: fullWidth ? '100%' : 928,
       marginLeft: leftOffset,
       backgroundColor: 'white',
       borderTop: showFooterBorder && `1px solid ${theme.other.divider.background.color.default}`,

diff --git a/...nts/src/layout/TotalLayout/TotalLayoutStepContainer/TotalLayoutStepContainer.constants.js b/...nts/src/layout/TotalLayout/TotalLayoutStepContainer/TotalLayoutStepContainer.constants.js
@@ -6,6 +6,7 @@ export const TOTAL_LAYOUT_STEP_CONTAINER_PROP_TYPES = {
   Footer: PropTypes.node,
   style: PropTypes.object,
   clean: PropTypes.bool,
+  fullWidth: PropTypes.bool,
 };
 export const TOTAL_LAYOUT_STEP_CONTAINER_DEFAULT_PROPS = {
   stepName: '',

diff --git a/...es/components/src/layout/TotalLayout/TotalLayoutStepContainer/TotalLayoutStepContainer.js b/...es/components/src/layout/TotalLayout/TotalLayoutStepContainer/TotalLayoutStepContainer.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Text, Title } from '../../../typography';
+import { Title } from '../../../typography';
 import { Stack } from '../../Stack';
 import { Box } from '../../Box';
 import {
@@ -8,9 +8,9 @@ import {
 } from './TotalLayoutStepContainer.constants';
 import { TotalLayoutStepContainerStyles } from './TotalLayoutStepContainer.styles';
 
-const TotalLayoutStepContainer = ({ stepName, children, Footer, clean }) => {
+const TotalLayoutStepContainer = ({ stepName, fullWidth, children, Footer, clean }) => {
   const { classes } = TotalLayoutStepContainerStyles(
-    { hasFooter: !!Footer, clean },
+    { hasFooter: !!Footer, clean, fullWidth },
     { name: 'TotalLayoutStepContainer' },
   );
 

diff --git a/...onents/src/layout/TotalLayout/TotalLayoutStepContainer/TotalLayoutStepContainer.styles.js b/...onents/src/layout/TotalLayout/TotalLayoutStepContainer/TotalLayoutStepContainer.styles.js
@@ -1,10 +1,12 @@
 import { createStyles } from '@mantine/styles';
 
-const TotalLayoutStepContainerStyles = createStyles((theme, { hasFooter, clean }) => ({
+const TotalLayoutStepContainerStyles = createStyles((theme, { hasFooter, clean, fullWidth }) => ({
   root: {},
   stepContainer: {
     padding: '30px 0 0 0 ',
-    width: 928,
+    width: fullWidth ? '100%' : 928,
+    marginLeft: fullWidth ? theme.spacing[5] : 0,
+    marginRight: fullWidth ? theme.spacing[5] : 0,
     height: '100%',
     '@media (min-width: 1920px)': {
       maxWidth: 1200,

diff --git a/packages/components/src/navigation/Tabs/Tabs.stories.js b/packages/components/src/navigation/Tabs/Tabs.stories.js
@@ -157,6 +157,7 @@ const WithTotalLayoutTemplate = ({ ...props }) => {
           <TotalLayoutStepContainer
             style={{ backgroundColor: 'transparent', padding: 0, margin: 0 }}
             stepName="Actividades en Curso"
+            fullWidth
           >
             <Tabs
               {...props}
@@ -178,6 +179,7 @@ const WithTotalLayoutTemplate = ({ ...props }) => {
                   ))}
                   <TotalLayoutFooterContainer
                     fixed
+                    fullWidth
                     scrollRef={scrollRef}
                     rightZone={<Button variant="outline">Descargar</Button>}
                   />

diff --git a/packages/components/src/navigation/VerticalStepper/VerticalStepper.js b/packages/components/src/navigation/VerticalStepper/VerticalStepper.js
@@ -94,6 +94,7 @@ const VerticalStepper = ({
   };
 
   const getStepState = (step, index) => {
+    if (index === activeIndex) return 'current';
     if (step.isChild) {
       if (step.siblingsRange.every((childIndex) => completedSteps.includes(childIndex)))
         return 'completed';
@@ -107,7 +108,6 @@ const VerticalStepper = ({
     if (completedSteps.includes(index)) {
       return step.status || 'completed';
     }
-    if (index === activeIndex) return 'current';
     return 'pending';
   };