[SDPA-3619] custom font support (#621)

* [SDPA-3619] Custom font support

* Updated tests for better readability

examples/basic-examples/assets/_theme.scss

@@ -2,7 +2,9 @@
 // Overwrites values in Ripple
 @import '~@dpc-sdp/ripple-global/scss/settings/functions';
 
+//
 // Example for theming
+//
 // Let's use Vue.js branding color in our example.
 $rpl-colors: (
   'primary': #4ec08d,
@@ -19,3 +21,23 @@ $rpl-colors: (
   'white': #fff,
   'black': #000
 );
+
+//
+// Example of using custom fonts
+//
+$rpl-fonts: (
+  'regular': ('Vic-Regular', 'Arial', 'Helvetica', 'sans-serif'),
+  'medium': ('Oswald', 'Arial', 'Helvetica', 'sans-serif'),
+  'semibold': ('Oswald', 'Arial', 'Helvetica', 'sans-serif'),
+  'bold': ('Oswald', 'Arial', 'Helvetica', 'sans-serif')
+);
+
+// Disable font loader as we are using google fonts which is loaded as script in nuxt.config.js
+$rpl-fonts-default-loader: false;
+// We still need to load fonts if they are not from script.
+$rpl-font-directory: '~@dpc-sdp/ripple-global/assets/fonts/';
+@font-face {
+  font-family: 'VIC-Regular';
+  src: url('#{$rpl-font-directory}VIC-Regular.woff') format('woff'),
+  url('#{$rpl-font-directory}VIC-Regular.woff2') format('woff2');
+}

examples/basic-examples/nuxt.config.js

@@ -16,6 +16,10 @@ export default {
       { name: 'msapplication-TileColor', content: '#da532c' },
       { name: 'theme-color', content: '#ffffff' },
       { hid: 'description', name: 'description', content: 'Example site for showing how to add custom work' }
+    ],
+    link: [
+      // Load custom fonts from Google fonts
+      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Oswald&display=swap' }
     ]
   },
   modules: [
@@ -37,13 +41,18 @@ export default {
       }
     }
   },
+  ripple: {
+    card: {
+      trimFieldfonts: ['Oswald']
+    }
+  },
   tide: {
     baseUrl: process.env.CONTENT_API_SERVER,
     auth: {
       username: process.env.CONTENT_API_AUTH_USER,
       password: process.env.CONTENT_API_AUTH_PASS
     },
-    site: 4,
+    site: '4',
     // Tide submodules, 1 for enable, 0 for disable.
     modules: {
       page: 1,

examples/basic-examples/test/e2e/integration/custom/fonts.feature

@@ -0,0 +1,7 @@
+Feature: Custom font support
+
+  As a developer I can use custom fonts other than the default Vic font
+
+  Scenario: Custom fonts are used in theme
+    Given I visit the page "/"
+    Then the h1 heading should have the fonts "Oswald, Arial, Helvetica, sans-serif"

examples/basic-examples/test/e2e/integration/custom/fonts/step_definition.js

@@ -0,0 +1,9 @@
+/* global cy */
+
+import { Then } from 'cypress-cucumber-preprocessor/steps'
+
+// This can only test css, can't test if the fonts got loaded.
+// I have tried to use 'https://github.com/bramstein/fontfaceobserver' but couldn't make it work here.
+Then('the h1 heading should have the fonts {string}', (font) => {
+  cy.get('h1').should('have.css', 'font-family', font)
+})

packages/components/Atoms/Global/README.md

@@ -24,6 +24,9 @@ This is a globally available options object to allow passing options between rip
   plugins: [], // array of cheerio transformer function plugins to pass to RplMarkup
   viclogo: true // whether to display primary vic.gov.au logo
   externalLinksInNewWindow: false // (Bool) Whether links open in new window by default
+  card: {
+    trimFieldfonts: ['Your-font-name'] // If custom fonts are used in card trimmed field, set them here.
+  }
 ```
 
 For add your options, you need to use the Ripple global plugin in your Vue.js porject.

packages/components/Atoms/Global/scss/elements/_font.scss

@@ -1,12 +1,12 @@
-@each $font-label, $font-val in $rpl-fonts {
-  $font: nth($font-val, 1);
-  @font-face {
-    // sass-lint:disable-block no-duplicate-properties
-    font-family: $font;
-    src: url('#{$rpl-font-directory}#{$font}.eot');
-    src: url('#{$rpl-font-directory}#{$font}.eot?#iefix') format('embedded-opentype'),
-    url('#{$rpl-font-directory}#{$font}.woff') format('woff'),
-    url('#{$rpl-font-directory}#{$font}.woff2') format('woff2'),
-    url('#{$rpl-font-directory}#{$font}.ttf') format('truetype');
+$rpl-fonts-default-loader: true !default;
+
+@if $rpl-fonts-default-loader {
+  @each $font-label, $font-val in $rpl-fonts {
+    $font: nth($font-val, 1);
+    @font-face {
+      font-family: $font;
+      src: url('#{$rpl-font-directory}#{$font}.woff') format('woff'),
+      url('#{$rpl-font-directory}#{$font}.woff2') format('woff2');
+    }
   }
 }

packages/components/Molecules/Card/CardEvent.vue

@@ -38,7 +38,7 @@ export default {
   data: function () {
     return {
       trimFieldSelector: '.rpl-card-event__summary',
-      trimFieldRefreshOnFonts: ['VIC-Bold']
+      trimFieldRefreshOnFonts: true
     }
   },
   methods: {

packages/components/Molecules/Card/CardPromotion.vue

@@ -34,7 +34,7 @@ export default {
   data: function () {
     return {
       trimFieldSelector: '.rpl-card-promotion__summary',
-      trimFieldRefreshOnFonts: ['VIC-Bold']
+      trimFieldRefreshOnFonts: true
     }
   },
   methods: {

packages/components/Molecules/Card/mixins/cardtrimfield.js

@@ -11,7 +11,7 @@ const cardtrimfield = {
     return {
       trimFieldMaxHeight: 'none',
       trimFieldSelector: '',
-      trimFieldRefreshOnFonts: null
+      trimFieldRefreshOnFonts: false
     }
   },
   methods: {
@@ -47,7 +47,11 @@ const cardtrimfield = {
   },
   mounted () {
     if (this.trimFieldRefreshOnFonts) {
-      this.trimFieldRefreshOnFonts.forEach(font => {
+      let fonts = ['VIC-Bold'] // default vic fonts for card title
+      if (this.rplOptions.card && this.rplOptions.card.trimFieldfonts) {
+        fonts = this.rplOptions.card.trimFieldfonts
+      }
+      fonts.forEach(font => {
         const fontObserver = new FontFaceObserver(font)
         fontObserver.load().then(this.setTrimFieldMaxHeight)
       })

packages/ripple-nuxt-ui/lib/templates/plugin.js

@@ -32,6 +32,11 @@ let rplOptions = {
   rplOptions.viclogoFooter = options.viclogoFooter
 <% } %>
 
+<% if (options.card && options.card.trimFieldfonts) { %>
+  rplOptions.card = rplOptions.card || {}
+  rplOptions.card.trimFieldfonts = options.card.trimFieldfonts
+<% } %>
+
 <% if (options.customIcon) { %>
   // Add custom icons to library.
   addCustomIcons(require.context('../assets/ripple-icon/', true, /\.svg$/))