@newskit-render/core 1.45.0 → 1.49.0

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-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/support/commands.js

@@ -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.45.0",
+  "version": "1.49.0",
   "description": "Newskit Render - Core package",
   "author": "",
   "license": "UNLICENSED",
@@ -33,15 +33,15 @@
   },
   "dependencies": {
     "@apollo/client": "3.4.16",
-    "@newskit-render/api": "^0.18.1",
-    "@newskit-render/auth": "^0.31.3",
-    "@newskit-render/checkout": "^0.26.4",
-    "@newskit-render/feature-flags": "^0.13.0",
-    "@newskit-render/feed": "^0.5.3",
-    "@newskit-render/my-account": "^0.152.4",
-    "@newskit-render/shared-components": "^0.45.1",
-    "@newskit-render/standalone-components": "^0.2.1",
-    "@newskit-render/validation": "^0.39.1",
+    "@newskit-render/api": "^0.21.0",
+    "@newskit-render/auth": "^0.33.0",
+    "@newskit-render/checkout": "^0.28.0",
+    "@newskit-render/feature-flags": "^0.15.0",
+    "@newskit-render/feed": "^0.8.0",
+    "@newskit-render/my-account": "^0.155.0",
+    "@newskit-render/shared-components": "^0.48.0",
+    "@newskit-render/standalone-components": "^0.5.0",
+    "@newskit-render/validation": "^0.41.0",
     "cross-fetch": "3.1.5",
     "graphql": "15.6.0",
     "newrelic": "7.1.0",
@@ -107,6 +107,12 @@
     "access": "public"
   },
   "resolutions": {
+    "@types/react": "^17.0.1",
+    "@types/react-dom": "^17.0.2",
     "newskit/react-hook-form": "7.8.4"
+  },
+  "overrides": {
+    "@types/react": "^17.0.1",
+    "@types/react-dom": "^17.0.2"
   }
 }

package/pages/account/cancellation/index.tsx

@@ -3,6 +3,7 @@ import { Cancellation, getProviderProps } from '@newskit-render/my-account'
 import newrelic from 'newrelic'
 import { AppContext } from '../../../app-context/AppContext'
 import { createThemeDropdownObject } from '../../../helpers/createThemeDropdownObject'
+import validation from '../../../validation'
 
 const AccountCancellation = (props) => {
   const { theme, setTheme } = useContext(AppContext)
@@ -11,6 +12,7 @@ const AccountCancellation = (props) => {
     <Cancellation
       {...props}
       customTheme={theme}
+      validation={validation}
       themeDropdownObject={themeDropdownObject}
     />
   )

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/theme/render-custom-theme.ts

@@ -39,6 +39,7 @@ export const renderCustomLightTheme = createTheme({
           backgroundColor: '{{colors.white}}',
           borderRadius: '{{borders.borderRadiusRounded020}}',
           color: '{{colors.inkBase}}',
+          whiteSpace: 'nowrap',
         },
         visited: {
           color: '{{colors.inkBase}}',

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