From 9d8e8e91b150e252a7022686bc5397f968a314f0 Mon Sep 17 00:00:00 2001
From: Ash Furrow <ash@ashfurrow.com>
Date: Fri, 31 Jul 2020 10:28:19 -0400
Subject: [PATCH] Replaces delay with pausing animations. Fixes #528.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: David Sheldrick <d.j.sheldrick@gmail.com>
Co-authored-by: Pavlos Vinieratos <pvinis@gmail.com>

Co-authored-by: Mounir Dhahri <mounir.dhahri@ensi-uma.tn>

Co-authored-by: Brian Beckerle <brian.beckerle@gmail.com>

---
 .../palette/src/elements/BarChart/BarChart.story.tsx | 12 ++++++------
 .../src/elements/DonutChart/DonutChart.story.tsx     | 12 ++++++------
 .../src/elements/LineChart/LineChart.story.tsx       |  4 ++--
 3 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/packages/palette/src/elements/BarChart/BarChart.story.tsx b/packages/palette/src/elements/BarChart/BarChart.story.tsx
index 1861bffa1..c4a642c81 100644
--- a/packages/palette/src/elements/BarChart/BarChart.story.tsx
+++ b/packages/palette/src/elements/BarChart/BarChart.story.tsx
@@ -64,7 +64,7 @@ storiesOf("Components/BarChart", module)
         </Box>
       )
     },
-    { chromatic: { delay: 2000, diffThreshold: 1 } }
+    { chromatic: { pauseAnimationAtEnd: true, diffThreshold: 1 } }
   )
 
   .add(
@@ -123,7 +123,7 @@ storiesOf("Components/BarChart", module)
         </Box>
       )
     },
-    { chromatic: { delay: 2000, diffThreshold: 1 } }
+    { chromatic: { pauseAnimationAtEnd: true, diffThreshold: 1 } }
   )
 
   .add(
@@ -182,7 +182,7 @@ storiesOf("Components/BarChart", module)
         </Box>
       )
     },
-    { chromatic: { delay: 2000, diffThreshold: 1 } }
+    { chromatic: { pauseAnimationAtEnd: true, diffThreshold: 1 } }
   )
 
   .add(
@@ -243,7 +243,7 @@ storiesOf("Components/BarChart", module)
         </Box>
       )
     },
-    { chromatic: { delay: 2000, diffThreshold: 1 } }
+    { chromatic: { pauseAnimationAtEnd: true, diffThreshold: 1 } }
   )
 
   .add(
@@ -298,7 +298,7 @@ storiesOf("Components/BarChart", module)
         </Box>
       )
     },
-    { chromatic: { delay: 2000, diffThreshold: 1 } }
+    { chromatic: { pauseAnimationAtEnd: true, diffThreshold: 1 } }
   )
 
   .add(
@@ -342,5 +342,5 @@ storiesOf("Components/BarChart", module)
         </Box>
       )
     },
-    { chromatic: { delay: 2000, diffThreshold: 1 } }
+    { chromatic: { pauseAnimationAtEnd: true, diffThreshold: 1 } }
   )
diff --git a/packages/palette/src/elements/DonutChart/DonutChart.story.tsx b/packages/palette/src/elements/DonutChart/DonutChart.story.tsx
index 46d8d9d4d..7a923f2f9 100644
--- a/packages/palette/src/elements/DonutChart/DonutChart.story.tsx
+++ b/packages/palette/src/elements/DonutChart/DonutChart.story.tsx
@@ -53,7 +53,7 @@ storiesOf("Components/DonutChart", module).add(
       </Box>
     )
   },
-  { chromatic: { delay: 500 } }
+  { chromatic: { pauseAnimationAtEnd: true } }
 )
 
 storiesOf("Components/DonutChart", module).add(
@@ -108,7 +108,7 @@ storiesOf("Components/DonutChart", module).add(
       </Box>
     )
   },
-  { chromatic: { delay: 500 } }
+  { chromatic: { pauseAnimationAtEnd: true } }
 )
 
 storiesOf("Components/DonutChart", module).add(
@@ -163,7 +163,7 @@ storiesOf("Components/DonutChart", module).add(
       </Box>
     )
   },
-  { chromatic: { delay: 500 } }
+  { chromatic: { pauseAnimationAtEnd: true } }
 )
 
 storiesOf("Components/DonutChart", module).add(
@@ -211,7 +211,7 @@ storiesOf("Components/DonutChart", module).add(
       </Box>
     )
   },
-  { chromatic: { delay: 500 } }
+  { chromatic: { pauseAnimationAtEnd: true } }
 )
 
 storiesOf("Components/DonutChart", module).add(
@@ -259,7 +259,7 @@ storiesOf("Components/DonutChart", module).add(
       </Box>
     )
   },
-  { chromatic: { delay: 500 } }
+  { chromatic: { pauseAnimationAtEnd: true } }
 )
 
 storiesOf("Components/DonutChart", module).add(
@@ -313,7 +313,7 @@ storiesOf("Components/DonutChart", module).add(
       </>
     )
   },
-  { chromatic: { delay: 500 } }
+  { chromatic: { pauseAnimationAtEnd: true } }
 )
 
 const GrowingBox = styled(Box)`
diff --git a/packages/palette/src/elements/LineChart/LineChart.story.tsx b/packages/palette/src/elements/LineChart/LineChart.story.tsx
index ed1b47686..602fea5ff 100644
--- a/packages/palette/src/elements/LineChart/LineChart.story.tsx
+++ b/packages/palette/src/elements/LineChart/LineChart.story.tsx
@@ -71,7 +71,7 @@ storiesOf("Components/LineChart", module)
         </Box>
       )
     },
-    { chromatic: { delay: 1000 } }
+    { chromatic: { pauseAnimationAtEnd: true } }
   )
 
   .add(
@@ -142,6 +142,6 @@ storiesOf("Components/LineChart", module)
       )
     },
     {
-      chromatic: { delay: 1000 },
+      chromatic: { pauseAnimationAtEnd: true },
     }
   )