chore: fix storybook fonts (#988)

greyscaled · web-flow · commit 0536a140edc8 · 2022-04-13T12:03:30.000-04:00
Summary: Configures storybook with MUI themes as according to their documentation. We were previously not aligned with their example. See: https://storybook.js.org/addons/@react-theming/storybook-addon Details: - configure a providerFn for MUI with CssBaseline. We were previously missing the CssBaseline implementation, causing the inconsistency. Impact: Resolves inconsistency between Storybook and production. I had tested the Tabpanel in production vs Storybook. In storybook, the font had fallen back to Times New Roman, whereas in production it had fallen back to Inter. This was because of CssBaseline being configured as a child of ThemeProvider. Resolves: #914
diff --git a/site/.storybook/preview.js b/site/.storybook/preview.js
@@ -1,3 +1,4 @@
+import CssBaseline from "@material-ui/core/CssBaseline"
 import ThemeProvider from "@material-ui/styles/ThemeProvider"
 import { withThemes } from "@react-theming/storybook-addon"
 import { createMemoryHistory } from "history"
@@ -6,7 +7,14 @@ import { unstable_HistoryRouter as HistoryRouter } from "react-router-dom"
 import { dark, light } from "../src/theme"
 import "../src/theme/global-fonts"
 
-addDecorator(withThemes(ThemeProvider, [light, dark]))
+const providerFn = ({ children, theme }) => (
+  <ThemeProvider theme={theme}>
+    <CssBaseline />
+    {children}
+  </ThemeProvider>
+)
+
+addDecorator(withThemes(null, [light, dark], { providerFn }))
 
 const history = createMemoryHistory()
 
