From 55a56c5e8009502885d06840ede53943139ccd5e Mon Sep 17 00:00:00 2001 From: Johan Sosa Date: Thu, 21 Dec 2023 15:59:26 +0100 Subject: [PATCH] fix(TotalLayout): Add clean prop to TotalLayoutStepContainer --- .../src/form/BooleanInput/BooleanInput.js | 15 +++-- .../form/BooleanInput/BooleanInput.styles.js | 52 +++++++++++----- .../form/BooleanInput/Checkbox/Checkbox.js | 15 ++++- .../BooleanInput/Checkbox/Checkbox.styles.js | 33 +++++++++-- .../src/form/BooleanInput/Switch/Switch.js | 16 ++++- .../form/BooleanInput/Switch/Switch.styles.js | 59 +++++++++++-------- .../components/src/form/Checkbox/Checkbox.js | 7 ++- .../TotalLayoutStepContainer.constants.js | 1 + .../TotalLayoutStepContainer.js | 6 +- .../TotalLayoutStepContainer.styles.js | 11 ++-- .../VerticalStepper/Progress/Progress.js | 11 +++- 11 files changed, 158 insertions(+), 68 deletions(-) diff --git a/packages/components/src/form/BooleanInput/BooleanInput.js b/packages/components/src/form/BooleanInput/BooleanInput.js index 141e069ad..ddb5d8251 100644 --- a/packages/components/src/form/BooleanInput/BooleanInput.js +++ b/packages/components/src/form/BooleanInput/BooleanInput.js @@ -33,7 +33,7 @@ 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, @@ -41,6 +41,12 @@ export const BOOLEAN_INPUT_PROP_TYPES = { 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( ); - } + }, ); +BooleanInput.displayName = 'BooleanInput'; BooleanInput.defaultProps = BOOLEAN_INPUT_DEFAULT_PROPS; BooleanInput.propTypes = BOOLEAN_INPUT_PROP_TYPES; diff --git a/packages/components/src/form/BooleanInput/BooleanInput.styles.js b/packages/components/src/form/BooleanInput/BooleanInput.styles.js index c05309bc3..21bf19d5b 100644 --- a/packages/components/src/form/BooleanInput/BooleanInput.styles.js +++ b/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 }; diff --git a/packages/components/src/form/BooleanInput/Checkbox/Checkbox.js b/packages/components/src/form/BooleanInput/Checkbox/Checkbox.js index 601ddf255..3413233f5 100644 --- a/packages/components/src/form/BooleanInput/Checkbox/Checkbox.js +++ b/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 }) => ) : ( - + ); +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 }; diff --git a/packages/components/src/form/BooleanInput/Checkbox/Checkbox.styles.js b/packages/components/src/form/BooleanInput/Checkbox/Checkbox.styles.js index 9f5a04ea2..55a593559 100644 --- a/packages/components/src/form/BooleanInput/Checkbox/Checkbox.styles.js +++ b/packages/components/src/form/BooleanInput/Checkbox/Checkbox.styles.js @@ -1,7 +1,10 @@ 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, @@ -9,9 +12,24 @@ export const CheckboxStyles = createStyles((theme, { disabled, labelPosition }) }, 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 }; diff --git a/packages/components/src/form/BooleanInput/Switch/Switch.js b/packages/components/src/form/BooleanInput/Switch/Switch.js index 0aaf7dc8c..a2360dbc9 100644 --- a/packages/components/src/form/BooleanInput/Switch/Switch.js +++ b/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 }; diff --git a/packages/components/src/form/BooleanInput/Switch/Switch.styles.js b/packages/components/src/form/BooleanInput/Switch/Switch.styles.js index b0e4e5cf5..46d7fa5fa 100644 --- a/packages/components/src/form/BooleanInput/Switch/Switch.styles.js +++ b/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,31 +56,33 @@ 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, @@ -83,3 +90,5 @@ export const SwitchStyles = createStyles((theme, { size, labelPosition, disabled }, }; }); + +export { SwitchStyles }; diff --git a/packages/components/src/form/Checkbox/Checkbox.js b/packages/components/src/form/Checkbox/Checkbox.js index b9febc46c..56b5ef79a 100644 --- a/packages/components/src/form/Checkbox/Checkbox.js +++ b/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 ; -}); +const Checkbox = forwardRef(({ display, useAria, ...props }, ref) => ( + +)); +Checkbox.displayName = 'Checkbox'; Checkbox.propTypes = CHECKBOX_PROP_TYPES; Checkbox.defaultProps = CHECKBOX_DEFAULT_PROPS; diff --git a/packages/components/src/layout/TotalLayout/TotalLayoutStepContainer/TotalLayoutStepContainer.constants.js b/packages/components/src/layout/TotalLayout/TotalLayoutStepContainer/TotalLayoutStepContainer.constants.js index bb301ebaf..36f27d6bb 100644 --- a/packages/components/src/layout/TotalLayout/TotalLayoutStepContainer/TotalLayoutStepContainer.constants.js +++ b/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: '', diff --git a/packages/components/src/layout/TotalLayout/TotalLayoutStepContainer/TotalLayoutStepContainer.js b/packages/components/src/layout/TotalLayout/TotalLayoutStepContainer/TotalLayoutStepContainer.js index 27ffcd52f..746d02b02 100644 --- a/packages/components/src/layout/TotalLayout/TotalLayoutStepContainer/TotalLayoutStepContainer.js +++ b/packages/components/src/layout/TotalLayout/TotalLayoutStepContainer/TotalLayoutStepContainer.js @@ -8,16 +8,16 @@ import { } from './TotalLayoutStepContainer.constants'; import { TotalLayoutStepContainerStyles } from './TotalLayoutStepContainer.styles'; -const TotalLayoutStepContainer = ({ stepName, children, Footer }) => { +const TotalLayoutStepContainer = ({ stepName, children, Footer, clean }) => { const { classes } = TotalLayoutStepContainerStyles( - { hasFooter: !!Footer, clean: true }, + { hasFooter: !!Footer, clean }, { name: 'TotalLayoutStepContainer' }, ); return ( {stepName && ( - + {stepName} )} diff --git a/packages/components/src/layout/TotalLayout/TotalLayoutStepContainer/TotalLayoutStepContainer.styles.js b/packages/components/src/layout/TotalLayout/TotalLayoutStepContainer/TotalLayoutStepContainer.styles.js index 1e9c3e9d9..be093eceb 100644 --- a/packages/components/src/layout/TotalLayout/TotalLayoutStepContainer/TotalLayoutStepContainer.styles.js +++ b/packages/components/src/layout/TotalLayout/TotalLayoutStepContainer/TotalLayoutStepContainer.styles.js @@ -4,18 +4,19 @@ const TotalLayoutStepContainerStyles = createStyles((theme, { hasFooter, clean } root: {}, stepContainer: { padding: '24px 0 0 0 ', - width: '928px', + width: 928, height: '100%', }, formContainer: { backgroundColor: !clean && 'white', - padding: !clean && '24px', - paddingBottom: hasFooter ? '70px' : '24px', + padding: !clean && 24, + paddingBottom: hasFooter ? 70 : 24, }, stepName: { - fontSize: '23px', + fontSize: 23, fontWeight: 500, - lineHeight: '40px', + lineHeight: 40, + marginBottom: 8, }, })); diff --git a/packages/components/src/navigation/VerticalStepper/Progress/Progress.js b/packages/components/src/navigation/VerticalStepper/Progress/Progress.js index 647fbaf62..27449a55f 100644 --- a/packages/components/src/navigation/VerticalStepper/Progress/Progress.js +++ b/packages/components/src/navigation/VerticalStepper/Progress/Progress.js @@ -49,8 +49,15 @@ const Progress = ({ return ( - - + +