Update the styling of map container

- Add isChromatic to update animation parameters
toggle-corp · Nov 17, 2023 · 42e8ce8 · 42e8ce8
1 parent b2cb5bd
commit 42e8ce8
Show file tree

Hide file tree

Showing 16 changed files with 22 additions and 15 deletions.
diff --git a/storybook/.storybook/preview-head.html b/storybook/.storybook/preview-head.html
@@ -2,6 +2,9 @@
   window.global = window;
 </script>
 <style>
+    .html, .body, #root {
+        height: 100%
+    }
     * {
         box-sizing: border-box;
     }

diff --git a/storybook/package.json b/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",

diff --git a/storybook/stories/BubbleMap.stories.tsx b/storybook/stories/BubbleMap.stories.tsx
@@ -72,5 +72,5 @@ export function Default() {
 
 export default {
     title: 'Type/Bubble Map',
-    parameters: { delay: 500 },
+    parameters: { delay: 1000 },
 };
diff --git a/storybook/stories/ChoroplethMap.stories.tsx b/storybook/stories/ChoroplethMap.stories.tsx
@@ -187,5 +187,5 @@ export function Default() {
 
 export default {
     title: 'Type/Choropleth Map',
-    parameters: { delay: 500 },
+    parameters: { delay: 1000 },
 };
diff --git a/storybook/stories/FitBounds.stories.tsx b/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 },
 };
diff --git a/storybook/stories/FlyToLocation.stories.tsx b/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 },
 };
diff --git a/storybook/stories/GeoJSONMap.stories.tsx b/storybook/stories/GeoJSONMap.stories.tsx
@@ -76,5 +76,5 @@ export function Default() {
 
 export default {
     title: 'Source/GeoJSON Source',
-    parameters: { delay: 500 },
+    parameters: { delay: 1000 },
 };
diff --git a/storybook/stories/MbtilesMap.stories.tsx b/storybook/stories/MbtilesMap.stories.tsx
@@ -10,5 +10,4 @@ export function Default() {
 
 export default {
     title: 'Source/Mbtiles Source',
-    parameters: { delay: 500 },
 };
diff --git a/storybook/stories/PmtilesMap.stories.tsx b/storybook/stories/PmtilesMap.stories.tsx
@@ -10,5 +10,4 @@ export function Default() {
 
 export default {
     title: 'Source/Pmtiles Source',
-    parameters: { delay: 500 },
 };
diff --git a/storybook/stories/SimpleMap.stories.tsx b/storybook/stories/SimpleMap.stories.tsx
@@ -24,5 +24,5 @@ export function Default() {
 
 export default {
     title: 'Basic/Simple Map',
-    parameters: { delay: 500 },
+    parameters: { delay: 1000 },
 };
diff --git a/storybook/stories/WithClickInteraction.stories.tsx b/storybook/stories/WithClickInteraction.stories.tsx
@@ -10,5 +10,4 @@ export function Default() {
 
 export default {
     title: 'Basic/With Click Interaction',
-    parameters: { delay: 500 },
 };
diff --git a/storybook/stories/WithClickInteractionAndPopup.stories.tsx b/storybook/stories/WithClickInteractionAndPopup.stories.tsx
@@ -10,5 +10,4 @@ export function Default() {
 
 export default {
     title: 'Basic/With Click Interaction and Popup',
-    parameters: { delay: 500 },
 };
diff --git a/storybook/stories/WithDragInteraction.stories.tsx b/storybook/stories/WithDragInteraction.stories.tsx
@@ -170,5 +170,5 @@ export function Default() {
 
 export default {
     title: 'Basic/With Drag Interaction',
-    parameters: { delay: 500 },
+    parameters: { delay: 1000 },
 };
diff --git a/storybook/stories/WithHoverInteractionAndPopup.stories.tsx b/storybook/stories/WithHoverInteractionAndPopup.stories.tsx
@@ -131,5 +131,5 @@ export function Default() {
 
 export default {
     title: 'Basic/With Hover Interaction and Popup',
-    parameters: { delay: 500 },
+    parameters: { delay: 1000 },
 };
diff --git a/storybook/stories/WithHoverInteractive.stories.tsx b/storybook/stories/WithHoverInteractive.stories.tsx
@@ -85,5 +85,5 @@ export function Default() {
 
 export default {
     title: 'Basic/With Hover Interaction',
-    parameters: { delay: 500 },
+    parameters: { delay: 1000 },
 };
diff --git a/yarn.lock b/yarn.lock
@@ -4943,6 +4943,11 @@ chownr@^2.0.0:
   resolved "https://registry.yarnpkg.com/chownr/-/chownr-2.0.0.tgz#15bfbe53d2eab4cf70f18a8cd68ebe5b3cb1dece"
   integrity sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==
 
+chromatic@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/chromatic/-/chromatic-9.0.0.tgz#0b429b5b171428495a39e7dcbaeaa56b06f055e6"
+  integrity sha512-PczbWYOfqsf/SM0yIzI3ZOpFznEyf9Fc96EkxoYkhztFaA9CEOcpA9nk8zpmNgPUQWmIWNyG7z4xEK40sApFzw==
+
 chrome-trace-event@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz#1015eced4741e15d06664a957dbbf50d041e26ac"