From 062d953e09bdbe583ce816cf632c69837fd3080f Mon Sep 17 00:00:00 2001
From: Bastien DUMONT <bdumont@grandlyon.com>
Date: Thu, 7 Sep 2023 13:56:21 +0000
Subject: [PATCH] feat(ecogestures): rework selection
---
.../EcogestureCard/EcogestureCard.tsx | 11 +-
.../EcogestureCard.spec.tsx.snap | 25 ---
.../EcogestureList/EcogestureList.tsx | 6 +-
.../EcogestureList.spec.tsx.snap | 3 -
.../Ecogesture/SingleEcogestureView.spec.tsx | 18 +-
.../Ecogesture/SingleEcogestureView.tsx | 161 ++++++++----------
.../SingleEcogestureView.spec.tsx.snap | 61 ++++++-
.../Ecogesture/singleEcogestureView.scss | 15 +-
.../EcogestureSelectionDetail.spec.tsx | 15 ++
.../EcogestureSelectionDetail.tsx | 22 ++-
.../EcogestureSelectionDetail.spec.tsx.snap | 109 +++++++++---
.../ecogestureSelectionDetail.scss | 33 ++--
src/components/Navbar/Navbar.tsx | 22 ++-
src/locales/fr.json | 4 +-
14 files changed, 293 insertions(+), 212 deletions(-)
diff --git a/src/components/Ecogesture/EcogestureCard/EcogestureCard.tsx b/src/components/Ecogesture/EcogestureCard/EcogestureCard.tsx
index 749ca432d..cb5842537 100644
--- a/src/components/Ecogesture/EcogestureCard/EcogestureCard.tsx
+++ b/src/components/Ecogesture/EcogestureCard/EcogestureCard.tsx
@@ -9,15 +9,7 @@ import { importIconById } from 'utils/utils'
import EfficiencyRating from '../EfficiencyRating/EfficiencyRating'
import './ecogestureCard.scss'
-interface EcogestureCardProps {
- ecogesture: Ecogesture
- selectionCompleted?: boolean
-}
-
-const EcogestureCard = ({
- ecogesture,
- selectionCompleted = false,
-}: EcogestureCardProps) => {
+const EcogestureCard = ({ ecogesture }: { ecogesture: Ecogesture }) => {
const [ecogestureIcon, setEcogestureIcon] = useState<string>('')
useEffect(() => {
async function handleEcogestureIcon() {
@@ -34,7 +26,6 @@ const EcogestureCard = ({
to={{
pathname: `/ecogesture/${ecogesture.id}`,
}}
- state={{ selectionCompleted }}
component={RouterLink}
className="ecogesture-list-item"
>
diff --git a/src/components/Ecogesture/EcogestureCard/__snapshots__/EcogestureCard.spec.tsx.snap b/src/components/Ecogesture/EcogestureCard/__snapshots__/EcogestureCard.spec.tsx.snap
index 56a97459a..67ce554e7 100644
--- a/src/components/Ecogesture/EcogestureCard/__snapshots__/EcogestureCard.spec.tsx.snap
+++ b/src/components/Ecogesture/EcogestureCard/__snapshots__/EcogestureCard.spec.tsx.snap
@@ -76,11 +76,6 @@ exports[`EcogestureCard component should be rendered correctly 1`] = `
"render": [Function],
}
}
- state={
- Object {
- "selectionCompleted": false,
- }
- }
to={
Object {
"pathname": "/ecogesture/ECOGESTURE001",
@@ -106,11 +101,6 @@ exports[`EcogestureCard component should be rendered correctly 1`] = `
"render": [Function],
}
}
- state={
- Object {
- "selectionCompleted": false,
- }
- }
to={
Object {
"pathname": "/ecogesture/ECOGESTURE001",
@@ -129,11 +119,6 @@ exports[`EcogestureCard component should be rendered correctly 1`] = `
}
onBlur={[Function]}
onFocus={[Function]}
- state={
- Object {
- "selectionCompleted": false,
- }
- }
to={
Object {
"pathname": "/ecogesture/ECOGESTURE001",
@@ -187,11 +172,6 @@ exports[`EcogestureCard component should be rendered correctly 1`] = `
}
onBlur={[Function]}
onFocus={[Function]}
- state={
- Object {
- "selectionCompleted": false,
- }
- }
to={
Object {
"pathname": "/ecogesture/ECOGESTURE001",
@@ -203,11 +183,6 @@ exports[`EcogestureCard component should be rendered correctly 1`] = `
className="MuiTypography-root MuiLink-root MuiLink-underlineHover ecogesture-list-item MuiTypography-colorPrimary"
onBlur={[Function]}
onFocus={[Function]}
- state={
- Object {
- "selectionCompleted": false,
- }
- }
to={
Object {
"pathname": "/ecogesture/ECOGESTURE001",
diff --git a/src/components/Ecogesture/EcogestureList/EcogestureList.tsx b/src/components/Ecogesture/EcogestureList/EcogestureList.tsx
index 5bf7a7558..37818161e 100644
--- a/src/components/Ecogesture/EcogestureList/EcogestureList.tsx
+++ b/src/components/Ecogesture/EcogestureList/EcogestureList.tsx
@@ -56,11 +56,7 @@ const EcogestureList = ({
if (filteredEcogestures.length > 0) {
return filteredEcogestures.map(ecogesture => (
- <EcogestureCard
- key={ecogesture.id}
- ecogesture={ecogesture}
- selectionCompleted={selectionViewed === selectionTotal}
- />
+ <EcogestureCard key={ecogesture.id} ecogesture={ecogesture} />
))
}
diff --git a/src/components/Ecogesture/EcogestureList/__snapshots__/EcogestureList.spec.tsx.snap b/src/components/Ecogesture/EcogestureList/__snapshots__/EcogestureList.spec.tsx.snap
index f1b198089..e26cfd313 100644
--- a/src/components/Ecogesture/EcogestureList/__snapshots__/EcogestureList.spec.tsx.snap
+++ b/src/components/Ecogesture/EcogestureList/__snapshots__/EcogestureList.spec.tsx.snap
@@ -1872,7 +1872,6 @@ exports[`EcogesturesList component should be rendered correctly 1`] = `
}
}
key="ECOGESTURE001"
- selectionCompleted={true}
/>
<mock-ecogesturecard
ecogesture={
@@ -1910,7 +1909,6 @@ exports[`EcogesturesList component should be rendered correctly 1`] = `
}
}
key="ECOGESTURE002"
- selectionCompleted={true}
/>
<mock-ecogesturecard
ecogesture={
@@ -1951,7 +1949,6 @@ exports[`EcogesturesList component should be rendered correctly 1`] = `
}
}
key="ECOGESTURE0013"
- selectionCompleted={true}
/>
<WithStyles(ForwardRef(Button))
classes={
diff --git a/src/components/Ecogesture/SingleEcogestureView.spec.tsx b/src/components/Ecogesture/SingleEcogestureView.spec.tsx
index 3dca815a0..35e2ff90e 100644
--- a/src/components/Ecogesture/SingleEcogestureView.spec.tsx
+++ b/src/components/Ecogesture/SingleEcogestureView.spec.tsx
@@ -8,18 +8,6 @@ import { createMockEcolyoStore } from 'tests/__mocks__/store'
import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
import SingleEcogestureView from './SingleEcogestureView'
-const mockedNavigate = jest.fn()
-
-jest.mock('react-router-dom', () => ({
- ...jest.requireActual('react-router-dom'),
- useNavigate: () => mockedNavigate,
- useParams: () =>
- jest.fn().mockReturnValue({ ecogestureID: 'ECOGESTURE0001' }),
- useLocation: jest.fn().mockReturnValue({
- state: { selectionCompleted: true },
- }),
-}))
-
jest.mock(
'components/Ecogesture/EfficiencyRating/EfficiencyRating',
() => 'mock-EfficiencyRating'
@@ -91,11 +79,9 @@ describe('SingleEcogesture component', () => {
)
await waitForComponentToPaint(wrapper)
- wrapper.find('.toggle-text').first().simulate('click')
+ wrapper.find('.showMore').first().simulate('click')
await waitForComponentToPaint(wrapper)
- expect(wrapper.find('.toggle-text').text()).toBe(
- 'ecogesture_modal.show_less'
- )
+ expect(wrapper.find('.showMore').text()).toBe('ecogesture_modal.show_less')
})
})
diff --git a/src/components/Ecogesture/SingleEcogestureView.tsx b/src/components/Ecogesture/SingleEcogestureView.tsx
index c0c18d95f..5a48c6e5f 100644
--- a/src/components/Ecogesture/SingleEcogestureView.tsx
+++ b/src/components/Ecogesture/SingleEcogestureView.tsx
@@ -1,10 +1,10 @@
+import { Collapse } from '@material-ui/core'
import IconButton from '@material-ui/core/IconButton'
import doingDisabledIcon from 'assets/icons/ico/doing-disabled.svg'
import doingEnabledIcon from 'assets/icons/ico/doing-enabled.svg'
import objectiveDisabledIcon from 'assets/icons/ico/objective-disabled.svg'
import objectiveEnabledIcon from 'assets/icons/ico/objective-enabled.svg'
import defaultIcon from 'assets/icons/visu/ecogesture/default.svg'
-import classNames from 'classnames'
import ErrorPage from 'components/CommonKit/ErrorPage/ErrorPage'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import Content from 'components/Content/Content'
@@ -17,23 +17,16 @@ import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import Icon from 'cozy-ui/transpiled/react/Icon'
import { Ecogesture } from 'models'
import React, { useCallback, useEffect, useMemo, useState } from 'react'
-import { Location, useLocation, useParams } from 'react-router-dom'
+import { useParams } from 'react-router-dom'
import EcogestureService from 'services/ecogesture.service'
import { useAppSelector } from 'store/hooks'
import { importIconById } from 'utils/utils'
import EfficiencyRating from './EfficiencyRating/EfficiencyRating'
import './singleEcogestureView.scss'
-interface EcogestureLocation extends Location {
- state: {
- selectionCompleted: boolean
- }
-}
-
const SingleEcogestureView = () => {
const { t } = useI18n()
const client = useClient()
- const location: EcogestureLocation = useLocation()
const [ecogesture, setEcogesture] = useState<Ecogesture>()
const [ecogestureIcon, setEcogestureIcon] = useState<string>('')
const [isMoreDetail, setIsMoreDetail] = useState<boolean>(false)
@@ -41,7 +34,6 @@ const SingleEcogestureView = () => {
const [isObjective, setIsObjective] = useState<boolean>(false)
const [isLoading, setIsLoading] = useState<boolean>(true)
const { ecogestureID } = useParams<{ ecogestureID: string }>()
- const selectionCompleted = location?.state?.selectionCompleted
const ecogestureService = useMemo(
() => new EcogestureService(client),
@@ -50,34 +42,33 @@ const SingleEcogestureView = () => {
const { currentChallenge } = useAppSelector(state => state.ecolyo.challenge)
const [headerHeight, setHeaderHeight] = useState<number>(0)
const [, setValidExploration] = useExploration()
- const toggleMoreDetail = () => {
- setIsMoreDetail(prev => !prev)
- }
- const toggleObjective = useCallback(async () => {
- if (ecogesture) {
- const toUpdate: Ecogesture = { ...ecogesture, objective: !isObjective }
- const updatedEcogesture = await ecogestureService.updateEcogesture(
- toUpdate
- )
- if (updatedEcogesture) {
- setIsObjective(prev => !prev)
- setEcogesture(updatedEcogesture)
- }
- }
- }, [ecogesture, ecogestureService, isObjective])
- const toggleDoing = useCallback(async () => {
- if (ecogesture) {
- const toUpdate: Ecogesture = { ...ecogesture, doing: !isDoing }
- const updatedEcogesture = await ecogestureService.updateEcogesture(
- toUpdate
- )
- if (updatedEcogesture) {
- setIsDoing(prev => !prev)
- setEcogesture(updatedEcogesture)
+ const updateEcogesture = useCallback(
+ async (objective, doing) => {
+ if (ecogesture) {
+ const updates: Ecogesture = {
+ ...ecogesture,
+ objective: objective,
+ doing: doing,
+ }
+ const result = await ecogestureService.updateEcogesture(updates)
+ if (result) {
+ setIsObjective(result.objective)
+ setIsDoing(result.doing)
+ setEcogesture(result)
+ }
}
- }
- }, [ecogesture, ecogestureService, isDoing])
+ },
+ [ecogesture, ecogestureService]
+ )
+
+ const toggleObjective = useCallback(() => {
+ updateEcogesture(!isObjective, false)
+ }, [isObjective, updateEcogesture])
+
+ const toggleDoing = useCallback(() => {
+ updateEcogesture(false, !isDoing)
+ }, [isDoing, updateEcogesture])
useEffect(() => {
let subscribed = true
@@ -160,62 +151,58 @@ const SingleEcogestureView = () => {
{ecogesture.longName}
</div>
<div
- className="toggle-text text-15-normal"
- onClick={toggleMoreDetail}
+ className="showMore text-15-normal"
+ onClick={() => setIsMoreDetail(prev => !prev)}
role="button"
>
- {isMoreDetail
- ? t('ecogesture_modal.show_less')
- : t('ecogesture_modal.show_more')}
+ {t(`ecogesture_modal.show_${isMoreDetail ? 'less' : 'more'}`)}
</div>
- <div
- className={classNames('description text-16-normal-150', {
- ['block']: isMoreDetail === true,
- })}
+
+ <Collapse in={isMoreDetail}>
+ <div className="longDescription text-16-normal-150">
+ {ecogesture.longDescription}
+ </div>
+ </Collapse>
+ </div>
+
+ <div className="buttons-selection">
+ <IconButton
+ aria-label={t('ecogesture.objective')}
+ onClick={toggleObjective}
+ classes={{
+ root: `btn-secondary-negative objective-btn ${
+ isObjective && 'active'
+ }`,
+ label: 'text-15-normal',
+ }}
>
- {ecogesture.longDescription}
- </div>
+ <Icon
+ className="status-icon"
+ icon={
+ isObjective ? objectiveEnabledIcon : objectiveDisabledIcon
+ }
+ size={40}
+ />
+ <span>{t('ecogesture.objective')}</span>
+ </IconButton>
+ <IconButton
+ aria-label={t('ecogesture.doing')}
+ onClick={toggleDoing}
+ classes={{
+ root: `btn-secondary-negative doing-btn ${
+ isDoing && 'active'
+ }`,
+ label: 'text-15-normal',
+ }}
+ >
+ <Icon
+ className="status-icon"
+ icon={isDoing ? doingEnabledIcon : doingDisabledIcon}
+ size={40}
+ />
+ <span>{t('ecogesture.doing')}</span>
+ </IconButton>
</div>
- {selectionCompleted && (
- <div className="buttons-selection">
- <IconButton
- aria-label={t('ecogesture.objective')}
- onClick={toggleObjective}
- classes={{
- root: `btn-secondary-negative objective-btn ${
- isObjective && 'active'
- }`,
- label: 'text-15-normal',
- }}
- >
- <Icon
- className="status-icon"
- icon={
- isObjective ? objectiveEnabledIcon : objectiveDisabledIcon
- }
- size={40}
- />
- <span>{t('ecogesture.objective')}</span>
- </IconButton>
- <IconButton
- aria-label={t('ecogesture.doing')}
- onClick={toggleDoing}
- classes={{
- root: `btn-secondary-negative doing-btn ${
- isDoing && 'active'
- }`,
- label: 'text-15-normal',
- }}
- >
- <Icon
- className="status-icon"
- icon={isDoing ? doingEnabledIcon : doingDisabledIcon}
- size={40}
- />
- <span>{t('ecogesture.doing')}</span>
- </IconButton>
- </div>
- )}
</div>
)}
</Content>
diff --git a/src/components/Ecogesture/__snapshots__/SingleEcogestureView.spec.tsx.snap b/src/components/Ecogesture/__snapshots__/SingleEcogestureView.spec.tsx.snap
index 80927a48f..49280df12 100644
--- a/src/components/Ecogesture/__snapshots__/SingleEcogestureView.spec.tsx.snap
+++ b/src/components/Ecogesture/__snapshots__/SingleEcogestureView.spec.tsx.snap
@@ -96,17 +96,68 @@ exports[`SingleEcogesture component should be rendered correctly 1`] = `
Je baisse le chauffage en mode hors gel lorsque je m'absente plus de 2 jours.
</div>
<div
- className="toggle-text text-15-normal"
+ className="showMore text-15-normal"
onClick={[Function]}
role="button"
>
ecogesture_modal.show_more
</div>
- <div
- className="description text-16-normal-150"
+ <WithStyles(ForwardRef(Collapse))
+ in={false}
>
- On se demande parfois si cela vaut le coup de "couper le chauffage" quand on s’absente… dès qu’il s’agit d’un week-end la réponse est « oui sûrement » ! Attention cependant au retour à ne pas faire de la surchauffe ! L’idéal est bien évidemment de régler sa programmation pour que le chauffage se relance quelques heures avant votre retour…
- </div>
+ <ForwardRef(Collapse)
+ classes={
+ Object {
+ "entered": "MuiCollapse-entered",
+ "hidden": "MuiCollapse-hidden",
+ "root": "MuiCollapse-root",
+ "wrapper": "MuiCollapse-wrapper",
+ "wrapperInner": "MuiCollapse-wrapperInner",
+ }
+ }
+ in={false}
+ >
+ <Transition
+ addEndListener={[Function]}
+ appear={false}
+ enter={true}
+ exit={true}
+ in={false}
+ mountOnEnter={false}
+ onEnter={[Function]}
+ onEntered={[Function]}
+ onEntering={[Function]}
+ onExit={[Function]}
+ onExited={[Function]}
+ onExiting={[Function]}
+ timeout={300}
+ unmountOnExit={false}
+ >
+ <div
+ className="MuiCollapse-root MuiCollapse-hidden"
+ style={
+ Object {
+ "minHeight": "0px",
+ }
+ }
+ >
+ <div
+ className="MuiCollapse-wrapper"
+ >
+ <div
+ className="MuiCollapse-wrapperInner"
+ >
+ <div
+ className="longDescription text-16-normal-150"
+ >
+ On se demande parfois si cela vaut le coup de "couper le chauffage" quand on s’absente… dès qu’il s’agit d’un week-end la réponse est « oui sûrement » ! Attention cependant au retour à ne pas faire de la surchauffe ! L’idéal est bien évidemment de régler sa programmation pour que le chauffage se relance quelques heures avant votre retour…
+ </div>
+ </div>
+ </div>
+ </div>
+ </Transition>
+ </ForwardRef(Collapse)>
+ </WithStyles(ForwardRef(Collapse))>
</div>
<div
className="buttons-selection"
diff --git a/src/components/Ecogesture/singleEcogestureView.scss b/src/components/Ecogesture/singleEcogestureView.scss
index 862a5d290..c8c6d61f9 100644
--- a/src/components/Ecogesture/singleEcogestureView.scss
+++ b/src/components/Ecogesture/singleEcogestureView.scss
@@ -41,20 +41,17 @@
text-align: center;
color: white;
}
- .description {
- display: none;
- margin: 1.5rem 0.5rem 0.5rem 0.5rem;
- text-align: left;
- }
- .block {
- display: block !important;
- }
- .toggle-text {
+
+ .showMore {
text-align: center;
text-decoration: underline;
margin-top: 1.5rem;
cursor: pointer;
}
+ .longDescription {
+ margin: 1em 0.5rem;
+ text-align: left;
+ }
}
.buttons-selection {
width: 100%;
diff --git a/src/components/EcogestureSelection/EcogestureSelectionDetail/EcogestureSelectionDetail.spec.tsx b/src/components/EcogestureSelection/EcogestureSelectionDetail/EcogestureSelectionDetail.spec.tsx
index 0ccba339a..33640fbcc 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionDetail/EcogestureSelectionDetail.spec.tsx
+++ b/src/components/EcogestureSelection/EcogestureSelectionDetail/EcogestureSelectionDetail.spec.tsx
@@ -21,6 +21,21 @@ describe('EcogestureSelectionDetail component', () => {
expect(toJson(wrapper)).toMatchSnapshot()
})
+ it('should toggle more details', async () => {
+ const wrapper = mount(
+ <EcogestureSelectionDetail
+ ecogesture={mockedEcogesturesData[0]}
+ validate={mockValidate}
+ title={mockedEcogesturesData[0].shortName}
+ />
+ )
+ await waitForComponentToPaint(wrapper)
+
+ wrapper.find('.showMore').first().simulate('click')
+ await waitForComponentToPaint(wrapper)
+
+ expect(wrapper.find('.showMore').text()).toBe('ecogesture_modal.show_less')
+ })
it('should call validate with objective to true', async () => {
const wrapper = mount(
<EcogestureSelectionDetail
diff --git a/src/components/EcogestureSelection/EcogestureSelectionDetail/EcogestureSelectionDetail.tsx b/src/components/EcogestureSelection/EcogestureSelectionDetail/EcogestureSelectionDetail.tsx
index 8fea0b04e..cf50f528d 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionDetail/EcogestureSelectionDetail.tsx
+++ b/src/components/EcogestureSelection/EcogestureSelectionDetail/EcogestureSelectionDetail.tsx
@@ -1,4 +1,4 @@
-import { Button } from '@material-ui/core'
+import { Button, Collapse } from '@material-ui/core'
import doingIcon from 'assets/icons/ico/doing-enabled.svg'
import objectiveIcon from 'assets/icons/ico/objective-enabled.svg'
import skipIcon from 'assets/icons/ico/skip-enabled.svg'
@@ -23,6 +23,7 @@ const EcogestureSelectionDetail = ({
}: EcogestureSelectionDetailProps) => {
const { t } = useI18n()
const [ecogestureIcon, setEcogestureIcon] = useState<string>('')
+ const [showDetails, setShowDetails] = useState(false)
useEffect(() => {
let subscribed = true
@@ -33,6 +34,7 @@ const EcogestureSelectionDetail = ({
}
}
getIcon()
+ setShowDetails(false)
return () => {
subscribed = false
}
@@ -41,9 +43,25 @@ const EcogestureSelectionDetail = ({
return (
<div className="eg-selection-detail-container">
<div className="content">
- <StyledIcon className="icon" icon={ecogestureIcon} size={240} />
+ <div className="iconContainer">
+ <StyledIcon className="icon" icon={ecogestureIcon} size={240} />
+ </div>
<div className="text-22 title">{title}</div>
<div className="text text-18-bold">{ecogesture.longName}</div>
+
+ <div
+ className="showMore text-15-normal"
+ onClick={() => setShowDetails(prev => !prev)}
+ role="button"
+ >
+ {t(`ecogesture_modal.show_${showDetails ? 'less' : 'more'}`)}
+ </div>
+
+ <Collapse in={showDetails} exit={false}>
+ <div className="longDescription text-16-normal-150">
+ {ecogesture.longDescription}
+ </div>
+ </Collapse>
</div>
<div className="buttons">
<Button
diff --git a/src/components/EcogestureSelection/EcogestureSelectionDetail/__snapshots__/EcogestureSelectionDetail.spec.tsx.snap b/src/components/EcogestureSelection/EcogestureSelectionDetail/__snapshots__/EcogestureSelectionDetail.spec.tsx.snap
index a25ce5445..0b56a7a8e 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionDetail/__snapshots__/EcogestureSelectionDetail.spec.tsx.snap
+++ b/src/components/EcogestureSelection/EcogestureSelectionDetail/__snapshots__/EcogestureSelectionDetail.spec.tsx.snap
@@ -44,39 +44,43 @@ exports[`EcogestureSelectionDetail component should be rendered correctly 1`] =
<div
className="content"
>
- <StyledIcon
- className="icon"
- icon="test-file-stub"
- size={240}
+ <div
+ className="iconContainer"
>
- <Icon
- aria-hidden={true}
+ <StyledIcon
className="icon"
icon="test-file-stub"
size={240}
- spin={false}
>
- <Component
+ <Icon
aria-hidden={true}
- className="icon styles__icon___23x3R"
- height={240}
- style={Object {}}
- width={240}
+ className="icon"
+ icon="test-file-stub"
+ size={240}
+ spin={false}
>
- <svg
+ <Component
aria-hidden={true}
className="icon styles__icon___23x3R"
height={240}
style={Object {}}
width={240}
>
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </StyledIcon>
+ <svg
+ aria-hidden={true}
+ className="icon styles__icon___23x3R"
+ height={240}
+ style={Object {}}
+ width={240}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </StyledIcon>
+ </div>
<div
className="text-22 title"
>
@@ -87,6 +91,71 @@ exports[`EcogestureSelectionDetail component should be rendered correctly 1`] =
>
Je baisse le chauffage en mode hors gel lorsque je m'absente plus de 2 jours.
</div>
+ <div
+ className="showMore text-15-normal"
+ onClick={[Function]}
+ role="button"
+ >
+ ecogesture_modal.show_more
+ </div>
+ <WithStyles(ForwardRef(Collapse))
+ exit={false}
+ in={false}
+ >
+ <ForwardRef(Collapse)
+ classes={
+ Object {
+ "entered": "MuiCollapse-entered",
+ "hidden": "MuiCollapse-hidden",
+ "root": "MuiCollapse-root",
+ "wrapper": "MuiCollapse-wrapper",
+ "wrapperInner": "MuiCollapse-wrapperInner",
+ }
+ }
+ exit={false}
+ in={false}
+ >
+ <Transition
+ addEndListener={[Function]}
+ appear={false}
+ enter={true}
+ exit={false}
+ in={false}
+ mountOnEnter={false}
+ onEnter={[Function]}
+ onEntered={[Function]}
+ onEntering={[Function]}
+ onExit={[Function]}
+ onExited={[Function]}
+ onExiting={[Function]}
+ timeout={300}
+ unmountOnExit={false}
+ >
+ <div
+ className="MuiCollapse-root MuiCollapse-hidden"
+ style={
+ Object {
+ "minHeight": "0px",
+ }
+ }
+ >
+ <div
+ className="MuiCollapse-wrapper"
+ >
+ <div
+ className="MuiCollapse-wrapperInner"
+ >
+ <div
+ className="longDescription text-16-normal-150"
+ >
+ On se demande parfois si cela vaut le coup de "couper le chauffage" quand on s’absente… dès qu’il s’agit d’un week-end la réponse est « oui sûrement » ! Attention cependant au retour à ne pas faire de la surchauffe ! L’idéal est bien évidemment de régler sa programmation pour que le chauffage se relance quelques heures avant votre retour…
+ </div>
+ </div>
+ </div>
+ </div>
+ </Transition>
+ </ForwardRef(Collapse)>
+ </WithStyles(ForwardRef(Collapse))>
</div>
<div
className="buttons"
diff --git a/src/components/EcogestureSelection/EcogestureSelectionDetail/ecogestureSelectionDetail.scss b/src/components/EcogestureSelection/EcogestureSelectionDetail/ecogestureSelectionDetail.scss
index 89e0f95a4..2bdb65ed0 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionDetail/ecogestureSelectionDetail.scss
+++ b/src/components/EcogestureSelection/EcogestureSelectionDetail/ecogestureSelectionDetail.scss
@@ -2,41 +2,42 @@
@import 'src/styles/base/breakpoint';
.eg-selection-detail-container {
- min-height: inherit;
display: flex;
flex-direction: column;
text-align: center;
color: $grey-bright;
padding: 0 1.5rem;
+ flex: 1;
+ max-height: calc(100vh - 60px - 72px - 0px);
+
.content {
display: flex;
gap: 0.5rem;
flex-direction: column;
flex: 1;
- justify-content: center;
+ justify-content: flex-start;
align-items: center;
+ overflow-y: auto;
.title {
color: $soft-grey;
font-weight: 700;
}
- .icon {
- @media #{$phone} {
- width: 50%;
- height: 50%;
- }
- @media #{$small-phone} {
- width: 30%;
- height: 30%;
- }
+ .iconContainer {
+ height: 240px;
+ }
+
+ .showMore {
+ text-align: center;
+ text-decoration: underline;
+ margin-top: 1rem;
+ cursor: pointer;
}
- .text {
- min-height: 4.875rem;
- display: flex;
- align-items: center;
- margin: 0 1rem;
+ .longDescription {
+ margin: 1rem 0.5rem;
+ text-align: left;
}
}
.buttons {
diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx
index 14d423b66..36095b762 100644
--- a/src/components/Navbar/Navbar.tsx
+++ b/src/components/Navbar/Navbar.tsx
@@ -40,6 +40,12 @@ const Navbar = () => {
},
[client]
)
+
+ /** Return class "is-active" if pathname includes matcher */
+ const isActive = (matcher: string) => {
+ return pathname.includes(matcher) ? 'is-active' : ''
+ }
+
return (
<aside className="o-sidebar">
<nav role="navigation" aria-label="navigation">
@@ -51,9 +57,7 @@ const Navbar = () => {
<Link
component={NavLink}
to="/consumption"
- className={`c-nav-link ${
- pathname.includes('/consumption') ? 'is-active' : ''
- }`}
+ className={`c-nav-link ${isActive('/consumption')}`}
>
<StyledIcon className="c-nav-icon off" icon={ConsoIconOff} />
<StyledIcon className="c-nav-icon on" icon={ConsoIconOn} />
@@ -64,9 +68,7 @@ const Navbar = () => {
<Link
component={NavLink}
to="/challenges"
- className={`c-nav-link ${
- pathname.includes('/challenges') ? 'is-active' : ''
- }`}
+ className={`c-nav-link ${isActive('/challenges')}`}
>
{(challengeExplorationNotification ||
challengeActionNotification ||
@@ -83,9 +85,7 @@ const Navbar = () => {
<Link
component={NavLink}
to="/ecogestures"
- className={`c-nav-link ${
- pathname.includes('/ecogestures') ? 'is-active' : ''
- }`}
+ className={`c-nav-link ${isActive('/ecogesture')}`}
>
<StyledIcon className="c-nav-icon off" icon={BulbIconOff} />
<StyledIcon className="c-nav-icon on" icon={BulbIconOn} />
@@ -110,9 +110,7 @@ const Navbar = () => {
<Link
component={NavLink}
to="/options"
- className={`c-nav-link ${
- pathname.includes('/options') ? 'is-active' : ''
- }`}
+ className={`c-nav-link ${isActive('/options')}`}
>
<StyledIcon className="c-nav-icon off" icon={ParameterIconOff} />
<StyledIcon className="c-nav-icon on" icon={ParameterIconOn} />
diff --git a/src/locales/fr.json b/src/locales/fr.json
index c54d909a3..aaae141fb 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -484,8 +484,8 @@
"title_ecogesture": "Astuce",
"title_action": "Action",
"efficiency": "Efficacité",
- "show_less": "Voir moins d’infos",
- "show_more": "Voir plus d’infos",
+ "show_less": "Voir moins",
+ "show_more": "Voir plus",
"select_action": "Je choisis cette action",
"accessibility": {
"window_title_ecogesture": "Fenêtre astuce",
--
GitLab