fix: required field

Author: desoindx

src/components/form/Select.tsx

@@ -1,24 +1,36 @@
 'use client'
 
 import classNames from 'classnames'
-import React, { SelectHTMLAttributes } from 'react'
+import { SelectHTMLAttributes } from 'react'
 import styles from './Input.module.css'
 
 export type SelectProps = SelectHTMLAttributes<HTMLSelectElement> & {
   id: string
   label?: string
   inline?: boolean
   hint?: string
+  withoutColon?: boolean
   padding?: 'sm' | 'lg'
 }
 
-const Select = ({ id, label, hint, inline, padding, className, children, ...selectProps }: SelectProps) => {
+const Select = ({
+  id,
+  label,
+  hint,
+  inline,
+  padding,
+  className,
+  children,
+  withoutColon,
+  ...selectProps
+}: SelectProps) => {
   return (
     <div className={inline ? styles.containerInline : styles.container}>
       {label && (
         <label className={classNames(styles.label, { [styles.labelInline]: inline })} htmlFor={`text-select-${id}`}>
           {label}
-          {selectProps.required && <span className={styles.required}> *</span>} :
+          {selectProps.required && <span className={styles.required}> *</span>}
+          {withoutColon ? '' : ' :'}
           {hint && <span className={classNames(styles.hint, 'text-sm')}>{hint}</span>}
         </label>
       )}

src/components/form/addresses/AddressInput.tsx

@@ -58,7 +58,6 @@ const AddressInput = ({
       {label && (
         <label className={classNames(inputStyles.label, { [inputStyles.labelError]: !!error })} htmlFor={`input-${id}`}>
           {label}
-          {inputProps.required && <span className={inputStyles.required}> *</span>}
           {hint && <span className={classNames(inputStyles.hint, 'text-sm')}>{hint}</span>}
         </label>
       )}

src/components/outils/ItineraireSimulator.tsx

@@ -29,15 +29,8 @@ const ItineraireSimulator = ({ withComparisonMode }: { withComparisonMode: boole
       <div className={styles.simulator}>
         <p>{t('header')}</p>
         <div className={styles.addresses}>
-          <AddressInput
-            large
-            id='itineraire-start'
-            label={t('start')}
-            required
-            place={start?.address}
-            setPlace={setStart}
-          />
-          <AddressInput large id='itineraire-end' label={t('end')} required place={end?.address} setPlace={setEnd} />
+          <AddressInput large id='itineraire-start' label={t('start')} place={start?.address} setPlace={setStart} />
+          <AddressInput large id='itineraire-end' label={t('end')} place={end?.address} setPlace={setEnd} />
         </div>
         <div className={styles.roundTrip}>
           <CheckboxInput id='roundTrip' label={t('roundTrip')} checked={roundTrip} setChecked={setRoundTrip} />

src/components/outils/TeletravailSimulator.module.css

@@ -21,6 +21,9 @@
 .transportMode {
   width: 100%;
 
+  label {
+    width: 100%;
+  }
   select {
     max-width: 100%;
   }

src/components/outils/TeletravailSimulator.tsx

@@ -2,7 +2,7 @@
 
 import { useTranslations } from 'next-intl'
 import Image from 'next/image'
-import React, { useEffect, useMemo, useRef } from 'react'
+import { useEffect, useMemo, useRef } from 'react'
 import useParamContext from 'src/providers/ParamProvider'
 import { Category } from 'types/category'
 import { ComputedEquivalent, DeplacementType } from 'types/equivalent'
@@ -67,19 +67,11 @@ const TeletravailSimulator = () => {
     <>
       <form id='teletravail-simulator' className={styles.simulator}>
         <div className={itineraireStyles.addresses}>
-          <AddressInput
-            large
-            id='teletravail-start'
-            label={t('start')}
-            required
-            place={start?.address}
-            setPlace={setStart}
-          />
-          <AddressInput large id='teletravail-end' label={t('end')} required place={end?.address} setPlace={setEnd} />
+          <AddressInput large id='teletravail-start' label={t('start')} place={start?.address} setPlace={setStart} />
+          <AddressInput large id='teletravail-end' label={t('end')} place={end?.address} setPlace={setEnd} />
         </div>
         <div className={styles.transportMode}>
           <SelectEquivalent
-            required
             label={t('mode')}
             id='mode'
             value={transport}
@@ -88,6 +80,7 @@ const TeletravailSimulator = () => {
               setTransport(event.target.value)
             }}
             equivalents={deplacements}
+            withoutColon
           />
         </div>
         <div className={itineraireStyles.days}>

src/components/outils/equivalents/simulators/UsageNumeriqueEquivalentSimulator.tsx

@@ -2,7 +2,7 @@
 
 import classNames from 'classnames'
 import { useTranslations } from 'next-intl'
-import React, { useMemo } from 'react'
+import { useMemo } from 'react'
 import useParamContext from 'src/providers/ParamProvider'
 import useUsageNumeriqueContext from 'src/providers/UsageNumeriqueProvider'
 import { Category } from 'types/category'
@@ -179,7 +179,6 @@ const UsageNumeriqueEquivalentSimulator = ({ slug }: { slug: 'visio' | 'email' |
           </div>
           <div>
             <Radio
-              required
               className={baseStyles.radio}
               id='radio-construction'
               label={

src/components/outils/usageNumerique/UsageForm.module.css

@@ -16,6 +16,11 @@
   > div {
     max-width: 50%;
     width: 100%;
+
+    > div {
+      align-items: flex-start;
+      width: 100%;
+    }
   }
 
   input {

src/components/shareable/overScreens/TransportShare.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useTranslations } from 'next-intl'
-import React, { useMemo, useState } from 'react'
+import { useMemo, useState } from 'react'
 import useParamContext from 'src/providers/ParamProvider'
 import { Category } from 'types/category'
 import { TransportSimulateur } from 'types/transport'
@@ -94,7 +94,7 @@ const TransportShare = () => {
   return selected ? (
     <>
       <form id='transport-share'>
-        <Radio required id='tabs' label={t('onglet')} hint={t('onglet-hint')}>
+        <Radio id='tabs' label={t('onglet')} hint={t('onglet-hint')}>
           <RadioInput
             value='distance'
             selected={selected}
@@ -132,7 +132,7 @@ const TransportShare = () => {
           />
         )}
         <div className={styles.separator} />
-        <Radio required id='comparisonModes' label={t('mode-share')}>
+        <Radio id='comparisonModes' label={t('mode-share')}>
           <RadioInput
             value='list'
             selected={comparisonMode}