From e594f0d088f9ffc9fe44a615940388f496f84410 Mon Sep 17 00:00:00 2001
From: Jareth <110929259+jareth-whitney@users.noreply.github.com>
Date: Wed, 25 Sep 2024 18:31:37 -0700
Subject: [PATCH] feature/deseng693: Updated map widget. (#2594)

---
 CHANGELOG.MD                                  |   6 +
 .../form/EngagementWidgets/Map/Form.tsx       |  17 +-
 .../old-view/widgets/Map/ExpandModal.tsx      |   7 +-
 .../old-view/widgets/Map/MapWidget.tsx        | 146 ++++++++++--------
 met-web/src/components/map/index.tsx          |   6 +-
 5 files changed, 112 insertions(+), 70 deletions(-)

diff --git a/CHANGELOG.MD b/CHANGELOG.MD
index a90179b23..f956050be 100644
--- a/CHANGELOG.MD
+++ b/CHANGELOG.MD
@@ -1,3 +1,9 @@
+## September 25, 2024
+
+- **Feature** New Map Widget front end [🎟️ DESENG-693](https://citz-gdx.atlassian.net/browse/DESENG-693)
+  - Implemented Figma design
+  - Fixed issue with map labels that were making them inaccessible
+
 ## September 23, 2024
 
 - **Feature** New Hero Banner page in authoring section [🎟️ DESENG-670](https://citz-gdx.atlassian.net/browse/DESENG-670)
diff --git a/met-web/src/components/engagement/form/EngagementWidgets/Map/Form.tsx b/met-web/src/components/engagement/form/EngagementWidgets/Map/Form.tsx
index eff6221ce..ddd4497c4 100644
--- a/met-web/src/components/engagement/form/EngagementWidgets/Map/Form.tsx
+++ b/met-web/src/components/engagement/form/EngagementWidgets/Map/Form.tsx
@@ -31,7 +31,7 @@ import { WidgetLocation } from 'models/widget';
 
 const schema = yup
     .object({
-        markerLabel: yup.string().max(30, 'Markel label cannot exceed 30 characters'),
+        markerLabel: yup.string().max(30, 'Marker label cannot exceed 30 characters'),
         shapefile: yup.mixed(),
         geojson: yup.mixed(),
         latitude: yup
@@ -191,8 +191,10 @@ const Form = () => {
                                     handleAddFile={handleAddFile}
                                     savedFileName={uploadName}
                                     savedFile={methods.getValues('shapefile')}
+                                    aria-label={'Upload a shape file.'}
                                 />
                             </Grid>
+
                             <When condition={Boolean(filename)}>
                                 <Grid item xs={12}>
                                     <MetLabel sx={{ marginBottom: '2px' }}>File Uploaded </MetLabel>
@@ -228,7 +230,7 @@ const Form = () => {
                                 </Grid>
                             </When>
                             <Grid item xs={12}>
-                                <MetLabel sx={{ marginBottom: '2px' }}>Latitude</MetLabel>
+                                <MetLabel sx={{ marginBottom: '2px' }}>Latitude (Required)</MetLabel>
                                 <MetDescription>Latitude in British Columbia is between 48.30 and 60.00</MetDescription>
                                 <ControlledTextField
                                     name="latitude"
@@ -239,10 +241,13 @@ const Form = () => {
                                     }}
                                     fullWidth
                                     size="small"
+                                    aria-label={
+                                        'Latitude: Latitude in British Columbia is between 48.30 and 60.00. Required field, numeric value with up to two decimal places.'
+                                    }
                                 />
                             </Grid>
                             <Grid item xs={12}>
-                                <MetLabel sx={{ marginBottom: '2px' }}>Longitude</MetLabel>
+                                <MetLabel sx={{ marginBottom: '2px' }}>Longitude (Required)</MetLabel>
                                 <MetDescription>
                                     Longitude in British Columbia is between  -139.06 and -114.03
                                 </MetDescription>
@@ -255,10 +260,13 @@ const Form = () => {
                                     }}
                                     fullWidth
                                     size="small"
+                                    aria-label={
+                                        'Longitude: Longitude in British Columbia is between -139.06 and -114.03. Required field, numeric value with up to two decimal places.'
+                                    }
                                 />
                             </Grid>
                             <Grid item xs={12}>
-                                <MetLabel sx={{ marginBottom: '2px' }}>Marker Label</MetLabel>
+                                <MetLabel sx={{ marginBottom: '2px' }}>Marker Label (Optional)</MetLabel>
                                 <MetDescription>This text will appear next to your marker on the map</MetDescription>
                                 <ControlledTextField
                                     name="markerLabel"
@@ -269,6 +277,7 @@ const Form = () => {
                                     }}
                                     fullWidth
                                     size="small"
+                                    aria-label="Marker label: This text will appear next to your marker on the map. Optional field, maximum 30 characters."
                                 />
                             </Grid>
                             <Grid item xs={12} container direction="row" justifyContent={'flex-end'}>
diff --git a/met-web/src/components/engagement/old-view/widgets/Map/ExpandModal.tsx b/met-web/src/components/engagement/old-view/widgets/Map/ExpandModal.tsx
index d2885556f..8f314e902 100644
--- a/met-web/src/components/engagement/old-view/widgets/Map/ExpandModal.tsx
+++ b/met-web/src/components/engagement/old-view/widgets/Map/ExpandModal.tsx
@@ -41,7 +41,12 @@ export const ExpandModal = ({ open, setOpen, map }: ExpandModalProps) => {
             }}
             keepMounted={false}
         >
-            <Paper>
+            <Paper
+                style={{
+                    borderRadius: '16px',
+                    overflow: 'hidden',
+                }}
+            >
                 <Grid
                     container
                     direction="row"
diff --git a/met-web/src/components/engagement/old-view/widgets/Map/MapWidget.tsx b/met-web/src/components/engagement/old-view/widgets/Map/MapWidget.tsx
index 778f391c2..e6280654c 100644
--- a/met-web/src/components/engagement/old-view/widgets/Map/MapWidget.tsx
+++ b/met-web/src/components/engagement/old-view/widgets/Map/MapWidget.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useRef } from 'react';
-import { MetPaper } from 'components/common';
-import { Grid, Skeleton, Divider, Box, useMediaQuery, Theme } from '@mui/material';
+import { MetHeader3 } from 'components/common';
+import { Grid, Skeleton, Box, useMediaQuery, Theme, useTheme } from '@mui/material';
 import { Widget } from 'models/widget';
 import { useAppDispatch } from 'hooks';
 import { openNotification } from 'services/notificationService/notificationSlice';
@@ -10,10 +10,11 @@ import { WidgetMap } from 'models/widgetMap';
 import { ExpandModal } from './ExpandModal';
 import { When } from 'react-if';
 import { geoJSONDecode, calculateZoomLevel } from 'components/engagement/form/EngagementWidgets/Map/utils';
-import { IconButton } from 'components/common/Input';
 import { Link } from 'components/common/Navigation';
 import { faExpand } from '@fortawesome/pro-solid-svg-icons/faExpand';
 import { Header2 } from 'components/common/Typography';
+import { colors, Palette } from 'styles/Theme';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 interface MapWidgetProps {
     widget: Widget;
@@ -29,6 +30,9 @@ const MapWidget = ({ widget }: MapWidgetProps) => {
     const [mapWidth, setMapWidth] = useState(250);
     const [mapHeight, setMapHeight] = useState(250);
 
+    const theme = useTheme();
+    const isDarkMode = 'dark' === theme.palette.mode;
+
     const fetchMap = async () => {
         try {
             const map = await fetchMaps(widget.id);
@@ -56,21 +60,19 @@ const MapWidget = ({ widget }: MapWidgetProps) => {
 
     if (isLoading) {
         return (
-            <MetPaper elevation={1} sx={{ padding: '1em' }}>
-                <Grid container justifyContent="flex-start" spacing={3}>
-                    <Grid item xs={12}>
-                        <Header2>
-                            <Skeleton variant="rectangular" />
-                        </Header2>
-                    </Grid>
-                    <Grid item xs={12}>
-                        <Skeleton variant="rectangular" height="10em" />
-                    </Grid>
-                    <Grid item xs={12}>
-                        <Skeleton variant="rectangular" height="10em" />
-                    </Grid>
+            <Grid container justifyContent="flex-start" spacing={3}>
+                <Grid item xs={12}>
+                    <Header2>
+                        <Skeleton variant="rectangular" />
+                    </Header2>
+                </Grid>
+                <Grid item xs={12}>
+                    <Skeleton variant="rectangular" height="10em" />
                 </Grid>
-            </MetPaper>
+                <Grid item xs={12}>
+                    <Skeleton variant="rectangular" height="10em" />
+                </Grid>
+            </Grid>
         );
     }
 
@@ -78,54 +80,72 @@ const MapWidget = ({ widget }: MapWidgetProps) => {
         return null;
     }
 
+    // Define the styles
+    const metHeader3Styles = {
+        fontWeight: 'lighter',
+        fontSize: '1.5rem',
+        marginBottom: '2.5rem',
+        marginTop: '4rem',
+        color: isDarkMode ? colors.surface.white : Palette.text.primary,
+    };
+    const outerContainerStyles = {
+        position: 'relative',
+        width: '100%',
+        paddingTop: '66.67%' /* 3:2 aspect ratio (height / width * 100) */,
+    };
+    const innerContainerStyles = {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+        borderRadius: '16px',
+        overflow: 'hidden',
+    };
+    const linkStyles = {
+        color: isDarkMode ? colors.surface.white : Palette.text.primary,
+        textDecorationColor: isDarkMode ? colors.surface.white : Palette.text.primary,
+        cursor: 'pointer',
+    };
+
     return (
-        <>
-            <MetPaper elevation={1} sx={{ paddingTop: '0.5em', padding: '1em', minHeight: '12em' }}>
-                <Grid container justifyContent={{ xs: 'center' }} alignItems="center" rowSpacing={2}>
-                    <Grid
-                        item
-                        container
-                        justifyContent={{ xs: 'center', md: 'flex-start' }}
-                        flexDirection={'column'}
-                        xs={12}
-                        paddingBottom={0}
-                    >
-                        <Header2>{widget.title}</Header2>
-                        <Divider sx={{ borderWidth: 1, marginTop: 0.5 }} />
-                    </Grid>
-                    <Grid item xs={12}>
-                        <Box
-                            ref={mapContainerRef}
-                            sx={{
-                                width: '100%',
-                                height: '370px',
-                            }}
-                        >
-                            <MetMap
-                                geojson={geoJSONDecode(map.geojson)}
-                                longitude={map.longitude}
-                                latitude={map.latitude}
-                                markerLabel={map.marker_label}
-                                zoom={calculateZoomLevel(mapWidth, mapHeight, geoJSONDecode(map.geojson))}
-                            />
-                        </Box>
-                    </Grid>
-                    <When condition={isLargeScreen}>
-                        <Grid container item xs={12} alignItems={'center'} justifyContent={'flex-start'}>
-                            <Grid item paddingRight={'5px'}>
-                                <IconButton icon={faExpand} onClick={() => setOpen(true)} backgroundColor="none" />
-                            </Grid>
-                            <Grid item>
-                                <Link onClick={() => setOpen(true)} tabIndex={0} onKeyPress={() => setOpen(true)}>
-                                    View Expanded Map
-                                </Link>
-                            </Grid>
-                        </Grid>
-                        <ExpandModal map={map} open={open} setOpen={setOpen} />
-                    </When>
+        <Grid container justifyContent={{ xs: 'center' }} alignItems="center" rowSpacing={2}>
+            <Grid
+                item
+                container
+                justifyContent={{ xs: 'center', md: 'flex-start' }}
+                flexDirection={'column'}
+                xs={12}
+                paddingBottom={0}
+            >
+                <MetHeader3 style={metHeader3Styles}>{widget.title}</MetHeader3>
+            </Grid>
+            <Grid item xs={12}>
+                <Box sx={outerContainerStyles}>
+                    <Box sx={innerContainerStyles}>
+                        <MetMap
+                            geojson={geoJSONDecode(map.geojson)}
+                            longitude={map.longitude}
+                            latitude={map.latitude}
+                            markerLabel={map.marker_label}
+                            zoom={calculateZoomLevel(mapWidth, mapHeight, geoJSONDecode(map.geojson))}
+                        />
+                    </Box>
+                </Box>
+            </Grid>
+            <When condition={isLargeScreen}>
+                <Grid container item xs={12} alignItems={'center'} justifyContent={'flex-start'}>
+                    <Link onClick={() => setOpen(true)} sx={linkStyles} tabIndex={0} onKeyDown={() => setOpen(true)}>
+                        <FontAwesomeIcon
+                            icon={faExpand}
+                            style={{ color: isDarkMode ? colors.surface.white : Palette.text.primary }}
+                        />
+                        <span style={{ paddingLeft: '0.5rem' }}>View Expanded Map</span>
+                    </Link>
                 </Grid>
-            </MetPaper>
-        </>
+                <ExpandModal map={map} open={open} setOpen={setOpen} />
+            </When>
+        </Grid>
     );
 };
 
diff --git a/met-web/src/components/map/index.tsx b/met-web/src/components/map/index.tsx
index 2d2e7c286..ac94e1b2b 100644
--- a/met-web/src/components/map/index.tsx
+++ b/met-web/src/components/map/index.tsx
@@ -9,7 +9,8 @@ import { MetSmallTextOld } from 'components/common';
 import { Stack } from '@mui/material';
 import { When } from 'react-if';
 import { AnyLayer } from 'mapbox-gl';
-import { Palette } from 'styles/Theme';
+import { colors, Palette } from 'styles/Theme';
+
 interface MapProps {
     latitude: number;
     longitude: number;
@@ -74,7 +75,8 @@ const MetMap = ({ geojson, latitude, longitude, markerLabel, zoom }: MapProps) =
                     <When condition={Boolean(markerLabel)}>
                         <MetSmallTextOld
                             bold
-                            bgcolor={'var(--bcds-surface-background-white)'}
+                            bgcolor={'#12508F'}
+                            style={{ color: colors.surface.white, padding: '1px 4px' }}
                             borderRadius="10px"
                             padding="0 2px 0 2px"
                         >