Skip to content

Commit

Permalink
feat(addon-backgrounds): reduced motion disables transition
Browse files Browse the repository at this point in the history
- addon backgrounds should respect the user's configuration
- so it disables transition transition animation when requested
  • Loading branch information
yannbf committed Jul 12, 2021
1 parent 9ab0618 commit 6db035b
Show file tree
Hide file tree
Showing 2 changed files with 14 additions and 3 deletions.
10 changes: 8 additions & 2 deletions addons/backgrounds/src/decorators/withBackground.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,12 @@
import { StoryFn as StoryFunction, StoryContext, useMemo, useEffect } from '@storybook/addons';

import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
import { clearStyles, addBackgroundStyle, getBackgroundColorByName } from '../helpers';
import {
clearStyles,
addBackgroundStyle,
getBackgroundColorByName,
isReduceMotionEnabled,
} from '../helpers';

export const withBackground = (StoryFn: StoryFunction, context: StoryContext) => {
const { globals, parameters } = context;
Expand Down Expand Up @@ -29,10 +34,11 @@ export const withBackground = (StoryFn: StoryFunction, context: StoryContext) =>
context.viewMode === 'docs' ? `#anchor--${context.id} .docs-story` : '.sb-show-main';

const backgroundStyles = useMemo(() => {
const transitionStyle = 'transition: background-color 0.3s;';
return `
${selector} {
background: ${selectedBackgroundColor} !important;
transition: background-color 0.3s;
${isReduceMotionEnabled() ? '' : transitionStyle}
}
`;
}, [selectedBackgroundColor, selector]);
Expand Down
7 changes: 6 additions & 1 deletion addons/backgrounds/src/helpers/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,12 @@ import { logger } from '@storybook/client-logger';

import { Background } from '../types';

const { document } = global;
const { document, window } = global;

export const isReduceMotionEnabled = () => {
const prefersReduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
return prefersReduceMotion.matches;
};

export const getBackgroundColorByName = (
currentSelectedValue: string,
Expand Down

0 comments on commit 6db035b

Please sign in to comment.