refacto(checkbox): mutualisation checkbox (#1473)

front/src/components/article/articlesFilter.component.tsx

@@ -2,7 +2,6 @@ import type { FC } from "react";
 import { useCallback, useEffect, useState } from "react";
 import * as React from "react";
 import { Modal, StyleSheet } from "react-native";
-import { CheckBox } from "react-native-elements";
 import { ScrollView } from "react-native-gesture-handler";
 
 import { Labels } from "../../constants";
@@ -11,8 +10,8 @@ import { useFavoriteArticlesIds } from "../../hooks";
 import { Colors, Margins, Paddings, Sizes, Styles } from "../../styles";
 import type { Article, ArticleFilter } from "../../types";
 import { ArticleFilterUtils } from "../../utils";
-import { BaseAssets } from "../assets";
 import {
+  BlueCheckbox,
   CancelButton,
   CloseButton,
   CustomButton,
@@ -185,34 +184,14 @@ const ArticlesFilter: FC<Props> = ({
 
               <ScrollView>
                 {filters.map((filter, index) => (
-                  <CheckBox
-                    containerStyle={styles.checkboxItem}
-                    textStyle={{
-                      color: Colors.primaryBlueDark,
-                      flex: 1,
-                      fontWeight: filter.active ? "bold" : "normal",
-                    }}
+                  <BlueCheckbox
                     key={index}
                     iconRight
-                    uncheckedIcon={
-                      <BaseAssets.CheckboxUncheckedIcon
-                        width={Sizes.sm}
-                        height={Sizes.sm}
-                      />
-                    }
-                    checkedIcon={
-                      <BaseAssets.CheckboxCheckedIcon
-                        width={Sizes.sm}
-                        height={Sizes.sm}
-                      />
-                    }
-                    uncheckedColor={Colors.primaryBlueDark}
-                    checkedColor={Colors.primaryBlueDark}
                     title={`${filter.thematique.nom} (${filter.nbArticles})`}
                     accessibilityLabel={ArticleFilterUtils.checkboxAccessibilityLabel(
                       filter
                     )}
-                    checked={filter.active}
+                    isChecked={filter.active}
                     onPress={onCheckboxPressed(filter)}
                   />
                 ))}
@@ -250,11 +229,6 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     marginTop: Margins.default,
   },
-  checkboxItem: {
-    backgroundColor: "transparent",
-    borderColor: "transparent",
-    minHeight: Sizes.accessibilityMinButton,
-  },
   filterButton: {
     alignSelf: "flex-start",
     backgroundColor: Colors.cardWhite,

front/src/components/baseComponents/blueCheckbox.component.tsx

@@ -0,0 +1,60 @@
+import * as React from "react";
+import { StyleSheet } from "react-native";
+import { CheckBox } from "react-native-elements";
+
+import { Colors, FontWeight, Sizes } from "../../styles";
+import { BaseAssets } from "../assets";
+
+interface Props {
+  title: string;
+  isChecked: boolean;
+  onPress: () => void;
+  iconRight?: boolean;
+  accessibilityLabel?: string;
+}
+
+const BlueCheckbox: React.FC<Props> = ({
+  title,
+  isChecked,
+  onPress,
+  iconRight,
+  accessibilityLabel,
+}) => {
+  return (
+    <CheckBox
+      containerStyle={styles.checkbox}
+      textStyle={[styles.label, isChecked ? styles.selectedLabel : null]}
+      iconRight={iconRight}
+      uncheckedIcon={
+        <BaseAssets.CheckboxUncheckedIcon width={Sizes.sm} height={Sizes.sm} />
+      }
+      checkedIcon={
+        <BaseAssets.CheckboxCheckedIcon width={Sizes.sm} height={Sizes.sm} />
+      }
+      uncheckedColor={Colors.primaryBlueDark}
+      checkedColor={Colors.primaryBlueDark}
+      title={title}
+      checked={isChecked}
+      onPress={onPress}
+      accessibilityLabel={accessibilityLabel ?? title}
+      accessibilityState={{ checked: isChecked }}
+    />
+  );
+};
+const styles = StyleSheet.create({
+  checkbox: {
+    backgroundColor: "transparent",
+    borderColor: "transparent",
+    minHeight: Sizes.accessibilityMinButton,
+  },
+  label: {
+    color: Colors.primaryBlueDark,
+    flex: 1,
+    fontWeight: FontWeight.normal,
+  },
+  selectedLabel: {
+    fontWeight: FontWeight.bold,
+  },
+});
+
+export default BlueCheckbox;

front/src/components/baseComponents/checkbox.component.tsx → front/src/components/baseComponents/greenRadioButton.component.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { StyleSheet } from "react-native";
-import { CheckBox as RNECheckBox } from "react-native-elements";
+import { CheckBox } from "react-native-elements";
 
 import {
   Colors,
@@ -15,29 +15,37 @@ import { BaseAssets } from "../assets";
 
 interface Props {
   title: string;
-  checked: boolean;
+  isChecked: boolean;
   onPress: () => void;
   labelSize?: number;
 }
 
-const Checkbox: React.FC<Props> = ({ title, checked, onPress, labelSize }) => {
+const GreenRadioButton: React.FC<Props> = ({
+  title,
+  isChecked,
+  onPress,
+  labelSize,
+}) => {
   const labelSizeStyle = { fontSize: labelSize ?? Sizes.xxs };
   return (
-    <RNECheckBox
+    // The native checkbox is used instead of the native radio button for
+    // its customization possibilities
+    <CheckBox
       title={title}
       checkedIcon={
         <BaseAssets.CheckedIcon width={Sizes.xs} height={Sizes.xs} />
       }
       uncheckedIcon={
         <BaseAssets.UncheckedIcon width={Sizes.xs} height={Sizes.xs} />
       }
-      checked={checked}
+      checked={isChecked}
+      accessibilityState={{ selected: isChecked }}
       onPress={onPress}
       containerStyle={[styles.checkbox]}
       textStyle={[
         styles.label,
         labelSizeStyle,
-        checked ? styles.labelSelected : null,
+        isChecked ? styles.selectedLabel : null,
       ]}
     />
   );
@@ -57,9 +65,9 @@ const styles = StyleSheet.create({
     fontFamily: getFontFamilyName(FontNames.comfortaa, FontWeight.bold),
     fontWeight: FontWeight.normal,
   },
-  labelSelected: {
+  selectedLabel: {
     color: Colors.secondaryGreen,
   },
 });
 
-export default Checkbox;
+export default GreenRadioButton;

front/src/components/baseComponents/index.ts

@@ -1,8 +1,8 @@
 import NotificationModal from "../notification/notificationModal.component";
 import BackButton from "./backButton.component";
 import Backdrop from "./backdrop.component";
+import BlueCheckbox from "./blueCheckbox.component";
 import CancelButton from "./cancelButton.component";
-import Checkbox from "./checkbox.component";
 import CloseButton from "./closeButton.component";
 import CustomButton from "./customButton.component";
 import CustomNumberOfChildrenPicker from "./customNumberOfChildrenPicker.component";
@@ -14,6 +14,7 @@ import ErrorMessage from "./errorMessage.component";
 import ExpandableButton from "./expandableButton.component";
 import FavoriteButton from "./favoriteButton.component";
 import { GraphQLLoader } from "./graphQLLoader.component";
+import GreenRadioButton from "./greenRadioButton.component";
 import HeaderApp from "./headerApp.component";
 import Icomoon, { IcomoonIcons } from "./icomoon.component";
 import Loader from "./loader.component";
@@ -32,8 +33,8 @@ import UsefulQuestion from "./usefulQuestion.component";
 export {
   BackButton,
   Backdrop,
+  BlueCheckbox,
   CancelButton,
-  Checkbox,
   CloseButton,
   CommonText,
   CustomButton,
@@ -46,6 +47,7 @@ export {
   ExpandableButton,
   FavoriteButton,
   GraphQLLoader,
+  GreenRadioButton,
   HeaderApp,
   Icomoon,
   IcomoonIcons,

front/src/components/epdsSurvey/epdsGenderEntry.component.tsx

@@ -5,9 +5,9 @@ import * as React from "react";
 import { StyleSheet } from "react-native";
 
 import {
-  Checkbox,
   CommonText,
   CustomButton,
+  GreenRadioButton,
   TitleH1,
   View,
 } from "../../components/baseComponents";
@@ -80,9 +80,9 @@ const EpdsGenderEntry: FC<EpdsGenderEntryProps> = ({ goToEpdsSurvey }) => {
         <View style={styles.answers}>
           {epdsGenders.map((genderElement, index) => (
             <View key={index}>
-              <Checkbox
+              <GreenRadioButton
                 title={genderElement.element.label}
-                checked={genderElement.isChecked}
+                isChecked={genderElement.isChecked}
                 labelSize={Sizes.xs}
                 onPress={updateGendersArray(genderElement)}
               />

front/src/components/epdsSurvey/epdsQuestion.component.tsx

@@ -12,7 +12,7 @@ import { Labels } from "../../constants";
 import { Colors, FontWeight, Paddings, Sizes } from "../../styles";
 import type { EpdsAnswer, EpdsQuestionAndAnswers } from "../../type";
 import { TrackerUtils } from "../../utils";
-import { Checkbox, CommonText, View } from "../baseComponents";
+import { CommonText, GreenRadioButton, View } from "../baseComponents";
 import TrackerHandler from "../tracker/trackerHandler.component";
 
 interface Props {
@@ -77,11 +77,11 @@ const EpdsQuestion: React.FC<Props> = ({
         </View>
         <View style={styles.paddingRight}>
           {questionAndAnswers.answers.map((answer, answerIndex) => (
-            <Checkbox
+            <GreenRadioButton
               key={answerIndex}
               labelSize={Sizes.xs}
               title={answer.label}
-              checked={answer.isChecked}
+              isChecked={answer.isChecked}
               onPress={onAnswerPressed(answer)}
             />
           ))}

front/src/components/notification/notificationsEssentialEvents.component.tsx

@@ -2,10 +2,8 @@ import type { FC } from "react";
 import * as React from "react";
 import { useCallback, useEffect, useState } from "react";
 import { StyleSheet } from "react-native";
-import { CheckBox } from "react-native-elements";
 
 import { Labels, StorageKeysConstants } from "../../constants";
-import { Colors, Sizes } from "../../styles";
 import type { TrackerEvent } from "../../type";
 import type { Event } from "../../types";
 import {
@@ -15,7 +13,7 @@ import {
   TrackerUtils,
 } from "../../utils";
 import { NotificationType } from "../../utils/notifications/notification.util";
-import { BaseAssets } from "../assets";
+import { BlueCheckbox, View } from "../baseComponents";
 import TrackerHandler from "../tracker/trackerHandler.component";
 
 interface Props {
@@ -67,38 +65,22 @@ const NotificationsEssentialEvents: FC<Props> = ({ events }) => {
   return (
     <>
       <TrackerHandler eventObject={trackerEventObject} />
-      <CheckBox
-        containerStyle={styles.checkboxItem}
-        textStyle={{
-          color: Colors.primaryBlueDark,
-          fontWeight: isCheckboxChecked ? "bold" : "normal",
-        }}
-        key={1}
-        iconRight={false}
-        uncheckedIcon={
-          <BaseAssets.CheckboxUncheckedIcon
-            width={Sizes.sm}
-            height={Sizes.sm}
-          />
-        }
-        checkedIcon={
-          <BaseAssets.CheckboxCheckedIcon width={Sizes.sm} height={Sizes.sm} />
-        }
-        title={Labels.notification.essentialEvents}
-        accessibilityLabel={Labels.notification.essentialEvents}
-        checked={isCheckboxChecked}
-        onPress={onCheckboxPressed}
-      />
+      <View style={styles.checkboxItem}>
+        <BlueCheckbox
+          key={1}
+          iconRight={false}
+          title={Labels.notification.essentialEvents}
+          isChecked={isCheckboxChecked}
+          onPress={onCheckboxPressed}
+        />
+      </View>
     </>
   );
 };
 
 const styles = StyleSheet.create({
   checkboxItem: {
-    backgroundColor: "transparent",
-    borderColor: "transparent",
     marginStart: 0,
-    minHeight: Sizes.accessibilityMinButton,
     paddingStart: 0,
   },
 });