@newskit-render/core 1.44.0 → 1.48.1

package/components/section/__tests__/ArticleSlice.test.tsx

@@ -11,7 +11,6 @@ describe('ArticleSlice', () => {
       ArticleSlice,
       {
         slice: getPageMock.page.body[0].children[0] as ArticleSliceType,
-        collection: getPageMock.page.body[0],
       }
     )
     expect(getByTestId('SUPPLEMENT_LEAD_AND_4_STACK-Grid')).toBeInTheDocument()
@@ -25,80 +24,69 @@ describe('ArticleSlice', () => {
       ArticleSlice,
       {
         slice: getPageMock.page.body[0].children[1] as ArticleSliceType,
-        collection: getPageMock.page.body[0],
       }
     )
-    expect(getByTestId('SectionTitleBar')).toBeInTheDocument()
     expect(getByTestId('SECONDARY_4-Grid')).toBeInTheDocument()
     expect(getAllByTestId(/titleTeaserVertical-/).length).toEqual(4)
     expect(getAllByRole('link').length).toEqual(4)
   })
 
   test('Handle SECONDARY_4 article-block Index Page', () => {
-    const {
-      getByTestId,
-      getAllByTestId,
-      getAllByRole,
-      queryByTestId,
-    } = renderWithTheme(SectionContext.Provider, {
-      value: {
-        isIndexPage: true,
-      },
-      children: (
-        <ArticleSlice
-          slice={getPageMock.page.body[0].children[1] as ArticleSliceType}
-          collection={getPageMock.page.body[0]}
-        />
-      ),
-    })
-    expect(queryByTestId('SectionTitleBar')).not.toBeInTheDocument()
+    const { getByTestId, getAllByTestId, getAllByRole } = renderWithTheme(
+      SectionContext.Provider,
+      {
+        value: {
+          isIndexPage: true,
+        },
+        children: (
+          <ArticleSlice
+            slice={getPageMock.page.body[0].children[1] as ArticleSliceType}
+          />
+        ),
+      }
+    )
+
     expect(getByTestId('SECONDARY_4-Grid')).toBeInTheDocument()
     expect(getAllByTestId(/titleTeaserVertical-/).length).toEqual(4)
     expect(getAllByRole('link').length).toEqual(4)
   })
 
-  test('Handle SECONDARY_4_ODD article-block Homepage', () => {
+  test('Handle SECONDARY_2_AND_2 article-block Homepage', () => {
     const { getByTestId, getAllByTestId, getAllByRole } = renderWithTheme(
       ArticleSlice,
       {
         slice: getPageMock.page.body[0].children[5] as ArticleSliceType,
-        collection: getPageMock.page.body[0],
       }
     )
-    expect(getByTestId('SectionTitleBar')).toBeInTheDocument()
-    expect(getByTestId('SECONDARY_4_ODD-Grid')).toBeInTheDocument()
-    expect(getAllByTestId(/titleTeaserVertical-/).length).toEqual(4)
-    expect(getAllByRole('link').length).toEqual(4)
+
+    expect(getByTestId('SECONDARY_2_AND_2-Grid')).toBeInTheDocument()
+    expect(getAllByTestId(/titleTeaserVertical-/).length).toEqual(2)
+    expect(getAllByRole('link').length).toEqual(2)
   })
 
-  test('Handle SECONDARY_4_ODD article-block Index Page', () => {
-    const {
-      getByTestId,
-      getAllByTestId,
-      getAllByRole,
-      queryByTestId,
-    } = renderWithTheme(SectionContext.Provider, {
-      value: {
-        isIndexPage: true,
-      },
-      children: (
-        <ArticleSlice
-          slice={getPageMock.page.body[0].children[5] as ArticleSliceType}
-          collection={getPageMock.page.body[0]}
-        />
-      ),
-    })
-    expect(getByTestId('SectionTitleBar')).toBeInTheDocument()
-    expect(queryByTestId('addTopSpace')).toBeInTheDocument()
-    expect(getByTestId('SECONDARY_4_ODD-Grid')).toBeInTheDocument()
-    expect(getAllByTestId(/titleTeaserVertical-/).length).toEqual(4)
-    expect(getAllByRole('link').length).toEqual(4)
+  test('Handle SECONDARY_2_AND_2 article-block Index Page', () => {
+    const { getByTestId, getAllByTestId, getAllByRole } = renderWithTheme(
+      SectionContext.Provider,
+      {
+        value: {
+          isIndexPage: true,
+        },
+        children: (
+          <ArticleSlice
+            slice={getPageMock.page.body[0].children[5] as ArticleSliceType}
+          />
+        ),
+      }
+    )
+
+    expect(getByTestId('SECONDARY_2_AND_2-Grid')).toBeInTheDocument()
+    expect(getAllByTestId(/titleTeaserVertical-/).length).toEqual(2)
+    expect(getAllByRole('link').length).toEqual(2)
   })
 
   test('Unhandled article-block', () => {
     const { getByText } = renderWithTheme(ArticleSlice, {
       slice: getPageMock.page.body[0].children[2] as ArticleSliceType,
-      collection: getPageMock.page.body[0],
     })
     expect(getByText('Layout: LEAD_1_AND_1')).toBeInTheDocument()
     expect(getByText('test headline').closest('a')).toHaveAttribute(
@@ -114,7 +102,6 @@ describe('ArticleSlice', () => {
   test('Unhandled Layout other blocks', () => {
     const { getByText } = renderWithTheme(ArticleSlice, {
       slice: getPageMock.page.body[0].children[3] as ArticleSliceType,
-      collection: getPageMock.page.body[0],
     })
 
     expect(getByText('Layout: LEAD_1_AND_1')).toBeInTheDocument()
@@ -128,7 +115,6 @@ describe('ArticleSlice', () => {
       ArticleSlice,
       {
         slice: getPageMock.page.body[0].children[4] as ArticleSliceType,
-        collection: getPageMock.page.body[0],
       }
     )
 

package/components/section/__tests__/CollectionBlock.test.tsx

@@ -1,33 +1,83 @@
+import React from 'react'
 import CollectionBlock from '../CollectionBlock'
 import { getPageMock } from '../../../helpers/mocks'
+import { CollectionBlock as Collection } from '../../../helpers/global-types'
+import { renderWithTheme } from '../../../helpers/test-utils'
+import { SectionContext } from '../SectionContext'
 
-jest.mock('../ArticleSlice', () => {
-  return jest.fn(() => {})
-})
+jest.mock('../ArticleSlice', () => () => <div data-testid="article-slice" />)
 
 describe('CollectionBlock', () => {
-  test('returns slice', () => {
-    expect(
-      CollectionBlock(getPageMock.page.body[0])[0].props.slice.name
-    ).toEqual('SUPPLEMENT_LEAD_AND_4_STACK')
-    expect(
-      CollectionBlock(getPageMock.page.body[0])[0].props.collection.id
-    ).toEqual('123a')
+  test('renders section title with articles', () => {
+    const { getByTestId, getAllByTestId } = renderWithTheme(
+      SectionContext.Provider,
+      {
+        value: {
+          isIndexPage: false,
+        },
+        children: (
+          <CollectionBlock collection={getPageMock.page.body[0]} index={1} />
+        ),
+      }
+    )
+
+    expect(getByTestId('SectionTitleBar')).toBeInTheDocument()
+    expect(getAllByTestId('article-slice').length).toEqual(6)
+  })
+
+  test('should not render section title', () => {
+    const { queryByTestId } = renderWithTheme(SectionContext.Provider, {
+      value: {
+        isIndexPage: true,
+      },
+      children: (
+        <CollectionBlock collection={getPageMock.page.body[0]} index={1} />
+      ),
+    })
+
+    expect(queryByTestId('SectionTitleBar')).not.toBeInTheDocument()
+  })
+
+  test('should not render section title when index is 0', () => {
+    const { queryByTestId } = renderWithTheme(SectionContext.Provider, {
+      value: {
+        isIndexPage: false,
+      },
+      children: (
+        <CollectionBlock collection={getPageMock.page.body[0]} index={0} />
+      ),
+    })
+
+    expect(queryByTestId('SectionTitleBar')).not.toBeInTheDocument()
   })
+
   test('should handle topic-author-slice', () => {
     const topic = {
       ...getPageMock.page.body[0],
     }
     topic.children[0].type = 'topic-author-slice'
     topic.children[1].type = 'topic-author-slice'
-    expect(CollectionBlock(topic)[0]).toEqual(null)
+
+    const { getAllByTestId } = renderWithTheme(CollectionBlock, {
+      collection: topic as Collection,
+      index: 1,
+    })
+
+    expect(getAllByTestId('article-slice').length).toEqual(4)
   })
-  test('should handle unknown slice type', () => {
+
+  test('should handle topic-author-slice', () => {
     const topic = {
       ...getPageMock.page.body[0],
     }
     topic.children[0].type = 'unknown'
     topic.children[1].type = 'unknown'
-    expect(CollectionBlock(topic)[0]).toEqual(null)
+
+    const { getAllByTestId } = renderWithTheme(CollectionBlock, {
+      collection: topic as Collection,
+      index: 1,
+    })
+
+    expect(getAllByTestId('article-slice').length).toEqual(4)
   })
 })

package/components/section/__tests__/pageBlock.test.tsx

@@ -1,14 +1,18 @@
+import React from 'react'
 import pageBlock from '../pageBlock'
 import { getPageMock } from '../../../helpers/mocks'
+import CollectionBlock from '../CollectionBlock'
 
-jest.mock('../CollectionBlock', () => {
-  return jest.fn(() => 'is Collection')
-})
+jest.mock('../CollectionBlock', () => () => (
+  <div data-testid="collectionBlock" />
+))
 
 describe('test pageBlock', () => {
   const collection = getPageMock.page.body[0]
   test('pageBlock returns CollectionBlock', () => {
-    expect(pageBlock('collection')(collection)).toBe('is Collection')
+    expect(pageBlock('collection')(collection, 0)).toStrictEqual(
+      <CollectionBlock collection={collection} index={0} />
+    )
   })
 
   test('pageBlock returns null', () => {

package/components/section/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Cell } from 'newskit'
+import { Block, Cell } from 'newskit'
 import { UserData } from '@newskit-render/my-account'
 import { Page } from '../../helpers/global-types'
 import Layout from '../layout'
@@ -17,16 +17,21 @@ const SectionPage: React.FC<{
   page: Page
   isIndexPage?: boolean
   user?: UserData
-}> = ({ page, user, isIndexPage = false }) => (
-  <SectionContext.Provider value={{ isIndexPage }}>
-    <Layout dataTestId="SectionGrid" gridOverride={gridOverride} user={user}>
-      <Cell xs={12} md={10} mdOffset={1} data-testid="SectionCell">
-        {isIndexPage && <SectionTitleBar title={page.title} />}
-        {Array.isArray(page.body) &&
-          page.body.map((block) => pageBlock(block.type as string)(block))}
-      </Cell>
-    </Layout>
-  </SectionContext.Provider>
-)
+}> = ({ page, user, isIndexPage = false }) => {
+  return (
+    <SectionContext.Provider value={{ isIndexPage }}>
+      <Layout dataTestId="SectionGrid" gridOverride={gridOverride} user={user}>
+        <Cell xs={12} md={10} mdOffset={1} data-testid="SectionCell">
+          <Block spaceStack="space070" />
+          {isIndexPage && <SectionTitleBar title={page.title} />}
+          {Array.isArray(page.body) &&
+            page.body.map((block, i) =>
+              pageBlock(block.type as string)(block, i)
+            )}
+        </Cell>
+      </Layout>
+    </SectionContext.Provider>
+  )
+}
 
 export default SectionPage

package/components/section/layouts/Lead.tsx

@@ -1,23 +1,44 @@
 import React from 'react'
-import { Grid, Cell } from 'newskit'
+import { GridLayout, Block } from 'newskit'
 import { outerGridOverride, innerGridOverride } from './gridUtils'
 import { getBlock } from './Block'
 import { LayoutProps } from './types'
 
 export const Lead: React.FC<LayoutProps> = ({ slice }) => (
-  <Grid {...outerGridOverride} data-testid={`${slice.name}-Grid`}>
-    <Cell xs={12} xl={8} data-testid="featureVerticalCell">
+  <GridLayout
+    {...outerGridOverride}
+    columns={{ lg: '2fr 1fr' }}
+    columnGap="space050"
+    data-testid={`${slice.name}-Grid`}
+  >
+    <Block data-testid="featureVerticalCell">
       {getBlock(slice.children[0], 'featureVertical')}
-    </Cell>
-    <Cell xs={12} xl={4} data-testid="titleTeaserVerticalsCell">
-      <Grid {...innerGridOverride} data-testid={`${slice.name}-InnerGrid`}>
-        <Cell xs={12} md={6} xl={12} data-testid="titleVerticalCell-1">
-          {getBlock(slice.children[1], 'titleVertical')}
-        </Cell>
-        <Cell xs={12} md={6} xl={12} data-testid="titleVerticalCell-2">
-          {getBlock(slice.children[2], 'titleVertical')}
-        </Cell>
-      </Grid>
-    </Cell>
-  </Grid>
+    </Block>
+    <GridLayout
+      columnGap={{ md: '20px' }}
+      columns={{ xs: '1fr', md: '1fr 1fr', lg: '1fr' }}
+      justifyContent={{ lg: 'stretch' }}
+      alignContent={{ lg: 'space-between' }}
+      overrides={{ height: '100%' }}
+      {...innerGridOverride}
+    >
+      {slice.children.slice(1).map((block, i) => {
+        return (
+          <Block
+            /* eslint-disable-next-line */
+            key={`titleVerticalCell-${i}`}
+            data-testid={`titleVerticalCell-${i}`}
+          >
+            {getBlock(block, 'horizontal')}
+          </Block>
+        )
+      })}
+    </GridLayout>
+  </GridLayout>
+)
+
+export const LeadFullWidth: React.FC<LayoutProps> = ({ slice }) => (
+  <Block data-testid={`${slice.name}-Grid`}>
+    {getBlock(slice.children[0], 'featureVertical')}
+  </Block>
 )

package/components/section/layouts/Rows.tsx

@@ -0,0 +1,67 @@
+import React from 'react'
+import { Block, GridLayout } from 'newskit'
+import { LayoutProps } from './types'
+import { outerGridOverride } from './gridUtils'
+import { getBlock } from './Block'
+
+export const BasicRow: React.FC<LayoutProps> = ({
+  slice,
+  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>
+)
+
+export const Row3: React.FC<LayoutProps> = ({ slice }) => (
+  <GridLayout
+    areas={{
+      xs: `
+     "A"
+     "B"
+     "C"
+     `,
+      md: ` 
+      "A B"
+      "A C"
+    `,
+      lg: `
+      "A B C"
+      `,
+    }}
+    rowGap={{ xs: 'space010', md: 'space040' }}
+    columnGap={{ md: 'space050', lg: 'space050' }}
+    data-testid={`${slice.name}-Grid`}
+  >
+    {
+      (Areas) =>
+        Object.entries(Areas).map((Area, i) => {
+          const AreaComp = Area[1]
+          const block = slice.children[i]
+
+          return (
+            <AreaComp
+              key={('article' in block && block.article.id) || i}
+              data-testid={`titleTeaserVertical-${i}`}
+            >
+              {getBlock(block, 'horizontal')}
+            </AreaComp>
+          )
+        })
+      /* eslint-disable-next-line */
+    }
+  </GridLayout>
+)

package/components/section/layouts/{SectionRow.tsx → SectionTitle.tsx}

@@ -1,33 +1,9 @@
 import React from 'react'
-import {
-  styled,
-  getColorCssFromTheme,
-  Block,
-  Divider,
-  BlockProps,
-} from 'newskit'
 import { NextLink } from '@newskit-render/shared-components'
+import { Block, Divider, getColorCssFromTheme, styled } from 'newskit'
 import { LayoutProps } from './types'
-import { CollectionBlock } from '../../../helpers/global-types'
 import StyledIconFilledChevronRight from '../../common/icons/StyledIconFilledChevronRight'
 import SectionTitleBar from '../../common/SectionTitleBar'
-import Row from './Row'
-
-type StyledBackground = BlockProps & {
-  isDarkBackground?: boolean
-}
-
-const StyledBackgroundBlock = styled(Block)<StyledBackground>`
-  background: ${(props) =>
-    props.isDarkBackground
-      ? getColorCssFromTheme('color', 'interface030')
-      : getColorCssFromTheme('color', 'transparent')};
-`
-
-const StyledDivider = styled(Divider)`
-  ${getColorCssFromTheme('background', 'transparent')};
-  ${getColorCssFromTheme('borderColor', 'transparent')};
-`
 
 const link = (href: string, stylePreset?: string) => (
   <NextLink
@@ -44,42 +20,38 @@ const link = (href: string, stylePreset?: string) => (
   </NextLink>
 )
 
-type SectionRowProps = {
-  collection?: CollectionBlock
-  isDarkBackground?: boolean
-  showTitle?: boolean
-  addTopSpace?: boolean
+const StyledDivider = styled(Divider)`
+  ${getColorCssFromTheme('background', 'transparent')};
+  ${getColorCssFromTheme('borderColor', 'transparent')};
+`
+
+type SectionTitleProps = {
+  title: string
   titleBarStylePreset?: string
   titleBarColour?: string
+  addTopSpace?: boolean
 } & LayoutProps
 
-export const SectionRow: React.FC<SectionRowProps> = ({
-  slice,
-  collection,
+export const SectionTitle: React.FC<SectionTitleProps> = ({
+  title,
   sectionURL,
-  isDarkBackground,
-  showTitle = true,
-  addTopSpace,
   titleBarStylePreset,
   titleBarColour,
-}) => (
-  <StyledBackgroundBlock isDarkBackground={isDarkBackground}>
-    {addTopSpace && (
-      <Block spaceStack="space060" data-testid="addTopSpace">
-        <StyledDivider />
-      </Block>
-    )}
-    {showTitle && (
+  addTopSpace,
+}) => {
+  return (
+    <>
+      {addTopSpace && (
+        <Block spaceStack="space060" data-testid="addTopSpace">
+          <StyledDivider />
+        </Block>
+      )}
       <SectionTitleBar
-        title={collection?.title as string}
+        title={title}
         actionItem={() => link(sectionURL as string, titleBarStylePreset)}
         stylePreset={titleBarStylePreset}
         colour={titleBarColour}
       />
-    )}
-    <Block spaceStack={showTitle ? 'space070' : 'space000'}>
-      <Row slice={slice} />
-    </Block>
-    <StyledDivider />
-  </StyledBackgroundBlock>
-)
+    </>
+  )
+}

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

@@ -1,12 +1,37 @@
 import { renderWithTheme } from '../../../../helpers/test-utils'
-import { Lead } from '../Lead'
+import { Lead, LeadFullWidth } from '../Lead'
 import { getPageMock } from '../../../../helpers/mocks'
 import { ArticleSlice } from '../../../../helpers/global-types'
 
-test('Lead', () => {
-  const { asFragment } = renderWithTheme(Lead, {
-    slice: getPageMock.page.body[0].children[0] as ArticleSlice,
-    sectionURL: getPageMock.page.body[0].link.url,
+describe('Lead', () => {
+  test('should render Lead', () => {
+    const { asFragment } = renderWithTheme(Lead, {
+      slice: getPageMock.page.body[0].children[0] as ArticleSlice,
+    })
+    expect(asFragment()).toMatchSnapshot()
+  })
+
+  test('should render Lead with cells', () => {
+    const { getAllByTestId, queryByTestId } = renderWithTheme(Lead, {
+      slice: getPageMock.page.body[0].children[0] as ArticleSlice,
+    })
+
+    expect(
+      queryByTestId('SUPPLEMENT_LEAD_AND_4_STACK-Grid')
+    ).toBeInTheDocument()
+    expect(queryByTestId('featureVerticalCell')).toBeInTheDocument()
+    expect(getAllByTestId(/titleVerticalCell-/).length).toEqual(2)
+  })
+})
+
+describe('Lead full width', () => {
+  test('should render Lead full width', () => {
+    const { queryByTestId } = renderWithTheme(LeadFullWidth, {
+      slice: getPageMock.page.body[0].children[0] as ArticleSlice,
+    })
+
+    expect(
+      queryByTestId('SUPPLEMENT_LEAD_AND_4_STACK-Grid')
+    ).toBeInTheDocument()
   })
-  expect(asFragment()).toMatchSnapshot()
 })

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

@@ -0,0 +1,28 @@
+import { renderWithTheme } from '../../../../helpers/test-utils'
+import { BasicRow, Row3 } from '../Rows'
+import { getPageMock } from '../../../../helpers/mocks'
+import { ArticleSlice } from '../../../../helpers/global-types'
+
+describe('Rows', () => {
+  test('should render a row with 2 columns', () => {
+    const slice = {
+      ...getPageMock.page.body[0].children[0],
+      children: getPageMock.page.body[0].children[0].children.slice(0, 2),
+    }
+    const { getAllByTestId } = renderWithTheme(BasicRow, {
+      slice: slice as ArticleSlice,
+      colums: { xs: '1fr', md: '1fr 1fr' },
+    })
+
+    expect(getAllByTestId(/titleTeaserVertical-/).length).toEqual(2)
+  })
+
+  test('should render a row with 3 columns', () => {
+    const { getAllByTestId } = renderWithTheme(Row3, {
+      slice: getPageMock.page.body[0].children[0] as ArticleSlice,
+      colums: { xs: '1fr', md: '1fr 1fr' },
+    })
+
+    expect(getAllByTestId(/titleTeaserVertical-/).length).toEqual(3)
+  })
+})

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

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