@newskit-render/core 1.13.2 → 1.20.0

package/helpers/a11y.ts

@@ -1,7 +1,9 @@
-export const handleEnterKeyPress =
-  (onClick: () => void) =>
-  ({ key }: { key: string }) => {
-    if (key === 'Enter') {
-      onClick()
-    }
+export const handleEnterKeyPress = (onClick: () => void) => ({
+  key,
+}: {
+  key: string
+}) => {
+  if (key === 'Enter') {
+    onClick()
   }
+}

package/helpers/mocks/articleMock.ts

@@ -26,25 +26,29 @@ export const relatedArticles = [
   {
     title: 'Prince Harry',
     tag: 'NEWS',
-    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a sodales leo. Cras egestas nisl libero, vitae viverra justo gravida quis.',
+    text:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a sodales leo. Cras egestas nisl libero, vitae viverra justo gravida quis.',
     href: imagePlaceholderHref('70x50'),
   },
   {
     title: 'Meghan Markle',
     tag: 'SPORT',
-    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a sodales leo. Cras egestas nisl libero, vitae viverra justo gravida quis.',
+    text:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a sodales leo. Cras egestas nisl libero, vitae viverra justo gravida quis.',
     href: imagePlaceholderHref('70x50'),
   },
   {
     title: 'Royal Family',
     tag: 'CULTURE',
-    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a sodales leo. Cras egestas nisl libero, vitae viverra justo gravida quis.',
+    text:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a sodales leo. Cras egestas nisl libero, vitae viverra justo gravida quis.',
     href: imagePlaceholderHref('70x50'),
   },
   {
     title: 'Royal Family',
     tag: 'CORONAVIRUS',
-    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a sodales leo. Cras egestas nisl libero, vitae viverra justo gravida quis.',
+    text:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a sodales leo. Cras egestas nisl libero, vitae viverra justo gravida quis.',
     href: imagePlaceholderHref('70x50'),
   },
 ]

package/helpers/mocks/getRadioPostMock.ts

@@ -29,7 +29,8 @@ export default [
                     italic: false,
                     underline: false,
                     monospace: false,
-                    text: 'Proin eget tortor risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; ',
+                    text:
+                      'Proin eget tortor risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; ',
                   },
                   {
                     type: 'text',
@@ -45,7 +46,8 @@ export default [
                     italic: false,
                     underline: false,
                     monospace: false,
-                    text: ', auctor sit amet aliquam vel, ullamcorper sit amet ligula. Donec rutrum congue leo eget malesuada. Proin eget tortor risus. Sed porttitor lectus nibh. Donec sollicitudin molestie malesuada.',
+                    text:
+                      ', auctor sit amet aliquam vel, ullamcorper sit amet ligula. Donec rutrum congue leo eget malesuada. Proin eget tortor risus. Sed porttitor lectus nibh. Donec sollicitudin molestie malesuada.',
                   },
                 ],
               },

package/helpers/mocks/getUniversalArticleMock.ts

@@ -51,17 +51,21 @@ export default [
           summary: {
             children: [
               {
-                text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget lorem vel nunc feugiat malesuada ut ac nisi. Morbi odio ipsum, dignissim nec turpis vel, laoreet condimentum tortor. Duis laoreet tincidunt ullamcorper.',
+                text:
+                  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget lorem vel nunc feugiat malesuada ut ac nisi. Morbi odio ipsum, dignissim nec turpis vel, laoreet condimentum tortor. Duis laoreet tincidunt ullamcorper.',
               },
               {
-                text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget lorem vel nunc feugiat malesuada ut ac nisi. Morbi odio ipsum, dignissim nec turpis vel, laoreet condimentum tortor. Duis laoreet tincidunt ullamcorper.',
+                text:
+                  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget lorem vel nunc feugiat malesuada ut ac nisi. Morbi odio ipsum, dignissim nec turpis vel, laoreet condimentum tortor. Duis laoreet tincidunt ullamcorper.',
               },
               {
                 url: 'http://this-is-a-url/',
-                text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget lorem vel nunc feugiat malesuada ut ac nisi. Morbi odio ipsum, dignissim nec turpis vel, laoreet condimentum tortor. Duis laoreet tincidunt ullamcorper.',
+                text:
+                  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget lorem vel nunc feugiat malesuada ut ac nisi. Morbi odio ipsum, dignissim nec turpis vel, laoreet condimentum tortor. Duis laoreet tincidunt ullamcorper.',
               },
               {
-                text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget lorem vel nunc feugiat malesuada ut ac nisi. Morbi odio ipsum, dignissim nec turpis vel, laoreet condimentum tortor. Duis laoreet tincidunt ullamcorper.',
+                text:
+                  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget lorem vel nunc feugiat malesuada ut ac nisi. Morbi odio ipsum, dignissim nec turpis vel, laoreet condimentum tortor. Duis laoreet tincidunt ullamcorper.',
               },
             ],
           },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newskit-render/core",
-  "version": "1.13.2",
+  "version": "1.20.0",
   "description": "Newskit Render - Core package",
   "author": "",
   "license": "UNLICENSED",
@@ -30,63 +30,64 @@
     "analyze": "ANALYZE=true next build"
   },
   "dependencies": {
-    "@apollo/client": "^3.4.16",
-    "@newskit-render/api": "^0.8.0",
-    "@newskit-render/auth": "^0.25.0",
-    "@newskit-render/checkout": "^0.15.0",
-    "@newskit-render/my-account": "^0.122.0",
-    "@newskit-render/shared-components": "^0.25.0",
-    "@newskit-render/sitemap": "^0.28.0",
-    "@newskit-render/validation": "^0.30.0",
-    "cross-fetch": "^3.1.4",
-    "graphql": "^15.6.0",
-    "newrelic": "^7.1.0",
-    "newskit": "4.3.1",
-    "next": "^12.0.2",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.2",
-    "react-helmet": "^6.1.0",
+    "@apollo/client": "3.4.16",
+    "@newskit-render/api": "^0.12.0",
+    "@newskit-render/auth": "^0.27.0",
+    "@newskit-render/checkout": "^0.18.0",
+    "@newskit-render/feature-flags": "^0.9.0",
+    "@newskit-render/my-account": "^0.129.0",
+    "@newskit-render/shared-components": "^0.29.0",
+    "@newskit-render/sitemap": "^0.31.0",
+    "@newskit-render/validation": "^0.33.0",
+    "cross-fetch": "3.1.5",
+    "graphql": "15.6.0",
+    "newrelic": "7.1.0",
+    "newskit": "5.0.0",
+    "next": "12.0.8",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-helmet": "6.1.0",
     "react-hook-form": "7.8.4"
   },
   "devDependencies": {
-    "@apollo/react-testing": "^4.0.0",
-    "@emotion/jest": "^11.3.0",
-    "@next/bundle-analyzer": "^12.0.8",
-    "@pact-foundation/pact": "^9.12.1",
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.0.2",
-    "@types/newrelic": "^7.0.0",
-    "@types/react": "^16.9.49",
-    "@types/react-helmet": "^6.1.0",
-    "@typescript-eslint/eslint-plugin": "^3.7.1",
-    "@typescript-eslint/parser": "^3.7.1",
-    "babel-jest": "^26.3.0",
+    "@apollo/react-testing": "4.0.0",
+    "@emotion/jest": "11.3.0",
+    "@next/bundle-analyzer": "12.0.8",
+    "@pact-foundation/pact": "9.12.1",
+    "@testing-library/jest-dom": "5.11.4",
+    "@testing-library/react": "11.0.2",
+    "@types/newrelic": "7.0.0",
+    "@types/react": "17.0.2",
+    "@types/react-helmet": "6.1.0",
+    "@typescript-eslint/eslint-plugin": "3.7.1",
+    "@typescript-eslint/parser": "3.7.1",
+    "babel-jest": "26.3.0",
     "cypress": "9.0.0",
-    "eslint": "^6.6.0",
-    "eslint-config-airbnb": "^18.2.0",
-    "eslint-config-airbnb-typescript": "^9.0.0",
-    "eslint-config-prettier": "^6.11.0",
-    "eslint-config-react-app": "^5.2.1",
-    "eslint-import-resolver-typescript": "^2.0.0",
-    "eslint-loader": "^4.0.2",
-    "eslint-plugin-cypress": "^2.11.2",
-    "eslint-plugin-flowtype": "^5.2.0",
-    "eslint-plugin-import": "^2.22.1",
+    "eslint": "6.6.0",
+    "eslint-config-airbnb": "18.2.0",
+    "eslint-config-airbnb-typescript": "9.0.0",
+    "eslint-config-prettier": "6.11.0",
+    "eslint-config-react-app": "5.2.1",
+    "eslint-import-resolver-typescript": "2.0.0",
+    "eslint-loader": "4.0.2",
+    "eslint-plugin-cypress": "2.11.2",
+    "eslint-plugin-flowtype": "5.2.0",
+    "eslint-plugin-import": "2.22.1",
     "eslint-plugin-jsx-a11y": "6.2.3",
-    "eslint-plugin-prettier": "^3.1.4",
+    "eslint-plugin-prettier": "3.1.4",
     "eslint-plugin-react": "7.19.0",
-    "eslint-plugin-react-hooks": "^1.6.1",
-    "jest": "^27.2.4",
-    "jest-junit": "^12.0.0",
-    "jest-watch-typeahead": "^0.6.3",
-    "lint-staged": "^12.1.7",
-    "next-transpile-modules": "^8.0.0",
-    "prettier": "^2.0.5",
-    "prettier-eslint": "^11.0.0",
-    "prettier-eslint-cli": "^5.0.0",
-    "ts-jest": "^27.0.5",
-    "typescript": "^4.4.3",
-    "wait-on": "^5.3.0"
+    "eslint-plugin-react-hooks": "1.6.1",
+    "jest": "27.2.4",
+    "jest-junit": "12.0.0",
+    "jest-watch-typeahead": "0.6.3",
+    "lint-staged": "12.1.7",
+    "next-transpile-modules": "8.0.0",
+    "prettier": "2.0.5",
+    "prettier-eslint": "11.0.0",
+    "prettier-eslint-cli": "5.0.0",
+    "ts-jest": "27.0.5",
+    "typescript": "4.4.3",
+    "wait-on": "5.3.0"
   },
   "precommit": [
     "precommit"

package/pages/[section]/[articleId]/[articleSlug].tsx

@@ -70,6 +70,7 @@ export async function getServerSideProps(context) {
       twitterUsername: process.env.TWITTER_USERNAME || '',
       siteHost: process.env.SITE_HOST || '',
       gscId: process.env.GSC_ID || '',
+      showAds: true,
       // user,
     },
   }

package/pages/[section]/index.tsx

@@ -38,6 +38,7 @@ export async function getServerSideProps(context) {
     props: {
       page: data.page,
       isIndexPage: true,
+      showAds: true,
       //  user,
     },
   }

package/pages/_app.tsx

@@ -3,6 +3,12 @@ import { AppProps } from 'next/app'
 import Head from 'next/head'
 import { ThemeProvider, Global, css, styled } from 'newskit'
 import { SessionProvider } from '@newskit-render/auth'
+import {
+  getFeatureFlags,
+  FeatureFlagsContextProvider,
+  FeatureFlag,
+  createFeatureFlagsInstance,
+} from '@newskit-render/feature-flags'
 import { AppContextProvider, AppContext } from '../app-context/AppContext'
 import { logger } from '../helpers/logger'
 
@@ -12,6 +18,12 @@ if (!process.browser) {
   logger()
 }
 
+if (process.env.OPTIMIZELY_SDK_KEY) {
+  createFeatureFlagsInstance({
+    optimizelyConfig: { sdkKey: process.env.OPTIMIZELY_SDK_KEY },
+  })
+}
+
 const GlobalStyling = css`
   @font-face {
     font-family: GillSansMTStd-Medium;
@@ -49,6 +61,178 @@ const GlobalStyling = css`
     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 {
@@ -68,7 +252,11 @@ const PageContainer = styled.div`
   min-height: 100vh;
 `
 
-function MyApp({ Component, pageProps }: AppProps) {
+interface MyAppProps extends AppProps {
+  featureFlags?: FeatureFlag
+}
+
+function MyApp({ Component, pageProps, featureFlags }: MyAppProps) {
   return (
     <AppContextProvider>
       <>
@@ -82,21 +270,31 @@ function MyApp({ Component, pageProps }: AppProps) {
             key="viewport"
           />
         </Head>
-        <SessionProvider pageProps={pageProps}>
-          <AppContext.Consumer>
-            {({ theme }) => (
-              <ThemeProvider theme={theme}>
-                <Global styles={GlobalStyling} />
-                <PageContainer>
-                  <Component {...pageProps} />
-                </PageContainer>
-              </ThemeProvider>
-            )}
-          </AppContext.Consumer>
-        </SessionProvider>
+        <FeatureFlagsContextProvider context={featureFlags}>
+          <SessionProvider pageProps={pageProps}>
+            <AppContext.Consumer>
+              {({ theme }) => (
+                <ThemeProvider theme={theme}>
+                  <Global styles={GlobalStyling} />
+                  <PageContainer>
+                    <Component {...pageProps} />
+                  </PageContainer>
+                </ThemeProvider>
+              )}
+            </AppContext.Consumer>
+          </SessionProvider>
+        </FeatureFlagsContextProvider>
       </>
     </AppContextProvider>
   )
 }
 
+MyApp.getInitialProps = async () => {
+  if (process.env.OPTIMIZELY_SDK_KEY) {
+    const featureFlags = await getFeatureFlags()
+    return { featureFlags }
+  }
+  return {}
+}
+
 export default MyApp

package/pages/_document.tsx

@@ -32,6 +32,13 @@ export default class MyDocument extends Document {
 
   render() {
     const helmet = Helmet.rewind()
+    const showAds =
+      this.props.__NEXT_DATA__.props.pageProps &&
+      this.props.__NEXT_DATA__.props.pageProps.showAds
+        ? this.props.__NEXT_DATA__.props.pageProps.showAds
+        : false
+
+    const { featureFlags } = this.props.__NEXT_DATA__.props
     return (
       <Html lang="en">
         <Head>
@@ -46,12 +53,14 @@ export default class MyDocument extends Document {
               ),
             }}
           />
-          {EXPERIMENTATION_WEB && (
-            <ExperimentationWeb
-              optimizelyWebConfig={{ scriptCdn: EXPERIMENTATION_WEB }}
-              reactHelmet={Helmet}
-            />
-          )}
+          {EXPERIMENTATION_WEB &&
+            featureFlags &&
+            featureFlags.experimentation_web_flag && (
+              <ExperimentationWeb
+                optimizelyWebConfig={{ scriptCdn: EXPERIMENTATION_WEB }}
+                reactHelmet={Helmet}
+              />
+            )}
           {helmet.script.toComponent()}
           {SOURCEPOINT_ACCOUNT_ID && (
             <Consent
@@ -62,14 +71,18 @@ export default class MyDocument extends Document {
             />
           )}
           <meta name="robots" content="noindex" />
-          <script
-            type="text/javascript"
-            src="https://ads.newskit.co.uk/prebid.newskit.min.js"
-          />
-          <script
-            type="text/javascript"
-            src="https://ads.newskit.co.uk/ads.newskit.min.js"
-          />
+          {showAds && (
+            <>
+              <script
+                type="text/javascript"
+                src="https://ads.newskit.co.uk/prebid.newskit.min.js"
+              />
+              <script
+                type="text/javascript"
+                src="https://ads.newskit.co.uk/ads.newskit.min.js"
+              />
+            </>
+          )}
         </Head>
         <body>
           {TEALIUM_ACCOUNT_ID && (

package/pages/checkout/account-creation/index.tsx

@@ -1,10 +1,18 @@
 import { AccountCreation, getProviderProps } from '@newskit-render/checkout'
 import React, { useContext } from 'react'
 import { AppContext } from '../../../app-context/AppContext'
+import validation from '../../../validation'
 
 const AccountCreationPage = (props) => {
   const { theme, setTheme } = useContext(AppContext)
-  return <AccountCreation {...props} customTheme={theme} setTheme={setTheme} />
+  return (
+    <AccountCreation
+      {...props}
+      customTheme={theme}
+      setTheme={setTheme}
+      validation={validation}
+    />
+  )
 }
 
 export default AccountCreationPage

package/pages/index.tsx

@@ -35,6 +35,7 @@ export async function getServerSideProps(context) {
   return {
     props: {
       page,
+      showAds: true,
       // user: (user || null),
     },
   }