Refactor MapControls position

Lets use true/false props here for position which makes the code a lot easier.

Also fixes the visibility of the button on desktop.

src/apps/Map/index.tsx

@@ -137,7 +137,7 @@ const MapView = ({
           calculatePopupPosition={calculatePopupPosition}
         >
           {!isEmbedMode && (
-            <MapControl position="top-right">
+            <MapControl top right>
               <StyledFMBLogo width={67} />
             </MapControl>
           )}

src/components2/Article/FullscreenMap/FullscreenMap.tsx

@@ -76,7 +76,7 @@ export const FullscreenMap: React.FC<FullscreenMapProps> = ({
   if (isFullscreen) {
     return (
       <FullscreenWrapper id="FullscreenMap">
-        <MapControl position="top-right" visible={!showLegend}>
+        <MapControl top right visible={isDesktopView || !showLegend}>
           <ClosePanelButton
             onClick={() => setFullscreen(false)}
             controlsId="FullscreenMap"
@@ -90,7 +90,7 @@ export const FullscreenMap: React.FC<FullscreenMapProps> = ({
         <MapWrapper>
           <BaseMap {...mapProps} onInit={setMap} />
         </MapWrapper>
-        <MapControl position="top-left">
+        <MapControl top left>
           <FloatingLegendIcon
             showLegend={showLegend}
             setShowLegend={setShowLegend}

src/components2/MapsControls/LocatorMapControl.tsx

@@ -2,20 +2,15 @@ import React from 'react';
 import { LocatorButton, LocatorButtonProps } from './LocatorButton';
 import { MapcControlProps, MapControl } from './MapControl';
 
-type Props = MapcControlProps & LocatorButtonProps;
+type Props = Pick<MapcControlProps, 'className' | 'style'> & LocatorButtonProps;
 
 export const LocatorMapControl: React.VFC<Props> = ({
-  position = 'top-left',
-  customPosition,
   className,
+  style,
   onChange,
 }) => {
   return (
-    <MapControl
-      position={position}
-      customPosition={customPosition}
-      className={className}
-    >
+    <MapControl style={style} className={className}>
       <LocatorButton onChange={onChange} />
     </MapControl>
   );

src/components2/MapsControls/MapControl.tsx

@@ -7,44 +7,30 @@ const StyledMapControl = styled.div`
 `;
 
 export type MapcControlProps = {
-  position?: 'top-left' | 'top-right' | 'bottom-right' | 'bottom-left';
+  top?: boolean;
+  right?: boolean;
+  bottom?: boolean;
+  left?: boolean;
   className?: string;
   style?: React.CSSProperties;
   visible?: boolean;
 };
 
 export const MapControl: React.FC<MapcControlProps> = ({
-  position = 'top-left',
+  top = false,
+  right = false,
+  bottom = false,
+  left = false,
   className,
   style,
   visible = true,
   children,
 }) => {
-  const positionCss = (pos) => {
-    switch (pos) {
-      case 'top-left':
-        return {
-          top: '16px',
-          left: '16px',
-        };
-      case 'top-right':
-        return {
-          top: '16px',
-          right: '16px',
-        };
-      case 'bottom-right':
-        return {
-          right: '16px',
-          bottom: '16px',
-        };
-      case 'bottom-left':
-        return {
-          bottom: '16px',
-          left: '16px',
-        };
-      default:
-        return {};
-    }
+  const position: React.CSSProperties = {
+    top: top && '16px',
+    right: right && '16px',
+    bottom: bottom && '16px',
+    left: left && '16px',
   };
 
   if (!visible) return null;
@@ -53,7 +39,7 @@ export const MapControl: React.FC<MapcControlProps> = ({
     <StyledMapControl
       data-cy="map-map-control"
       className={className}
-      style={style || positionCss(position)}
+      style={style || position}
     >
       {children}
     </StyledMapControl>

src/pages/Reports/pages/SubmitReport/components/LocateMeMap/index.js

@@ -291,7 +291,7 @@ class LocateMeMap extends Component {
             <LocatorMapControl
               key="ReportsLocateMap__LocatorControl"
               onChange={this.onDevicePosition}
-              customPosition={locatorControlPosition}
+              style={locatorControlPosition}
             />
           )}