@newskit-render/core 2.42.0 → 2.43.0-alpha.1

package/css/index.ts

@@ -1,274 +1,6 @@
 import { css } from 'newskit'
 
 export const GlobalStyling = css`
-  @font-face {
-    font-family: The Sun;
-    src: url('/fonts/TheSun-Bold.woff2') format('woff2'),
-      url('/fonts/TheSun-Bold.woff') format('woff'),
-      url('/fonts/TheSun-Bold.ttf') format('truetype');
-    font-style: normal;
-    font-weight: 700;
-    font-stretch: normal;
-    font-display: swap;
-  }
-  @font-face {
-    font-family: The Sun;
-    src: url('/fonts/TheSun-HeavyNarrow.woff2') format('woff2'),
-      url('/fonts/TheSun-HeavyNarrow.woff') format('woff'),
-      url('/fonts/TheSun-HeavyNarrow.ttf') format('truetype');
-    font-style: normal;
-    font-weight: 700;
-    font-stretch: condensed;
-    font-display: swap;
-  }
-  @font-face {
-    font-family: The Sun;
-    src: url('/fonts/TheSun-Regular.woff2') format('woff2'),
-      url('/fonts/TheSun-Regular.woff') format('woff'),
-      url('/fonts/TheSun-Regular.ttf') format('truetype');
-    font-style: normal;
-    font-weight: 400;
-    font-display: swap;
-  }
-  @font-face {
-    font-family: The Sun;
-    src: url('/fonts/TheSun-Medium.woff2') format('woff2'),
-      url('/fonts/TheSun-Medium.woff') format('woff'),
-      url('/fonts/TheSun-Medium.ttf') format('truetype');
-    font-style: normal;
-    font-weight: 500;
-    font-display: swap;
-  }
-  @font-face {
-    font-family: Gill Sans MT Std;
-    src: url('/fonts/GillSansMTStd-Medium.otf');
-    font-display: swap;
-  }
-  @font-face {
-    font-family: TimesModern-Bold;
-    src: url('/fonts/TimesDigital-Bold.ttf') format('truetype');
-    font-display: swap;
-  }
-  @font-face {
-    font-family: Times Modern;
-    src: url('/fonts/TimesModern-Regular.otf') format('truetype');
-    font-display: swap;
-  }
-  @font-face {
-    font-family: Times Digital W04 Regular;
-    src: url('/fonts/TimesDigitalW04-Regular.ttf') format('truetype');
-    font-display: swap;
-  }
-  @font-face {
-    font-family: Montserrat;
-    src: url('/fonts/Montserrat-Regular.ttf') format('truetype');
-    font-display: swap;
-  }
-  @font-face {
-    font-family: TheSun-Bold;
-    src: url('/fonts/TheSun-Bold.ttf') format('truetype');
-    font-display: swap;
-  }
-  @font-face {
-    font-family: TheSun-HeavyNarrow;
-    src: url('/fonts/TheSun-HeavyNarrow.ttf') format('truetype');
-    font-display: swap;
-  }
-  @font-face {
-    font-family: TheSun-Regular;
-    src: url('/fonts/TheSun-Regular.ttf') format('truetype');
-    font-display: swap;
-  }
-  @font-face {
-    font-family: TheSun-Medium;
-    src: url('/fonts/TheSun-Medium.ttf') format('truetype');
-    font-display: swap;
-  }
-  @font-face {
-    font-family: 'DM Sans';
-    src: url('/fonts/dmsans-regular-webfont.woff2') format('woff2'),
-      url('/fonts/dmsans-regular-webfont.woff') format('woff');
-    font-style: normal;
-    font-weight: 400;
-    font-display: swap;
-  }
-  @font-face {
-    font-family: 'DM Sans';
-    src: url('/fonts/dmsans-italic-webfont.woff2') format('woff2'),
-      url('/fonts/dmsans-italic-webfont.woff') format('woff');
-    font-style: italic;
-    font-weight: 400;
-    font-display: swap;
-  }
-  @font-face {
-    font-family: 'DM Sans';
-    src: url('/fonts/dmsans-medium-webfont.woff2') format('woff2'),
-      url('/fonts/dmsans-medium-webfont.woff') format('woff');
-    font-style: normal;
-    font-weight: 500;
-    font-display: swap;
-  }
-  @font-face {
-    font-family: 'DM Sans';
-    src: url('/fonts/dmsans-mediumitalic-webfont.woff2') format('woff2'),
-      url('/fonts/dmsans-mediumitalic-webfont.woff') format('woff');
-    font-style: italic;
-    font-weight: 500;
-    font-display: swap;
-  }
-  @font-face {
-    font-family: 'DM Sans';
-    src: url('/fonts/dmsans-bold-webfont.woff2') format('woff2'),
-      url('/fonts/dmsans-bold-webfont.woff') format('woff');
-    font-style: normal;
-    font-weight: 700;
-    font-display: swap;
-  }
-  @font-face {
-    font-family: 'DM Sans';
-    src: url('/fonts/dmsans-bolditalic-webfont.woff2') format('woff2'),
-      url('/fonts/dmsans-bolditalic-webfont.woff') format('woff');
-    font-style: italic;
-    font-weight: 700;
-    font-display: swap;
-  }
-  @font-face {
-    font-family: 'Poppins';
-    src: url('/fonts/poppins-bold-webfont.woff2') format('woff2'),
-      url('/fonts/poppins-bold-webfont.woff') format('woff');
-    font-weight: 700;
-    font-style: normal;
-    font-display: swap;
-  }
-  @font-face {
-    font-family: 'Poppins';
-    src: url('/fonts/poppins-bolditalic-webfont.woff2') format('woff2'),
-      url('/fonts/poppins-bolditalic-webfont.woff') format('woff');
-    font-weight: normal;
-    font-style: italic;
-    font-display: swap;
-  }
-  @font-face {
-    font-family: 'Poppins';
-    src: url('/fonts/poppins-extrabold-webfont.woff2') format('woff2'),
-      url('/fonts/poppins-extrabold-webfont.woff') format('woff');
-    font-weight: 800;
-    font-style: normal;
-    font-display: swap;
-  }
-  @font-face {
-    font-family: 'Poppins';
-    src: url('/fonts/poppins-extrabolditalic-webfont.woff2') format('woff2'),
-      url('/fonts/poppins-extrabolditalic-webfont.woff') format('woff');
-    font-weight: 800;
-    font-style: italic;
-    font-display: swap;
-  }
-  @font-face {
-    font-family: 'Poppins';
-    src: url('/fonts/poppins-italic-webfont.woff2') format('woff2'),
-      url('/fonts/poppins-italic-webfont.woff') format('woff');
-    font-weight: 400;
-    font-style: italic;
-    font-display: swap;
-  }
-  @font-face {
-    font-family: 'Poppins';
-    src: url('/fonts/poppins-light-webfont.woff2') format('woff2'),
-      url('/fonts/poppins-light-webfont.woff') format('woff');
-    font-weight: 300;
-    font-style: normal;
-    font-display: swap;
-  }
-  @font-face {
-    font-family: 'Poppins';
-    src: url('/fonts/poppins-lightitalic-webfont.woff2') format('woff2'),
-      url('/fonts/poppins-lightitalic-webfont.woff') format('woff');
-    font-weight: 300;
-    font-style: italic;
-    font-display: swap;
-  }
-  @font-face {
-    font-family: 'Poppins';
-    src: url('/fonts/poppins-medium-webfont.woff2') format('woff2'),
-      url('/fonts/poppins-medium-webfont.woff') format('woff');
-    font-weight: 500;
-    font-style: normal;
-    font-display: swap;
-  }
-  @font-face {
-    font-family: 'Poppins';
-    src: url('/fonts/poppins-mediumitalic-webfont.woff2') format('woff2'),
-      url('/fonts/poppins-mediumitalic-webfont.woff') format('woff');
-    font-weight: 500;
-    font-style: italic;
-    font-display: swap;
-  }
-  @font-face {
-    font-family: 'Poppins';
-    src: url('/fonts/poppins-regular-webfont.woff2') format('woff2'),
-      url('/fonts/poppins-regular-webfont.woff') format('woff');
-    font-weight: 400;
-    font-style: normal;
-    font-display: swap;
-  }
-  @font-face {
-    font-family: 'Poppins';
-    src: url('/fonts/poppins-semibold-webfont.woff2') format('woff2'),
-      url('/fonts/poppins-semibold-webfont.woff') format('woff');
-    font-weight: 600;
-    font-style: normal;
-    font-display: swap;
-  }
-  @font-face {
-    font-family: 'Poppins';
-    src: url('/fonts/poppins-semibolditalic-webfont.woff2') format('woff2'),
-      url('/fonts/poppins-semibolditalic-webfont.woff') format('woff');
-    font-weight: 600;
-    font-style: italic;
-    font-display: swap;
-  }
-  @font-face {
-    font-family: 'DM Mono';
-    src: url('/fonts/dmmono-medium.woff2') format('woff2'),
-      url('/fonts/dmmono-medium.woff') format('woff');
-    font-style: normal;
-    font-weight: 500;
-    font-display: swap;
-  }
-  @font-face {
-    font-family: 'Bitter';
-    src: url('/fonts/bitter-regular.woff2') format('woff2'),
-      url('/fonts/bitter-regular.woff') format('woff');
-    font-style: normal;
-    font-weight: 400;
-    font-display: swap;
-  }
-  @font-face {
-    font-family: 'Bitter';
-    src: url('/fonts/bitter-medium.woff2') format('woff2'),
-      url('/fonts/bitter-medium.woff') format('woff');
-    font-style: normal;
-    font-weight: 500;
-    font-display: swap;
-  }
-  @font-face {
-    font-family: 'Bitter';
-    src: url('/fonts/bitter-mediumitalic.woff2') format('woff2'),
-      url('/fonts/bitter-mediumitalic.woff') format('woff');
-    font-style: italic;
-    font-weight: 500;
-    font-display: swap;
-  }
-  @font-face {
-    font-family: 'Bitter';
-    src: url('/fonts/bitter-semibold.woff2') format('woff2'),
-      url('/fonts/bitter-semibold.woff') format('woff');
-    font-style: normal;
-    font-weight: 600;
-    font-display: swap;
-  }
-
   html,
   body {
     padding: 0;

package/helpers/useThemeDropdownObject.tsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react'
 import { UncompiledTheme } from 'newskit'
 import {
   sharedTheme,
+  sharedThemeDark,
   timesTheme,
   virginRadioTheme,
   theSunTheme,
@@ -46,6 +47,7 @@ export const useThemeDropdownObject = (
     themeDropdownOpen,
     options: {
       sharedTheme,
+      sharedThemeDark,
       timesTheme,
       virginRadioTheme,
       theSunTheme,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newskit-render/core",
-  "version": "2.42.0",
+  "version": "2.43.0-alpha.1",
   "description": "Newskit Render - Core package",
   "author": "",
   "license": "UNLICENSED",
@@ -41,13 +41,14 @@
     "@emotion/styled": "11.9.3",
     "@newskit-render/api": "^1.6.4",
     "@newskit-render/auth": "^1.3.9",
-    "@newskit-render/checkout": "^2.3.1",
+    "@newskit-render/checkout": "^2.4.0-alpha.1",
     "@newskit-render/feature-flags": "^1.4.10",
     "@newskit-render/feed": "^1.4.14",
-    "@newskit-render/my-account": "^4.2.0",
-    "@newskit-render/shared-components": "^2.3.0",
-    "@newskit-render/standalone-components": "^2.4.0",
+    "@newskit-render/my-account": "^4.3.0-alpha.1",
+    "@newskit-render/shared-components": "^2.4.0-alpha.1",
+    "@newskit-render/standalone-components": "^2.5.0-alpha.1",
     "@newskit-render/validation": "^1.5.11",
+    "@next/font": "13.1.6",
     "cross-fetch": "3.1.5",
     "graphql": "16.6.0",
     "lodash.get": "4.4.2",

package/pages/_app.tsx

@@ -9,6 +9,16 @@ import { InstrumentationContextProvider } from '../app-context/InstrumentationCo
 import { getTenant } from '../helpers/multiTenancy'
 import { GlobalStyling } from '../css'
 import MultiTenancyProvider from '../context/multi-tenancy'
+import {
+  bitter,
+  poppins,
+  dmSans,
+  theSun,
+  gillSansMtStd,
+  timesModern,
+  timesDigital,
+  montserrat,
+} from '../assets/fontFamily'
 
 if (!process.browser) {
   // eslint-disable-next-line global-require
@@ -30,6 +40,18 @@ function MyApp({ Component, pageProps, tenant }: MyAppProps) {
     <MultiTenancyProvider tenant={tenant}>
       <AppContextProvider>
         <>
+          <style jsx global>{`
+            :root {
+              --bitter: ${bitter.style.fontFamily};
+              --poppins: ${poppins.style.fontFamily};
+              --dm-sans: ${dmSans.style.fontFamily};
+              --the-sun: ${theSun.style.fontFamily};
+              --gill-sans-mt-std: ${gillSansMtStd.style.fontFamily};
+              --times-modern: ${timesModern.style.fontFamily};
+              --times-digital: ${timesDigital.style.fontFamily};
+              --montserrat: ${montserrat.style.fontFamily};
+            }
+          `}</style>
           <Head>
             <meta name="robots" content="max-image-preview:standard" />
             <meta name="robots" content="max-video-preview:0" />

package/pages/_document.tsx

@@ -21,21 +21,6 @@ import {
   tealiumProfileId,
   tealiumEnv,
 } from '../config'
-import { fontList } from '../helpers/fontList'
-
-const generateFontLink = ({ url, format }: { url: string; format: string }) => {
-  const type = `font/${format}`
-
-  return (
-    <link
-      rel="preload"
-      href={url}
-      as="font"
-      type={type}
-      crossOrigin="anonymous"
-    />
-  )
-}
 
 export default class MyDocument extends Document {
   static async getInitialProps(ctx: DocumentContext) {
@@ -59,7 +44,6 @@ export default class MyDocument extends Document {
       <Html lang="en">
         <Head>
           <>
-            {fontList.map((font) => generateFontLink(font))}
             <Script
               id="browser-script"
               type="text/javascript"

package/temp/_app.tsx

@@ -1,7 +1,9 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import React from 'react'
 import Head from 'next/head'
-import { ThemeProvider, Global, css, styled } from 'newskit'
+import { ThemeProvider, Global, styled } from 'newskit'
+import { bitter, poppins, dmSans } from '../assets/fontFamily'
+import { GlobalStyling } from '../css'
 <% MODULE >
 
 
@@ -11,229 +13,6 @@ if (!process.browser) {
   require('newrelic')
 }
 
-const GlobalStyling = css`
-  @font-face {
-    font-family: GillSansMTStd-Medium;
-    src: url('/fonts/GillSansMTStd-Medium.otf');
-  }
-  @font-face {
-    font-family: TimesModern-Bold;
-    src: url('/fonts/TimesDigital-Bold.ttf') format('truetype');
-  }
-  @font-face {
-    font-family: TimesModern-Regular;
-    src: url('/fonts/TimesDigital-Regular.ttf') format('truetype');
-  }
-  @font-face {
-    font-family: TimesDigitalW04-Regular;
-    src: url('/fonts/TimesDigitalW04-Regular.ttf') format('truetype');
-  }
-  @font-face {
-    font-family: Montserrat;
-    src: url('/fonts/Montserrat-Regular.ttf') format('truetype');
-  }
-  @font-face {
-    font-family: TheSun-Bold;
-    src: url('/fonts/TheSun-Bold.ttf') format('truetype');
-  }
-  @font-face {
-    font-family: TheSun-HeavyNarrow;
-    src: url('/fonts/TheSun-HeavyNarrow.ttf') format('truetype');
-  }
-  @font-face {
-    font-family: TheSun-Regular;
-    src: url('/fonts/TheSun-Regular.ttf') format('truetype');
-  }
-  @font-face {
-    font-family: TheSun-Medium;
-    src: url('/fonts/TheSun-Medium.ttf') format('truetype');
-  }
-  @font-face {
-    font-family: 'DM Sans';
-    src: url('/fonts/dmsans-regular-webfont.woff2') format('woff2'),
-      url('/fonts/dmsans-regular-webfont.woff') format('woff');
-    font-style: normal;
-    font-weight: 400;
-    font-display: swap;
-  }
-  @font-face {
-    font-family: 'DM Sans';
-    src: url('/fonts/dmsans-italic-webfont.woff2') format('woff2'),
-      url('/fonts/dmsans-italic-webfont.woff') format('woff');
-    font-style: italic;
-    font-weight: 400;
-    font-display: swap;
-  }
-  @font-face {
-    font-family: 'DM Sans';
-    src: url('/fonts/dmsans-medium-webfont.woff2') format('woff2'),
-      url('/fonts/dmsans-medium-webfont.woff') format('woff');
-    font-style: normal;
-    font-weight: 500;
-    font-display: swap;
-  }
-  @font-face {
-    font-family: 'DM Sans';
-    src: url('/fonts/dmsans-mediumitalic-webfont.woff2') format('woff2'),
-      url('/fonts/dmsans-mediumitalic-webfont.woff') format('woff');
-    font-style: italic;
-    font-weight: 500;
-    font-display: swap;
-  }
-  @font-face {
-    font-family: 'DM Sans';
-    src: url('/fonts/dmsans-bold-webfont.woff2') format('woff2'),
-      url('/fonts/dmsans-bold-webfont.woff') format('woff');
-    font-style: normal;
-    font-weight: 700;
-    font-display: swap;
-  }
-  @font-face {
-    font-family: 'DM Sans';
-    src: url('/fonts/dmsans-bolditalic-webfont.woff2') format('woff2'),
-      url('/fonts/dmsans-bolditalic-webfont.woff') format('woff');
-    font-style: italic;
-    font-weight: 700;
-    font-display: swap;
-  }
-  @font-face {
-    font-family: 'Poppins';
-    src: url('/fonts/poppins-bold-webfont.woff2') format('woff2'),
-      url('/fonts/poppins-bold-webfont.woff') format('woff');
-    font-weight: 700;
-    font-style: normal;
-  }
-  @font-face {
-    font-family: 'Poppins';
-    src: url('/fonts/poppins-bolditalic-webfont.woff2') format('woff2'),
-      url('/fonts/poppins-bolditalic-webfont.woff') format('woff');
-    font-weight: normal;
-    font-style: italic;
-  }
-  @font-face {
-    font-family: 'Poppins';
-    src: url('/fonts/poppins-extrabold-webfont.woff2') format('woff2'),
-      url('/fonts/poppins-extrabold-webfont.woff') format('woff');
-    font-weight: 800;
-    font-style: normal;
-  }
-  @font-face {
-    font-family: 'Poppins';
-    src: url('/fonts/poppins-extrabolditalic-webfont.woff2') format('woff2'),
-      url('/fonts/poppins-extrabolditalic-webfont.woff') format('woff');
-    font-weight: 800;
-    font-style: italic;
-  }
-  @font-face {
-    font-family: 'Poppins';
-    src: url('/fonts/poppins-italic-webfont.woff2') format('woff2'),
-      url('/fonts/poppins-italic-webfont.woff') format('woff');
-    font-weight: 400;
-    font-style: italic;
-  }
-  @font-face {
-    font-family: 'Poppins';
-    src: url('/fonts/poppins-light-webfont.woff2') format('woff2'),
-      url('/fonts/poppins-light-webfont.woff') format('woff');
-    font-weight: 300;
-    font-style: normal;
-  }
-  @font-face {
-    font-family: 'Poppins';
-    src: url('/fonts/poppins-lightitalic-webfont.woff2') format('woff2'),
-      url('/fonts/poppins-lightitalic-webfont.woff') format('woff');
-    font-weight: 300;
-    font-style: italic;
-  }
-  @font-face {
-    font-family: 'Poppins';
-    src: url('/fonts/poppins-medium-webfont.woff2') format('woff2'),
-      url('/fonts/poppins-medium-webfont.woff') format('woff');
-    font-weight: 500;
-    font-style: normal;
-  }
-  @font-face {
-    font-family: 'Poppins';
-    src: url('/fonts/poppins-mediumitalic-webfont.woff2') format('woff2'),
-      url('/fonts/poppins-mediumitalic-webfont.woff') format('woff');
-    font-weight: 500;
-    font-style: italic;
-  }
-  @font-face {
-    font-family: 'Poppins';
-    src: url('/fonts/poppins-regular-webfont.woff2') format('woff2'),
-      url('/fonts/poppins-regular-webfont.woff') format('woff');
-    font-weight: 400;
-    font-style: normal;
-  }
-  @font-face {
-    font-family: 'Poppins';
-    src: url('/fonts/poppins-semibold-webfont.woff2') format('woff2'),
-      url('/fonts/poppins-semibold-webfont.woff') format('woff');
-    font-weight: 600;
-    font-style: normal;
-  }
-  @font-face {
-    font-family: 'Poppins';
-    src: url('/fonts/poppins-semibolditalic-webfont.woff2') format('woff2'),
-      url('/fonts/poppins-semibolditalic-webfont.woff') format('woff');
-    font-weight: 600;
-    font-style: italic;
-  }
-  @font-face {
-    font-family: 'DM Mono';
-    src: url('/fonts/dmmono-medium.woff2') format('woff2'),
-      url('/fonts/dmmono-medium.woff') format('woff');
-    font-style: normal;
-    font-weight: 500;
-    font-display: swap;
-  }
-  @font-face {
-    font-family: 'Bitter';
-    src: url('/fonts/bitter-regular.woff2') format('woff2'),
-      url('/fonts/bitter-regular.woff') format('woff');
-    font-style: normal;
-    font-weight: 400;
-    font-display: swap;
-  }
-  @font-face {
-    font-family: 'Bitter';
-    src: url('/fonts/bitter-medium.woff2') format('woff2'),
-      url('/fonts/bitter-medium.woff') format('woff');
-    font-style: normal;
-    font-weight: 500;
-    font-display: swap;
-  }
-  @font-face {
-    font-family: 'Bitter';
-    src: url('/fonts/bitter-mediumitalic.woff2') format('woff2'),
-      url('/fonts/bitter-mediumitalic.woff') format('woff');
-    font-style: italic;
-    font-weight: 500;
-    font-display: swap;
-  }
-  @font-face {
-    font-family: 'Bitter';
-    src: url('/fonts/bitter-semibold.woff2') format('woff2'),
-      url('/fonts/bitter-semibold.woff') format('woff');
-    font-style: normal;
-    font-weight: 600;
-    font-display: swap;
-  }
-
-  html,
-  body {
-    padding: 0;
-    margin: 0;
-    font-family: 'Noto Sans', -apple-system, BlinkMacSystemFont, Segoe UI,
-      Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
-      sans-serif;
-  }
-  * {
-    box-sizing: border-box;
-  }
-`
-
 const PageContainer = styled.div`
   position: relative;
   min-height: 100vh;