fix: bottomNav settings add close button PL-18

City-of-Helsinki · Nov 28, 2024 · fc5a397 · fc5a397
1 parent 0cb7a47
commit fc5a397
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 32 deletions.
diff --git a/src/components/BottomNav/BottomNav.js b/src/components/BottomNav/BottomNav.js
@@ -17,7 +17,7 @@ import MobileSettingsHeader from '../MobileSettingsHeader/MobileSettingsHeader';
 
 const { bottomNavHeight } = config;
 
-const BottomNav = () => {
+function BottomNav() {
   const location = useLocation();
   const intl = useIntl();
   const small = useMediaQuery('(max-width:477px)');
@@ -59,7 +59,7 @@ const BottomNav = () => {
     }
   };
 
-  const handleNav = (value) => {
+  const handleNav = value => {
     switch (value) {
       // Back button
       case 0:
@@ -103,7 +103,7 @@ const BottomNav = () => {
         }}
       >
         <StyledDiv>
-          <MobileSettingsHeader textId="general.ownSettings" />
+          <MobileSettingsHeader textId="general.ownSettings" onClose={handleBackButton} />
           <SettingsDropdowns variant="ownSettings" />
         </StyledDiv>
       </StyledDrawer>
@@ -121,7 +121,7 @@ const BottomNav = () => {
           },
         }}
       >
-        <MapSettings />
+        <MapSettings onClose={handleBackButton} />
       </StyledDrawer>
       <nav>
         <StyledPaper elevation={10}>
@@ -153,7 +153,7 @@ const BottomNav = () => {
       </nav>
     </>
   );
-};
+}
 
 const StyledPaper = styled(Paper)(({ theme }) => ({
   position: 'fixed',
@@ -173,7 +173,6 @@ const StyledBottomNavigation = styled(BottomNavigation)(() => ({
   height: 78,
 }));
 
-
 const StyledBottomNavigationAction = styled(BottomNavigationAction)(({ small }) => {
   const styles = {
     color: '#000',

diff --git a/src/components/MapSettings/MapSettings.js b/src/components/MapSettings/MapSettings.js
@@ -1,8 +1,11 @@
 import styled from '@emotion/styled';
-import { FormControl, FormControlLabel, Radio, RadioGroup, Typography } from '@mui/material';
+import {
+  FormControl, FormControlLabel, Radio, RadioGroup, Typography,
+} from '@mui/material';
 import React from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { useDispatch, useSelector } from 'react-redux';
+import PropTypes from 'prop-types';
 import { setMapType } from '../../redux/actions/settings';
 import { selectMapRef } from '../../redux/selectors/general';
 import { selectMapType } from '../../redux/selectors/settings';
@@ -12,7 +15,7 @@ import MobileSettingsHeader from '../MobileSettingsHeader/MobileSettingsHeader';
 import SMButton from '../ServiceMapButton';
 import ExternalMapUrlCreator from './externalMapUrlCreator';
 
-const MapSettings = () => {
+function MapSettings({ onClose }) {
   const intl = useIntl();
   const dispatch = useDispatch();
 
@@ -21,7 +24,7 @@ const MapSettings = () => {
   const locale = useSelector(getLocale);
 
   const mapSettings = {};
-  SettingsUtility.mapSettings.forEach((setting) => {
+  SettingsUtility.mapSettings.forEach(setting => {
     mapSettings[setting] = {
       action: () => setMapType(setting),
       labelId: `settings.map.${setting}`,
@@ -42,18 +45,18 @@ const MapSettings = () => {
   const openEspooUrl = () => {
     const { lng, lat } = map.getCenter();
     const urlToEspooMap = ExternalMapUrlCreator.createEspoo3DMapUrl(lng, lat, locale);
-    window.open(urlToEspooMap)
-  }
+    window.open(urlToEspooMap);
+  };
 
   const openVantaaUrl = () => {
     const urlToVantaaMap = ExternalMapUrlCreator.createVantaa3DMapUrl(locale);
-    window.open(urlToVantaaMap)
-  }
+    window.open(urlToVantaaMap);
+  };
 
   return (
     <>
       <FormControl sx={{ textAlign: 'left', pt: 3 }} component="fieldset" fullWidth>
-        <MobileSettingsHeader textId="settings.map.title" />
+        <MobileSettingsHeader textId="settings.map.title" onClose={onClose} />
         <Typography><FormattedMessage id="settings.map.info" /></Typography>
         <RadioGroup
           aria-label={intl.formatMessage({ id: 'settings.map.title' })}
@@ -62,23 +65,25 @@ const MapSettings = () => {
           onChange={(event, value) => dispatch(setMapType(value))}
           value={mapType}
         >
-          {Object.keys(mapSettings).map((key) => {
+          {Object.keys(mapSettings).map(key => {
             if (Object.prototype.hasOwnProperty.call(mapSettings, key)) {
               const item = mapSettings[key];
-              return (<FormControlLabel
-                value={key}
-                key={key}
-                control={(<Radio id={`${key}-map-type-radio`} color="primary" />)}
-                labelPlacement="end"
-                label={<FormattedMessage id={item.labelId} />}
-              />);
+              return (
+                <FormControlLabel
+                  value={key}
+                  key={key}
+                  control={(<Radio id={`${key}-map-type-radio`} color="primary" />)}
+                  labelPlacement="end"
+                  label={<FormattedMessage id={item.labelId} />}
+                />
+              );
             }
             return null;
           })}
         </RadioGroup>
       </FormControl>
       <Styled3DMapContainer>
-        <MobileSettingsHeader textId="settings.3dmap.title" />
+        <MobileSettingsHeader textId="settings.3dmap.title" onClose={onClose} />
         <Styled3DMapLinkButton onClick={openHelsinkiUrl} role="link" data-sm="3dMapLink">
           <Typography><FormattedMessage id="settings.3dmap.link.helsinki" /></Typography>
         </Styled3DMapLinkButton>
@@ -87,11 +92,11 @@ const MapSettings = () => {
         </Styled3DMapLinkButton>
         <Styled3DMapLinkButton onClick={openVantaaUrl} role="link" data-sm="3dMapLink">
           <Typography><FormattedMessage id="settings.3dmap.link.vantaa" /></Typography>
-        </Styled3DMapLinkButton>  
+        </Styled3DMapLinkButton>
       </Styled3DMapContainer>
     </>
   );
-};
+}
 
 const Styled3DMapContainer = styled('div')(({ theme }) => ({
   paddingTop: theme.spacing(3),
@@ -104,4 +109,12 @@ const Styled3DMapLinkButton = styled(SMButton)(({ theme }) => ({
   marginTop: theme.spacing(2),
 }));
 
+MapSettings.propTypes = {
+  onClose: PropTypes.func,
+};
+
+MapSettings.defaultProps = {
+  onClose: null,
+};
+
 export default MapSettings;
diff --git a/src/components/MobileSettingsHeader/MobileSettingsHeader.js b/src/components/MobileSettingsHeader/MobileSettingsHeader.js
@@ -1,14 +1,29 @@
-import { FormLabel } from '@mui/material';
+import { FormLabel, IconButton } from '@mui/material';
+import { Close } from '@mui/icons-material';
 import styled from '@emotion/styled';
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
 
-const MobileSettingsHeader = ({ textId }) => (
-  <StyledFormLabel>
-    <FormattedMessage id={textId} />
-  </StyledFormLabel>
-);
+function MobileSettingsHeader({ textId, onClose }) {
+  const intl = useIntl();
+
+  return (
+    <StyledWrapper>
+      {onClose && (
+        <StyledCloseButton
+          onClick={onClose}
+          aria-label={intl.formatMessage({ id: 'general.close' })}
+        >
+          <Close />
+        </StyledCloseButton>
+      )}
+      <StyledFormLabel>
+        <FormattedMessage id={textId} />
+      </StyledFormLabel>
+    </StyledWrapper>
+  );
+}
 
 const StyledFormLabel = styled(FormLabel)(() => ({
   fontWeight: 700,
@@ -18,7 +33,28 @@ const StyledFormLabel = styled(FormLabel)(() => ({
   color: '#000',
 }));
 
+const StyledWrapper = styled('div')(() => ({
+  display: 'flex',
+  alignItems: 'flex-start',
+  justifyContent: 'space-between',
+  marginBottom: '1rem',
+}));
+
+const StyledCloseButton = styled(IconButton)(() => ({
+  order: 1,
+  padding: 0,
+  svg: {
+    fill: '#000',
+  },
+}));
+
 MobileSettingsHeader.propTypes = {
   textId: PropTypes.string.isRequired,
+  onClose: PropTypes.func,
+};
+
+MobileSettingsHeader.defaultProps = {
+  onClose: null,
 };
+
 export default MobileSettingsHeader;