Merge pull request #282 from WestpacGEL/feature/brand-font-plugin-opt…

…ions

feature(fonts): add brand font options to tailwind plugin

.changeset/six-snakes-wait.md

@@ -0,0 +1,5 @@
+---
+'@westpac/ui': minor
+---
+
+Add brand font options to withGEL tailwind plugin

README.md

@@ -43,17 +43,21 @@ const config = withGEL({
 export default config;
 ```
 
-For applications using `brand fonts`, import the custom fonts as follows in your main `CSS` file.
-
-```css
-/* WBC fonts */
-@font-face {
-  src: url('/path-to-the-font/Westpac-Bold-v2.007.woff2') format('woff2'), url('/path-to-the-font/Westpac-Bold-v2.007.woff')
-      format('woff');
-  font-family: 'Westpac';
-  font-weight: 400;
-  font-style: normal;
-}
+For applications using `brand fonts` add the following options config to the `withGEL` helper.
+
+```ts
+const config = withGEL({
+  relative: true,
+  mode: 'jit',
+  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}', './node_modules/@westpac/ui/src/**/*.{js,ts,jsx,tsx,mdx}'],
+  safelist: [],
+  options: {
+    brandFonts: {
+      src: '/fonts', // path to font files
+      brands: ['wbc', 'stg'], // takes a single brand string e.g. 'wbc' or an array of brands. If no brands are specified will import all brands by default
+    },
+  },
+});
 ```
 
 ### Usage

apps/site/src/app/styles/globals.css

@@ -2,108 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-/* e.g: How to setup a font for a Brand, in this case for RAMS brand */
-
-/* BOM fonts */
-@font-face {
-  src: url('/fonts/lineto-brown-pro-light.woff2') format('woff2'),
-    url('/fonts/lineto-brown-pro-light.woff') format('woff');
-  font-family: 'Brown Pro';
-  font-weight: 300;
-  font-style: normal;
-}
-@font-face {
-  src: url('/fonts/lineto-brown-pro-regular.woff2') format('woff2'),
-    url('/fonts/lineto-brown-pro-regular.woff') format('woff');
-  font-family: 'Brown Pro';
-  font-weight: 400;
-  font-style: normal;
-}
-@font-face {
-  src: url('/fonts/lineto-brown-pro-bold.woff2') format('woff2'),
-    url('/fonts/lineto-brown-pro-bold.woff') format('woff');
-  font-family: 'Brown Pro';
-  font-weight: 700;
-  font-style: normal;
-}
-
-/* BSA fonts */
-@font-face {
-  src: url('/fonts/Aller_Lt.woff2') format('woff2'), url('/fonts/Aller_Lt.woff') format('woff');
-  font-family: 'Aller';
-  font-weight: 300;
-  font-style: normal;
-}
-@font-face {
-  src: url('/fonts/Aller_Bd.woff2') format('woff2'), url('/fonts/Aller_Bd.woff') format('woff');
-  font-family: 'Aller';
-  font-weight: 700;
-  font-style: normal;
-}
-
-/* RAMS fonts */
-@font-face {
-  src: url('/fonts/source-sans-pro-v14-latin-regular.woff2') format('woff2'),
-    url('/fonts/source-sans-pro-v14-latin-regular.woff') format('woff');
-  font-family: 'Source Sans Pro';
-  font-weight: normal;
-  font-style: normal;
-}
-@font-face {
-  src: url('/fonts/source-sans-pro-v14-latin-600.woff2') format('woff2'),
-    url('/fonts/source-sans-pro-v14-latin-600.woff') format('woff');
-  font-family: 'Source Sans Pro';
-  font-weight: 600;
-  font-style: normal;
-}
-@font-face {
-  src: url('/fonts/source-sans-pro-v14-latin-700.woff2') format('woff2'),
-    url('/fonts/source-sans-pro-v14-latin-700.woff') format('woff');
-  font-family: 'Source Sans Pro';
-  font-weight: 700;
-  font-style: normal;
-}
-
-/* STG fonts */
-@font-face {
-  src: url('/fonts/dragonbold-bold-webfont.woff2') format('woff2'),
-    url('/fonts/dragonbold-bold-webfont.woff') format('woff');
-  font-family: 'Dragon Bold';
-  font-weight: 400;
-  font-style: normal;
-}
-
-/* WBC fonts */
-@font-face {
-  src: url('/fonts/Westpac-Bold-v2.007.woff2') format('woff2'), url('/fonts/Westpac-Bold-v2.007.woff') format('woff');
-  font-family: 'Westpac';
-  font-weight: 400;
-  font-style: normal;
-}
-
-/* RBG fonts */
-@font-face {
-  src: url('/fonts/montserrat-v14-latin-300.woff2') format('woff2'),
-    url('/fonts/montserrat-v14-latin-300.woff') format('woff');
-  font-family: 'Montserrat';
-  font-weight: 300;
-  font-style: normal;
-}
-@font-face {
-  src: url('/fonts/montserrat-v14-latin-regular.woff2') format('woff2'),
-    url('/fonts/montserrat-v14-latin-regular.woff') format('woff');
-  font-family: 'Montserrat';
-  font-weight: 400;
-  font-style: normal;
-}
-@font-face {
-  src: url('/fonts/montserrat-v14-latin-700.woff2') format('woff2'),
-    url('/fonts/montserrat-v14-latin-700.woff') format('woff');
-  font-family: 'Montserrat';
-  font-weight: 700;
-  font-style: normal;
-}
-
 /* GEL fonts */
 @font-face {
   src: url('/fonts/Graphik-Regular-Web.woff') format('woff');

apps/site/tailwind.config.ts

@@ -73,6 +73,11 @@ const config: Config = withGEL({
     'bg-success-20',
   ],
   plugins: [SitePlugin],
+  options: {
+    brandFonts: {
+      src: '/fonts',
+    },
+  },
 });
 
 export default config;

packages/ui/.storybook/global.css

@@ -2,107 +2,8 @@
 @tailwind components;
 @tailwind utilities;
 
-@layer base {
-  /* BOM fonts */
-  @font-face {
-    src: url('/fonts/lineto-brown-pro-light.woff2') format('woff2'),
-      url('/fonts/lineto-brown-pro-light.woff') format('woff');
-    font-family: 'Brown Pro';
-    font-weight: 300;
-    font-style: normal;
-  }
-  @font-face {
-    src: url('/fonts/lineto-brown-pro-regular.woff2') format('woff2'),
-      url('/fonts/lineto-brown-pro-regular.woff') format('woff');
-    font-family: 'Brown Pro';
-    font-weight: 400;
-    font-style: normal;
-  }
-  @font-face {
-    src: url('/fonts/lineto-brown-pro-bold.woff2') format('woff2'),
-      url('/fonts/lineto-brown-pro-bold.woff') format('woff');
-    font-family: 'Brown Pro';
-    font-weight: 700;
-    font-style: normal;
-  }
-
-  /* BSA fonts */
-  @font-face {
-    src: url('/fonts/Aller_Lt.woff2') format('woff2'), url('/fonts/Aller_Lt.woff') format('woff');
-    font-family: 'Aller';
-    font-weight: 300;
-    font-style: normal;
-  }
-  @font-face {
-    src: url('/fonts/Aller_Bd.woff2') format('woff2'), url('/fonts/Aller_Bd.woff') format('woff');
-    font-family: 'Aller';
-    font-weight: 700;
-    font-style: normal;
-  }
-
-  /* RAMS fonts */
-  @font-face {
-    src: url('/fonts/source-sans-pro-v14-latin-regular.woff2') format('woff2'),
-      url('/fonts/source-sans-pro-v14-latin-regular.woff') format('woff');
-    font-family: 'Source Sans Pro';
-    font-weight: normal;
-    font-style: normal;
-  }
-  @font-face {
-    src: url('/fonts/source-sans-pro-v14-latin-600.woff2') format('woff2'),
-      url('/fonts/source-sans-pro-v14-latin-600.woff') format('woff');
-    font-family: 'Source Sans Pro';
-    font-weight: 600;
-    font-style: normal;
-  }
-  @font-face {
-    src: url('/fonts/source-sans-pro-v14-latin-700.woff2') format('woff2'),
-      url('/fonts/source-sans-pro-v14-latin-700.woff') format('woff');
-    font-family: 'Source Sans Pro';
-    font-weight: 700;
-    font-style: normal;
-  }
-
-  /* STG fonts */
-  @font-face {
-    src: url('/fonts/dragonbold-bold-webfont.woff2') format('woff2'),
-      url('/fonts/dragonbold-bold-webfont.woff') format('woff');
-    font-family: 'Dragon Bold';
-    font-weight: 400;
-    font-style: normal;
-  }
-
-  /* WBC fonts */
-  @font-face {
-    src: url('/fonts/Westpac-Bold-v2.007.woff2') format('woff2'), url('/fonts/Westpac-Bold-v2.007.woff') format('woff');
-    font-family: 'Westpac';
-    font-weight: 400;
-    font-style: normal;
-  }
-
-  /* WBG fonts */
-  @font-face {
-    src: url('/fonts/montserrat-v14-latin-300.woff2') format('woff2'),
-      url('/fonts/montserrat-v14-latin-300.woff') format('woff');
-    font-family: 'Montserrat';
-    font-weight: 300;
-    font-style: normal;
-  }
-  @font-face {
-    src: url('/fonts/montserrat-v14-latin-regular.woff2') format('woff2'),
-      url('/fonts/montserrat-v14-latin-regular.woff') format('woff');
-    font-family: 'Montserrat';
-    font-weight: 400;
-    font-style: normal;
-  }
-  @font-face {
-    src: url('/fonts/montserrat-v14-latin-700.woff2') format('woff2'),
-      url('/fonts/montserrat-v14-latin-700.woff') format('woff');
-    font-family: 'Montserrat';
-    font-weight: 700;
-    font-style: normal;
-  }
 
+@layer base {
   body {
     @apply typography-body-11;
   }

packages/ui/src/css/brand-fonts.css

@@ -0,0 +1,99 @@
+/* BOM fonts */
+@font-face {
+  src: url('/fonts/lineto-brown-pro-light.woff2') format('woff2'),
+    url('/fonts/lineto-brown-pro-light.woff') format('woff');
+  font-family: 'Brown Pro';
+  font-weight: 100 300;
+  font-style: normal;
+}
+@font-face {
+  src: url('/fonts/lineto-brown-pro-regular.woff2') format('woff2'),
+    url('/fonts/lineto-brown-pro-regular.woff') format('woff');
+  font-family: 'Brown Pro';
+  font-weight: 400 600;
+  font-style: normal;
+}
+@font-face {
+  src: url('/fonts/lineto-brown-pro-bold.woff2') format('woff2'),
+    url('/fonts/lineto-brown-pro-bold.woff') format('woff');
+  font-family: 'Brown Pro';
+  font-weight: 700 900;
+  font-style: normal;
+}
+
+/* BSA fonts */
+@font-face {
+  src: url('/fonts/Aller_Lt.woff2') format('woff2'), url('/fonts/Aller_Lt.woff') format('woff');
+  font-family: 'Aller';
+  font-weight: 100 600;
+  font-style: normal;
+}
+@font-face {
+  src: url('/fonts/Aller_Bd.woff2') format('woff2'), url('/fonts/Aller_Bd.woff') format('woff');
+  font-family: 'Aller';
+  font-weight: 700 900;
+  font-style: normal;
+}
+
+/* RAMS fonts */
+@font-face {
+  src: url('/fonts/source-sans-pro-v14-latin-regular.woff2') format('woff2'),
+    url('/fonts/source-sans-pro-v14-latin-regular.woff') format('woff');
+  font-family: 'Source Sans Pro';
+  font-weight: 100 500;
+  font-style: normal;
+}
+@font-face {
+  src: url('/fonts/source-sans-pro-v14-latin-600.woff2') format('woff2'),
+    url('/fonts/source-sans-pro-v14-latin-600.woff') format('woff');
+  font-family: 'Source Sans Pro';
+  font-weight: 600;
+  font-style: normal;
+}
+@font-face {
+  src: url('/fonts/source-sans-pro-v14-latin-700.woff2') format('woff2'),
+    url('/fonts/source-sans-pro-v14-latin-700.woff') format('woff');
+  font-family: 'Source Sans Pro';
+  font-weight: 700 900;
+  font-style: normal;
+}
+
+/* STG fonts */
+@font-face {
+  src: url('/fonts/dragonbold-bold-webfont.woff2') format('woff2'),
+    url('/fonts/dragonbold-bold-webfont.woff') format('woff');
+  font-family: 'Dragon Bold';
+  font-weight: 100 900;
+  font-style: normal;
+}
+
+/* WBC fonts */
+@font-face {
+  src: url('/fonts/Westpac-Bold-v2.007.woff2') format('woff2'), url('/fonts/Westpac-Bold-v2.007.woff') format('woff');
+  font-family: 'Westpac';
+  font-weight: 100 900;
+  font-style: normal;
+}
+
+/* WBG fonts */
+@font-face {
+  src: url('/fonts/montserrat-v14-latin-300.woff2') format('woff2'),
+    url('/fonts/montserrat-v14-latin-300.woff') format('woff');
+  font-family: 'Montserrat';
+  font-weight: 100 300;
+  font-style: normal;
+}
+@font-face {
+  src: url('/fonts/montserrat-v14-latin-regular.woff2') format('woff2'),
+    url('/fonts/montserrat-v14-latin-regular.woff') format('woff');
+  font-family: 'Montserrat';
+  font-weight: 400 600;
+  font-style: normal;
+}
+@font-face {
+  src: url('/fonts/montserrat-v14-latin-700.woff2') format('woff2'),
+    url('/fonts/montserrat-v14-latin-700.woff') format('woff');
+  font-family: 'Montserrat';
+  font-weight: 700 900;
+  font-style: normal;
+}

packages/ui/src/stories/foundation/typography.stories.tsx

@@ -152,11 +152,15 @@ export const LineHeight = () => {
 };
 const FontWeightTable = ({ type, caption }: { caption: string; type: 'brand' | 'body' }) => {
   const fontWeight = [
+    { className: 'font-thin', weight: '100' },
+    { className: 'font-extralight', weight: '200' },
     { className: 'font-light', weight: '300' },
     { className: 'font-normal', weight: '400' },
     { className: 'font-medium', weight: '500' },
     { className: 'font-semibold', weight: '600' },
     { className: 'font-bold', weight: '700' },
+    { className: 'font-extrabold', weight: '800' },
+    { className: 'font-black', weight: '900' },
   ];
   const typography = type === 'brand' ? 'typography-brand-7' : 'typography-body-7';
   return (