@newskit-render/core 1.54.0 → 1.59.0

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

@@ -1,7 +1,7 @@
 import { within } from '@testing-library/react'
 
 import Article, { ArticleProps } from '..'
-import { Slug, URL, Image } from '../../../helpers/global-types'
+import { Slug, URL, Image, Video } from '../../../helpers/global-types'
 import { renderWithTheme } from '../../../helpers/test-utils'
 
 const articleData: ArticleProps = {
@@ -85,19 +85,32 @@ const articleData: ArticleProps = {
       href: 'https://plchldr.co/i/70x50',
     },
   ],
-
   articleURL: 'http://article-url.com',
   twitterUsername: 'twitterUser',
   siteHost: 'hostname',
   gscId: '4320982',
 }
 
+// remove this variable once SITE_HOST is refactored
+jest.mock('../../../config', () => ({
+  siteHost: 'https://newskit-render.ceng-dev.newsuk.tech',
+}))
+
+jest.mock('@newskit-render/api', () => ({
+  acsSessionUrl: 'acsSessionUrl',
+}))
 jest.mock('@newskit-render/my-account', () => {
   return {
     PastDueBannerExternal: 'PastDueBannerExternal',
   }
 })
 
+jest.mock('next/router', () => {
+  return {
+    useRouter: () => ({ asPath: '' }),
+  }
+})
+
 jest.mock('../../../helpers/getYear', () => ({
   getYear: jest.fn().mockReturnValue('YYYY'),
 }))
@@ -213,4 +226,35 @@ describe('Article', () => {
       within(getByTestId('ArticleContent')).getAllByTestId('ArticleParagraph')
     ).toThrow()
   })
+
+  test('should render video', () => {
+    const articleWithVideo = {
+      ...articleData,
+      media: {
+        accountId: '5067014667001',
+        videoId: '6288769193001',
+        posterImage: {
+          crops: [
+            {
+              url:
+                'https://www.thesun.co.uk/wp-content/uploads/2021/12/image-5923b09d66.jpg?strip=all&w=600&h=338&crop=1',
+              alt: null,
+              aspectRatio: null,
+            },
+          ],
+        },
+      },
+    }
+    const { getByTestId } = renderWithTheme(Article, articleWithVideo)
+    const video = getByTestId('bc-video-player')
+    const articleVideo = articleWithVideo?.media as Video
+    expect(video.getAttribute('data-account')).toBe(articleVideo.accountId)
+    expect(video.getAttribute('data-video-id')).toBe(articleVideo.videoId)
+  })
+
+  test('should not render video', () => {
+    articleData.media = undefined
+    const { getByTestId } = renderWithTheme(Article, articleData)
+    expect(() => getByTestId('bc-video-player')).toThrow()
+  })
 })

package/components/article/index.tsx

@@ -4,6 +4,7 @@ import {
   Block,
   Cell,
   Image,
+  VideoPlayer,
   Visible,
   Stack,
   AlignSelfValues,
@@ -227,22 +228,36 @@ const ArticlePage: React.FC<ArticleProps> = ({
             </Stack>
           </Visible>
         </Block>
-
         {media && 'crops' in media && (
-          <>
-            <Block
-              spaceStack={{
-                xs: 'space060',
-                lg: 'space070',
+          <Block
+            spaceStack={{
+              xs: 'space060',
+              lg: 'space070',
+            }}
+          >
+            <StyledFigure>
+              <Image src={media.crops[0].url} alt={media.crops[0].alt} />
+            </StyledFigure>
+          </Block>
+        )}
+        {media && 'videoId' in media && (
+          <Block
+            spaceStack={{
+              xs: 'space060',
+              lg: 'space070',
+            }}
+          >
+            <VideoPlayer
+              config={{
+                'data-video-id': media.videoId,
+                'data-account': media.accountId,
+                'data-player': 'default',
+                'data-embed': 'default',
+                controls: true,
               }}
-            >
-              <StyledFigure>
-                <Image src={media.crops[0].url} alt={media.crops[0].alt} />
-              </StyledFigure>
-            </Block>
-          </>
+            />
+          </Block>
         )}
-
         <Block
           spaceStack={{
             xs: 'space060',
@@ -274,7 +289,6 @@ const ArticlePage: React.FC<ArticleProps> = ({
               </Block>
             ))}
         </Block>
-
         <Visible xs sm>
           <Block spaceStack="space050">
             <Divider />
@@ -298,7 +312,6 @@ const ArticlePage: React.FC<ArticleProps> = ({
             </Stack>
           </Block>
         </Visible>
-
         {topics && <RelatedTopics topics={topics} />}
       </Cell>
       <Cell xs={12} lg={3} lgOffset={1}>

package/components/footer/__snapshots__/index.test.tsx.snap

@@ -17,7 +17,7 @@ exports[`Footer tests should render footer 1`] = `
           data-testid="PageLayout"
         >
           <div
-            class="css-1nj1cp8"
+            class="css-a1yn46"
           >
             <svg
               class="css-kgdu16"
@@ -44,11 +44,11 @@ exports[`Footer tests should render footer 1`] = `
             </svg>
           </div>
           <div
-            class="css-1nj1cp8"
+            class="css-a1yn46"
           >
             <hr
               aria-hidden="true"
-              class="css-ucwznq"
+              class="css-13iiewa"
               data-testid="divider"
             />
           </div>
@@ -56,18 +56,18 @@ exports[`Footer tests should render footer 1`] = `
             class="css-hx18jh"
           >
             <span
-              class="css-zkhuqg"
+              class="css-1v0p1qz"
             >
               <a
                 aria-label="NavLink One"
-                class="css-71f8au"
+                class="css-e43kyg"
                 href="/link-one"
               >
                 <span
-                  class="css-7eo7xt"
+                  class="css-17x5lw"
                 >
                   <span
-                    class="css-b741cy"
+                    class="css-kxo08d"
                   >
                     NavLink One
                   </span>
@@ -75,18 +75,18 @@ exports[`Footer tests should render footer 1`] = `
               </a>
             </span>
             <span
-              class="css-zkhuqg"
+              class="css-1v0p1qz"
             >
               <a
                 aria-label="NavLink Two"
-                class="css-71f8au"
+                class="css-e43kyg"
                 href="/link-two"
               >
                 <span
-                  class="css-7eo7xt"
+                  class="css-17x5lw"
                 >
                   <span
-                    class="css-b741cy"
+                    class="css-kxo08d"
                   >
                     NavLink Two
                   </span>
@@ -94,18 +94,18 @@ exports[`Footer tests should render footer 1`] = `
               </a>
             </span>
             <span
-              class="css-zkhuqg"
+              class="css-1v0p1qz"
             >
               <a
                 aria-label="NavLink Three"
-                class="css-71f8au"
+                class="css-e43kyg"
                 href="/link-three"
               >
                 <span
-                  class="css-7eo7xt"
+                  class="css-17x5lw"
                 >
                   <span
-                    class="css-b741cy"
+                    class="css-kxo08d"
                   >
                     NavLink Three
                   </span>
@@ -113,18 +113,18 @@ exports[`Footer tests should render footer 1`] = `
               </a>
             </span>
             <span
-              class="css-zkhuqg"
+              class="css-1v0p1qz"
             >
               <a
                 aria-label="NavLink Four"
-                class="css-71f8au"
+                class="css-e43kyg"
                 href="/link-four"
               >
                 <span
-                  class="css-7eo7xt"
+                  class="css-17x5lw"
                 >
                   <span
-                    class="css-b741cy"
+                    class="css-kxo08d"
                   >
                     NavLink Four
                   </span>
@@ -132,18 +132,18 @@ exports[`Footer tests should render footer 1`] = `
               </a>
             </span>
             <span
-              class="css-zkhuqg"
+              class="css-1v0p1qz"
             >
               <a
                 aria-label="NavLink Five"
-                class="css-71f8au"
+                class="css-e43kyg"
                 href="/link-five"
               >
                 <span
-                  class="css-7eo7xt"
+                  class="css-17x5lw"
                 >
                   <span
-                    class="css-b741cy"
+                    class="css-kxo08d"
                   >
                     NavLink Five
                   </span>
@@ -151,18 +151,18 @@ exports[`Footer tests should render footer 1`] = `
               </a>
             </span>
             <span
-              class="css-zkhuqg"
+              class="css-1v0p1qz"
             >
               <a
                 aria-label="NavLink Six"
-                class="css-71f8au"
+                class="css-e43kyg"
                 href="/link-six"
               >
                 <span
-                  class="css-7eo7xt"
+                  class="css-17x5lw"
                 >
                   <span
-                    class="css-b741cy"
+                    class="css-kxo08d"
                   >
                     NavLink Six
                   </span>
@@ -171,11 +171,11 @@ exports[`Footer tests should render footer 1`] = `
             </span>
           </div>
           <div
-            class="css-1nj1cp8"
+            class="css-a1yn46"
           >
             <hr
               aria-hidden="true"
-              class="css-ucwznq"
+              class="css-13iiewa"
               data-testid="divider"
             />
           </div>

package/components/section/layouts/Rows.tsx

@@ -1,30 +1,49 @@
 import React from 'react'
 import { Block, GridLayout } from 'newskit'
+import { ArticleRecommendation } from '@newskit-render/standalone-components'
 import { LayoutProps } from './types'
 import { outerGridOverride } from './gridUtils'
 import { getBlock } from './Block'
 
 export const BasicRow: React.FC<LayoutProps> = ({
   slice,
+  articles,
   colums,
   variant = 'titleTeaserVertical',
-}) => (
-  <GridLayout
-    columns={colums}
-    columnGap="space050"
-    data-testid={`${slice.name}-Grid`}
-    {...outerGridOverride}
-  >
-    {slice.children.map((block, i) => (
-      <Block
-        key={('article' in block && block.article.id) || i}
-        data-testid={`titleTeaserVertical-${i}`}
-      >
-        {getBlock(block, variant)}
-      </Block>
-    ))}
-  </GridLayout>
-)
+  'data-testid': testid,
+}) => {
+  const dataTestid =
+    (testid && testid) || (slice && `${slice.name}-Grid`) || 'Articles-Grid'
+  return (
+    <GridLayout
+      columns={colums}
+      columnGap="space050"
+      data-testid={dataTestid}
+      {...outerGridOverride}
+    >
+      {articles
+        ? articles.map((article, i) => (
+            /* eslint-disable-next-line */
+            <Block
+              spaceStack="space050"
+              key={article.title}
+              data-testid={`articleRec-${i}`}
+            >
+              <ArticleRecommendation article={article} size="large" />
+            </Block>
+          ))
+        : slice.children.map((block, i) => (
+            /* eslint-disable-next-line */
+            <Block
+              key={'article' in block ? block.article.id : i}
+              data-testid={`titleTeaserVertical-${i}`}
+            >
+              {getBlock(block, variant)}
+            </Block>
+          ))}
+    </GridLayout>
+  )
+}
 
 export const Row3: React.FC<LayoutProps> = ({ slice }) => (
   <GridLayout

package/components/section/layouts/__tests__/Rows.test.tsx

@@ -2,6 +2,7 @@ import { renderWithTheme } from '../../../../helpers/test-utils'
 import { BasicRow, Row3 } from '../Rows'
 import { getPageMock } from '../../../../helpers/mocks'
 import { ArticleSlice } from '../../../../helpers/global-types'
+import { relatedArticles } from '../../../../helpers/mocks/articleMock'
 
 describe('Rows', () => {
   test('should render a row with 2 columns', () => {
@@ -25,4 +26,15 @@ describe('Rows', () => {
 
     expect(getAllByTestId(/titleTeaserVertical-/).length).toEqual(3)
   })
+
+  describe('Recommended articles', () => {
+    test('should render with recommended articles', () => {
+      const { getAllByTestId } = renderWithTheme(BasicRow, {
+        articles: relatedArticles,
+        colums: { xs: '1fr', md: '1fr 1fr', lg: '1fr 1fr 1fr' },
+      })
+
+      expect(getAllByTestId(/articleRec-/).length).toEqual(4)
+    })
+  })
 })

package/components/section/layouts/__tests__/__snapshots__/Lead.test.tsx.snap

@@ -3,18 +3,18 @@
 exports[`Lead should render Lead 1`] = `
 <DocumentFragment>
   <div
-    class="css-1u38jm6"
+    class="css-148nb04"
     data-testid="SUPPLEMENT_LEAD_AND_4_STACK-Grid"
   >
     <div
-      class="css-151qm6o"
+      class="css-30qa7x"
       data-testid="featureVerticalCell"
     >
       <div
-        class="css-syq769"
+        class="css-1opc7jp"
       >
         <div
-          class="css-1ku19cs"
+          class="css-x4egtb"
         >
           <picture
             class="css-iq6vim"
@@ -30,10 +30,10 @@ exports[`Lead should render Lead 1`] = `
           class="css-1shocxe"
         >
           <div
-            class="css-1a2irou"
+            class="css-u3mic"
           >
             <div
-              class="css-1hcm6l"
+              class="css-7q4xyp"
             >
               <a
                 class="nk-card-link css-1cq1vxv"
@@ -55,17 +55,17 @@ exports[`Lead should render Lead 1`] = `
       </div>
     </div>
     <div
-      class="css-7644f"
+      class="css-1roi2fz"
     >
       <div
-        class="css-151qm6o"
+        class="css-30qa7x"
         data-testid="titleVerticalCell-0"
       >
         <div
-          class="css-51dsvu"
+          class="css-6c0oh5"
         >
           <div
-            class="css-fv6m0t"
+            class="css-1rsw0n0"
           >
             <picture
               class="css-iq6vim"
@@ -81,10 +81,10 @@ exports[`Lead should render Lead 1`] = `
             class="css-1r2lt0d"
           >
             <div
-              class="css-bw3bp5"
+              class="css-h6wt93"
             >
               <div
-                class="css-vj2a37"
+                class="css-165k7dq"
               >
                 <a
                   class="nk-card-link css-1cq1vxv"
@@ -106,14 +106,14 @@ exports[`Lead should render Lead 1`] = `
         </div>
       </div>
       <div
-        class="css-151qm6o"
+        class="css-30qa7x"
         data-testid="titleVerticalCell-1"
       >
         <div
-          class="css-51dsvu"
+          class="css-6c0oh5"
         >
           <div
-            class="css-fv6m0t"
+            class="css-1rsw0n0"
           >
             <picture
               class="css-iq6vim"
@@ -129,10 +129,10 @@ exports[`Lead should render Lead 1`] = `
             class="css-1r2lt0d"
           >
             <div
-              class="css-bw3bp5"
+              class="css-h6wt93"
             >
               <div
-                class="css-vj2a37"
+                class="css-165k7dq"
               >
                 <a
                   class="nk-card-link css-1cq1vxv"

package/components/section/layouts/__tests__/__snapshots__/SectionTitle.test.tsx.snap

@@ -3,14 +3,14 @@
 exports[`SectionTitle SectionTitle alternative titlebar 1`] = `
 <DocumentFragment>
   <div
-    class="css-1hbzjqt"
+    class="css-wjhscn"
     data-testid="SectionTitleBar"
   >
     <div
-      class="css-16ev6l1"
+      class="css-7p53p2"
     >
       <div
-        class="css-1tdjaxu"
+        class="css-krscqv"
       >
         <section
           class="css-148i9wz"
@@ -26,17 +26,17 @@ exports[`SectionTitle SectionTitle alternative titlebar 1`] = `
         class="css-1h0bvuz"
       >
         <a
-          class="css-1e3z2n"
+          class="css-89h75s"
           href="/section-one"
         >
           <span
-            class="css-qg3ppo"
+            class="css-1xnclyu"
           >
             <span
               class="css-1yztr03"
             >
               <span
-                class="css-1l5ehtz"
+                class="css-1golznc"
               >
                 Link
               </span>
@@ -46,7 +46,7 @@ exports[`SectionTitle SectionTitle alternative titlebar 1`] = `
             >
               <svg
                 aria-hidden="true"
-                class="css-ns2ihd-EmotionIconBase ex0cdmw0"
+                class="css-fwudb3-EmotionIconBase ex0cdmw0"
                 fill="currentColor"
                 focusable="false"
                 viewBox="0 0 24 24"
@@ -72,14 +72,14 @@ exports[`SectionTitle SectionTitle alternative titlebar 1`] = `
 exports[`SectionTitle SectionTitle with title 1`] = `
 <DocumentFragment>
   <div
-    class="css-1k1zs74"
+    class="css-ilgzgo"
     data-testid="SectionTitleBar"
   >
     <div
-      class="css-16ev6l1"
+      class="css-7p53p2"
     >
       <div
-        class="css-1tdjaxu"
+        class="css-krscqv"
       >
         <section
           class="css-148i9wz"
@@ -95,17 +95,17 @@ exports[`SectionTitle SectionTitle with title 1`] = `
         class="css-1h0bvuz"
       >
         <a
-          class="css-10qmydh"
+          class="css-686sn5"
           href="/section-one"
         >
           <span
-            class="css-qg3ppo"
+            class="css-1xnclyu"
           >
             <span
               class="css-1yztr03"
             >
               <span
-                class="css-1l5ehtz"
+                class="css-1golznc"
               >
                 Link
               </span>
@@ -115,7 +115,7 @@ exports[`SectionTitle SectionTitle with title 1`] = `
             >
               <svg
                 aria-hidden="true"
-                class="css-ns2ihd-EmotionIconBase ex0cdmw0"
+                class="css-fwudb3-EmotionIconBase ex0cdmw0"
                 fill="currentColor"
                 focusable="false"
                 viewBox="0 0 24 24"
@@ -141,24 +141,24 @@ exports[`SectionTitle SectionTitle with title 1`] = `
 exports[`SectionTitle SectionTitle without extra space 1`] = `
 <DocumentFragment>
   <div
-    class="css-1r3hoet"
+    class="css-38y4ob"
     data-testid="addTopSpace"
   >
     <hr
       aria-hidden="true"
-      class="css-90chx2"
+      class="css-mnhrmv"
       data-testid="divider"
     />
   </div>
   <div
-    class="css-1k1zs74"
+    class="css-ilgzgo"
     data-testid="SectionTitleBar"
   >
     <div
-      class="css-16ev6l1"
+      class="css-7p53p2"
     >
       <div
-        class="css-1tdjaxu"
+        class="css-krscqv"
       >
         <section
           class="css-148i9wz"
@@ -174,17 +174,17 @@ exports[`SectionTitle SectionTitle without extra space 1`] = `
         class="css-1h0bvuz"
       >
         <a
-          class="css-10qmydh"
+          class="css-686sn5"
           href="/section-one"
         >
           <span
-            class="css-qg3ppo"
+            class="css-1xnclyu"
           >
             <span
               class="css-1yztr03"
             >
               <span
-                class="css-1l5ehtz"
+                class="css-1golznc"
               >
                 Link
               </span>
@@ -194,7 +194,7 @@ exports[`SectionTitle SectionTitle without extra space 1`] = `
             >
               <svg
                 aria-hidden="true"
-                class="css-ns2ihd-EmotionIconBase ex0cdmw0"
+                class="css-fwudb3-EmotionIconBase ex0cdmw0"
                 fill="currentColor"
                 focusable="false"
                 viewBox="0 0 24 24"

package/components/section/layouts/types.ts

@@ -1,10 +1,13 @@
 import { MQ } from 'newskit'
+import { Article } from '@newskit-render/standalone-components'
 import { ArticleSlice } from '../../../helpers/global-types'
 import { VariantsName } from '../../teaser/teaserVariants'
 
 export type LayoutProps = {
   slice?: ArticleSlice
+  articles?: Article[]
   sectionURL?: string
   variant?: VariantsName
   colums?: MQ<string>
+  'data-testid'?: string
 }