From 41b3fefea014da0fd30dad33968dab1abdf07272 Mon Sep 17 00:00:00 2001
From: Bastien DUMONT <bdumont@grandlyon.com>
Date: Wed, 22 Nov 2023 12:34:49 +0000
Subject: [PATCH] fix(ui): primary button above secondary
---
.../ExpiredConsentModal.tsx | 18 +++++-----
.../ExpiredConsentModal.spec.tsx.snap | 12 +++----
.../DeleteGRDFAccountModal.tsx | 14 ++++----
.../DeleteGRDFAccountModal.spec.tsx.snap | 12 +++----
.../PartnerConnectModal/EpglConnectModal.tsx | 28 +++++++--------
.../PartnerConnectModal/GrdfConnectModal.tsx | 36 +++++++++----------
.../StepContent.interface.ts | 4 +--
.../EcogestureInitModal.spec.tsx | 4 +--
.../EcogestureInitModal.tsx | 14 ++++----
.../EcogestureInitModal.spec.tsx.snap | 12 +++----
.../EcogestureFormEquipment.spec.tsx | 11 +++---
src/locales/fr.json | 2 +-
12 files changed, 82 insertions(+), 85 deletions(-)
diff --git a/src/components/Connection/ExpiredConsentModal/ExpiredConsentModal.tsx b/src/components/Connection/ExpiredConsentModal/ExpiredConsentModal.tsx
index 6e9206ed4..f922cb1ce 100644
--- a/src/components/Connection/ExpiredConsentModal/ExpiredConsentModal.tsx
+++ b/src/components/Connection/ExpiredConsentModal/ExpiredConsentModal.tsx
@@ -95,15 +95,6 @@ const ExpiredConsentModal = ({
{t(`consent_outdated.text2.${fluidType}`)}
</div>
<div className="buttons">
- <Button
- aria-label={t('consent_outdated.later')}
- onClick={handleCloseClick}
- className="btnSecondary"
- >
- {fluidType === FluidType.ELECTRICITY
- ? t('consent_outdated.no')
- : t('consent_outdated.later')}
- </Button>
<Button
aria-label={t('consent_outdated.go')}
onClick={launchUpdateConsent}
@@ -113,6 +104,15 @@ const ExpiredConsentModal = ({
? t('consent_outdated.yes')
: t('consent_outdated.go')}
</Button>
+ <Button
+ aria-label={t('consent_outdated.later')}
+ onClick={handleCloseClick}
+ className="btnSecondary"
+ >
+ {fluidType === FluidType.ELECTRICITY
+ ? t('consent_outdated.no')
+ : t('consent_outdated.later')}
+ </Button>
</div>
</div>
</Dialog>
diff --git a/src/components/Connection/ExpiredConsentModal/__snapshots__/ExpiredConsentModal.spec.tsx.snap b/src/components/Connection/ExpiredConsentModal/__snapshots__/ExpiredConsentModal.spec.tsx.snap
index 63df43d81..bc66bb1e2 100644
--- a/src/components/Connection/ExpiredConsentModal/__snapshots__/ExpiredConsentModal.spec.tsx.snap
+++ b/src/components/Connection/ExpiredConsentModal/__snapshots__/ExpiredConsentModal.spec.tsx.snap
@@ -93,30 +93,30 @@ exports[`ExpiredConsentModal component should be rendered correctly 1`] = `
class="buttons"
>
<button
- aria-label="consent_outdated.later"
- class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
+ aria-label="consent_outdated.go"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
tabindex="0"
type="button"
>
<span
class="MuiButton-label"
>
- consent_outdated.no
+ consent_outdated.yes
</span>
<span
class="MuiTouchRipple-root"
/>
</button>
<button
- aria-label="consent_outdated.go"
- class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
+ aria-label="consent_outdated.later"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
tabindex="0"
type="button"
>
<span
class="MuiButton-label"
>
- consent_outdated.yes
+ consent_outdated.no
</span>
<span
class="MuiTouchRipple-root"
diff --git a/src/components/Connection/GRDFDeleteAccountModal/DeleteGRDFAccountModal.tsx b/src/components/Connection/GRDFDeleteAccountModal/DeleteGRDFAccountModal.tsx
index 83c2a10c8..f47a29865 100644
--- a/src/components/Connection/GRDFDeleteAccountModal/DeleteGRDFAccountModal.tsx
+++ b/src/components/Connection/GRDFDeleteAccountModal/DeleteGRDFAccountModal.tsx
@@ -60,13 +60,6 @@ const DeleteGRDFAccountModal = ({
{t(`delete_grdf_modal.text3`)}
</div>
<div className="buttons">
- <Button
- aria-label={t(`delete_grdf_modal.cancel`)}
- onClick={handleCloseClick}
- className="btnSecondary"
- >
- {t(`delete_grdf_modal.cancel`)}
- </Button>
<Button
aria-label={t(`delete_grdf_modal.go`)}
onClick={handleDelete}
@@ -74,6 +67,13 @@ const DeleteGRDFAccountModal = ({
>
{t(`delete_grdf_modal.go`)}
</Button>
+ <Button
+ aria-label={t(`delete_grdf_modal.cancel`)}
+ onClick={handleCloseClick}
+ className="btnSecondary"
+ >
+ {t(`delete_grdf_modal.cancel`)}
+ </Button>
</div>
</div>
</Dialog>
diff --git a/src/components/Connection/GRDFDeleteAccountModal/__snapshots__/DeleteGRDFAccountModal.spec.tsx.snap b/src/components/Connection/GRDFDeleteAccountModal/__snapshots__/DeleteGRDFAccountModal.spec.tsx.snap
index e5abef428..901dd8ffa 100644
--- a/src/components/Connection/GRDFDeleteAccountModal/__snapshots__/DeleteGRDFAccountModal.spec.tsx.snap
+++ b/src/components/Connection/GRDFDeleteAccountModal/__snapshots__/DeleteGRDFAccountModal.spec.tsx.snap
@@ -95,30 +95,30 @@ exports[`DeleteGRDFAccountModal component should be rendered correctly 1`] = `
class="buttons"
>
<button
- aria-label="delete_grdf_modal.cancel"
- class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
+ aria-label="delete_grdf_modal.go"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
tabindex="0"
type="button"
>
<span
class="MuiButton-label"
>
- delete_grdf_modal.cancel
+ delete_grdf_modal.go
</span>
<span
class="MuiTouchRipple-root"
/>
</button>
<button
- aria-label="delete_grdf_modal.go"
- class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
+ aria-label="delete_grdf_modal.cancel"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
tabindex="0"
type="button"
>
<span
class="MuiButton-label"
>
- delete_grdf_modal.go
+ delete_grdf_modal.cancel
</span>
<span
class="MuiTouchRipple-root"
diff --git a/src/components/Connection/PartnerConnectModal/EpglConnectModal.tsx b/src/components/Connection/PartnerConnectModal/EpglConnectModal.tsx
index 177e17066..404ab8939 100644
--- a/src/components/Connection/PartnerConnectModal/EpglConnectModal.tsx
+++ b/src/components/Connection/PartnerConnectModal/EpglConnectModal.tsx
@@ -51,7 +51,12 @@ const EpglConnectModal = ({
const steps: Record<StepEnum, StepContent> = {
[StepEnum.DoYouHaveAccount]: {
content: <EpglDoYouHaveAccount />,
- leftButton: (
+ topButton: (
+ <Button onClick={handleShowForm} className="btnPrimary">
+ {t('auth.button_connect')}
+ </Button>
+ ),
+ bottomButton: (
<Button
onClick={() => setCurrentStep(StepEnum.CreateAccount)}
className="btnSecondary"
@@ -59,15 +64,15 @@ const EpglConnectModal = ({
{t('auth.button_create_account')}
</Button>
),
- rightButton: (
- <Button onClick={handleShowForm} className="btnPrimary">
- {t('auth.button_connect')}
- </Button>
- ),
},
[StepEnum.CreateAccount]: {
content: <EpglCreateAccount />,
- leftButton: (
+ topButton: (
+ <Button onClick={handleGoToPartnerSite} className="btnPrimary">
+ {t('auth.eglgrandlyon.button_go_to_partner_site')}
+ </Button>
+ ),
+ bottomButton: (
<Button
onClick={() => setCurrentStep(StepEnum.DoYouHaveAccount)}
className="btnSecondary"
@@ -75,11 +80,6 @@ const EpglConnectModal = ({
{t('auth.button_previous')}
</Button>
),
- rightButton: (
- <Button onClick={handleGoToPartnerSite} className="btnPrimary">
- {t('auth.eglgrandlyon.button_go_to_partner_site')}
- </Button>
- ),
},
}
@@ -103,8 +103,8 @@ const EpglConnectModal = ({
{steps[currentStep].content}
</div>
<div className="partners-connection-step-navigation">
- {steps[currentStep].leftButton}
- {steps[currentStep].rightButton}
+ {steps[currentStep].topButton}
+ {steps[currentStep].bottomButton}
</div>
</Dialog>
)
diff --git a/src/components/Connection/PartnerConnectModal/GrdfConnectModal.tsx b/src/components/Connection/PartnerConnectModal/GrdfConnectModal.tsx
index 7c4f3a658..5e5ca5cf2 100644
--- a/src/components/Connection/PartnerConnectModal/GrdfConnectModal.tsx
+++ b/src/components/Connection/PartnerConnectModal/GrdfConnectModal.tsx
@@ -56,26 +56,31 @@ const GrdfConnectModal = ({
const steps: Record<StepEnum, StepContent> = {
[StepEnum.DoYouHaveAccount]: {
content: <GrdfDoYouHaveAccount />,
- leftButton: (
+ topButton: (
<Button
- onClick={() => setCurrentStep(StepEnum.CreateAccount)}
- className="btnSecondary"
+ onClick={() => setCurrentStep(StepEnum.GiveConsent)}
+ className="btnPrimary"
>
- {t('auth.button_create_account')}
+ {t('auth.button_has_account')}
</Button>
),
- rightButton: (
+ bottomButton: (
<Button
- onClick={() => setCurrentStep(StepEnum.GiveConsent)}
- className="btnPrimary"
+ onClick={() => setCurrentStep(StepEnum.CreateAccount)}
+ className="btnSecondary"
>
- {t('auth.button_has_account')}
+ {t('auth.button_create_account')}
</Button>
),
},
[StepEnum.CreateAccount]: {
content: <GrdfCreateAccount />,
- leftButton: (
+ topButton: (
+ <Button onClick={handleGoToPartnerSite} className="btnPrimary">
+ {t('auth.grdfgrandlyon.button_go_to_partner_site')}
+ </Button>
+ ),
+ bottomButton: (
<Button
onClick={() => setCurrentStep(StepEnum.DoYouHaveAccount)}
className="btnSecondary"
@@ -83,20 +88,15 @@ const GrdfConnectModal = ({
{t('auth.button_previous')}
</Button>
),
- rightButton: (
- <Button onClick={handleGoToPartnerSite} className="btnPrimary">
- {t('auth.grdfgrandlyon.button_go_to_partner_site')}
- </Button>
- ),
},
[StepEnum.GiveConsent]: {
content: <GrdfGiveConsent />,
- leftButton: (
+ topButton: <GrdfFormOAuth onSuccess={handleSuccess} />,
+ bottomButton: (
<Button onClick={handleGiveConsentPrevious} className="btnSecondary">
{t('auth.button_previous')}
</Button>
),
- rightButton: <GrdfFormOAuth onSuccess={handleSuccess} />,
},
}
@@ -120,8 +120,8 @@ const GrdfConnectModal = ({
{steps[currentStep].content}
</div>
<div className="partners-connection-step-navigation">
- {steps[currentStep].leftButton}
- {steps[currentStep].rightButton}
+ {steps[currentStep].topButton}
+ {steps[currentStep].bottomButton}
</div>
</Dialog>
)
diff --git a/src/components/Connection/PartnerConnectModal/StepContent.interface.ts b/src/components/Connection/PartnerConnectModal/StepContent.interface.ts
index 636a1283d..8e62bd015 100644
--- a/src/components/Connection/PartnerConnectModal/StepContent.interface.ts
+++ b/src/components/Connection/PartnerConnectModal/StepContent.interface.ts
@@ -1,5 +1,5 @@
export interface StepContent {
content: JSX.Element
- leftButton: JSX.Element
- rightButton: JSX.Element
+ topButton: JSX.Element
+ bottomButton: JSX.Element
}
diff --git a/src/components/Ecogesture/EcogestureInitModal/EcogestureInitModal.spec.tsx b/src/components/Ecogesture/EcogestureInitModal/EcogestureInitModal.spec.tsx
index bca146d8c..6ff90feae 100644
--- a/src/components/Ecogesture/EcogestureInitModal/EcogestureInitModal.spec.tsx
+++ b/src/components/Ecogesture/EcogestureInitModal/EcogestureInitModal.spec.tsx
@@ -24,7 +24,7 @@ describe('EcogestureInitModal component', () => {
handleLaunchForm={mockHandleLaunchForm}
/>
)
- await userEvent.click(screen.getAllByRole('button')[1])
+ await userEvent.click(screen.getAllByRole('button')[2])
expect(mockHandleClose).toHaveBeenCalledTimes(1)
})
it('should close modal and launch form', async () => {
@@ -35,7 +35,7 @@ describe('EcogestureInitModal component', () => {
handleLaunchForm={mockHandleLaunchForm}
/>
)
- await userEvent.click(screen.getAllByRole('button')[2])
+ await userEvent.click(screen.getAllByRole('button')[1])
expect(mockHandleLaunchForm).toHaveBeenCalledTimes(1)
})
})
diff --git a/src/components/Ecogesture/EcogestureInitModal/EcogestureInitModal.tsx b/src/components/Ecogesture/EcogestureInitModal/EcogestureInitModal.tsx
index 9456da589..4575d4809 100644
--- a/src/components/Ecogesture/EcogestureInitModal/EcogestureInitModal.tsx
+++ b/src/components/Ecogesture/EcogestureInitModal/EcogestureInitModal.tsx
@@ -45,13 +45,6 @@ const EcogestureInitModal = ({
<div className="text-16-normal">{t('ecogesture.initModal.text1')}</div>
<div className="text-16-normal">{t('ecogesture.initModal.text2')}</div>
<div className="buttons-container">
- <Button
- aria-label={t('ecogesture.initModal.btn1')}
- onClick={handleCloseClick}
- className="btnSecondary"
- >
- {t('ecogesture.initModal.btn1')}
- </Button>
<Button
aria-label={t('ecogesture.initModal.btn2')}
onClick={handleLaunchForm}
@@ -59,6 +52,13 @@ const EcogestureInitModal = ({
>
{t('ecogesture.initModal.btn2')}
</Button>
+ <Button
+ aria-label={t('ecogesture.initModal.btn1')}
+ onClick={handleCloseClick}
+ className="btnSecondary"
+ >
+ {t('ecogesture.initModal.btn1')}
+ </Button>
</div>
</div>
</Dialog>
diff --git a/src/components/Ecogesture/EcogestureInitModal/__snapshots__/EcogestureInitModal.spec.tsx.snap b/src/components/Ecogesture/EcogestureInitModal/__snapshots__/EcogestureInitModal.spec.tsx.snap
index 553d5fd25..e0eb85875 100644
--- a/src/components/Ecogesture/EcogestureInitModal/__snapshots__/EcogestureInitModal.spec.tsx.snap
+++ b/src/components/Ecogesture/EcogestureInitModal/__snapshots__/EcogestureInitModal.spec.tsx.snap
@@ -82,30 +82,30 @@ exports[`EcogestureInitModal component should be rendered correctly 1`] = `
class="buttons-container"
>
<button
- aria-label="ecogesture.initModal.btn1"
- class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
+ aria-label="ecogesture.initModal.btn2"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
tabindex="0"
type="button"
>
<span
class="MuiButton-label"
>
- ecogesture.initModal.btn1
+ ecogesture.initModal.btn2
</span>
<span
class="MuiTouchRipple-root"
/>
</button>
<button
- aria-label="ecogesture.initModal.btn2"
- class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
+ aria-label="ecogesture.initModal.btn1"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
tabindex="0"
type="button"
>
<span
class="MuiButton-label"
>
- ecogesture.initModal.btn2
+ ecogesture.initModal.btn1
</span>
<span
class="MuiTouchRipple-root"
diff --git a/src/components/EcogestureForm/EcogestureFormEquipment/EcogestureFormEquipment.spec.tsx b/src/components/EcogestureForm/EcogestureFormEquipment/EcogestureFormEquipment.spec.tsx
index 103be8490..ca613d4b9 100644
--- a/src/components/EcogestureForm/EcogestureFormEquipment/EcogestureFormEquipment.spec.tsx
+++ b/src/components/EcogestureForm/EcogestureFormEquipment/EcogestureFormEquipment.spec.tsx
@@ -6,9 +6,6 @@ import { mockProfileEcogesture } from 'tests/__mocks__/profileEcogesture.mock'
import { createMockEcolyoStore } from 'tests/__mocks__/store'
import EcogestureFormEquipment from './EcogestureFormEquipment'
-const mockSetPreviousStep = jest.fn()
-const mockSetNextStep = jest.fn()
-
jest.mock('../EquipmentIcon/EquipmentIcon', () => 'mock-equipment-icon')
describe('EcogestureFormEquipment component', () => {
@@ -18,8 +15,8 @@ describe('EcogestureFormEquipment component', () => {
<Provider store={store}>
<EcogestureFormEquipment
currentProfileEcogesture={mockProfileEcogesture}
- setPreviousStep={mockSetPreviousStep}
- setNextStepEcogestureForm={mockSetNextStep}
+ setPreviousStep={jest.fn()}
+ setNextStepEcogestureForm={jest.fn()}
step={0}
/>
</Provider>
@@ -32,8 +29,8 @@ describe('EcogestureFormEquipment component', () => {
<Provider store={store}>
<EcogestureFormEquipment
currentProfileEcogesture={mockProfileEcogesture}
- setPreviousStep={mockSetPreviousStep}
- setNextStepEcogestureForm={mockSetNextStep}
+ setPreviousStep={jest.fn()}
+ setNextStepEcogestureForm={jest.fn()}
step={0}
/>
</Provider>
diff --git a/src/locales/fr.json b/src/locales/fr.json
index b6a938424..00005fd85 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -876,7 +876,7 @@
"p1b": "Directrice de publication : ",
"p1": "Blandine MELAY, Responsable du Service Transition Énergétique",
"p2b": "Animation éditoriale, gestion et mise à jour : ",
- "p2": "Marion BERTHOLON, Chargée de services numériques pour la transition énergétique",
+ "p2": "Marion BERTHOLON, Chargée de services numériques pour la transition énergétique",
"p3b": "Photographies : ",
"p3": "sauf mention contraire, les photos sont la propriété de la Métropole de Lyon",
"p4b": "Conception et Charte graphique : ",
--
GitLab