feat(ui): use material checkboxes

src/components/Connection/GRDFConnect/StepConsent.tsx

+import { Checkbox } from '@material-ui/core'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import React from 'react'
 
@@ -29,10 +30,8 @@ const StepConsent = ({
         <li>{t('auth.grdfgrandlyon.consentLi2')}</li>
       </ul>
       <label htmlFor="dataConsentGrdf" className="inline">
-        <input
+        <Checkbox
           id="dataConsentGrdf"
-          type="checkbox"
-          className="inputCheckbox"
           checked={formConsent.dataConsent}
           onChange={e =>
             setFormConsent(prev => ({ ...prev, dataConsent: e.target.checked }))
@@ -46,10 +45,8 @@ const StepConsent = ({
         />
       </label>
       <label htmlFor="pceConfirm" className="inline">
-        <input
+        <Checkbox
           id="pceConfirm"
-          type="checkbox"
-          className="inputCheckbox"
           checked={formConsent.pceConfirm}
           onChange={e =>
             setFormConsent(prev => ({ ...prev, pceConfirm: e.target.checked }))

src/components/Connection/SGEConnect/StepConsent.tsx

+import { Checkbox } from '@material-ui/core'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { SgeStore } from 'models'
 import React from 'react'
@@ -25,10 +26,8 @@ const StepConsent = ({ sgeState, onChange }: StepConsentProps) => {
         <li>{t('auth.enedissgegrandlyon.consentLi4')}</li>
       </ul>
       <label htmlFor="dataConsentSge" className="inline">
-        <input
+        <Checkbox
           id="dataConsentSge"
-          type="checkbox"
-          className="inputCheckbox"
           onChange={e => onChange('dataConsent', e.target.checked)}
           checked={sgeState.dataConsent}
           required
@@ -40,10 +39,8 @@ const StepConsent = ({ sgeState, onChange }: StepConsentProps) => {
         />
       </label>
       <label htmlFor="pdlConfirm" className="inline">
-        <input
+        <Checkbox
           id="pdlConfirm"
-          type="checkbox"
-          className="inputCheckbox"
           onChange={e => onChange('pdlConfirm', e.target.checked)}
           checked={sgeState.pdlConfirm}
           required

src/components/Connection/SGEConnect/__snapshots__/StepConsent.spec.tsx.snap

@@ -35,12 +35,36 @@ exports[`StepConsent component should be rendered correctly 1`] = `
       class="inline"
       for="dataConsentSge"
     >
-      <input
-        class="inputCheckbox"
-        id="dataConsentSge"
-        required=""
-        type="checkbox"
-      />
+      <span
+        aria-disabled="false"
+        class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
+      >
+        <span
+          class="MuiIconButton-label"
+        >
+          <input
+            class="PrivateSwitchBase-input-4"
+            data-indeterminate="false"
+            id="dataConsentSge"
+            required=""
+            type="checkbox"
+            value=""
+          />
+          <svg
+            aria-hidden="true"
+            class="MuiSvgIcon-root"
+            focusable="false"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+            />
+          </svg>
+        </span>
+        <span
+          class="MuiTouchRipple-root"
+        />
+      </span>
       <span>
         auth.enedissgegrandlyon.consentCheck1
       </span>
@@ -49,12 +73,36 @@ exports[`StepConsent component should be rendered correctly 1`] = `
       class="inline"
       for="pdlConfirm"
     >
-      <input
-        class="inputCheckbox"
-        id="pdlConfirm"
-        required=""
-        type="checkbox"
-      />
+      <span
+        aria-disabled="false"
+        class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
+      >
+        <span
+          class="MuiIconButton-label"
+        >
+          <input
+            class="PrivateSwitchBase-input-4"
+            data-indeterminate="false"
+            id="pdlConfirm"
+            required=""
+            type="checkbox"
+            value=""
+          />
+          <svg
+            aria-hidden="true"
+            class="MuiSvgIcon-root"
+            focusable="false"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+            />
+          </svg>
+        </span>
+        <span
+          class="MuiTouchRipple-root"
+        />
+      </span>
       <span>
         auth.enedissgegrandlyon.consentCheck2
       </span>

src/components/Connection/connection.scss

@@ -111,7 +111,7 @@
         }
         cursor: pointer;
 
-        span span {
+        span.gold {
           color: $gold-shadow;
         }
       }

src/components/Options/ExportData/ExportData.tsx

@@ -3,6 +3,7 @@ import {
   AccordionDetails,
   AccordionSummary,
   Button,
+  Checkbox,
 } from '@material-ui/core'
 import chevronDown from 'assets/icons/ico/chevron-down.svg'
 import exportIcon from 'assets/icons/ico/export.svg'
@@ -63,21 +64,6 @@ const ExportData = () => {
     }
   }, [consumptionService])
 
-  const fluidCheckbox = () =>
-    exportableFluids.map(fluidType => (
-      <label htmlFor={`export-${fluidType}`} key={fluidType}>
-        <input
-          id={`export-${fluidType}`}
-          type="checkbox"
-          className="inputCheckbox"
-          value={fluidType}
-          onChange={() => handleChange(fluidType)}
-          checked={answer.includes(fluidType)}
-        />
-        {t(`FLUID.${FluidType[fluidType]}.LABEL`)}
-      </label>
-    ))
-
   const handleDone = (e?: unknown) => {
     if (e) {
       setHasError(true)
@@ -123,7 +109,17 @@ const ExportData = () => {
                 <div className="text-15-normal grey">{t('export.no_data')}</div>
               ) : (
                 <>
-                  {fluidCheckbox()}
+                  {exportableFluids.map(fluidType => (
+                    <label htmlFor={`export-${fluidType}`} key={fluidType}>
+                      <Checkbox
+                        id={`export-${fluidType}`}
+                        value={fluidType}
+                        onChange={() => handleChange(fluidType)}
+                        checked={answer.includes(fluidType)}
+                      />
+                      {t(`FLUID.${FluidType[fluidType]}.LABEL`)}
+                    </label>
+                  ))}
                   <Button
                     aria-label={t(
                       'profile_type.accessibility.button_export_data'

src/components/Terms/TermsView.tsx

-import { Button } from '@material-ui/core'
+import { Button, Checkbox } from '@material-ui/core'
 import { useClient } from 'cozy-client'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import React, { useCallback, useState } from 'react'
@@ -54,10 +54,8 @@ const TermsView = () => {
           <div className="terms-content">
             <DataShareConsentContent />
             <label htmlFor="dataConsent" className="inline">
-              <input
+              <Checkbox
                 id="dataConsent"
-                type="checkbox"
-                className="inputCheckbox"
                 onChange={e => setDataConsentValidation(e.target.checked)}
                 checked={dataConsentValidation}
                 required
@@ -65,10 +63,8 @@ const TermsView = () => {
               {t('dataShare.validDataConsent')}
             </label>
             <label htmlFor="gcu" className="inline">
-              <input
+              <Checkbox
                 id="gcu"
-                type="checkbox"
-                className="inputCheckbox"
                 onChange={e => setGCUValidation(e.target.checked)}
                 checked={GCUValidation}
                 required
@@ -96,10 +92,8 @@ const TermsView = () => {
             </label>
             {!sendAnalysisNotification && (
               <label htmlFor="newsletter" className="inline">
-                <input
+                <Checkbox
                   id="newsletter"
-                  type="checkbox"
-                  className="inputCheckbox"
                   onChange={e => setAcceptNewsletter(e.target.checked)}
                   checked={acceptNewsletter}
                 />

src/components/Terms/__snapshots__/TermsView.spec.tsx.snap

@@ -104,24 +104,72 @@ exports[`TermsView component should be rendered correctly 1`] = `
         class="inline"
         for="dataConsent"
       >
-        <input
-          class="inputCheckbox"
-          id="dataConsent"
-          required=""
-          type="checkbox"
-        />
+        <span
+          aria-disabled="false"
+          class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
+        >
+          <span
+            class="MuiIconButton-label"
+          >
+            <input
+              class="PrivateSwitchBase-input-4"
+              data-indeterminate="false"
+              id="dataConsent"
+              required=""
+              type="checkbox"
+              value=""
+            />
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root"
+              focusable="false"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+              />
+            </svg>
+          </span>
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </span>
         dataShare.validDataConsent
       </label>
       <label
         class="inline"
         for="gcu"
       >
-        <input
-          class="inputCheckbox"
-          id="gcu"
-          required=""
-          type="checkbox"
-        />
+        <span
+          aria-disabled="false"
+          class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
+        >
+          <span
+            class="MuiIconButton-label"
+          >
+            <input
+              class="PrivateSwitchBase-input-4"
+              data-indeterminate="false"
+              id="gcu"
+              required=""
+              type="checkbox"
+              value=""
+            />
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root"
+              focusable="false"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+              />
+            </svg>
+          </span>
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </span>
         <div>
           <span>
             dataShare.validCGU

src/components/Terms/termsView.scss

@@ -5,13 +5,6 @@
   box-sizing: border-box;
   width: 100vw;
   overflow-x: hidden;
-  p,
-  ul,
-  li,
-  label,
-  span {
-    color: $grey-bright;
-  }
   h1 {
     color: $gold-shadow;
     font-weight: 800;

src/components/theme.ts

@@ -7,6 +7,9 @@ export const theme = createTheme({
       main: '#F1C017',
       '500': '#579eff',
     },
+    secondary: {
+      main: '#F1C017',
+    },
   },
   typography: { fontFamily: ['Lato'].join(',') },
   overrides: {
@@ -36,5 +39,10 @@ export const theme = createTheme({
         color: '#e0e0e0',
       },
     },
+    MuiCheckbox: {
+      root: {
+        padding: 0,
+      },
+    },
   },
 })

src/locales/fr.json

@@ -214,7 +214,7 @@
       "consentLi2": "L'historique et le relevé de vos consommations au pas de temps 30 minutes",
       "consentLi3": "Les puissances maximales atteintes quotidiennement",
       "consentLi4": "Les données contractuelles (début de contrat et puissance souscrite)",
-      "consentCheck1": "Je consens à partager les données personnelles ci-dessus pour une durée d'<span>un\u00a0an</span> *",
+      "consentCheck1": "Je consens à partager les données personnelles ci-dessus pour une durée d'<span class='gold'>un\u00a0an</span> *",
       "consentCheck2": "J’atteste être le titulaire du point de livraison (PDL) renseigné à l’étape précédente *"
     },
     "grdfgrandlyon": {
@@ -243,7 +243,7 @@
       "textConsent": "Afin de vous offrir des fonctionnalités de visualisation et d'analyse, Ecolyo a besoin des données suivantes\u00a0:",
       "consentLi1": "L'historique de vos consommations (jusqu’à 36 mois) et le relevé quotidien de vos consommations",
       "consentLi2": "Les données contractuelles (type de compteur, date de début de contrat)",
-      "consentCheck1": "Je consens à partager les données personnelles ci-dessus pour une durée d'<span>un\u00a0an</span> *",
+      "consentCheck1": "Je consens à partager les données personnelles ci-dessus pour une durée d'<span class='gold'>un\u00a0an</span> *",
       "consentCheck2": "J’atteste être le titulaire du point de livraison (PCE) renseigné à l’étape précédente *",
       "waiting": {
         "mailSent": "Un mail vous a été envoyé...",

src/styles/base/_mixins.scss

@@ -20,46 +20,3 @@
   }
   transition: all 150ms ease-in-out;
 }
-
-@mixin checkBox($foreground, $background) {
-  width: 24px;
-  min-width: 24px;
-  height: 24px;
-  display: flex;
-  align-items: center;
-  border-radius: 4px;
-
-  cursor: pointer;
-  appearance: none;
-  background: $background;
-  position: relative;
-  border: solid 1px $grey-dark;
-
-  &:checked {
-    background: $foreground;
-    border-color: $foreground;
-    // Custom check mark
-    &:before,
-    &:after {
-      content: '';
-      position: absolute;
-      display: inline-block;
-      background: $dark-light-2;
-      border-radius: 0.5rem;
-    }
-    &:before {
-      width: 3px;
-      height: 12px;
-      left: 10px;
-      top: 4px;
-      transform: rotate(41deg);
-    }
-    &:after {
-      width: 3px;
-      height: 6px;
-      left: 5px;
-      top: 8px;
-      transform: rotate(133deg);
-    }
-  }
-}

src/styles/base/_typography.scss

@@ -13,7 +13,6 @@ h4,
 h5,
 h6,
 p {
-  color: $soft-grey;
   font-family: $text-font;
 }
 

src/styles/components/_input.scss

@@ -28,10 +28,6 @@ input.inputNumber {
   text-align: center;
 }
 
-input.inputCheckbox {
-  @include checkBox($gold-shadow, $dark-light-2);
-}
-
 input:focus-visible {
   outline: 2px solid $blue-accessibility;
   outline-offset: 2px;