diff --git a/src/assets/icons/visu/analysis/pill-cold.svg b/src/assets/icons/visu/analysis/chip-cold.svg similarity index 100% rename from src/assets/icons/visu/analysis/pill-cold.svg rename to src/assets/icons/visu/analysis/chip-cold.svg diff --git a/src/assets/icons/visu/analysis/pill-hot.svg b/src/assets/icons/visu/analysis/chip-hot.svg similarity index 100% rename from src/assets/icons/visu/analysis/pill-hot.svg rename to src/assets/icons/visu/analysis/chip-hot.svg diff --git a/src/assets/icons/visu/analysis/pill-negative.svg b/src/assets/icons/visu/analysis/chip-negative.svg similarity index 100% rename from src/assets/icons/visu/analysis/pill-negative.svg rename to src/assets/icons/visu/analysis/chip-negative.svg diff --git a/src/assets/icons/visu/analysis/pill-positive.svg b/src/assets/icons/visu/analysis/chip-positive.svg similarity index 100% rename from src/assets/icons/visu/analysis/pill-positive.svg rename to src/assets/icons/visu/analysis/chip-positive.svg diff --git a/src/components/Analysis/Comparison/ChipVariation.tsx b/src/components/Analysis/Comparison/ChipVariation.tsx new file mode 100644 index 0000000000000000000000000000000000000000..a5c03843cda0fccd4cb7b7afb1c43759e175e746 --- /dev/null +++ b/src/components/Analysis/Comparison/ChipVariation.tsx @@ -0,0 +1,23 @@ +import ChipCold from 'assets/icons/visu/analysis/chip-cold.svg' +import ChipHot from 'assets/icons/visu/analysis/chip-hot.svg' +import ChipNegative from 'assets/icons/visu/analysis/chip-negative.svg' +import ChipPositive from 'assets/icons/visu/analysis/chip-positive.svg' +import StyledIcon from 'components/CommonKit/Icon/StyledIcon' +import React from 'react' + +export const ChipVariation = ({ + color, +}: { + color: 'positive' | 'negative' | 'hot' | 'cold' +}) => { + switch (color) { + case 'positive': + return <StyledIcon size={20} icon={ChipPositive} /> + case 'negative': + return <StyledIcon size={20} icon={ChipNegative} /> + case 'hot': + return <StyledIcon size={20} icon={ChipHot} /> + case 'cold': + return <StyledIcon size={20} icon={ChipCold} /> + } +} diff --git a/src/components/Analysis/Comparison/Comparison.spec.tsx b/src/components/Analysis/Comparison/Comparison.spec.tsx index ace9e1791a3bb52945ac9089e4f4c90359eabfd0..32510ecd6645f4c96dd0d16d0e1a36c1b6039d9a 100644 --- a/src/components/Analysis/Comparison/Comparison.spec.tsx +++ b/src/components/Analysis/Comparison/Comparison.spec.tsx @@ -82,10 +82,10 @@ describe('Comparison component', () => { </Provider> ) - const yearlyButton = await screen.findByRole('button', { + const yearlyButton = await screen.findByRole('tab', { name: `analysis.compare.year_tab`, }) - const monthlyButton = await screen.findByRole('button', { + const monthlyButton = await screen.findByRole('tab', { name: `analysis.compare.month_tab`, }) diff --git a/src/components/Analysis/Comparison/Comparison.tsx b/src/components/Analysis/Comparison/Comparison.tsx index ab7dd379c9190cff35e3391dbb4e8b71b7269650..3115a66498ddc3d223af4761f7a3b6a2e8290a65 100644 --- a/src/components/Analysis/Comparison/Comparison.tsx +++ b/src/components/Analysis/Comparison/Comparison.tsx @@ -100,14 +100,19 @@ const Comparison = ({ <div className="comparison card rich-card"> <div className="text-20-normal title">{t('analysis.compare.title')}</div> {!isLoading && ( - <ButtonGroup style={{ backgroundColor: 'var(--grey-0)' }}> + <ButtonGroup + role="tablist" + style={{ backgroundColor: 'var(--grey-0)' }} + > <Button + role="tab" className={classNames('btnTab', { active: period === 'year' })} onClick={() => dispatch(setPeriod('year'))} > {t(`analysis.compare.year_tab`)} </Button> <Button + role="tab" className={classNames('btnTab', { active: period === 'month' })} onClick={() => dispatch(setPeriod('month'))} > diff --git a/src/components/Analysis/Comparison/FluidPerformanceIndicator.tsx b/src/components/Analysis/Comparison/FluidPerformanceIndicator.tsx index 313e22a885b9124a40ac4bb104f57f77a9ac6139..6780e7882c63e514747ade97f3795b9b174cb541 100644 --- a/src/components/Analysis/Comparison/FluidPerformanceIndicator.tsx +++ b/src/components/Analysis/Comparison/FluidPerformanceIndicator.tsx @@ -10,8 +10,8 @@ import { setCurrentTimeStep, setShowCompare } from 'store/chart/chart.slice' import { useAppDispatch, useAppSelector } from 'store/hooks' import { getFluidIcon } from 'utils/picto' import { formatNumberValues, getFluidName, getMonthName } from 'utils/utils' +import { ChipVariation } from './ChipVariation' import './fluidPerformanceIndicator.scss' -import { PillVariation } from './PillVariation' interface FluidPerformanceIndicatorProps { performanceIndicator: PerformanceIndicator @@ -83,7 +83,7 @@ const FluidPerformanceIndicator = ({ {t(`FLUID.${FluidType[fluidType]}.UNIT`)} </span> {performanceIndicator?.percentageVariation !== null && ( - <PillVariation color={positive ? 'positive' : 'negative'} /> + <ChipVariation color={positive ? 'positive' : 'negative'} /> )} </div> {performanceIndicator?.percentageVariation === null && ( diff --git a/src/components/Analysis/Comparison/PillVariation.tsx b/src/components/Analysis/Comparison/PillVariation.tsx deleted file mode 100644 index 4cddd2deb2ae85eaf9e7e19e163bc6f8512a00a0..0000000000000000000000000000000000000000 --- a/src/components/Analysis/Comparison/PillVariation.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import PillCold from 'assets/icons/visu/analysis/pill-cold.svg' -import PillHot from 'assets/icons/visu/analysis/pill-hot.svg' -import PillNegative from 'assets/icons/visu/analysis/pill-negative.svg' -import PillPositive from 'assets/icons/visu/analysis/pill-positive.svg' -import StyledIcon from 'components/CommonKit/Icon/StyledIcon' -import React from 'react' - -export const PillVariation = ({ - color, -}: { - color: 'positive' | 'negative' | 'hot' | 'cold' -}) => { - switch (color) { - case 'positive': - return <StyledIcon size={20} icon={PillPositive} /> - case 'negative': - return <StyledIcon size={20} icon={PillNegative} /> - case 'hot': - return <StyledIcon size={20} icon={PillHot} /> - case 'cold': - return <StyledIcon size={20} icon={PillCold} /> - } -} diff --git a/src/components/Analysis/Comparison/TemperatureComparison.tsx b/src/components/Analysis/Comparison/TemperatureComparison.tsx index 44fca9aebd0fa900be454436c5e2f4365fadba18..1594eea1f1561465ceacb57b2b3459431c976664 100644 --- a/src/components/Analysis/Comparison/TemperatureComparison.tsx +++ b/src/components/Analysis/Comparison/TemperatureComparison.tsx @@ -9,7 +9,7 @@ import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n' import React, { useEffect, useMemo, useState } from 'react' import ConsumptionService from 'services/consumption.service' import { useAppSelector } from 'store/hooks' -import { PillVariation } from './PillVariation' +import { ChipVariation } from './ChipVariation' import TemperatureComparisonModal from './TemperatureComparisonModal/TemperatureComparisonModal' import './temperatureComparison.scss' @@ -92,7 +92,7 @@ const TemperatureComparison = () => { {t('analysis.temperature_comparison.unit')} </span> </div> - <PillVariation color={positive ? 'hot' : 'cold'} /> + <ChipVariation color={positive ? 'hot' : 'cold'} /> </div> <div> <span className="text-12"> diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.spec.tsx b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.spec.tsx index 8b1080a733dc2851a8fb7cc0a36d6b5f465c6114..1d8177aee406ae229c920ca38f7a121d434b175f 100644 --- a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.spec.tsx +++ b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.spec.tsx @@ -84,7 +84,7 @@ describe('ElecHalfHourMonthlyAnalysis component', () => { await waitFor(() => null, { container }) expect(container).toMatchSnapshot() expect(screen.getByText('special_elec.weekend')).toBeInTheDocument() - expect(screen.getAllByRole('button')).toHaveLength(2) + expect(screen.getAllByRole('tab')).toHaveLength(2) }) it('should call the ElecInfoModal with open = true when click on the button', async () => { diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.tsx b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.tsx index 20069e774f800b57cab77f3da7faec3497b37bcd..d190aa12b49fa4cdaa42b11f80c873f99965f347 100644 --- a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.tsx +++ b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.tsx @@ -163,7 +163,7 @@ const ElecHalfHourMonthlyAnalysis = ({ if (!isHalfHourActivated) { return ( <ElecHalfHourLayout> - <div className="activation-text text-18-normal"> + <div className="activation-text text-16-normal"> {t(`timestep.half_an_hour.analysis_waiting_data`)} </div> </ElecHalfHourLayout> @@ -181,14 +181,16 @@ const ElecHalfHourMonthlyAnalysis = ({ return ( <ElecHalfHourLayout> <div className="text-20-normal title">{t('special_elec.average')}</div> - <ButtonGroup style={{ backgroundColor: 'var(--grey-0)' }}> + <ButtonGroup role="tablist" style={{ backgroundColor: 'var(--grey-0)' }}> <Button + role="tab" className={classNames('btnTab', { active: !isWeekend })} onClick={() => setIsWeekend(false)} > {t('special_elec.week')} </Button> <Button + role="tab" className={classNames('btnTab', { active: isWeekend })} onClick={() => setIsWeekend(true)} > diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourMonthlyAnalysis.spec.tsx.snap b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourMonthlyAnalysis.spec.tsx.snap index 54788cf0577b80d0d86d3842672057a3eda92b8b..857e392e5ce0fc153a2b3a83d18557ec5b73ad73 100644 --- a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourMonthlyAnalysis.spec.tsx.snap +++ b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourMonthlyAnalysis.spec.tsx.snap @@ -21,7 +21,7 @@ exports[`ElecHalfHourMonthlyAnalysis component should be rendered correctly when special_elec.title </div> <div - class="activation-text text-18-normal" + class="activation-text text-16-normal" > timestep.half_an_hour.analysis_waiting_data </div> @@ -56,10 +56,11 @@ exports[`ElecHalfHourMonthlyAnalysis component should be rendered correctly when </div> <div class="MuiButtonGroup-root" - role="group" + role="tablist" > <button class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedOutlined MuiButtonGroup-groupedOutlinedHorizontal MuiButtonGroup-groupedOutlined btnTab" + role="tab" tabindex="0" type="button" > @@ -71,6 +72,7 @@ exports[`ElecHalfHourMonthlyAnalysis component should be rendered correctly when </button> <button class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedOutlined MuiButtonGroup-groupedOutlinedHorizontal MuiButtonGroup-groupedOutlined btnTab active" + role="tab" tabindex="0" type="button" > diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/elecHalfHourMonthlyAnalysis.scss b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/elecHalfHourMonthlyAnalysis.scss index 330b4ddb154d87afb0adcf61b2ca68db4b862712..754ed3cc1542ab7c51cd819e52e69f7db9a30b0f 100644 --- a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/elecHalfHourMonthlyAnalysis.scss +++ b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/elecHalfHourMonthlyAnalysis.scss @@ -14,9 +14,6 @@ .minIcon { margin: auto 0.8rem auto 0; } - .activation-text { - margin: 1rem 0 0.7rem 0; - } .elec-infos { display: flex; diff --git a/src/components/Analysis/ProfileComparator/ProfileComparatorRow.tsx b/src/components/Analysis/ProfileComparator/ProfileComparatorRow.tsx index fb217aad497c9f3a014053667fbf57889ecb887b..82359a8da599a07bae7df1817ee731466048da90 100644 --- a/src/components/Analysis/ProfileComparator/ProfileComparatorRow.tsx +++ b/src/components/Analysis/ProfileComparator/ProfileComparatorRow.tsx @@ -108,7 +108,7 @@ const ProfileComparatorRow = ({ <div className="user-graph"> <div className={classNames('price text-15-bold', { - ['not-connected']: !connected || noData, + 'not-connected': !connected || noData, })} data-testid="userPrice" > @@ -145,7 +145,7 @@ const ProfileComparatorRow = ({ </div> <div className={classNames('price', 'text-15-bold', { - ['not-connected']: !connected, + 'not-connected': !connected, })} data-testid="averagePrice" > diff --git a/src/components/Challenge/ChallengeCardOnGoing/ChallengeCardOnGoing.tsx b/src/components/Challenge/ChallengeCardOnGoing/ChallengeCardOnGoing.tsx index 30bbaf99afbe74c1d5791bb4d9cd9fe816e41060..53f0ffd87313b05fef228f23dc50e7664c62f733 100644 --- a/src/components/Challenge/ChallengeCardOnGoing/ChallengeCardOnGoing.tsx +++ b/src/components/Challenge/ChallengeCardOnGoing/ChallengeCardOnGoing.tsx @@ -154,7 +154,7 @@ const ChallengeCardOnGoing = ({ title={t('challenge.card.ongoing.quiz')} tabIndex={quizFinished ? -1 : 0} className={classNames('smallCard', { - ['finished']: quizFinished, + finished: quizFinished, })} onClick={goQuiz} > @@ -175,7 +175,7 @@ const ChallengeCardOnGoing = ({ title={t('challenge.card.ongoing.exploration')} tabIndex={explorationFinished ? -1 : 0} className={classNames('smallCard explorationCard', { - ['finished']: explorationFinished, + finished: explorationFinished, })} onClick={goExploration} > @@ -200,7 +200,7 @@ const ChallengeCardOnGoing = ({ title={t('challenge.card.ongoing.action')} tabIndex={actionFinished ? -1 : 0} className={classNames('smallCard actionCard', { - ['finished']: actionFinished, + finished: actionFinished, })} onClick={goAction} > diff --git a/src/components/Consumption/ConsumptionView.tsx b/src/components/Consumption/ConsumptionView.tsx index 6dbfecd0f1b417470fc8b9a3aaf560976c75476a..416591d45349cac0da982c5d7e19ccdab86c1f71 100644 --- a/src/components/Consumption/ConsumptionView.tsx +++ b/src/components/Consumption/ConsumptionView.tsx @@ -206,7 +206,10 @@ const ConsumptionView = ({ fluidType }: { fluidType: FluidType }) => { /> </Header> <Content> - <TimeStepSelector fluidType={fluidType} /> + {showOfflineData && !isWaitingForConsent && ( + <TimeStepSelector fluidType={fluidType} /> + )} + <FluidButtons activeFluid={fluidType} key={updateKey} /> {showOfflineData && !isWaitingForConsent && ( diff --git a/src/components/Consumption/FluidButtons/FluidButton.tsx b/src/components/Consumption/FluidButtons/FluidButton.tsx index afafe2578997c162d1b9dce5b0e730188cfeca81..9f0f3227af98a54bae4e992897239e353decf8b1 100644 --- a/src/components/Consumption/FluidButtons/FluidButton.tsx +++ b/src/components/Consumption/FluidButtons/FluidButton.tsx @@ -7,7 +7,8 @@ import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n' import { FluidState, FluidType } from 'enums' import React, { useCallback, useEffect, useState } from 'react' import { useNavigate } from 'react-router-dom' -import { useAppSelector } from 'store/hooks' +import { setShowConnectionDetails } from 'store/chart/chart.slice' +import { useAppDispatch, useAppSelector } from 'store/hooks' import { getActiveFluidIcon } from 'utils/picto' import { getFluidName, isKonnectorActive } from 'utils/utils' @@ -19,7 +20,11 @@ interface FluidButtonProps { const FluidButton = ({ fluidType, isActive }: FluidButtonProps) => { const { t } = useI18n() const navigate = useNavigate() - const { fluidStatus } = useAppSelector(state => state.ecolyo.global) + const dispatch = useAppDispatch() + const { + global: { fluidStatus }, + chart: { showConnectionDetails }, + } = useAppSelector(state => state.ecolyo) const [showError, setShowError] = useState<boolean>(false) const isMulti = fluidType === FluidType.MULTIFLUID const fluidName = getFluidName(fluidType) @@ -48,7 +53,9 @@ const FluidButton = ({ fluidType, isActive }: FluidButtonProps) => { const goToFluid = useCallback(() => { navigate(isMulti ? '/consumption' : `/consumption/${fluidName}`) - }, [navigate, isMulti, fluidName]) + // reset details when switching fluids + if (showConnectionDetails) dispatch(setShowConnectionDetails(false)) + }, [navigate, isMulti, fluidName, showConnectionDetails, dispatch]) const isFluidMaintenance = () => fluidStatus[fluidType]?.maintenance diff --git a/src/components/DateNavigator/DateNavigator.tsx b/src/components/DateNavigator/DateNavigator.tsx index 7a936ab06ef633f3474b43650153399f538c6456..465731e820d0c26a0712ddf5dcc79c1a56aa23b9 100644 --- a/src/components/DateNavigator/DateNavigator.tsx +++ b/src/components/DateNavigator/DateNavigator.tsx @@ -43,7 +43,7 @@ const DateNavigator = ({ disabled={disablePrev} aria-label={t('consumption.accessibility.button_previous_value')} className={classNames('date-navigator-button', { - ['disable']: disablePrev, + disable: disablePrev, })} /> @@ -75,7 +75,7 @@ const DateNavigator = ({ disabled={disableNext} aria-label={t('consumption.accessibility.button_next_value')} className={classNames('date-navigator-button', { - ['disable']: disableNext, + disable: disableNext, })} /> </div> diff --git a/src/components/Ecogesture/EcogestureTabsView.tsx b/src/components/Ecogesture/EcogestureTabsView.tsx index 5fc42d6085f09e3851c0a5714b36b336bcdac2ec..2c8af7f597ba9ca7703550edf5c1538d32daa372 100644 --- a/src/components/Ecogesture/EcogestureTabsView.tsx +++ b/src/components/Ecogesture/EcogestureTabsView.tsx @@ -151,8 +151,9 @@ const EcogestureTabsView = () => { {!isLoading && ( <> <div className="tabContainer"> - <ButtonGroup> + <ButtonGroup role="tablist"> <Button + role="tab" className={classNames('btnTab', { active: tabValue === EcogestureTab.OBJECTIVE, })} @@ -163,6 +164,7 @@ const EcogestureTabsView = () => { {`(${objective.length})`} </Button> <Button + role="tab" className={classNames('btnTab', { active: tabValue === EcogestureTab.DOING, })} @@ -173,6 +175,7 @@ const EcogestureTabsView = () => { {`(${doing.length})`} </Button> <Button + role="tab" className={classNames('btnTab', { active: tabValue === EcogestureTab.ALL, })} diff --git a/src/components/Ecogesture/__snapshots__/EcogestureTabsView.spec.tsx.snap b/src/components/Ecogesture/__snapshots__/EcogestureTabsView.spec.tsx.snap index 340b91862c004b545911971759c9396016a07c59..3ce5c7e1519f9badcaf38cf815a3c1cab01a52d1 100644 --- a/src/components/Ecogesture/__snapshots__/EcogestureTabsView.spec.tsx.snap +++ b/src/components/Ecogesture/__snapshots__/EcogestureTabsView.spec.tsx.snap @@ -16,10 +16,11 @@ exports[`EcogestureView component should be rendered correctly with 3 clickable > <div class="MuiButtonGroup-root" - role="group" + role="tablist" > <button class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedOutlined MuiButtonGroup-groupedOutlinedHorizontal MuiButtonGroup-groupedOutlined btnTab active" + role="tab" tabindex="0" type="button" > @@ -33,6 +34,7 @@ exports[`EcogestureView component should be rendered correctly with 3 clickable </button> <button class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedOutlined MuiButtonGroup-groupedOutlinedHorizontal MuiButtonGroup-groupedOutlined btnTab" + role="tab" tabindex="0" type="button" > @@ -46,6 +48,7 @@ exports[`EcogestureView component should be rendered correctly with 3 clickable </button> <button class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedOutlined MuiButtonGroup-groupedOutlinedHorizontal MuiButtonGroup-groupedOutlined btnTab" + role="tab" tabindex="0" type="button" > diff --git a/src/components/FluidChart/HalfHourUpcoming/HalfHourUpcoming.scss b/src/components/FluidChart/HalfHourUpcoming/HalfHourUpcoming.scss index caf82a36b3fdb2b92974d96ef3a011019c6c8cb4..f1d6aa410ecfa849a78b1bb96aaa75a27e5f82d9 100644 --- a/src/components/FluidChart/HalfHourUpcoming/HalfHourUpcoming.scss +++ b/src/components/FluidChart/HalfHourUpcoming/HalfHourUpcoming.scss @@ -5,13 +5,11 @@ display: flex; flex-direction: column; align-items: center; + justify-content: center; text-align: center; gap: 12px; padding: 2rem 1rem; margin-top: 16px; - background-color: $grey-1; - border: 1px solid $grey-2; - box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.12); border-radius: 4px; // Same height as FluidChartSwipe to avoid layout shift diff --git a/src/components/FluidChart/TimeStepSelector/TimeStepSelector.spec.tsx b/src/components/FluidChart/TimeStepSelector/TimeStepSelector.spec.tsx index c5272e89359580cefb5b97f9ad78fdb6505784f9..89092e34d32e3035517e61a05d92f1a8fa365ef1 100644 --- a/src/components/FluidChart/TimeStepSelector/TimeStepSelector.spec.tsx +++ b/src/components/FluidChart/TimeStepSelector/TimeStepSelector.spec.tsx @@ -31,7 +31,7 @@ describe('TimeStepSelector component', () => { <TimeStepSelector fluidType={FluidType.WATER} /> </Provider> ) - expect(screen.getAllByRole('button').length).toBe(4) + expect(screen.getAllByRole('tab').length).toBe(4) expect(container).toMatchSnapshot() }) @@ -50,7 +50,7 @@ describe('TimeStepSelector component', () => { <TimeStepSelector fluidType={FluidType.ELECTRICITY} /> </Provider> ) - expect(screen.getAllByRole('button').length).toBe(5) + expect(screen.getAllByRole('tab').length).toBe(5) }) it('should define next TimeStep and dispatch it', async () => { @@ -68,7 +68,7 @@ describe('TimeStepSelector component', () => { <TimeStepSelector fluidType={FluidType.WATER} /> </Provider> ) - await userEvent.click(screen.getAllByRole('button')[2]) + await userEvent.click(screen.getAllByRole('tab')[2]) expect(setCurrentTimeStepSpy).toHaveBeenCalledTimes(1) expect(setCurrentTimeStepSpy).toHaveBeenCalledWith(TimeStep.MONTH) expect(setCurrentIndexSpy).toHaveBeenCalledTimes(1) diff --git a/src/components/FluidChart/TimeStepSelector/TimeStepSelector.tsx b/src/components/FluidChart/TimeStepSelector/TimeStepSelector.tsx index 6d86b501806d23acb53f5eead9ace4201b0ee3c2..06ffc9ba2ea89829efb6f144ffed247cb099391a 100644 --- a/src/components/FluidChart/TimeStepSelector/TimeStepSelector.tsx +++ b/src/components/FluidChart/TimeStepSelector/TimeStepSelector.tsx @@ -35,10 +35,11 @@ const TimeStepSelector = ({ fluidType }: { fluidType: FluidType }) => { } return ( <div className="timestep-selector"> - <ButtonGroup> + <ButtonGroup role="tablist"> {timeStepArray.map(step => ( <Button key={step} + role="tab" onClick={() => handleChangeTimeStep(step)} className={classNames('btnTab', { active: step === currentTimeStep, diff --git a/src/components/FluidChart/TimeStepSelector/__snapshots__/TimeStepSelector.spec.tsx.snap b/src/components/FluidChart/TimeStepSelector/__snapshots__/TimeStepSelector.spec.tsx.snap index 8c5142e7e29c110c8cd82b31b8b1a7227af82045..53c69474e0430165d22b87f3f5a0305b79cbb460 100644 --- a/src/components/FluidChart/TimeStepSelector/__snapshots__/TimeStepSelector.spec.tsx.snap +++ b/src/components/FluidChart/TimeStepSelector/__snapshots__/TimeStepSelector.spec.tsx.snap @@ -7,10 +7,11 @@ exports[`TimeStepSelector component should render component properly with 4 time > <div class="MuiButtonGroup-root" - role="group" + role="tablist" > <button class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedOutlined MuiButtonGroup-groupedOutlinedHorizontal MuiButtonGroup-groupedOutlined btnTab" + role="tab" tabindex="0" type="button" > @@ -25,6 +26,7 @@ exports[`TimeStepSelector component should render component properly with 4 time </button> <button class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedOutlined MuiButtonGroup-groupedOutlinedHorizontal MuiButtonGroup-groupedOutlined btnTab active" + role="tab" tabindex="0" type="button" > @@ -39,6 +41,7 @@ exports[`TimeStepSelector component should render component properly with 4 time </button> <button class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedOutlined MuiButtonGroup-groupedOutlinedHorizontal MuiButtonGroup-groupedOutlined btnTab" + role="tab" tabindex="0" type="button" > @@ -53,6 +56,7 @@ exports[`TimeStepSelector component should render component properly with 4 time </button> <button class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedOutlined MuiButtonGroup-groupedOutlinedHorizontal MuiButtonGroup-groupedOutlined btnTab" + role="tab" tabindex="0" type="button" > diff --git a/src/components/Konnector/KonnectorModal.tsx b/src/components/Konnector/KonnectorModal.tsx index b11873d3d6f9eb5c94fe3574f3f39089f1c8b6ce..0397c87a69a3771136ad307b7e715895525fc167 100644 --- a/src/components/Konnector/KonnectorModal.tsx +++ b/src/components/Konnector/KonnectorModal.tsx @@ -70,7 +70,7 @@ const KonnectorModal = ({ <div key={idx} className={classNames('waiting-text', { - ['show']: idx === index % shuffledWaitingTexts.length, + show: idx === index % shuffledWaitingTexts.length, })} > <p>{text.first}</p> @@ -91,7 +91,7 @@ const KonnectorModal = ({ <div key={idx} className={classNames('waiting-text', { - ['show']: idx === index % firstConnectionWaitingTexts.length, + show: idx === index % firstConnectionWaitingTexts.length, })} > <p>{text.first}</p> diff --git a/src/components/Options/ExportData/exportData.scss b/src/components/Options/ExportData/exportData.scss index 71c968a5397076b534e49ce99ec839da29527e9a..d48cc8717d67dc20cee2133faa54f9e2b06b82c4 100644 --- a/src/components/Options/ExportData/exportData.scss +++ b/src/components/Options/ExportData/exportData.scss @@ -1,10 +1,5 @@ @import 'src/styles/base/color'; -div.expansion-panel-root, -div.expansion-panel-root.Mui-expanded:last-child { - margin: 0.2rem 0; -} - .export-option-root { display: flex; flex-direction: column; diff --git a/src/components/Quiz/QuizQuestion/QuizQuestionContent.tsx b/src/components/Quiz/QuizQuestion/QuizQuestionContent.tsx index aa0bef5463cd8eee94d54b8fcaf05d2f1d6b2b27..550db4ab9939a911f490cd72310908c7a3acc5e1 100644 --- a/src/components/Quiz/QuizQuestion/QuizQuestionContent.tsx +++ b/src/components/Quiz/QuizQuestion/QuizQuestionContent.tsx @@ -1,5 +1,6 @@ import Button from '@material-ui/core/Button' import CloseIcon from 'assets/icons/ico/close.svg' +import classNames from 'classnames' import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton' import QuizExplanationModal from 'components/Quiz/QuizExplanationModal/QuizExplanationModal' import { useClient } from 'cozy-client' @@ -101,18 +102,16 @@ const QuizQuestionContent = ({ </p> {userChallenge.quiz.questions[questionIndex].answers.map( (answer, index) => ( - <div className="answer" key={index}> - <input - type="radio" - id={`answer${index}`} - value={answer.answerLabel} - onChange={handleChange} - checked={userChoice === answer.answerLabel} - /> - <label htmlFor={`answer${index}`} className="text-16-bold"> - {answer.answerLabel} - </label> - </div> + <Button + key={index} + role="radio" + className={classNames('btnSecondary btnAnswer', { + checked: userChoice === answer.answerLabel, + })} + onClick={() => setUserChoice(answer.answerLabel)} + > + {answer.answerLabel} + </Button> ) )} </div> diff --git a/src/components/Quiz/QuizQuestion/QuizQuestionContentCustom.tsx b/src/components/Quiz/QuizQuestion/QuizQuestionContentCustom.tsx index e690af2d35d2fa31acc81c7933ae67b8f45e2752..1810485a43d914b8eacc2f957351193556d5375e 100644 --- a/src/components/Quiz/QuizQuestion/QuizQuestionContentCustom.tsx +++ b/src/components/Quiz/QuizQuestion/QuizQuestionContentCustom.tsx @@ -1,5 +1,6 @@ import Button from '@material-ui/core/Button' import CloseIcon from 'assets/icons/ico/close.svg' +import classNames from 'classnames' import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton' import QuizExplanationModal from 'components/Quiz/QuizExplanationModal/QuizExplanationModal' import { useClient } from 'cozy-client' @@ -56,10 +57,6 @@ const QuizQuestionContentCustom = ({ dispatch(updateUserChallengeList(userChallengeUpdated)) } - const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => { - setUserChoice(e.target.value) - } - const finishQuiz = async () => { setOpenModal(false) const userChallengeUpdated = await challengeService.updateUserChallenge( @@ -84,18 +81,16 @@ const QuizQuestionContentCustom = ({ <p className="question text-18-bold">{customQuestion.questionLabel}</p> {customQuestion.answers.map((answer, index) => ( - <div className="answer" key={index}> - <input - type="radio" - id={`answer${index}`} - value={answer.answerLabel} - onChange={handleChange} - checked={userChoice === answer.answerLabel} - /> - <label htmlFor={`answer${index}`} className="text-16-bold"> - {answer.answerLabel} - </label> - </div> + <Button + key={index} + role="radio" + className={classNames('btnSecondary btnAnswer', { + checked: userChoice === answer.answerLabel, + })} + onClick={() => setUserChoice(answer.answerLabel)} + > + {answer.answerLabel} + </Button> ))} </div> <Button diff --git a/src/components/Quiz/QuizQuestion/quizQuestion.scss b/src/components/Quiz/QuizQuestion/quizQuestion.scss index 6040bf3cd416f200c62493879e6092e1d8bd5b96..dc244fc0cc0bce262de13bb682854e587482932d 100644 --- a/src/components/Quiz/QuizQuestion/quizQuestion.scss +++ b/src/components/Quiz/QuizQuestion/quizQuestion.scss @@ -49,36 +49,25 @@ right: 1rem; } } - .answer { - text-align: center; + .btnAnswer { + border-radius: 0px; width: 100%; @media (min-width: $width-large-phone) { max-width: 80%; } - input[type='radio'] { - position: fixed; - opacity: 0; - pointer-events: none; - } - input[type='radio']:focus + label { - background: $multi-color; - color: $dark-light-2; - border-color: $multi-color; - } - label { - display: block; - border: 1px solid $grey-bright; - padding: 0.5rem; + &:not(:last-child) { margin-bottom: 1rem; - cursor: pointer; } - input[type='radio']:checked + label, - label:hover { - background: $multi-color; - color: $dark-light-2; + + &.checked { + background-color: $multi-color; border-color: $multi-color; + span { + color: $dark-light-2; + } } } + button.validate { margin-top: 1rem; width: auto; diff --git a/src/styles/components/_expansion-panel.scss b/src/styles/components/_expansion-panel.scss index 095c7e8568d4e15da4cd4dd9b0081ff0c2566880..eef011d90b0d601ac8afe8c209974bd1f19592e8 100644 --- a/src/styles/components/_expansion-panel.scss +++ b/src/styles/components/_expansion-panel.scss @@ -1,7 +1,6 @@ @import '../base/color'; div.expansion-panel-root { - margin-bottom: 1rem; color: $grey-bright; background-color: $grey-1; border: 1px solid $grey-2; @@ -9,12 +8,7 @@ div.expansion-panel-root { box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.12); transition: background-color 0.6s ease; box-sizing: border-box; - &.Mui-expanded:first-child { - margin: 1.2rem 0; - } - &.Mui-expanded:last-child { - margin: 1.2rem 0; - } + &.red-border { border: 1px solid $red-primary; } @@ -33,6 +27,7 @@ div.expansion-panel-summary { } &.Mui-expanded { min-height: 4rem; + background-color: $grey-2; &.small { min-height: 3rem; } @@ -53,5 +48,6 @@ div.expansion-panel-content { } } div.expansion-panel-details { - padding: 0 1.2rem 1.2rem; + padding: 0 1rem 1rem; + background-color: $grey-2; } diff --git a/src/styles/components/_input.scss b/src/styles/components/_input.scss index 5342054c9ba1a936d584480313336931ee5d67ba..a8772d739938b78301616f3f7e11ff8197e7c0cc 100644 --- a/src/styles/components/_input.scss +++ b/src/styles/components/_input.scss @@ -28,7 +28,7 @@ input.inputNumber { text-align: center; } -input:focus-visible { +.Mui-focusVisible { outline: 2px solid $blue-accessibility; outline-offset: 2px; } diff --git a/src/styles/index.scss b/src/styles/index.scss index 7b337eebadce7292c6d81a1c8b8862473b5bd952..1fdf7d6f01ff9bf344bc39298ce08362138f57d6 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -60,7 +60,7 @@ --grey-2: #{$grey-2}; // Override Cozy UI colors - --paperBackgroundColor: $dark-2; + --paperBackgroundColor: $grey-0; --primaryTextColor: $grey-bright; } @@ -103,3 +103,11 @@ input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 30px $dark-2 inset !important; } + +html { + background-color: $grey-0; +} + +.app-content { + min-height: auto !important; +}