@newskit-render/core 1.49.2 → 1.59.0

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