diff --git a/client/components/main/Faqs.jsx b/client/components/main/Faqs.jsx index 7f8ffe201..f98a0b8e2 100644 --- a/client/components/main/Faqs.jsx +++ b/client/components/main/Faqs.jsx @@ -14,6 +14,10 @@ import Button from '@material-ui/core/Button'; import useContentful from '../../hooks/useContentful'; const useStyles = makeStyles(theme => ({ + flexContainer: { + display: 'flex', + justifyContent: 'space-between', + }, textHeading: { fontWeight: theme.typography.fontWeightBold, }, @@ -22,6 +26,8 @@ const useStyles = makeStyles(theme => ({ }, contentQuestion: { fontWeight: theme.typography.fontWeightMedium, + minWidth: '920px', + cursor: 'pointer', }, searchBar: { display: 'flex', @@ -44,6 +50,9 @@ const useStyles = makeStyles(theme => ({ fontSize: '18px', fontWeight: theme.typography.fontWeightBold, }, + expand: { + cursor: 'pointer', + }, })); const query = ` @@ -67,6 +76,28 @@ const Faqs = () => { }, [errors]); const [searchFormState, setSearchFormState] = React.useState(''); + const [expanded, setExpanded] = React.useState({}); + const [allExpanded, setAllExpanded] = React.useState(false); + + const handleExpand = id => { + setExpanded(prevState => ({ + ...prevState, + [id]: !prevState[id], + })); + }; + + const handleExpandAll = () => { + setAllExpanded(prevAllExpanded => !prevAllExpanded); + setExpanded( + data.faqCollection.items.reduce( + (prevExpanded, item) => ({ + ...prevExpanded, + [item.sys.id]: !allExpanded, + }), + {}, + ), + ); + }; const handleSubmit = e => { e.preventDefault(); @@ -117,7 +148,7 @@ const Faqs = () => { - { data + {data && ( @@ -126,16 +157,34 @@ const Faqs = () => { Frequently Asked Questions - +
{ + if (event.key === 'Enter' || event.key === ' ') { + handleExpandAll(); + } + }} + role="button" + tabIndex={0} + > + + {allExpanded ? 'Collapse All' : 'Expand All'} + +
- { data.faqCollection.items.map(item => ( + {data.faqCollection.items.map(item => ( - + handleExpand(item.sys.id)}> {item.question} + {expanded[item.sys.id] && ()} + {!expanded[item.sys.id] && ()} - - {item.answer} - + {expanded[item.sys.id] && ( + + {item.answer} + + )} ))}
diff --git a/client/public/index.html b/client/public/index.html index afadab7a1..f19e7831b 100644 --- a/client/public/index.html +++ b/client/public/index.html @@ -1,12 +1,13 @@ - - - - - - + - - + + + + + + + + + + + + + + + <%= htmlWebpackPlugin.options.title %> + - - - - - - + - - <%= htmlWebpackPlugin.options.title %> + + +
+ - - - -
-