Narrative pages with animated transitions

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"]

spotlight-client/package.json

@@ -16,13 +16,17 @@
   "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",
     "@types/react-dom": "^16.9.0",
     "@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",

spotlight-client/src/App.test.tsx

@@ -15,38 +15,17 @@
 // 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,
   within,
   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(

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,14 +39,18 @@ 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>
       <StoreProvider>
         <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>

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 />
     </>

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));

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 })}