Merge branch 'main' of https://github.com/Recidiviz/public-dashboard …

…into nasaownsky/518-riders-narrative
Recidiviz · Jul 20, 2022 · 86453f3 · 86453f3
2 parents e918edb + a3647a9
commit 86453f3
Show file tree

Hide file tree

Showing 42 changed files with 321 additions and 416 deletions.
diff --git a/spotlight-client/package.json b/spotlight-client/package.json
@@ -18,7 +18,7 @@
     "@auth0/auth0-spa-js": "^1.13.1",
     "@reach/auto-id": "^0.15.0",
     "@reach/router": "^1.3.4",
-    "@recidiviz/design-system": "^3.3.1",
+    "@recidiviz/design-system": "^4.0.0",
     "@types/body-scroll-lock": "^2.6.1",
     "@types/classnames": "^2.2.11",
     "@types/d3-array": "^2.9.0",

diff --git a/spotlight-client/src/App.test.tsx b/spotlight-client/src/App.test.tsx
@@ -77,7 +77,7 @@ describe("navigation", () => {
   test("tenant home", () => {
     expect.hasAssertions();
     const targetPath = "/us-nd";
-    const lookupArgs = ["heading", { name: /DOCR/, level: 1 }] as const;
+    const lookupArgs = ["heading", { name: /DOCR/, level: 2 }] as const;
 
     return verifyWithNavigation({ targetPath, lookupArgs });
   });
@@ -142,7 +142,9 @@ describe("navigation", () => {
 
     fireEvent.click(tenantLink);
     await waitFor(async () =>
-      expect(await screen.findByTestId("PageTitle")).toHaveTextContent("DOCR")
+      expect(await screen.findByTestId("PageTitle")).toHaveTextContent(
+        "transform lives, influence change,"
+      )
     );
 
     expect(screen.queryByText("Sentencing Data")).not.toBeInTheDocument();

diff --git a/spotlight-client/src/GlobalStyles/GlobalStyles.tsx b/spotlight-client/src/GlobalStyles/GlobalStyles.tsx
@@ -15,18 +15,20 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 // =============================================================================
 
+import { typography } from "@recidiviz/design-system";
 import React from "react";
-import { Helmet } from "react-helmet-async";
 import { createGlobalStyle } from "styled-components/macro";
 import reset from "styled-reset";
-import { colors, typefaces } from "../UiLibrary";
+import { colors } from "../UiLibrary";
 
 const BaseStyles = createGlobalStyle`
   ${reset}
 
   html {
+    ${typography.Sans16}
+
     box-sizing: border-box;
-    font-family: ${typefaces.body};
+    
 
     *, *:before, *:after {
       box-sizing: inherit;
@@ -38,26 +40,11 @@ const BaseStyles = createGlobalStyle`
     background-color: ${colors.background};
     color: ${colors.text};
   }
-
-  strong {
-    font-weight: 600;
-  }
 `;
 
 const GlobalStyles: React.FC = () => {
   return (
     <>
-      <Helmet>
-        <link rel="preconnect" href="https://fonts.gstatic.com" />
-        <link
-          href="https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@400;500;600;700&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/Loading/Loading.tsx b/spotlight-client/src/Loading/Loading.tsx
@@ -15,6 +15,7 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 // =============================================================================
 
+import { typography } from "@recidiviz/design-system";
 import { rem } from "polished";
 import React from "react";
 import styled, { keyframes } from "styled-components/macro";
@@ -46,9 +47,8 @@ const LoadingSpinnerIcon = styled(SpinnerIcon)`
 `;
 
 const LoadingSpinnerText = styled.div`
+  ${typography.Sans14}
   color: ${colors.caption};
-  font-size: ${rem(14)};
-  line-height: 1.5;
 `;
 
 export default function Loading(): JSX.Element {

diff --git a/spotlight-client/src/ModelHydrator/HydrationError.tsx b/spotlight-client/src/ModelHydrator/HydrationError.tsx
@@ -15,17 +15,16 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 // =============================================================================
 
+import { typography } from "@recidiviz/design-system";
 import { rem } from "polished";
 import React from "react";
 import styled from "styled-components/macro";
 import imgPath from "../assets/loading-error.svg";
 import { colors } from "../UiLibrary";
 
 const Wrapper = styled.div`
+  ${typography.Sans14}
   color: ${colors.caption};
-  font-size: ${rem(14)};
-  font-weight: 500;
-  line-height: 1.5;
   text-align: center;
   width: ${rem(208)};
 `;

diff --git a/spotlight-client/src/NarrativeFooter/NarrativeFooter.tsx b/spotlight-client/src/NarrativeFooter/NarrativeFooter.tsx
@@ -16,35 +16,31 @@
 // =============================================================================
 
 import { Link } from "@reach/router";
+import { typography } from "@recidiviz/design-system";
 import { observer } from "mobx-react-lite";
 import { rem } from "polished";
 import React from "react";
 import styled from "styled-components/macro";
 import OtherNarrativeLinks from "../OtherNarrativeLinks";
 import getUrlForResource from "../routerUtils/getUrlForResource";
 import { useDataStore } from "../StoreProvider";
-import { colors, typefaces } from "../UiLibrary";
+import { colors } from "../UiLibrary";
 import Arrow from "../UiLibrary/Arrow";
 
 const Container = styled.nav`
   padding: ${rem(120)} ${rem(32)} 0;
 
   .NarrativeFooter__BackLink {
+    ${typography.Sans16}
     color: ${colors.link};
     display: inline-block;
-    font-weight: 500;
-    font-size: ${rem(18)};
-    line-height: 1.7;
     margin-top: ${rem(48)};
     text-decoration: none;
   }
 `;
 
 const Heading = styled.h2`
-  font-family: ${typefaces.display};
-  font-size: ${rem(32)};
-  line-height: 1.75;
-  letter-spacing: -0.04em;
+  ${typography.Serif34}
 `;
 
 const Footer: React.FC = () => {

diff --git a/spotlight-client/src/NarrativeLayout/NarrativeNavigation/SectionLinks.tsx b/spotlight-client/src/NarrativeLayout/NarrativeNavigation/SectionLinks.tsx
@@ -15,7 +15,7 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 // =============================================================================
 
-import { palette } from "@recidiviz/design-system";
+import { palette, typography } from "@recidiviz/design-system";
 import { rem } from "polished";
 import React, { useEffect } from "react";
 import { animated, useSpring, useSprings } from "react-spring/web.cjs";
@@ -91,7 +91,7 @@ const SectionLinkLabel = styled(animated.div)<{
   display: flex;
   align-items: center;
   text-align: left;
-  letter-spacing: -0.01em;
+  ${typography.Sans12}
   padding-left: ${rem(16)};
   pointer-events: none;
   position: absolute;

diff --git a/spotlight-client/src/Notes/Notes.tsx b/spotlight-client/src/Notes/Notes.tsx
@@ -15,17 +15,16 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 // =============================================================================
 
+import { typography } from "@recidiviz/design-system";
 import { rem } from "polished";
 import React from "react";
 import styled from "styled-components/macro";
 import { colors } from "../UiLibrary";
 
 const Wrapper = styled.ol`
+  ${typography.Sans12}
   color: ${colors.caption};
-  font-size: ${rem(13)};
-  font-weight: 500;
-  line-height: 1.7;
-  list-style: none;
+  list-style: decimal outside;
   margin-top: ${rem(40)};
 `;
 

diff --git a/spotlight-client/src/OtherNarrativeLinks/OtherNarrativeLinks.tsx b/spotlight-client/src/OtherNarrativeLinks/OtherNarrativeLinks.tsx
@@ -16,6 +16,7 @@
 // =============================================================================
 
 import { Link } from "@reach/router";
+import { typography } from "@recidiviz/design-system";
 import { observer } from "mobx-react-lite";
 import { rem } from "polished";
 import React from "react";
@@ -38,10 +39,9 @@ const Wrapper = styled.div`
 `;
 
 const LinkList = styled.ul`
+  ${typography.Sans24}
   display: flex;
   flex-wrap: wrap;
-  font-size: ${rem(24)};
-  line-height: 1.5;
   /* this margin makes the cells flush left and right */
   margin: ${rem(48)} -${rem(32)} 0 0;
 `;

diff --git a/spotlight-client/src/OtherNarrativeLinksPreview/OtherNarrativeLinksPreview.tsx b/spotlight-client/src/OtherNarrativeLinksPreview/OtherNarrativeLinksPreview.tsx
@@ -20,6 +20,7 @@ import {
   TabList as BasicTabList,
   Tab,
   TabPanel as BasicTabPanel,
+  typography,
 } from "@recidiviz/design-system";
 import { ascending } from "d3-array";
 import { observer } from "mobx-react-lite";
@@ -48,8 +49,8 @@ const Wrapper = styled.div`
 `;
 
 const ChartTitle = styled.div`
+  ${typography.Sans16}
   margin-top: ${rem(16)};
-  font-size: ${rem(16)};
 `;
 
 const ChartPreview = styled.div`

diff --git a/spotlight-client/src/PageTenant/PageTenant.tsx b/spotlight-client/src/PageTenant/PageTenant.tsx
@@ -16,6 +16,7 @@
 // =============================================================================
 
 import { RouteComponentProps } from "@reach/router";
+import { palette, typography } from "@recidiviz/design-system";
 import HTMLReactParser from "html-react-parser";
 import { observer } from "mobx-react-lite";
 import { rem } from "polished";
@@ -25,7 +26,7 @@ import { DEFAULT_SELECTED_TAB, NAV_BAR_HEIGHT } from "../constants";
 import { NarrativeTypeId } from "../contentApi/types";
 import OtherNarrativeLinksPreview from "../OtherNarrativeLinksPreview";
 import { useDataStore } from "../StoreProvider";
-import { breakpoints, PageSection, PageTitle, typefaces } from "../UiLibrary";
+import { breakpoints, PageSection } from "../UiLibrary";
 import ExploreNarrativeButton from "../UiLibrary/ExploreNarrativeButton";
 import withRouteSync from "../withRouteSync";
 
@@ -35,10 +36,6 @@ const Page = styled.article`
   align-items: center;
   justify-content: center;
 
-  a {
-    text-decoration: none;
-  }
-
   @media screen and (min-width: ${breakpoints.xl[0]}px) {
     flex-direction: row;
     min-height: calc(100vh - ${rem(NAV_BAR_HEIGHT)});
@@ -85,23 +82,17 @@ const Links = styled(PageSection)`
   }
 `;
 
-const Title = styled(PageTitle)`
-  font-size: ${rem(34)};
+const Title = styled.h1`
+  ${typography.Header34}
 
   @media screen and (max-width: ${breakpoints.tablet[0]}px) {
-    font-size: ${rem(28)};
+    ${typography.Header24}
   }
 `;
 
 const Subtitle = styled.h2`
-  font-family: ${typefaces.body};
-  letter-spacing: -0.04em;
-  font-size: ${rem(21)};
-  margin-top: ${rem(24)};
-
-  @media screen and (max-width: ${breakpoints.tablet[0]}px) {
-    font-size: ${rem(18)};
-  }
+  ${typography.Body19}
+  color: ${palette.slate85};
 `;
 
 const PageTenant: React.FC<RouteComponentProps> = () => {
@@ -116,12 +107,12 @@ const PageTenant: React.FC<RouteComponentProps> = () => {
     // tenant may be briefly undefined during initial page load
     <Page>
       <Introduction>
-        <Title>
+        <Title data-testid="PageTitle">
           {HTMLReactParser(tenant.description)}
-          {tenant.ctaCopy && (
-            <Subtitle>{HTMLReactParser(tenant.ctaCopy)}</Subtitle>
-          )}
         </Title>
+        {tenant.ctaCopy && (
+          <Subtitle>{HTMLReactParser(tenant.ctaCopy)}</Subtitle>
+        )}
         <ExploreNarrativeButton
           narrativeId={narrativeId}
           tenantId={tenant.id}

diff --git a/spotlight-client/src/ShareModal/ShareModal.tsx b/spotlight-client/src/ShareModal/ShareModal.tsx
@@ -15,6 +15,7 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 // =============================================================================
 
+import { typography } from "@recidiviz/design-system";
 import { observer } from "mobx-react-lite";
 import { rem } from "polished";
 import React, { useState } from "react";
@@ -38,18 +39,17 @@ import {
   Modal,
   ModalHeading,
   SpotlightModalProps,
-  typefaces,
 } from "../UiLibrary";
 
 const Button = styled.button.attrs({ type: "button" })`
+  ${typography.Sans12}
   align-items: center;
   background-color: ${colors.link};
   border-radius: 3em;
   border: none;
   color: ${colors.textLight};
   cursor: pointer;
   display: flex;
-  font-size: ${rem(11)};
   justify-content: center;
   padding: ${rem(12)} ${rem(16)};
   transition: background-color ${animation.defaultDuration}ms;
@@ -78,9 +78,8 @@ const ShareActions = styled.div`
 `;
 
 const UrlText = styled.div`
-  font-family: ${typefaces.display};
-  font-size: ${rem(21)};
-  letter-spacing: -0.04em;
+  ${typography.Serif24}
+
   padding-bottom: ${rem(16)};
 `;
 
@@ -116,16 +115,15 @@ const IconFacebook = styled.img.attrs({
 })``;
 
 const CopyConfirmation = styled(animated.div).attrs({ role: "status" })`
+  ${typography.Sans12}
   bottom: ${rem(4)};
-  font-size: ${rem(11)};
   position: absolute;
 `;
 
 const IncludeSectionLabel = styled.label`
-  align-items: baseline;
+  ${typography.Sans14}
+  align-items: center;
   display: flex;
-  font-size: ${rem(14)};
-  line-height: 1.4;
 `;
 
 const SectionTitle = styled.span`

diff --git a/spotlight-client/src/SiteFooter/SiteFooter.tsx b/spotlight-client/src/SiteFooter/SiteFooter.tsx
@@ -15,6 +15,7 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 // =============================================================================
 
+import { typography } from "@recidiviz/design-system";
 import useBreakpoint from "@w11r/use-breakpoint";
 import { observer } from "mobx-react-lite";
 import { rem } from "polished";
@@ -31,15 +32,13 @@ import { useDataStore } from "../StoreProvider";
 import { breakpoints, colors } from "../UiLibrary";
 
 const Wrapper = styled.footer`
+  ${typography.Sans12}
   background: ${colors.footerBackground};
   color: ${colors.caption};
   display: flex;
   flex-direction: column;
-  font-size: ${rem(12)};
-  font-weight: 700;
   justify-content: flex-end;
-  line-height: 1.25;
-  margin-top: 130px;
+  margin-top: ${rem(130)};
   min-height: ${rem(FOOTER_HEIGHT)};
   padding: ${rem(32)};
   padding-bottom: 0;