fix(TotalLayout): Add clean prop to TotalLayoutStepContainer

packages/components/src/form/BooleanInput/BooleanInput.js

@@ -33,14 +33,20 @@ export const BOOLEAN_INPUT_PROP_TYPES = {
   label: PropTypes.string,
   /** Input help */
   help: PropTypes.string,
-  /** Input boolean value*/
+  /** Input boolean value */
   checked: PropTypes.bool,
   /** Controls if it is a ProSwitch or not */
   isPro: PropTypes.bool,
   /** Controls the input size */
   size: PropTypes.oneOf(BOOLEAN_INPUT_SIZES),
   /** Controls if BooleanInput uses aria role */
   useAria: PropTypes.bool,
+  /** Input error */
+  error: PropTypes.string,
+  /** Input description */
+  description: PropTypes.string,
+  /** Input required */
+  required: PropTypes.bool,
 };
 
 export const BOOLEAN_INPUT_DEFAULT_PROPS = {
@@ -80,7 +86,7 @@ const BooleanInput = forwardRef(
       isPro,
       ...props
     },
-    ref
+    ref,
   ) => {
     const [isChecked, setIsChecked] = useState(checked);
 
@@ -97,7 +103,7 @@ const BooleanInput = forwardRef(
 
     const { classes, cx } = BooleanInputStyles(
       { help, helpPosition, variant, isChecked, isPro, display, size },
-      { name: 'BooleanInput' }
+      { name: 'BooleanInput' },
     );
 
     return (
@@ -140,9 +146,10 @@ const BooleanInput = forwardRef(
         </Box>
       </InputWrapper>
     );
-  }
+  },
 );
 
+BooleanInput.displayName = 'BooleanInput';
 BooleanInput.defaultProps = BOOLEAN_INPUT_DEFAULT_PROPS;
 BooleanInput.propTypes = BOOLEAN_INPUT_PROP_TYPES;
 

packages/components/src/form/BooleanInput/BooleanInput.styles.js

@@ -1,17 +1,43 @@
 import { createStyles } from '@mantine/styles';
-import { pxToRem, getFontProductive } from '../../theme.mixins';
+import { pxToRem } from '../../theme.mixins';
 
-export const BooleanInputStyles = createStyles(
+const BooleanInputStyles = createStyles(
   (theme, { help, helpPosition, variant, isChecked, isPro, display, size }) => {
-    const isRight = !!help & (helpPosition === 'right');
-    const isBottom = !!help & (helpPosition === 'bottom');
+    const isRight = !!help && helpPosition === 'right';
+    const isBottom = !!help && helpPosition === 'bottom';
     const isBoxed = variant === 'boxed';
     const isSwitch = display === 'switch';
+    const checkboxTheme = theme.other.checkbox;
 
     const getHelpMargin = () => {
       if (size === 'xs') return 42;
       if (size === 'sm') return 44;
       if (size === 'md') return 48;
+      return 0;
+    };
+
+    const getBackgroundColor = () => {
+      if (isBoxed) {
+        if (isChecked) {
+          return theme.colors.interactive04;
+        }
+        return theme.colors.interactive03;
+      }
+      return null;
+    };
+
+    const getPadding = () => {
+      if (!isPro) {
+        return isBoxed
+          ? `${pxToRem(12)} ${pxToRem(20)} ${pxToRem(12)} ${pxToRem(16)}`
+          : `${pxToRem(6)} ${pxToRem(10)} ${pxToRem(6)} ${pxToRem(8)}`;
+      }
+      return null;
+    };
+
+    const getHelpMarginLeft = () => {
+      if (isRight) return theme.spacing[4];
+      return isSwitch ? getHelpMargin() : theme.spacing[6];
     };
 
     return {
@@ -20,26 +46,20 @@ export const BooleanInputStyles = createStyles(
         flex: 1,
         alignItems: 'flex-start',
         flexDirection: isBottom && 'column',
-        backgroundColor: isBoxed
-          ? isChecked
-            ? theme.colors.interactive04
-            : theme.colors.interactive03
-          : null,
+        backgroundColor: getBackgroundColor(),
         border: !isPro && '1px solid transparent',
         borderColor: isBoxed && isChecked && theme.colors.interactive01d,
-        padding: !isPro
-          ? isBoxed
-            ? `${pxToRem(12)} ${pxToRem(20)} ${pxToRem(12)} ${pxToRem(16)}`
-            : `${pxToRem(6)} ${pxToRem(10)} ${pxToRem(6)} ${pxToRem(8)}`
-          : null,
+        padding: getPadding(),
         zIndex: !isPro && isChecked && 1,
       },
       wrapper: {},
       help: {
         cursor: 'pointer',
-        marginLeft: isRight ? theme.spacing[4] : isSwitch ? getHelpMargin() : theme.spacing[6],
+        marginLeft: getHelpMarginLeft(),
         marginTop: isBottom ? theme.spacing[1] : 2,
       },
     };
-  }
+  },
 );
+
+export { BooleanInputStyles };

packages/components/src/form/BooleanInput/Checkbox/Checkbox.js

@@ -1,4 +1,5 @@
 import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
 import { Checkbox as MantineCheckbox } from '@mantine/core';
 import { CheckIcon } from '@bubbles-ui/icons/solid';
 import { CheckboxStyles } from './Checkbox.styles';
@@ -9,9 +10,14 @@ const CheckboxIcon = ({ indeterminate, className }) =>
       <rect y="0.5" width="9" height="3" rx="1" fill="currentColor" />
     </svg>
   ) : (
-    <CheckIcon className={className} />
+    <CheckIcon className={className} height={10} width={11} />
   );
 
+CheckboxIcon.propTypes = {
+  indeterminate: PropTypes.bool,
+  className: PropTypes.string,
+};
+
 const Checkbox = forwardRef(({ disabled, labelPosition, size, useAria, ...props }, ref) => {
   const { classes, cx } = CheckboxStyles({ disabled, labelPosition }, { name: 'Checkbox' });
 
@@ -27,4 +33,11 @@ const Checkbox = forwardRef(({ disabled, labelPosition, size, useAria, ...props
   );
 });
 
+Checkbox.displayName = 'BooleanCheckbox';
+Checkbox.propTypes = {
+  disabled: PropTypes.bool,
+  labelPosition: PropTypes.oneOf(['left', 'right']),
+  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
+  useAria: PropTypes.bool,
+};
 export { Checkbox };

packages/components/src/form/BooleanInput/Checkbox/Checkbox.styles.js

@@ -1,17 +1,35 @@
 import { createStyles } from '@mantine/styles';
-import { pxToRem, getFontProductive } from '../../../theme.mixins';
+import { pxToRem, getFontProductive, getBoxShadowFromToken } from '../../../theme.mixins';
+
+const CheckboxStyles = createStyles((theme, { disabled, labelPosition }) => {
+  const checkboxTheme = theme.other.checkbox;
+  const labelTheme = theme.other.label;
 
-export const CheckboxStyles = createStyles((theme, { disabled, labelPosition }) => {
   return {
     root: {
       gap: 8,
       justifyContent: 'left',
     },
     input: {
       cursor: 'pointer',
+      backgroundColor: checkboxTheme.background.color.default,
+      borderColor: checkboxTheme.border.color.default,
+      borderWidth: 1,
       '&:checked': {
-        backgroundColor: disabled ? theme.colors.ui01 : theme.colors.interactive01,
-        borderColor: disabled ? theme.colors.ui01 : theme.colors.interactive01,
+        backgroundColor: checkboxTheme.background.color.default,
+        borderColor: checkboxTheme.border.color.select,
+      },
+      '&:hover': {
+        borderColor: checkboxTheme.border.color.select,
+        ...getBoxShadowFromToken(checkboxTheme.shadow.hover),
+      },
+      '&:focus': {
+        borderColor: checkboxTheme.border.color.selected,
+        borderWidth: 2,
+      },
+      '&:focus-visible': {
+        outline: `1px solid ${checkboxTheme.border.color.selected}`,
+        outlineOffset: 0,
       },
       borderRadius: 2,
     },
@@ -21,13 +39,16 @@ export const CheckboxStyles = createStyles((theme, { disabled, labelPosition })
     },
     icon: {
       width: 14,
+      color: `${checkboxTheme.content.color.icon} !important`,
     },
     label: {
       cursor: 'pointer',
-      color: theme.colors.text01,
-      ...getFontProductive(theme.fontSizes['2'], 500),
+      color: labelTheme.content.color.default,
+      ...labelTheme.content.typo['02'],
       lineHeight: pxToRem(17),
       padding: 0,
     },
   };
 });
+
+export { CheckboxStyles };

packages/components/src/form/BooleanInput/Switch/Switch.js

@@ -1,11 +1,12 @@
 import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import { mergeWith } from 'lodash';
 import { Switch as MantineSwitch } from '@mantine/core';
 import { SwitchStyles } from './Switch.styles';
-import { mergeWith } from 'lodash';
 
 const Switch = forwardRef(
   ({ labelPosition, size, disabled, useAria, classNames, ...props }, ref) => {
-    const { classes, cx } = SwitchStyles({ size, labelPosition, disabled }, { name: 'Switch' });
+    const { classes } = SwitchStyles({ size, labelPosition, disabled }, { name: 'Switch' });
 
     const mergedClasses = mergeWith({ ...classes }, { ...classNames }, (obj, src) => {
       if (obj) return `${obj} ${src}`;
@@ -22,7 +23,16 @@ const Switch = forwardRef(
         role={useAria ? 'switch' : undefined}
       />
     );
-  }
+  },
 );
 
+Switch.displayName = 'BooleanSwitch';
+Switch.propTypes = {
+  labelPosition: PropTypes.string,
+  size: PropTypes.any,
+  useAria: PropTypes.bool,
+  classNames: PropTypes.any,
+  disabled: PropTypes.bool,
+};
+
 export { Switch };

packages/components/src/form/BooleanInput/Switch/Switch.styles.js

@@ -1,25 +1,30 @@
 import { createStyles } from '@mantine/styles';
-import { getFontProductive } from '../../../theme.mixins';
+import { getBoxShadowFromToken } from '../../../theme.mixins';
 
-const getSizes = (size, theme) => {
-  return {
-    width: theme.size.width,
-    minWidth: theme.size.width,
-    height: `calc(${theme.size.inner} + ${theme.spacing.padding} + ${theme.spacing.padding})`,
-  };
-};
+const getSizes = (size, theme) => ({
+  width: theme.size.width,
+  minWidth: theme.size.width,
+  height: `calc(${theme.size.inner} + ${theme.spacing.padding} + ${theme.spacing.padding})`,
+});
 
-const getThumbSizes = (size, theme) => {
-  return {
-    height: theme.size.inner,
-    width: theme.size.inner,
-    border: 'none',
-  };
+const getThumbSizes = (size, theme) => ({
+  height: theme.size.inner && theme.size.inner.replace(' ', ''),
+  width: theme.size.inner && theme.size.inner.replace(' ', ''),
+  border: 'none',
+});
+
+const getThumbLeft = (theme) => {
+  if (theme.size?.inner) {
+    const size = parseInt(theme.size.inner.replace('px', '').replace(' ', ''));
+    return `calc(100% - ${size}px - 4px)`;
+  }
+  return 'calc(100% - 16px - 2px)';
 };
 
-export const SwitchStyles = createStyles((theme, { size, labelPosition, disabled }) => {
+const SwitchStyles = createStyles((theme, { size, labelPosition, disabled }) => {
   const switchTheme = theme.other.toggle;
   const labelTheme = theme.other.label;
+
   return {
     root: {
       justifyContent: 'left',
@@ -29,12 +34,12 @@ export const SwitchStyles = createStyles((theme, { size, labelPosition, disabled
       justifyContent: 'center',
       alignItems: 'center',
       'label[data-disabled]': {
-        color: theme.colors.ui01,
+        color: theme.other.global.content.color.disabled,
       },
     },
     label: {
       color: labelTheme.content.color.default,
-      ...labelTheme.content.typo['01'],
+      ...labelTheme.content.typo['02'],
       paddingLeft: 0,
       '&:hover': {
         cursor: disabled ? 'not-allowed' : 'pointer',
@@ -51,35 +56,39 @@ export const SwitchStyles = createStyles((theme, { size, labelPosition, disabled
     track: {
       ...getSizes(size, switchTheme),
       cursor: 'pointer',
-      border: 'none',
       borderRadius: switchTheme.border.radius,
-      backgroundColor: switchTheme.background.color.unselected.default,
+      borderColor: switchTheme.border.color.default,
+      backgroundColor: switchTheme.background.color.default,
       '&:hover': {
-        backgroundColor: switchTheme.background.color.unselected.hover,
+        ...getBoxShadowFromToken(switchTheme.shadow.hover),
       },
       'input:checked + &': {
-        border: 'none',
-        borderRadius: switchTheme.border.radius,
-        backgroundColor: switchTheme.background.color.selected.default,
+        backgroundColor: switchTheme.background.color.default,
+        borderColor: switchTheme.border.color.select,
         transition: `all 150ms ${theme.transitionTimingFunction}`,
         '&:hover': {
-          backgroundColor: switchTheme.background.color.selected.hover,
+          ...getBoxShadowFromToken(switchTheme.shadow.hover),
         },
       },
       'input:disabled + &': {
         backgroundColor: theme.other.global.background.color.disabled,
+        borderColor: theme.other.global.border.color.disabled.default,
       },
     },
     thumb: {
       ...getThumbSizes(size, switchTheme),
       backgroundColor: switchTheme.content.color.default,
       borderRadius: switchTheme.border.radius,
+      left: 4,
       'input:checked + * > &': {
-        left: 'calc(100% - 16px - 2px)',
+        left: getThumbLeft(switchTheme),
+        backgroundColor: switchTheme.content.color.selected,
       },
       'input:disabled + * > &': {
         backgroundColor: theme.other.global.content.color.disabled,
       },
     },
   };
 });
+
+export { SwitchStyles };

packages/components/src/form/Checkbox/Checkbox.js

@@ -8,10 +8,11 @@ import {
 export const CHECKBOX_PROP_TYPES = BOOLEAN_INPUT_PROP_TYPES;
 export const CHECKBOX_DEFAULT_PROPS = BOOLEAN_INPUT_DEFAULT_PROPS;
 
-const Checkbox = forwardRef(({ display, useAria, ...props }, ref) => {
-  return <BooleanInput {...props} display="checkbox" useAria={useAria} ref={ref} />;
-});
+const Checkbox = forwardRef(({ display, useAria, ...props }, ref) => (
+  <BooleanInput {...props} display="checkbox" useAria={useAria} ref={ref} />
+));
 
+Checkbox.displayName = 'Checkbox';
 Checkbox.propTypes = CHECKBOX_PROP_TYPES;
 Checkbox.defaultProps = CHECKBOX_DEFAULT_PROPS;
 

packages/components/src/layout/TotalLayout/TotalLayoutStepContainer/TotalLayoutStepContainer.constants.js

@@ -5,6 +5,7 @@ export const TOTAL_LAYOUT_STEP_CONTAINER_PROP_TYPES = {
   children: PropTypes.node,
   Footer: PropTypes.node,
   style: PropTypes.object,
+  clean: PropTypes.bool,
 };
 export const TOTAL_LAYOUT_STEP_CONTAINER_DEFAULT_PROPS = {
   stepName: '',