feat(story-footer): slide in story footer on mouse move (#327)

* feat(story-footer): fade in story footer on hover

* feat(story-footer): hide footer when mouse stops moving

* feat(story-footer): clean up event listener

* style(story-footer): add empty line before return

src/scripts/components/story-footer/story-footer.styl

@@ -6,3 +6,8 @@
   height: emCalc(72px)
   height: $footerHeight
   background-color: $darkGrey1
+  transition: transform 0.6s ease-in-out
+  transform: translateY(0%)
+
+.slideOutFooter
+  transform: translateY(100%)

src/scripts/components/story-footer/story-footer.tsx

@@ -3,11 +3,13 @@ import React, {FunctionComponent} from 'react';
 import StoryPagination from '../story-pagination/story-pagination';
 import Autoplay from '../autoplay/autoplay';
 import {useStoryNavigation} from '../../hooks/use-story-navigation';
+import cx from 'classnames';
 
 import {StoryMode} from '../../types/story-mode';
 import {Story} from '../../types/story';
 
 import styles from './story-footer.styl';
+import {useMouseMove} from '../../hooks/use-mouse-move';
 
 interface Props {
   mode: StoryMode | null;
@@ -21,10 +23,17 @@ const StoryFooter: FunctionComponent<Props> = ({
   selectedStory
 }) => {
   const isShowcaseMode = mode === StoryMode.Showcase;
+  const isStoriesMode = mode === StoryMode.Stories;
   const {nextSlideLink, previousSlideLink, autoPlayLink} = useStoryNavigation();
+  const mouseMove = useMouseMove();
+
+  const footerClasses = cx(
+    styles.storyFooter,
+    !isStoriesMode && !mouseMove && styles.slideOutFooter
+  );
 
   return (
-    <div className={styles.storyFooter}>
+    <div className={footerClasses}>
       {selectedStory && (
         <StoryPagination
           mode={mode}

src/scripts/hooks/use-mouse-move.ts

@@ -0,0 +1,21 @@
+import {useEffect, useState} from 'react';
+
+export const useMouseMove = () => {
+  const [mouseMove, setMouseMove] = useState(true);
+
+  useEffect(() => {
+    let timer = 0;
+    const handleMouseMove = () => {
+      setMouseMove(true);
+      timer = window.setTimeout(() => setMouseMove(false), 5000);
+    };
+    window.addEventListener('mousemove', handleMouseMove);
+
+    return () => {
+      window.removeEventListener('mousemove', handleMouseMove);
+      clearTimeout(timer);
+    };
+  }, []);
+
+  return mouseMove;
+};