From 58903f64dc859a2e550fbe9221df0fdf2c892a4e Mon Sep 17 00:00:00 2001
From: Kairsten Fay <kairsten.fay@gmail.com>
Date: Wed, 29 Jan 2020 12:32:30 -0800
Subject: [PATCH] narratives: Refactor end of narrative block

Use a styled component to replace the inline styling in the final block
for narratives.
For desktop, change the `div` tags used in the end of narrative block links to be `a`
tags, and change the `h3` header to `h1` for improved accessibility.
---
 .../narrative/MobileNarrativeDisplay.js       | 29 ++++++++++---------
 src/components/narrative/index.js             | 19 ++++++------
 src/components/narrative/styles.js            |  7 +++++
 3 files changed, 32 insertions(+), 23 deletions(-)

diff --git a/src/components/narrative/MobileNarrativeDisplay.js b/src/components/narrative/MobileNarrativeDisplay.js
index 6dd166b6d..cf93ced32 100644
--- a/src/components/narrative/MobileNarrativeDisplay.js
+++ b/src/components/narrative/MobileNarrativeDisplay.js
@@ -7,7 +7,8 @@ import {
   linkStyles,
   MobileBannerTop,
   MobileBannerBottom,
-  MobileContentContainer
+  MobileContentContainer,
+  EndOfNarrative
 } from "./styles";
 import Tree from "../tree";
 import Map from "../map/map";
@@ -122,18 +123,20 @@ class MobileNarrativeDisplay extends React.Component {
           Previous
         </MobileBannerTop>
         <MobileContentContainer height={contentHeight+bannerHeight}>
-          <h1>End of Narrative</h1>
-          <a style={{...linkStyles, textAlign: "center"}}
-            onClick={() => this._goToPage(0)}
-          >
-            Jump to the beginning
-          </a>
-          <br />
-          <a style={{...linkStyles, textAlign: "center"}}
-            onClick={this.exitNarrativeMode}
-          >
-            Explore the data
-          </a>
+          <EndOfNarrative>
+            <h1>End of Narrative</h1>
+            <a style={{...linkStyles}}
+              onClick={() => this._goToPage(0)}
+            >
+              Jump to the beginning
+            </a>
+            <br />
+            <a style={{...linkStyles}}
+              onClick={this.exitNarrativeMode}
+            >
+              Explore the data
+            </a>
+          </EndOfNarrative>
         </MobileContentContainer>
       </>
     );
diff --git a/src/components/narrative/index.js b/src/components/narrative/index.js
index 835166c89..124b52368 100644
--- a/src/components/narrative/index.js
+++ b/src/components/narrative/index.js
@@ -3,7 +3,7 @@ import React from "react";
 import { connect } from "react-redux";
 import queryString from "query-string";
 import Mousetrap from "mousetrap";
-import { NarrativeStyles, linkStyles, OpacityFade } from './styles';
+import { NarrativeStyles, linkStyles, OpacityFade, EndOfNarrative } from './styles';
 import ReactPageScroller from "./ReactPageScroller";
 import { changePage, EXPERIMENTAL_showMainDisplayMarkdown } from "../../actions/navigation";
 import { CHANGE_URL_QUERY_BUT_NOT_REDUX_STATE, TOGGLE_NARRATIVE } from "../../actions/types";
@@ -151,21 +151,20 @@ class Narrative extends React.Component {
       />
     ));
     ret.push((
-      <div key="EON" id="EndOfNarrative" style={{flexBasis: "50%", flexShrink: 0}}>
-        <h3 style={{textAlign: "center"}}>
-          END OF NARRATIVE
-        </h3>
-        <div style={{...linkStyles, textAlign: "center"}}
+      <EndOfNarrative key="EON" id="EndOfNarrative">
+        <h1>END OF NARRATIVE</h1>
+        <a style={{...linkStyles}}
           onClick={() => this.reactPageScroller.goToPage(0)}
         >
           Scroll back to the beginning
-        </div>
-        <div style={{...linkStyles, textAlign: "center", marginTop: "10px"}}
+        </a>
+        <br />
+        <a style={{...linkStyles}}
           onClick={this.exitNarrativeMode}
         >
           Leave the narrative & explore the data yourself
-        </div>
-      </div>
+        </a>
+      </EndOfNarrative>
     ));
     return ret;
   }
diff --git a/src/components/narrative/styles.js b/src/components/narrative/styles.js
index 7fe7d83dd..e21786494 100644
--- a/src/components/narrative/styles.js
+++ b/src/components/narrative/styles.js
@@ -161,6 +161,13 @@ const baseBannerStyles = css`
   text-align: center;
 `;
 
+export const EndOfNarrative = styled.div`
+  text-align: center;
+  display: grid;
+  grid-template-rows: 1fr;
+  grid-row-gap: 10px;
+`;
+
 export const MobileBannerTop = styled.div`
   ${baseBannerStyles}
   top: 0;