Merge 31878b1 into baee38c

spotlight-client/src/App.test.tsx

@@ -126,7 +126,9 @@ describe("navigation", () => {
     const inNav = within(screen.getByRole("navigation"));
 
     const homeLink = inNav.getByRole("link", { name: "Spotlight" });
-    const tenantLink = inNav.getByRole("link", { name: "North Dakota" });
+    const tenantLink = inNav.getByRole("link", {
+      name: "North Dakota Department of Corrections and Rehabilitation",
+    });
     const sentencingLink = await screen.findByRole("link", {
       name: "Racial Disparities Data",
     });
@@ -210,7 +212,11 @@ describe("navigation", () => {
       expect(
         screen.getByRole("button", { name: "Data Narratives" })
       ).toBeVisible();
-      fireEvent.click(screen.getByRole("link", { name: "North Dakota" }));
+      fireEvent.click(
+        screen.getByRole("link", {
+          name: "North Dakota Department of Corrections and Rehabilitation",
+        })
+      );
 
       await waitFor(() =>
         expect(screen.queryByRole(...notFoundRoleArgs)).not.toBeInTheDocument()
@@ -228,7 +234,11 @@ describe("navigation", () => {
       expect(
         screen.getByRole("button", { name: "Data Narratives" })
       ).toBeVisible();
-      fireEvent.click(screen.getByRole("link", { name: "North Dakota" }));
+      fireEvent.click(
+        screen.getByRole("link", {
+          name: "North Dakota Department of Corrections and Rehabilitation",
+        })
+      );
 
       await waitFor(() =>
         expect(screen.queryByRole(...notFoundRoleArgs)).not.toBeInTheDocument()

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

@@ -45,12 +45,10 @@ afterEach(() => {
   });
 });
 
-test("displays co-branding copy", () => {
+test("displays DOC linking button", () => {
   renderWithStore(<SiteFooter />);
 
-  expect(
-    screen.getByText(exhaustiveFixture.coBrandingCopy)
-  ).toBeInTheDocument();
+  expect(screen.getByText(exhaustiveFixture.docName)).toBeInTheDocument();
 
   runInAction(() => {
     DataStore.tenantStore.currentTenantId = undefined;

spotlight-client/src/SiteFooter/SiteFooter.tsx

@@ -15,7 +15,7 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 // =============================================================================
 
-import HTMLReactParser from "html-react-parser";
+import useBreakpoint from "@w11r/use-breakpoint";
 import { observer } from "mobx-react-lite";
 import { rem } from "polished";
 import React from "react";
@@ -72,6 +72,15 @@ const CoBranding = styled.div`
   width: 100%;
 `;
 
+const DocButton = styled.a`
+  background: ${colors.caption};
+  color: ${colors.footerBackground} !important;
+  border-radius: 5px;
+  padding: ${rem(8)} ${rem(10)};
+  text-decoration: none;
+  font-weight: normal;
+`;
+
 const Legalese = styled.div`
   align-items: center;
   display: flex;
@@ -127,14 +136,22 @@ const BrandLink = styled.a`
 
 const SiteFooter: React.FC = () => {
   const { tenant } = useDataStore();
+  const isMobile = useBreakpoint(false, ["mobile-", true]);
 
   const year = new Date().getFullYear();
 
   return (
     <Wrapper>
       <Contents>
         {tenant && (
-          <CoBranding>{HTMLReactParser(tenant.coBrandingCopy)}</CoBranding>
+          <CoBranding>
+            <DocButton href={tenant.docLink}>
+              Go to{" "}
+              <strong>
+                {isMobile ? `${tenant.name} DOC` : tenant.docName}
+              </strong>
+            </DocButton>
+          </CoBranding>
         )}
         <Legalese>
           <span>

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

@@ -64,10 +64,11 @@ describe("on large screens", () => {
       "href",
       "/"
     );
-    expect(inNav.getByRole("link", { name: "North Dakota" })).toHaveAttribute(
-      "href",
-      "/us-nd"
-    );
+    expect(
+      inNav.getByRole("link", {
+        name: "North Dakota Department of Corrections and Rehabilitation",
+      })
+    ).toHaveAttribute("href", "/us-nd");
     expect(
       inNav.getByRole("button", { name: "Data Narratives" })
     ).toBeInTheDocument();

spotlight-client/src/SiteNavigation/SiteNavigation.tsx

@@ -16,6 +16,7 @@
 // =============================================================================
 
 import { navigate } from "@reach/router";
+import useBreakpoint from "@w11r/use-breakpoint";
 import { observer } from "mobx-react-lite";
 import React, { useCallback } from "react";
 import { track } from "../analytics";
@@ -38,6 +39,7 @@ import {
 
 const SiteNavigation: React.FC<ShareButtonProps> = ({ openShareModal }) => {
   const { tenant } = useDataStore();
+  const isTablet = useBreakpoint(false, ["tablet-", true]);
 
   const narrativeOptions: DropdownOption[] = [];
 
@@ -89,7 +91,7 @@ const SiteNavigation: React.FC<ShareButtonProps> = ({ openShareModal }) => {
                   params: { tenantId: tenant.id },
                 })}
               >
-                {tenant.name}
+                {isTablet ? tenant.name : tenant.docName}
               </NavLink>
             </NavGroupItem>
           )}

spotlight-client/src/SystemNarrativePage/__fixtures__/contentSource.ts

@@ -19,6 +19,8 @@ import { TenantContent } from "../../contentApi/types";
 
 const content: TenantContent = {
   name: "Test Tenant",
+  docName: "Test Tenant Department of Corrections",
+  docLink: "https://example.com/feedback",
   description: "test tenant description",
   coBrandingCopy: "test tenant co-branding",
   feedbackUrl: "https://example.com/feedback",

spotlight-client/src/contentApi/sources/us_id.ts

@@ -66,6 +66,8 @@ in a Idaho court may occasionally complete their supervision in a different stat
 
 const content: TenantContent = {
   name: "Idaho",
+  docName: "Idaho Department of Corrections",
+  docLink: "https://www.idoc.idaho.gov/",
   description: "Placeholder for IDOC Mission",
   coBrandingCopy:
     'Produced in collaboration with <a href="https://www.idoc.idaho.gov">the Idaho Department of Correction</a>.',

spotlight-client/src/contentApi/sources/us_nd.ts

@@ -82,6 +82,8 @@ in a North Dakota court may occasionally complete their supervision in a differe
 
 const content: TenantContent = {
   name: "North Dakota",
+  docName: "North Dakota Department of Corrections and Rehabilitation",
+  docLink: "https://www.docr.nd.gov",
   description:
     "Our mission is to transform lives, influence change, and strengthen community. Transparency is a critical element of our mission; sharing information builds greater accountability between the DOCR and the communities we serve.",
   coBrandingCopy:

spotlight-client/src/contentApi/sources/us_pa.ts

@@ -19,6 +19,8 @@ import { TenantContent } from "../types";
 
 const content: TenantContent = {
   name: "Pennsylvania",
+  docName: "Pennsylvania Department of Corrections",
+  docLink: "https://cor.pa.gov",
   description: `
     <a href="https://www.cor.pa.gov">The Pennsylvania Department of Corrections (DOC)</a>
     is committed to enhancing public safety. The DOC's mission is to reduce criminal

spotlight-client/src/contentApi/sources/us_tn.ts

@@ -66,6 +66,8 @@ in a Tennessee court may occasionally complete their supervision in a different
 
 const content: TenantContent = {
   name: "Tennessee",
+  docName: "Tennessee Department of Corrections",
+  docLink: "https://www.tn.gov/correction.html",
   description: "Placeholder for TDOC Mission",
   coBrandingCopy:
     'Produced in collaboration with <a href="https://www.TDOC.Tennessee.gov">the Tennessee Department of Correction</a>.',

spotlight-client/src/contentApi/types.ts

@@ -42,6 +42,8 @@ export type DemographicCategoryFilter = {
 
 export type TenantContent = {
   name: string;
+  docName: string;
+  docLink: string;
   description: string;
   coBrandingCopy: string;
   feedbackUrl: string;

spotlight-client/src/contentModels/RacialDisparitiesNarrative.ts

@@ -416,7 +416,7 @@ export default class RacialDisparitiesNarrative implements Hydratable {
           return {
             label,
             color: colors.dataViz[index],
-            value: records[identifier as RaceIdentifier].totalStatePopulation,
+            value: records[identifier as RaceIdentifier]?.totalStatePopulation,
           };
         })
       ),
@@ -430,7 +430,7 @@ export default class RacialDisparitiesNarrative implements Hydratable {
             label,
             color: colors.dataViz[index],
             value:
-              records[identifier as RaceIdentifier].currentTotalSentencedCount,
+              records[identifier as RaceIdentifier]?.currentTotalSentencedCount,
           };
         })
       ),

spotlight-client/src/contentModels/Tenant.ts

@@ -25,6 +25,8 @@ import { MetricMapping, SystemNarrativeMapping } from "./types";
 type InitOptions = {
   id: TenantId;
   name: string;
+  docName: string;
+  docLink: string;
   description: string;
   coBrandingCopy: string;
   feedbackUrl: string;
@@ -46,6 +48,10 @@ export default class Tenant {
 
   readonly name: string;
 
+  readonly docName: string;
+
+  readonly docLink: string;
+
   readonly description: string;
 
   readonly coBrandingCopy: string;
@@ -63,6 +69,8 @@ export default class Tenant {
   constructor({
     id,
     name,
+    docName,
+    docLink,
     description,
     coBrandingCopy,
     feedbackUrl,
@@ -73,6 +81,8 @@ export default class Tenant {
   }: InitOptions) {
     this.id = id;
     this.name = name;
+    this.docName = docName;
+    this.docLink = docLink;
     this.description = description;
     this.coBrandingCopy = coBrandingCopy;
     this.feedbackUrl = feedbackUrl;
@@ -139,6 +149,8 @@ export function createTenant({ tenantId }: TenantFactoryOptions): Tenant {
   return new Tenant({
     id: tenantId,
     name: allTenantContent.name,
+    docName: allTenantContent.docName,
+    docLink: allTenantContent.docLink,
     description: allTenantContent.description,
     coBrandingCopy: allTenantContent.coBrandingCopy,
     feedbackUrl: allTenantContent.feedbackUrl,

spotlight-client/src/contentModels/__fixtures__/tenant_content_exhaustive.ts

@@ -31,6 +31,8 @@ type ExhaustiveTenantContent = Required<TenantContent> &
 
 const content: ExhaustiveTenantContent = {
   name: "Test Tenant",
+  docName: "Test Tenant Department of Corrections",
+  docLink: "https://example.com/feedback",
   description: "test tenant description",
   coBrandingCopy: "test tenant co-branding",
   feedbackUrl: "https://example.com/feedback",

spotlight-client/src/contentModels/__fixtures__/tenant_content_partial.ts

@@ -19,6 +19,8 @@ import { TenantContent } from "../../contentApi/types";
 
 const content: TenantContent = {
   name: "Test Tenant",
+  docName: "Test Tenant Department of Corrections",
+  docLink: "https://example.com/feedback",
   description: "test tenant description",
   coBrandingCopy: "test tenant co-branding",
   feedbackUrl: "https://example.com/feedback",