From 69414a1b3eaf4ec6c8158bcacea243324dab2248 Mon Sep 17 00:00:00 2001 From: samithaf Date: Tue, 16 Jan 2024 11:28:55 +1100 Subject: [PATCH 1/2] #fixes 646 and set font-display to be block in docs site --- apps/site/tailwind.config.ts | 1 + packages/ui/src/tailwind/tailwind-plugin.ts | 1 + packages/ui/src/tailwind/types/tailwind.types.ts | 1 + packages/ui/src/tailwind/utils/create-brand-fonts.ts | 4 +++- 4 files changed, 6 insertions(+), 1 deletion(-) diff --git a/apps/site/tailwind.config.ts b/apps/site/tailwind.config.ts index 46f4b2545..89dab6404 100644 --- 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/tailwind-plugin.ts b/packages/ui/src/tailwind/tailwind-plugin.ts index d22ad4661..3b7570982 100644 --- 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 index 70fc3860a..3803395c6 100644 --- 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 | Exclude[]; + 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 index ccc5f6173..418d6eff8 100644 --- a/packages/ui/src/tailwind/utils/create-brand-fonts.ts +++ b/packages/ui/src/tailwind/utils/create-brand-fonts.ts @@ -6,8 +6,10 @@ type Brand = Exclude; 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(/\/$/, ''); @@ -15,7 +17,7 @@ export function createBrandFonts({ 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[]); From 39eafdcb0a491c2901e7cd139127b872fd7a98c9 Mon Sep 17 00:00:00 2001 From: samithaf Date: Tue, 16 Jan 2024 11:38:36 +1100 Subject: [PATCH 2/2] fixes unit tests --- .../ui/src/tailwind/__mocks__/utils.constants.ts | 13 +++++++++++++ packages/ui/src/tailwind/utils/utils.spec.ts | 1 + 2 files changed, 14 insertions(+) diff --git a/packages/ui/src/tailwind/__mocks__/utils.constants.ts b/packages/ui/src/tailwind/__mocks__/utils.constants.ts index 62380bb71..f13d0ae15 100644 --- 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/utils/utils.spec.ts b/packages/ui/src/tailwind/utils/utils.spec.ts index c264d132f..dc3d807c0 100644 --- 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', }, }, ]);