diff --git a/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap b/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap index cdc58037adb76fba73cd409447e624c664bda733..c85b19e81cf96446df12945e56aa0af47befa3f5 100644 --- a/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap +++ b/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap @@ -17,31 +17,8 @@ exports[`SgeConnectView component should be rendered correctly 1`] = ` class="header-content-top" > <div - class="header-text-desktop text-14-normal-uppercase" + class="header-text-selection text-14-normal-uppercase" > - <button - aria-label="header.accessibility.button_back" - class="MuiButtonBase-root MuiIconButton-root header-back-button" - tabindex="0" - type="button" - > - <span - class="MuiIconButton-label" - > - <svg - class="styles__icon___23x3R" - height="16" - width="16" - > - <use - xlink:href="#test-file-stub" - /> - </svg> - </span> - <span - class="MuiTouchRipple-root" - /> - </button> <span> common.title_sge_connect </span> diff --git a/src/components/Ecogesture/SingleEcogestureView.tsx b/src/components/Ecogesture/SingleEcogestureView.tsx index 13a60e4be98f167cb1f61d86aaa102607d61a519..acfca4da2852650f4c91a9615febc42ba853c501 100644 --- a/src/components/Ecogesture/SingleEcogestureView.tsx +++ b/src/components/Ecogesture/SingleEcogestureView.tsx @@ -111,94 +111,99 @@ const SingleEcogestureView = () => { displayBackArrow={true} /> <Content> - {isLoading && ( - <div className="loaderContainer"> - <Loader /> - </div> - )} - {!isLoading && !ecogesture && ( - <ErrorPage - text={t('error_page.no_ecogesture')} - returnPage="ecogestures" - /> - )} - {!isLoading && ecogesture && ( - <div className="single-ecogesture"> - <div className="icon-container"> - {ecogestureIcon && ( - <StyledIcon - className="icon-big" - icon={ecogestureIcon} - size={220} - /> - )} + <div className="content-wrapper"> + {isLoading && ( + <div className="loaderContainer"> + <Loader /> </div> - <div className="details"> - <div className="text-22-bold title">{ecogesture.shortName}</div> - <div className="efficiency"> - <span className="text-14-normal"> - {t('ecogesture_modal.efficiency')} - </span> - <EfficiencyRating result={Math.round(ecogesture.efficiency)} /> + )} + {!isLoading && !ecogesture && ( + <ErrorPage + text={t('error_page.no_ecogesture')} + returnPage="ecogestures" + /> + )} + {!isLoading && ecogesture && ( + <div className="single-ecogesture"> + <div className="icon-container"> + {ecogestureIcon && ( + <StyledIcon + className="icon-big" + icon={ecogestureIcon} + size={220} + /> + )} </div> - </div> - <div className="styled-container"> - <div className="long-name text-18-bold"> - {ecogesture.longName} + <div className="details"> + <div className="text-22-bold title">{ecogesture.shortName}</div> + <div className="efficiency"> + <span className="text-14-normal"> + {t('ecogesture_modal.efficiency')} + </span> + <EfficiencyRating + result={Math.round(ecogesture.efficiency)} + /> + </div> </div> - <Button - classes={{ - root: 'btnText showMore', - label: 'text-15-normal', - }} - onClick={() => setShowDetails(prev => !prev)} - > - {t(`ecogesture_modal.show_${showDetails ? 'less' : 'more'}`)} - </Button> - - <Collapse in={showDetails}> - <div className="longDescription text-16-normal-150"> - {ecogesture.longDescription} + <div className="styled-container"> + <div className="long-name text-18-bold"> + {ecogesture.longName} </div> - </Collapse> - </div> + <Button + classes={{ + root: 'btnText showMore', + label: 'text-15-normal', + }} + onClick={() => setShowDetails(prev => !prev)} + > + {t(`ecogesture_modal.show_${showDetails ? 'less' : 'more'}`)} + </Button> - <div className="buttons-selection"> - <IconButton - aria-label={t('ecogesture.objective')} - onClick={toggleObjective} - classes={{ - root: `btnSecondary 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: `btnSecondary doing-btn ${isDoing && 'active'}`, - label: 'text-15-normal', - }} - > - <Icon - className="status-icon" - icon={isDoing ? doingEnabledIcon : doingDisabledIcon} - size={40} - /> - <span>{t('ecogesture.doing')}</span> - </IconButton> + <Collapse in={showDetails} timeout={300}> + <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: `btnSecondary 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: `btnSecondary 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> - </div> - )} + )} + </div> </Content> </> ) diff --git a/src/components/Ecogesture/__snapshots__/SingleEcogestureView.spec.tsx.snap b/src/components/Ecogesture/__snapshots__/SingleEcogestureView.spec.tsx.snap index e035305baaeb0458c5215c6fdfcca0a0defea995..77ad870acd7281bfdc6ba3d5eab82475144eed9f 100644 --- a/src/components/Ecogesture/__snapshots__/SingleEcogestureView.spec.tsx.snap +++ b/src/components/Ecogesture/__snapshots__/SingleEcogestureView.spec.tsx.snap @@ -12,130 +12,134 @@ exports[`SingleEcogesture component should be rendered correctly 1`] = ` /> <mock-content> <div - class="single-ecogesture" + class="content-wrapper" > <div - class="icon-container" - > - <svg - aria-hidden="true" - class="icon-big styles__icon___23x3R" - height="220" - width="220" - > - <use - xlink:href="#test-file-stub" - /> - </svg> - </div> - <div - class="details" + class="single-ecogesture" > <div - class="text-22-bold title" + class="icon-container" > - Bonhomme de neige + <svg + aria-hidden="true" + class="icon-big styles__icon___23x3R" + height="220" + width="220" + > + <use + xlink:href="#test-file-stub" + /> + </svg> </div> <div - class="efficiency" + class="details" > - <span - class="text-14-normal" + <div + class="text-22-bold title" + > + Bonhomme de neige + </div> + <div + class="efficiency" > - ecogesture_modal.efficiency - </span> - <mock-efficiencyrating - result="4" - /> + <span + class="text-14-normal" + > + ecogesture_modal.efficiency + </span> + <mock-efficiencyrating + result="4" + /> + </div> </div> - </div> - <div - class="styled-container" - > <div - class="long-name text-18-bold" - > - Je baisse le chauffage en mode hors gel lorsque je m'absente plus de 2 jours. - </div> - <button - class="MuiButtonBase-root MuiButton-root btnText showMore MuiButton-text" - tabindex="0" - type="button" + class="styled-container" > - <span - class="MuiButton-label text-15-normal" + <div + class="long-name text-18-bold" > - ecogesture_modal.show_more - </span> - </button> - <div - class="MuiCollapse-root MuiCollapse-hidden" - style="min-height: 0px;" - > + Je baisse le chauffage en mode hors gel lorsque je m'absente plus de 2 jours. + </div> + <button + class="MuiButtonBase-root MuiButton-root btnText showMore MuiButton-text" + tabindex="0" + type="button" + > + <span + class="MuiButton-label text-15-normal" + > + ecogesture_modal.show_more + </span> + </button> <div - class="MuiCollapse-wrapper" + class="MuiCollapse-root MuiCollapse-hidden" + style="min-height: 0px;" > <div - class="MuiCollapse-wrapperInner" + class="MuiCollapse-wrapper" > <div - class="longDescription text-16-normal-150" + class="MuiCollapse-wrapperInner" > - 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 + class="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> </div> - </div> - <div - class="buttons-selection" - > - <button - aria-label="ecogesture.objective" - class="MuiButtonBase-root MuiIconButton-root btnSecondary objective-btn false" - tabindex="0" - type="button" + <div + class="buttons-selection" > - <span - class="MuiIconButton-label text-15-normal" + <button + aria-label="ecogesture.objective" + class="MuiButtonBase-root MuiIconButton-root btnSecondary objective-btn false" + tabindex="0" + type="button" > - <svg - class="status-icon styles__icon___23x3R" - height="40" - width="40" + <span + class="MuiIconButton-label text-15-normal" > - <use - xlink:href="#test-file-stub" - /> - </svg> - <span> - ecogesture.objective + <svg + class="status-icon styles__icon___23x3R" + height="40" + width="40" + > + <use + xlink:href="#test-file-stub" + /> + </svg> + <span> + ecogesture.objective + </span> </span> - </span> - </button> - <button - aria-label="ecogesture.doing" - class="MuiButtonBase-root MuiIconButton-root btnSecondary doing-btn false" - tabindex="0" - type="button" - > - <span - class="MuiIconButton-label text-15-normal" + </button> + <button + aria-label="ecogesture.doing" + class="MuiButtonBase-root MuiIconButton-root btnSecondary doing-btn false" + tabindex="0" + type="button" > - <svg - class="status-icon styles__icon___23x3R" - height="40" - width="40" + <span + class="MuiIconButton-label text-15-normal" > - <use - xlink:href="#test-file-stub" - /> - </svg> - <span> - ecogesture.doing + <svg + class="status-icon styles__icon___23x3R" + height="40" + width="40" + > + <use + xlink:href="#test-file-stub" + /> + </svg> + <span> + ecogesture.doing + </span> </span> - </span> - </button> + </button> + </div> </div> </div> </mock-content> diff --git a/src/components/Ecogesture/singleEcogestureView.scss b/src/components/Ecogesture/singleEcogestureView.scss index 6eb19b4f1d16fda689603dc88d9304aed75d10ce..3f8904c15209e0b1c490c757e85e28ed4c637dae 100644 --- a/src/components/Ecogesture/singleEcogestureView.scss +++ b/src/components/Ecogesture/singleEcogestureView.scss @@ -1,110 +1,117 @@ @import 'src/styles/base/color'; -.single-ecogesture { - color: $grey-bright; +.content-wrapper { display: flex; - flex-direction: column; align-items: center; justify-content: center; - padding: 1rem 1.2rem; - .icon-container { - margin: auto; - max-width: 180px; - width: 100%; + flex-direction: column; + height: 100%; + .single-ecogesture { + color: $grey-bright; display: flex; - .icon-big { - margin: auto; - } - } - .details { flex-direction: column; - display: flex; align-items: center; - gap: 0.5rem; - .title { - color: $soft-grey; + justify-content: center; + padding: 1rem 1.2rem; + .icon-container { + margin: auto; + max-width: 180px; + width: 100%; + display: flex; + .icon-big { + margin: auto; + } } - .efficiency { + .details { + flex-direction: column; display: flex; + align-items: center; gap: 0.5rem; - } - } - .styled-container { - line-height: 150%; - padding: 1rem; - margin: 1.5rem 0 1rem; - max-width: 500px; - display: flex; - flex-direction: column; - .long-name { - text-align: center; - color: white; - } - - .showMore { - margin: auto; - text-align: center; - text-decoration: underline; - margin-top: 1.5rem; - span { - text-transform: none; + .title { + color: $soft-grey; } - } - .longDescription { - margin: 1em 0.5rem; - text-align: left; - } - } - .buttons-selection { - width: 100%; - display: flex; - gap: 0.5rem; - justify-content: center; - button { - &.btnSecondary { - height: 45px; - max-width: 160px; - width: 100%; - border-radius: 4px; + .efficiency { + display: flex; + gap: 0.5rem; } } - .objective-btn { - span { - color: $grey-bright; + .styled-container { + line-height: 150%; + padding: 1rem; + margin: 1.5rem 0 1rem; + max-width: 500px; + display: flex; + flex-direction: column; + .long-name { + text-align: center; + color: white; } - &.active { - background: radial-gradient( - 105.25% 64.58% at 49.68% 70.83%, - rgba(12, 44, 91, 0.5) 0%, - rgba(255, 255, 255, 0) 100% - ), - #4470b3; - border-color: transparent; + + .showMore { + margin: auto; + text-align: center; + text-decoration: underline; + margin-top: 1.5rem; span { - color: white; + text-transform: none; } } + .longDescription { + margin: 1em 0.5rem; + text-align: left; + } } - .doing-btn { - span { - color: $grey-bright; + .buttons-selection { + width: 100%; + display: flex; + gap: 0.5rem; + justify-content: center; + button { + &.btnSecondary { + height: 45px; + max-width: 160px; + width: 100%; + border-radius: 4px; + } } - &.active { - background: radial-gradient( - 105.25% 64.58% at 49.68% 70.83%, - rgba(41, 87, 33, 0.5) 0%, - rgba(255, 255, 255, 0) 100% - ), - #21a90b; - border-color: transparent; + .objective-btn { span { - color: white; + color: $grey-bright; + } + &.active { + background: radial-gradient( + 105.25% 64.58% at 49.68% 70.83%, + rgba(12, 44, 91, 0.5) 0%, + rgba(255, 255, 255, 0) 100% + ), + #4470b3; + border-color: transparent; + span { + color: white; + } } } - } - .MuiIconButton-label { - justify-content: flex-start; - color: white; + .doing-btn { + span { + color: $grey-bright; + } + &.active { + background: radial-gradient( + 105.25% 64.58% at 49.68% 70.83%, + rgba(41, 87, 33, 0.5) 0%, + rgba(255, 255, 255, 0) 100% + ), + #21a90b; + border-color: transparent; + span { + color: white; + } + } + } + .MuiIconButton-label { + justify-content: flex-start; + color: white; + } } } } diff --git a/src/components/EcogestureSelection/EcogestureSelectionDetail/EcogestureSelectionDetail.tsx b/src/components/EcogestureSelection/EcogestureSelectionDetail/EcogestureSelectionDetail.tsx index 6d53bb111c2198f3055ae2e954179ac2bae1ab6e..5994c2da7fe0444048c8987b10c3369c6e327eaa 100644 --- a/src/components/EcogestureSelection/EcogestureSelectionDetail/EcogestureSelectionDetail.tsx +++ b/src/components/EcogestureSelection/EcogestureSelectionDetail/EcogestureSelectionDetail.tsx @@ -59,8 +59,12 @@ const EcogestureSelectionDetail = ({ {t(`ecogesture_modal.show_${showDetails ? 'less' : 'more'}`)} </Button> - <Collapse in={showDetails} exit={false}> - <div className="longDescription text-16-normal-150"> + <Collapse in={showDetails} exit={false} timeout={300}> + <div + className={`longDescription text-16-normal-150 ${ + showDetails ? 'expanded' : '' + }`} + > {ecogesture.longDescription} </div> </Collapse> diff --git a/src/components/EcogestureSelection/EcogestureSelectionDetail/__snapshots__/EcogestureSelectionDetail.spec.tsx.snap b/src/components/EcogestureSelection/EcogestureSelectionDetail/__snapshots__/EcogestureSelectionDetail.spec.tsx.snap index bbd6adbd92d72288c227dec29d4990211f4e943e..f7f0a01ecae5f63aeaeb869b4c73c16f9d84b92f 100644 --- a/src/components/EcogestureSelection/EcogestureSelectionDetail/__snapshots__/EcogestureSelectionDetail.spec.tsx.snap +++ b/src/components/EcogestureSelection/EcogestureSelectionDetail/__snapshots__/EcogestureSelectionDetail.spec.tsx.snap @@ -57,7 +57,7 @@ exports[`EcogestureSelectionDetail component should be rendered correctly 1`] = class="MuiCollapse-wrapperInner" > <div - class="longDescription text-16-normal-150" + class="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> diff --git a/src/components/EcogestureSelection/EcogestureSelectionDetail/ecogestureSelectionDetail.scss b/src/components/EcogestureSelection/EcogestureSelectionDetail/ecogestureSelectionDetail.scss index 62a291ea844fbf09393241af8d7bb196163a8f39..80bc7cd3771049bbc40773786a115ea63df3569f 100644 --- a/src/components/EcogestureSelection/EcogestureSelectionDetail/ecogestureSelectionDetail.scss +++ b/src/components/EcogestureSelection/EcogestureSelectionDetail/ecogestureSelectionDetail.scss @@ -12,12 +12,12 @@ .content { display: flex; - gap: 0.5rem; flex-direction: column; - flex: 1; - justify-content: flex-start; + gap: 0.5rem; + justify-content: center; align-items: center; overflow-y: auto; + flex: 1; .title { color: $soft-grey; @@ -33,13 +33,20 @@ text-decoration: underline; margin-top: 1rem; cursor: pointer; + flex-shrink: 0; } .longDescription { margin: 1rem 0.5rem; text-align: left; + display: none; + transition: height 0.3s ease-in-out; + &.expanded { + display: block; + } } } + .buttons { margin: 1rem 0; display: flex; @@ -47,6 +54,7 @@ flex-direction: row; justify-content: center; width: 100%; + button.btnSecondary { padding: 0.75rem 0.25rem; height: 7.375rem; diff --git a/src/components/Header/Header.spec.tsx b/src/components/Header/Header.spec.tsx index 0e527784ddfeb7dc0be86ec364b97319f86e6830..22c116a71b4d0b2a23433b50945c40d9eca1bdec 100644 --- a/src/components/Header/Header.spec.tsx +++ b/src/components/Header/Header.spec.tsx @@ -4,7 +4,11 @@ import Header from 'components/Header/Header' import React from 'react' import { Provider } from 'react-redux' import * as ModalAction from 'store/modal/modal.slice' -import { createMockEcolyoStore } from 'tests/__mocks__/store' +import { + createMockEcolyoStore, + mockInitialEcolyoState, +} from 'tests/__mocks__/store' +import { ScreenType } from 'enums' const mockedNavigate = jest.fn() jest.mock('react-router-dom', () => ({ @@ -13,8 +17,30 @@ jest.mock('react-router-dom', () => ({ })) describe('Header component', () => { - const store = createMockEcolyoStore() - it('should be rendered correctly', () => { + const store = createMockEcolyoStore(mockInitialEcolyoState) + + beforeEach(() => { + const state = store.getState() + if (state.ecolyo?.global) { + state.ecolyo.global.screenType = ScreenType.DESKTOP + } + }) + + it('should be rendered correctly on mobile', () => { + const state = store.getState() + if (state.ecolyo?.global) { + state.ecolyo.global.screenType = ScreenType.MOBILE + } + const { container } = render( + <Provider store={store}> + <Header desktopTitleKey="mockKey" /> + </Provider> + ) + expect(container).toMatchSnapshot() + expect(container.getElementsByTagName('header')[0]).toBeInTheDocument() + }) + + it('should be rendered correctly on desktop', () => { const { container } = render( <Provider store={store}> <Header desktopTitleKey="mockKey" /> @@ -24,6 +50,25 @@ describe('Header component', () => { expect(container.getElementsByTagName('header')[0]).toBeInTheDocument() }) + it('should display desktop title text when desktopTitleKey provided', () => { + const titleKey = 'Test Title' + const { getByText } = render( + <Provider store={store}> + <Header desktopTitleKey={titleKey} /> + </Provider> + ) + expect(getByText(titleKey)).toBeInTheDocument() + }) + + it('should not display desktop title text when desktopTitleKey not provided', () => { + const { queryByText } = render( + <Provider store={store}> + <Header desktopTitleKey="" /> + </Provider> + ) + expect(queryByText(/.+/)).not.toBeInTheDocument() + }) + it('should display title and back button when desktopTitle key provided and displayBackArrow is true', () => { const key = 'titleKey' render( @@ -36,7 +81,8 @@ describe('Header component', () => { screen.getByLabelText('header.accessibility.button_back') ).toBeInTheDocument() }) - it('should NOT display back button when displayBackArrow is false', async () => { + + it('should NOT display back button when displayBackArrow is false', () => { render( <Provider store={store}> <Header desktopTitleKey="test" displayBackArrow={false} /> @@ -63,6 +109,7 @@ describe('Header component', () => { }) expect(mockedNavigate).toHaveBeenCalled() }) + it('should call custom back fn when back button is clicked', async () => { const mockBack = jest.fn() render( diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index b200f36a72621b30f136f0bc0c38706c9eb30129..3fa45eaec93a3e22dc0fcecb4d36cdb2259e2926 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -12,15 +12,12 @@ import { openFeedbackModal } from 'store/modal/modal.slice' import './header.scss' interface HeaderProps { - /** translation key used as t('key.value') */ desktopTitleKey: string displayBackArrow?: boolean - /** additional information to put below the main header */ children?: React.ReactNode backFunction?: () => void } -/** Header for desktop view */ const Header = ({ desktopTitleKey, displayBackArrow, @@ -56,40 +53,34 @@ const Header = ({ <header ref={header}> <div className="header-top"> <div className="header-content"> - <div - className={ - !desktopTitleKey - ? 'header-content-top header-content-top-right' - : 'header-content-top' - } - > + <div className="header-content-top"> + {screenType !== ScreenType.MOBILE && displayBackArrow && ( + <IconButton + aria-label={t('header.accessibility.button_back')} + className="header-back-button" + onClick={handleClickBack} + > + <Icon icon={BackArrowIcon} size={16} /> + </IconButton> + )} {desktopTitleKey && ( <div - className={`header-text-desktop ${ + className={`${ + displayBackArrow && desktopTitleKey + ? 'header-text-selection' + : 'header-text-desktop' + } ${ screenType === ScreenType.MOBILE ? 'text-14-normal-uppercase' : 'text-22-bold' }`} > - {displayBackArrow && ( - <IconButton - aria-label={t('header.accessibility.button_back')} - className="header-back-button" - onClick={handleClickBack} - > - <Icon icon={BackArrowIcon} size={16} /> - </IconButton> - )} <span>{t(desktopTitleKey)}</span> </div> )} <IconButton aria-label={t('header.accessibility.button_open_feedbacks')} - className={ - !desktopTitleKey - ? 'header-feedbacks-button right' - : 'header-feedbacks-button' - } + className="header-feedbacks-button" onClick={handleClickFeedbacks} > <Icon icon={FeedbackIcon} size={40} /> diff --git a/src/components/Header/__snapshots__/Header.spec.tsx.snap b/src/components/Header/__snapshots__/Header.spec.tsx.snap index 3bd7905849ab67ceeb3159018c8bfc69fbecec99..4ed477186e477d130db0be4fb2f71da704398736 100644 --- a/src/components/Header/__snapshots__/Header.spec.tsx.snap +++ b/src/components/Header/__snapshots__/Header.spec.tsx.snap @@ -1,6 +1,58 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Header component should be rendered correctly 1`] = ` +exports[`Header component should be rendered correctly on desktop 1`] = ` +<div> + <header> + <div + class="header-top" + > + <div + class="header-content" + > + <div + class="header-content-top" + > + <div + class="header-text-desktop text-22-bold" + > + <span> + mockKey + </span> + </div> + <button + aria-label="header.accessibility.button_open_feedbacks" + class="MuiButtonBase-root MuiIconButton-root header-feedbacks-button" + tabindex="0" + type="button" + > + <span + class="MuiIconButton-label" + > + <svg + class="styles__icon___23x3R" + height="40" + width="40" + > + <use + xlink:href="#test-file-stub" + /> + </svg> + </span> + <span + class="MuiTouchRipple-root" + /> + </button> + </div> + </div> + </div> + <div + class="header-bar" + /> + </header> +</div> +`; + +exports[`Header component should be rendered correctly on mobile 1`] = ` <div> <header> <div diff --git a/src/components/Header/header.scss b/src/components/Header/header.scss index 2817543e8f42e3858b513f7c97993c650d0304b1..5f794557b9db2b73101de6d789e45c004c7840dc 100644 --- a/src/components/Header/header.scss +++ b/src/components/Header/header.scss @@ -43,27 +43,40 @@ header { .header-content-top { display: flex; flex-direction: row; - &.header-content-top-right { - justify-content: flex-end; - } + justify-content: space-between; + align-items: center; .header-text { - padding: 2rem 1rem; flex: 1; + padding: 0 1rem 1rem 1rem; + color: $grey-bright; + text-align: center; } .header-text-desktop { display: flex; flex: 1; padding: 2rem 1.25rem; color: $grey-bright; + justify-content: center; + text-align: center; + margin-left: 64px; + } + .header-text-selection { + display: flex; + flex: 1; + padding: 2rem 1.25rem; + color: $grey-bright; + justify-content: center; + text-align: center; + margin-left: 24px; + @media #{$large-phone} { + display: none; + } } - .header-back-button { + .header-back-button, + .header-feedbacks-button { padding: 0 0.75rem; } @media #{$large-phone} { - .header-text { - padding: 0 1rem 1rem 1rem; - color: $grey-bright; - } .header-text-desktop { display: none; }