Merge pull request #647 from WestpacGEL/646-enable-font-display-confi…

…guration 646 enable font display configuration
WestpacGEL · Jan 16, 2024 · bf4400b · bf4400b · vercel · Jan 16, 2024
2 parents 07e3469 + 39eafdc
commit bf4400b
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 1 deletion.
diff --git a/apps/site/tailwind.config.ts b/apps/site/tailwind.config.ts
@@ -115,6 +115,7 @@ const config: Config = withGEL({
   options: {
     brandFonts: {
       src: '/fonts',
+      display: 'block',
     },
   },
 });

diff --git a/packages/ui/src/tailwind/__mocks__/utils.constants.ts b/packages/ui/src/tailwind/__mocks__/utils.constants.ts
@@ -162,6 +162,7 @@ export const EXPECTED_FONT_FACES = [
       'font-family': 'Brown Pro',
       'font-weight': '100 300',
       'font-style': 'normal',
+      'font-display': 'auto',
     },
   },
   {
@@ -170,6 +171,7 @@ export const EXPECTED_FONT_FACES = [
       'font-family': 'Brown Pro',
       'font-weight': '400 600',
       'font-style': 'normal',
+      'font-display': 'auto',
     },
   },
   {
@@ -178,6 +180,7 @@ export const EXPECTED_FONT_FACES = [
       'font-family': 'Brown Pro',
       'font-weight': '700 900',
       'font-style': 'normal',
+      'font-display': 'auto',
     },
   },
   {
@@ -186,6 +189,7 @@ export const EXPECTED_FONT_FACES = [
       'font-family': 'Aller',
       'font-weight': '100 600',
       'font-style': 'normal',
+      'font-display': 'auto',
     },
   },
   {
@@ -194,6 +198,7 @@ export const EXPECTED_FONT_FACES = [
       'font-family': 'Aller',
       'font-weight': '700 900',
       'font-style': 'normal',
+      'font-display': 'auto',
     },
   },
   {
@@ -202,6 +207,7 @@ export const EXPECTED_FONT_FACES = [
       'font-family': 'Source Sans Pro',
       'font-weight': '100 500',
       'font-style': 'normal',
+      'font-display': 'auto',
     },
   },
   {
@@ -210,6 +216,7 @@ export const EXPECTED_FONT_FACES = [
       'font-family': 'Source Sans Pro',
       'font-weight': '600',
       'font-style': 'normal',
+      'font-display': 'auto',
     },
   },
   {
@@ -218,6 +225,7 @@ export const EXPECTED_FONT_FACES = [
       'font-family': 'Source Sans Pro',
       'font-weight': '700 900',
       'font-style': 'normal',
+      'font-display': 'auto',
     },
   },
   {
@@ -226,6 +234,7 @@ export const EXPECTED_FONT_FACES = [
       'font-family': 'Dragon Bold',
       'font-weight': '100 900',
       'font-style': 'normal',
+      'font-display': 'auto',
     },
   },
   {
@@ -234,6 +243,7 @@ export const EXPECTED_FONT_FACES = [
       'font-family': 'Westpac',
       'font-weight': '100 900',
       'font-style': 'normal',
+      'font-display': 'auto',
     },
   },
   {
@@ -242,6 +252,7 @@ export const EXPECTED_FONT_FACES = [
       'font-family': 'Montserrat',
       'font-weight': '100 300',
       'font-style': 'normal',
+      'font-display': 'auto',
     },
   },
   {
@@ -250,6 +261,7 @@ export const EXPECTED_FONT_FACES = [
       'font-family': 'Montserrat',
       'font-weight': '400 600',
       'font-style': 'normal',
+      'font-display': 'auto',
     },
   },
   {
@@ -258,6 +270,7 @@ export const EXPECTED_FONT_FACES = [
       'font-family': 'Montserrat',
       'font-weight': '700 900',
       'font-style': 'normal',
+      'font-display': 'auto',
     },
   },
 ];
diff --git a/packages/ui/src/tailwind/tailwind-plugin.ts b/packages/ui/src/tailwind/tailwind-plugin.ts
@@ -32,6 +32,7 @@ export const WestpacUIKitBasePlugin = plugin.withOptions(
         const fonts = createBrandFonts({
           src: options.brandFonts.src,
           brand: options.brandFonts?.brands,
+          display: options.brandFonts?.display,
         });
         fonts.forEach(font => addBase(font));
       }

diff --git a/packages/ui/src/tailwind/types/tailwind.types.ts b/packages/ui/src/tailwind/types/tailwind.types.ts
@@ -3,6 +3,7 @@ import { type BrandKey } from './brand.types.js';
 export type PluginOptions = {
   brandFonts?: {
     brands?: Exclude<BrandKey, 'btfg'> | Exclude<BrandKey, 'btfg'>[];
+    display?: 'auto' | 'block' | 'swap' | 'fallback' | 'optional';
     src: string;
   };
 };
diff --git a/packages/ui/src/tailwind/utils/create-brand-fonts.ts b/packages/ui/src/tailwind/utils/create-brand-fonts.ts
@@ -6,16 +6,18 @@ type Brand = Exclude<BrandKey, 'btfg'>;
 export function createBrandFonts({
   src = '',
   brand = ['bom', 'bsa', 'rams', 'stg', 'wbc', 'wbg'],
+  display = 'auto',
 }: {
   brand?: Brand | Brand[];
+  display?: 'auto' | 'block' | 'swap' | 'fallback' | 'optional';
   src: string;
 }) {
   const trimSrc = src.replace(/\/$/, '');
   const brandList: Brand[] = Array.isArray(brand) ? brand : [brand];
 
   return brandList.reduce((acc, curr) => {
     const fonts = BRAND_FONTS[curr].map(font => ({
-      '@font-face': { ...font, src: font.src.replace(/{src}/g, trimSrc) },
+      '@font-face': { ...font, src: font.src.replace(/{src}/g, trimSrc), 'font-display': display },
     }));
     return [...acc, ...fonts];
   }, [] as FontFace[]);

diff --git a/packages/ui/src/tailwind/utils/utils.spec.ts b/packages/ui/src/tailwind/utils/utils.spec.ts
@@ -103,6 +103,7 @@ describe('Utils testing', () => {
             'font-family': 'Westpac',
             'font-weight': '100 900',
             'font-style': 'normal',
+            'font-display': 'auto',
           },
         },
       ]);