From c49298c4e4f6c199a5d51bfc47bc2a317d8d4d46 Mon Sep 17 00:00:00 2001
From: Bastien DUMONT <bdumont@grandlyon.com>
Date: Thu, 26 Jan 2023 08:08:39 +0000
Subject: [PATCH] fix(header): title hidden on large screens
---
.eslintrc.js | 1 +
src/components/Action/ActionOnGoing.tsx | 2 +-
src/components/Action/ActionView.tsx | 2 +-
.../Analysis/AnalysisConsumption.spec.tsx | 2 +-
src/components/Analysis/AnalysisView.tsx | 24 +++----
src/components/Analysis/PieChart.tsx | 2 +-
src/components/Challenge/ChallengeView.tsx | 20 +++---
src/components/Charts/AxisBottom.tsx | 2 +-
.../CommonKit/ErrorPage/ErrorPage.spec.tsx | 4 +-
.../CommonKit/ErrorPage/ErrorPage.tsx | 10 +--
src/components/Connection/FormLogin.tsx | 2 +-
.../Connection/SGEConnect/SgeConnectView.tsx | 2 +-
.../DataloadConsumptionVisualizer.tsx | 2 +-
.../DataloadSectionDetail.tsx | 2 +-
src/components/Duel/DuelView.tsx | 2 +-
.../Ecogesture/EcogestureCard.spec.tsx | 2 +-
.../Ecogesture/SingleEcogesture.spec.tsx | 8 +--
.../Ecogesture/SingleEcogesture.tsx | 8 +--
.../SingleEcogesture.spec.tsx.snap | 2 -
.../EcogestureForm/EcogestureFormView.tsx | 2 +-
.../EcogestureSelection.tsx | 6 +-
.../EcogestureSelection.spec.tsx.snap | 2 -
.../Exploration/ExplorationView.tsx | 2 +-
src/components/FormGlobal/FormProgress.tsx | 2 +-
src/components/GCU/GCUView.tsx | 8 +--
src/components/Header/CozyBar.tsx | 11 ++-
src/components/Header/Header.spec.tsx | 33 ++++-----
src/components/Header/Header.tsx | 48 +++++--------
src/components/Header/header.scss | 9 ++-
src/components/Home/ConsumptionView.tsx | 9 ++-
.../LegalNotice/LegalNoticeView.tsx | 8 +--
.../Options/MatomoOptOut/MatomoOptOut.tsx | 2 +-
src/components/Options/OptionsView.tsx | 2 +-
.../Options/Unsubscribe/UnSubscribe.tsx | 16 ++---
.../ProfileType/ProfileTypeView.tsx | 28 ++++----
src/components/Quiz/QuizQuestion.spec.tsx | 4 +-
src/components/Quiz/QuizView.tsx | 2 +-
src/components/Splash/SplashScreen.tsx | 2 +-
.../TimeStepSelector/TimeStepSelector.tsx | 4 +-
src/locales/fr.json | 15 ++--
src/styles/base/_layout.scss | 70 -------------------
41 files changed, 144 insertions(+), 240 deletions(-)
diff --git a/.eslintrc.js b/.eslintrc.js
index d463b1af4..4d604c901 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -29,6 +29,7 @@ module.exports = {
'no-console': 'off',
'@typescript-eslint/no-explicit-any': 'warn',
'@typescript-eslint/prefer-optional-chain': 'warn',
+ 'react/self-closing-comp': 'warn',
},
settings: {
react: {
diff --git a/src/components/Action/ActionOnGoing.tsx b/src/components/Action/ActionOnGoing.tsx
index 16e4379b8..8627d2e82 100644
--- a/src/components/Action/ActionOnGoing.tsx
+++ b/src/components/Action/ActionOnGoing.tsx
@@ -92,7 +92,7 @@ const ActionOnGoing: React.FC<ActionOnGoingProps> = ({
style={{
backgroundImage: `${setGradient()}`,
}}
- ></div>
+ />
</div>
<div className="result-title text-18-bold"> {t('action.result')}</div>
<div className="result-date text-24-bold">{getResultDate()}</div>
diff --git a/src/components/Action/ActionView.tsx b/src/components/Action/ActionView.tsx
index 1b6a65dfa..d3c064171 100644
--- a/src/components/Action/ActionView.tsx
+++ b/src/components/Action/ActionView.tsx
@@ -39,7 +39,7 @@ const ActionView: React.FC = () => {
setHeaderHeight={defineHeaderHeight}
desktopTitleKey={'common.title_action'}
displayBackArrow={true}
- ></Header>
+ />
<Content height={headerHeight}>
{currentChallenge && renderAction(currentChallenge)}
</Content>
diff --git a/src/components/Analysis/AnalysisConsumption.spec.tsx b/src/components/Analysis/AnalysisConsumption.spec.tsx
index 0366bc27e..4dfb6ac44 100644
--- a/src/components/Analysis/AnalysisConsumption.spec.tsx
+++ b/src/components/Analysis/AnalysisConsumption.spec.tsx
@@ -54,7 +54,7 @@ jest.mock('services/profileTypeEntity.service', () => {
})
jest.mock('components/Analysis/AnalysisConsumptionRow', () => () => (
- <div id="analysisconsumptionrow"></div>
+ <div id="analysisconsumptionrow" />
))
const mockStore = configureStore([])
diff --git a/src/components/Analysis/AnalysisView.tsx b/src/components/Analysis/AnalysisView.tsx
index 5e4273398..49f1099e2 100644
--- a/src/components/Analysis/AnalysisView.tsx
+++ b/src/components/Analysis/AnalysisView.tsx
@@ -1,20 +1,20 @@
-import React, { useState, useEffect, useCallback } from 'react'
-import { useSelector, useDispatch } from 'react-redux'
-import { updateProfile } from 'store/profile/profile.actions'
-import { toggleAnalysisNotification } from 'store/global/global.actions'
+import React, { useCallback, useEffect, useState } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
import { AppStore } from 'store'
+import { toggleAnalysisNotification } from 'store/global/global.actions'
+import { updateProfile } from 'store/profile/profile.actions'
-import CozyBar from 'components/Header/CozyBar'
-import Header from 'components/Header/Header'
-import Content from 'components/Content/Content'
import MonthlyAnalysis from 'components/Analysis/MonthlyAnalysis'
-import './analysisView.scss'
+import Content from 'components/Content/Content'
import DateNavigator from 'components/DateNavigator/DateNavigator'
+import CozyBar from 'components/Header/CozyBar'
+import Header from 'components/Header/Header'
+import { useClient } from 'cozy-client'
+import { UsageEventType } from 'enum/usageEvent.enum'
import { DateTime } from 'luxon'
import { useLocation } from 'react-router-dom'
import UsageEventService from 'services/usageEvent.service'
-import { useClient } from 'cozy-client'
-import { UsageEventType } from 'enum/usageEvent.enum'
+import './analysisView.scss'
const AnalysisView: React.FC = () => {
const client = useClient()
@@ -105,10 +105,10 @@ const AnalysisView: React.FC = () => {
return (
<>
- <CozyBar titleKey={'analysis.viewTitle'} />
+ <CozyBar titleKey={'common.title_analysis'} />
<Header
setHeaderHeight={defineHeaderHeight}
- desktopTitleKey={'analysis.viewTitle'}
+ desktopTitleKey={'common.title_analysis'}
>
<DateNavigator
currentAnalysisDate={currentAnalysisDate}
diff --git a/src/components/Analysis/PieChart.tsx b/src/components/Analysis/PieChart.tsx
index 72433597c..65929a7cb 100644
--- a/src/components/Analysis/PieChart.tsx
+++ b/src/components/Analysis/PieChart.tsx
@@ -119,7 +119,7 @@ const PieChart: React.FC<PieProps> = ({
top: arcWidth / 2,
left: arcWidth - arcWidth / 2,
}}
- ></div>
+ />
</div>
<EstimatedConsumptionModal
open={openEstimationModal}
diff --git a/src/components/Challenge/ChallengeView.tsx b/src/components/Challenge/ChallengeView.tsx
index 46ec43551..7e3e1b744 100644
--- a/src/components/Challenge/ChallengeView.tsx
+++ b/src/components/Challenge/ChallengeView.tsx
@@ -1,17 +1,17 @@
-import React, { useCallback, useEffect, useState } from 'react'
-import './challengeView.scss'
-import { useSelector } from 'react-redux'
-import { AppStore } from 'store'
-import CozyBar from 'components/Header/CozyBar'
+import LeftArrowIcon from 'assets/icons/ico/left-arrow.svg'
+import RightArrowIcon from 'assets/icons/ico/right-arrow.svg'
+import StyledIconbutton from 'components/CommonKit/IconButton/StyledIconButton'
import Content from 'components/Content/Content'
+import CozyBar from 'components/Header/CozyBar'
import Header from 'components/Header/Header'
-import ChallengeCard from './ChallengeCard'
-import StyledIconbutton from 'components/CommonKit/IconButton/StyledIconButton'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import LeftArrowIcon from 'assets/icons/ico/left-arrow.svg'
-import RightArrowIcon from 'assets/icons/ico/right-arrow.svg'
import { UserChallengeState } from 'enum/userChallenge.enum'
import { UserChallenge } from 'models'
+import React, { useCallback, useEffect, useState } from 'react'
+import { useSelector } from 'react-redux'
+import { AppStore } from 'store'
+import ChallengeCard from './ChallengeCard'
+import './challengeView.scss'
const ChallengeView: React.FC = () => {
const { t } = useI18n()
@@ -147,7 +147,7 @@ const ChallengeView: React.FC = () => {
<Header
setHeaderHeight={defineHeaderHeight}
desktopTitleKey={'common.title_challenge'}
- ></Header>
+ />
<Content height={headerHeight}>
<div
className="challengeSlider"
diff --git a/src/components/Charts/AxisBottom.tsx b/src/components/Charts/AxisBottom.tsx
index 559f144fb..9302b9cd9 100644
--- a/src/components/Charts/AxisBottom.tsx
+++ b/src/components/Charts/AxisBottom.tsx
@@ -171,7 +171,7 @@ const AxisBottom: React.FC<AxisBottomProps> = ({
x2={xScale.bandwidth() / 2}
y1="0"
y2={-(height - marginBottom)}
- ></line>
+ />
) : null}
</g>
))}
diff --git a/src/components/CommonKit/ErrorPage/ErrorPage.spec.tsx b/src/components/CommonKit/ErrorPage/ErrorPage.spec.tsx
index fdc9f8093..abaea68bc 100644
--- a/src/components/CommonKit/ErrorPage/ErrorPage.spec.tsx
+++ b/src/components/CommonKit/ErrorPage/ErrorPage.spec.tsx
@@ -25,8 +25,8 @@ jest.mock('react-router-dom', () => ({
}),
}))
-jest.mock('components/Header/Header', () => () => <div id="Header"></div>)
-jest.mock('components/Header/CozyBar', () => () => <div id="CozyBar"></div>)
+jest.mock('components/Header/Header', () => () => <div id="Header" />)
+jest.mock('components/Header/CozyBar', () => () => <div id="CozyBar" />)
// eslint-disable-next-line @typescript-eslint/no-explicit-any
jest.mock('components/Content/Content', () => (props: any) => (
<div id="content">{props.children}</div>
diff --git a/src/components/CommonKit/ErrorPage/ErrorPage.tsx b/src/components/CommonKit/ErrorPage/ErrorPage.tsx
index 1a673d011..58341fef5 100644
--- a/src/components/CommonKit/ErrorPage/ErrorPage.tsx
+++ b/src/components/CommonKit/ErrorPage/ErrorPage.tsx
@@ -1,12 +1,12 @@
-import React, { useCallback, useState } from 'react'
+import { Button } from '@material-ui/core'
+import BearIcon from 'assets/icons/visu/duelResult/CHALLENGE0001-0.svg'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import Content from 'components/Content/Content'
import CozyBar from 'components/Header/CozyBar'
import Header from 'components/Header/Header'
-import BearIcon from 'assets/icons/visu/duelResult/CHALLENGE0001-0.svg'
-import { Button } from '@material-ui/core'
-import { useHistory } from 'react-router-dom'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import React, { useCallback, useState } from 'react'
+import { useHistory } from 'react-router-dom'
import './errorPage.scss'
interface ErrorPageProps {
@@ -34,7 +34,7 @@ const ErrorPage: React.FC<ErrorPageProps> = ({
<Header
setHeaderHeight={defineHeaderHeight}
desktopTitleKey={'error_page.main'}
- ></Header>
+ />
<Content height={headerHeight}>
<div className="error-container">
<StyledIcon className="profile-icon" icon={BearIcon} size={250} />
diff --git a/src/components/Connection/FormLogin.tsx b/src/components/Connection/FormLogin.tsx
index ba3f0171d..0e2aad966 100644
--- a/src/components/Connection/FormLogin.tsx
+++ b/src/components/Connection/FormLogin.tsx
@@ -123,7 +123,7 @@ const FormLogin: React.FC<FormLoginProps> = ({
}
value={login}
inputMode="numeric"
- ></input>
+ />
</div>
<div className="form-group">
<input
diff --git a/src/components/Connection/SGEConnect/SgeConnectView.tsx b/src/components/Connection/SGEConnect/SgeConnectView.tsx
index 4097240cc..d1e6d89d2 100644
--- a/src/components/Connection/SGEConnect/SgeConnectView.tsx
+++ b/src/components/Connection/SGEConnect/SgeConnectView.tsx
@@ -136,7 +136,7 @@ const SgeConnectView: React.FC = () => {
setHeaderHeight={defineHeaderHeight}
desktopTitleKey={'common.title_sge_connect'}
displayBackArrow={true}
- ></Header>
+ />
<Content height={headerHeight}>
<div className="sge-view">
<div className="sge-container">
diff --git a/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx b/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx
index ec1fa6b95..fe02f6446 100644
--- a/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx
@@ -31,7 +31,7 @@ const DataloadConsumptionVisualizer = ({
}, [])
if (loading || !dataload) {
- return <div className="dataloadvisualizer-root"></div>
+ return <div className="dataloadvisualizer-root" />
}
if (
diff --git a/src/components/ConsumptionVisualizer/DataloadSectionDetail.tsx b/src/components/ConsumptionVisualizer/DataloadSectionDetail.tsx
index 29e629a1b..b765c7473 100644
--- a/src/components/ConsumptionVisualizer/DataloadSectionDetail.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadSectionDetail.tsx
@@ -63,7 +63,7 @@ const DataloadSectionDetail = ({
fluidType === FluidType.MULTIFLUID &&
dataloadSectionType !== DataloadSectionType.NO_COMPARE
) {
- return <div className="dataloadvisualizer-euro text-16-normal"></div>
+ return <div className="dataloadvisualizer-euro text-16-normal" />
}
if (
diff --git a/src/components/Duel/DuelView.tsx b/src/components/Duel/DuelView.tsx
index 2e968b018..54edb152b 100644
--- a/src/components/Duel/DuelView.tsx
+++ b/src/components/Duel/DuelView.tsx
@@ -57,7 +57,7 @@ const DuelView: React.FC = () => {
setHeaderHeight={defineHeaderHeight}
desktopTitleKey={'common.title_duel'}
displayBackArrow={true}
- ></Header>
+ />
<Content height={headerHeight}>
<div>
{challengeToDisplay &&
diff --git a/src/components/Ecogesture/EcogestureCard.spec.tsx b/src/components/Ecogesture/EcogestureCard.spec.tsx
index 3146ddbdb..2aca94f0f 100644
--- a/src/components/Ecogesture/EcogestureCard.spec.tsx
+++ b/src/components/Ecogesture/EcogestureCard.spec.tsx
@@ -20,7 +20,7 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
}
})
jest.mock('components/CommonKit/Icon/StyledIcon', () => () => (
- <div id="StyledIcon"></div>
+ <div id="StyledIcon" />
))
const mockImportIconbyId = jest.fn()
jest.mock('utils/utils', () => {
diff --git a/src/components/Ecogesture/SingleEcogesture.spec.tsx b/src/components/Ecogesture/SingleEcogesture.spec.tsx
index 1c4cd286b..bf710ac4a 100644
--- a/src/components/Ecogesture/SingleEcogesture.spec.tsx
+++ b/src/components/Ecogesture/SingleEcogesture.spec.tsx
@@ -27,11 +27,11 @@ jest.mock('utils/utils', () => {
})
jest.mock('components/Ecogesture/EfficientyRating', () => () => (
- <div id="EfficientyRating"></div>
+ <div id="EfficientyRating" />
))
-jest.mock('components/Header/Header', () => () => <div id="Header"></div>)
-jest.mock('components/Header/CozyBar', () => () => <div id="CozyBar"></div>)
-jest.mock('components/Loader/Loader', () => () => <div id="spinner"></div>)
+jest.mock('components/Header/Header', () => () => <div id="Header" />)
+jest.mock('components/Header/CozyBar', () => () => <div id="CozyBar" />)
+jest.mock('components/Loader/Loader', () => () => <div id="spinner" />)
// eslint-disable-next-line @typescript-eslint/no-explicit-any
jest.mock('components/Content/Content', () => (props: any) => (
<div id="content">{props.children}</div>
diff --git a/src/components/Ecogesture/SingleEcogesture.tsx b/src/components/Ecogesture/SingleEcogesture.tsx
index 2d49b1c0d..a84c41f07 100644
--- a/src/components/Ecogesture/SingleEcogesture.tsx
+++ b/src/components/Ecogesture/SingleEcogesture.tsx
@@ -141,17 +141,15 @@ const SingleEcogesture: React.FC<SingleEcogestureProps> = ({
return ecogesture ? (
<>
<CozyBar
- titleKey={t('common.title_ecogesture')}
- isNotKey={true}
+ titleKey={'common.title_ecogesture'}
displayBackArrow={true}
backFunction={() => history.push('/ecogestures')}
/>
<Header
setHeaderHeight={defineHeaderHeight}
- desktopTitleKey={t('common.title_ecogesture')}
+ desktopTitleKey={'common.title_ecogesture'}
displayBackArrow={true}
- isNotKey={true}
- ></Header>
+ />
<Content height={headerHeight}>
<div className="single-ecogesture">
<div className="icon-container">
diff --git a/src/components/Ecogesture/__snapshots__/SingleEcogesture.spec.tsx.snap b/src/components/Ecogesture/__snapshots__/SingleEcogesture.spec.tsx.snap
index 23aaff6f3..aa643f350 100644
--- a/src/components/Ecogesture/__snapshots__/SingleEcogesture.spec.tsx.snap
+++ b/src/components/Ecogesture/__snapshots__/SingleEcogesture.spec.tsx.snap
@@ -25,7 +25,6 @@ exports[`SingleEcogesture component should be rendered correctly 1`] = `
<Component
backFunction={[Function]}
displayBackArrow={true}
- isNotKey={true}
titleKey="common.title_ecogesture"
>
<div
@@ -35,7 +34,6 @@ exports[`SingleEcogesture component should be rendered correctly 1`] = `
<Component
desktopTitleKey="common.title_ecogesture"
displayBackArrow={true}
- isNotKey={true}
setHeaderHeight={[Function]}
>
<div
diff --git a/src/components/EcogestureForm/EcogestureFormView.tsx b/src/components/EcogestureForm/EcogestureFormView.tsx
index 2e001b9fc..d16070733 100644
--- a/src/components/EcogestureForm/EcogestureFormView.tsx
+++ b/src/components/EcogestureForm/EcogestureFormView.tsx
@@ -102,7 +102,7 @@ const EcogestureFormView: React.FC = () => {
<Header
setHeaderHeight={defineHeaderHeight}
desktopTitleKey={'common.title_ecogestures'}
- ></Header>
+ />
<Content height={headerHeight}>
{isProfileTypeCompleted ? (
<ProfileTypeView />
diff --git a/src/components/EcogestureSelection/EcogestureSelection.tsx b/src/components/EcogestureSelection/EcogestureSelection.tsx
index 1dd8fb2d7..e65190a65 100644
--- a/src/components/EcogestureSelection/EcogestureSelection.tsx
+++ b/src/components/EcogestureSelection/EcogestureSelection.tsx
@@ -125,16 +125,14 @@ const EcogestureSelection: React.FC = () => {
return (
<>
<CozyBar
- titleKey={t('common.title_ecogestures_choice')}
- isNotKey={true}
+ titleKey={'common.title_ecogestures_choice'}
displayBackArrow={true}
backFunction={() => history.push('/ecogestures')}
/>
<Header
setHeaderHeight={defineHeaderHeight}
- desktopTitleKey={t('common.title_ecogestures_choice')}
+ desktopTitleKey={'common.title_ecogestures_choice'}
displayBackArrow={true}
- isNotKey={true}
>
<div className="eg-selection-header">
{indexEcogesture <= ecogestureList.length - 1
diff --git a/src/components/EcogestureSelection/__snapshots__/EcogestureSelection.spec.tsx.snap b/src/components/EcogestureSelection/__snapshots__/EcogestureSelection.spec.tsx.snap
index 5680d8025..32838b95b 100644
--- a/src/components/EcogestureSelection/__snapshots__/EcogestureSelection.spec.tsx.snap
+++ b/src/components/EcogestureSelection/__snapshots__/EcogestureSelection.spec.tsx.snap
@@ -17,13 +17,11 @@ exports[`EcogestureSelection component should be rendered correctly 1`] = `
<mock-cozybar
backFunction={[Function]}
displayBackArrow={true}
- isNotKey={true}
titleKey="common.title_ecogestures_choice"
/>
<mock-header
desktopTitleKey="common.title_ecogestures_choice"
displayBackArrow={true}
- isNotKey={true}
setHeaderHeight={[Function]}
>
<div
diff --git a/src/components/Exploration/ExplorationView.tsx b/src/components/Exploration/ExplorationView.tsx
index 587bc84f5..34b39786e 100644
--- a/src/components/Exploration/ExplorationView.tsx
+++ b/src/components/Exploration/ExplorationView.tsx
@@ -40,7 +40,7 @@ const ExplorationView: React.FC = () => {
setHeaderHeight={defineHeaderHeight}
desktopTitleKey={'common.title_exploration'}
displayBackArrow={true}
- ></Header>
+ />
<Content height={headerHeight}>
{currentChallenge && renderExploration(currentChallenge)}
</Content>
diff --git a/src/components/FormGlobal/FormProgress.tsx b/src/components/FormGlobal/FormProgress.tsx
index 8f8616872..b371ef2ae 100644
--- a/src/components/FormGlobal/FormProgress.tsx
+++ b/src/components/FormGlobal/FormProgress.tsx
@@ -26,7 +26,7 @@ const FormProgress: React.FC<FormProgressProps> = ({
<div
className={'profile-type-progress-bar-content'}
style={{ width: `${getProgress()}%` }}
- ></div>
+ />
</div>
</div>
)
diff --git a/src/components/GCU/GCUView.tsx b/src/components/GCU/GCUView.tsx
index 775fc2100..841c48322 100644
--- a/src/components/GCU/GCUView.tsx
+++ b/src/components/GCU/GCUView.tsx
@@ -1,8 +1,8 @@
-import React, { useCallback, useState } from 'react'
-import CozyBar from 'components/Header/CozyBar'
-import Header from 'components/Header/Header'
import Content from 'components/Content/Content'
import GCUContent from 'components/GCU/GCUContent'
+import CozyBar from 'components/Header/CozyBar'
+import Header from 'components/Header/Header'
+import React, { useCallback, useState } from 'react'
const GCUView: React.FC = () => {
const [headerHeight, setHeaderHeight] = useState<number>(0)
@@ -18,7 +18,7 @@ const GCUView: React.FC = () => {
setHeaderHeight={defineHeaderHeight}
desktopTitleKey={'common.title_gcu'}
displayBackArrow={true}
- ></Header>
+ />
<Content height={headerHeight}>
<GCUContent />
</Content>
diff --git a/src/components/Header/CozyBar.tsx b/src/components/Header/CozyBar.tsx
index 33b4c8d74..e551519bf 100644
--- a/src/components/Header/CozyBar.tsx
+++ b/src/components/Header/CozyBar.tsx
@@ -12,14 +12,13 @@ import { updateModalIsFeedbacksOpen } from 'store/modal/modal.actions'
interface CozyBarProps {
titleKey?: string
displayBackArrow?: boolean
- isNotKey?: boolean
backFunction?: () => void
}
+/** Header with CozyBar for mobile view */
const CozyBar = ({
titleKey = 'common.title_app',
displayBackArrow = false,
- isNotKey,
backFunction,
}: CozyBarProps) => {
const { t } = useI18n()
@@ -43,7 +42,7 @@ const CozyBar = ({
const cozyBarCustom = (screen?: ScreenType) => {
if (screen === ScreenType.MOBILE) {
return (
- <React.Fragment>
+ <>
{displayBackArrow && (
<BarLeft>
<StyledIconButton
@@ -56,9 +55,7 @@ const CozyBar = ({
)}
<BarCenter>
<div className="cozy-bar">
- <span className="app-title">
- {isNotKey ? titleKey : t(titleKey)}
- </span>
+ <span className="app-title">{t(titleKey)}</span>
</div>
</BarCenter>
<BarRight>
@@ -70,7 +67,7 @@ const CozyBar = ({
onClick={handleClickFeedbacks}
/>
</BarRight>
- </React.Fragment>
+ </>
)
}
return null
diff --git a/src/components/Header/Header.spec.tsx b/src/components/Header/Header.spec.tsx
index 3aab69e60..272c79896 100644
--- a/src/components/Header/Header.spec.tsx
+++ b/src/components/Header/Header.spec.tsx
@@ -1,14 +1,13 @@
-import React from 'react'
+import IconButton from '@material-ui/core/IconButton'
+import Header from 'components/Header/Header'
+import { ScreenType } from 'enum/screen.enum'
import { mount } from 'enzyme'
+import React from 'react'
import { Provider } from 'react-redux'
import configureStore from 'redux-mock-store'
import * as ModalAction from 'store/modal/modal.actions'
-import Header from 'components/Header/Header'
import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
-import { ScreenType } from 'enum/screen.enum'
-import IconButton from '@material-ui/core/IconButton'
-
jest.mock('cozy-ui/transpiled/react/I18n', () => {
return {
useI18n: jest.fn(() => {
@@ -38,26 +37,15 @@ describe('Header component', () => {
})
const wrapper = mount(
<Provider store={store}>
- <Header setHeaderHeight={mocksetHeaderHeight} />
+ <Header
+ setHeaderHeight={mocksetHeaderHeight}
+ desktopTitleKey="mockKey"
+ />
</Provider>
)
expect(wrapper.find('.header')).toHaveLength(1)
})
- it('should display text when textKey is provided', () => {
- const store = mockStore({
- ecolyo: {
- global: globalStateData,
- },
- })
- const wrapper = mount(
- <Provider store={store}>
- <Header textKey={'KEY'} setHeaderHeight={mocksetHeaderHeight} />
- </Provider>
- )
- expect(wrapper.find('.header-text').first().text()).toEqual('KEY')
- })
-
it('should display title and back button when desktopTitle key provided and displayBackArrow is true', () => {
const store = mockStore({
ecolyo: {
@@ -113,7 +101,10 @@ describe('Header component', () => {
})
const wrapper = mount(
<Provider store={store}>
- <Header setHeaderHeight={mocksetHeaderHeight} />
+ <Header
+ setHeaderHeight={mocksetHeaderHeight}
+ desktopTitleKey="mockKey"
+ />
</Provider>
)
const updateModalSpy = jest.spyOn(ModalAction, 'updateModalIsFeedbacksOpen')
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 3a469698a..8ff67e6ba 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -1,36 +1,33 @@
-import React, { useCallback, useEffect, useRef } from 'react'
-import './header.scss'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import { useSelector, useDispatch } from 'react-redux'
-import { AppStore } from 'store'
-import { updateModalIsFeedbacksOpen } from 'store/modal/modal.actions'
-import { useHistory } from 'react-router-dom'
-
-import { ScreenType } from 'enum/screen.enum'
+import IconButton from '@material-ui/core/IconButton'
import BackArrowIcon from 'assets/icons/ico/back-arrow.svg'
import FeedbackIcon from 'assets/icons/ico/feedback.svg'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import Icon from 'cozy-ui/transpiled/react/Icon'
-import IconButton from '@material-ui/core/IconButton'
+import { ScreenType } from 'enum/screen.enum'
+import React, { useCallback, useEffect, useRef } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { useHistory } from 'react-router-dom'
+import { AppStore } from 'store'
+import { updateModalIsFeedbacksOpen } from 'store/modal/modal.actions'
+import './header.scss'
interface HeaderProps {
- textKey?: string
- desktopTitleKey?: string
+ /** translation key used as t('key.value') */
+ desktopTitleKey: string
displayBackArrow?: boolean
children?: React.ReactNode
setHeaderHeight(height: number): void
- isNotKey?: boolean
backFunction?: () => void
}
+/** Header for desktop view */
const Header: React.FC<HeaderProps> = ({
- textKey,
desktopTitleKey,
displayBackArrow,
children,
setHeaderHeight,
- isNotKey,
backFunction,
-}: HeaderProps) => {
+}) => {
const { t } = useI18n()
const history = useHistory()
const header = useRef(null)
@@ -67,22 +64,11 @@ const Header: React.FC<HeaderProps> = ({
<div className="header-content">
<div
className={
- !textKey && !desktopTitleKey
+ !desktopTitleKey
? 'header-content-top header-content-top-right'
: 'header-content-top'
}
>
- {textKey && (
- <div
- className={`header-text ${
- screenType === ScreenType.MOBILE
- ? 'text-14-normal-uppercase'
- : 'text-22-bold'
- }`}
- >
- {isNotKey ? textKey : t(textKey)}
- </div>
- )}
{desktopTitleKey && (
<div
className={`header-text-desktop ${
@@ -100,13 +86,13 @@ const Header: React.FC<HeaderProps> = ({
<Icon icon={BackArrowIcon} size={16} />
</IconButton>
)}
- <span>{isNotKey ? desktopTitleKey : t(desktopTitleKey)}</span>
+ <span>{t(desktopTitleKey)}</span>
</div>
)}
<IconButton
aria-label={t('header.accessibility.button_open_feedbacks')}
className={
- !textKey && !desktopTitleKey
+ !desktopTitleKey
? 'header-feedbacks-button right'
: 'header-feedbacks-button'
}
@@ -118,7 +104,7 @@ const Header: React.FC<HeaderProps> = ({
{children}
</div>
</div>
- <div className="header-bar"></div>
+ <div className="header-bar" />
</div>
)
}
diff --git a/src/components/Header/header.scss b/src/components/Header/header.scss
index 58b400875..755efde66 100644
--- a/src/components/Header/header.scss
+++ b/src/components/Header/header.scss
@@ -7,11 +7,15 @@
align-items: center;
flex-direction: column;
overflow: hidden;
- width: 100%;
+ width: 85%;
z-index: $z-header;
position: fixed;
top: 48px;
- left: 0;
+
+ @media #{$tablet} {
+ width: 100%;
+ }
+
@media #{$large-phone} {
top: 0;
}
@@ -28,7 +32,6 @@
}
}
.header-content {
- margin: 0 0 0 220px;
display: flex;
flex-direction: column;
@media #{$tablet} {
diff --git a/src/components/Home/ConsumptionView.tsx b/src/components/Home/ConsumptionView.tsx
index c16b6ce74..71426c536 100644
--- a/src/components/Home/ConsumptionView.tsx
+++ b/src/components/Home/ConsumptionView.tsx
@@ -177,8 +177,11 @@ const ConsumptionView: React.FC<ConsumptionViewProps> = ({
return (
<>
- <CozyBar titleKey={'navigation.consumption'} />
- <Header setHeaderHeight={defineHeaderHeight}>
+ <CozyBar titleKey={'common.title_consumption'} />
+ <Header
+ setHeaderHeight={defineHeaderHeight}
+ desktopTitleKey={'common.title_consumption'}
+ >
<DateNavigator />
</Header>
<Content height={headerHeight}>
@@ -188,7 +191,7 @@ const ConsumptionView: React.FC<ConsumptionViewProps> = ({
<ReleaseNotesModal
open={openReleaseNoteModal}
handleCloseClick={handleCloseReleaseNoteModal}
- ></ReleaseNotesModal>
+ />
)}
{isFluidKonnected ? (
<>
diff --git a/src/components/LegalNotice/LegalNoticeView.tsx b/src/components/LegalNotice/LegalNoticeView.tsx
index f4c83a0e4..6f66c937f 100644
--- a/src/components/LegalNotice/LegalNoticeView.tsx
+++ b/src/components/LegalNotice/LegalNoticeView.tsx
@@ -1,9 +1,9 @@
-import React, { useCallback, useState } from 'react'
+import Content from 'components/Content/Content'
import CozyBar from 'components/Header/CozyBar'
import Header from 'components/Header/Header'
-import Content from 'components/Content/Content'
-import './legalNoticeView.scss'
+import React, { useCallback, useState } from 'react'
import LegalNoticeContent from './LegalNoticeContent'
+import './legalNoticeView.scss'
const LegalNoticeView: React.FC = () => {
const [headerHeight, setHeaderHeight] = useState<number>(0)
@@ -18,7 +18,7 @@ const LegalNoticeView: React.FC = () => {
setHeaderHeight={defineHeaderHeight}
desktopTitleKey={'common.title_legal_notice'}
displayBackArrow={true}
- ></Header>
+ />
<Content height={headerHeight}>
<LegalNoticeContent />
</Content>
diff --git a/src/components/Options/MatomoOptOut/MatomoOptOut.tsx b/src/components/Options/MatomoOptOut/MatomoOptOut.tsx
index c638d3eda..127642014 100644
--- a/src/components/Options/MatomoOptOut/MatomoOptOut.tsx
+++ b/src/components/Options/MatomoOptOut/MatomoOptOut.tsx
@@ -17,7 +17,7 @@ const MatomoOptOut: React.FC = () => {
<iframe
style={{ height: '250px' }}
src={`${baseUrl}index.php?module=CoreAdminHome&action=optOut&language=fr&backgroundColor=121212&fontColor=e0e0e0&fontSize=&fontFamily=sans-serif`}
- ></iframe>
+ />
</div>
</div>
)
diff --git a/src/components/Options/OptionsView.tsx b/src/components/Options/OptionsView.tsx
index 15fd3108a..ed07406fd 100644
--- a/src/components/Options/OptionsView.tsx
+++ b/src/components/Options/OptionsView.tsx
@@ -24,7 +24,7 @@ const OptionsView: React.FC = () => {
<Header
setHeaderHeight={defineHeaderHeight}
desktopTitleKey={'common.title_options'}
- ></Header>
+ />
<Content height={headerHeight}>
<ProfileTypeOptions />
<ExportOptions />
diff --git a/src/components/Options/Unsubscribe/UnSubscribe.tsx b/src/components/Options/Unsubscribe/UnSubscribe.tsx
index bbf9646ba..6253a5ccd 100644
--- a/src/components/Options/Unsubscribe/UnSubscribe.tsx
+++ b/src/components/Options/Unsubscribe/UnSubscribe.tsx
@@ -1,15 +1,15 @@
-import React, { useState } from 'react'
-import './unSubscribe.scss'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { Button } from '@material-ui/core'
+import BearIcon from 'assets/icons/visu/duelResult/CHALLENGE0001-0.svg'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import Content from 'components/Content/Content'
import CozyBar from 'components/Header/CozyBar'
import Header from 'components/Header/Header'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import BearIcon from 'assets/icons/visu/duelResult/CHALLENGE0001-0.svg'
-import { Button } from '@material-ui/core'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import React, { useState } from 'react'
import { useDispatch } from 'react-redux'
-import { updateProfile } from 'store/profile/profile.actions'
import { useHistory } from 'react-router-dom'
+import { updateProfile } from 'store/profile/profile.actions'
+import './unSubscribe.scss'
const UnSubscribe: React.FC = () => {
const [headerHeight, setHeaderHeight] = useState<number>(0)
@@ -30,7 +30,7 @@ const UnSubscribe: React.FC = () => {
<Header
setHeaderHeight={defineHeaderHeight}
desktopTitleKey={'common.title_analysis'}
- ></Header>
+ />
<Content height={headerHeight}>
<div className="unsubscribe-container">
<StyledIcon className="profile-icon" icon={BearIcon} size={250} />
diff --git a/src/components/ProfileType/ProfileTypeView.tsx b/src/components/ProfileType/ProfileTypeView.tsx
index 49de9edb4..88d58c230 100644
--- a/src/components/ProfileType/ProfileTypeView.tsx
+++ b/src/components/ProfileType/ProfileTypeView.tsx
@@ -1,12 +1,16 @@
-import React, { useCallback, useEffect, useState } from 'react'
-import 'components/ProfileType/profileTypeView.scss'
+import Content from 'components/Content/Content'
import CozyBar from 'components/Header/CozyBar'
import Header from 'components/Header/Header'
-import Content from 'components/Content/Content'
-import ProfileTypeFormSingleChoice from 'components/ProfileType/ProfileTypeFormSingleChoice'
import ProfileTypeFinished from 'components/ProfileType/ProfileTypeFinished'
+import ProfileTypeFormSingleChoice from 'components/ProfileType/ProfileTypeFormSingleChoice'
+import 'components/ProfileType/profileTypeView.scss'
+import React, { useCallback, useEffect, useState } from 'react'
-import { ProfileType, ProfileTypeAnswer } from 'models/profileType.model'
+import EcogestureFormEquipment from 'components/EcogestureForm/EcogestureFormEquipment'
+import ProfileTypeFormMultiChoice from 'components/ProfileType/ProfileTypeFormMultiChoice'
+import ProfileTypeFormNumber from 'components/ProfileType/ProfileTypeFormNumber'
+import ProfileTypeFormNumberSelection from 'components/ProfileType/ProfileTypeFormNumberSelection'
+import { FluidType } from 'enum/fluid.enum'
import {
ConstructionYear,
Floor,
@@ -20,17 +24,13 @@ import {
ThreeChoicesAnswer,
WarmingType,
} from 'enum/profileType.enum'
-import { FluidType } from 'enum/fluid.enum'
-import ProfileTypeFormMultiChoice from 'components/ProfileType/ProfileTypeFormMultiChoice'
-import ProfileTypeFormNumber from 'components/ProfileType/ProfileTypeFormNumber'
-import ProfileTypeFormNumberSelection from 'components/ProfileType/ProfileTypeFormNumberSelection'
-import { useSelector } from 'react-redux'
-import { AppStore } from 'store'
import { DateTime } from 'luxon'
+import { ProfileEcogesture } from 'models/profileEcogesture.model'
+import { ProfileType, ProfileTypeAnswer } from 'models/profileType.model'
+import { useSelector } from 'react-redux'
import ProfileTypeFormService from 'services/profileTypeForm.service'
+import { AppStore } from 'store'
import ProfileTypeFormDateSelection from './ProfileTypeFormDateSelection'
-import EcogestureFormEquipment from 'components/EcogestureForm/EcogestureFormEquipment'
-import { ProfileEcogesture } from 'models/profileEcogesture.model'
const ProfileTypeView: React.FC = () => {
const profile = useSelector((state: AppStore) => state.ecolyo.profile)
@@ -219,7 +219,7 @@ const ProfileTypeView: React.FC = () => {
setHeaderHeight={defineHeaderHeight}
desktopTitleKey={'common.title_profiletype'}
displayBackArrow={true}
- ></Header>
+ />
<Content height={headerHeight}>
<div className={'profile-type-container'}>
{isLoading ? null : step !== ProfileTypeStepForm.END ? (
diff --git a/src/components/Quiz/QuizQuestion.spec.tsx b/src/components/Quiz/QuizQuestion.spec.tsx
index 240eefd26..c18c3e175 100644
--- a/src/components/Quiz/QuizQuestion.spec.tsx
+++ b/src/components/Quiz/QuizQuestion.spec.tsx
@@ -39,10 +39,10 @@ jest.mock('services/quiz.service', () => {
})
jest.mock('components/Quiz/QuizCustomQuestionContent', () => () => (
- <div id="quizcustomquestioncontent"></div>
+ <div id="quizcustomquestioncontent" />
))
jest.mock('components/Quiz/QuizQuestionContent', () => () => (
- <div id="quizquestioncontent"></div>
+ <div id="quizquestioncontent" />
))
const useSelectorSpy = jest.spyOn(reactRedux, 'useSelector')
diff --git a/src/components/Quiz/QuizView.tsx b/src/components/Quiz/QuizView.tsx
index 695104385..71388bcb5 100644
--- a/src/components/Quiz/QuizView.tsx
+++ b/src/components/Quiz/QuizView.tsx
@@ -40,7 +40,7 @@ const QuizView: React.FC = () => {
setHeaderHeight={defineHeaderHeight}
desktopTitleKey={'common.title_quiz'}
displayBackArrow={true}
- ></Header>
+ />
<Content height={headerHeight}>
{currentChallenge && renderQuiz(currentChallenge)}
</Content>
diff --git a/src/components/Splash/SplashScreen.tsx b/src/components/Splash/SplashScreen.tsx
index 53c526a4e..7b8eabf85 100644
--- a/src/components/Splash/SplashScreen.tsx
+++ b/src/components/Splash/SplashScreen.tsx
@@ -29,7 +29,7 @@ const SplashScreen: React.FC<SplashScreenProps> = ({
<div
className="splash-progress-bar-content"
style={{ width: `${getProgress()}%` }}
- ></div>
+ />
</div>
</div>
</div>
diff --git a/src/components/TimeStepSelector/TimeStepSelector.tsx b/src/components/TimeStepSelector/TimeStepSelector.tsx
index 75e9b9ef5..62017f27e 100644
--- a/src/components/TimeStepSelector/TimeStepSelector.tsx
+++ b/src/components/TimeStepSelector/TimeStepSelector.tsx
@@ -105,12 +105,12 @@ const TimeStepSelector: React.FC<TimeStepSelectorProps> = ({
onClick={() => handleChangeTimeStep(step)}
id={TimeStep[step].toLowerCase()}
>
- <span className="clickable-area"></span>
+ <span className="clickable-area" />
<span className={'text text-14-normal'}>
{t(`timestep.${TimeStep[step].toLowerCase()}.period`)}
</span>
</li>
- <li className="bar"></li>
+ <li className="bar" />
</React.Fragment>
)
})}
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 7fcb26e76..6cd8ba591 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -1,6 +1,7 @@
{
"common": {
"title_app": "Ecolyo",
+ "title_consumption": "Conso",
"title_challenge": "Défis",
"title_quiz": "Quiz",
"title_exploration": "Exploration",
@@ -19,6 +20,13 @@
"loading": "Chargement"
}
},
+ "navigation": {
+ "consumption": "Conso",
+ "challenges": "Défis",
+ "ecogestures": "Astuces",
+ "options": "Options",
+ "analysis": "Analyse"
+ },
"FLUID": {
"ELECTRICITY": {
"NAME": "Électricité",
@@ -863,13 +871,6 @@
"button_close": "Fermer la fenêtre"
}
},
- "navigation": {
- "consumption": "Conso",
- "challenges": "Défis",
- "ecogestures": "Astuces",
- "options": "Options",
- "analysis": "Analyse"
- },
"oauth": {
"window": {
"title": "OAuth"
diff --git a/src/styles/base/_layout.scss b/src/styles/base/_layout.scss
index 977aa5666..63369debd 100644
--- a/src/styles/base/_layout.scss
+++ b/src/styles/base/_layout.scss
@@ -45,76 +45,6 @@ body {
color: #32363f;
}
-.header {
- display: flex;
- align-items: center;
- flex-direction: column;
- overflow: hidden;
- width: 100%;
- z-index: $z-header;
- position: fixed;
- top: 48px;
- left: 0;
- @media #{$large-phone} {
- top: 0;
- }
- .header-top {
- background: radial-gradient(
- circle,
- rgba(52, 54, 65, 1) 0%,
- rgba(27, 28, 34, 1) 100%
- );
- width: 100%;
- .header-text {
- padding: 0 1rem 1rem 1rem;
- color: $grey-bright;
- }
- }
- .header-content {
- margin: 0 0 0 220px;
- display: flex;
- flex-direction: column;
- @media #{$tablet} {
- margin: 0;
- }
- @media #{$large-phone} {
- margin: 60px 0 0 0;
- }
- .header-content-top {
- display: flex;
- flex-direction: row;
- &.header-content-top-right {
- justify-content: flex-end;
- }
- .header-text {
- padding: 2rem 1rem;
- flex: 1;
- }
- .header-text-desktop {
- display: flex;
- flex: 1;
- padding: 2rem 1.25rem;
- color: $grey-bright;
- }
- .header-back-button {
- padding: 0 0.75rem;
- }
- @media #{$large-phone} {
- .header-text {
- padding: 0 1rem 1rem 1rem;
- color: $grey-bright;
- }
- .header-text-desktop {
- display: none;
- }
- .header-feedbacks-button {
- display: none;
- }
- }
- }
- }
-}
-
.content-view-loading {
height: 80vh;
width: 100%;
--
GitLab