Update the styling of map container

- Add isChromatic to update animation parameters

Author: tnagorra

storybook/.storybook/preview-head.html

@@ -2,6 +2,9 @@
   window.global = window;
 </script>
 <style>
+    html, body, #root {
+        height: 100%
+    }
     * {
         box-sizing: border-box;
     }

storybook/package.json

@@ -17,6 +17,7 @@
         "@mapbox/mapbox-gl-draw": "^1.4.3",
         "@togglecorp/fujs": "^2.0.0",
         "@togglecorp/re-map": "^0.3.0",
+        "chromatic": "^9.0.0",
         "immer": "^10.0.3",
         "maplibre-gl": "^3.5.2",
         "react": "^18.2.0",

storybook/stories/BubbleMap.stories.tsx

@@ -72,5 +72,5 @@ export function Default() {
 
 export default {
     title: 'Type/Bubble Map',
-    parameters: { delay: 500 },
+    parameters: { delay: 1000 },
 };

storybook/stories/ChoroplethMap.stories.tsx

@@ -187,5 +187,5 @@ export function Default() {
 
 export default {
     title: 'Type/Choropleth Map',
-    parameters: { delay: 500 },
+    parameters: { delay: 1000 },
 };

storybook/stories/FitBounds.stories.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import isChromatic from 'chromatic/isChromatic';
 import Map, {
     MapContainer,
     MapBounds,
@@ -27,13 +28,13 @@ export function Default() {
             <MapBounds
                 bounds={bounds}
                 padding={10}
-                duration={1000}
+                duration={isChromatic() ? 0 : 1000}
             />
         </Map>
     );
 }
 
 export default {
     title: 'Basic/Fit Bounds',
-    parameters: { delay: 500 },
+    parameters: { delay: 1000 },
 };

storybook/stories/FlyToLocation.stories.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import isChromatic from 'chromatic/isChromatic';
 import Map, {
     MapContainer,
     MapCenter,
@@ -25,7 +26,7 @@ export function Default() {
                 ]}
                 centerOptions={{
                     zoom: 4,
-                    duration: 1000,
+                    duration: isChromatic() ? 0 : 1000,
                 }}
             />
         </Map>
@@ -34,5 +35,5 @@ export function Default() {
 
 export default {
     title: 'Basic/Fly to Location',
-    parameters: { delay: 500 },
+    parameters: { delay: 1000 },
 };

storybook/stories/GeoJSONMap.stories.tsx

@@ -76,5 +76,5 @@ export function Default() {
 
 export default {
     title: 'Source/GeoJSON Source',
-    parameters: { delay: 500 },
+    parameters: { delay: 1000 },
 };

storybook/stories/MbtilesMap.stories.tsx

@@ -10,5 +10,4 @@ export function Default() {
 
 export default {
     title: 'Source/Mbtiles Source',
-    parameters: { delay: 500 },
 };

storybook/stories/PmtilesMap.stories.tsx

@@ -10,5 +10,4 @@ export function Default() {
 
 export default {
     title: 'Source/Pmtiles Source',
-    parameters: { delay: 500 },
 };

storybook/stories/SimpleMap.stories.tsx

@@ -24,5 +24,5 @@ export function Default() {
 
 export default {
     title: 'Basic/Simple Map',
-    parameters: { delay: 500 },
+    parameters: { delay: 1000 },
 };