@newskit-render/core 2.21.2-alpha.0 → 2.22.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.21.2](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@2.21.2-alpha.0...@newskit-render/core@2.21.2) (2022-11-21)
+
+**Note:** Version bump only for package @newskit-render/core
+
+
+
+
+
 ## [2.21.1](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@2.21.1-alpha.0...@newskit-render/core@2.21.1) (2022-11-17)
 
 **Note:** Version bump only for package @newskit-render/core

package/__tests__/pages/[articleSlug].test.tsx

@@ -141,7 +141,7 @@ describe('Article', () => {
         req: { headers: { cookie: 'some-cookie', host: 'hostname' } },
         res: { setHeader: setHeaderMock },
       })
-      expect(response).toEqual({
+      expect(response).toMatchObject({
         props: {
           ...props,
           showAds: true,

package/__tests__/pages/__snapshots__/[articleSlug].test.tsx.snap

@@ -995,9 +995,6 @@ exports[`Recommendation render related article page when data is null page 1`] =
                   <div
                     class="css-1ji12ea"
                   >
-                    <div
-                      class="css-9z2crs"
-                    />
                     <div
                       class="css-6gys8z"
                     >
@@ -1142,9 +1139,6 @@ exports[`Recommendation render related article page when data is null page 1`] =
                   </div>
                 </div>
               </div>
-              <div
-                class="css-14pl72w"
-              />
               <div
                 class="css-75g92e"
               >

package/__tests__/pages/__snapshots__/relatedArticles.test.tsx.snap

@@ -260,10 +260,6 @@ exports[`Recommendation render related article page when data is null page 1`] =
                 </div>
               </div>
             </div>
-            <div
-              class="css-1ubx3ge"
-              data-testid="Articles-Grid"
-            />
           </div>
         </div>
       </div>

package/__tests__/pages/relatedArticles.test.tsx

@@ -69,7 +69,7 @@ describe('Article', () => {
         req: { headers: { cookie: 'some-cookie' } },
         res: { setHeader: setHeaderMock },
       })
-      expect(response).toEqual({
+      expect(response).toMatchObject({
         props: {
           ...props,
           showAds: true,

package/components/article/Highlights.tsx

@@ -10,15 +10,10 @@ import {
   Visible,
   TitleBar,
 } from 'newskit'
-import { AricleGrid } from '@newskit-render/standalone-components'
+import { RecommendedArticleList } from '@newskit-render/standalone-components'
 import ViewMoreButton from '../common/ViewMoreButton'
 
-const Highlights: React.FC<{
-  highlightsArticles: {
-    title: string
-    href: string
-  }[]
-}> = ({ highlightsArticles }) => (
+const Highlights: React.FC = () => (
   <Block data-testid="Highlights" spaceStack="space060">
     <Block spaceStack="space060">
       <Visible xs lg xl>
@@ -59,7 +54,7 @@ const Highlights: React.FC<{
 
     <Block spaceStack="space040">
       <Grid xsMargin="space000">
-        <AricleGrid articles={highlightsArticles} size="small" />
+        <RecommendedArticleList templateId="list-1" />
         <Cell xs={12}>
           <Visible xs lg xl>
             <Divider />

package/components/article/RelatedArticles.tsx

@@ -1,16 +1,10 @@
 import React from 'react'
 import { Block, TitleBar, Stack, StackChild, Divider, Visible } from 'newskit'
 import { useRouter } from 'next/router'
-import { AricleGrid } from '@newskit-render/standalone-components'
+import { RecommendedArticleList } from '@newskit-render/standalone-components'
 import ViewMoreButton from '../common/ViewMoreButton'
 
-const RelatedArticles: React.FC<{
-  relatedArticles: {
-    title: string
-    text?: string
-    href: string
-  }[]
-}> = ({ relatedArticles }) => {
+const RelatedArticles: React.FC = () => {
   const { asPath } = useRouter()
   const relatedArticlesPath = `${asPath.substring(
     0,
@@ -39,11 +33,7 @@ const RelatedArticles: React.FC<{
           Related
         </TitleBar>
       </Block>
-      <AricleGrid
-        articles={relatedArticles}
-        size="large"
-        columnCount={{ xs: '1', sm: '2', lg: '4' }}
-      />
+      <RecommendedArticleList templateId="list-2" />
       <Visible xs lg>
         <Divider />
         <Stack>

package/components/article/__tests__/__snapshots__/index.test.tsx.snap

@@ -1086,7 +1086,7 @@ exports[`Article should render tile and sub title 1`] = `
                             <img
                               alt="Card Media"
                               class="css-n57idg"
-                              src="https://plchldr.co/i/50x50"
+                              src="https://plchldr.co/i/70x50"
                             />
                           </picture>
                         </div>
@@ -1106,7 +1106,7 @@ exports[`Article should render tile and sub title 1`] = `
                                 <h4
                                   class="nk-headline-heading css-l6hs79"
                                 >
-                                  Test Box
+                                  Prince Harry
                                 </h4>
                               </section>
                             </a>
@@ -1129,7 +1129,7 @@ exports[`Article should render tile and sub title 1`] = `
                             <img
                               alt="Card Media"
                               class="css-n57idg"
-                              src="https://plchldr.co/i/50x50"
+                              src="https://plchldr.co/i/70x50"
                             />
                           </picture>
                         </div>
@@ -1149,7 +1149,7 @@ exports[`Article should render tile and sub title 1`] = `
                                 <h4
                                   class="nk-headline-heading css-l6hs79"
                                 >
-                                  Prince Harry
+                                  Meghan Markle
                                 </h4>
                               </section>
                             </a>

package/components/article/__tests__/index.test.tsx

@@ -1,5 +1,9 @@
+import React from 'react'
+import {
+  ArticleRecommendationsProviderContext,
+  DpaTemplate,
+} from '@newskit-render/standalone-components'
 import { within } from '@testing-library/react'
-
 import Article, { ArticleProps } from '..'
 import { Slug, URL, Image, Video } from '../../../helpers/global-types'
 import { renderWithTheme } from '../../../helpers/test-utils'
@@ -89,6 +93,33 @@ const articleData: ArticleProps = {
   gscId: '4320982',
 }
 
+const dpaTemplatesMock: DpaTemplate = [
+  {
+    templateId: 'list-1',
+    columnCount: '1',
+    size: 'small',
+    recommendedArticles: articleData.relatedArticles,
+    adlibraryMPU: [],
+  },
+  {
+    templateId: 'list-2',
+    columnCount: { xs: '1', sm: '2', lg: '4' },
+    size: 'large',
+    recommendedArticles: articleData.relatedArticles,
+    adlibraryMPU: [],
+  },
+]
+
+const ArticleWrapper = (props) => (
+  <ArticleRecommendationsProviderContext.Provider
+    value={{
+      dpaTemplates: dpaTemplatesMock,
+    }}
+  >
+    <Article {...props} />
+  </ArticleRecommendationsProviderContext.Provider>
+)
+
 jest.mock('@newskit-render/my-account', () => {
   return {
     PastDueBannerExternal: 'PastDueBannerExternal',
@@ -110,7 +141,10 @@ describe('Article', () => {
     HTMLImageElement.prototype.loading = 'lazy'
   })
   test('should render tile and sub title', () => {
-    const { getByTestId, asFragment } = renderWithTheme(Article, articleData)
+    const { getByTestId, asFragment } = renderWithTheme(
+      ArticleWrapper,
+      articleData
+    )
     const headLine = within(getByTestId('HeadLine'))
     const kicker = within(getByTestId('Kicker'))
     const title = headLine.getByText(
@@ -123,7 +157,7 @@ describe('Article', () => {
   })
 
   test('should render byline', () => {
-    const { getByTestId } = renderWithTheme(Article, articleData)
+    const { getByTestId } = renderWithTheme(ArticleWrapper, articleData)
     const byline = within(getByTestId('MetaBox'))
     const authorName = byline.getByText('John Smith')
     const authorTitle = byline.getByText('John Smith')
@@ -133,14 +167,14 @@ describe('Article', () => {
 
   test('should render published time', () => {
     articleData.updatedDateTime = undefined
-    const { getByTestId } = renderWithTheme(Article, articleData)
+    const { getByTestId } = renderWithTheme(ArticleWrapper, articleData)
     const metaBox = within(getByTestId('MetaBox'))
     const date = metaBox.getByText('Thu February 14 2019, 12:00am')
     expect(date).toBeInTheDocument()
   })
 
   test('should render related topics', () => {
-    const { getByTestId } = renderWithTheme(Article, articleData)
+    const { getByTestId } = renderWithTheme(ArticleWrapper, articleData)
     const topics = within(getByTestId('RelatedTopics')).getAllByTestId('tag')
     expect(topics[0].getAttribute('href')).toBe(null)
     expect(within(topics[0]).getByText('Some topic one')).toBeInTheDocument()
@@ -152,12 +186,12 @@ describe('Article', () => {
 
   test('should not render related topics', () => {
     articleData.topics = undefined
-    const { getByTestId } = renderWithTheme(Article, articleData)
+    const { getByTestId } = renderWithTheme(ArticleWrapper, articleData)
     expect(() => getByTestId('topics')).toThrow()
   })
 
   test('should render highlights panel', () => {
-    const { getByTestId } = renderWithTheme(Article, articleData)
+    const { getByTestId } = renderWithTheme(ArticleWrapper, articleData)
     const title = within(getByTestId('Highlights')).getAllByText(
       'Highlights'
     )[0]
@@ -168,14 +202,8 @@ describe('Article', () => {
     expect(card).toBeInTheDocument()
   })
 
-  test('should not render highlights panel', () => {
-    articleData.highlights = undefined
-    const { getByTestId } = renderWithTheme(Article, articleData)
-    expect(() => getByTestId('Highlights')).toThrow()
-  })
-
   test('should render related articles panel', () => {
-    const { getByTestId } = renderWithTheme(Article, articleData)
+    const { getByTestId } = renderWithTheme(ArticleWrapper, articleData)
     const title = within(getByTestId('RelatedArticles')).getByText('Related')
     const card = within(getByTestId('RelatedArticles')).getAllByTestId(
       'article-recommendation-large'
@@ -185,14 +213,8 @@ describe('Article', () => {
     expect(card).toBeInTheDocument()
   })
 
-  test('should not render related articles pannel', () => {
-    articleData.relatedArticles = undefined
-    const { getByTestId } = renderWithTheme(Article, articleData)
-    expect(() => getByTestId('RelatedArticles')).toThrow()
-  })
-
   test('should render image', () => {
-    const { getByAltText } = renderWithTheme(Article, articleData)
+    const { getByAltText } = renderWithTheme(ArticleWrapper, articleData)
     const img = getByAltText('testIMG')
     const articleImage = articleData?.media as Image
     expect(img.getAttribute('src')).toBe(articleImage.crops[0].url)
@@ -200,12 +222,12 @@ describe('Article', () => {
 
   test('should not render image', () => {
     articleData.media = undefined
-    const { getByAltText } = renderWithTheme(Article, articleData)
+    const { getByAltText } = renderWithTheme(ArticleWrapper, articleData)
     expect(() => getByAltText('testIMG')).toThrow()
   })
 
   test('should render paragraphs', () => {
-    const { getByTestId } = renderWithTheme(Article, articleData)
+    const { getByTestId } = renderWithTheme(ArticleWrapper, articleData)
     const paragraphs = getByTestId('ArticleContent')
     expect(within(paragraphs).getByText('paragraph one')).toBeInTheDocument()
     expect(within(paragraphs).getByText('paragraph two')).toBeInTheDocument()
@@ -214,7 +236,7 @@ describe('Article', () => {
 
   test('should not render paragraphs', () => {
     articleData.summary = undefined
-    const { getByTestId } = renderWithTheme(Article, articleData)
+    const { getByTestId } = renderWithTheme(ArticleWrapper, articleData)
     expect(() =>
       within(getByTestId('ArticleContent')).getAllByTestId('ArticleParagraph')
     ).toThrow()
@@ -238,7 +260,7 @@ describe('Article', () => {
         },
       },
     }
-    const { getByTestId } = renderWithTheme(Article, articleWithVideo)
+    const { getByTestId } = renderWithTheme(ArticleWrapper, articleWithVideo)
     const video = getByTestId('bc-video-player')
     const articleVideo = articleWithVideo?.media as Video
     expect(video.getAttribute('data-account')).toBe(articleVideo.accountId)
@@ -247,7 +269,7 @@ describe('Article', () => {
 
   test('should not render video', () => {
     articleData.media = undefined
-    const { getByTestId } = renderWithTheme(Article, articleData)
+    const { getByTestId } = renderWithTheme(ArticleWrapper, articleData)
     expect(() => getByTestId('bc-video-player')).toThrow()
   })
 })

package/components/article/index.tsx

@@ -15,6 +15,7 @@ import {
 } from 'newskit'
 import { SEOComponent } from '@newskit-render/shared-components'
 import { UserData } from '@newskit-render/my-account'
+import { Article } from '@newskit-render/standalone-components'
 import MetaBoxComponent from './MetaBox'
 import Ad from '../ad'
 import Highlights from './Highlights'
@@ -63,6 +64,7 @@ export type UniversalArticle = {
 }
 
 export type ArticleProps = {
+  relatedArticles?: Article[]
   id: string
   url?: URL
   label?: string
@@ -79,19 +81,6 @@ export type ArticleProps = {
   publishedDateTime?: string
   updatedDateTime?: string
   summary?: ParagraphBlock
-  highlights:
-    | {
-        title: string
-        href: string
-      }[]
-    | undefined
-  relatedArticles:
-    | {
-        title: string
-        text?: string
-        href: string
-      }[]
-    | undefined
   articleURL: string
   twitterUsername?: string
   siteHost: string
@@ -112,8 +101,6 @@ const ArticlePage: React.FC<ArticleProps> = ({
   media,
   bylines,
   topics,
-  highlights,
-  relatedArticles,
   articleURL,
   twitterUsername,
   siteHost,
@@ -325,12 +312,10 @@ const ArticlePage: React.FC<ArticleProps> = ({
       </Cell>
       <Cell xs={12} lg={3} lgOffset={1}>
         <Ad id="advert-article-sidebar" maxWidth="300px" />
-        {highlights && <Highlights highlightsArticles={highlights} />}
+        <Highlights />
       </Cell>
       <Cell xs={12}>
-        {relatedArticles && (
-          <RelatedArticles relatedArticles={relatedArticles} />
-        )}
+        <RelatedArticles />
       </Cell>
     </Layout>
   </>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newskit-render/core",
-  "version": "2.21.2-alpha.0",
+  "version": "2.22.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.2.2-alpha.0",
+    "@newskit-render/api": "^1.3.0-alpha.0",
     "@newskit-render/auth": "^1.1.1",
-    "@newskit-render/checkout": "^1.6.3-alpha.0",
+    "@newskit-render/checkout": "^1.6.4-alpha.0",
     "@newskit-render/feature-flags": "^1.2.0",
-    "@newskit-render/feed": "^1.2.1-alpha.0",
-    "@newskit-render/my-account": "^3.18.1-alpha.0",
+    "@newskit-render/feed": "^1.2.2-alpha.0",
+    "@newskit-render/my-account": "^3.18.2-alpha.0",
     "@newskit-render/shared-components": "^1.18.0",
-    "@newskit-render/standalone-components": "^1.10.3-alpha.0",
+    "@newskit-render/standalone-components": "^1.11.0-alpha.0",
     "@newskit-render/validation": "^1.3.1",
     "cross-fetch": "3.1.5",
     "graphql": "15.6.0",

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

@@ -5,9 +5,10 @@ import {
   createApolloClient,
   ClientTypes,
   getAcsCookie,
+  Config,
 } from '@newskit-render/api'
 import { UserData } from '@newskit-render/my-account'
-import { Article } from '@newskit-render/standalone-components'
+import { ArticleRecommendationsProvider } from '@newskit-render/standalone-components'
 import { getHost } from '@newskit-render/shared-components'
 import { initAndGetFeatureFlag } from '@newskit-render/feature-flags' // create-render-app effected
 import { GET_UNIVERSAL_ARTICLE } from '../../../queries'
@@ -18,9 +19,10 @@ import { addCacheHeaders } from '../../../helpers/addCacheHeaders'
 import {
   twitterUsername as configTwitterUsername,
   gscId as configGscId,
+  newskitApiEnvUrl,
+  newskitApiXApiKey,
   optimizelysdkKey, // create-render-app effected
 } from '../../../config'
-import { fetcher } from '../../../helpers/getRecommendations'
 
 export type ArticleSlug = {
   universalArticle: UniversalArticle
@@ -30,6 +32,7 @@ export type ArticleSlug = {
   gscId?: string
   user?: UserData
   articleId: string
+  config: Config
 }
 
 const Article: React.FC<ArticleSlug> = ({
@@ -40,35 +43,19 @@ const Article: React.FC<ArticleSlug> = ({
   gscId,
   user,
   articleId,
-}) => {
-  let userId
-  if (typeof window !== 'undefined') {
-    userId = window?.utag?.data['cp.utag_main_v_id']
-  }
-  const highlitedArticles = []
-  const relatedArticles = []
-  const { data: recommendations } = useSWR<Article[]>(
-    `/api/recommendations/${articleId}/${userId}`,
-    fetcher
-  )
-
-  if (Array.isArray(recommendations)) {
-    highlitedArticles.push(...recommendations.slice(0, 4))
-    relatedArticles.push(...recommendations.slice(4, 12))
-  }
-  return (
+  config,
+}) => (
+  <ArticleRecommendationsProvider articleId={articleId} config={config}>
     <ArticlePage
       articleURL={articleURL}
       {...universalArticle}
       siteHost={siteHost}
       gscId={gscId}
       twitterUsername={twitterUsername}
-      highlights={highlitedArticles}
-      relatedArticles={relatedArticles}
       user={user}
     />
-  )
-}
+  </ArticleRecommendationsProvider>
+)
 
 export async function getServerSideProps(context) {
   const apolloClient = await createApolloClient(ClientTypes.nkapi)
@@ -104,6 +91,10 @@ export async function getServerSideProps(context) {
       showAds: true,
       user,
       articleId,
+      config: {
+        newskitApiEnvUrl,
+        newskitApiXApiKey,
+      },
       featureFlags, // create-render-app effected
     },
   }

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

@@ -1,72 +1,63 @@
 import React from 'react'
 import newrelic from 'newrelic'
-import useSWR from 'swr'
-import { getAcsCookie, ClientTypes } from '@newskit-render/api'
-import { Article } from '@newskit-render/standalone-components'
+import { getAcsCookie, ClientTypes, Config } from '@newskit-render/api'
+import {
+  RecommendedArticleList,
+  ArticleRecommendationsProvider,
+} from '@newskit-render/standalone-components'
 import { getHost } from '@newskit-render/shared-components'
 import { Block, Cell, TitleBar } from 'newskit'
 import { UserData } from '@newskit-render/my-account'
 import { initAndGetFeatureFlag } from '@newskit-render/feature-flags' // create-render-app effected
-import { optimizelysdkKey } from '../../../config' // create-render-app effected
 import { fetchUser } from '../../../helpers/getUser'
 import { getAccountQueryUrl } from '../../../constants'
 import { addCacheHeaders } from '../../../helpers/addCacheHeaders'
 import Layout from '../../../components/layout'
-import { BasicRow } from '../../../components/section/layouts'
-import { fetcher } from '../../../helpers/getRecommendations'
+import {
+  newskitApiEnvUrl,
+  newskitApiXApiKey,
+  optimizelysdkKey, // create-render-app effected
+} from '../../../config'
 
 export type RelatedArticles = {
   user?: UserData
   articleId
+  config: Config
 }
 
 const RelatedArticlesPage: React.FC<RelatedArticles> = ({
   user,
   articleId,
+  config,
 }) => {
-  let userId: string
-  if (typeof window !== 'undefined') {
-    userId = window?.utag?.data['cp.utag_main_v_id']
-  }
-
-  const recommendations = []
-  const { data: recommendationData } = useSWR<Article[]>(
-    `/api/recommendations/${articleId}/${userId}`,
-    fetcher
-  )
-
-  if (Array.isArray(recommendationData)) {
-    recommendations.push(...recommendationData.slice(0, 4))
-  }
   return (
-    <Layout dataTestId="SectionGrid" user={user}>
-      <Cell xs={12} md={10} mdOffset={1} data-testid="SectionCell">
-        <Block spaceStack="space080" />
-        <Block spaceStack="space080">
-          <TitleBar
-            overrides={{
-              spaceInset: {
-                xs: 'spaceInsetSquish000',
-              },
-              heading: {
-                typographyPreset: {
-                  xs: 'editorialHeadline050',
-                  md: 'editorialHeadline060',
-                  xl: 'editorialHeadline070',
+    <ArticleRecommendationsProvider articleId={articleId} config={config}>
+      <Layout dataTestId="SectionGrid" user={user}>
+        <Cell xs={12} md={10} mdOffset={1} data-testid="SectionCell">
+          <Block spaceStack="space080" />
+          <Block spaceStack="space080">
+            <TitleBar
+              overrides={{
+                spaceInset: {
+                  xs: 'spaceInsetSquish000',
+                },
+                heading: {
+                  typographyPreset: {
+                    xs: 'editorialHeadline050',
+                    md: 'editorialHeadline060',
+                    xl: 'editorialHeadline070',
+                  },
+                  stylePreset: 'inkContrast',
                 },
-                stylePreset: 'inkContrast',
-              },
-            }}
-          >
-            Related Articles
-          </TitleBar>
-        </Block>
-        <BasicRow
-          colums={{ xs: '1fr', md: '1fr 1fr', lg: '1fr 1fr 1fr' }}
-          articles={recommendations}
-        />
-      </Cell>
-    </Layout>
+              }}
+            >
+              Related Articles
+            </TitleBar>
+          </Block>
+          <RecommendedArticleList templateId="list-1" />
+        </Cell>
+      </Layout>
+    </ArticleRecommendationsProvider>
   )
 }
 
@@ -94,6 +85,10 @@ export async function getServerSideProps(context) {
       showAds: true,
       user,
       articleId,
+      config: {
+        newskitApiEnvUrl,
+        newskitApiXApiKey,
+      },
       featureFlags, // create-render-app effected
     },
   }

package/pages/api/recommendations/[...slug].ts

@@ -1,21 +0,0 @@
-import { NextApiRequest, NextApiResponse } from 'next'
-import { Publisher } from '@newskit-render/api'
-import { getRecommendations } from '../../../helpers/getRecommendations'
-
-const handler = async (req: NextApiRequest, res: NextApiResponse) => {
-  try {
-    const [articleId, userId] = req.query.slug as string[]
-    const result = await getRecommendations({
-      articleId,
-      publisher: Publisher.SUN_UK,
-      userId,
-    })
-    res.setHeader('Content-Type', 'application/json')
-    res.end(JSON.stringify(result))
-  } catch (error) {
-    res.json(error)
-    res.status(405).end()
-  }
-}
-
-export default handler