@spothero/ui 15.4.0 → 15.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spothero/ui",
-  "version": "15.4.0",
+  "version": "15.5.0",
   "description": "SpotHero's React component UI library.",
   "main": "v2/index.js",
   "repository": "https://github.com/spothero/fe-monorepo",

package/styles/v2/components/ThemeProvider/ThemeProvider.jsx

@@ -7,9 +7,18 @@ import {Fonts, LegacyOverrides} from 'v2/theme/global';
 import merge from 'lodash/merge';
 
 const ThemeProvider = forwardRef(
-    ({theme, useLegacyOverrides, children, ...props}, ref) => (
+    (
+        {
+            theme,
+            useLegacyOverrides,
+            disableExternalFonts = false,
+            children,
+            ...props
+        },
+        ref
+    ) => (
         <ChakraProvider {...props} ref={ref} theme={merge(THEME, theme)}>
-            <Fonts />
+            {disableExternalFonts ? null : <Fonts />}
             <LegacyOverrides useLegacyOverrides={useLegacyOverrides} />
             {children}
         </ChakraProvider>
@@ -19,6 +28,8 @@ const ThemeProvider = forwardRef(
 ThemeProvider.propTypes = {
     /** If true, this will use the old `spothero-html` base styles */
     useLegacyOverrides: PropTypes.bool,
+    /** If true, this will not load the `Fonts` global styles */
+    disableExternalFonts: PropTypes.bool,
     /** The React node (generally your entire App) that will be provided the theme */
     children: PropTypes.node,
     /** Adds additional themeing on top of SpotHero's default configuration */

package/styles/v2/components/ThemeProvider/ThemeProvider.stories.js

@@ -64,6 +64,12 @@ const Template = (props, {hasDarkBackground}) => {
                 a boolean. If true, the ThemeProvider will insert the typography
                 styling from .spothero-html
             </Text>{' '}
+            <Text mb={8} color={contentTextColor}>
+                ThemeProvider also has a <Code>disableExternalFonts</Code> prop
+                that is a boolean. If true, the ThemeProvider will not load the
+                font files from Google's CDN, and you will be able to handle
+                fonts on a project-level.
+            </Text>{' '}
         </Box>
     );
 };

package/styles/v2/theme/base/typography.js

@@ -1,6 +1,6 @@
 export const fonts = {
-    heading: 'Open Sans',
-    body: 'Open Sans',
+    heading: `"Open Sans", sans-serif`,
+    body: `"Open Sans", sans-serif`,
 };
 
 export const fontSizes = {