From fc0f5df6c62a32c04d61ee172ae9b8abdb88797c Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Tue, 27 Aug 2019 22:58:25 -0700
Subject: [PATCH] fix: length gauge should respect reduceMotion (#1440)

---
 src/routes/_components/LengthGauge.html | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/routes/_components/LengthGauge.html b/src/routes/_components/LengthGauge.html
index 34e6b991..0db36d9e 100644
--- a/src/routes/_components/LengthGauge.html
+++ b/src/routes/_components/LengthGauge.html
@@ -1,4 +1,4 @@
-<div class="length-gauge {shouldAnimate ? 'should-animate' : ''}  {overLimit ? 'over-char-limit' : ''}"
+<div class={computedClass}
      style={computedStyle}
      aria-hidden="true"
 ></div>
@@ -20,6 +20,7 @@
   import { store } from '../_store/store'
   import { observe } from 'svelte-extras'
   import { throttleTimer } from '../_utils/throttleTimer'
+  import { classname } from '../_utils/classname'
 
   const updateDisplayedLength = process.browser && throttleTimer(requestAnimationFrame)
 
@@ -50,6 +51,11 @@
         const int = Math.round(Math.min(max, length) / max * 100)
         return (int - (int % 2)) / 100
       },
+      computedClass: ({ shouldAnimate, overLimit, $reduceMotion }) => classname(
+        'length-gauge',
+        !$reduceMotion && shouldAnimate && 'should-animate',
+        overLimit && 'over-char-limit'
+      ),
       computedStyle: ({ style, lengthAsFractionDeferred }) => `transform: scaleX(${lengthAsFractionDeferred}); ${style}`
     },
     methods: {