(PC-33159) refactor(ui): Checkbox component (#7285)

* (PC-33159) refactor(ui): Checkbox component * test: snapshots update
pass-culture · Nov 27, 2024 · d175c67 · d175c67
1 parent 02e2c9f
commit d175c67
Show file tree

Hide file tree

Showing 7 changed files with 62 additions and 62 deletions.
diff --git a/..._/features/accessibility/components/AccessibilityFiltersModal.native.test.tsx.native-snap b/..._/features/accessibility/components/AccessibilityFiltersModal.native.test.tsx.native-snap
@@ -523,7 +523,7 @@ exports[`<AccessibilityFiltersModal /> should render modal correctly 1`] = `
                           "borderColor": "#696A6F",
                           "borderRadius": 4,
                           "borderStyle": "solid",
-                          "borderWidth": 2,
+                          "borderWidth": 1,
                           "height": 24,
                           "justifyContent": "center",
                           "width": 24,
@@ -537,9 +537,6 @@ exports[`<AccessibilityFiltersModal /> should render modal correctly 1`] = `
                         {
                           "alignSelf": "center",
                           "color": "#161617",
-                          "flexBasis": 0,
-                          "flexGrow": 1,
-                          "flexShrink": 1,
                           "fontFamily": "Montserrat-Medium",
                           "fontSize": 16,
                           "lineHeight": 25.6,
@@ -610,7 +607,7 @@ exports[`<AccessibilityFiltersModal /> should render modal correctly 1`] = `
                           "borderColor": "#696A6F",
                           "borderRadius": 4,
                           "borderStyle": "solid",
-                          "borderWidth": 2,
+                          "borderWidth": 1,
                           "height": 24,
                           "justifyContent": "center",
                           "width": 24,
@@ -624,9 +621,6 @@ exports[`<AccessibilityFiltersModal /> should render modal correctly 1`] = `
                         {
                           "alignSelf": "center",
                           "color": "#161617",
-                          "flexBasis": 0,
-                          "flexGrow": 1,
-                          "flexShrink": 1,
                           "fontFamily": "Montserrat-Medium",
                           "fontSize": 16,
                           "lineHeight": 25.6,
@@ -697,7 +691,7 @@ exports[`<AccessibilityFiltersModal /> should render modal correctly 1`] = `
                           "borderColor": "#696A6F",
                           "borderRadius": 4,
                           "borderStyle": "solid",
-                          "borderWidth": 2,
+                          "borderWidth": 1,
                           "height": 24,
                           "justifyContent": "center",
                           "width": 24,
@@ -711,9 +705,6 @@ exports[`<AccessibilityFiltersModal /> should render modal correctly 1`] = `
                         {
                           "alignSelf": "center",
                           "color": "#161617",
-                          "flexBasis": 0,
-                          "flexGrow": 1,
-                          "flexShrink": 1,
                           "fontFamily": "Montserrat-Medium",
                           "fontSize": 16,
                           "lineHeight": 25.6,
@@ -784,7 +775,7 @@ exports[`<AccessibilityFiltersModal /> should render modal correctly 1`] = `
                           "borderColor": "#696A6F",
                           "borderRadius": 4,
                           "borderStyle": "solid",
-                          "borderWidth": 2,
+                          "borderWidth": 1,
                           "height": 24,
                           "justifyContent": "center",
                           "width": 24,
@@ -798,9 +789,6 @@ exports[`<AccessibilityFiltersModal /> should render modal correctly 1`] = `
                         {
                           "alignSelf": "center",
                           "color": "#161617",
-                          "flexBasis": 0,
-                          "flexGrow": 1,
-                          "flexShrink": 1,
                           "fontFamily": "Montserrat-Medium",
                           "fontSize": 16,
                           "lineHeight": 25.6,

diff --git a/__snapshots__/features/auth/pages/signup/AcceptCgu/AcceptCgu.native.test.tsx.native-snap b/__snapshots__/features/auth/pages/signup/AcceptCgu/AcceptCgu.native.test.tsx.native-snap
@@ -101,7 +101,7 @@ exports[`<AcceptCgu/> should render correctly 1`] = `
             "borderColor": "#696A6F",
             "borderRadius": 4,
             "borderStyle": "solid",
-            "borderWidth": 2,
+            "borderWidth": 1,
             "height": 24,
             "justifyContent": "center",
             "width": 24,
@@ -115,9 +115,6 @@ exports[`<AcceptCgu/> should render correctly 1`] = `
           {
             "alignSelf": "center",
             "color": "#161617",
-            "flexBasis": 0,
-            "flexGrow": 1,
-            "flexShrink": 1,
             "fontFamily": "Montserrat-Medium",
             "fontSize": 16,
             "lineHeight": 25.6,
@@ -199,7 +196,7 @@ exports[`<AcceptCgu/> should render correctly 1`] = `
             "borderColor": "#696A6F",
             "borderRadius": 4,
             "borderStyle": "solid",
-            "borderWidth": 2,
+            "borderWidth": 1,
             "height": 24,
             "justifyContent": "center",
             "width": 24,
@@ -213,9 +210,6 @@ exports[`<AcceptCgu/> should render correctly 1`] = `
           {
             "alignSelf": "center",
             "color": "#161617",
-            "flexBasis": 0,
-            "flexGrow": 1,
-            "flexShrink": 1,
             "fontFamily": "Montserrat-Medium",
             "fontSize": 16,
             "lineHeight": 25.6,
@@ -739,7 +733,7 @@ exports[`<AcceptCgu/> should render correctly for SSO subscription 1`] = `
             "borderColor": "#696A6F",
             "borderRadius": 4,
             "borderStyle": "solid",
-            "borderWidth": 2,
+            "borderWidth": 1,
             "height": 24,
             "justifyContent": "center",
             "width": 24,
@@ -753,9 +747,6 @@ exports[`<AcceptCgu/> should render correctly for SSO subscription 1`] = `
           {
             "alignSelf": "center",
             "color": "#161617",
-            "flexBasis": 0,
-            "flexGrow": 1,
-            "flexShrink": 1,
             "fontFamily": "Montserrat-Medium",
             "fontSize": 16,
             "lineHeight": 25.6,
@@ -857,7 +848,7 @@ exports[`<AcceptCgu/> should render correctly for SSO subscription 1`] = `
             "borderColor": "#696A6F",
             "borderRadius": 4,
             "borderStyle": "solid",
-            "borderWidth": 2,
+            "borderWidth": 1,
             "height": 24,
             "justifyContent": "center",
             "width": 24,
@@ -871,9 +862,6 @@ exports[`<AcceptCgu/> should render correctly for SSO subscription 1`] = `
           {
             "alignSelf": "center",
             "color": "#161617",
-            "flexBasis": 0,
-            "flexGrow": 1,
-            "flexShrink": 1,
             "fontFamily": "Montserrat-Medium",
             "fontSize": 16,
             "lineHeight": 25.6,
@@ -955,7 +943,7 @@ exports[`<AcceptCgu/> should render correctly for SSO subscription 1`] = `
             "borderColor": "#696A6F",
             "borderRadius": 4,
             "borderStyle": "solid",
-            "borderWidth": 2,
+            "borderWidth": 1,
             "height": 24,
             "justifyContent": "center",
             "width": 24,
@@ -969,9 +957,6 @@ exports[`<AcceptCgu/> should render correctly for SSO subscription 1`] = `
           {
             "alignSelf": "center",
             "color": "#161617",
-            "flexBasis": 0,
-            "flexGrow": 1,
-            "flexShrink": 1,
             "fontFamily": "Montserrat-Medium",
             "fontSize": 16,
             "lineHeight": 25.6,

diff --git a/__snapshots__/features/auth/pages/signup/SignupForm.native.test.tsx.native-snap b/__snapshots__/features/auth/pages/signup/SignupForm.native.test.tsx.native-snap
@@ -427,7 +427,7 @@ exports[`Signup Form should render correctly for AcceptCgu 1`] = `
                   "borderColor": "#696A6F",
                   "borderRadius": 4,
                   "borderStyle": "solid",
-                  "borderWidth": 2,
+                  "borderWidth": 1,
                   "height": 24,
                   "justifyContent": "center",
                   "width": 24,
@@ -441,9 +441,6 @@ exports[`Signup Form should render correctly for AcceptCgu 1`] = `
                 {
                   "alignSelf": "center",
                   "color": "#161617",
-                  "flexBasis": 0,
-                  "flexGrow": 1,
-                  "flexShrink": 1,
                   "fontFamily": "Montserrat-Medium",
                   "fontSize": 16,
                   "lineHeight": 25.6,
@@ -525,7 +522,7 @@ exports[`Signup Form should render correctly for AcceptCgu 1`] = `
                   "borderColor": "#696A6F",
                   "borderRadius": 4,
                   "borderStyle": "solid",
-                  "borderWidth": 2,
+                  "borderWidth": 1,
                   "height": 24,
                   "justifyContent": "center",
                   "width": 24,
@@ -539,9 +536,6 @@ exports[`Signup Form should render correctly for AcceptCgu 1`] = `
                 {
                   "alignSelf": "center",
                   "color": "#161617",
-                  "flexBasis": 0,
-                  "flexGrow": 1,
-                  "flexShrink": 1,
                   "fontFamily": "Montserrat-Medium",
                   "fontSize": 16,
                   "lineHeight": 25.6,
@@ -2233,7 +2227,7 @@ exports[`Signup Form should render correctly for SetEmail 1`] = `
                   "borderColor": "#696A6F",
                   "borderRadius": 4,
                   "borderStyle": "solid",
-                  "borderWidth": 2,
+                  "borderWidth": 1,
                   "height": 24,
                   "justifyContent": "center",
                   "width": 24,
@@ -2247,9 +2241,6 @@ exports[`Signup Form should render correctly for SetEmail 1`] = `
                 {
                   "alignSelf": "center",
                   "color": "#161617",
-                  "flexBasis": 0,
-                  "flexGrow": 1,
-                  "flexShrink": 1,
                   "fontFamily": "Montserrat-Medium",
                   "fontSize": 16,
                   "lineHeight": 25.6,

diff --git a/...s/internal/marketingAndCommunication/pages/DeeplinksGenerator.native.test.tsx.native-snap b/...s/internal/marketingAndCommunication/pages/DeeplinksGenerator.native.test.tsx.native-snap
@@ -3376,7 +3376,7 @@ exports[`<DeeplinksGenerator /> should render DeeplinksGenerator 1`] = `
                         "borderColor": "#696A6F",
                         "borderRadius": 4,
                         "borderStyle": "solid",
-                        "borderWidth": 2,
+                        "borderWidth": 1,
                         "height": 24,
                         "justifyContent": "center",
                         "width": 24,
@@ -3390,9 +3390,6 @@ exports[`<DeeplinksGenerator /> should render DeeplinksGenerator 1`] = `
                       {
                         "alignSelf": "center",
                         "color": "#161617",
-                        "flexBasis": 0,
-                        "flexGrow": 1,
-                        "flexShrink": 1,
                         "fontFamily": "Montserrat-Medium",
                         "fontSize": 16,
                         "lineHeight": 25.6,

diff --git a/src/theme/index.ts b/src/theme/index.ts
@@ -551,6 +551,19 @@ export const theme = {
   home: {
     spaceBetweenModules: getSpacing(6),
   },
+  checkbox: {
+    border: {
+      color: {
+        default: ColorsEnum.GREY_DARK,
+        selected: ColorsEnum.PRIMARY,
+      },
+      size: 1,
+    },
+    backgroundColor: {
+      default: ColorsEnum.WHITE,
+      selected: ColorsEnum.PRIMARY,
+    },
+  },
 } as const
 
 export type BaseAppThemeType = typeof theme

diff --git a/src/ui/components/inputs/Checkbox/Checkbox.stories.tsx b/src/ui/components/inputs/Checkbox/Checkbox.stories.tsx
@@ -3,6 +3,7 @@ import { ComponentMeta } from '@storybook/react'
 import React from 'react'
 
 import { VariantsTemplate, type Variants, type VariantsStory } from 'ui/storybook/VariantsTemplate'
+import { TypoDS } from 'ui/theme'
 
 import { Checkbox } from './Checkbox'
 
@@ -32,6 +33,15 @@ const variantConfig: Variants<typeof Checkbox> = [
     label: 'CheckBox required',
     props: { label: 'I have to agree', isChecked: false, required: true },
   },
+  {
+    label: 'CheckBox customised style',
+    props: {
+      label: 'I have to agree',
+      isChecked: true,
+      style: { flexDirection: 'row-reverse', justifyContent: 'space-between' },
+      LabelComponent: TypoDS.Title1,
+    },
+  },
 ]
 
 const Template: VariantsStory<typeof Checkbox> = (args) => (

diff --git a/src/ui/components/inputs/Checkbox/Checkbox.tsx b/src/ui/components/inputs/Checkbox/Checkbox.tsx
@@ -1,4 +1,5 @@
 import React, { FunctionComponent, useCallback } from 'react'
+import { StyleProp, ViewStyle } from 'react-native'
 import styled from 'styled-components/native'
 
 import { useHandleFocus } from 'libs/hooks/useHandleFocus'
@@ -13,12 +14,21 @@ type IsCheckedProps = {
 }
 
 type Props = IsCheckedProps & {
-  label: string
+  label?: string
+  LabelComponent?: FunctionComponent
   onPress: (isChecked: boolean) => void
   required?: boolean
+  style?: StyleProp<ViewStyle>
 }
 
-export const Checkbox: FunctionComponent<Props> = ({ label, isChecked, required, onPress }) => {
+export const Checkbox: FunctionComponent<Props> = ({
+  label,
+  isChecked,
+  required,
+  onPress,
+  LabelComponent = StyledBody,
+  style,
+}) => {
   const { onFocus, onBlur, isFocus } = useHandleFocus()
 
   const onToggle = useCallback(() => {
@@ -32,12 +42,15 @@ export const Checkbox: FunctionComponent<Props> = ({ label, isChecked, required,
       {...accessibleCheckboxProps({ checked: isChecked, label, required })}
       onPress={onToggle}
       onFocus={onFocus}
+      style={style}
       onBlur={onBlur}>
       <Box isChecked={isChecked}>{isChecked ? <CheckboxMark /> : null}</Box>
-      <StyledBody>
-        {label}
-        {required ? '*' : null}
-      </StyledBody>
+      {label ? (
+        <LabelComponent>
+          {label}
+          {required ? '*' : null}
+        </LabelComponent>
+      ) : null}
     </CheckboxContainer>
   )
 }
@@ -55,13 +68,16 @@ const Box = styled.View<IsCheckedProps>(({ isChecked, theme }) => ({
   justifyContent: 'center',
   alignItems: 'center',
   borderRadius: theme.borderRadius.checkbox,
-  border: 2,
-  borderColor: theme.colors.greyDark,
-  backgroundColor: isChecked ? theme.colors.greyDark : theme.colors.white,
+  border: theme.checkbox.border.size,
+  borderColor: isChecked
+    ? theme.checkbox.border.color.selected
+    : theme.checkbox.border.color.default,
+  backgroundColor: isChecked
+    ? theme.checkbox.backgroundColor.selected
+    : theme.checkbox.backgroundColor.default,
 }))
 
 const StyledBody = styled(TypoDS.Body)({
   alignSelf: 'center',
   paddingLeft: getSpacing(4),
-  flex: 1,
 })