From 10cf37c86bdf2314b8d432fe04d6b6ec2ddd84d4 Mon Sep 17 00:00:00 2001
From: Yoan VALLET <ext.sopra.yvallet@grandlyon.com>
Date: Wed, 31 Mar 2021 10:59:46 +0200
Subject: [PATCH] feat: update Profile buttons
---
.../Feedback/FeedbackModal.spec.tsx | 4 +-
src/components/Options/ProfileTypeOptions.tsx | 11 +-
.../ProfileType/ProfileTypeFinished.tsx | 9 +-
.../ProfileTypeNavigation.spec.tsx | 8 +-
.../ProfileType/ProfileTypeNavigation.tsx | 130 +++++++++---------
src/locales/fr.json | 17 ++-
6 files changed, 98 insertions(+), 81 deletions(-)
diff --git a/src/components/Feedback/FeedbackModal.spec.tsx b/src/components/Feedback/FeedbackModal.spec.tsx
index fc0a400a2..7b6c47d27 100644
--- a/src/components/Feedback/FeedbackModal.spec.tsx
+++ b/src/components/Feedback/FeedbackModal.spec.tsx
@@ -3,7 +3,7 @@ import * as reactRedux from 'react-redux'
import { shallow } from 'enzyme'
import FeedbackModal from 'components/Feedback/FeedbackModal'
-import MuiButton from '@material-ui/core/Button'
+import Button from '@material-ui/core/Button'
import { userChallengeExplo1OnGoing } from '../../../tests/__mocks__/userChallengeData.mock'
const mockSendMail = jest.fn()
@@ -93,7 +93,7 @@ describe('FeedbackModal functionnalities', () => {
wrapper
.find('#idFeedbackDescription')
.simulate('change', { target: { value: 'La description' } })
- wrapper.find(MuiButton).simulate('click')
+ wrapper.find(Button).simulate('click')
expect(mockSendMail).toHaveBeenCalledWith(
expect.anything(),
diff --git a/src/components/Options/ProfileTypeOptions.tsx b/src/components/Options/ProfileTypeOptions.tsx
index 023fee57e..06036eb0f 100644
--- a/src/components/Options/ProfileTypeOptions.tsx
+++ b/src/components/Options/ProfileTypeOptions.tsx
@@ -2,7 +2,7 @@ import React, { useState, useCallback, useRef } from 'react'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { AppStore } from 'store'
import { useSelector } from 'react-redux'
-import MuiButton from '@material-ui/core/Button'
+import Button from '@material-ui/core/Button'
import './profileTypeOptions.scss'
import {
IndividualOrCollective,
@@ -233,15 +233,18 @@ const ProfileTypeOptions: React.FC = () => {
</div>
</div>
<div className="inline-buttons">
- <MuiButton
+ <Button
+ aria-label={t(
+ 'profile_type.accessibility.button_update_profile'
+ )}
onClick={goToForm}
classes={{
root: 'btn-secondary-negative',
label: 'text-16-normal',
}}
>
- {t('profile_type.update_profile')}
- </MuiButton>
+ {t('profile_type.button_update_profile')}
+ </Button>
</div>
</div>
</div>
diff --git a/src/components/ProfileType/ProfileTypeFinished.tsx b/src/components/ProfileType/ProfileTypeFinished.tsx
index 7f9702452..38bfcb9dc 100644
--- a/src/components/ProfileType/ProfileTypeFinished.tsx
+++ b/src/components/ProfileType/ProfileTypeFinished.tsx
@@ -5,7 +5,7 @@ import { useDispatch, useSelector } from 'react-redux'
import { useHistory } from 'react-router-dom'
import { updateProfile } from 'store/profile/profile.actions'
import { ProfileType } from 'models/profileType.model'
-import MuiButton from '@material-ui/core/Button'
+import Button from '@material-ui/core/Button'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import finishIcon from 'assets/icons/visu/profileType/finish.svg'
import ProfileTypeService from 'services/profileType.service'
@@ -68,7 +68,8 @@ const ProfileTypeFinished: React.FC<ProfileTypeFinishedProps> = ({
<div>{t('profile_type.finished.label1')}</div>
<div>{t('profile_type.finished.label2')}</div>
</div>
- <MuiButton
+ <Button
+ aria-label={t('profile_type.accessibility.button_validate')}
onClick={handleClick}
className={'profile-type-finished-button'}
classes={{
@@ -76,8 +77,8 @@ const ProfileTypeFinished: React.FC<ProfileTypeFinishedProps> = ({
label: 'text-16-normal',
}}
>
- {t('profile_type.finished.OK')}
- </MuiButton>
+ {t('profile_type.finished.button_validate')}
+ </Button>
</div>
)
}
diff --git a/src/components/ProfileType/ProfileTypeNavigation.spec.tsx b/src/components/ProfileType/ProfileTypeNavigation.spec.tsx
index 43e1d743e..601d53936 100644
--- a/src/components/ProfileType/ProfileTypeNavigation.spec.tsx
+++ b/src/components/ProfileType/ProfileTypeNavigation.spec.tsx
@@ -1,7 +1,7 @@
import React from 'react'
import { Provider } from 'react-redux'
import { mount } from 'enzyme'
-import MuiButton from '@material-ui/core/Button'
+import Button from '@material-ui/core/Button'
import {
createMockStore,
mockInitialEcolyoState,
@@ -40,15 +40,15 @@ describe('ProfileTypeNavigation component', () => {
</Provider>
)
wrapper
- .find(MuiButton)
+ .find(Button)
.at(0)
.simulate('click')
wrapper
- .find(MuiButton)
+ .find(Button)
.at(1)
.simulate('click')
expect(wrapper.find('profile-navigation')).toBeTruthy()
- expect(wrapper.find(MuiButton)).toBeTruthy()
+ expect(wrapper.find(Button)).toBeTruthy()
expect(mockhandlePrevious.mock.calls.length).toEqual(1)
expect(mockhandleNext.mock.calls.length).toEqual(1)
})
diff --git a/src/components/ProfileType/ProfileTypeNavigation.tsx b/src/components/ProfileType/ProfileTypeNavigation.tsx
index e24f5ffa7..20e467db5 100644
--- a/src/components/ProfileType/ProfileTypeNavigation.tsx
+++ b/src/components/ProfileType/ProfileTypeNavigation.tsx
@@ -1,62 +1,68 @@
-import React from 'react'
-import 'components/ProfileType/profileTypeNavigation.scss'
-import classNames from 'classnames'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import MuiButton from '@material-ui/core/Button'
-import { ProfileTypeStepForm } from 'enum/profileType.enum'
-
-interface ProfileTypeNavigationProps {
- step: ProfileTypeStepForm
- handlePrevious: Function
- handleNext: Function
- disableNextButton: boolean
-}
-
-const ProfileTypeNavigation: React.FC<ProfileTypeNavigationProps> = ({
- step,
- handlePrevious,
- handleNext,
- disableNextButton,
-}: ProfileTypeNavigationProps) => {
- const { t } = useI18n()
-
- const handlePreviousClick = () => {
- handlePrevious()
- }
- const handleNextClick = () => {
- handleNext()
- }
-
- return (
- <div className="profile-navigation">
- <MuiButton
- onClick={handlePreviousClick}
- className={'profile-navigation-button'}
- disabled={step === ProfileTypeStepForm.HOUSING_TYPE}
- classes={{
- root: 'btn-profile-back',
- label: 'text-16-normal',
- }}
- >
- {`< ${t('profile_type.form.previous')}`}
- </MuiButton>
- <MuiButton
- onClick={handleNextClick}
- className={classNames('profile-navigation-button', {
- ['disabled']: disableNextButton,
- })}
- disabled={disableNextButton}
- classes={{
- root: 'btn-profile-next rounded',
- label: 'text-16-normal',
- }}
- >
- {step === ProfileTypeStepForm.COOKING_FLUID
- ? t('profile_type.form.end')
- : `${t('profile_type.form.next')} >`}
- </MuiButton>
- </div>
- )
-}
-
-export default ProfileTypeNavigation
+import React from 'react'
+import 'components/ProfileType/profileTypeNavigation.scss'
+import classNames from 'classnames'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import Button from '@material-ui/core/Button'
+import { ProfileTypeStepForm } from 'enum/profileType.enum'
+
+interface ProfileTypeNavigationProps {
+ step: ProfileTypeStepForm
+ handlePrevious: Function
+ handleNext: Function
+ disableNextButton: boolean
+}
+
+const ProfileTypeNavigation: React.FC<ProfileTypeNavigationProps> = ({
+ step,
+ handlePrevious,
+ handleNext,
+ disableNextButton,
+}: ProfileTypeNavigationProps) => {
+ const { t } = useI18n()
+
+ const handlePreviousClick = () => {
+ handlePrevious()
+ }
+ const handleNextClick = () => {
+ handleNext()
+ }
+
+ return (
+ <div className="profile-navigation">
+ <Button
+ aria-label={t('profile_type.accessibility.button_previous')}
+ onClick={handlePreviousClick}
+ className={'profile-navigation-button'}
+ disabled={step === ProfileTypeStepForm.HOUSING_TYPE}
+ classes={{
+ root: 'btn-profile-back',
+ label: 'text-16-normal',
+ }}
+ >
+ {`< ${t('profile_type.form.button_previous')}`}
+ </Button>
+ <Button
+ aria-label={
+ step === ProfileTypeStepForm.COOKING_FLUID
+ ? t('profile_type.accessibility.button_end')
+ : t('profile_type.accessibility.button_next')
+ }
+ onClick={handleNextClick}
+ className={classNames('profile-navigation-button', {
+ ['disabled']: disableNextButton,
+ })}
+ disabled={disableNextButton}
+ classes={{
+ root: 'btn-profile-next rounded',
+ label: 'text-16-normal',
+ }}
+ >
+ {step === ProfileTypeStepForm.COOKING_FLUID
+ ? t('profile_type.form.button_end')
+ : `${t('profile_type.form.button_next')} >`}
+ </Button>
+ </div>
+ )
+}
+
+export default ProfileTypeNavigation
diff --git a/src/locales/fr.json b/src/locales/fr.json
index a09f459f8..33d9b385e 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -477,7 +477,7 @@
"profile_type": {
"title_profile": "Profil de consommation",
"read_profile": "Ajuster mon profil",
- "update_profile": "J'ajuste mon profil",
+ "button_update_profile": "J'ajuste mon profil",
"your_profile": "Votre profil",
"multi_choices": "Plusieurs réponses possibles",
"housing_type": {
@@ -624,15 +624,22 @@
"2": "Gaz"
},
"form": {
- "previous": "Précédent",
- "next": "Suivant",
- "end": "Terminer"
+ "button_previous": "Précédent",
+ "button_next": "Suivant",
+ "button_end": "Terminer"
},
"finished": {
"title": "Terminé !",
"label1": "Grâce à ces informations, vous pourrez comparer votre consommation avec un foyer vous ressemblant davantage.",
"label2": "Nous pourrons aussi vous proposer des écogestes adaptés à votre profil.",
- "OK": "OK"
+ "button_validate": "OK"
+ },
+ "accessibility": {
+ "button_end": "Terminer la mise à jour du profil",
+ "button_next": "Aller à la section suivante",
+ "button_previous": "Retour à la section précédente",
+ "button_update_profile": "Ouvrir la page de mise à jour du profil",
+ "button_validate": "Valider"
}
},
"quiz": {
--
GitLab