feat(ecogestures): animate ecogesture details

src/components/Ecogesture/EcogestureModal/EcogestureModal.tsx

+import { Collapse } from '@material-ui/core'
 import Button from '@material-ui/core/Button'
 import Dialog from '@material-ui/core/Dialog'
 import IconButton from '@material-ui/core/IconButton'
 import CloseIcon from 'assets/icons/ico/close.svg'
 import defaultIcon from 'assets/icons/visu/ecogesture/default.svg'
-import classNames from 'classnames'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
 import useExploration from 'components/Hooks/useExploration'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
@@ -34,12 +34,10 @@ const EcogestureModal = ({
   const { t } = useI18n()
   const { currentChallenge } = useAppSelector(state => state.ecolyo.challenge)
   const [ecogestureIcon, setEcogestureIcon] = useState('')
-  const [isMoreDetail, setIsMoreDetail] = useState(false)
+  const [showDetails, setShowDetails] = useState(false)
 
   const [, setValidExploration] = useExploration()
-  const toggleMoreDetail = () => {
-    setIsMoreDetail(prev => !prev)
-  }
+
   useEffect(() => {
     async function handleEcogestureIcon() {
       const icon = await importIconById(ecogesture.id, 'ecogesture')
@@ -124,26 +122,22 @@ const EcogestureModal = ({
             </Button>
           ) : (
             <>
-              <div
-                className={classNames('em-description text-16-normal-150', {
-                  ['block']: isMoreDetail === true,
-                })}
-              >
-                {ecogesture.longDescription}
-              </div>
+              <Collapse in={showDetails}>
+                <div className="em-description text-16-normal-150">
+                  {ecogesture.longDescription}
+                </div>
+              </Collapse>
               <Button
                 aria-label={t(
                   'ecogesture_modal.accessibility.button_see_more_detail'
                 )}
-                onClick={toggleMoreDetail}
+                onClick={() => setShowDetails(prev => !prev)}
                 classes={{
                   root: 'btn-secondary-negative',
                   label: 'text-14-normal',
                 }}
               >
-                {isMoreDetail
-                  ? t('ecogesture_modal.show_less')
-                  : t('ecogesture_modal.show_more')}
+                {t(`ecogesture_modal.show_${showDetails ? 'less' : 'more'}`)}
               </Button>
             </>
           )}

src/components/Ecogesture/EcogestureModal/ecogestureModal.scss

@@ -84,11 +84,7 @@
       text-align: center;
       margin: 1.5rem 0 1rem;
     }
-    .em-description {
-      display: none;
-      margin: 0.5rem;
-      text-align: left;
-    }
+
     button.btn-action-launch {
       background: $blue-radial-gradient;
       border: none;

src/components/Ecogesture/SingleEcogestureView.tsx

@@ -29,7 +29,7 @@ const SingleEcogestureView = () => {
   const client = useClient()
   const [ecogesture, setEcogesture] = useState<Ecogesture>()
   const [ecogestureIcon, setEcogestureIcon] = useState<string>('')
-  const [isMoreDetail, setIsMoreDetail] = useState<boolean>(false)
+  const [showDetails, setShowDetails] = useState<boolean>(false)
   const [isDoing, setIsDoing] = useState<boolean>(false)
   const [isObjective, setIsObjective] = useState<boolean>(false)
   const [isLoading, setIsLoading] = useState<boolean>(true)
@@ -152,13 +152,13 @@ const SingleEcogestureView = () => {
               </div>
               <div
                 className="showMore text-15-normal"
-                onClick={() => setIsMoreDetail(prev => !prev)}
+                onClick={() => setShowDetails(prev => !prev)}
                 role="button"
               >
-                {t(`ecogesture_modal.show_${isMoreDetail ? 'less' : 'more'}`)}
+                {t(`ecogesture_modal.show_${showDetails ? 'less' : 'more'}`)}
               </div>
 
-              <Collapse in={isMoreDetail}>
+              <Collapse in={showDetails}>
                 <div className="longDescription text-16-normal-150">
                   {ecogesture.longDescription}
                 </div>