@newskit-render/core 2.38.2 → 2.39.0-alpha.0

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.38.2](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@2.38.2-alpha.0...@newskit-render/core@2.38.2) (2023-01-09)
+
+**Note:** Version bump only for package @newskit-render/core
+
+
+
+
+
 ## [2.38.1](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@2.38.1-alpha.0...@newskit-render/core@2.38.1) (2023-01-06)
 
 **Note:** Version bump only for package @newskit-render/core

package/context/app-context/index.tsx

@@ -1,12 +1,17 @@
 import React, { useState } from 'react'
 import { UncompiledTheme } from 'newskit'
-import { sharedTheme } from '@newskit-render/shared-components'
+import {
+  sharedTheme,
+  ThemeDropdownObject,
+} from '@newskit-render/shared-components'
 import { useMultiTenancy } from '../multi-tenancy'
 import { themesMap } from '../../config'
+import { useThemeDropdownObject } from '../../helpers/useThemeDropdownObject'
 
 type AppContextType = {
   theme: UncompiledTheme
   setTheme: (T: UncompiledTheme) => void
+  themeDropdownObject: ThemeDropdownObject
 }
 
 const AppContext = React.createContext({
@@ -17,9 +22,10 @@ const AppContextProvider = ({ children }: { children: JSX.Element }) => {
   const { tenant } = useMultiTenancy()
   const tenantTheme = themesMap[tenant]
   const [theme, setTheme] = useState(tenantTheme)
+  const themeDropdownObject = useThemeDropdownObject(setTheme)
 
   return (
-    <AppContext.Provider value={{ theme, setTheme }}>
+    <AppContext.Provider value={{ theme, setTheme, themeDropdownObject }}>
       {children}
     </AppContext.Provider>
   )

package/helpers/__tests__/useThemeDropdownObject.test.ts

@@ -19,16 +19,19 @@ describe('createThemeDropdownObject', () => {
         'The-Sun': {
           src: '/assets/navigationPrimary-brandMark-sun.svg',
           width: '115px',
+          height: '42px',
           top: '0',
         },
         'Virgin-Radio': {
           src: '/assets/navigationPrimary-brandMark-vr.svg',
           width: '150px',
+          height: '41px',
           top: '0',
         },
         'The-Times': {
           src: '/assets/navigationPrimary-brandMark-times.svg',
           width: '150px',
+          height: '40px',
           top: '0',
         },
       },

package/helpers/useThemeDropdownObject.tsx

@@ -19,16 +19,19 @@ const clientNavigationLogos = {
   'The-Sun': {
     src: '/assets/navigationPrimary-brandMark-sun.svg',
     width: '115px',
+    height: '42px',
     top: '0',
   },
   'Virgin-Radio': {
     src: '/assets/navigationPrimary-brandMark-vr.svg',
     width: '150px',
+    height: '41px',
     top: '0',
   },
   'The-Times': {
     src: '/assets/navigationPrimary-brandMark-times.svg',
     width: '150px',
+    height: '40px',
     top: '0',
   },
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newskit-render/core",
-  "version": "2.38.2",
+  "version": "2.39.0-alpha.0",
   "description": "Newskit Render - Core package",
   "author": "",
   "license": "UNLICENSED",
@@ -41,12 +41,12 @@
     "@emotion/styled": "11.10.4",
     "@newskit-render/api": "^1.6.0",
     "@newskit-render/auth": "^1.3.5",
-    "@newskit-render/checkout": "^2.1.1",
+    "@newskit-render/checkout": "^2.2.0-alpha.0",
     "@newskit-render/feature-flags": "^1.4.6",
     "@newskit-render/feed": "^1.4.9",
-    "@newskit-render/my-account": "^4.0.2",
-    "@newskit-render/shared-components": "^2.0.2",
-    "@newskit-render/standalone-components": "^2.1.1",
+    "@newskit-render/my-account": "^4.1.0-alpha.0",
+    "@newskit-render/shared-components": "^2.1.0-alpha.0",
+    "@newskit-render/standalone-components": "^2.1.2-alpha.0",
     "@newskit-render/validation": "^1.5.7",
     "cross-fetch": "3.1.5",
     "graphql": "16.6.0",

package/pages/_app.tsx

@@ -42,11 +42,17 @@ function MyApp({ Component, pageProps, tenant }: MyAppProps) {
           </Head>
           <InstrumentationContextProvider>
             <AppContext.Consumer>
-              {({ theme }) => (
+              {({ theme, themeDropdownObject }) => (
                 <ThemeProvider theme={theme}>
                   <Global styles={GlobalStyling} />
                   <PageContainer>
-                    <Component {...pageProps} />
+                    <Component
+                      {...pageProps}
+                      {...{
+                        themeDropdownObject,
+                        customTheme: theme,
+                      }}
+                    />
                   </PageContainer>
                 </ThemeProvider>
               )}

package/pages/account/add/[field].tsx

@@ -1,26 +1,15 @@
-import React, { useContext } from 'react'
+import React from 'react'
 import newrelic from 'newrelic'
 import { AddField, NotFound, addComponentMap } from '@newskit-render/my-account'
 import validation from '../../../validation'
-import { AppContext } from '../../../context/app-context'
-import { useThemeDropdownObject } from '../../../helpers/useThemeDropdownObject'
 
 const AccountAddField = (props) => {
   const doesAddPageExist = Object.keys(addComponentMap).includes(
     props.data.type
   )
-  const { theme, setTheme } = useContext(AppContext)
-  const themeDropdownObject = useThemeDropdownObject(setTheme)
 
   if (doesAddPageExist) {
-    return (
-      <AddField
-        {...props}
-        validation={validation}
-        customTheme={theme}
-        themeDropdownObject={themeDropdownObject}
-      />
-    )
+    return <AddField {...props} validation={validation} />
   }
   return <NotFound />
 }

package/pages/account/cancellation/index.tsx

@@ -1,24 +1,13 @@
-import React, { useContext } from 'react'
+import React from 'react'
 import { Cancellation, getProviderProps } from '@newskit-render/my-account'
 import newrelic from 'newrelic'
 import { initAndGetFeatureFlag } from '@newskit-render/feature-flags' // create-render-app effected
 import { optimizelysdkKey } from '../../../config' // create-render-app effected
-import { AppContext } from '../../../context/app-context'
-import { useThemeDropdownObject } from '../../../helpers/useThemeDropdownObject'
 import validation from '../../../validation'
 
-const AccountCancellation = (props) => {
-  const { theme, setTheme } = useContext(AppContext)
-  const themeDropdownObject = useThemeDropdownObject(setTheme)
-  return (
-    <Cancellation
-      {...props}
-      customTheme={theme}
-      validation={validation}
-      themeDropdownObject={themeDropdownObject}
-    />
-  )
-}
+const AccountCancellation = (props) => (
+  <Cancellation {...props} validation={validation} />
+)
 
 export default AccountCancellation
 

package/pages/account/edit/[field].tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react'
+import React from 'react'
 import newrelic from 'newrelic'
 import {
   EditField,
@@ -9,25 +9,14 @@ import {
 import { initAndGetFeatureFlag } from '@newskit-render/feature-flags' // create-render-app effected
 import { optimizelysdkKey } from '../../../config' // create-render-app effected
 import validation from '../../../validation'
-import { AppContext } from '../../../context/app-context'
-import { useThemeDropdownObject } from '../../../helpers/useThemeDropdownObject'
 
 const AccountEditField = (props) => {
   const doesEditPageExist = Object.keys(editComponentMap).includes(
     props.data.type
   )
-  const { theme, setTheme } = useContext(AppContext)
-  const themeDropdownObject = useThemeDropdownObject(setTheme)
 
   if (doesEditPageExist) {
-    return (
-      <EditField
-        {...props}
-        validation={validation}
-        customTheme={theme}
-        themeDropdownObject={themeDropdownObject}
-      />
-    )
+    return <EditField {...props} validation={validation} />
   }
   return <NotFound />
 }

package/pages/account/holiday-stop/index.tsx

@@ -1,22 +1,10 @@
+import React from 'react'
 import { getProviderProps, HolidayStop } from '@newskit-render/my-account'
 import newrelic from 'newrelic'
-import React, { useContext } from 'react'
 import { initAndGetFeatureFlag } from '@newskit-render/feature-flags' // create-render-app effected
 import { optimizelysdkKey } from '../../../config' // create-render-app effected
-import { AppContext } from '../../../context/app-context'
-import { useThemeDropdownObject } from '../../../helpers/useThemeDropdownObject'
 
-const AccountHolidayStop = (props) => {
-  const { theme, setTheme } = useContext(AppContext)
-  const themeDropdownObject = useThemeDropdownObject(setTheme)
-  return (
-    <HolidayStop
-      {...props}
-      customTheme={theme}
-      themeDropdownObject={themeDropdownObject}
-    />
-  )
-}
+const AccountHolidayStop = (props) => <HolidayStop {...props} />
 
 export default AccountHolidayStop
 

package/pages/account/holiday-stop/previous-holiday-stops.tsx

@@ -1,21 +1,10 @@
+import React from 'react'
 import { getProviderProps, HolidayStopList } from '@newskit-render/my-account'
 import newrelic from 'newrelic'
-import React, { useContext } from 'react'
-import { AppContext } from '../../../context/app-context'
-import { useThemeDropdownObject } from '../../../helpers/useThemeDropdownObject'
 
-const AccountPreviousHolidayStops = (props) => {
-  const { theme, setTheme } = useContext(AppContext)
-  const themeDropdownObject = useThemeDropdownObject(setTheme)
-  return (
-    <HolidayStopList
-      {...props}
-      customTheme={theme}
-      themeDropdownObject={themeDropdownObject}
-      holidayStopType="previous"
-    />
-  )
-}
+const AccountPreviousHolidayStops = (props) => (
+  <HolidayStopList {...props} holidayStopType="previous" />
+)
 
 export default AccountPreviousHolidayStops
 

package/pages/account/holiday-stop/upcoming-holiday-stops.tsx

@@ -1,21 +1,10 @@
+import React from 'react'
 import { getProviderProps, HolidayStopList } from '@newskit-render/my-account'
 import newrelic from 'newrelic'
-import React, { useContext } from 'react'
-import { AppContext } from '../../../context/app-context'
-import { useThemeDropdownObject } from '../../../helpers/useThemeDropdownObject'
 
-const AccountUpcomingHolidayStops = (props) => {
-  const { theme, setTheme } = useContext(AppContext)
-  const themeDropdownObject = useThemeDropdownObject(setTheme)
-  return (
-    <HolidayStopList
-      {...props}
-      customTheme={theme}
-      themeDropdownObject={themeDropdownObject}
-      holidayStopType="upcoming"
-    />
-  )
-}
+const AccountUpcomingHolidayStops = (props) => (
+  <HolidayStopList {...props} holidayStopType="upcoming" />
+)
 
 export default AccountUpcomingHolidayStops
 

package/pages/account/index.tsx

@@ -1,22 +1,10 @@
+import React from 'react'
 import newrelic from 'newrelic'
 import { PersonalDetails, getProviderProps } from '@newskit-render/my-account'
-import React, { useContext } from 'react'
 import { initAndGetFeatureFlag } from '@newskit-render/feature-flags' // create-render-app effected
 import { optimizelysdkKey } from '../../config' // create-render-app effected
-import { AppContext } from '../../context/app-context'
-import { useThemeDropdownObject } from '../../helpers/useThemeDropdownObject'
 
-const AccountPersonalDetails = (props) => {
-  const { theme, setTheme } = useContext(AppContext)
-  const themeDropdownObject = useThemeDropdownObject(setTheme)
-  return (
-    <PersonalDetails
-      {...props}
-      customTheme={theme}
-      themeDropdownObject={themeDropdownObject}
-    />
-  )
-}
+const AccountPersonalDetails = (props) => <PersonalDetails {...props} />
 
 export default AccountPersonalDetails
 

package/pages/account/newsletters-and-alerts/index.tsx

@@ -1,25 +1,15 @@
+import React from 'react'
 import {
   NewslettersAndAlerts,
   getProviderProps,
 } from '@newskit-render/my-account'
 import newrelic from 'newrelic'
-import React, { useContext } from 'react'
 import { initAndGetFeatureFlag } from '@newskit-render/feature-flags' // create-render-app effected
 import { optimizelysdkKey } from '../../../config' // create-render-app effected
-import { AppContext } from '../../../context/app-context'
-import { useThemeDropdownObject } from '../../../helpers/useThemeDropdownObject'
 
-const AccountNewslettersAndAlerts = (props) => {
-  const { theme, setTheme } = useContext(AppContext)
-  const themeDropdownObject = useThemeDropdownObject(setTheme)
-  return (
-    <NewslettersAndAlerts
-      {...props}
-      customTheme={theme}
-      themeDropdownObject={themeDropdownObject}
-    />
-  )
-}
+const AccountNewslettersAndAlerts = (props) => (
+  <NewslettersAndAlerts {...props} />
+)
 
 export default AccountNewslettersAndAlerts
 

package/pages/account/payment/index.tsx

@@ -1,26 +1,14 @@
+import React from 'react'
 import newrelic from 'newrelic'
 import {
   Payment,
   getProviderProps,
   PaymentProvider,
 } from '@newskit-render/my-account'
-import React, { useContext } from 'react'
 import { initAndGetFeatureFlag } from '@newskit-render/feature-flags' // create-render-app effected
 import { optimizelysdkKey } from '../../../config' // create-render-app effected
-import { AppContext } from '../../../context/app-context'
-import { useThemeDropdownObject } from '../../../helpers/useThemeDropdownObject'
 
-const AccountCancellation = (props) => {
-  const { theme, setTheme } = useContext(AppContext)
-  const themeDropdownObject = useThemeDropdownObject(setTheme)
-  return (
-    <Payment
-      {...props}
-      customTheme={theme}
-      themeDropdownObject={themeDropdownObject}
-    />
-  )
-}
+const AccountCancellation = (props) => <Payment {...props} />
 
 export default AccountCancellation
 

package/pages/account/subscription-and-billing/index.tsx

@@ -1,25 +1,15 @@
+import React from 'react'
 import {
   SubscriptionAndBilling,
   getProviderProps,
 } from '@newskit-render/my-account'
 import newrelic from 'newrelic'
-import React, { useContext } from 'react'
 import { initAndGetFeatureFlag } from '@newskit-render/feature-flags' // create-render-app effected
 import { optimizelysdkKey } from '../../../config' // create-render-app effected
-import { AppContext } from '../../../context/app-context'
-import { useThemeDropdownObject } from '../../../helpers/useThemeDropdownObject'
 
-const AccountSubscriptionAndBilling = (props) => {
-  const { theme, setTheme } = useContext(AppContext)
-  const themeDropdownObject = useThemeDropdownObject(setTheme)
-  return (
-    <SubscriptionAndBilling
-      {...props}
-      customTheme={theme}
-      themeDropdownObject={themeDropdownObject}
-    />
-  )
-}
+const AccountSubscriptionAndBilling = (props) => (
+  <SubscriptionAndBilling {...props} />
+)
 
 export default AccountSubscriptionAndBilling
 

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

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

package/pages/checkout/payment-details/index.tsx

@@ -1,19 +1,7 @@
+import React from 'react'
 import { PaymentDetails, getProviderProps } from '@newskit-render/checkout'
-import React, { useContext } from 'react'
-import { AppContext } from '../../../context/app-context'
-import { useThemeDropdownObject } from '../../../helpers/useThemeDropdownObject'
 
-const PaymentDetailsPage = (props) => {
-  const { theme, setTheme } = useContext(AppContext)
-  const themeDropdownObject = useThemeDropdownObject(setTheme)
-  return (
-    <PaymentDetails
-      {...props}
-      customTheme={theme}
-      themeDropdownObject={themeDropdownObject}
-    />
-  )
-}
+const PaymentDetailsPage = (props) => <PaymentDetails {...props} />
 
 export default PaymentDetailsPage
 

package/pages/help-hub/article/[title]/index.tsx

@@ -1,30 +1,17 @@
-import React, { useContext } from 'react'
+import React from 'react'
 import newrelic from 'newrelic'
 import {
   AlgoliaCredentials,
   HelpHubArticlePage,
   helpHubArticleProvider,
 } from '@newskit-render/standalone-components'
-import { useThemeDropdownObject } from '../../../../helpers/useThemeDropdownObject'
-import { AppContext } from '../../../../context'
 import { addCacheHeaders } from '../../../../helpers/addCacheHeaders'
 
 const ArticlePage: React.FC<{
   credentials: AlgoliaCredentials
   title: string
   content: string
-}> = (props) => {
-  const { theme, setTheme } = useContext(AppContext)
-  const themeDropdownObject = useThemeDropdownObject(setTheme)
-
-  return (
-    <HelpHubArticlePage
-      {...props}
-      customTheme={theme}
-      themeDropdownObject={themeDropdownObject}
-    />
-  )
-}
+}> = (props) => <HelpHubArticlePage {...props} />
 
 export default ArticlePage
 

package/pages/help-hub/index.tsx

@@ -1,12 +1,10 @@
-import React, { useContext } from 'react'
+import React from 'react'
 import newrelic from 'newrelic'
 import {
   AlgoliaCredentials,
   HelpHubLandingPage,
   helpHubLandingPageProvider,
 } from '@newskit-render/standalone-components'
-import { useThemeDropdownObject } from '../../helpers/useThemeDropdownObject'
-import { AppContext } from '../../context'
 import { addCacheHeaders } from '../../helpers/addCacheHeaders'
 
 const mostReadArticles = [
@@ -40,19 +38,7 @@ const mostReadArticles = [
 
 const LandingPage: React.FC<{
   credentials: AlgoliaCredentials
-}> = (props) => {
-  const { theme, setTheme } = useContext(AppContext)
-  const themeDropdownObject = useThemeDropdownObject(setTheme)
-
-  return (
-    <HelpHubLandingPage
-      {...props}
-      context={{ mostReadArticles }}
-      customTheme={theme}
-      themeDropdownObject={themeDropdownObject}
-    />
-  )
-}
+}> = (props) => <HelpHubLandingPage {...props} context={{ mostReadArticles }} />
 
 export default LandingPage
 

package/pages/help-hub/results.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react'
+import React from 'react'
 import newrelic from 'newrelic'
 import {
   HelpHubResultsPage,
@@ -6,25 +6,12 @@ import {
   Hit,
   helpHubResultsProvider,
 } from '@newskit-render/standalone-components'
-import { useThemeDropdownObject } from '../../helpers/useThemeDropdownObject'
-import { AppContext } from '../../context'
 import { addCacheHeaders } from '../../helpers/addCacheHeaders'
 
 const ResultsPage: React.FC<{
   credentials: AlgoliaCredentials
   hits: Hit[]
-}> = (props) => {
-  const { theme, setTheme } = useContext(AppContext)
-  const themeDropdownObject = useThemeDropdownObject(setTheme)
-
-  return (
-    <HelpHubResultsPage
-      {...props}
-      customTheme={theme}
-      themeDropdownObject={themeDropdownObject}
-    />
-  )
-}
+}> = (props) => <HelpHubResultsPage {...props} />
 
 export default ResultsPage
 

package/temp/next.config.js

@@ -0,0 +1,56 @@
+/**
+ * @type {import('next').NextConfig}
+ */
+
+/**
+ * Thes remotePatterns for external images ensure the app works with the Solutions Team's demo data.
+ * Once you are using your own data this should be remove or replaced with your own patterns.
+ */
+ const images = {
+  remotePatterns: [
+    {
+      protocol: 'https',
+      hostname: 'www.thesun.co.uk',
+      pathname: '/wp-content/**',
+    },
+    {
+      protocol: 'https',
+      hostname: 'www.plchldr.co',
+      pathname: '/**',
+    },
+  ],
+}
+
+const nextConfig = {
+  images,
+  async rewrites() {
+    return [
+      {
+        source: '/sitemap.xml',
+        destination: '/api/sitemap',
+      },
+      {
+        source: '/pages-sitemap.xml',
+        destination: '/api/pages-sitemap',
+      },
+      {
+        source: '/competitions-sitemap.xml',
+        destination: '/api/competitions-sitemap',
+      },
+      {
+        source: '/news-sitemap.xml',
+        destination: '/api/news-sitemap',
+      },
+      {
+        source: '/feed',
+        destination: '/api/feed',
+      },
+      {
+        source: '/robots.txt',
+        destination: '/api/robots',
+      },
+    ]
+  },
+}
+
+module.exports = nextConfig