Merge pull request #379 from act-org/jc-map-color-refactor

feat: Make map components themeable in the design system
act-org · Mar 21, 2024 · 76cc74a · 76cc74a
2 parents 2fdc012 + cc6f477
commit 76cc74a
Show file tree

Hide file tree

Showing 14 changed files with 198 additions and 84 deletions.
diff --git a/src/components/CountyMap/index.stories.tsx b/src/components/CountyMap/index.stories.tsx
@@ -28,12 +28,13 @@ export default {
   title: 'Molecules / Maps / CountyMap',
 } as Meta<CountyMapProps>;
 
-export const Default: StoryObj<CountyMapProps> = {
+export const Default: StoryObj<CountyMapProps> = {};
+
+export const CustomColor: StoryObj<CountyMapProps> = {
   args: {
-    data: defaultData,
-    geoJSONPath: '/maps/counties.json',
-    mapboxAccessToken: process.env.STORYBOOK_MAPBOX_ACCESS_TOKEN,
-    processDataFn: defaultProcessDataFn,
+    mapProps: {
+      color: '#FF0000',
+    },
   },
 };
 

diff --git a/src/components/CountyMap/index.tsx b/src/components/CountyMap/index.tsx
@@ -30,7 +30,7 @@ export interface CountyMapProps {
   geoJSONPath: string;
   mapboxAccessToken: string;
   mapPopupProps?: Omit<MapPopupProps, 'popupProps'>;
-  mapProps?: Omit<MapProps, 'mapboxAccessToken'>;
+  mapProps?: Omit<Partial<MapProps>, 'mapboxAccessToken'>;
   onHoverInfo?: FeatureHoverProps;
   processDataFn?: (
     featureCollection: GeoJSON.FeatureCollection<GeoJSON.Geometry>,

diff --git a/src/components/GeomarketMap/index.stories.tsx b/src/components/GeomarketMap/index.stories.tsx
@@ -28,12 +28,13 @@ export default {
   title: 'Molecules / Maps / GeomarketMap',
 } as Meta<GeomarketMapProps>;
 
-export const Default: StoryObj<GeomarketMapProps> = {
+export const Default: StoryObj<GeomarketMapProps> = {};
+
+export const CustomColor: StoryObj<GeomarketMapProps> = {
   args: {
-    data: defaultData,
-    geoJSONPath: '/maps/geomarkets.json',
-    mapboxAccessToken: process.env.STORYBOOK_MAPBOX_ACCESS_TOKEN,
-    processDataFn: defaultProcessDataFn,
+    mapProps: {
+      color: '#FF0000',
+    },
   },
 };
 

diff --git a/src/components/GeomarketMap/index.tsx b/src/components/GeomarketMap/index.tsx
@@ -28,7 +28,7 @@ export interface GeomarketMapProps {
   geoJSONPath: string;
   mapboxAccessToken: string;
   mapPopupProps?: Omit<MapPopupProps, 'popupProps'>;
-  mapProps?: Omit<MapProps, 'mapboxAccessToken'>;
+  mapProps?: Omit<Partial<MapProps>, 'mapboxAccessToken'>;
   onHoverInfo?: FeatureHoverProps;
   processDataFn?: (
     featureCollection: GeoJSON.FeatureCollection<GeoJSON.Geometry>,

diff --git a/src/components/HeatMap/index.stories.tsx b/src/components/HeatMap/index.stories.tsx
@@ -28,9 +28,10 @@ export default {
   title: 'Molecules / Maps / HeatMap',
 } as Meta<HeatMapProps>;
 
-export const Default: StoryObj<HeatMapProps> = {
+export const Default: StoryObj<HeatMapProps> = {};
+
+export const CustomColor: StoryObj<HeatMapProps> = {
   args: {
-    data: finalData,
-    mapboxAccessToken: process.env.STORYBOOK_MAPBOX_ACCESS_TOKEN,
+    color: '#FF0000',
   },
 };
diff --git a/src/components/HeatMap/index.tsx b/src/components/HeatMap/index.tsx
@@ -7,7 +7,8 @@
  * @prettier
  */
 
-import { useTheme } from '@mui/material/styles';
+import { grey } from '@mui/material/colors';
+import { useThemeProps } from '@mui/material/styles';
 import Color from 'color';
 import React from 'react';
 import {
@@ -19,16 +20,18 @@ import {
 
 import Map, { FeatureHoverProps, MapProps } from '~/components/Map';
 import MapPopup, { MapPopupProps } from '~/components/MapPopup';
+import DLS_COMPONENT_NAMES from '~/constants/DLS_COMPONENT_NAMES';
 
 import type GeoJSON from 'geojson';
 
 const MIN_ZOOM = 12;
 
 export interface HeatMapProps {
+  color?: string;
   data?: GeoJSON.FeatureCollection<GeoJSON.Geometry>;
   mapboxAccessToken: string;
   mapPopupProps?: Omit<MapPopupProps, 'popupProps'>;
-  mapProps?: Omit<MapProps, 'mapboxAccessToken'>;
+  mapProps?: Omit<Partial<MapProps>, 'mapboxAccessToken'>;
   onHoverInfo?: FeatureHoverProps;
   setOnHoverInfo?: (newHoverInfo: FeatureHoverProps | undefined) => void;
   sourceId?: string;
@@ -40,17 +43,23 @@ export interface HeatMapProps {
  * to add the link bellow in the head of your page: <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.css' rel='stylesheet' />
  * For more information: https://visgl.github.io/react-map-gl/docs/get-started/get-started#styling
  */
-export const HeatMap: React.FC<HeatMapProps> = ({
-  data,
-  mapboxAccessToken,
-  mapPopupProps,
-  mapProps,
-  onHoverInfo,
-  setOnHoverInfo,
-  sourceId = 'heatmap',
-  tooltipElement,
-}): React.ReactElement<HeatMapProps> => {
-  const { palette } = useTheme();
+export const HeatMap: React.FC<HeatMapProps> = (
+  inProps,
+): React.ReactElement<HeatMapProps> => {
+  const {
+    color = grey[700],
+    data,
+    mapboxAccessToken,
+    mapPopupProps,
+    mapProps,
+    onHoverInfo,
+    setOnHoverInfo,
+    sourceId = 'heatmap',
+    tooltipElement,
+  } = useThemeProps({
+    name: DLS_COMPONENT_NAMES.HEAT_MAP,
+    props: inProps,
+  });
 
   const [hoverInfo, setHoverInfo] = React.useState<FeatureHoverProps>();
   const [lastZoom, setLastZoom] = React.useState<number>();
@@ -104,19 +113,82 @@ export const HeatMap: React.FC<HeatMapProps> = ({
       minzoom: MIN_ZOOM,
       paint: {
         'circle-color': {
-          default: Color(palette.secondary.main).fade(1).rgb().string(),
+          default: Color(mapProps?.color || color)
+            .fade(1)
+            .rgb()
+            .string(),
           property: 'quantity',
           stops: [
-            [0, Color(palette.secondary.main).fade(0.9).rgb().string()],
-            [1, Color(palette.secondary.main).fade(0.8).rgb().string()],
-            [2, Color(palette.secondary.main).fade(0.7).rgb().string()],
-            [3, Color(palette.secondary.main).fade(0.6).rgb().string()],
-            [4, Color(palette.secondary.main).fade(0.5).rgb().string()],
-            [5, Color(palette.secondary.main).fade(0.4).rgb().string()],
-            [6, Color(palette.secondary.main).fade(0.3).rgb().string()],
-            [7, Color(palette.secondary.main).fade(0.2).rgb().string()],
-            [8, Color(palette.secondary.main).fade(0.1).rgb().string()],
-            [9, Color(palette.secondary.main).fade(0).rgb().string()],
+            [
+              0,
+              Color(mapProps?.color || color)
+                .fade(0.9)
+                .rgb()
+                .string(),
+            ],
+            [
+              1,
+              Color(mapProps?.color || color)
+                .fade(0.8)
+                .rgb()
+                .string(),
+            ],
+            [
+              2,
+              Color(mapProps?.color || color)
+                .fade(0.7)
+                .rgb()
+                .string(),
+            ],
+            [
+              3,
+              Color(mapProps?.color || color)
+                .fade(0.6)
+                .rgb()
+                .string(),
+            ],
+            [
+              4,
+              Color(mapProps?.color || color)
+                .fade(0.5)
+                .rgb()
+                .string(),
+            ],
+            [
+              5,
+              Color(mapProps?.color || color)
+                .fade(0.4)
+                .rgb()
+                .string(),
+            ],
+            [
+              6,
+              Color(mapProps?.color || color)
+                .fade(0.3)
+                .rgb()
+                .string(),
+            ],
+            [
+              7,
+              Color(mapProps?.color || color)
+                .fade(0.2)
+                .rgb()
+                .string(),
+            ],
+            [
+              8,
+              Color(mapProps?.color || color)
+                .fade(0.1)
+                .rgb()
+                .string(),
+            ],
+            [
+              9,
+              Color(mapProps?.color || color)
+                .fade(0)
+                .rgb()
+                .string(),
+            ],
           ],
         },
         'circle-opacity': {
@@ -140,7 +212,7 @@ export const HeatMap: React.FC<HeatMapProps> = ({
       },
       type: 'circle',
     };
-  }, [palette.secondary.main]);
+  }, [color, mapProps]);
 
   const onZoom = (event: ViewStateChangeEvent): void => {
     setLastZoom(event.viewState.zoom);
@@ -191,6 +263,7 @@ export const HeatMap: React.FC<HeatMapProps> = ({
 };
 
 HeatMap.defaultProps = {
+  color: undefined,
   data: undefined,
   mapPopupProps: undefined,
   mapProps: undefined,

diff --git a/src/components/Map/index.tsx b/src/components/Map/index.tsx
@@ -9,7 +9,8 @@
 
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 
-import { useTheme } from '@mui/material/styles';
+import { grey } from '@mui/material/colors';
+import { useTheme, useThemeProps } from '@mui/material/styles';
 import bbox from '@turf/bbox';
 import Color from 'color';
 import { isString } from 'lodash';
@@ -36,6 +37,8 @@ import {
   ViewStateChangeEvent,
 } from 'react-map-gl/dist/es5';
 
+import DLS_COMPONENT_NAMES from '~/constants/DLS_COMPONENT_NAMES';
+
 import { StyledAttibutionControlContainer } from './styles';
 
 import type GeoJSON from 'geojson';
@@ -67,6 +70,7 @@ export interface FeatureHoverProps {
 export type MapProps = MapGLProps & {
   attributionControlProps?: AttributionControlProps;
   children?: React.ReactElement;
+  color?: string;
   data?:
     | GeoJSON.Feature<GeoJSON.Geometry>
     | GeoJSON.FeatureCollection<GeoJSON.Geometry>
@@ -94,24 +98,29 @@ export type MapProps = MapGLProps & {
  *
  * @note If sending the `data` prop it's also necessary to send the `sourceId` prop.
  */
-export const Map: React.FC<MapProps> = ({
-  attributionControlProps,
-  children,
-  data,
-  height = 450,
-  initialBoundsPosition,
-  layers,
-  layerProps,
-  mapboxAccessToken,
-  navigationControlProps,
-  onMapClick,
-  setHoverInfo,
-  preserveDrawingBuffer = false,
-  sourceId = 'areas',
-  sourceProps,
-  width = '100%',
-  ...mapProps
-}): React.ReactElement<MapProps> => {
+export const Map: React.FC<MapProps> = (
+  inProps: MapProps,
+): React.ReactElement<MapProps> => {
+  const {
+    attributionControlProps,
+    children,
+    color = grey[700],
+    data,
+    height = 450,
+    initialBoundsPosition,
+    layers,
+    layerProps,
+    mapboxAccessToken,
+    navigationControlProps,
+    onMapClick,
+    setHoverInfo,
+    preserveDrawingBuffer = false,
+    sourceId = 'areas',
+    sourceProps,
+    width = '100%',
+    ...mapProps
+  } = useThemeProps({ name: DLS_COMPONENT_NAMES.MAP, props: inProps });
+
   const { palette, spacing } = useTheme();
 
   const mapRef = React.useRef<MapRef | null>(null);
@@ -128,19 +137,19 @@ export const Map: React.FC<MapProps> = ({
       id: 'data',
       paint: {
         'fill-color': {
-          default: Color(palette.secondary.main).fade(1).rgb().string(),
+          default: Color(color).fade(1).rgb().string(),
           property: 'quantity',
           stops: [
-            [0, Color(palette.secondary.main).fade(0.9).rgb().string()],
-            [1, Color(palette.secondary.main).fade(0.8).rgb().string()],
-            [2, Color(palette.secondary.main).fade(0.7).rgb().string()],
-            [3, Color(palette.secondary.main).fade(0.6).rgb().string()],
-            [4, Color(palette.secondary.main).fade(0.5).rgb().string()],
-            [5, Color(palette.secondary.main).fade(0.4).rgb().string()],
-            [6, Color(palette.secondary.main).fade(0.3).rgb().string()],
-            [7, Color(palette.secondary.main).fade(0.2).rgb().string()],
-            [8, Color(palette.secondary.main).fade(0.1).rgb().string()],
-            [9, Color(palette.secondary.main).fade(0).rgb().string()],
+            [0, Color(color).fade(0.9).rgb().string()],
+            [1, Color(color).fade(0.8).rgb().string()],
+            [2, Color(color).fade(0.7).rgb().string()],
+            [3, Color(color).fade(0.6).rgb().string()],
+            [4, Color(color).fade(0.5).rgb().string()],
+            [5, Color(color).fade(0.4).rgb().string()],
+            [6, Color(color).fade(0.3).rgb().string()],
+            [7, Color(color).fade(0.2).rgb().string()],
+            [8, Color(color).fade(0.1).rgb().string()],
+            [9, Color(color).fade(0).rgb().string()],
           ],
         },
         'fill-opacity': 0.7,
@@ -154,7 +163,7 @@ export const Map: React.FC<MapProps> = ({
       source: sourceId,
       type: 'fill',
     };
-  }, [palette.secondary.main, palette.common.black, palette.grey, sourceId]);
+  }, [color, palette.common.black, palette.grey, sourceId]);
 
   const onHover = React.useCallback(
     (event: MapLayerMouseEvent) => {
@@ -316,6 +325,7 @@ export const Map: React.FC<MapProps> = ({
 Map.defaultProps = {
   attributionControlProps: undefined,
   children: undefined,
+  color: undefined,
   data: undefined,
   fog: undefined,
   initialBoundsPosition: undefined,

diff --git a/src/components/SCFMap/index.stories.tsx b/src/components/SCFMap/index.stories.tsx
@@ -28,12 +28,13 @@ export default {
   title: 'Molecules / Maps / SCFMap',
 } as Meta<SCFMapProps>;
 
-export const Default: StoryObj<SCFMapProps> = {
+export const Default: StoryObj<SCFMapProps> = {};
+
+export const CustomColor: StoryObj<SCFMapProps> = {
   args: {
-    data: defaultData,
-    geoJSONPath: '/maps/scf.json',
-    mapboxAccessToken: process.env.STORYBOOK_MAPBOX_ACCESS_TOKEN,
-    processDataFn: defaultProcessDataFn,
+    mapProps: {
+      color: '#FF0000',
+    },
   },
 };
 

diff --git a/src/components/SCFMap/index.tsx b/src/components/SCFMap/index.tsx
@@ -30,7 +30,7 @@ export interface SCFMapProps {
   geoJSONPath: string;
   mapboxAccessToken: string;
   mapPopupProps?: Omit<MapPopupProps, 'popupProps'>;
-  mapProps?: Omit<MapProps, 'mapboxAccessToken'>;
+  mapProps?: Omit<Partial<MapProps>, 'mapboxAccessToken'>;
   processDataFn?: (
     featureCollection: GeoJSON.FeatureCollection<GeoJSON.Geometry>,
     data: Array<IMapDataProps>,