From ca03f5060244f3e7f02f9fa06d9e1770571bf9d4 Mon Sep 17 00:00:00 2001
From: Ian MacFarland <macfarlandian@users.noreply.github.com>
Date: Mon, 11 Jan 2021 10:44:19 -0800
Subject: [PATCH] Narrative pages with animated transitions (#288)

---
 spotlight-client/.eslintrc.json               |   4 +
 spotlight-client/package.json                 |   6 +
 spotlight-client/src/App.test.tsx             |  55 +----
 spotlight-client/src/App.tsx                  |  22 +-
 .../src/GlobalStyles/GlobalStyles.tsx         |   4 +
 .../src/PageExplore/PageExplore.tsx           |  59 -----
 .../src/PageNarrative/PageNarrative.tsx       |  12 +-
 .../src/SiteNavigation/SiteNavigation.tsx     |  21 +-
 .../src/SystemNarrativePage/Section.tsx       |  89 ++++++++
 .../SystemNarrativePage/SectionNavigation.tsx | 170 +++++++++++++++
 .../SystemNarrativePage.test.tsx              | 100 +++++++++
 .../SystemNarrativePage.tsx                   | 201 ++++++++++++++++++
 .../__fixtures__/contentSource.ts             |  86 ++++++++
 .../src/SystemNarrativePage/constants.ts      |  19 ++
 .../index.ts                                  |   2 +-
 .../PageMetric.tsx => UiLibrary/Chevron.tsx}  |  47 ++--
 spotlight-client/src/UiLibrary/colors.ts      |   2 +
 spotlight-client/src/UiLibrary/index.ts       |   2 +
 spotlight-client/src/UiLibrary/typefaces.ts   |   1 +
 .../index.ts => UiLibrary/zIndex.ts}          |   6 +-
 spotlight-client/src/constants.ts             |   4 +-
 .../src/contentModels/SystemNarrative.ts      |  12 +-
 spotlight-client/src/index.tsx                |   1 +
 .../src/routerUtils/getUrlForResource.ts      |  13 +-
 .../src/routerUtils/normalizeRouteParams.ts   |  18 +-
 spotlight-client/src/routerUtils/types.ts     |   9 +-
 spotlight-client/src/setupTests.ts            |   1 +
 .../src/{testUtils.ts => testUtils.tsx}       |  30 ++-
 .../src/withRouteSync/withRouteSync.tsx       |   1 -
 yarn.lock                                     | 115 +++++++++-
 30 files changed, 893 insertions(+), 219 deletions(-)
 delete mode 100644 spotlight-client/src/PageExplore/PageExplore.tsx
 create mode 100644 spotlight-client/src/SystemNarrativePage/Section.tsx
 create mode 100644 spotlight-client/src/SystemNarrativePage/SectionNavigation.tsx
 create mode 100644 spotlight-client/src/SystemNarrativePage/SystemNarrativePage.test.tsx
 create mode 100644 spotlight-client/src/SystemNarrativePage/SystemNarrativePage.tsx
 create mode 100644 spotlight-client/src/SystemNarrativePage/__fixtures__/contentSource.ts
 create mode 100644 spotlight-client/src/SystemNarrativePage/constants.ts
 rename spotlight-client/src/{PageExplore => SystemNarrativePage}/index.ts (94%)
 rename spotlight-client/src/{PageMetric/PageMetric.tsx => UiLibrary/Chevron.tsx} (50%)
 rename spotlight-client/src/{PageMetric/index.ts => UiLibrary/zIndex.ts} (91%)
 rename spotlight-client/src/{testUtils.ts => testUtils.tsx} (64%)

diff --git a/spotlight-client/.eslintrc.json b/spotlight-client/.eslintrc.json
index e637666e..4734c370 100644
--- a/spotlight-client/.eslintrc.json
+++ b/spotlight-client/.eslintrc.json
@@ -50,6 +50,10 @@
           {
             "name": "styled-components",
             "message": "Please import from styled-components/macro."
+          },
+          {
+            "name": "react-spring",
+            "message": "For IE 11 support, please import from react-spring/web.cjs"
           }
         ],
         "patterns": ["!styled-components/macro"]
diff --git a/spotlight-client/package.json b/spotlight-client/package.json
index 1a60da5f..022bf0ee 100644
--- a/spotlight-client/package.json
+++ b/spotlight-client/package.json
@@ -16,6 +16,7 @@
   "dependencies": {
     "@auth0/auth0-spa-js": "^1.13.1",
     "@reach/router": "^1.3.4",
+    "@types/d3-format": "^2.0.0",
     "@types/qs": "^6.9.5",
     "@types/reach__router": "^1.3.6",
     "@types/react": "^16.9.0",
@@ -23,6 +24,9 @@
     "@types/styled-components": "^5.1.5",
     "assert-never": "^1.2.1",
     "change-case": "^4.1.2",
+    "d3-format": "^2.0.0",
+    "html-react-parser": "^1.1.1",
+    "intersection-observer": "^0.12.0",
     "jest-fetch-mock": "^3.0.3",
     "mobx": "^6.0.4",
     "mobx-react-lite": "^3.0.1",
@@ -34,8 +38,10 @@
     "react-dom": "^16.13.1",
     "react-error-boundary": "^3.0.2",
     "react-helmet-async": "^1.0.7",
+    "react-intersection-observer": "^8.31.0",
     "react-is": "^16.13.1",
     "react-scripts": "3.4.3",
+    "react-spring": "^8.0.27",
     "styled-components": "^5.2.1",
     "styled-reset": "^4.3.3",
     "typescript": "^4.0.0",
diff --git a/spotlight-client/src/App.test.tsx b/spotlight-client/src/App.test.tsx
index 70d48b7a..0052d1b0 100644
--- a/spotlight-client/src/App.test.tsx
+++ b/spotlight-client/src/App.test.tsx
@@ -15,14 +15,8 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 // =============================================================================
 
-import {
-  createHistory,
-  createMemorySource,
-  LocationProvider,
-} from "@reach/router";
 import {
   act,
-  render,
   screen,
   ByRoleMatcher,
   ByRoleOptions,
@@ -30,23 +24,8 @@ import {
   fireEvent,
   waitFor,
 } from "@testing-library/react";
-import React from "react";
-import App from "./App";
 import testContent from "./contentApi/sources/us_nd";
-
-function renderNavigableApp({ route = "/" } = {}) {
-  const history = createHistory(createMemorySource(route));
-
-  return {
-    ...render(
-      <LocationProvider history={history}>
-        <App />
-      </LocationProvider>
-    ),
-    // tests can use history object to simulate navigation in a browser
-    history,
-  };
-}
+import { renderNavigableApp } from "./testUtils";
 
 describe("navigation", () => {
   /**
@@ -90,28 +69,6 @@ describe("navigation", () => {
     return verifyWithNavigation({ targetPath, lookupArgs });
   });
 
-  test("explore page", () => {
-    expect.hasAssertions();
-    const targetPath = "/us-nd/explore";
-    const lookupArgs = ["heading", { name: "Explore Data", level: 1 }] as const;
-
-    return verifyWithNavigation({ targetPath, lookupArgs });
-  });
-
-  test("single metric page", () => {
-    expect.hasAssertions();
-    const targetPath = "/us-nd/explore/prison-population-current";
-    const lookupArgs = [
-      "heading",
-      {
-        name: testContent.metrics.PrisonPopulationCurrent?.name,
-        level: 1,
-      },
-    ] as const;
-
-    return verifyWithNavigation({ targetPath, lookupArgs });
-  });
-
   test("narratives page", () => {
     expect.hasAssertions();
     const targetPath = "/us-nd/collections";
@@ -153,24 +110,14 @@ describe("navigation", () => {
     await act(() => navigate("/us-nd"));
     const homeLink = inNav.getByRole("link", { name: "Spotlight" });
     const tenantLink = inNav.getByRole("link", { name: "North Dakota" });
-    const portalLink = inNav.getByRole("link", { name: dataPortalLabel });
     const narrativesLink = inNav.getByRole("link", { name: narrativesLabel });
 
     const verifyNavLinks = () => {
       expect(homeLink).toBeInTheDocument();
       expect(tenantLink).toBeInTheDocument();
-      expect(portalLink).toBeInTheDocument();
       expect(narrativesLink).toBeInTheDocument();
     };
 
-    fireEvent.click(portalLink);
-    await waitFor(() =>
-      expect(
-        screen.getByRole("heading", { name: "Explore Data", level: 1 })
-      ).toBeInTheDocument()
-    );
-    verifyNavLinks();
-
     fireEvent.click(narrativesLink);
     await waitFor(() =>
       expect(
diff --git a/spotlight-client/src/App.tsx b/spotlight-client/src/App.tsx
index 04b94182..8654e644 100644
--- a/spotlight-client/src/App.tsx
+++ b/spotlight-client/src/App.tsx
@@ -16,18 +16,19 @@
 // =============================================================================
 
 import { RouteComponentProps, Router } from "@reach/router";
+import { rem } from "polished";
 import React from "react";
 import { HelmetProvider } from "react-helmet-async";
+import styled from "styled-components/macro";
 import AuthWall from "./AuthWall";
+import { NAV_BAR_HEIGHT } from "./constants";
 import GlobalStyles from "./GlobalStyles";
-import PageExplore from "./PageExplore";
 import PageHome from "./PageHome";
-import PageMetric from "./PageMetric";
 import PageNarrative from "./PageNarrative";
 import PageNarrativeList from "./PageNarrativeList";
 import PageNotFound from "./PageNotFound";
 import PageTenant from "./PageTenant";
-import { DataPortalSlug, NarrativesSlug } from "./routerUtils/types";
+import { NarrativesSlug } from "./routerUtils/types";
 import SiteNavigation from "./SiteNavigation";
 import StoreProvider from "./StoreProvider";
 
@@ -38,6 +39,10 @@ const PassThroughPage: React.FC<RouteComponentProps> = ({ children }) => (
   <>{children}</>
 );
 
+const Main = styled.div.attrs((props) => ({ role: "main" }))`
+  margin-top: ${rem(NAV_BAR_HEIGHT)};
+`;
+
 const App: React.FC = () => {
   return (
     <HelmetProvider>
@@ -45,7 +50,7 @@ const App: React.FC = () => {
         <GlobalStyles />
         <AuthWall>
           <SiteNavigation />
-          <div role="main">
+          <Main>
             <Router>
               {/*
                 NOTE: every leaf route component in this router should be wrapped
@@ -54,20 +59,15 @@ const App: React.FC = () => {
               <PageHome path="/" />
               <PassThroughPage path="/:tenantId">
                 <PageTenant path="/" />
-                <PassThroughPage path={`/${DataPortalSlug}`}>
-                  <PageExplore path="/" />
-                  <PageMetric path="/:metricTypeId" />
-                  <PageNotFound default />
-                </PassThroughPage>
                 <PassThroughPage path={`/${NarrativesSlug}`}>
                   <PageNarrativeList path="/" />
-                  <PageNarrative path="/:narrativeTypeId" />
+                  <PageNarrative path="/:narrativeTypeId/*sectionNumber" />
                 </PassThroughPage>
                 <PageNotFound default />
               </PassThroughPage>
               <PageNotFound default />
             </Router>
-          </div>
+          </Main>
         </AuthWall>
       </StoreProvider>
     </HelmetProvider>
diff --git a/spotlight-client/src/GlobalStyles/GlobalStyles.tsx b/spotlight-client/src/GlobalStyles/GlobalStyles.tsx
index f6ee6834..5f5fefde 100644
--- a/spotlight-client/src/GlobalStyles/GlobalStyles.tsx
+++ b/spotlight-client/src/GlobalStyles/GlobalStyles.tsx
@@ -51,6 +51,10 @@ const GlobalStyles: React.FC = () => {
           href="https://fonts.googleapis.com/css2?family=Libre+Franklin&display=swap"
           rel="stylesheet"
         />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap"
+          rel="stylesheet"
+        />
       </Helmet>
       <BaseStyles />
     </>
diff --git a/spotlight-client/src/PageExplore/PageExplore.tsx b/spotlight-client/src/PageExplore/PageExplore.tsx
deleted file mode 100644
index aff9ecb9..00000000
--- a/spotlight-client/src/PageExplore/PageExplore.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-// Recidiviz - a data platform for criminal justice reform
-// Copyright (C) 2020 Recidiviz, Inc.
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU General Public License for more details.
-//
-// You should have received a copy of the GNU General Public License
-// along with this program.  If not, see <https://www.gnu.org/licenses/>.
-// =============================================================================
-
-import { Link, RouteComponentProps } from "@reach/router";
-import { observer } from "mobx-react-lite";
-import React from "react";
-import { MetricTypeIdList } from "../contentApi/types";
-import { useDataStore } from "../StoreProvider";
-import withRouteSync from "../withRouteSync";
-import getUrlForResource from "../routerUtils/getUrlForResource";
-
-const PageExplore: React.FC<RouteComponentProps> = () => {
-  const { tenant } = useDataStore();
-
-  return (
-    <article>
-      <h1>Explore Data</h1>
-      {/* FYI these are just helpful placeholders */}
-      {!tenant && <div>Loading …</div>}
-      {tenant && (
-        <ul>
-          {MetricTypeIdList.map((metricTypeId) => {
-            const metric = tenant.metrics[metricTypeId];
-            return (
-              metric && (
-                <li key={metricTypeId}>
-                  <Link
-                    to={getUrlForResource({
-                      page: "metric",
-                      params: { tenantId: tenant.id, metricTypeId },
-                    })}
-                  >
-                    {metric.name}
-                  </Link>
-                </li>
-              )
-            );
-          })}
-        </ul>
-      )}
-    </article>
-  );
-};
-
-export default withRouteSync(observer(PageExplore));
diff --git a/spotlight-client/src/PageNarrative/PageNarrative.tsx b/spotlight-client/src/PageNarrative/PageNarrative.tsx
index 26cd6a61..c9efeb69 100644
--- a/spotlight-client/src/PageNarrative/PageNarrative.tsx
+++ b/spotlight-client/src/PageNarrative/PageNarrative.tsx
@@ -20,6 +20,7 @@ import { observer } from "mobx-react-lite";
 import React from "react";
 import { SystemNarrativeTypeId } from "../contentApi/types";
 import { useDataStore } from "../StoreProvider";
+import SystemNarrativePage from "../SystemNarrativePage";
 import withRouteSync from "../withRouteSync";
 
 type PageNarrativeProps = RouteComponentProps & {
@@ -39,12 +40,11 @@ const PageNarrative: React.FC<PageNarrativeProps> = ({ narrativeTypeId }) => {
   // tenant may be briefly undefined on initial page load
   const narrative = tenant?.systemNarratives[narrativeTypeId];
 
-  return (
-    <article>
-      <h1>{narrative?.title}</h1>
-      <p>{narrative?.introduction}</p>
-    </article>
-  );
+  if (narrative) {
+    return <SystemNarrativePage narrative={narrative} />;
+  }
+
+  return null;
 };
 
 export default withRouteSync(observer(PageNarrative));
diff --git a/spotlight-client/src/SiteNavigation/SiteNavigation.tsx b/spotlight-client/src/SiteNavigation/SiteNavigation.tsx
index 6af15610..be93aa6d 100644
--- a/spotlight-client/src/SiteNavigation/SiteNavigation.tsx
+++ b/spotlight-client/src/SiteNavigation/SiteNavigation.tsx
@@ -21,18 +21,24 @@ import { rem } from "polished";
 import React from "react";
 import styled from "styled-components/macro";
 import logoPath from "../assets/spotlight-logo.svg";
-import { colors } from "../UiLibrary";
+import { colors, zIndex } from "../UiLibrary";
 import getUrlForResource from "../routerUtils/getUrlForResource";
 import { useDataStore } from "../StoreProvider";
+import { NAV_BAR_HEIGHT } from "../constants";
 
 const NavContainer = styled.nav`
   align-items: stretch;
+  background: ${colors.background};
   border-bottom: 1px solid ${colors.rule};
   display: flex;
-  height: ${rem(80)};
+  height: ${rem(NAV_BAR_HEIGHT)};
   justify-content: space-between;
+  left: 0;
   padding: 0 ${rem(8)};
+  position: fixed;
   width: 100%;
+  top: 0;
+  z-index: ${zIndex.navBar};
 
   .NavLink {
     align-items: center;
@@ -107,17 +113,6 @@ const SiteNavigation: React.FC = () => {
       </NavGroup>
       {tenant && (
         <NavGroup>
-          <NavGroupItem>
-            <Link
-              getProps={getNavLinkProps({ matchPartial: true })}
-              to={getUrlForResource({
-                page: "data portal",
-                params: { tenantId: tenant.id },
-              })}
-            >
-              Explore
-            </Link>
-          </NavGroupItem>
           <NavGroupItem>
             <Link
               getProps={getNavLinkProps({ matchPartial: true })}
diff --git a/spotlight-client/src/SystemNarrativePage/Section.tsx b/spotlight-client/src/SystemNarrativePage/Section.tsx
new file mode 100644
index 00000000..0cd1205d
--- /dev/null
+++ b/spotlight-client/src/SystemNarrativePage/Section.tsx
@@ -0,0 +1,89 @@
+// Recidiviz - a data platform for criminal justice reform
+// Copyright (C) 2021 Recidiviz, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+// =============================================================================
+
+import HTMLReactParser from "html-react-parser";
+import { rem } from "polished";
+import React from "react";
+import styled from "styled-components/macro";
+import { NAV_BAR_HEIGHT } from "../constants";
+import { SystemNarrativeSection } from "../contentModels/SystemNarrative";
+import { AnyMetric } from "../contentModels/types";
+import { colors, typefaces } from "../UiLibrary";
+import { X_PADDING } from "./constants";
+
+const COPY_WIDTH = 408;
+
+const Container = styled.section`
+  border-bottom: 1px solid ${colors.rule};
+  display: flex;
+  min-height: 100vh;
+  padding-right: ${rem(X_PADDING)};
+`;
+
+const SectionCopy = styled.div`
+  display: flex;
+  flex: 0 0 auto;
+  flex-direction: column;
+  height: calc(100vh - ${rem(NAV_BAR_HEIGHT)});
+  justify-content: center;
+  position: sticky;
+  top: ${rem(NAV_BAR_HEIGHT)};
+  width: ${rem(COPY_WIDTH)};
+`;
+
+const SectionTitle = styled.h2`
+  font-family: ${typefaces.display};
+  font-size: ${rem(24)};
+  line-height: 1.25;
+  letter-spacing: -0.04em;
+  margin-bottom: ${rem(24)};
+`;
+
+const SectionBody = styled.div`
+  line-height: 1.67;
+`;
+
+const VizContainer = styled.div`
+  margin-left: ${rem(176)};
+  height: 125vh;
+  flex: 1 1 auto;
+  padding: ${rem(240)} 0;
+`;
+
+const SectionViz: React.FC<{ metric: AnyMetric }> = ({ metric }) => {
+  return (
+    <VizContainer>
+      <h3>Placeholder for {metric.name}</h3>
+    </VizContainer>
+  );
+};
+
+const Section: React.FC<{ section: SystemNarrativeSection }> = ({
+  section,
+}) => {
+  return (
+    <Container>
+      <SectionCopy>
+        <SectionTitle>{section.title}</SectionTitle>
+        <SectionBody>{HTMLReactParser(section.body)}</SectionBody>
+      </SectionCopy>
+      <SectionViz metric={section.metric} />
+    </Container>
+  );
+};
+
+export default Section;
diff --git a/spotlight-client/src/SystemNarrativePage/SectionNavigation.tsx b/spotlight-client/src/SystemNarrativePage/SectionNavigation.tsx
new file mode 100644
index 00000000..4383ed06
--- /dev/null
+++ b/spotlight-client/src/SystemNarrativePage/SectionNavigation.tsx
@@ -0,0 +1,170 @@
+// Recidiviz - a data platform for criminal justice reform
+// Copyright (C) 2021 Recidiviz, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+// =============================================================================
+
+import { Link, useParams } from "@reach/router";
+import { format } from "d3-format";
+import { rem } from "polished";
+import React, { useEffect } from "react";
+import { animated, useSpring } from "react-spring/web.cjs";
+import styled from "styled-components/macro";
+import { NAV_BAR_HEIGHT } from "../constants";
+import getUrlForResource from "../routerUtils/getUrlForResource";
+import normalizeRouteParams from "../routerUtils/normalizeRouteParams";
+import { colors, Chevron } from "../UiLibrary";
+
+const formatPageNum = format("02");
+
+const PROGRESS_BAR_HEIGHT = 104;
+
+const SectionNav = styled.nav`
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - ${rem(NAV_BAR_HEIGHT)});
+  justify-content: center;
+  left: ${rem(32)};
+  position: fixed;
+  top: ${rem(NAV_BAR_HEIGHT)};
+`;
+
+const PageNumber = styled.div`
+  font-size: ${rem(13)};
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  line-height: ${rem(16)};
+`;
+
+const PageNumberFaded = styled(PageNumber)`
+  opacity: 0.3;
+`;
+
+const PageProgressContainer = styled.div.attrs(() => ({
+  "aria-hidden": true,
+}))`
+  margin: ${rem(24)} 0;
+  position: relative;
+`;
+
+const PageProgressTrack = styled.div`
+  background: ${colors.rule};
+  height: ${rem(PROGRESS_BAR_HEIGHT)};
+  width: ${rem(2)};
+`;
+
+const PageProgressThumb = styled(animated.div)`
+  background: ${colors.accent};
+  left: 0;
+  position: absolute;
+  width: ${rem(2)};
+`;
+
+const PageProgressBar: React.FC<{
+  currentPage: number;
+  totalPages: number;
+}> = ({ currentPage, totalPages }) => {
+  const thumbSize = PROGRESS_BAR_HEIGHT / totalPages;
+  // pages are 1-indexed for human readability
+  const currentIndex = currentPage - 1;
+
+  const [thumbOffset, setThumbOffset] = useSpring(() => ({
+    top: currentIndex * thumbSize,
+  }));
+
+  useEffect(() => {
+    setThumbOffset({ top: currentIndex * thumbSize });
+  }, [currentIndex, setThumbOffset, thumbSize]);
+
+  return (
+    <PageProgressContainer>
+      <PageProgressTrack />
+      <PageProgressThumb style={{ height: rem(thumbSize), ...thumbOffset }} />
+    </PageProgressContainer>
+  );
+};
+
+type NavigationProps = {
+  activeSection: number;
+  setActiveSection: (section: number) => void;
+  totalPages: number;
+};
+
+const SectionNavigation: React.FC<NavigationProps> = ({
+  activeSection,
+  setActiveSection,
+  totalPages,
+}) => {
+  const { tenantId, narrativeTypeId } = normalizeRouteParams(
+    useParams()
+    // these keys should always be present on this page
+  ) as Required<
+    Pick<
+      ReturnType<typeof normalizeRouteParams>,
+      "tenantId" | "narrativeTypeId"
+    >
+  >;
+
+  const disablePrev = activeSection === 1;
+  const disableNext = activeSection === totalPages;
+
+  // base is the current page, minus the section number
+  const urlBase = getUrlForResource({
+    page: "narrative",
+    params: { tenantId, narrativeTypeId },
+  });
+
+  return (
+    <SectionNav aria-label="page sections">
+      <PageNumber>{formatPageNum(activeSection)}</PageNumber>
+      <PageNumberFaded>{formatPageNum(totalPages)}</PageNumberFaded>
+      <PageProgressBar currentPage={activeSection} totalPages={totalPages} />
+      {disablePrev ? (
+        <div>
+          <Chevron direction="up" faded />
+        </div>
+      ) : (
+        <Link
+          // the to props on these links is mainly for accessibility purposes, so they
+          // look like normal links. calling the setter is the critical step
+          to={`${urlBase}/${activeSection - 1}`}
+          onClick={() => {
+            setActiveSection(activeSection - 1);
+          }}
+          aria-label="previous section"
+        >
+          <Chevron direction="up" />
+        </Link>
+      )}
+      {disableNext ? (
+        <div>
+          <Chevron direction="down" faded />
+        </div>
+      ) : (
+        <Link
+          to={`${urlBase}/${activeSection + 1}`}
+          onClick={() => {
+            setActiveSection(activeSection + 1);
+          }}
+          aria-label="next section"
+        >
+          <Chevron direction="down" />
+        </Link>
+      )}
+    </SectionNav>
+  );
+};
+
+export default SectionNavigation;
diff --git a/spotlight-client/src/SystemNarrativePage/SystemNarrativePage.test.tsx b/spotlight-client/src/SystemNarrativePage/SystemNarrativePage.test.tsx
new file mode 100644
index 00000000..518b8453
--- /dev/null
+++ b/spotlight-client/src/SystemNarrativePage/SystemNarrativePage.test.tsx
@@ -0,0 +1,100 @@
+// Recidiviz - a data platform for criminal justice reform
+// Copyright (C) 2021 Recidiviz, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+// =============================================================================
+
+import { fireEvent, screen, within } from "@testing-library/react";
+import mockContentFixture from "./__fixtures__/contentSource";
+import { SystemNarrativeContent } from "../contentApi/types";
+import { renderNavigableApp } from "../testUtils";
+
+jest.mock("../contentApi/sources/us_nd", () => mockContentFixture);
+
+const narrativeContent = mockContentFixture.systemNarratives
+  .Parole as SystemNarrativeContent;
+
+test("renders all the sections", () => {
+  renderNavigableApp({ route: "/us_nd/collections/parole" });
+
+  expect(
+    screen.getByRole("heading", { name: narrativeContent.title, level: 1 })
+  ).toBeVisible();
+  expect(screen.getByText(narrativeContent.introduction)).toBeInTheDocument();
+
+  narrativeContent.sections.forEach((section) => {
+    expect(
+      screen.getByRole("heading", { name: section.title })
+    ).toBeInTheDocument();
+    expect(screen.getByText(section.body)).toBeInTheDocument();
+  });
+});
+
+test("navigation", () => {
+  const { history } = renderNavigableApp({
+    route: "/us-nd/collections/parole",
+  });
+
+  const nextLabel = "next section";
+  const prevLabel = "previous section";
+
+  const navRegion = screen.getByRole("navigation", { name: "page sections" });
+
+  const nextLink = screen.getByRole("link", { name: nextLabel });
+
+  // no previous on the first section
+  expect(
+    screen.queryByRole("link", { name: prevLabel })
+  ).not.toBeInTheDocument();
+  expect(nextLink).toBeInTheDocument();
+
+  expect(within(navRegion).getByText("01")).toBeInTheDocument();
+
+  // advance to section 2
+  fireEvent.click(nextLink);
+  expect(within(navRegion).getByText("02")).toBeInTheDocument();
+  expect(history.location.pathname).toBe("/us-nd/collections/parole/2");
+
+  const prevLink = screen.getByRole("link", { name: prevLabel });
+  expect(prevLink).toBeInTheDocument();
+
+  // advance to the last section
+  narrativeContent.sections.forEach(() => fireEvent.click(nextLink));
+
+  // both of the page numbers should be the same, e.g. 08/08
+  expect(
+    within(navRegion).getAllByText(`0${narrativeContent.sections.length + 1}`)
+      .length
+  ).toBe(2);
+  expect(history.location.pathname).toBe(
+    `/us-nd/collections/parole/${narrativeContent.sections.length + 1}`
+  );
+
+  // no next on the last section
+  expect(nextLink).not.toBeInTheDocument();
+
+  // JSDOM don't support layout features
+  // so we can't really test anything related to scroll position :(
+});
+
+test("renders link tags in copy", async () => {
+  // this fixture has links in the copy
+  renderNavigableApp({ route: "/us_nd/collections/sentencing" });
+
+  expect(screen.getByRole("link", { name: "intro link" })).toBeInTheDocument();
+
+  expect(
+    screen.getByRole("link", { name: "section copy link" })
+  ).toBeInTheDocument();
+});
diff --git a/spotlight-client/src/SystemNarrativePage/SystemNarrativePage.tsx b/spotlight-client/src/SystemNarrativePage/SystemNarrativePage.tsx
new file mode 100644
index 00000000..2439e45c
--- /dev/null
+++ b/spotlight-client/src/SystemNarrativePage/SystemNarrativePage.tsx
@@ -0,0 +1,201 @@
+// Recidiviz - a data platform for criminal justice reform
+// Copyright (C) 2021 Recidiviz, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+// =============================================================================
+
+import { navigate, useParams } from "@reach/router";
+import HTMLReactParser from "html-react-parser";
+import { rem } from "polished";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { InView } from "react-intersection-observer";
+import { useSpring } from "react-spring/web.cjs";
+import styled from "styled-components/macro";
+import { NAV_BAR_HEIGHT } from "../constants";
+import SystemNarrative from "../contentModels/SystemNarrative";
+import getUrlForResource from "../routerUtils/getUrlForResource";
+import normalizeRouteParams from "../routerUtils/normalizeRouteParams";
+import { colors, typefaces, Chevron } from "../UiLibrary";
+import { X_PADDING } from "./constants";
+import Section from "./Section";
+import SectionNavigation from "./SectionNavigation";
+
+const Container = styled.article`
+  padding-left: ${rem(X_PADDING)};
+`;
+
+const IntroContainer = styled.div`
+  padding-top: ${rem(160)};
+  padding-bottom: ${rem(172)};
+  padding-right: ${rem(X_PADDING)};
+  border-bottom: 1px solid ${colors.rule};
+`;
+
+const Title = styled.h1`
+  font-family: ${typefaces.display};
+  font-size: ${rem(88)};
+  letter-spacing: -0.05em;
+  line-height: 1;
+  margin-bottom: ${rem(64)};
+`;
+
+const IntroCopy = styled.p`
+  font-size: ${rem(48)};
+  line-height: 1.5;
+  letter-spacing: -0.025em;
+`;
+
+const ScrollIndicator = styled.div`
+  align-items: center;
+  color: ${colors.caption};
+  display: flex;
+  flex-direction: column;
+  font-size: ${rem(12)};
+  font-weight: 500;
+  letter-spacing: 0.05em;
+  margin-top: ${rem(144)};
+
+  span {
+    margin-bottom: ${rem(16)};
+  }
+`;
+
+const SectionsContainer = styled.div``;
+
+const SystemNarrativePage: React.FC<{
+  narrative: SystemNarrative;
+}> = ({ narrative }) => {
+  const routeParams = useParams();
+  const sectionsContainerRef = useRef() as React.MutableRefObject<
+    HTMLDivElement
+  >;
+
+  // automated scrolling is a special case of section visibility;
+  // this flag lets us suspend in-page navigation actions while it is in progress
+  const [isScrolling, setIsScrolling] = useState(false);
+  const [activeSection, directlySetActiveSection] = useState(
+    // make sure we consume the section number in the URL, if any, on first mount
+    Number(routeParams.sectionNumber) || 1
+  );
+  // wrap the section state setter in a function that respects the flag
+  const setActiveSection = useCallback(
+    (sectionNumber: number) => {
+      if (!isScrolling) {
+        directlySetActiveSection(sectionNumber);
+      }
+    },
+    [isScrolling]
+  );
+  const [, setScrollSpring] = useSpring(() => ({
+    onFrame: (props: { top: number }) => window.scrollTo(0, props.top),
+    // set the flag while animation is in progress
+    onRest: () => setIsScrolling(false),
+    onStart: () => setIsScrolling(true),
+    to: { top: window.pageYOffset },
+  }));
+
+  const { tenantId, narrativeTypeId } = normalizeRouteParams(routeParams);
+  // updating the active section has two key side effects:
+  // 1. smoothly scrolling to the active session
+  // 2. updating the page URL so the section can be linked to directly
+  useEffect(() => {
+    let scrollDestination;
+    // scroll to the corresponding section by calculating its offset
+    const desiredSection = sectionsContainerRef.current.querySelector(
+      `#section${activeSection}`
+    );
+    if (desiredSection) {
+      scrollDestination =
+        window.pageYOffset + desiredSection.getBoundingClientRect().top;
+    }
+
+    // in practice this should always be defined, this is just type safety
+    if (scrollDestination !== undefined) {
+      setScrollSpring({
+        to: { top: scrollDestination - NAV_BAR_HEIGHT },
+        from: { top: window.pageYOffset },
+        reset: true,
+      });
+
+      // these should always be defined on this page; more type safety
+      if (tenantId && narrativeTypeId) {
+        navigate(
+          `${getUrlForResource({
+            page: "narrative",
+            params: { tenantId, narrativeTypeId },
+          })}/${activeSection}`
+        );
+      }
+    }
+  }, [
+    activeSection,
+    narrativeTypeId,
+    sectionsContainerRef,
+    setScrollSpring,
+    tenantId,
+  ]);
+
+  return (
+    <Container>
+      <SectionNavigation
+        activeSection={activeSection}
+        // pagination UI should not respect the scrolling flag;
+        // in fact it should override it, otherwise the buttons
+        // will stop working while the animation is in progress
+        setActiveSection={directlySetActiveSection}
+        totalPages={narrative.sections.length + 1}
+      />
+      <SectionsContainer ref={sectionsContainerRef}>
+        <InView
+          as="div"
+          id="section1"
+          threshold={0.3}
+          onChange={(inView) => {
+            if (inView) setActiveSection(1);
+          }}
+        >
+          <IntroContainer>
+            <Title>{narrative.title}</Title>
+            <IntroCopy>{HTMLReactParser(narrative.introduction)}</IntroCopy>
+            <ScrollIndicator>
+              <span>SCROLL</span>
+              <Chevron direction="down" faded />
+              <Chevron direction="down" />
+            </ScrollIndicator>
+          </IntroContainer>
+        </InView>
+
+        {narrative.sections.map((section, index) => {
+          // the first viz section is "page 2"
+          const pageId = index + 2;
+          return (
+            <InView
+              as="div"
+              id={`section${pageId}`}
+              key={section.title}
+              threshold={0.3}
+              onChange={(inView) => {
+                if (inView) setActiveSection(pageId);
+              }}
+            >
+              <Section section={section} />
+            </InView>
+          );
+        })}
+      </SectionsContainer>
+    </Container>
+  );
+};
+
+export default SystemNarrativePage;
diff --git a/spotlight-client/src/SystemNarrativePage/__fixtures__/contentSource.ts b/spotlight-client/src/SystemNarrativePage/__fixtures__/contentSource.ts
new file mode 100644
index 00000000..f64371ba
--- /dev/null
+++ b/spotlight-client/src/SystemNarrativePage/__fixtures__/contentSource.ts
@@ -0,0 +1,86 @@
+// Recidiviz - a data platform for criminal justice reform
+// Copyright (C) 2021 Recidiviz, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+// =============================================================================
+
+import { TenantContent } from "../../contentApi/types";
+
+const content: TenantContent = {
+  name: "Test Tenant",
+  description: "test tenant description",
+  collections: {},
+  metrics: {
+    SentencePopulationCurrent: {
+      name: "test SentencePopulationCurrent name",
+      description: "test sentence population current description",
+      methodology: "test sentence population current methodology",
+      mapCaption: "test sentence population current map caption",
+    },
+    SentenceTypesCurrent: {
+      name: "test SentenceTypesCurrent name",
+      description: "test SentenceTypesCurrent description",
+      methodology: "test SentenceTypesCurrent methodology",
+    },
+    ParolePopulationCurrent: {
+      name: "test ParolePopulationCurrent name",
+      description: "test ParolePopulationCurrent description",
+      methodology: "test ParolePopulationCurrent methodology",
+      mapCaption: "test ParolePopulationCurrent map caption",
+    },
+    ParolePopulationHistorical: {
+      name: "test ParolePopulationHistorical name",
+      description: "test ParolePopulationHistorical description",
+      methodology: "test ParolePopulationHistorical methodology",
+    },
+  },
+  systemNarratives: {
+    Parole: {
+      title: "test parole narrative",
+      introduction: "test parole introduction",
+      sections: [
+        {
+          title: "test first parole section",
+          body: "test parole section copy",
+          metricTypeId: "ParolePopulationCurrent",
+        },
+        {
+          title: "test second parole section",
+          body: "test second parole section copy",
+          metricTypeId: "ParolePopulationHistorical",
+        },
+      ],
+    },
+    Sentencing: {
+      title: "test sentencing narrative",
+      introduction:
+        'test sentencing introduction <a href="https://example.com">intro link</a>',
+      sections: [
+        {
+          title: "test first sentencing section",
+          body:
+            'test sentencing section copy <a href="https://example.com">section copy link</a>',
+          metricTypeId: "SentencePopulationCurrent",
+        },
+        {
+          title: "test second sentencing section",
+          body: "test second sentencing section copy",
+          metricTypeId: "SentenceTypesCurrent",
+        },
+      ],
+    },
+  },
+};
+
+export default content;
diff --git a/spotlight-client/src/SystemNarrativePage/constants.ts b/spotlight-client/src/SystemNarrativePage/constants.ts
new file mode 100644
index 00000000..53868cea
--- /dev/null
+++ b/spotlight-client/src/SystemNarrativePage/constants.ts
@@ -0,0 +1,19 @@
+// Recidiviz - a data platform for criminal justice reform
+// Copyright (C) 2021 Recidiviz, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+// =============================================================================
+
+// eslint-disable-next-line import/prefer-default-export
+export const X_PADDING = 176;
diff --git a/spotlight-client/src/PageExplore/index.ts b/spotlight-client/src/SystemNarrativePage/index.ts
similarity index 94%
rename from spotlight-client/src/PageExplore/index.ts
rename to spotlight-client/src/SystemNarrativePage/index.ts
index ea5b3825..543d943e 100644
--- a/spotlight-client/src/PageExplore/index.ts
+++ b/spotlight-client/src/SystemNarrativePage/index.ts
@@ -15,4 +15,4 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 // =============================================================================
 
-export { default } from "./PageExplore";
+export { default } from "./SystemNarrativePage";
diff --git a/spotlight-client/src/PageMetric/PageMetric.tsx b/spotlight-client/src/UiLibrary/Chevron.tsx
similarity index 50%
rename from spotlight-client/src/PageMetric/PageMetric.tsx
rename to spotlight-client/src/UiLibrary/Chevron.tsx
index 48f4a86f..ca406a63 100644
--- a/spotlight-client/src/PageMetric/PageMetric.tsx
+++ b/spotlight-client/src/UiLibrary/Chevron.tsx
@@ -15,33 +15,40 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 // =============================================================================
 
-import { RouteComponentProps } from "@reach/router";
-import { observer } from "mobx-react-lite";
 import React from "react";
-import { MetricTypeId } from "../contentApi/types";
-import { useDataStore } from "../StoreProvider";
-import withRouteSync from "../withRouteSync";
+import { colors } from ".";
 
-type PageMetricProps = RouteComponentProps & { metricTypeId?: MetricTypeId };
+type ArrowProps = {
+  direction: "up" | "down";
+  faded?: boolean;
+};
 
-const PageMetric: React.FC<PageMetricProps> = ({ metricTypeId }) => {
-  const { tenant } = useDataStore();
+const Chevron: React.FC<ArrowProps> = ({ direction, faded }) => {
+  let transform;
 
-  // if this component is used properly as a route component,
-  // this should never be true;
-  // if it is, something has gone very wrong
-  if (!metricTypeId) {
-    throw new Error("missing metricTypeId");
+  if (direction === "up") {
+    transform = "rotate(180 7 3.5)";
   }
 
-  // tenant may be briefly undefined on initial page load
-  const metric = tenant?.metrics[metricTypeId];
-
   return (
-    <article>
-      <h1>{metric?.name}</h1>
-    </article>
+    <svg
+      aria-hidden
+      width="14"
+      height="7"
+      viewBox="0 0 14 7"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M1 0.5L7 6.5L13 0.5"
+        stroke={colors.text}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeOpacity={faded ? 0.3 : 1}
+        transform={transform}
+      />
+    </svg>
   );
 };
 
-export default withRouteSync(observer(PageMetric));
+export default Chevron;
diff --git a/spotlight-client/src/UiLibrary/colors.ts b/spotlight-client/src/UiLibrary/colors.ts
index bf09aad9..7febd3a4 100644
--- a/spotlight-client/src/UiLibrary/colors.ts
+++ b/spotlight-client/src/UiLibrary/colors.ts
@@ -19,9 +19,11 @@ const gray = "#D6DCDC";
 const pine = "#00413E";
 const pineBright = "#25B894";
 const white = "#FAFAFA";
+const pinePale = "#7D9897";
 
 export default {
   accent: pineBright,
+  caption: pinePale,
   rule: gray,
   background: white,
   text: pine,
diff --git a/spotlight-client/src/UiLibrary/index.ts b/spotlight-client/src/UiLibrary/index.ts
index 99571676..0a8558db 100644
--- a/spotlight-client/src/UiLibrary/index.ts
+++ b/spotlight-client/src/UiLibrary/index.ts
@@ -17,3 +17,5 @@
 
 export { default as colors } from "./colors";
 export { default as typefaces } from "./typefaces";
+export { default as zIndex } from "./zIndex";
+export { default as Chevron } from "./Chevron";
diff --git a/spotlight-client/src/UiLibrary/typefaces.ts b/spotlight-client/src/UiLibrary/typefaces.ts
index 029354f7..cec455ec 100644
--- a/spotlight-client/src/UiLibrary/typefaces.ts
+++ b/spotlight-client/src/UiLibrary/typefaces.ts
@@ -17,4 +17,5 @@
 
 export default {
   body: "'Libre Franklin', sans-serif",
+  display: "'Libre Baskerville', serif",
 };
diff --git a/spotlight-client/src/PageMetric/index.ts b/spotlight-client/src/UiLibrary/zIndex.ts
similarity index 91%
rename from spotlight-client/src/PageMetric/index.ts
rename to spotlight-client/src/UiLibrary/zIndex.ts
index 9667f03c..4e53b0e8 100644
--- a/spotlight-client/src/PageMetric/index.ts
+++ b/spotlight-client/src/UiLibrary/zIndex.ts
@@ -1,5 +1,5 @@
 // Recidiviz - a data platform for criminal justice reform
-// Copyright (C) 2020 Recidiviz, Inc.
+// Copyright (C) 2021 Recidiviz, Inc.
 //
 // This program is free software: you can redistribute it and/or modify
 // it under the terms of the GNU General Public License as published by
@@ -15,4 +15,6 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 // =============================================================================
 
-export { default } from "./PageMetric";
+export default {
+  navBar: 1,
+};
diff --git a/spotlight-client/src/constants.ts b/spotlight-client/src/constants.ts
index 39d06564..e3ef1d87 100644
--- a/spotlight-client/src/constants.ts
+++ b/spotlight-client/src/constants.ts
@@ -15,9 +15,9 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 // =============================================================================
 
-// expecting more exports in this file; re-enable when no longer necessary
-// eslint-disable-next-line import/prefer-default-export
 export const ERROR_MESSAGES = {
   auth0Configuration: "No Auth0 configuration found.",
   unauthorized: "You do not have permission to view this content.",
 };
+
+export const NAV_BAR_HEIGHT = 80;
diff --git a/spotlight-client/src/contentModels/SystemNarrative.ts b/spotlight-client/src/contentModels/SystemNarrative.ts
index 855b9523..56f1c494 100644
--- a/spotlight-client/src/contentModels/SystemNarrative.ts
+++ b/spotlight-client/src/contentModels/SystemNarrative.ts
@@ -18,12 +18,16 @@
 import { SystemNarrativeContent } from "../contentApi/types";
 import { AnyMetric, isAnyMetric, MetricMapping } from "./types";
 
-type Section = { title: string; body: string; metric: AnyMetric };
+export type SystemNarrativeSection = {
+  title: string;
+  body: string;
+  metric: AnyMetric;
+};
 
 type ConstructorArgs = {
   title: string;
   introduction: string;
-  sections: Section[];
+  sections: SystemNarrativeSection[];
 };
 
 export default class SystemNarrative {
@@ -31,7 +35,7 @@ export default class SystemNarrative {
 
   readonly introduction: string;
 
-  readonly sections: Section[];
+  readonly sections: SystemNarrativeSection[];
 
   constructor({ title, introduction, sections }: ConstructorArgs) {
     this.title = title;
@@ -47,7 +51,7 @@ export function createSystemNarrative({
   content: SystemNarrativeContent;
   allMetrics: MetricMapping;
 }): SystemNarrative {
-  const sections: Section[] = [];
+  const sections: SystemNarrativeSection[] = [];
   // building sections in a type-safe way: make sure the related metric
   // actually exists or else the section is omitted
   content.sections.forEach(({ title, body, metricTypeId }) => {
diff --git a/spotlight-client/src/index.tsx b/spotlight-client/src/index.tsx
index 4908ba96..22f9a79d 100644
--- a/spotlight-client/src/index.tsx
+++ b/spotlight-client/src/index.tsx
@@ -17,6 +17,7 @@
 
 import "react-app-polyfill/ie11";
 import "react-app-polyfill/stable";
+import "intersection-observer";
 
 import { configure } from "mobx";
 import React from "react";
diff --git a/spotlight-client/src/routerUtils/getUrlForResource.ts b/spotlight-client/src/routerUtils/getUrlForResource.ts
index af45ece5..085c5840 100644
--- a/spotlight-client/src/routerUtils/getUrlForResource.ts
+++ b/spotlight-client/src/routerUtils/getUrlForResource.ts
@@ -17,7 +17,7 @@
 
 import assertNever from "assert-never";
 import { paramCase } from "change-case";
-import { DataPortalSlug, NarrativesSlug, NormalizedRouteParams } from "./types";
+import { NarrativesSlug, NormalizedRouteParams } from "./types";
 
 function makeRouteParam(param: string) {
   return paramCase(param);
@@ -28,11 +28,6 @@ type RequiredParams = Required<NormalizedRouteParams>;
 type GetUrlOptions =
   | { page: "home" }
   | { page: "tenant"; params: Pick<RequiredParams, "tenantId"> }
-  | { page: "data portal"; params: Pick<RequiredParams, "tenantId"> }
-  | {
-      page: "metric";
-      params: Pick<RequiredParams, "tenantId" | "metricTypeId">;
-    }
   | { page: "narrative list"; params: Pick<RequiredParams, "tenantId"> }
   | {
       page: "narrative";
@@ -48,12 +43,6 @@ function getUrlForResource(opts: GetUrlOptions): string {
       return "/";
     case "tenant":
       return `/${makeRouteParam(opts.params.tenantId)}`;
-    case "data portal":
-      return `/${makeRouteParam(opts.params.tenantId)}/${DataPortalSlug}`;
-    case "metric":
-      return `/${makeRouteParam(
-        opts.params.tenantId
-      )}/${DataPortalSlug}/${makeRouteParam(opts.params.metricTypeId)}`;
     case "narrative list":
       return `/${makeRouteParam(opts.params.tenantId)}/${NarrativesSlug}`;
     case "narrative":
diff --git a/spotlight-client/src/routerUtils/normalizeRouteParams.ts b/spotlight-client/src/routerUtils/normalizeRouteParams.ts
index c74375e2..ba542137 100644
--- a/spotlight-client/src/routerUtils/normalizeRouteParams.ts
+++ b/spotlight-client/src/routerUtils/normalizeRouteParams.ts
@@ -17,11 +17,7 @@
 
 import { constantCase, pascalCase } from "change-case";
 import { ValuesType } from "utility-types";
-import {
-  isMetricTypeId,
-  isSystemNarrativeTypeId,
-  isTenantId,
-} from "../contentApi/types";
+import { isSystemNarrativeTypeId, isTenantId } from "../contentApi/types";
 import { NormalizedRouteParams, RouteParams } from "./types";
 
 /**
@@ -30,11 +26,10 @@ import { NormalizedRouteParams, RouteParams } from "./types";
 export default function normalizeRouteParams(
   rawParams: RouteParams
 ): NormalizedRouteParams {
-  const { tenantId, metricTypeId, narrativeTypeId } = rawParams;
+  const { tenantId, narrativeTypeId } = rawParams;
 
   return {
     tenantId: normalizeTenantId(tenantId),
-    metricTypeId: normalizeMetricTypeId(metricTypeId),
     narrativeTypeId: normalizeNarrativeTypeId(narrativeTypeId),
   };
 }
@@ -48,15 +43,6 @@ function normalizeTenantId(rawParam: ValuesType<RouteParams>) {
   return undefined;
 }
 
-function normalizeMetricTypeId(rawParam: ValuesType<RouteParams>) {
-  if (typeof rawParam === "string") {
-    const normalizedString = pascalCase(rawParam);
-    if (isMetricTypeId(normalizedString)) return normalizedString;
-    throw new Error(`unknown MetricTypeId: ${normalizedString}`);
-  }
-  return undefined;
-}
-
 function normalizeNarrativeTypeId(rawParam: ValuesType<RouteParams>) {
   if (typeof rawParam === "string") {
     const normalizedString = pascalCase(rawParam);
diff --git a/spotlight-client/src/routerUtils/types.ts b/spotlight-client/src/routerUtils/types.ts
index 2f025688..eb58d62c 100644
--- a/spotlight-client/src/routerUtils/types.ts
+++ b/spotlight-client/src/routerUtils/types.ts
@@ -15,24 +15,17 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 // =============================================================================
 
-import {
-  MetricTypeId,
-  SystemNarrativeTypeId,
-  TenantId,
-} from "../contentApi/types";
+import { SystemNarrativeTypeId, TenantId } from "../contentApi/types";
 
 export type RouteParams = {
   // these should match paths as defined in App.tsx
   tenantId?: string;
-  metricTypeId?: string;
   narrativeTypeId?: string;
 };
 
 export type NormalizedRouteParams = {
   tenantId?: TenantId;
-  metricTypeId?: MetricTypeId;
   narrativeTypeId?: SystemNarrativeTypeId;
 };
 
-export const DataPortalSlug = "explore";
 export const NarrativesSlug = "collections";
diff --git a/spotlight-client/src/setupTests.ts b/spotlight-client/src/setupTests.ts
index efc869e7..1179087c 100644
--- a/spotlight-client/src/setupTests.ts
+++ b/spotlight-client/src/setupTests.ts
@@ -21,6 +21,7 @@
 // learn more: https://github.com/testing-library/jest-dom
 
 import "@testing-library/jest-dom/extend-expect";
+import "intersection-observer";
 import fetchMock from "jest-fetch-mock";
 import { configure } from "mobx";
 
diff --git a/spotlight-client/src/testUtils.ts b/spotlight-client/src/testUtils.tsx
similarity index 64%
rename from spotlight-client/src/testUtils.ts
rename to spotlight-client/src/testUtils.tsx
index e4773a40..d8ea1441 100644
--- a/spotlight-client/src/testUtils.ts
+++ b/spotlight-client/src/testUtils.tsx
@@ -15,10 +15,17 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 // =============================================================================
 
+import {
+  createHistory,
+  createMemorySource,
+  LocationProvider,
+} from "@reach/router";
+import { render } from "@testing-library/react";
+import React from "react";
 import { autorun } from "mobx";
 import waitForLocalhost from "wait-for-localhost";
+import App from "./App";
 
-// eslint-disable-next-line import/prefer-default-export
 export function waitForTestServer(): Promise<void> {
   return waitForLocalhost({ path: "/health", port: 3002 });
 }
@@ -31,3 +38,24 @@ export function reactImmediately(effect: () => void): void {
   // and then immediately call the disposer to tear down the reaction
   autorun(effect)();
 }
+
+/**
+ * Renders the application in a URL history context
+ * that can be manipulated and inspected for testing
+ */
+export function renderNavigableApp({ route = "/" } = {}): {
+  history: ReturnType<typeof createHistory>;
+  rendered: ReturnType<typeof render>;
+} {
+  const history = createHistory(createMemorySource(route));
+
+  return {
+    rendered: render(
+      <LocationProvider history={history}>
+        <App />
+      </LocationProvider>
+    ),
+    // tests can use history object to simulate navigation in a browser
+    history,
+  };
+}
diff --git a/spotlight-client/src/withRouteSync/withRouteSync.tsx b/spotlight-client/src/withRouteSync/withRouteSync.tsx
index 994228e3..ac6d228b 100644
--- a/spotlight-client/src/withRouteSync/withRouteSync.tsx
+++ b/spotlight-client/src/withRouteSync/withRouteSync.tsx
@@ -46,7 +46,6 @@ const withRouteSync = <Props extends RouteComponentProps & RouteParams>(
       <RouteComponent
         {...props}
         tenantId={normalizedProps.tenantId}
-        metricTypeId={normalizedProps.metricTypeId}
         narrativeTypeId={normalizedProps.narrativeTypeId}
       />
     );
diff --git a/yarn.lock b/yarn.lock
index 5b485765..16462253 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1131,7 +1131,7 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.10.3", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.2.0", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.1", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.10.3", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.2.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.1", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
   version "7.12.5"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.5.tgz#410e7e487441e1b360c29be715d870d9b985882e"
   integrity sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg==
@@ -1973,6 +1973,11 @@
   dependencies:
     "@babel/types" "^7.3.0"
 
+"@types/d3-format@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@types/d3-format/-/d3-format-2.0.0.tgz#607d261cb268f0a027f100575491031539a40ee6"
+  integrity sha512-uagdkftxnGkO4pZw5jEYOM5ZnZOEsh7z8j11Qxk85UkB2RzfUUxRl7R9VvvJZHwKn8l+x+rpS77Nusq7FkFmIg==
+
 "@types/eslint-visitor-keys@^1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#1ee30d79544ca84d68d4b3cdb0af4f205663dd2d"
@@ -4734,7 +4739,7 @@ d3-format@1, d3-format@^1.4.4:
   resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-1.4.5.tgz#374f2ba1320e3717eb74a9356c67daee17a7edb4"
   integrity sha512-J0piedu6Z8iB6TbIGfZgDzfXxUFN3qQRMofy2oPdXzQibYGqPB/9iMcxr/TGalU+2RsyDO+U4f33id8tbnSRMQ==
 
-"d3-format@1 - 2":
+"d3-format@1 - 2", d3-format@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-2.0.0.tgz#a10bcc0f986c372b729ba447382413aabf5b0767"
   integrity sha512-Ab3S6XuE/Q+flY96HXT0jOXcM4EAClYFnRGY5zsjRGNy6qCYrQsMffs7cV5Q9xejb35zxW5hf/guKw34kvIKsA==
@@ -4753,13 +4758,6 @@ d3-geo@^2.0.1:
   dependencies:
     d3-array ">=2.5"
 
-d3-geo@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/d3-geo/-/d3-geo-2.0.1.tgz#2437fdfed3fe3aba2812bd8f30609cac83a7ee39"
-  integrity sha512-M6yzGbFRfxzNrVhxDJXzJqSLQ90q1cCyb3EWFZ1LF4eWOBYxFypw7I/NFVBNXKNqxv1bqLathhYvdJ6DC+th3A==
-  dependencies:
-    d3-array ">=2.5"
-
 d3-glyphedge@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/d3-glyphedge/-/d3-glyphedge-1.2.0.tgz#295367d8405f83cdbe8319171bb1f6636c60f85b"
@@ -5274,6 +5272,15 @@ dom-serializer@0:
     domelementtype "^2.0.1"
     entities "^2.0.0"
 
+dom-serializer@^1.0.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-1.2.0.tgz#3433d9136aeb3c627981daa385fc7f32d27c48f1"
+  integrity sha512-n6kZFH/KlCrqs/1GHMOd5i2fd/beQHuehKdWvNNffbGHTr/almdhuVvTVFb3V7fglz+nC50fFusu3lY33h12pA==
+  dependencies:
+    domelementtype "^2.0.1"
+    domhandler "^4.0.0"
+    entities "^2.0.0"
+
 domain-browser@^1.1.1:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.2.0.tgz#3d31f50191a6749dd1375a7f522e823d42e54eda"
@@ -5289,6 +5296,11 @@ domelementtype@^2.0.1:
   resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.0.2.tgz#f3b6e549201e46f588b59463dd77187131fe6971"
   integrity sha512-wFwTwCVebUrMgGeAwRL/NhZtHAUyT9n9yg4IMDwf10+6iCMxSkVq9MGCVEH+QZWo1nNidy8kNvwmv4zWHDTqvA==
 
+domelementtype@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.1.0.tgz#a851c080a6d1c3d94344aed151d99f669edf585e"
+  integrity sha512-LsTgx/L5VpD+Q8lmsXSHW2WpA+eBlZ9HPf3erD1IoPF00/3JKHZ3BknUVA2QGDNu69ZNmyFmCWBSO45XjYKC5w==
+
 domexception@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/domexception/-/domexception-1.0.1.tgz#937442644ca6a31261ef36e3ec677fe805582c90"
@@ -5303,6 +5315,13 @@ domexception@^2.0.1:
   dependencies:
     webidl-conversions "^5.0.0"
 
+domhandler@4.0.0, domhandler@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-4.0.0.tgz#01ea7821de996d85f69029e81fa873c21833098e"
+  integrity sha512-KPTbnGQ1JeEMQyO1iYXoagsI6so/C96HZiFyByU3T6iAzpXn8EGEvct6unm1ZGoed8ByO2oirxgwxBmqKF9haA==
+  dependencies:
+    domelementtype "^2.1.0"
+
 domhandler@^2.3.0:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-2.4.2.tgz#8805097e933d65e85546f726d60f5eb88b44f803"
@@ -5326,6 +5345,15 @@ domutils@^1.5.1, domutils@^1.7.0:
     dom-serializer "0"
     domelementtype "1"
 
+domutils@^2.4.4:
+  version "2.4.4"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.4.4.tgz#282739c4b150d022d34699797369aad8d19bbbd3"
+  integrity sha512-jBC0vOsECI4OMdD0GC9mGn7NXPLb+Qt6KW1YDQzeQYRUFKmNG8lh7mO5HiELfr+lLQE7loDVI4QcAxV80HS+RA==
+  dependencies:
+    dom-serializer "^1.0.1"
+    domelementtype "^2.0.1"
+    domhandler "^4.0.0"
+
 dont-sniff-mimetype@1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/dont-sniff-mimetype/-/dont-sniff-mimetype-1.1.0.tgz#c7d0427f8bcb095762751252af59d148b0a623b2"
@@ -7088,6 +7116,14 @@ html-comment-regex@^1.1.0:
   resolved "https://registry.yarnpkg.com/html-comment-regex/-/html-comment-regex-1.1.2.tgz#97d4688aeb5c81886a364faa0cad1dda14d433a7"
   integrity sha512-P+M65QY2JQ5Y0G9KKdlDpo0zK+/OHptU5AaBwUfAIDJZk1MYf32Frm84EcOytfJE0t5JvkAnKlmjsXDnWzCJmQ==
 
+html-dom-parser@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/html-dom-parser/-/html-dom-parser-1.0.0.tgz#00d42aa3ecfc1a965a91293ca60973c08205fad0"
+  integrity sha512-1lKgZW6TccI5OMxRB+5+B3urj62oFB8bRx5cJPgOSHAPk9B5V+k2NM/2z7FuIwOgopnPP/KlgBMNnX/2nKy0lA==
+  dependencies:
+    domhandler "4.0.0"
+    htmlparser2 "6.0.0"
+
 html-encoding-sniffer@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-1.0.2.tgz#e70d84b94da53aa375e11fe3a351be6642ca46f8"
@@ -7125,6 +7161,15 @@ html-minifier-terser@^5.0.1:
     relateurl "^0.2.7"
     terser "^4.6.3"
 
+html-react-parser@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/html-react-parser/-/html-react-parser-1.1.1.tgz#081d309a02aac9ae2683a5d96eb48846940d830b"
+  integrity sha512-z2O8aeh36Bnn17AtRReEZckpzVUaqRMsY8TMIxCyjQhCblQuN8l2D4mWY7V2bdLL7B2/FS4YD/dpndxuHtvYIQ==
+  dependencies:
+    html-dom-parser "1.0.0"
+    react-property "1.0.1"
+    style-to-js "1.1.0"
+
 html-webpack-plugin@4.0.0-beta.11:
   version "4.0.0-beta.11"
   resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-4.0.0-beta.11.tgz#3059a69144b5aecef97708196ca32f9e68677715"
@@ -7137,6 +7182,16 @@ html-webpack-plugin@4.0.0-beta.11:
     tapable "^1.1.3"
     util.promisify "1.0.0"
 
+htmlparser2@6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-6.0.0.tgz#c2da005030390908ca4c91e5629e418e0665ac01"
+  integrity sha512-numTQtDZMoh78zJpaNdJ9MXb2cv5G3jwUoe3dMQODubZvLoGvTE/Ofp6sHvH8OGKcN/8A47pGLi/k58xHP/Tfw==
+  dependencies:
+    domelementtype "^2.0.1"
+    domhandler "^4.0.0"
+    domutils "^2.4.4"
+    entities "^2.0.0"
+
 htmlparser2@^3.3.0:
   version "3.10.1"
   resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.10.1.tgz#bd679dc3f59897b6a34bb10749c855bb53a9392f"
@@ -7421,6 +7476,11 @@ ini@^1.3.5, ini@~1.3.0:
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.8.tgz#a29da425b48806f34767a4efce397269af28432c"
   integrity sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==
 
+inline-style-parser@0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/inline-style-parser/-/inline-style-parser-0.1.1.tgz#ec8a3b429274e9c0a1f1c4ffa9453a7fef72cea1"
+  integrity sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q==
+
 inquirer@7.0.4:
   version "7.0.4"
   resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-7.0.4.tgz#99af5bde47153abca23f5c7fc30db247f39da703"
@@ -7476,6 +7536,11 @@ internal-slot@^1.0.2:
     has "^1.0.3"
     side-channel "^1.0.2"
 
+intersection-observer@^0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/intersection-observer/-/intersection-observer-0.12.0.tgz#6c84628f67ce8698e5f9ccf857d97718745837aa"
+  integrity sha512-2Vkz8z46Dv401zTWudDGwO7KiGHNDkMv417T5ItcNYfmvHR/1qCTVBO9vwH8zZmQ0WkA/1ARwpysR9bsnop4NQ==
+
 invariant@^2.2.2, invariant@^2.2.3, invariant@^2.2.4:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
@@ -11406,6 +11471,11 @@ react-helmet@^6.1.0:
     react-fast-compare "^3.1.1"
     react-side-effect "^2.1.0"
 
+react-intersection-observer@^8.31.0:
+  version "8.31.0"
+  resolved "https://registry.yarnpkg.com/react-intersection-observer/-/react-intersection-observer-8.31.0.tgz#0ed21aaf93c4c0475b22b0ccaba6169076d01605"
+  integrity sha512-XraIC/tkrD9JtrmVA7ypEN1QIpKc52mXBH1u/bz/aicRLo8QQEJQAMUTb8mz4B6dqpPwyzgjrr7Ljv/2ACDtqw==
+
 react-is@^16.12.0, react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -11431,6 +11501,11 @@ react-measure@^2.3.0:
     prop-types "^15.6.2"
     resize-observer-polyfill "^1.5.0"
 
+react-property@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/react-property/-/react-property-1.0.1.tgz#4ae4211557d0a0ae050a71aa8ad288c074bea4e6"
+  integrity sha512-1tKOwxFn3dXVomH6pM9IkLkq2Y8oh+fh/lYW3MJ/B03URswUTqttgckOlbxY2XHF3vPG6uanSc4dVsLW/wk3wQ==
+
 react-scripts@3.4.3:
   version "3.4.3"
   resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-3.4.3.tgz#21de5eb93de41ee92cd0b85b0e1298d0bb2e6c51"
@@ -11506,6 +11581,14 @@ react-simple-maps@^2.1.2:
     d3-zoom "^2.0.0"
     topojson-client "^3.1.0"
 
+react-spring@^8.0.27:
+  version "8.0.27"
+  resolved "https://registry.yarnpkg.com/react-spring/-/react-spring-8.0.27.tgz#97d4dee677f41e0b2adcb696f3839680a3aa356a"
+  integrity sha512-nDpWBe3ZVezukNRandTeLSPcwwTMjNVu1IDq9qA/AMiUqHuRN4BeSWvKr3eIxxg1vtiYiOLy4FqdfCP5IoP77g==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    prop-types "^15.5.8"
+
 react-sticky@^6.0.3:
   version "6.0.3"
   resolved "https://registry.yarnpkg.com/react-sticky/-/react-sticky-6.0.3.tgz#7a18b643e1863da113d7f7036118d2a75d9ecde4"
@@ -12896,6 +12979,20 @@ style-loader@0.23.1:
     loader-utils "^1.1.0"
     schema-utils "^1.0.0"
 
+style-to-js@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/style-to-js/-/style-to-js-1.1.0.tgz#631cbb20fce204019b3aa1fcb5b69d951ceac4ac"
+  integrity sha512-1OqefPDxGrlMwcbfpsTVRyzwdhr4W0uxYQzeA2F1CBc8WG04udg2+ybRnvh3XYL4TdHQrCahLtax2jc8xaE6rA==
+  dependencies:
+    style-to-object "0.3.0"
+
+style-to-object@0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/style-to-object/-/style-to-object-0.3.0.tgz#b1b790d205991cc783801967214979ee19a76e46"
+  integrity sha512-CzFnRRXhzWIdItT3OmF8SQfWyahHhjq3HwcMNCNLn+N7klOOqPjMeG/4JSu77D7ypZdGvSzvkrbyeTMizz2VrA==
+  dependencies:
+    inline-style-parser "0.1.1"
+
 styled-components@5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.1.1.tgz#96dfb02a8025794960863b9e8e365e3b6be5518d"