chore(storybook): Add missing fonts

.storybook/main.ts

@@ -7,11 +7,11 @@ const language = process.env.LANGUAGE;
 
 const config: {
     stories: string[];
-    addons: (string | { name: string; options: { sass: { implementation: any } } })[],
+    addons: (string | { name: string; options: { sass: { implementation: any } } })[];
     framework: { name: string };
     staticDirs: string[];
     webpackFinal: (config: any) => Promise<any>;
-    typescript: any
+    typescript: any;
 } = {
     stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
 
@@ -31,7 +31,7 @@ const config: {
         '@storybook/addon-docs',
         '@storybook/addon-webpack5-compiler-babel',
         '@chromatic-com/storybook',
-        'storybook-react-intl'
+        'storybook-react-intl',
     ],
 
     framework: {
@@ -53,13 +53,22 @@ const config: {
             'box-ui-elements-locale-data': path.resolve(`i18n/${language}`),
             'box-locale-data': path.resolve(`node_modules/@box/cldr-data/locale-data/${language}`),
             'msw/native': path.resolve('node_modules/msw/lib/native/index.mjs'),
+            '@public': path.resolve(__dirname, '../.storybook/public'),
         };
 
+        config.module.rules.push({
+            test: /\.(woff|woff2)$/,
+            type: 'asset/resource',
+            generator: {
+                filename: 'fonts/[name][ext]',
+            },
+        });
+
         return config;
     },
     typescript: {
-        reactDocgen: 'react-docgen-typescript'
-    }
+        reactDocgen: 'react-docgen-typescript',
+    },
 };
 
 export default config;

.storybook/manager-head.html

@@ -1,6 +1,6 @@
 <!-- Replace "Storybook" with custom document title -->
 <script>
-    setTimeout(function() {
+    setTimeout(function () {
         document.title = 'Box UI Elements';
     }, 1000);
 </script>

.storybook/preview.tsx

@@ -7,6 +7,7 @@ import '../src/styles/variables';
 import '../src/styles/base.scss';
 
 import { reactIntl } from './reactIntl';
+import { getFontHandlers } from './utils';
 
 // Constants
 global.FEATURE_FLAGS = global.FEATURE_FLAGS || features;
@@ -38,6 +39,9 @@ const preview = {
                 date: /Date$/,
             },
         },
+        msw: {
+            handlers: [getFontHandlers(['Lato-Regular', 'Lato-Bold', 'Lato-Semibold', 'Lato-Black'])],
+        },
         options: {
             storySort: {
                 order: ['Elements'],

.storybook/public/fonts.css

@@ -0,0 +1,44 @@
+/* stylelint-disable */
+@font-face {
+    font-weight: normal;
+    font-family: 'Lato';
+    font-style: normal;
+    src:
+        url('~@public/fonts/Lato-Regular.woff2') format('woff2'),
+        url('~@public/fonts/Lato-Regular.woff') format('woff');
+    font-display: swap;
+}
+
+@font-face {
+    font-weight: bold;
+    font-family: 'Lato';
+    font-style: normal;
+    src:
+        url('~@public/fonts/Lato-Bold.woff2') format('woff2'),
+        url('~@public/fonts/Lato-Bold.woff') format('woff');
+    font-display: swap;
+}
+
+@font-face {
+    font-weight: 600;
+    font-family: 'Lato';
+    font-style: normal;
+    src:
+        url('~@public/fonts/Lato-Semibold.woff2') format('woff2'),
+        url('~@public/fonts/Lato-Semibold.woff') format('woff');
+    font-display: swap;
+}
+
+@font-face {
+    font-weight: 900;
+    font-family: 'Lato';
+    font-style: normal;
+    src:
+        url('~@public/fonts/Lato-Black.woff2') format('woff2'),
+        url('~@public/fonts/Lato-Black.woff') format('woff');
+    font-display: swap;
+}
+
+body {
+    background-color: red;
+}

.storybook/utils.ts

@@ -0,0 +1,20 @@
+import { http, HttpResponse } from 'msw';
+import { DEFAULT_HOSTNAME_STATIC } from '../src/constants';
+
+export const getFontHandlers = (fonts: string[]) => {
+    return fonts.reduce((acc, font) => {
+        acc.push(
+            ...['woff2,woff'].map(fontExtension => {
+                return http.get(`${DEFAULT_HOSTNAME_STATIC}/fonts/1.0.17/lato/${font}`, async () => {
+                    return HttpResponse.json(new Blob([], { type: `font/${fontExtension}` }), {
+                        status: 200,
+                        headers: {
+                            'Content-Type': `font/${fontExtension}`,
+                        },
+                    });
+                });
+            }),
+        );
+        return acc;
+    }, []);
+};

src/elements/content-explorer/stories/tests/ContentExplorer-visual.stories.js

@@ -244,6 +244,9 @@ export const searchEmptyState = {
     },
     play: async ({ canvasElement }) => {
         const canvas = within(canvasElement);
+        await waitFor(() => {
+            expect(canvas.getByText('test')).toBeInTheDocument();
+        });
         const searchBar = canvas.getByRole('searchbox', { name: 'Search files and folders' });
         await userEvent.type(searchBar, 'foo');
 

src/elements/content-preview/stories/tests/ContentPreview-visual.stories.js

@@ -116,7 +116,7 @@ export const hoverOverCitation = {
 
         expect(modal.getByText('Based on:')).toBeInTheDocument();
 
-        const citations = await modal.getAllByTestId('content-answers-citation-status')
+        const citations = await modal.getAllByTestId('content-answers-citation-status');
         const citation = citations[0];
         expect(citation).toBeInTheDocument();
         await userEvent.hover(citation);