11import { useCommonTranslation , Text } from '@events-helsinki/components' ;
2- import { IconCross , Button , IconSearch , IconMenuHamburger } from 'hds-react' ;
2+ import classNames from 'classnames' ;
3+ import {
4+ Button ,
5+ IconAngleDown ,
6+ IconAngleUp ,
7+ IconMenuHamburger ,
8+ } from 'hds-react' ;
39import React , { useRef , useState } from 'react' ;
10+ import { ContentContainer , PageSection } from 'react-helsinki-headless-cms' ;
411import styles from './searchHeader.module.scss' ;
512
613/**
@@ -25,77 +32,92 @@ type Props = {
2532
2633function SearchHeader ( { showMode, count, switchShowMode, searchForm } : Props ) {
2734 const { t } = useCommonTranslation ( ) ;
28- const [ collapsed , setCollapsed ] = useState < boolean > ( true ) ;
35+ const [ collapsed , setCollapsed ] = useState < boolean > ( false ) ;
2936 const formWrapper = useRef < HTMLDivElement > ( null ) ;
30-
37+ const collapsedComponent = ( ) => (
38+ < div >
39+ < PageSection
40+ korosBottom = { true }
41+ korosBottomClassName = { styles . searchContainerKoros }
42+ className = { classNames ( styles . searchContainer , { } ) }
43+ >
44+ < ContentContainer className = { classNames ( styles . contentContainer , { } ) } >
45+ { searchForm }
46+ </ ContentContainer >
47+ </ PageSection >
48+ </ div >
49+ ) ;
3150 return (
3251 < >
3352 { showMode === ShowMode . MAP && (
3453 < div ref = { formWrapper } className = { styles . searchHeader } >
35- { ! collapsed && (
36- < div className = { styles . searchMenu } >
37- { searchForm }
38- < div className = { styles . closeSearchWrapper } >
39- < Button
40- className = { styles . closeSearch }
41- variant = "secondary"
42- theme = "black"
43- iconLeft = { < IconCross aria-hidden = "true" /> }
44- fullWidth
45- onClick = { ( ) => setCollapsed ( true ) }
54+ < >
55+ { collapsed && collapsedComponent ( ) }
56+ { ! collapsed && (
57+ < PageSection >
58+ < div className = { styles . horizontalDivider } > </ div >
59+ </ PageSection >
60+ ) }
61+ < PageSection >
62+ < ContentContainer >
63+ < div
64+ className = { classNames ( styles . searchActions , {
65+ [ styles . paddingClosed ] : ! collapsed ,
66+ } ) }
4667 >
47- { t ( 'common:mapSearch.closeSearchControls' ) }
48- </ Button >
49- </ div >
50- </ div >
51- ) }
52- { collapsed && (
53- < div className = { styles . searchActions } >
54- < Button
55- variant = "secondary"
56- theme = "black"
57- iconLeft = { < IconMenuHamburger aria-hidden = "true" /> }
58- onClick = { switchShowMode }
59- >
60- { t ( 'common:mapSearch.showAsList' ) }
61- </ Button >
62- < div className = { styles . countAndTags } >
63- < Text variant = "h3" >
64- { count } { t ( 'common:mapSearch.searchResultsCountLabel' ) }
65- </ Text >
66- </ div >
67- < Button
68- variant = "secondary"
69- theme = "black"
70- iconLeft = { < IconSearch aria-hidden = "true" /> }
71- onClick = { ( ) => {
72- setCollapsed ( false ) ;
68+ < div className = { styles . countAndTags } >
69+ < Text variant = "h3" >
70+ { count } { t ( 'common:mapSearch.searchResultsCountLabel' ) }
71+ </ Text >
72+ </ div >
73+ < Button
74+ variant = "supplementary"
75+ theme = "black"
76+ iconLeft = {
77+ ( collapsed && < IconAngleUp aria-hidden = "true" /> ) ||
78+ ( ! collapsed && < IconAngleDown aria-hidden = "true" /> )
79+ }
80+ onClick = { ( ) => {
81+ setCollapsed ( ( ) => ! collapsed ) ;
7382
74- // This button comes after the actual form in the DOM order.
75- // It's rendered out of the UI as the state changes to
76- // !collapsed, but the focus is re-applied to elements that
77- // come after the form elements.
78- //
79- // This makes the UX cumbersome when using a keyboard or a
80- // screen reader. In order to improve the UX, we are moving
81- // the focus to the beginning of the form when the user
82- // opens it.
83- //
84- // Wait for form to be rendered into the DOM
85- setTimeout ( ( ) => {
86- const firstFormInput = formWrapper . current ?. querySelector (
87- 'form input'
88- ) as HTMLInputElement | null | undefined ;
83+ // This button comes after the actual form in the DOM order.
84+ // It's rendered out of the UI as the state changes to
85+ // !collapsed, but the focus is re-applied to elements that
86+ // come after the form elements.
87+ //
88+ // This makes the UX cumbersome when using a keyboard or a
89+ // screen reader. In order to improve the UX, we are moving
90+ // the focus to the beginning of the form when the user
91+ // opens it.
92+ //
93+ // Wait for form to be rendered into the DOM
94+ setTimeout ( ( ) => {
95+ const firstFormInput =
96+ formWrapper . current ?. querySelector ( 'form input' ) as
97+ | HTMLInputElement
98+ | null
99+ | undefined ;
89100
90- // And focus the first input on it
91- firstFormInput ?. focus ( ) ;
92- } , 0 ) ;
93- } }
94- >
95- { t ( 'common:mapSearch.showSearchParameters' ) }
96- </ Button >
97- </ div >
98- ) }
101+ // And focus the first input on it
102+ firstFormInput ?. focus ( ) ;
103+ } , 0 ) ;
104+ } }
105+ >
106+ { collapsed && t ( 'common:mapSearch.hideSearchParameters' ) }
107+ { ! collapsed && t ( 'common:mapSearch.showSearchParameters' ) }
108+ </ Button >
109+ < Button
110+ variant = "secondary"
111+ theme = "black"
112+ iconLeft = { < IconMenuHamburger aria-hidden = "true" /> }
113+ onClick = { switchShowMode }
114+ >
115+ { t ( 'common:mapSearch.showAsList' ) }
116+ </ Button >
117+ </ div >
118+ </ ContentContainer >
119+ </ PageSection >
120+ </ >
99121 </ div >
100122 ) }
101123 { showMode === ShowMode . LIST && (
0 commit comments