Update checkbox

Update checkbox logic and states

Author: Hector Arce De Las Heras

src/components/checkbox/checkboxControlled.tsx

@@ -18,7 +18,7 @@ const CheckboxControlledComponent = React.forwardRef(
       props.variant,
       props.ctv
     );
-    const state = getCheckBoxState(props.checked, props.disabled, props.error);
+    const state = getCheckBoxState(props.checked, props.disabled, props.error, styles);
 
     return <CheckboxStandAlone ref={ref} state={state} styles={styles[state]} {...props} />;
   }

src/components/checkbox/types/state.ts

@@ -7,5 +7,8 @@ export enum CheckboxStateType {
   DEFAULT_SELECTED = 'DEFAULT_SELECTED',
   DISABLED_UNSELECTED = 'DISABLED_UNSELECTED',
   DISABLED_SELECTED = 'DISABLED_SELECTED',
+  ERROR_UNSELECTED = 'ERROR_UNSELECTED',
+  ERROR_SELECTED = 'ERROR_SELECTED',
+  // deprecated - This `error` state will be deprecated in the future
   ERROR = 'ERROR',
 }

src/components/checkbox/utils/state.utils.ts

@@ -1,12 +1,21 @@
-import { CheckboxStateType } from '../types';
+import { CheckboxPropsStateStylesType, CheckboxStateType } from '../types';
 
 // eslint-disable-next-line complexity
 const getCheckBoxState = (
   checked = false,
   disabled = false,
-  isError = false
+  error = false,
+  // deprecated - Remove style from de method when the deprecated ERROR state is removed
+  styles?: CheckboxPropsStateStylesType
 ): CheckboxStateType => {
-  if (isError) {
+  if (error && !checked && styles?.[CheckboxStateType.ERROR_UNSELECTED]) {
+    return CheckboxStateType.ERROR_UNSELECTED;
+  }
+  if (error && checked && styles?.[CheckboxStateType.ERROR_SELECTED]) {
+    return CheckboxStateType.ERROR_SELECTED;
+  }
+  // deprecated - This `error` state will be deprecated in the future
+  if (error) {
     return CheckboxStateType.ERROR;
   }
   if (disabled && !checked) {
@@ -36,11 +45,17 @@ export const checkboxState = (
   hasError: boolean;
 } => {
   const isChecked =
-    state === CheckboxStateType.DEFAULT_SELECTED || state === CheckboxStateType.DISABLED_SELECTED;
+    state === CheckboxStateType.DEFAULT_SELECTED ||
+    state === CheckboxStateType.DISABLED_SELECTED ||
+    state === CheckboxStateType.ERROR_SELECTED;
   const isDisabled =
     state === CheckboxStateType.DISABLED_UNSELECTED ||
     state === CheckboxStateType.DISABLED_SELECTED;
-  const hasError = state === CheckboxStateType.ERROR;
+  const hasError =
+    state === CheckboxStateType.ERROR_SELECTED ||
+    state === CheckboxStateType.ERROR_UNSELECTED ||
+    // deprecated - This `error` state will be deprecated in the future
+    state === CheckboxStateType.ERROR;
   return { isChecked, isDisabled, hasError };
 };