feat: Percipio theme + theme switcher tool

packages/gamut-styles/src/AssetProvider.tsx

@@ -1,11 +1,29 @@
+import { Theme } from '@emotion/react';
+import * as React from 'react';
+
 import { webFonts } from './remoteAssets/fonts';
+import { coreTheme } from './themes';
+import { FontConfig, getFonts } from './utils/fontUtils';
 
 /*
  * Only preload woff2 fonts, since woff1 are only included as fallbacks.
  */
-export const createFontLinks = () =>
-  webFonts
-    .filter((f) => f.extensions.includes('woff2'))
+export const createFontLinks = (fonts?: readonly FontConfig[]) => {
+  const currentFonts = fonts ?? webFonts.core;
+
+  if (!Array.isArray(currentFonts)) {
+    return [];
+  }
+
+  return currentFonts
+    .filter(
+      (f) =>
+        f?.extensions &&
+        Array.isArray(f.extensions) &&
+        f.extensions.includes('woff2') &&
+        f.filePath &&
+        f.filePath.trim() !== ''
+    )
     .map(({ filePath }) => (
       <link
         as="font"
@@ -16,7 +34,19 @@ export const createFontLinks = () =>
         type="font/woff2"
       />
     ));
+};
+
+export const AssetProvider: React.FC<{ theme?: Theme }> = ({ theme }) => {
+  try {
+    const defaultTheme = theme ?? coreTheme;
+    const themeName = defaultTheme?.name || 'core';
+    const fonts = getFonts(themeName);
 
-export const AssetProvider = () => {
-  return <>{createFontLinks()}</>;
+    return <>{createFontLinks(fonts)}</>;
+  } catch (error) {
+    // Handle font loading errors gracefully
+    // eslint-disable-next-line no-console
+    console.warn('Font loading failed:', error);
+    return null;
+  }
 };

packages/gamut-styles/src/GamutProvider.tsx

@@ -64,8 +64,8 @@ export const GamutProvider: React.FC<GamutProviderProps> = ({
 
   const globals = shouldInsertGlobals && (
     <>
-      <Typography />
-      <Reboot />
+      <Typography theme={theme} />
+      <Reboot theme={theme} />
       <Variables variables={theme._variables} />
       {variables && <Variables variables={variables} />}
     </>

packages/gamut-styles/src/__tests__/AssetProvider.test.tsx

@@ -0,0 +1,333 @@
+import '@testing-library/jest-dom';
+
+import { setupRtl } from '@codecademy/gamut-tests';
+import { render } from '@testing-library/react';
+
+import { AssetProvider, createFontLinks } from '../AssetProvider';
+import { coreTheme, percipioTheme } from '../themes';
+
+const renderView = setupRtl(AssetProvider, {});
+
+jest.mock('../utils/fontUtils', () => ({
+  getFonts: jest.fn(),
+}));
+
+jest.mock('../remoteAssets/fonts', () => ({
+  webFonts: {
+    core: [
+      {
+        filePath: 'https://www.codecademy.com/gamut/apercu-regular-pro',
+        extensions: ['woff2', 'woff'],
+        name: 'Apercu',
+      },
+      {
+        filePath: 'https://www.codecademy.com/gamut/apercu-bold-pro',
+        extensions: ['woff2', 'woff'],
+        name: 'Apercu',
+        weight: 'bold',
+      },
+    ],
+    percipio: [
+      {
+        filePath: 'https://www.codecademy.com/gamut/roboto-regular',
+        extensions: ['woff2', 'woff'],
+        name: 'Roboto',
+      },
+      {
+        filePath: 'https://www.codecademy.com/gamut/roboto-bold',
+        extensions: ['woff2', 'woff'],
+        name: 'Roboto',
+        weight: 'bold',
+      },
+    ],
+  },
+}));
+
+const mockGetFonts = require('../utils/fontUtils').getFonts;
+
+describe('AssetProvider', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('createFontLinks', () => {
+    it('should create font links for woff2 fonts only', () => {
+      const fonts = [
+        {
+          filePath: 'https://www.codecademy.com/gamut/test-font',
+          extensions: ['woff2', 'woff'],
+          name: 'Test Font',
+        },
+        {
+          filePath: 'https://www.codecademy.com/gamut/test-font-woff1-only',
+          extensions: ['woff'],
+          name: 'Test Font Woff1',
+        },
+      ];
+
+      const { container } = render(<>{createFontLinks(fonts)}</>);
+      const links = container.querySelectorAll('link[rel="preload"]');
+
+      expect(links).toHaveLength(1);
+      expect(links[0]).toHaveAttribute(
+        'href',
+        'https://www.codecademy.com/gamut/test-font.woff2'
+      );
+      expect(links[0]).toHaveAttribute('type', 'font/woff2');
+      expect(links[0]).toHaveAttribute('as', 'font');
+      expect(links[0]).toHaveAttribute('crossOrigin', 'anonymous');
+    });
+
+    it('should handle empty fonts array', () => {
+      const { container } = render(<>{createFontLinks([])}</>);
+      const links = container.querySelectorAll('link[rel="preload"]');
+      expect(links).toHaveLength(0);
+    });
+
+    it('should handle undefined fonts parameter', () => {
+      const { container } = render(<>{createFontLinks(undefined)}</>);
+      const links = container.querySelectorAll('link[rel="preload"]');
+      expect(links).toHaveLength(2);
+    });
+
+    it('should filter out fonts without woff2 extension', () => {
+      const fonts = [
+        {
+          filePath: 'https://www.codecademy.com/gamut/font-with-woff2',
+          extensions: ['woff2', 'woff'],
+          name: 'Font With Woff2',
+        },
+        {
+          filePath: 'https://www.codecademy.com/gamut/font-woff1-only',
+          extensions: ['woff'],
+          name: 'Font Woff1 Only',
+        },
+        {
+          filePath: 'https://www.codecademy.com/gamut/font-no-extensions',
+          extensions: [],
+          name: 'Font No Extensions',
+        },
+      ];
+
+      const { container } = render(<>{createFontLinks(fonts)}</>);
+      const links = container.querySelectorAll('link[rel="preload"]');
+      expect(links).toHaveLength(1);
+      expect(links[0]).toHaveAttribute(
+        'href',
+        'https://www.codecademy.com/gamut/font-with-woff2.woff2'
+      );
+    });
+
+    it('should handle malformed font configurations gracefully', () => {
+      const fonts = [
+        {
+          filePath: 'https://www.codecademy.com/gamut/valid-font',
+          extensions: ['woff2'],
+          name: 'Valid Font',
+        },
+        {
+          // Missing required properties
+          filePath: '',
+          extensions: ['woff2'],
+          name: '',
+        } as any,
+        {
+          filePath: 'https://www.codecademy.com/gamut/another-valid-font',
+          extensions: ['woff2'],
+          name: 'Another Valid Font',
+        },
+      ];
+
+      const { container } = render(<>{createFontLinks(fonts)}</>);
+      const links = container.querySelectorAll('link[rel="preload"]');
+      expect(links).toHaveLength(2);
+    });
+  });
+
+  describe('AssetProvider component', () => {
+    it('should render font links for core theme by default', () => {
+      mockGetFonts.mockReturnValue([
+        {
+          filePath: 'https://www.codecademy.com/gamut/apercu-regular-pro',
+          extensions: ['woff2', 'woff'],
+          name: 'Apercu',
+        },
+      ]);
+
+      const { view } = renderView();
+      const links = view.container.querySelectorAll('link[rel="preload"]');
+
+      expect(links).toHaveLength(1);
+      expect(links[0]).toHaveAttribute(
+        'href',
+        'https://www.codecademy.com/gamut/apercu-regular-pro.woff2'
+      );
+      expect(mockGetFonts).toHaveBeenCalledWith('core');
+    });
+
+    it('should render font links for percipio theme', () => {
+      mockGetFonts.mockReturnValue([
+        {
+          filePath: 'https://www.codecademy.com/gamut/roboto-regular',
+          extensions: ['woff2', 'woff'],
+          name: 'Roboto',
+        },
+      ]);
+
+      const { view } = renderView({ theme: percipioTheme as any });
+      const links = view.container.querySelectorAll('link[rel="preload"]');
+
+      expect(links).toHaveLength(1);
+      expect(links[0]).toHaveAttribute(
+        'href',
+        'https://www.codecademy.com/gamut/roboto-regular.woff2'
+      );
+      expect(mockGetFonts).toHaveBeenCalledWith('percipio');
+    });
+
+    it('should handle theme without name property', () => {
+      const themeWithoutName = { ...coreTheme, name: undefined };
+      mockGetFonts.mockReturnValue([]);
+
+      renderView({ theme: themeWithoutName });
+      expect(mockGetFonts).toHaveBeenCalledWith('core');
+    });
+
+    it('should handle theme with invalid name', () => {
+      const themeWithInvalidName = { ...coreTheme, name: 'invalid-theme' };
+      mockGetFonts.mockReturnValue([]);
+
+      renderView({ theme: themeWithInvalidName });
+      expect(mockGetFonts).toHaveBeenCalledWith('invalid-theme');
+    });
+
+    it('should handle getFonts throwing an error', () => {
+      mockGetFonts.mockImplementation(() => {
+        throw new Error('Font loading failed');
+      });
+
+      const { view } = renderView();
+      const links = view.container.querySelectorAll('link[rel="preload"]');
+      expect(links).toHaveLength(0);
+    });
+
+    it('should fallback to core fonts when getFonts returns undefined', () => {
+      mockGetFonts.mockReturnValue(undefined);
+
+      const { view } = renderView();
+      const links = view.container.querySelectorAll('link[rel="preload"]');
+      expect(links).toHaveLength(2);
+    });
+
+    it('should fallback to core fonts when getFonts returns null', () => {
+      mockGetFonts.mockReturnValue(null);
+
+      const { view } = renderView();
+      const links = view.container.querySelectorAll('link[rel="preload"]');
+      expect(links).toHaveLength(2);
+    });
+
+    it('should fallback to core fonts when getFonts returns non-array', () => {
+      mockGetFonts.mockReturnValue('not-an-array');
+
+      const { view } = renderView();
+      const links = view.container.querySelectorAll('link[rel="preload"]');
+      expect(links).toHaveLength(0);
+    });
+
+    it('should render multiple font links when multiple fonts are provided', () => {
+      mockGetFonts.mockReturnValue([
+        {
+          filePath: 'https://www.codecademy.com/gamut/font1',
+          extensions: ['woff2'],
+          name: 'Font 1',
+        },
+        {
+          filePath: 'https://www.codecademy.com/gamut/font2',
+          extensions: ['woff2'],
+          name: 'Font 2',
+        },
+        {
+          filePath: 'https://www.codecademy.com/gamut/font3',
+          extensions: ['woff2'],
+          name: 'Font 3',
+        },
+      ]);
+
+      const { view } = renderView();
+      const links = view.container.querySelectorAll('link[rel="preload"]');
+
+      expect(links).toHaveLength(3);
+      expect(links[0]).toHaveAttribute(
+        'href',
+        'https://www.codecademy.com/gamut/font1.woff2'
+      );
+      expect(links[1]).toHaveAttribute(
+        'href',
+        'https://www.codecademy.com/gamut/font2.woff2'
+      );
+      expect(links[2]).toHaveAttribute(
+        'href',
+        'https://www.codecademy.com/gamut/font3.woff2'
+      );
+    });
+
+    it('should only rnder valid font configurations ', () => {
+      mockGetFonts.mockReturnValue([
+        {
+          filePath: 'https://www.codecademy.com/gamut/valid-font',
+          extensions: ['woff2'],
+          name: 'Valid Font',
+        },
+        {
+          filePath: '', // Empty filePath
+          extensions: ['woff2'],
+          name: 'Empty Path Font',
+        },
+        {
+          // Missing filePath entirely
+          extensions: ['woff2'],
+          name: 'Missing Path Font',
+        } as any,
+      ]);
+
+      const { view } = renderView();
+      const links = view.container.querySelectorAll('link[rel="preload"]');
+
+      expect(links).toHaveLength(1);
+      expect(links[0]).toHaveAttribute(
+        'href',
+        'https://www.codecademy.com/gamut/valid-font.woff2'
+      );
+    });
+
+    it('should handle font configurations with missing extensions', () => {
+      mockGetFonts.mockReturnValue([
+        {
+          filePath: 'https://www.codecademy.com/gamut/font-with-extensions',
+          extensions: ['woff2'],
+          name: 'Font With Extensions',
+        },
+        {
+          filePath: 'https://www.codecademy.com/gamut/font-no-extensions',
+          extensions: undefined,
+          name: 'Font No Extensions',
+        } as any,
+        {
+          filePath: 'https://www.codecademy.com/gamut/font-empty-extensions',
+          extensions: [],
+          name: 'Font Empty Extensions',
+        },
+      ]);
+
+      const { view } = renderView();
+      const links = view.container.querySelectorAll('link[rel="preload"]');
+
+      expect(links).toHaveLength(1);
+      expect(links[0]).toHaveAttribute(
+        'href',
+        'https://www.codecademy.com/gamut/font-with-extensions.woff2'
+      );
+    });
+  });
+});