Use ChartWrapper from design system (#531)

* Bumped design-system

* Using ChartWrapper from design-system

* Fixes

* Bumped design system

* Removed ChartWrapper component

* Tests fixes

* More tests fixes

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": "^0.5.2",
+    "@recidiviz/design-system": "^3.3.1",
     "@types/body-scroll-lock": "^2.6.1",
     "@types/classnames": "^2.2.11",
     "@types/d3-array": "^2.9.0",

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

@@ -15,11 +15,12 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 // =============================================================================
 
-import { fireEvent, render, screen, within } from "@testing-library/react";
+import { fireEvent, screen, within } from "@testing-library/react";
 import React from "react";
 import createMetricMapping from "../contentModels/createMetricMapping";
 import HistoricalPopulationBreakdownMetric from "../contentModels/HistoricalPopulationBreakdownMetric";
 import contentFixture from "../contentModels/__fixtures__/tenant_content_exhaustive";
+import { renderWithTheme } from "../testUtils";
 import MetricVizControls from "./MetricVizControls";
 
 const testTenantId = "US_ND";
@@ -41,7 +42,7 @@ test("download button", () => {
   const metric = getTestMetric();
   jest.spyOn(metric, "download").mockImplementation(() => Promise.resolve());
 
-  render(<MetricVizControls filters={[]} metric={metric} />);
+  renderWithTheme(<MetricVizControls filters={[]} metric={metric} />);
 
   const download = screen.getByRole("button", { name: "Download Data" });
   expect(download).toBeVisible();
@@ -52,7 +53,7 @@ test("download button", () => {
 
 test("methodology modal", () => {
   const metric = getTestMetric();
-  render(<MetricVizControls filters={[]} metric={metric} />);
+  renderWithTheme(<MetricVizControls filters={[]} metric={metric} />);
 
   const methodology = screen.getByRole("button", { name: "Methodology" });
 

spotlight-client/src/StoreProvider/StoreProvider.tsx

@@ -15,7 +15,9 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 // =============================================================================
 
+import { AVAILABLE_FONTS } from "@recidiviz/design-system";
 import React, { useContext } from "react";
+import { ThemeProvider } from "styled-components/macro";
 import DataStore from "../DataStore";
 
 const StoreContext = React.createContext<typeof DataStore | undefined>(
@@ -24,7 +26,17 @@ const StoreContext = React.createContext<typeof DataStore | undefined>(
 
 const StoreProvider: React.FC = ({ children }) => {
   return (
-    <StoreContext.Provider value={DataStore}>{children}</StoreContext.Provider>
+    <ThemeProvider
+      theme={{
+        fonts: {
+          body: AVAILABLE_FONTS.LIBRE_FRANKLIN,
+        },
+      }}
+    >
+      <StoreContext.Provider value={DataStore}>
+        {children}
+      </StoreContext.Provider>
+    </ThemeProvider>
   );
 };
 

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

@@ -15,15 +15,16 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 // =============================================================================
 
-import { fireEvent, render, screen, within } from "@testing-library/react";
+import { fireEvent, screen, within } from "@testing-library/react";
 import React from "react";
+import { renderWithTheme } from "../testUtils";
 import VizControls from "./VizControls";
 
 const mockDownload = jest.fn();
 const mockMethodology = "test methodology";
 
 beforeEach(() => {
-  render(
+  renderWithTheme(
     <VizControls
       filters={[]}
       download={mockDownload}

spotlight-client/src/VizNotes/UnknownsNote.test.tsx

@@ -15,12 +15,13 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 // =============================================================================
 
-import { getDefaultNormalizer, render, screen } from "@testing-library/react";
+import { getDefaultNormalizer, screen } from "@testing-library/react";
 import React from "react";
+import { renderWithTheme } from "../testUtils";
 import { UnknownsNote } from "./UnknownsNote";
 
 test("format single unknowns", () => {
-  render(
+  renderWithTheme(
     <UnknownsNote
       download={() => {
         // empty

spotlight-client/src/charts/BarChartTrellis.tsx

@@ -18,7 +18,7 @@
 import React, { useState, useCallback } from "react";
 import { OrdinalFrame } from "semiotic";
 import styled from "styled-components/macro";
-import ChartWrapper from "./ChartWrapper";
+import { ChartWrapper } from "@recidiviz/design-system";
 import ResponsiveTooltipController, {
   ResponsiveTooltipControllerProps,
 } from "./ResponsiveTooltipController";

spotlight-client/src/charts/RateCohorts.tsx

@@ -17,12 +17,12 @@
 
 import React, { useCallback } from "react";
 import OrdinalFrame from "semiotic/lib/OrdinalFrame";
+import { ChartWrapper } from "@recidiviz/design-system";
 import styled from "styled-components/macro";
 import MeasureWidth from "../MeasureWidth";
 import { isRateFields, RateFields } from "../metricsApi";
 import { animation, colors } from "../UiLibrary";
 import { formatAsNumber, formatAsPct } from "../utils";
-import ChartWrapper from "./ChartWrapper";
 import ResponsiveTooltipController from "./ResponsiveTooltipController";
 import { highlightFade, useHighlightedItem } from "./utils";
 

spotlight-client/src/charts/RateTrend.tsx

@@ -19,7 +19,7 @@ import React, { useEffect, useState } from "react";
 import { XYFrameProps } from "semiotic/lib/types/xyTypes";
 import XYFrame from "semiotic/lib/XYFrame";
 import styled from "styled-components/macro";
-import ChartWrapperBase from "./ChartWrapper";
+import { ChartWrapper as BaseChartWrapper } from "@recidiviz/design-system";
 import ColorLegend from "./ColorLegend";
 import { formatAsNumber, formatAsPct } from "../utils";
 import XHoverController from "./XHoverController";
@@ -86,7 +86,7 @@ const MARGIN = { bottom: 65, left: 56, right: 16, top: 48 };
 export const CHART_HEIGHT = 475;
 export const MIN_LEGEND_HEIGHT = 16;
 
-const ChartWrapper = styled(ChartWrapperBase)`
+const ChartWrapper = styled(BaseChartWrapper)`
   .frame {
     .visualization-layer {
       shape-rendering: geometricPrecision;

spotlight-client/src/charts/WindowedTimeSeries.tsx

@@ -22,9 +22,9 @@ import React, { useCallback, useEffect, useState } from "react";
 import MinimapXYFrame from "semiotic/lib/MinimapXYFrame";
 import XYFrame from "semiotic/lib/XYFrame";
 import styled from "styled-components/macro";
+import { ChartWrapper as BaseChartWrapper } from "@recidiviz/design-system";
 import { animation, colors } from "../UiLibrary";
 import { formatAsNumber } from "../utils";
-import BaseChartWrapper from "./ChartWrapper";
 import { highlightFade, useHighlightedItem } from "./utils";
 import ColorLegend from "./ColorLegend";
 import XHoverController from "./XHoverController";
@@ -46,6 +46,10 @@ const LegendWrapper = styled.div`
 
 const ChartWrapper = styled(BaseChartWrapper)`
   .frame {
+    .xyframe-matte {
+      fill: ${colors.background};
+    }
+
     .visualization-layer {
       shape-rendering: geometricPrecision;
 

spotlight-client/src/testUtils/testUtils.tsx

@@ -15,6 +15,7 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 // =============================================================================
 
+import { AVAILABLE_FONTS } from "@recidiviz/design-system";
 import {
   createHistory,
   createMemorySource,
@@ -24,6 +25,7 @@ import { render, RenderResult } from "@testing-library/react";
 import React from "react";
 import { autorun } from "mobx";
 import waitForLocalhost from "wait-for-localhost";
+import { ThemeProvider } from "styled-components/macro";
 import App from "../App";
 import StoreProvider from "../StoreProvider";
 
@@ -73,3 +75,21 @@ export function renderWithStore(ui: React.ReactElement): RenderResult {
     wrapper: StoreProvider,
   });
 }
+
+const BaseThemeProvider: React.FC = ({ children }) => {
+  return (
+    <ThemeProvider
+      theme={{
+        fonts: {
+          body: AVAILABLE_FONTS.LIBRE_FRANKLIN,
+        },
+      }}
+    >
+      {children}
+    </ThemeProvider>
+  );
+};
+
+export function renderWithTheme(ui: React.ReactElement): RenderResult {
+  return render(ui, { wrapper: BaseThemeProvider });
+}