@newskit-render/core 1.44.2 → 1.48.2

package/components/section/layouts/gridUtils.ts

@@ -2,17 +2,20 @@
 // xsColumnGutter="space000" padding on left and right of cells
 // xsRowGutter="space000" margin-top of cells
 
+// TODO: figure out column gutters
+
 export const outerGridOverride = {
-  xlRowGutter: 'space000',
-  mdRowGutter: 'space060',
-  xsRowGutter: 'space070',
-  lgMargin: 'space050',
-  xsMargin: 'space040',
+  rowGap: {
+    xs: 'space070',
+    md: 'space060',
+    xl: 'space000',
+  },
 }
 
 export const innerGridOverride = {
-  xlRowGutter: 'space050',
-  mdRowGutter: 'space060',
-  xsRowGutter: 'space070',
-  xsMargin: 'space000',
+  rowGap: {
+    xs: 'space070',
+    md: 'space060',
+    xl: 'space050',
+  },
 }

package/components/section/layouts/index.tsx

@@ -1,3 +1,4 @@
 export * from './Lead'
-export * from './SectionRow'
+export * from './SectionTitle'
 export * from './FallBack'
+export * from './Rows'

package/components/section/layouts/types.ts

@@ -1,6 +1,10 @@
+import { MQ } from 'newskit'
 import { ArticleSlice } from '../../../helpers/global-types'
+import { VariantsName } from '../../teaser/teaserVariants'
 
 export type LayoutProps = {
-  slice: ArticleSlice
+  slice?: ArticleSlice
   sectionURL?: string
+  variant?: VariantsName
+  colums?: MQ<string>
 }

package/components/section/{pageBlock.ts → pageBlock.tsx}

@@ -1,13 +1,16 @@
+import React from 'react'
 import CollectionBlock from './CollectionBlock'
 import { CollectionBlock as Collection } from '../../helpers/global-types'
 /* 
   We are using collections from the page schema but there are other block types that could be implemented (image, paragraph, tweet and more).
   See the schema for the full list
 */
-
+// CollectionBlock(collection, i)
 const pageBlock = (type: string) => {
   const blockTypes = {
-    collection: (collection: Collection) => CollectionBlock(collection),
+    collection: (collection: Collection, i: number) => (
+      <CollectionBlock collection={collection} index={i} />
+    ),
     image: () => null,
     paragraph: () => null,
     tweet: () => null,

package/components/teaser/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Card, Block, TextBlock, ImageProps } from 'newskit'
+import { Card, Block, TextBlock, ImageProps, Headline } from 'newskit'
 import teaserVariants, { VariantsName } from './teaserVariants'
 
 export interface TeaserProps {
@@ -29,13 +29,14 @@ const Teaser: React.FC<TeaserProps> = ({
       overrides={presets.card}
     >
       <Block spaceStack={presets.title.spaceStack}>
-        <TextBlock
-          as="h3"
-          stylePreset={presets.title.stylePreset}
-          typographyPreset={presets.title.typographyPreset}
+        <Headline
+          overrides={{
+            typographyPreset: presets.title.typographyPreset,
+          }}
+          headingAs="h3"
         >
           {title}
-        </TextBlock>
+        </Headline>
       </Block>
       {teaser && presets.teaser && (
         <Block spaceStack={presets.teaser.spaceStack}>

package/components/teaser/teaserVariants.ts

@@ -1,6 +1,7 @@
 import titleTeaserVertical from './variants/titleTeaserVariant'
 import titleVertical from './variants/titleVertical'
 import featureVertical from './variants/featureVariant'
+import horizontal from './variants/horizontal'
 import { VariantsObject } from './variant-types'
 
 const base: VariantsObject = {
@@ -21,6 +22,7 @@ const base: VariantsObject = {
 
 const teaserVariants = {
   base,
+  horizontal,
   titleTeaserVertical,
   titleVertical,
   featureVertical,

package/components/teaser/variants/horizontal.ts

@@ -0,0 +1,14 @@
+import { VariantsObject } from '../variant-types'
+
+const horizontalVariant: VariantsObject = {
+  layout: 'horizontal',
+  card: {
+    horizontalRatio: '1:1',
+  },
+  title: {
+    stylePreset: 'inkContrast',
+    spaceStack: 'space020',
+  },
+}
+
+export default horizontalVariant

package/cypress/e2e/account/account-page.spec.js

@@ -1,3 +1,25 @@
+describe('Account without user', () => {
+  beforeEach(() => {
+    cy.mockConsentAndVisit('/account')
+  })
+
+  it('Should Display default fallback values', () => {
+    cy.get('[data-testid="ContentListIntroduction"]').should('have.length', 3)
+    cy.get('[data-testid="ContentListItems"]').should('have.length', 3)
+    cy.contains('Please enter your name')
+    cy.contains('Please call customer service on xxxx-xxx-xxxx')
+    cy.contains('Please enter your display name')
+    cy.contains(
+      'Your display name is used across our websites or apps when leaving comments on articles'
+    )
+    cy.contains('[email@address]')
+    cy.contains('******************')
+    cy.contains('Please enter your mobile telephone number')
+    cy.contains('Please enter your landline telephone number')
+    cy.contains('Please enter your address')
+  })
+})
+
 describe('My account personal details', () => {
   beforeEach(() => {
     cy.GetAcsSession()
@@ -77,6 +99,10 @@ describe('My account personal details', () => {
     )
   })
 
+  it.only('Should Display date of birth', () => {
+    cy.contains('21/03/1988')
+  })
+
   it('Should go to edit page and change display name ', () => {
     cy.get('a[href="/account/edit/displayName"]')
       .should('be.visible')
@@ -176,7 +202,7 @@ describe('My account personal details', () => {
       .children()
       .should(
         'contain',
-        'Email sent to temp.account@tempaccount.com with a password reset link. If you haven’t received it in a couple of minutes, you may request a new link by clicking on the button below.'
+        'Email sent to render.e2e.default@yopmail.com with a password reset link. If you haven’t received it in a couple of minutes, you may request a new link by clicking on the button below.'
       )
   })
 

package/cypress/e2e/account/account-subscription.spec.js

@@ -81,9 +81,9 @@ describe('Account Subscription & Cancellation', () => {
     cy.contains(
       'All your subscription details, including payment info and transactions.'
     )
-    cy.contains('4AAA038742030')
+    cy.contains('4AAA038786047')
     cy.contains('************1111')
-    cy.contains('expiry date 01/31')
+    cy.contains('expiry date 01/24')
 
     cy.get('a[href="/account/cancellation"]').should('be.visible').click()
 

package/cypress/e2e/account/main-api.spec.js

@@ -21,7 +21,7 @@ describe('MAIN API', () => {
       cy.get('@mutateUser').then((updatedUser) => {
         expect(updatedUser.status).to.eq(200)
         expect(updatedUser.body.data.updateUser.email).to.eq(
-          'temp.account@tempaccount.com'
+          'render.e2e.default@yopmail.com'
         )
       })
     })
@@ -43,7 +43,7 @@ describe('MAIN API', () => {
       cy.get('@mutateUser').then((updatedUser) => {
         expect(updatedUser.status).to.eq(200)
         expect(updatedUser.body.data.updateUser.email).to.eq(
-          'temp.account@tempaccount.com'
+          'render.e2e.default@yopmail.com'
         )
       })
     })
@@ -63,7 +63,7 @@ describe('MAIN API', () => {
       }).as('user')
       cy.get('@user').then((response) => {
         expect(response.status).to.eq(200)
-        expect(response.body.email).to.eq('temp.account@tempaccount.com')
+        expect(response.body.email).to.eq('render.e2e.default@yopmail.com')
         expect(response.body.mobile).to.eq('+447777777778')
         expect(response.body.firstName).to.eq('John')
         expect(response.body.lastName).to.eq('Smith')
@@ -85,7 +85,7 @@ describe('MAIN API', () => {
       }).as('userSubscription')
       cy.get('@userSubscription').then((response) => {
         expect(response.status).to.eq(200)
-        expect(response.body.cpn).to.eq('4AAA038732032')
+        expect(response.body.cpn).to.eq('4AAA038765003')
         assert.isArray(response.body.subscriptions)
       })
     })

package/cypress/support/commands.js

@@ -11,8 +11,8 @@ Cypress.Commands.add('mockConsent', () => {
 
 const userMap = {
   default: {
-    username: 'temp.account@tempaccount.com',
-    password: 'asdasd1A',
+    username: 'render.e2e.default@yopmail.com',
+    password: 'Ad45p0-swq151@',
   },
   noSub: {
     username: 'render.e2e.no-sub@yopmail.com',
@@ -23,8 +23,8 @@ const userMap = {
     password: 'Ad45p0-swq151@',
   },
   withSub: {
-    username: 'render.e2e.sub@yopmail.com',
-    password: 'Ad45p0-swq151@',
+    username: 'render-e2e-sub@yopmail.com',
+    password: 'testing123',
   },
   paypalSub: {
     username: 'render-paypal-payment@yopmail.com',

package/helpers/mocks/getPageMock.ts

@@ -8,6 +8,7 @@ const data = {
         id: '123a',
         name: 'name',
         type: 'collection',
+        title: 'Section 1',
         link: {
           url: '/section-one',
         },
@@ -302,7 +303,7 @@ const data = {
             ],
           },
           {
-            name: 'SECONDARY_4_ODD',
+            name: 'SECONDARY_2_AND_2',
             type: 'slice',
             children: [
               {
@@ -363,64 +364,6 @@ const data = {
                   },
                 },
               },
-              {
-                type: 'article-block',
-                article: {
-                  id: 'demo-3',
-                  slug: 'some-location',
-                  headline: 'test headline 3',
-                  categories: [
-                    {
-                      slug: 'catagory-one',
-                    },
-                  ],
-                  summary: {
-                    children: [
-                      {
-                        text: 'teaser test text 3',
-                      },
-                    ],
-                  },
-                  media: {
-                    crops: [
-                      {
-                        url:
-                          'https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1',
-                        alt: 'image alt 3',
-                      },
-                    ],
-                  },
-                },
-              },
-              {
-                type: 'article-block',
-                article: {
-                  id: 'demo-4',
-                  slug: 'some-location',
-                  headline: 'test headline 4',
-                  categories: [
-                    {
-                      slug: 'catagory-one',
-                    },
-                  ],
-                  summary: {
-                    children: [
-                      {
-                        text: 'teaser test text 4',
-                      },
-                    ],
-                  },
-                  media: {
-                    crops: [
-                      {
-                        url:
-                          'https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1',
-                        alt: 'image alt 3',
-                      },
-                    ],
-                  },
-                },
-              },
             ],
           },
         ],

package/next.config.js

@@ -41,6 +41,10 @@ module.exports = withBundleAnalyzer(
           source: '/news-sitemap.xml',
           destination: '/api/news-sitemap',
         },
+        {
+          source: '/feed',
+          destination: '/api/feed',
+        },
       ]
     },
   })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newskit-render/core",
-  "version": "1.44.2",
+  "version": "1.48.2",
   "description": "Newskit Render - Core package",
   "author": "",
   "license": "UNLICENSED",
@@ -33,14 +33,15 @@
   },
   "dependencies": {
     "@apollo/client": "3.4.16",
-    "@newskit-render/api": "^0.18.0",
+    "@newskit-render/api": "^0.18.1",
     "@newskit-render/auth": "^0.31.3",
-    "@newskit-render/checkout": "^0.26.3",
+    "@newskit-render/checkout": "^0.26.7",
     "@newskit-render/feature-flags": "^0.13.0",
-    "@newskit-render/feed": "^0.5.2",
-    "@newskit-render/my-account": "^0.152.0",
-    "@newskit-render/shared-components": "^0.45.0",
-    "@newskit-render/validation": "^0.39.1",
+    "@newskit-render/feed": "^0.6.0",
+    "@newskit-render/my-account": "^0.153.2",
+    "@newskit-render/shared-components": "^0.46.0",
+    "@newskit-render/standalone-components": "^0.2.1",
+    "@newskit-render/validation": "^0.39.2",
     "cross-fetch": "3.1.5",
     "graphql": "15.6.0",
     "newrelic": "7.1.0",

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

@@ -4,11 +4,15 @@ import {
   createApolloClient,
   ClientTypes,
   getAcsCookie,
+  Publisher,
 } from '@newskit-render/api'
 import { UserData } from '@newskit-render/my-account'
+import {
+  recommendationsProvider,
+  Article,
+} from '@newskit-render/standalone-components'
 import { GET_UNIVERSAL_ARTICLE } from '../../../queries'
 import ArticlePage, { UniversalArticle } from '../../../components/article'
-import { highlights, relatedArticles } from '../../../helpers/mocks/articleMock'
 import { fetchUser } from '../../../helpers/getUser'
 import { ACCOUNT_QUERY_URL } from '../../../constants'
 import { addCacheHeaders } from '../../../helpers/addCacheHeaders'
@@ -20,6 +24,7 @@ export type ArticleSlug = {
   siteHost: string
   gscId?: string
   user?: UserData
+  recommendations: Article[]
 }
 const Article: React.FC<ArticleSlug> = ({
   universalArticle,
@@ -28,7 +33,11 @@ const Article: React.FC<ArticleSlug> = ({
   siteHost,
   gscId,
   user,
+  recommendations,
 }) => {
+  const highlitedArticles = recommendations.slice(0, 4)
+  const relatedArticles = recommendations.slice(4, 12)
+
   return (
     <ArticlePage
       articleURL={articleURL}
@@ -36,7 +45,7 @@ const Article: React.FC<ArticleSlug> = ({
       siteHost={siteHost}
       gscId={gscId}
       twitterUsername={twitterUsername}
-      highlights={highlights}
+      highlights={highlitedArticles}
       relatedArticles={relatedArticles}
       user={user}
     />
@@ -57,11 +66,12 @@ export async function getServerSideProps(context) {
     `Article: /${section}/${articleId}/${articleSlug}`
   )
 
-  const [{ data }, user] = await Promise.all([
+  const [{ data }, recommendations, user] = await Promise.all([
     apolloClient.query({
       query: GET_UNIVERSAL_ARTICLE,
       variables: { publisher: 'DEMO', id: articleId },
     }),
+    await recommendationsProvider({ articleId, publisher: Publisher.SUN_UK }),
     await fetchUser(acsCookie, ACCOUNT_QUERY_URL),
   ])
 
@@ -74,6 +84,7 @@ export async function getServerSideProps(context) {
       siteHost: process.env.SITE_HOST || '',
       gscId: process.env.GSC_ID || '',
       showAds: true,
+      recommendations,
       user,
     },
   }

package/pages/api/feed.ts

@@ -0,0 +1,19 @@
+import { NextApiRequest, NextApiResponse } from 'next'
+import { rssFeed, UpdatePeriod } from '@newskit-render/feed'
+
+const handler = async (req: NextApiRequest, res: NextApiResponse) =>
+  rssFeed({
+    res,
+    titeAttributes: {
+      title: 'Demo Site',
+      link: `${process.env.SITE_HOST}/feed`,
+      description: 'Newskit Render Demo site',
+      lastBuildDate: new Date().toUTCString(),
+      language: 'en-US',
+      updatePeriod: 'hourly' as UpdatePeriod,
+      updateFrequency: 1,
+      logoUrl: `${process.env.SITE_HOST}/favicon.ico`,
+    },
+  })
+
+export default handler

package/pages/api/news-sitemap.ts

@@ -1,10 +1,18 @@
 import { NextApiRequest, NextApiResponse } from 'next'
-import { newsSitemap, PublisherGroup } from '@newskit-render/feed'
+import { newsSitemap } from '@newskit-render/feed'
+import { Publisher } from '@newskit-render/api'
+
+/* We do not have sitemap date for Demo so using Virgin,
+ * This can be removed and replace with just - publisher: process.env.PUBLISHER as PublisherGroup, in created projects
+ */
 
 const handler = async (req: NextApiRequest, res: NextApiResponse) =>
   newsSitemap({
     res,
-    publisher: process.env.PUBLISHER as PublisherGroup,
+    publisher:
+      process.env.PUBLISHER === 'DEMO'
+        ? Publisher.VIRGIN
+        : (process.env.PUBLISHER as Publisher),
     domain: new URL(process.env.SITE_HOST as string).host,
     publicationName: process.env.SITEMAP_PUBLICATION_NAME as string,
   })

package/pages/api/sitemap.ts

@@ -1,9 +1,10 @@
 import { NextApiRequest, NextApiResponse } from 'next'
-import {
-  genericSitemap,
-  PublisherGroup,
-  CustomStaticPage,
-} from '@newskit-render/feed'
+import { genericSitemap, CustomStaticPage } from '@newskit-render/feed'
+import { Publisher } from '@newskit-render/api'
+
+/* We do not have sitemap date for Demo so using Virgin,
+ * This can be removed and replace with just - publisher: process.env.PUBLISHER as PublisherGroup, in created projects
+ */
 
 const defaultCustomStaticPagesCollection: CustomStaticPage[] = [
   {
@@ -14,7 +15,10 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) =>
   genericSitemap({
     res,
     query: req.query,
-    publisher: process.env.PUBLISHER as PublisherGroup,
+    publisher:
+      process.env.PUBLISHER === 'DEMO'
+        ? Publisher.VIRGIN
+        : (process.env.PUBLISHER as Publisher),
     domain: new URL(process.env.SITE_HOST as string).host,
     firstArticleDate: process.env.SITEMAP_FIRST_PUBLICATION_DATE as string,
     publicationName: process.env.SITEMAP_PUBLICATION_NAME as string,

package/components/section/layouts/Row.tsx

@@ -1,28 +0,0 @@
-import React from 'react'
-import { Grid, Cell } from 'newskit'
-import { LayoutProps } from './types'
-import { outerGridOverride } from './gridUtils'
-import { getBlock } from './Block'
-
-const Row: React.FC<LayoutProps> = ({ slice }) => (
-  <Grid {...outerGridOverride} data-testid={`${slice.name}-Grid`}>
-    {slice.children.map((block, i) => (
-      <Cell
-        xs={12}
-        md={6}
-        xl={3}
-        key={
-          ('article' in block && block.article.id) ||
-          ('author' in block && block.author.id) ||
-          ('accountId' in block && block.id) ||
-          i
-        }
-        data-testid={`titleTeaserVertical-${i}`}
-      >
-        {getBlock(block, 'titleTeaserVertical')}
-      </Cell>
-    ))}
-  </Grid>
-)
-
-export default Row

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

@@ -1,56 +0,0 @@
-import { renderWithTheme } from '../../../../helpers/test-utils'
-import { SectionRow } from '../SectionRow'
-import { getPageMock } from '../../../../helpers/mocks'
-import { ArticleSlice } from '../../../../helpers/global-types'
-
-describe('SectionRow', () => {
-  test('SectionRow with title', () => {
-    const { asFragment } = renderWithTheme(SectionRow, {
-      slice: getPageMock.page.body[0].children[1] as ArticleSlice,
-      sectionURL: getPageMock.page.body[0].link.url,
-      collection: getPageMock.page.body[0],
-    })
-    expect(asFragment()).toMatchSnapshot()
-  })
-
-  test('SectionRow without title', () => {
-    const { asFragment } = renderWithTheme(SectionRow, {
-      slice: getPageMock.page.body[0].children[1] as ArticleSlice,
-      sectionURL: getPageMock.page.body[0].link.url,
-      collection: getPageMock.page.body[0],
-      showTitle: false,
-    })
-    expect(asFragment()).toMatchSnapshot()
-  })
-
-  test('SectionRow isDarkBackground', () => {
-    const { asFragment } = renderWithTheme(SectionRow, {
-      slice: getPageMock.page.body[0].children[1] as ArticleSlice,
-      sectionURL: getPageMock.page.body[0].link.url,
-      collection: getPageMock.page.body[0],
-      isDarkBackground: true,
-    })
-    expect(asFragment()).toMatchSnapshot()
-  })
-
-  test('SectionRow without extra space', () => {
-    const { asFragment } = renderWithTheme(SectionRow, {
-      slice: getPageMock.page.body[0].children[1] as ArticleSlice,
-      sectionURL: getPageMock.page.body[0].link.url,
-      collection: getPageMock.page.body[0],
-      addTopSpace: true,
-    })
-    expect(asFragment()).toMatchSnapshot()
-  })
-
-  test('SectionRow alternative titlebar', () => {
-    const { asFragment } = renderWithTheme(SectionRow, {
-      slice: getPageMock.page.body[0].children[1] as ArticleSlice,
-      sectionURL: getPageMock.page.body[0].link.url,
-      collection: getPageMock.page.body[0],
-      titleBarStylePreset: 'inkContrast',
-      titleBarColour: 'transparent',
-    })
-    expect(asFragment()).toMatchSnapshot()
-  })
-})