feat(a11y): respect reduced motion preference

Relates to #31
rbardini · Apr 1, 2022 · d1a835b · d1a835b
1 parent e83bdee
commit d1a835b
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/src/helpers.tsx b/src/helpers.tsx
@@ -5,6 +5,9 @@ import { PaddingWithDefault, PaddingsParameter, Padding } from './types';
 export const isEnabled = (values: PaddingWithDefault[]): boolean =>
   values.length > 0;
 
+export const isReducedMotionPreferred = (): boolean =>
+  window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
 export const normalizeValues = (
   parameters: PaddingsParameter,
 ): PaddingWithDefault[] => {

diff --git a/src/index.tsx b/src/index.tsx
@@ -1,7 +1,11 @@
 import { StoryWrapper, useEffect, useMemo } from '@storybook/addons';
 
 import { DEFAULT_PADDING, PARAM_KEY } from './constants';
-import { normalizeValues, getSelectedPadding } from './helpers';
+import {
+  isReducedMotionPreferred,
+  getSelectedPadding,
+  normalizeValues,
+} from './helpers';
 
 const setStyle = (selector: string, css: string) => {
   const existingStyle = document.getElementById(selector);
@@ -42,7 +46,7 @@ const WithPaddings: StoryWrapper = (getStory, context) => {
       ${selector} {
         margin: 0;
         padding: ${selectedPadding} !important;
-        transition: padding .3s;
+        ${isReducedMotionPreferred() ? '' : 'transition: padding .3s;'}
       }
 
       ${selector} .innerZoomElementWrapper > div {