@newskit-render/core 2.44.1-alpha.0 → 2.45.0-alpha.0

package/.prettierignore

@@ -15,3 +15,5 @@ cypress/plugins
 cypress/support
 public/*
 infrastructure/helm/*
+infrastructure/terraform-newrelic/*.js
+terraform-newrelic/*.js

package/assets/fontFamily.ts

@@ -188,6 +188,207 @@ const montserrat = localFont({
   display: 'swap',
 })
 
+const publicoHeadline = localFont({
+  src: [
+    {
+      path: './fonts/PublicoHeadline-Extrabold-App.ttf',
+      weight: '800',
+      style: 'normal',
+    },
+    {
+      path: './fonts/PublicoHeadline-ExtraboldItalic-App.ttf',
+      weight: '800',
+      style: 'italic',
+    },
+    {
+      path: './fonts/PublicoHeadline-Bold-Web.woff2',
+      weight: '700',
+      style: 'normal',
+    },
+    {
+      path: './fonts/PublicoHeadline-BoldItalic-App.ttf',
+      weight: '700',
+      style: 'italic',
+    },
+    {
+      path: './fonts/PublicoHeadline-Black-App.ttf',
+      weight: '600',
+      style: 'normal',
+    },
+    {
+      path: './fonts/PublicoHeadline-BlackItalic-App.ttf',
+      weight: '600',
+      style: 'italic',
+    },
+    {
+      path: './fonts/PublicoHeadline-Medium-App.ttf',
+      weight: '500',
+      style: 'normal',
+    },
+    {
+      path: './fonts/PublicoHeadline-MediumItalic-App.ttf',
+      weight: '500',
+      style: 'italic',
+    },
+    {
+      path: './fonts/PublicoHeadline-Roman-Web.woff2',
+      weight: '400',
+      style: 'normal',
+    },
+    {
+      path: './fonts/PublicoHeadline-Italic-App.ttf',
+      weight: '400',
+      style: 'italic',
+    },
+    {
+      path: './fonts/PublicoHeadline-Light-App.ttf',
+      weight: '300',
+      style: 'normal',
+    },
+    {
+      path: './fonts/PublicoHeadline-LightItalic-App.ttf',
+      weight: '300',
+      style: 'italic',
+    },
+  ],
+  fallback: ['sans-serif'],
+  display: 'swap',
+})
+
+const publicoText = localFont({
+  src: [
+    {
+      path: './fonts/PublicoText-Roman-Web.woff2',
+      weight: '400',
+      style: 'normal',
+    },
+    {
+      path: './fonts/PublicoText-Italic-Web.woff2',
+      weight: '400',
+      style: 'italic',
+    },
+    {
+      path: './fonts/PublicoText-Semibold-App.ttf',
+      weight: '500',
+      style: 'normal',
+    },
+    {
+      path: './fonts/PublicoText-SemiboldItalic-App.ttf',
+      weight: '500',
+      style: 'italic',
+    },
+    {
+      path: './fonts/PublicoText-Bold-App.ttf',
+      weight: '700',
+      style: 'normal',
+    },
+    {
+      path: './fonts/PublicoText-BoldItalic-App.ttf',
+      weight: '700',
+      style: 'italic',
+    },
+  ],
+  fallback: ['sans-serif'],
+  display: 'swap',
+})
+
+const graphik = localFont({
+  src: [
+    {
+      path: './fonts/Graphik-Super-App.ttf',
+      weight: '900',
+      style: 'normal',
+    },
+    {
+      path: './fonts/Graphik-SuperItalic-App.ttf',
+      weight: '900',
+      style: 'italic',
+    },
+    {
+      path: './fonts/Graphik-Black-App.ttf',
+      weight: '800',
+      style: 'normal',
+    },
+    {
+      path: './fonts/Graphik-BlackItalic-App.ttf',
+      weight: '800',
+      style: 'italic',
+    },
+    {
+      path: './fonts/Graphik-Bold-App.ttf',
+      weight: '700',
+      style: 'normal',
+    },
+    {
+      path: './fonts/Graphik-BoldItalic-App.ttf',
+      weight: '700',
+      style: 'italic',
+    },
+    {
+      path: './fonts/Graphik-Semibold-Web.woff2',
+      weight: '600',
+      style: 'normal',
+    },
+    {
+      path: './fonts/Graphik-SemiboldItalic-App.ttf',
+      weight: '600',
+      style: 'italic',
+    },
+    {
+      path: './fonts/Graphik-Medium-Web.woff2',
+      weight: '500',
+      style: 'normal',
+    },
+    {
+      path: './fonts/Graphik-MediumItalic-App.ttf',
+      weight: '500',
+      style: 'italic',
+    },
+    {
+      path: './fonts/Graphik-Regular-Web.woff2',
+      weight: '400',
+      style: 'normal',
+    },
+    {
+      path: './fonts/Graphik-RegularItalic-App.ttf',
+      weight: '400',
+      style: 'italic',
+    },
+    {
+      path: './fonts/Graphik-Light-App.ttf',
+      weight: '300',
+      style: 'normal',
+    },
+    {
+      path: './fonts/Graphik-LightItalic-App.ttf',
+      weight: '300',
+      style: 'italic',
+    },
+    {
+      path: './fonts/Graphik-Extralight-App.ttf',
+      weight: '200',
+      style: 'normal',
+    },
+    {
+      path: './fonts/Graphik-ExtralightItalic-App.ttf',
+      weight: '200',
+      style: 'italic',
+    },
+    {
+      path: './fonts/Graphik-Thin-App.ttf',
+      weight: '100',
+      style: 'normal',
+    },
+    {
+      path: './fonts/Graphik-ThinItalic-App.ttf',
+      weight: '100',
+      style: 'italic',
+    },
+  ],
+  fallback: ['serif'],
+  display: 'swap',
+})
+
 export {
   bitter,
   poppins,
@@ -197,4 +398,7 @@ export {
   timesModern,
   timesDigital,
   montserrat,
+  publicoHeadline,
+  publicoText,
+  graphik,
 }

package/helpers/__tests__/useThemeDropdownObject.test.ts

@@ -34,6 +34,12 @@ describe('createThemeDropdownObject', () => {
           height: '40px',
           top: '0',
         },
+        TLS: {
+          height: '40px',
+          src: '/assets/tls-logo-white.svg',
+          top: '0',
+          width: '150px',
+        },
       },
       options: expect.any(Object),
       themeDropdownOpen: false,

package/helpers/useThemeDropdownObject.tsx

@@ -6,6 +6,7 @@ import {
   timesTheme,
   virginRadioTheme,
   theSunTheme,
+  tlsTheme,
   ThemeDropdownObject,
   ThemeDropdown,
 } from '@newskit-render/shared-components'
@@ -35,6 +36,12 @@ const clientNavigationLogos = {
     height: '40px',
     top: '0',
   },
+  TLS: {
+    src: '/assets/tls-logo-white.svg',
+    width: '150px',
+    height: '40px',
+    top: '0',
+  },
 }
 
 export const useThemeDropdownObject = (
@@ -49,6 +56,7 @@ export const useThemeDropdownObject = (
       sharedTheme,
       sharedThemeDark,
       timesTheme,
+      tlsTheme,
       virginRadioTheme,
       theSunTheme,
     },

package/infrastructure/terraform-newrelic/dashboards.tf

@@ -184,7 +184,7 @@ resource "newrelic_one_dashboard" "lighthouse_dashboard" {
       width = 4
 
       nrql_query {
-        query = "FROM SyntheticCheck SELECT average(custom.firstContentfulPaint) as 'FCP', average(custom.largestContentfulPaint) as 'LCP', average(custom.interactive) as 'TTI', average(custom.totalBlockingTime) as 'TBT', average(custom.cumulativeLayoutShift) as 'CLS', average(custom.speedIndex) as 'Speed Index'"
+        query = "FROM SyntheticCheck SELECT average(custom.firstContentfulPaint) as 'FCP', average(custom.largestContentfulPaint) as 'LCP', average(custom.interactive) as 'TTI', average(custom.totalBlockingTime) as 'TBT', average(custom.cumulativeLayoutShift) as 'CLS', average(custom.speedIndex) as 'Speed Index' WHERE custom.url = '${var.lighthouseUrl}'"
       }
     }
 
@@ -196,7 +196,7 @@ resource "newrelic_one_dashboard" "lighthouse_dashboard" {
       width = 8
 
       nrql_query {
-        query = "FROM SyntheticCheck SELECT average(custom.firstContentfulPaint) as 'FCP', average(custom.largestContentfulPaint) as 'LCP', average(custom.interactive) as 'TTI', average(custom.totalBlockingTime) as 'TBT', average(custom.cumulativeLayoutShift) as 'CLS', average(custom.speedIndex) as 'Speed Index' TIMESERIES AUTO"
+        query = "FROM SyntheticCheck SELECT average(custom.firstContentfulPaint) as 'FCP', average(custom.largestContentfulPaint) as 'LCP', average(custom.interactive) as 'TTI', average(custom.totalBlockingTime) as 'TBT', average(custom.cumulativeLayoutShift) as 'CLS', average(custom.speedIndex) as 'Speed Index' TIMESERIES AUTO WHERE custom.url = '${var.lighthouseUrl}'"
       }
     }
 
@@ -208,7 +208,7 @@ resource "newrelic_one_dashboard" "lighthouse_dashboard" {
       width = 4
 
       nrql_query {
-        query = "FROM SyntheticCheck SELECT average(custom.firstContentfulPaint) FACET custom.url"
+        query = "FROM SyntheticCheck SELECT average(custom.firstContentfulPaint) FACET custom.url WHERE custom.url = '${var.lighthouseUrl}'"
       }
     }
 
@@ -220,7 +220,7 @@ resource "newrelic_one_dashboard" "lighthouse_dashboard" {
       width = 8
 
       nrql_query {
-        query = "FROM SyntheticCheck SELECT average(custom.firstContentfulPaint) FACET custom.url TIMESERIES AUTO"
+        query = "FROM SyntheticCheck SELECT average(custom.firstContentfulPaint) FACET custom.url TIMESERIES AUTO WHERE custom.url = '${var.lighthouseUrl}'"
       }
     }
 
@@ -232,7 +232,7 @@ resource "newrelic_one_dashboard" "lighthouse_dashboard" {
       width = 4
 
       nrql_query {
-        query = "FROM SyntheticCheck SELECT average(custom.largestContentfulPaint) FACET custom.url"
+        query = "FROM SyntheticCheck SELECT average(custom.largestContentfulPaint) FACET custom.url WHERE custom.url = '${var.lighthouseUrl}'"
       }
     }
 
@@ -244,7 +244,7 @@ resource "newrelic_one_dashboard" "lighthouse_dashboard" {
       width = 8
 
       nrql_query {
-        query = "FROM SyntheticCheck SELECT average(custom.largestContentfulPaint) FACET custom.url TIMESERIES AUTO"
+        query = "FROM SyntheticCheck SELECT average(custom.largestContentfulPaint) FACET custom.url TIMESERIES AUTO WHERE custom.url = '${var.lighthouseUrl}'"
       }
     }
 
@@ -256,7 +256,7 @@ resource "newrelic_one_dashboard" "lighthouse_dashboard" {
       width = 4
 
       nrql_query {
-        query = "FROM SyntheticCheck SELECT average(custom.interactive) as 'TTI' FACET custom.url"
+        query = "FROM SyntheticCheck SELECT average(custom.interactive) as 'TTI' FACET custom.url WHERE custom.url = '${var.lighthouseUrl}'"
       }
     }
 
@@ -268,7 +268,7 @@ resource "newrelic_one_dashboard" "lighthouse_dashboard" {
       width = 8
 
       nrql_query {
-        query = "FROM SyntheticCheck SELECT average(custom.interactive) FACET custom.url TIMESERIES AUTO"
+        query = "FROM SyntheticCheck SELECT average(custom.interactive) FACET custom.url TIMESERIES AUTO WHERE custom.url = '${var.lighthouseUrl}'"
       }
     }
 
@@ -280,7 +280,7 @@ resource "newrelic_one_dashboard" "lighthouse_dashboard" {
       width = 4
 
       nrql_query {
-        query = "FROM SyntheticCheck SELECT average(custom.totalBlockingTime) FACET custom.url"
+        query = "FROM SyntheticCheck SELECT average(custom.totalBlockingTime) FACET custom.url WHERE custom.url = '${var.lighthouseUrl}'"
       }
     }
 
@@ -292,7 +292,7 @@ resource "newrelic_one_dashboard" "lighthouse_dashboard" {
       width = 8
 
       nrql_query {
-        query = "FROM SyntheticCheck SELECT average(custom.totalBlockingTime) FACET custom.url TIMESERIES AUTO"
+        query = "FROM SyntheticCheck SELECT average(custom.totalBlockingTime) FACET custom.url TIMESERIES AUTO WHERE custom.url = '${var.lighthouseUrl}'"
       }
     }
 
@@ -304,7 +304,7 @@ resource "newrelic_one_dashboard" "lighthouse_dashboard" {
       width = 4
 
       nrql_query {
-        query = "FROM SyntheticCheck SELECT average(custom.cumulativeLayoutShift) FACET custom.url"
+        query = "FROM SyntheticCheck SELECT average(custom.cumulativeLayoutShift) FACET custom.url WHERE custom.url = '${var.lighthouseUrl}'"
       }
     }
 
@@ -316,7 +316,7 @@ resource "newrelic_one_dashboard" "lighthouse_dashboard" {
       width = 8
 
       nrql_query {
-        query = "FROM SyntheticCheck SELECT average(custom.cumulativeLayoutShift) FACET custom.url TIMESERIES AUTO"
+        query = "FROM SyntheticCheck SELECT average(custom.cumulativeLayoutShift) FACET custom.url TIMESERIES AUTO WHERE custom.url = '${var.lighthouseUrl}'"
       }
     }
 
@@ -328,7 +328,7 @@ resource "newrelic_one_dashboard" "lighthouse_dashboard" {
       width = 4
 
       nrql_query {
-        query = "FROM SyntheticCheck SELECT average(custom.speedIndex) FACET custom.url"  
+        query = "FROM SyntheticCheck SELECT average(custom.speedIndex) FACET custom.url WHERE custom.url = '${var.lighthouseUrl}'"  
       }
     }
 
@@ -340,7 +340,7 @@ resource "newrelic_one_dashboard" "lighthouse_dashboard" {
       width = 8
 
       nrql_query {
-        query = "FROM SyntheticCheck SELECT average(custom.speedIndex) FACET custom.url TIMESERIES AUTO"
+        query = "FROM SyntheticCheck SELECT average(custom.speedIndex) FACET custom.url TIMESERIES AUTO WHERE custom.url = '${var.lighthouseUrl}'"
       }
     }
   }

package/infrastructure/terraform-newrelic/dev.tfvars

@@ -1,2 +1,3 @@
 environment = "dev"
-namespace   = "<% PROJECT_NAME >-dev"
+namespace   = "<% PROJECT_NAME >-dev"
+lighthouseUrl = "https://<% PROJECT_NAME >.ceng-dev.newsuk.tech/"

package/infrastructure/terraform-newrelic/lighthouse-script-dev.js

@@ -0,0 +1,53 @@
+/* To get Google Page Speed API Key - https://developers.google.com/speed/docs/insights/v5/get-started  */
+
+got = require('got');
+
+let categories = ['SEO', 'ACCESSIBILITY', 'BEST_PRACTICES', 'PERFORMANCE', 'PWA'];
+let endpoint = 'https://www.googleapis.com/pagespeedonline/v5/runPagespeed?key='+ $secure.<% PROJECT_NAME >_PAGESPEED_INSIGHTS_API_KEY + '&';
+const strategy = "desktop";
+let settings = {'url': 'https://<% PROJECT_NAME >.ceng-dev.newsuk.tech/', 'strategy': strategy};
+const options = {
+    method: 'GET',
+    headers: {
+        'Content-Type': 'application/json',
+    }
+};
+categories.forEach((item, i) => {
+    endpoint += `category=${item}&`;
+});
+endpoint += `url=${settings.url}&`;
+endpoint += `strategy=${strategy}`;
+
+
+const getData = async () => {
+    try {
+        const body = await got.get(endpoint, options)
+            .json();
+        let lighthouseMetrics = body.lighthouseResult.audits.metrics.details.items[0];
+        console.log(body.lighthouseResult.configSettings.onlyCategories);
+        $util.insights.set('url', settings.url);
+        $util.insights.set('deviceType', settings.strategy);
+        $util.insights.set('performanceScore', body.lighthouseResult.categories.performance.score * 100);
+        $util.insights.set('accessibilityScore', body.lighthouseResult.categories.accessibility.score * 100);
+        console.log('accessibilityScore', body.lighthouseResult.categories.accessibility.score * 100);
+        $util.insights.set('bestPracticesScore', body.lighthouseResult.categories['best-practices'].score * 100);
+        console.log('bestPracticesScore', body.lighthouseResult.categories['best-practices'].score * 100);
+        $util.insights.set('seoScore', body.lighthouseResult.categories.seo.score * 100);
+        console.log('seoScore', body.lighthouseResult.categories.seo.score * 100);
+        $util.insights.set('pwaScore', body.lighthouseResult.categories.pwa.score * 100);
+        console.log('pwaScore', body.lighthouseResult.categories.pwa.score * 100);
+
+        for (let attributeName in lighthouseMetrics) {
+            if (lighthouseMetrics.hasOwnProperty(attributeName)) {
+                if (!attributeName.includes('Ts')) {
+                    console.log(attributeName + ": " + lighthouseMetrics[attributeName]);
+                    $util.insights.set(attributeName, lighthouseMetrics[attributeName]);
+                }
+            }
+        }
+    } catch (err) {
+        console.error("Error:", err);
+
+    }
+};
+getData();

package/infrastructure/terraform-newrelic/lighthouse-script-prod.js

@@ -1,46 +1,54 @@
-/** API SETUP - remove this section to run in New Relic Synthetics **/
-// if ($http == null) { var $http = require('request'); }
-/** API SETUP - remove this section to run in New Relic Synthetics **/
+/* To get Google Page Speed API Key - https://developers.google.com/speed/docs/insights/v5/get-started  */
 
-var settings = {
-  url: 'https://newskit-render.prod.ceng.newsuk.tech/',
-  category: 'performance',
-  strategy: 'desktop',
-}
+got = require('got');
+
+let categories = ['SEO', 'ACCESSIBILITY', 'BEST_PRACTICES', 'PERFORMANCE', 'PWA'];
+let endpoint = 'https://www.googleapis.com/pagespeedonline/v5/runPagespeed?key='+ $secure.<% PROJECT_NAME >_PAGESPEED_INSIGHTS_API_KEY + '&';
+const strategy = "desktop";
+let settings = {'url': 'https://<% PROJECT_NAME >.prod.ceng.newsuk.tech/', 'strategy': strategy};
+const options = {
+    method: 'GET',
+    headers: {
+        'Content-Type': 'application/json',
+    }
+};
+categories.forEach((item, i) => {
+    endpoint += `category=${item}&`;
+});
+endpoint += `url=${settings.url}&`;
+endpoint += `strategy=${strategy}`;
 
-var options = {
-  method: 'GET',
-  url: 'https://www.googleapis.com/pagespeedonline/v5/runPagespeed',
-  headers: null,
-  qs: settings,
-  json: true,
-}
 
-$http(options, function (error, response, body) {
-  if (!error && response.statusCode == 200) {
-    if (response.statusCode == 200) {
-      var lighthouseMetrics =
-        body.lighthouseResult.audits.metrics.details.items[0]
-      $util.insights.set('url', settings.url)
-      $util.insights.set('deviceType', settings.strategy)
-      $util.insights.set(
-        'performanceScore',
-        body.lighthouseResult.categories.performance.score
-      )
+const getData = async () => {
+    try {
+        const body = await got.get(endpoint, options)
+            .json();
+        let lighthouseMetrics = body.lighthouseResult.audits.metrics.details.items[0];
+        console.log(body.lighthouseResult.configSettings.onlyCategories);
+        $util.insights.set('url', settings.url);
+        $util.insights.set('deviceType', settings.strategy);
+        $util.insights.set('performanceScore', body.lighthouseResult.categories.performance.score * 100);
+        $util.insights.set('accessibilityScore', body.lighthouseResult.categories.accessibility.score * 100);
+        console.log('accessibilityScore', body.lighthouseResult.categories.accessibility.score * 100);
+        $util.insights.set('bestPracticesScore', body.lighthouseResult.categories['best-practices'].score * 100);
+        console.log('bestPracticesScore', body.lighthouseResult.categories['best-practices'].score * 100);
+        $util.insights.set('seoScore', body.lighthouseResult.categories.seo.score * 100);
+        console.log('seoScore', body.lighthouseResult.categories.seo.score * 100);
+        $util.insights.set('pwaScore', body.lighthouseResult.categories.pwa.score * 100);
+        console.log('pwaScore', body.lighthouseResult.categories.pwa.score * 100);
 
-      for (var attributeName in lighthouseMetrics) {
-        if (lighthouseMetrics.hasOwnProperty(attributeName)) {
-          if (!attributeName.includes('Ts')) {
-            console.log(attributeName + ': ' + lighthouseMetrics[attributeName])
-            $util.insights.set(attributeName, lighthouseMetrics[attributeName])
-          }
+        for (let attributeName in lighthouseMetrics) {
+            if (lighthouseMetrics.hasOwnProperty(attributeName)) {
+                if (!attributeName.includes('Ts')) {
+                    console.log(attributeName + ": " + lighthouseMetrics[attributeName]);
+                    $util.insights.set(attributeName, lighthouseMetrics[attributeName]);
+                }
+            }
         }
-      }
-    } else {
-      console.log('Non-200 HTTP response: ' + response.statusCode)
+    } catch (err) {
+        console.error("Error:", err);
+
     }
-  } else {
-    console.log('rsp code: ' + response.statusCode)
-    console.log(error)
-  }
-})
+};
+getData();
+  

package/infrastructure/terraform-newrelic/lighthouse-script-stage.js

@@ -0,0 +1,54 @@
+/* To get Google Page Speed API Key - https://developers.google.com/speed/docs/insights/v5/get-started  */
+
+got = require('got');
+
+let categories = ['SEO', 'ACCESSIBILITY', 'BEST_PRACTICES', 'PERFORMANCE', 'PWA'];
+let endpoint = 'https://www.googleapis.com/pagespeedonline/v5/runPagespeed?key='+ $secure.<% PROJECT_NAME >_PAGESPEED_INSIGHTS_API_KEY + '&';
+const strategy = "desktop";
+let settings = {'url': 'https://<% PROJECT_NAME >.staging.ceng.newsuk.tech/', 'strategy': strategy};
+const options = {
+    method: 'GET',
+    headers: {
+        'Content-Type': 'application/json',
+    }
+};
+categories.forEach((item, i) => {
+    endpoint += `category=${item}&`;
+});
+endpoint += `url=${settings.url}&`;
+endpoint += `strategy=${strategy}`;
+
+
+const getData = async () => {
+    try {
+        const body = await got.get(endpoint, options)
+            .json();
+        let lighthouseMetrics = body.lighthouseResult.audits.metrics.details.items[0];
+        console.log(body.lighthouseResult.configSettings.onlyCategories);
+        $util.insights.set('url', settings.url);
+        $util.insights.set('deviceType', settings.strategy);
+        $util.insights.set('performanceScore', body.lighthouseResult.categories.performance.score * 100);
+        $util.insights.set('accessibilityScore', body.lighthouseResult.categories.accessibility.score * 100);
+        console.log('accessibilityScore', body.lighthouseResult.categories.accessibility.score * 100);
+        $util.insights.set('bestPracticesScore', body.lighthouseResult.categories['best-practices'].score * 100);
+        console.log('bestPracticesScore', body.lighthouseResult.categories['best-practices'].score * 100);
+        $util.insights.set('seoScore', body.lighthouseResult.categories.seo.score * 100);
+        console.log('seoScore', body.lighthouseResult.categories.seo.score * 100);
+        $util.insights.set('pwaScore', body.lighthouseResult.categories.pwa.score * 100);
+        console.log('pwaScore', body.lighthouseResult.categories.pwa.score * 100);
+
+        for (let attributeName in lighthouseMetrics) {
+            if (lighthouseMetrics.hasOwnProperty(attributeName)) {
+                if (!attributeName.includes('Ts')) {
+                    console.log(attributeName + ": " + lighthouseMetrics[attributeName]);
+                    $util.insights.set(attributeName, lighthouseMetrics[attributeName]);
+                }
+            }
+        }
+    } catch (err) {
+        console.error("Error:", err);
+
+    }
+};
+getData();
+

package/infrastructure/terraform-newrelic/monitors.tf

@@ -4,7 +4,7 @@ resource "newrelic_synthetics_script_monitor" "lighthouse-monitor" {
   locations_public     = ["EU_WEST_2"]
   period               = "EVERY_30_MINUTES"
   status               = "ENABLED"
-  script               = var.environment == "prod" ? file("${path.module}/lighthouse-script-prod.js") : file("${path.module}/lighthouse-script.js")
+  script               = var.environment == "prod" ? file("${path.module}/lighthouse-script-prod.js") : var.environment == "dev" ? file("${path.module}/lighthouse-script-dev.js") : file("${path.module}/lighthouse-script-stage.js")
   script_language      = "JAVASCRIPT"
   runtime_type         = "NODE_API"
   runtime_type_version = "16.10"

package/infrastructure/terraform-newrelic/prod.tfvars

@@ -1,2 +1,3 @@
 environment = "prod"
-namespace   = "<% PROJECT_NAME >-prod"
+namespace   = "<% PROJECT_NAME >-prod"
+lighthouseUrl = "https://<% PROJECT_NAME >.prod.ceng.newsuk.tech/"

package/infrastructure/terraform-newrelic/staging.tfvars

@@ -1,2 +1,3 @@
 environment = "staging"
-namespace   = "<% PROJECT_NAME >-staging"
+namespace   = "<% PROJECT_NAME >-staging"
+lighthouseUrl = "https://<% PROJECT_NAME >.staging.ceng.newsuk.tech/"

package/infrastructure/terraform-newrelic/variables.tf

@@ -27,3 +27,7 @@ variable "project_name" {
   description = "The Project name"
   default     = "<% PROJECT_NAME >"
 }
+
+variable "lighthouseUrl" {
+  description = "url to be analyzed by Lighthouse"
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newskit-render/core",
-  "version": "2.44.1-alpha.0",
+  "version": "2.45.0-alpha.0",
   "description": "Newskit Render - Core package",
   "author": "",
   "license": "UNLICENSED",
@@ -41,12 +41,12 @@
     "@emotion/styled": "11.9.3",
     "@newskit-render/api": "^1.6.6-alpha.0",
     "@newskit-render/auth": "^1.3.10-alpha.0",
-    "@newskit-render/checkout": "^2.5.1-alpha.0",
+    "@newskit-render/checkout": "^2.5.1-alpha.1",
     "@newskit-render/feature-flags": "^1.4.11-alpha.0",
     "@newskit-render/feed": "^1.4.16-alpha.0",
-    "@newskit-render/my-account": "^4.4.1-alpha.0",
-    "@newskit-render/shared-components": "^2.4.2-alpha.0",
-    "@newskit-render/standalone-components": "^2.5.2-alpha.0",
+    "@newskit-render/my-account": "^4.4.1-alpha.1",
+    "@newskit-render/shared-components": "^2.5.0-alpha.0",
+    "@newskit-render/standalone-components": "^2.5.2-alpha.1",
     "@newskit-render/validation": "^1.5.12-alpha.0",
     "@next/font": "13.1.6",
     "cross-fetch": "3.1.5",

package/pages/_app.tsx

@@ -18,6 +18,9 @@ import {
   timesModern,
   timesDigital,
   montserrat,
+  publicoHeadline,
+  publicoText,
+  graphik,
 } from '../assets/fontFamily'
 
 if (!process.browser) {
@@ -50,6 +53,9 @@ function MyApp({ Component, pageProps, tenant }: MyAppProps) {
               --times-modern: ${timesModern.style.fontFamily};
               --times-digital: ${timesDigital.style.fontFamily};
               --montserrat: ${montserrat.style.fontFamily};
+              --publico-headline: ${publicoHeadline.style.fontFamily};
+              --publico-text: ${publicoText.style.fontFamily};
+              --graphik: ${graphik.style.fontFamily};
             }
           `}</style>
           <Head>

package/public/assets/tls-logo-white.svg

@@ -0,0 +1,3 @@
+<svg width="70" height="48" viewBox="0 0 70 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 0.999428V7.00949H6.07407V46.9999H13.0041V7.00349H19.0002V0.999428H0ZM69.9908 32.9848C69.9578 31.5048 69.6008 30.0707 68.8808 28.7787C68.8608 28.7407 68.7118 28.4807 68.6608 28.3967C67.6408 26.6507 66.4267 25.0407 65.1737 23.4567C63.8757 21.8157 62.5577 20.1866 61.2727 18.5386C60.5717 17.6356 59.9227 16.6946 59.3897 15.6886C59.1097 15.1636 58.8897 14.6246 58.8897 14.0146C58.8897 12.1266 58.8837 10.2375 58.8967 8.35551C58.9027 7.8755 58.9547 7.3955 59.0267 6.92149C59.1237 6.30449 59.4477 5.85048 60.0647 5.65548C60.5733 5.49797 61.1131 5.46911 61.6357 5.57148C62.4017 5.71448 62.8557 6.17449 62.9727 6.93449C63.0507 7.4345 63.1027 7.9465 63.1027 8.44651C63.1157 11.1855 63.1097 14.9106 63.1097 14.9106H69.9898C69.9898 14.9106 69.9968 10.8285 69.9838 7.9075C69.9838 7.4015 69.9578 6.88849 69.8938 6.38949C69.5818 3.93546 68.2768 2.17744 66.1017 1.04143C65.0377 0.483422 63.8817 0.236419 62.7007 0.100418C61.2914 -0.065199 59.8656 -0.0257893 58.4676 0.217419C57.3376 0.411421 56.2606 0.736425 55.2876 1.35943C53.8916 2.24944 52.9176 3.47546 52.3976 5.04547C52.0996 5.94748 52.0156 6.88249 52.0156 7.8295C52.0156 9.99753 52.0086 12.1656 52.0216 14.3326C52.0216 14.8196 52.0676 15.3126 52.1386 15.7996C52.3006 16.9486 52.7616 17.9926 53.2936 19.0116C54.1116 20.5696 55.1316 21.9917 56.2346 23.3537C57.2736 24.6387 58.3506 25.8977 59.3967 27.1757C60.4807 28.5057 61.4797 29.8957 62.2587 31.4338C62.7917 32.4918 63.1157 33.6008 63.1157 34.7958C63.1157 36.4108 63.1227 38.0268 63.1097 39.6499C63.1027 40.1299 63.0577 40.6099 62.9797 41.0839C62.8567 41.8369 62.4087 42.3109 61.6427 42.4279C61.2727 42.4859 60.8897 42.4919 60.5127 42.4539C59.6557 42.3629 59.1687 41.9079 59.0197 41.0579C58.9375 40.5623 58.894 40.0611 58.8897 39.5589C58.8767 36.5218 58.8837 32.1798 58.8837 32.1798H52.0026C52.0026 32.1798 51.9956 36.9178 52.0086 40.1759C52.0086 40.7989 52.0546 41.4349 52.1706 42.0449C52.5996 44.3489 53.9176 45.9899 55.9876 47.0349C57.0336 47.5609 58.1626 47.7749 59.3117 47.9049C60.7717 48.0739 62.2267 48.0149 63.6747 47.7489C65.0507 47.4959 66.3227 46.9959 67.4197 46.1069C68.415 45.3119 69.1626 44.2492 69.5748 43.0439C69.8928 42.1229 69.9848 41.1689 69.9848 40.2019C69.9848 37.8388 70.0098 35.9568 69.9968 33.6918C69.9968 33.4718 69.9908 33.2318 69.9908 32.9848ZM28.0003 0.999428H35.0264V41.0029H44.0005V46.9999H28.0003" fill="white"/>
+</svg>

package/infrastructure/terraform-newrelic/lighthouse-script.js

@@ -1,46 +0,0 @@
-/** API SETUP - remove this section to run in New Relic Synthetics **/
-// if ($http == null) { var $http = require('request'); }
-/** API SETUP - remove this section to run in New Relic Synthetics **/
-
-var settings = {
-  url: 'https://newskit-render.ceng-dev.newsuk.tech/',
-  category: 'performance',
-  strategy: 'desktop',
-}
-
-var options = {
-  method: 'GET',
-  url: 'https://www.googleapis.com/pagespeedonline/v5/runPagespeed',
-  headers: null,
-  qs: settings,
-  json: true,
-}
-
-$http(options, function (error, response, body) {
-  if (!error && response.statusCode == 200) {
-    if (response.statusCode == 200) {
-      var lighthouseMetrics =
-        body.lighthouseResult.audits.metrics.details.items[0]
-      $util.insights.set('url', settings.url)
-      $util.insights.set('deviceType', settings.strategy)
-      $util.insights.set(
-        'performanceScore',
-        body.lighthouseResult.categories.performance.score
-      )
-
-      for (var attributeName in lighthouseMetrics) {
-        if (lighthouseMetrics.hasOwnProperty(attributeName)) {
-          if (!attributeName.includes('Ts')) {
-            console.log(attributeName + ': ' + lighthouseMetrics[attributeName])
-            $util.insights.set(attributeName, lighthouseMetrics[attributeName])
-          }
-        }
-      }
-    } else {
-      console.log('Non-200 HTTP response: ' + response.statusCode)
-    }
-  } else {
-    console.log('rsp code: ' + response.statusCode)
-    console.log(error)
-  }
-})