Merge e7c202b into cca2bac

spotlight-client/src/App.tsx

@@ -71,6 +71,11 @@ const App: React.FC = () => {
               */}
               {/* while there is only one state, home simply redirects to ND home */}
               <Redirect from="/" to="/us-nd" noThrow />
+              {/*
+                this was the ND homepage for v1;
+                let's make sure people who bookmarked it are not lost
+              */}
+              <Redirect from="/us_nd/overview" to="/us-nd" noThrow />
               <PassThroughPage path="/:tenantId">
                 <PageTenant path="/" />
                 <PageNarrative

spotlight-client/src/NarrativeLayout/NarrativeLayout.tsx

@@ -138,7 +138,8 @@ const NarrativeLayout: React.FC<NarrativeLayoutProps> = ({ sections }) => {
           `${getUrlForResource({
             page: "narrative",
             params: { tenantId, narrativeTypeId },
-          })}/${activeSection}`
+          })}/${activeSection}`,
+          { replace: true }
         );
       }
     }

spotlight-client/src/NarrativeLayout/NarrativeNavigation/AdvanceLink.tsx

@@ -57,6 +57,7 @@ const AdvanceLink: React.FC<AdvanceLinkProps> = ({
     <StyledNavLink
       to={`${urlBase}/${targetSection}`}
       disabled={disabled}
+      replace
       aria-label={`${type} section`}
       onMouseOver={() => setHovered(true)}
       onFocus={() => setHovered(true)}

spotlight-client/src/NarrativeLayout/NarrativeNavigation/SectionLinks.tsx

@@ -170,6 +170,7 @@ const SectionLinks: React.FC<{
             <SectionListItem key={section.title}>
               <SectionLink
                 to={`${urlBase}/${index + 1}`}
+                replace
                 onMouseOver={showLinkLabel(index)}
                 onFocus={showLinkLabel(index)}
                 onMouseOut={hideLinkLabel(index)}

spotlight-client/src/NarrativeLayout/StickySection.tsx

@@ -24,8 +24,6 @@ import styled from "styled-components/macro";
 import { NAV_BAR_HEIGHT } from "../constants";
 import { breakpoints, CopyBlock, FullScreenSection } from "../UiLibrary";
 
-const COPY_WIDTH = 408;
-
 const Container = styled(FullScreenSection)`
   @media screen and (min-width: ${breakpoints.tablet[0]}px) {
     display: flex;
@@ -35,9 +33,11 @@ const Container = styled(FullScreenSection)`
   }
 
   @media screen and (min-width: ${breakpoints.desktop[0]}px) {
-    align-items: flex-start;
-    flex-direction: row;
-    justify-content: flex-start;
+    /* grid properties do not get auto-prefixed for IE during build */
+    display: -ms-grid;
+    display: grid;
+    -ms-grid-columns: minmax(${rem(250)}, 30%) 1fr;
+    grid-template-columns: minmax(${rem(250)}, 30%) 1fr;
   }
 `;
 
@@ -46,14 +46,13 @@ const LeftContainer = styled(CopyBlock)<{ $isSticky: boolean }>`
   padding-top: ${rem(40)};
 
   @media screen and (min-width: ${breakpoints.desktop[0]}px) {
-    align-self: flex-start;
     display: flex;
-    flex: 0 1 30%;
     flex-direction: column;
+    -ms-grid-column: 1;
+    grid-column: 1;
     height: ${(props) =>
       props.$isSticky ? `calc(100vh - ${rem(NAV_BAR_HEIGHT)})` : "auto"};
     justify-content: center;
-    max-width: ${rem(COPY_WIDTH)};
     padding-bottom: ${rem(40)};
     position: ${(props) => (props.$isSticky ? "sticky" : "static")};
     top: ${rem(NAV_BAR_HEIGHT)};
@@ -66,12 +65,11 @@ const RightContainer = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
-  /* min-width cannot be auto or children will not shrink when viewport does */
-  min-width: ${rem(320)};
   padding: ${rem(32)} 0;
 
   @media screen and (min-width: ${breakpoints.desktop[0]}px) {
-    flex: 1 1 auto;
+    -ms-grid-column: 2;
+    grid-column: 2;
     margin-left: 8%;
     min-height: calc(100vh - ${rem(NAV_BAR_HEIGHT)});
   }

spotlight-client/src/NavigationLink/NavigationLink.tsx

@@ -15,48 +15,26 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 // =============================================================================
 
-import { useNavigate } from "@reach/router";
-import React from "react";
+import { Link } from "@reach/router";
 import styled from "styled-components/macro";
 
-const Anchor = styled.a`
-  &[aria-disabled="true"] {
-    cursor: not-allowed;
-  }
-`;
-
-type NavigationLinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement> & {
-  to: string;
+type NavigationLinkProps = {
   disabled?: boolean;
 };
 
 /**
- * An alternative to the @reach/router `Link` component.
- * Can be `disabled` to render link inoperative.
+ * Extends @reach/router Link component with a `disabled` prop
+ * that disables click events
  */
-const NavigationLink: React.FC<NavigationLinkProps> = ({
-  children,
-  disabled,
-  to,
-  ...props
-}) => {
-  const navigate = useNavigate();
-
-  return (
-    <Anchor
-      {...props}
-      href={disabled ? undefined : to}
-      onClick={(e) => {
-        e.preventDefault();
-        if (!disabled) {
-          navigate(to);
-        }
-      }}
-      aria-disabled={disabled}
-    >
-      {children}
-    </Anchor>
-  );
-};
+const NavigationLink = styled(Link).attrs<NavigationLinkProps>((props) => ({
+  "aria-disabled": props.disabled ? "true" : "false",
+  onClick: (e: MouseEvent) => {
+    if (props.disabled) e.preventDefault();
+  },
+}))<NavigationLinkProps>`
+  &[aria-disabled="true"] {
+    cursor: not-allowed;
+  }
+`;
 
 export default NavigationLink;

spotlight-client/src/SiteNavigation/SiteNavigation.test.tsx

@@ -139,7 +139,7 @@ describe("on small screens", () => {
     const menu = screen.getByTestId("NavMenu");
     const navLinks = await within(menu).findAllByRole("link");
 
-    expect(navLinks.length).toBe(6);
+    expect(navLinks.length).toBe(7);
 
     expect(navLinks[0]).toHaveTextContent("Home");
     expect(navLinks[0]).toHaveAttribute("href", "/us-nd");
@@ -164,6 +164,12 @@ describe("on small screens", () => {
       "href",
       "/us-nd/collections/racial-disparities"
     );
+
+    expect(navLinks[6]).toHaveTextContent("Feedback");
+    expect(navLinks[6]).toHaveAttribute(
+      "href",
+      expect.stringContaining("docs.google.com/forms")
+    );
   });
 
   test("menu closes after navigation", async () => {
@@ -175,7 +181,8 @@ describe("on small screens", () => {
     const menu = screen.getByTestId("NavMenu");
     const navLinks = await within(menu).findAllByRole("link");
 
-    navLinks.forEach((linkEl) => {
+    // exclude the last link because it doesn't navigate, it links out
+    navLinks.slice(0, -2).forEach((linkEl) => {
       fireEvent.click(linkEl);
       expect(menu).toHaveAttribute("aria-hidden", "true");
 

spotlight-client/src/SiteNavigation/SiteNavigation.tsx

@@ -17,7 +17,6 @@
 
 import { navigate } from "@reach/router";
 import { observer } from "mobx-react-lite";
-import { rem } from "polished";
 import React from "react";
 import getUrlForResource from "../routerUtils/getUrlForResource";
 import { useDataStore } from "../StoreProvider";
@@ -30,6 +29,8 @@ import {
   NavGroup,
   NavGroupItem,
   NavLink,
+  ExternalNavLink,
+  FEEDBACK_URL,
 } from "./shared";
 
 const SiteNavigation: React.FC = () => {
@@ -70,7 +71,7 @@ const SiteNavigation: React.FC = () => {
             </NavLink>
           </NavGroupItem>
           {tenant && (
-            <NavGroupItem style={{ marginLeft: rem(24) }}>
+            <NavGroupItem>
               <NavLink
                 to={getUrlForResource({
                   page: "tenant",
@@ -86,12 +87,16 @@ const SiteNavigation: React.FC = () => {
           {narrativeOptions.length > 0 && (
             <NavGroupItem>
               <Dropdown
+                buttonKind="link"
                 label="Data Narratives"
                 onChange={(id) => navigate(id)}
                 options={narrativeOptions}
               />
             </NavGroupItem>
           )}
+          <NavGroupItem>
+            <ExternalNavLink href={FEEDBACK_URL}>Feedback</ExternalNavLink>
+          </NavGroupItem>
         </NavGroup>
       </NavBar>
     </NavContainer>

spotlight-client/src/SiteNavigation/SiteNavigationMobile.tsx

@@ -33,6 +33,8 @@ import {
   NavGroup,
   NavGroupItem as NavGroupItemBase,
   NavLink as NavLinkBase,
+  FEEDBACK_URL,
+  ExternalNavLink as ExternalNavLinkBase,
 } from "./shared";
 
 const NavContainer = styled(animated(NavContainerBase))<{
@@ -56,6 +58,10 @@ const NavLink = styled(NavLinkBase)`
   color: ${colors.textLight};
 `;
 
+const ExternalNavLink = styled(ExternalNavLinkBase)`
+  color: ${colors.textLight};
+`;
+
 const NavMenu = styled.ul`
   font-family: ${typefaces.display};
   font-size: ${rem(20)};
@@ -164,6 +170,9 @@ const SiteNavigation: React.FC = () => {
                 </NavLink>
               </NavMenuItem>
             )}
+            <NavMenuItem>
+              <ExternalNavLink href={FEEDBACK_URL}>Feedback</ExternalNavLink>
+            </NavMenuItem>
           </>
         )}
       </NavMenu>

spotlight-client/src/SiteNavigation/shared.tsx

@@ -17,7 +17,7 @@
 
 import { Link } from "@reach/router";
 import { rem } from "polished";
-import styled from "styled-components/macro";
+import styled, { css } from "styled-components/macro";
 import { NAV_BAR_HEIGHT } from "../constants";
 import { colors, zIndex } from "../UiLibrary";
 
@@ -49,13 +49,28 @@ export const NavGroup = styled.ul`
 export const NavGroupItem = styled.li`
   align-items: center;
   display: flex;
+
+  &:nth-child(n + 2) {
+    margin-left: ${rem(24)};
+  }
 `;
 
-export const NavLink = styled(Link)`
+const linkStyles = css`
   align-items: center;
   color: ${colors.text};
   display: flex;
   height: 100%;
   position: relative;
   text-decoration: none;
 `;
+
+export const NavLink = styled(Link)`
+  ${linkStyles}
+`;
+
+export const ExternalNavLink = styled.a.attrs({ target: "_blank" })`
+  ${linkStyles}
+`;
+
+export const FEEDBACK_URL =
+  "https://docs.google.com/forms/d/e/1FAIpQLSc3_wV2ltGumMdGTcLehUM41tQri0ZW5RjIKh0JJlhpJGE9Hg/viewform";

spotlight-client/src/SystemNarrativePage/SystemNarrativePage.test.tsx

@@ -54,9 +54,10 @@ test("navigate to previous and next section", async () => {
   const nextLink = screen.getByRole("link", { name: nextLabel });
 
   // no previous on the first section
-  expect(
-    screen.queryByRole("link", { name: prevLabel })
-  ).not.toBeInTheDocument();
+  expect(screen.queryByRole("link", { name: prevLabel })).toHaveAttribute(
+    "aria-disabled",
+    "true"
+  );
   expect(nextLink).toBeInTheDocument();
 
   expect(within(navRegion).getByText("01")).toBeInTheDocument();
@@ -77,9 +78,10 @@ test("navigate to previous and next section", async () => {
   await waitFor(() =>
     expect(within(navRegion).getByText("01")).toBeInTheDocument()
   );
-  expect(
-    screen.queryByRole("link", { name: prevLabel })
-  ).not.toBeInTheDocument();
+  expect(screen.queryByRole("link", { name: prevLabel })).toHaveAttribute(
+    "aria-disabled",
+    "true"
+  );
 
   // advance to the last section
   history.navigate(
@@ -99,7 +101,7 @@ test("navigate to previous and next section", async () => {
     // the element referenced by nextLink is still present,
     // but it no longer has role=link
     screen.queryByRole("link", { name: nextLabel })
-  ).not.toBeInTheDocument();
+  ).toHaveAttribute("aria-disabled", "true");
 
   // JSDOM don't support layout features
   // so we can't really test anything related to scroll position :(