From 7e0a23624274ef8b4a5ce3cb4be0793cbe7205dc Mon Sep 17 00:00:00 2001
From: dleadbetter <>
Date: Thu, 9 Nov 2023 12:27:05 -0500
Subject: [PATCH] CDC #35 - Adding comments to MapDraw props and component

---
 packages/geospatial/src/components/MapDraw.js | 21 +++++++++++++++++++
 .../src/geospatial/MapDraw.stories.js         |  3 +++
 2 files changed, 24 insertions(+)

diff --git a/packages/geospatial/src/components/MapDraw.js b/packages/geospatial/src/components/MapDraw.js
index 847f5b50..de44d010 100644
--- a/packages/geospatial/src/components/MapDraw.js
+++ b/packages/geospatial/src/components/MapDraw.js
@@ -20,12 +20,33 @@ import DrawControl from './DrawControl';
 import './MapDraw.css';
 
 type Props = {
+  /**
+   * GeoJSON structured data to be displayed on the map.
+   */
   data: GeometryCollection | FeatureCollection,
+
+  /**
+   * URL of the map style to render. This URL should contain any necessary API keys.
+   */
   mapStyle: string,
+
+  /**
+   * Callback fired when the map geometries are changed.
+   *
+   * @param features
+   */
   onChange: (features: Array<any>) => void,
+
+  /**
+   * Map style object.
+   */
   style?: any
 };
 
+/**
+ * This component renders a map with controls for drawing one or more geometries. Geometries can be a point (lat/long),
+ * a line, or a polygon.
+ */
 const MapDraw = (props: Props) => {
   const drawRef = useRef<MapboxDraw>();
   const mapRef = useRef<MapRef>();
diff --git a/packages/storybook/src/geospatial/MapDraw.stories.js b/packages/storybook/src/geospatial/MapDraw.stories.js
index ad3d2f8a..73fcc253 100644
--- a/packages/storybook/src/geospatial/MapDraw.stories.js
+++ b/packages/storybook/src/geospatial/MapDraw.stories.js
@@ -13,5 +13,8 @@ export const Default = () => (
   <MapDraw
     mapStyle={`https://api.maptiler.com/maps/basic-v2/style.json?key=${process.env.REACT_APP_MAP_TILER_KEY}`}
     onChange={action('onChange')}
+    style={{
+      marginBottom: '2em'
+    }}
   />
 );