@newskit-render/core 1.50.1 → 1.63.2

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

@@ -2,259 +2,25 @@
 
 exports[`Footer tests should render footer 1`] = `
 <DocumentFragment>
-  .emotion-0 {
-  background-color: #0A0A0A;
-  width: 100%;
-  bottom: 0;
-  display: block;
-  padding: 12px;
-}
-
-.emotion-1 {
-  width: 100%;
-  max-width: 1920px;
-  margin: 0 auto;
-}
-
-.emotion-2 {
-  box-sizing: border-box;
-  -webkit-background-clip: padding-box;
-  background-clip: padding-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-flex-wrap: wrap;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-@media screen {
-  .emotion-2 {
-    margin: -0px 8px 0 8px;
-  }
-}
-
-@media screen and (min-width: 480px) {
-  .emotion-2 {
-    margin: -0px 8px 0 8px;
-  }
-}
-
-@media screen and (min-width: 768px) {
-  .emotion-2 {
-    margin: -0px 16px 0 16px;
-  }
-}
-
-@media screen and (min-width: 1024px) {
-  .emotion-2 {
-    margin: -0px 16px 0 16px;
-  }
-}
-
-@media screen and (min-width: 1440px) {
-  .emotion-2 {
-    margin: -0px 16px 0 16px;
-  }
-}
-
-.emotion-3 {
-  box-sizing: border-box;
-  -webkit-background-clip: padding-box;
-  background-clip: padding-box;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-}
-
-@media screen {
-  .emotion-3 {
-    padding: 0 8px;
-    -webkit-flex-basis: 100%;
-    -ms-flex-preferred-size: 100%;
-    flex-basis: 100%;
-    max-width: 100%;
-  }
-}
-
-.emotion-4 {
-  margin-bottom: 12px;
-}
-
-.emotion-5 {
-  display: inline-block;
-  fill: #FFFFFF;
-  color: #FFFFFF;
-  width: 160px;
-}
-
-.emotion-7 {
-  border-width: 0px;
-  margin: 0;
-  width: 100%;
-}
-
-.emotion-8 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-flex-flow: row wrap;
-  -webkit-flex-flow: row wrap;
-  -ms-flex-flow: row wrap;
-  flex-flow: row wrap;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-bottom: 24px;
-}
-
-@media screen and (min-width: 768px) {
-  .emotion-8 {
-    -webkit-box-pack: start;
-    -ms-flex-pack: start;
-    -webkit-justify-content: flex-start;
-    justify-content: flex-start;
-    -webkit-flex-direction: row;
-    -ms-flex-direction: row;
-    flex-direction: row;
-  }
-}
-
-.emotion-9 {
-  margin-bottom: 16px;
-}
-
-@media screen and (max-width: 767px) {
-  .emotion-9 {
-    margin-right: 0;
-  }
-}
-
-@media screen and (min-width: 768px) {
-  .emotion-9 {
-    margin-right: 64px;
-  }
-}
-
-.emotion-10 {
-  display: inline-block;
-  transition-property: color;
-  transition-duration: 200ms;
-  transition-timing-function: cubic-bezier(0, 0, .5, 1);
-  color: #FFFFFF;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-10 svg {
-  fill: #FFFFFF;
-}
-
-.emotion-10:hover:not(:disabled) {
-  color: #FFFFFF;
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-10:hover:not(:disabled) svg {
-  fill: #FFFFFF;
-}
-
-.emotion-10:active:not(:disabled) {
-  color: #FFFFFF;
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-10:active:not(:disabled) svg {
-  fill: #FFFFFF;
-}
-
-.emotion-11 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  height: 100%;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -ms-flex-pack: start;
-  -webkit-justify-content: flex-start;
-  justify-content: flex-start;
-}
-
-.emotion-12 {
-  margin: 0;
-  font-family: "DM Sans",sans-serif;
-  font-size: 14px;
-  line-height: 21px;
-  font-weight: 500;
-  letter-spacing: 0;
-  padding: 0.5px 0px;
-  display: inline-block;
-  display: block;
-}
-
-.emotion-12::before {
-  content: '';
-  margin-bottom: -0.391em;
-  display: block;
-}
-
-.emotion-12::after {
-  content: '';
-  margin-top: -0.409em;
-  display: block;
-}
-
-.emotion-35 {
-  margin: 0;
-  color: #535353;
-  font-family: "DM Sans",sans-serif;
-  font-size: 14px;
-  line-height: 1.5;
-  font-weight: 500;
-  letter-spacing: 0;
-}
-
-.emotion-35 svg {
-  fill: #535353;
-}
-
-<div
-    class="emotion-0"
+  <div
+    class="css-1p8e12n"
   >
     <div
-      class="emotion-1"
+      class="css-8atxkm"
     >
       <div
-        class="emotion-2"
+        class="css-1w88buo"
         data-testid="PageLayout"
       >
         <div
-          class="emotion-3"
+          class="css-18d6eiw"
           data-testid="PageLayout"
         >
           <div
-            class="emotion-4"
+            class="css-a1yn46"
           >
             <svg
-              class="emotion-5"
+              class="css-kgdu16"
               height="48px"
               viewBox="0 0 244 40"
             >
@@ -278,30 +44,30 @@ exports[`Footer tests should render footer 1`] = `
             </svg>
           </div>
           <div
-            class="emotion-4"
+            class="css-a1yn46"
           >
             <hr
               aria-hidden="true"
-              class="emotion-7"
+              class="css-13iiewa"
               data-testid="divider"
             />
           </div>
           <div
-            class="emotion-8"
+            class="css-hx18jh"
           >
             <span
-              class="emotion-9"
+              class="css-1v0p1qz"
             >
               <a
                 aria-label="NavLink One"
-                class="emotion-10"
+                class="css-e43kyg"
                 href="/link-one"
               >
                 <span
-                  class="emotion-11"
+                  class="css-17x5lw"
                 >
                   <span
-                    class="emotion-12"
+                    class="css-kxo08d"
                   >
                     NavLink One
                   </span>
@@ -309,18 +75,18 @@ exports[`Footer tests should render footer 1`] = `
               </a>
             </span>
             <span
-              class="emotion-9"
+              class="css-1v0p1qz"
             >
               <a
                 aria-label="NavLink Two"
-                class="emotion-10"
+                class="css-e43kyg"
                 href="/link-two"
               >
                 <span
-                  class="emotion-11"
+                  class="css-17x5lw"
                 >
                   <span
-                    class="emotion-12"
+                    class="css-kxo08d"
                   >
                     NavLink Two
                   </span>
@@ -328,18 +94,18 @@ exports[`Footer tests should render footer 1`] = `
               </a>
             </span>
             <span
-              class="emotion-9"
+              class="css-1v0p1qz"
             >
               <a
                 aria-label="NavLink Three"
-                class="emotion-10"
+                class="css-e43kyg"
                 href="/link-three"
               >
                 <span
-                  class="emotion-11"
+                  class="css-17x5lw"
                 >
                   <span
-                    class="emotion-12"
+                    class="css-kxo08d"
                   >
                     NavLink Three
                   </span>
@@ -347,18 +113,18 @@ exports[`Footer tests should render footer 1`] = `
               </a>
             </span>
             <span
-              class="emotion-9"
+              class="css-1v0p1qz"
             >
               <a
                 aria-label="NavLink Four"
-                class="emotion-10"
+                class="css-e43kyg"
                 href="/link-four"
               >
                 <span
-                  class="emotion-11"
+                  class="css-17x5lw"
                 >
                   <span
-                    class="emotion-12"
+                    class="css-kxo08d"
                   >
                     NavLink Four
                   </span>
@@ -366,18 +132,18 @@ exports[`Footer tests should render footer 1`] = `
               </a>
             </span>
             <span
-              class="emotion-9"
+              class="css-1v0p1qz"
             >
               <a
                 aria-label="NavLink Five"
-                class="emotion-10"
+                class="css-e43kyg"
                 href="/link-five"
               >
                 <span
-                  class="emotion-11"
+                  class="css-17x5lw"
                 >
                   <span
-                    class="emotion-12"
+                    class="css-kxo08d"
                   >
                     NavLink Five
                   </span>
@@ -385,18 +151,18 @@ exports[`Footer tests should render footer 1`] = `
               </a>
             </span>
             <span
-              class="emotion-9"
+              class="css-1v0p1qz"
             >
               <a
                 aria-label="NavLink Six"
-                class="emotion-10"
+                class="css-e43kyg"
                 href="/link-six"
               >
                 <span
-                  class="emotion-11"
+                  class="css-17x5lw"
                 >
                   <span
-                    class="emotion-12"
+                    class="css-kxo08d"
                   >
                     NavLink Six
                   </span>
@@ -405,16 +171,16 @@ exports[`Footer tests should render footer 1`] = `
             </span>
           </div>
           <div
-            class="emotion-4"
+            class="css-a1yn46"
           >
             <hr
               aria-hidden="true"
-              class="emotion-7"
+              class="css-13iiewa"
               data-testid="divider"
             />
           </div>
           <p
-            class="emotion-35"
+            class="css-1rn2unv"
           >
             Copyright © YYYY News Corp. All rights reserved.
           </p>

package/components/header/index.tsx

@@ -92,6 +92,13 @@ const pastDueBanner = {
     text:
       'You have cancelled your subscription and will lose access to all benefits on ##DATE##. To re-activate your subscription call ##PHONE_NUMBER##.',
   },
+  toBeCancelledWithRefund: {
+    title: 'Your subscription will end soon.',
+    phoneNumber: '0800 xxxx xxxxx',
+    text:
+      'We have successfully cancelled your subscription and will be processing your refund shortly. If you have any question please call ##PHONE_NUMBER##.',
+    dismissDays: 7,
+  },
   treshold: {
     firstNotice: 26,
     secondNotice: 30,

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)
+    })
+  })
 })