feat(story-header): move story header to own component

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

@@ -1,7 +1,7 @@
 import React, {FunctionComponent, useState, useEffect} from 'react';
 import cx from 'classnames';
 
-import {PreviousIcon} from '../icons/back-icon';
+import {PreviousIcon} from '../icons/previous-icon';
 import {NextIcon} from '../icons/next-icon';
 import {FullscreenIcon} from '../icons/fullscreen-icon';
 import {FullscreenExitIcon} from '../icons/fullscreen-exit-icon';

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

@@ -0,0 +1,26 @@
+.header
+  position: absolute
+  right: 500px
+  left: 0
+  z-index: 1
+  display: flex
+  flex-direction: row
+  justify-content: space-between
+  align-items: flex-start
+  padding: 15px
+
+  > *
+    color: #fff
+
+.title
+  margin: 0
+
+.present
+  .title
+    font-size: 2em
+
+  .subtitle
+    font-size: 1.3em
+
+  .backButton
+    font-size: 1.3em

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

@@ -0,0 +1,41 @@
+import React, {FunctionComponent} from 'react';
+import {FormattedMessage} from 'react-intl';
+import {Link} from 'react-router-dom';
+import cx from 'classnames';
+
+import styles from './story-header.styl';
+
+import {StoryListItem} from '../../types/story-list';
+
+interface Props {
+  mode: string;
+  story: StoryListItem;
+}
+
+const StoryHeader: FunctionComponent<Props> = ({story, mode}) => {
+  const Present = mode === 'present';
+  const Showcase = mode === 'showcase';
+
+  const storyClasses = cx(
+    styles.header,
+    Present && styles.present,
+    Showcase && styles.showcase
+  );
+
+  return (
+    <div className={storyClasses}>
+      <Link to={`/${mode}`} className={styles.backButton}>
+        <FormattedMessage id="goBack" />
+      </Link>
+      <div>
+        <h2 className={styles.title}>{story && story.title}</h2>
+        {Showcase && (
+          <h3 className={styles.subtitle}>{story && story.description}</h3>
+        )}
+        {Present && <h3 className={styles.subtitle}>Pagination?</h3>}
+      </div>
+    </div>
+  );
+};
+
+export default StoryHeader;

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

@@ -1,7 +1,7 @@
 import React, {FunctionComponent} from 'react';
 import {Link} from 'react-router-dom';
 
-import {PreviousIcon} from '../icons/back-icon';
+import {PreviousIcon} from '../icons/previous-icon';
 import {NextIcon} from '../icons/next-icon';
 
 import {Slide} from '../../types/story';

src/scripts/components/story/story.styl

@@ -4,28 +4,3 @@
   flex-direction: column
   width: 500px
   height: 100%
-
-.presentStory
-  .storyTitle
-    font-size: 2em
-
-  .backButton
-    font-size: 1.3em
-
-.header
-  position: absolute
-  right: 500px
-  left: 0
-  z-index: 1
-  display: flex
-  flex-direction: row
-  justify-content: space-between
-
-.backButton
-  display: block
-  padding: 20px 0 0 20px
-  color: #fff
-
-.storyTitle
-  padding-right: 20px
-  color: #fff

src/scripts/components/story/story.tsx

@@ -1,8 +1,6 @@
 import React, {FunctionComponent, useEffect} from 'react';
 import {useDispatch, useSelector} from 'react-redux';
-import {useParams, Redirect, Link} from 'react-router-dom';
-import {FormattedMessage} from 'react-intl';
-import cx from 'classnames';
+import {useParams, Redirect} from 'react-router-dom';
 
 import StoryPagination from '../story-pagination/story-pagination';
 import fetchStory from '../../actions/fetch-story';
@@ -11,6 +9,7 @@ import {storyListSelector} from '../../selectors/story/list';
 import setFlyToAction from '../../actions/set-fly-to';
 import Slide from '../slide/slide';
 import {State} from '../../reducers';
+import StoryHeader from '../story-header/story-header';
 
 import styles from './story.styl';
 
@@ -59,21 +58,9 @@ const Story: FunctionComponent<Props> = ({mode}) => {
     return <Redirect to={`/${mode}/${storyId}/0`} />;
   }
 
-  const storyClasses = cx(
-    styles.story,
-    mode === 'present' && styles.presentStory
-  );
-
   return (
-    <div className={storyClasses}>
-      <div className={styles.header}>
-        <Link to={`/${mode}`} className={styles.backButton}>
-          <FormattedMessage id="goBack" />
-        </Link>
-        <h2 className={styles.storyTitle}>
-          {storyListItem && storyListItem.title}
-        </h2>
-      </div>
+    <div className={styles.story}>
+      {storyListItem && <StoryHeader story={storyListItem} mode={mode} />}
       {slide && <Slide slide={slide} mode={mode} />}
       {story && (
         <StoryPagination