@newskit-render/core 2.30.9-alpha.0 → 2.31.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.30.9](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@2.30.9-alpha.0...@newskit-render/core@2.30.9) (2022-12-12)
+
+**Note:** Version bump only for package @newskit-render/core
+
+
+
+
+
 ## [2.30.8](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@2.30.8-alpha.0...@newskit-render/core@2.30.8) (2022-12-08)
 
 **Note:** Version bump only for package @newskit-render/core

package/components/header/index.tsx

@@ -10,7 +10,7 @@ import {
   renderCustomDarkTheme as DarkTheme,
 } from '../../theme'
 import { AppContext } from '../../context'
-import { createThemeDropdownObject } from '../../helpers/createThemeDropdownObject'
+import { useThemeDropdownObject } from '../../helpers/useThemeDropdownObject'
 import { sectionLinks } from './navigation-links'
 import { pastDueBanner } from './banner-messages'
 
@@ -34,7 +34,7 @@ const Header: React.FC<{ user: UserData }> = ({ user }) => {
   }
 
   const { theme, setTheme } = useContext(AppContext)
-  const themeDropdownObject = createThemeDropdownObject(setTheme)
+  const themeDropdownObject = useThemeDropdownObject(setTheme)
   const { ...restThemes } = themeDropdownObject.options
 
   const themeDropdownObjectUpdated = {

package/helpers/__tests__/{createThemeDropdownObject.test.ts → useThemeDropdownObject.test.ts}

@@ -1,11 +1,15 @@
-import { createThemeDropdownObject } from '../createThemeDropdownObject'
+import { useThemeDropdownObject } from '../useThemeDropdownObject'
+
+jest.mock('react', () => ({
+  ...jest.requireActual('react'),
+  useState: jest.fn().mockReturnValue([false, {}]),
+}))
 
 describe('createThemeDropdownObject', () => {
   const setTheme = jest.fn()
   test('should return themeDropdownObject', () => {
-    const themeDropdownObject = createThemeDropdownObject(setTheme)
+    const themeDropdownObject = useThemeDropdownObject(setTheme)
     expect(themeDropdownObject).toEqual({
-      setTheme,
       clientHeaderImages: {
         'The-Sun': 'display-personalDetails-header-sun.svg',
         'Virgin-Radio': 'display-personalDetails-header-vr.svg',
@@ -29,6 +33,8 @@ describe('createThemeDropdownObject', () => {
         },
       },
       options: expect.any(Object),
+      themeDropdownOpen: false,
+      dropdown: expect.any(Function),
     })
   })
 })

package/helpers/{createThemeDropdownObject.ts → useThemeDropdownObject.tsx}

@@ -1,3 +1,4 @@
+import React, { useState } from 'react'
 import { UncompiledTheme } from 'newskit'
 import {
   sharedTheme,
@@ -5,6 +6,7 @@ import {
   virginRadioTheme,
   theSunTheme,
   ThemeDropdownObject,
+  ThemeDropdown,
 } from '@newskit-render/shared-components'
 
 const clientHeaderImages = {
@@ -31,19 +33,28 @@ const clientNavigationLogos = {
   },
 }
 
-export const createThemeDropdownObject = (
+export const useThemeDropdownObject = (
   setTheme: (T: UncompiledTheme) => void
 ): ThemeDropdownObject => {
+  const [themeDropdownOpen, setThemeDropdownOpen] = useState(false)
   const themeDropdownObject = {
-    setTheme,
     clientHeaderImages,
     clientNavigationLogos,
+    themeDropdownOpen,
     options: {
       sharedTheme,
       timesTheme,
       virginRadioTheme,
       theSunTheme,
     },
+    dropdown: (opts, customTheme) => (
+      <ThemeDropdown
+        options={opts}
+        theme={customTheme}
+        setTheme={setTheme}
+        setThemeDropdownVisibility={setThemeDropdownOpen}
+      />
+    ),
   }
   return themeDropdownObject
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newskit-render/core",
-  "version": "2.30.9-alpha.0",
+  "version": "2.31.0-alpha.0",
   "description": "Newskit Render - Core package",
   "author": "",
   "license": "UNLICENSED",
@@ -38,14 +38,14 @@
     "@emotion-icons/material-outlined": "3.14.0",
     "@emotion/react": "11.10.4",
     "@emotion/styled": "11.10.4",
-    "@newskit-render/api": "^1.5.3-alpha.0",
-    "@newskit-render/auth": "^1.3.3-alpha.0",
-    "@newskit-render/checkout": "^1.8.6-alpha.0",
-    "@newskit-render/feature-flags": "^1.4.3-alpha.0",
-    "@newskit-render/feed": "^1.4.5-alpha.0",
-    "@newskit-render/my-account": "^3.22.9-alpha.0",
-    "@newskit-render/shared-components": "^1.22.5-alpha.0",
-    "@newskit-render/standalone-components": "^1.14.6-alpha.0",
+    "@newskit-render/api": "^1.5.3",
+    "@newskit-render/auth": "^1.3.3",
+    "@newskit-render/checkout": "^1.8.7-alpha.0",
+    "@newskit-render/feature-flags": "^1.4.3",
+    "@newskit-render/feed": "^1.4.5",
+    "@newskit-render/my-account": "^3.22.10-alpha.0",
+    "@newskit-render/shared-components": "^1.23.0-alpha.0",
+    "@newskit-render/standalone-components": "^1.14.7-alpha.0",
     "@newskit-render/validation": "^1.5.4",
     "cross-fetch": "3.1.5",
     "graphql": "15.6.0",

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

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

package/pages/account/cancellation/index.tsx

@@ -4,12 +4,12 @@ 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 { createThemeDropdownObject } from '../../../helpers/createThemeDropdownObject'
+import { useThemeDropdownObject } from '../../../helpers/useThemeDropdownObject'
 import validation from '../../../validation'
 
 const AccountCancellation = (props) => {
   const { theme, setTheme } = useContext(AppContext)
-  const themeDropdownObject = createThemeDropdownObject(setTheme)
+  const themeDropdownObject = useThemeDropdownObject(setTheme)
   return (
     <Cancellation
       {...props}

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

@@ -10,14 +10,14 @@ import { initAndGetFeatureFlag } from '@newskit-render/feature-flags' // create-
 import { optimizelysdkKey } from '../../../config' // create-render-app effected
 import validation from '../../../validation'
 import { AppContext } from '../../../context/app-context'
-import { createThemeDropdownObject } from '../../../helpers/createThemeDropdownObject'
+import { useThemeDropdownObject } from '../../../helpers/useThemeDropdownObject'
 
 const AccountEditField = (props) => {
   const doesEditPageExist = Object.keys(editComponentMap).includes(
     props.data.type
   )
   const { theme, setTheme } = useContext(AppContext)
-  const themeDropdownObject = createThemeDropdownObject(setTheme)
+  const themeDropdownObject = useThemeDropdownObject(setTheme)
 
   if (doesEditPageExist) {
     return (

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

@@ -4,11 +4,11 @@ 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 { createThemeDropdownObject } from '../../../helpers/createThemeDropdownObject'
+import { useThemeDropdownObject } from '../../../helpers/useThemeDropdownObject'
 
 const AccountHolidayStop = (props) => {
   const { theme, setTheme } = useContext(AppContext)
-  const themeDropdownObject = createThemeDropdownObject(setTheme)
+  const themeDropdownObject = useThemeDropdownObject(setTheme)
   return (
     <HolidayStop
       {...props}

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

@@ -2,11 +2,11 @@ import { getProviderProps, HolidayStopList } from '@newskit-render/my-account'
 import newrelic from 'newrelic'
 import React, { useContext } from 'react'
 import { AppContext } from '../../../context/app-context'
-import { createThemeDropdownObject } from '../../../helpers/createThemeDropdownObject'
+import { useThemeDropdownObject } from '../../../helpers/useThemeDropdownObject'
 
 const AccountPreviousHolidayStops = (props) => {
   const { theme, setTheme } = useContext(AppContext)
-  const themeDropdownObject = createThemeDropdownObject(setTheme)
+  const themeDropdownObject = useThemeDropdownObject(setTheme)
   return (
     <HolidayStopList
       {...props}

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

@@ -2,11 +2,11 @@ import { getProviderProps, HolidayStopList } from '@newskit-render/my-account'
 import newrelic from 'newrelic'
 import React, { useContext } from 'react'
 import { AppContext } from '../../../context/app-context'
-import { createThemeDropdownObject } from '../../../helpers/createThemeDropdownObject'
+import { useThemeDropdownObject } from '../../../helpers/useThemeDropdownObject'
 
 const AccountUpcomingHolidayStops = (props) => {
   const { theme, setTheme } = useContext(AppContext)
-  const themeDropdownObject = createThemeDropdownObject(setTheme)
+  const themeDropdownObject = useThemeDropdownObject(setTheme)
   return (
     <HolidayStopList
       {...props}

package/pages/account/index.tsx

@@ -4,11 +4,11 @@ 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 { createThemeDropdownObject } from '../../helpers/createThemeDropdownObject'
+import { useThemeDropdownObject } from '../../helpers/useThemeDropdownObject'
 
 const AccountPersonalDetails = (props) => {
   const { theme, setTheme } = useContext(AppContext)
-  const themeDropdownObject = createThemeDropdownObject(setTheme)
+  const themeDropdownObject = useThemeDropdownObject(setTheme)
   return (
     <PersonalDetails
       {...props}

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

@@ -7,11 +7,11 @@ 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 { createThemeDropdownObject } from '../../../helpers/createThemeDropdownObject'
+import { useThemeDropdownObject } from '../../../helpers/useThemeDropdownObject'
 
 const AccountNewslettersAndAlerts = (props) => {
   const { theme, setTheme } = useContext(AppContext)
-  const themeDropdownObject = createThemeDropdownObject(setTheme)
+  const themeDropdownObject = useThemeDropdownObject(setTheme)
   return (
     <NewslettersAndAlerts
       {...props}

package/pages/account/payment/index.tsx

@@ -8,11 +8,11 @@ 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 { createThemeDropdownObject } from '../../../helpers/createThemeDropdownObject'
+import { useThemeDropdownObject } from '../../../helpers/useThemeDropdownObject'
 
 const AccountCancellation = (props) => {
   const { theme, setTheme } = useContext(AppContext)
-  const themeDropdownObject = createThemeDropdownObject(setTheme)
+  const themeDropdownObject = useThemeDropdownObject(setTheme)
   return (
     <Payment
       {...props}

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

@@ -7,11 +7,11 @@ 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 { createThemeDropdownObject } from '../../../helpers/createThemeDropdownObject'
+import { useThemeDropdownObject } from '../../../helpers/useThemeDropdownObject'
 
 const AccountSubscriptionAndBilling = (props) => {
   const { theme, setTheme } = useContext(AppContext)
-  const themeDropdownObject = createThemeDropdownObject(setTheme)
+  const themeDropdownObject = useThemeDropdownObject(setTheme)
   return (
     <SubscriptionAndBilling
       {...props}

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

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

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

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

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

@@ -5,7 +5,7 @@ import {
   HelpHubArticlePage,
   helpHubArticleProvider,
 } from '@newskit-render/standalone-components'
-import { createThemeDropdownObject } from '../../../../helpers/createThemeDropdownObject'
+import { useThemeDropdownObject } from '../../../../helpers/useThemeDropdownObject'
 import { AppContext } from '../../../../context'
 import { addCacheHeaders } from '../../../../helpers/addCacheHeaders'
 
@@ -15,7 +15,7 @@ const ArticlePage: React.FC<{
   content: string
 }> = (props) => {
   const { theme, setTheme } = useContext(AppContext)
-  const themeDropdownObject = createThemeDropdownObject(setTheme)
+  const themeDropdownObject = useThemeDropdownObject(setTheme)
 
   return (
     <HelpHubArticlePage

package/pages/help-hub/index.tsx

@@ -5,7 +5,7 @@ import {
   HelpHubLandingPage,
   helpHubLandingPageProvider,
 } from '@newskit-render/standalone-components'
-import { createThemeDropdownObject } from '../../helpers/createThemeDropdownObject'
+import { useThemeDropdownObject } from '../../helpers/useThemeDropdownObject'
 import { AppContext } from '../../context'
 import { addCacheHeaders } from '../../helpers/addCacheHeaders'
 
@@ -42,7 +42,7 @@ const LandingPage: React.FC<{
   credentials: AlgoliaCredentials
 }> = (props) => {
   const { theme, setTheme } = useContext(AppContext)
-  const themeDropdownObject = createThemeDropdownObject(setTheme)
+  const themeDropdownObject = useThemeDropdownObject(setTheme)
 
   return (
     <HelpHubLandingPage

package/pages/help-hub/results.tsx

@@ -6,7 +6,7 @@ import {
   Hit,
   helpHubResultsProvider,
 } from '@newskit-render/standalone-components'
-import { createThemeDropdownObject } from '../../helpers/createThemeDropdownObject'
+import { useThemeDropdownObject } from '../../helpers/useThemeDropdownObject'
 import { AppContext } from '../../context'
 import { addCacheHeaders } from '../../helpers/addCacheHeaders'
 
@@ -15,7 +15,7 @@ const ResultsPage: React.FC<{
   hits: Hit[]
 }> = (props) => {
   const { theme, setTheme } = useContext(AppContext)
-  const themeDropdownObject = createThemeDropdownObject(setTheme)
+  const themeDropdownObject = useThemeDropdownObject(setTheme)
 
   return (
     <HelpHubResultsPage

package/pages/rss/create/index.tsx

@@ -1,11 +1,11 @@
 import React, { useContext } from 'react'
 import { RSSConsoleCreateFeedPage } from '@newskit-render/standalone-components'
-import { createThemeDropdownObject } from '../../../helpers/createThemeDropdownObject'
+import { useThemeDropdownObject } from '../../../helpers/useThemeDropdownObject'
 import { AppContext } from '../../../context'
 
 const LandingPage: React.FC = () => {
   const { theme, setTheme } = useContext(AppContext)
-  const themeDropdownObject = createThemeDropdownObject(setTheme)
+  const themeDropdownObject = useThemeDropdownObject(setTheme)
 
   return (
     <RSSConsoleCreateFeedPage

package/pages/rss/feed/[feedId]/index.tsx

@@ -1,12 +1,12 @@
 import React, { useContext } from 'react'
 import { RSSConsoleFeedDetailsPage } from '@newskit-render/standalone-components'
+import { useThemeDropdownObject } from '../../../../helpers/useThemeDropdownObject'
 import { useRouter } from 'next/router'
-import { createThemeDropdownObject } from '../../../../helpers/createThemeDropdownObject'
 import { AppContext } from '../../../../context'
 
 const LandingPage: React.FC = () => {
   const { theme, setTheme } = useContext(AppContext)
-  const themeDropdownObject = createThemeDropdownObject(setTheme)
+  const themeDropdownObject = useThemeDropdownObject(setTheme)
   const router = useRouter()
 
   return (

package/pages/rss/index.tsx

@@ -1,11 +1,11 @@
 import React, { useContext } from 'react'
 import { RSSConsoleFeedsListPage } from '@newskit-render/standalone-components'
-import { createThemeDropdownObject } from '../../helpers/createThemeDropdownObject'
+import { useThemeDropdownObject } from '../../helpers/useThemeDropdownObject'
 import { AppContext } from '../../context'
 
 const LandingPage: React.FC = () => {
   const { theme, setTheme } = useContext(AppContext)
-  const themeDropdownObject = createThemeDropdownObject(setTheme)
+  const themeDropdownObject = useThemeDropdownObject(setTheme)
 
   return (
     <RSSConsoleFeedsListPage