diff --git a/packages/components/src/layout/TotalLayout/TotalLayoutFooterContainer/TotalLayoutFooterContainer.js b/packages/components/src/layout/TotalLayout/TotalLayoutFooterContainer/TotalLayoutFooterContainer.js index 5a1aed0cb..4728ea291 100644 --- a/packages/components/src/layout/TotalLayout/TotalLayoutFooterContainer/TotalLayoutFooterContainer.js +++ b/packages/components/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/packages/components/src/layout/TotalLayout/TotalLayoutFooterContainer/TotalLayoutFooterContainer.styles.js b/packages/components/src/layout/TotalLayout/TotalLayoutFooterContainer/TotalLayoutFooterContainer.styles.js index b9b58180c..d19280814 100644 --- a/packages/components/src/layout/TotalLayout/TotalLayoutFooterContainer/TotalLayoutFooterContainer.styles.js +++ b/packages/components/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/packages/components/src/layout/TotalLayout/TotalLayoutStepContainer/TotalLayoutStepContainer.constants.js b/packages/components/src/layout/TotalLayout/TotalLayoutStepContainer/TotalLayoutStepContainer.constants.js index 36f27d6bb..5e19b003a 100644 --- a/packages/components/src/layout/TotalLayout/TotalLayoutStepContainer/TotalLayoutStepContainer.constants.js +++ b/packages/components/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/packages/components/src/layout/TotalLayout/TotalLayoutStepContainer/TotalLayoutStepContainer.js b/packages/components/src/layout/TotalLayout/TotalLayoutStepContainer/TotalLayoutStepContainer.js index 5a0f964fd..a751ce024 100644 --- a/packages/components/src/layout/TotalLayout/TotalLayoutStepContainer/TotalLayoutStepContainer.js +++ b/packages/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/packages/components/src/layout/TotalLayout/TotalLayoutStepContainer/TotalLayoutStepContainer.styles.js b/packages/components/src/layout/TotalLayout/TotalLayoutStepContainer/TotalLayoutStepContainer.styles.js index 20cd88564..5aa3b0f3f 100644 --- a/packages/components/src/layout/TotalLayout/TotalLayoutStepContainer/TotalLayoutStepContainer.styles.js +++ b/packages/components/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 index ea9e0eeb7..89088ccf5 100644 --- 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 }) => { { ))} Descargar} /> diff --git a/packages/components/src/navigation/VerticalStepper/VerticalStepper.js b/packages/components/src/navigation/VerticalStepper/VerticalStepper.js index 8d1a01148..243b89b96 100644 --- 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'; };