[#MUI-30] Création d'un composant email (#44)

| Numéro du ticket | Titre du ticket |
|------------------|-----------------|
|                  |                 |

## Description de la PR

## Modification du .env

## Check list

- [ ] Pas de régression
- [ ] TU/TI/TF rédigée
- [ ] TU/TI/TF OK
- [ ] CHANGELOG modifié

Reviewed-on: #44
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>

app/components/malio/radio/RadioButton.test.ts

@@ -153,4 +153,23 @@ describe('MalioRadioButton', () => {
     expect(wrapper.get('input').classes()).toContain('border-red-500')
     expect(wrapper.get('.radio-text').classes()).toContain('font-bold')
   })
+
+  it('uses muted label color and muted border when unchecked', () => {
+    const wrapper = mountRadioButton({label: 'Option 1', value: 'a', modelValue: 'b'})
+
+    expect(wrapper.get('.radio-text').classes()).toContain('text-m-muted')
+    expect(wrapper.get('input').classes()).toContain('border-m-muted')
+  })
+
+  it('uses black label color when checked', () => {
+    const wrapper = mountRadioButton({label: 'Option 1', value: 'a', modelValue: 'a'})
+
+    expect(wrapper.get('.radio-text').classes()).toContain('text-black')
+  })
+
+  it('has checked:border-black on input', () => {
+    const wrapper = mountRadioButton({label: 'Option 1', value: 'a', modelValue: 'a'})
+
+    expect(wrapper.get('input').classes()).toContain('checked:border-black')
+  })
 })

app/components/malio/radio/RadioButton.vue

@@ -117,14 +117,15 @@ const mergedControlClass = computed(() =>
 
 const mergedInputClass = computed(() =>
   twMerge(
-    'h-5 w-5 cursor-pointer appearance-none rounded-full border-2 border-black',
+    'h-5 w-5 cursor-pointer appearance-none rounded-full border-2 border-m-muted checked:border-black',
     props.inputClass,
   ),
 )
 
 const mergedLabelClass = computed(() =>
   twMerge(
-    'radio-text mt-px cursor-pointer text-black',
+    'radio-text mt-px cursor-pointer',
+    isChecked.value ? 'text-black' : 'text-m-muted',
     hasError.value ? 'text-m-danger' : '',
     hasSuccess.value ? 'text-m-success' : '',
     disabled.value ? 'cursor-not-allowed text-black/60' : '',