@newskit-render/core 1.45.0 → 1.49.0

package/components/section/ArticleSlice.tsx

@@ -1,46 +1,23 @@
 import React from 'react'
-import { Block, getColorCssFromTheme } from 'newskit'
-import {
-  ArticleSlice as Slice,
-  CollectionBlock,
-} from '../../helpers/global-types'
-import { Lead, SectionRow, FallBack } from './layouts'
-import { SectionContext } from './SectionContext'
+import { Block } from 'newskit'
+import { ArticleSlice as Slice } from '../../helpers/global-types'
+import { Lead, LeadFullWidth, FallBack } from './layouts'
+import { Row3, BasicRow } from './layouts/Rows'
 
-const sliceBlockBuilder = (slice: Slice, collection: CollectionBlock) => {
-  const sectionURL = collection?.link?.url || '/uncategorized'
-  /* add layout to case statments when ready */
+const sliceBlockBuilder = (slice: Slice) => {
   const sliceTypes = {
+    LEAD_1_FULL_WIDTH: <LeadFullWidth slice={slice} />,
     SUPPLEMENT_LEAD_AND_4_STACK: <Lead slice={slice} />,
-    SECONDARY_4: (
-      <SectionContext.Consumer>
-        {({ isIndexPage }) => (
-          <SectionRow
-            slice={slice}
-            collection={collection}
-            sectionURL={sectionURL}
-            showTitle={!isIndexPage}
-          />
-        )}
-      </SectionContext.Consumer>
+    SECONDARY_2_AND_2: (
+      <BasicRow slice={slice} colums={{ xs: '1fr', md: '1fr 1fr' }} />
     ),
-    SECONDARY_4_ODD: (
-      <SectionContext.Consumer>
-        {({ isIndexPage }) => (
-          <SectionRow
-            slice={slice}
-            collection={collection}
-            sectionURL={sectionURL}
-            isDarkBackground
-            addTopSpace={isIndexPage}
-            titleBarColour={
-              (isIndexPage &&
-                `${getColorCssFromTheme('color', 'transparent')}`) as string
-            }
-            titleBarStylePreset={(isIndexPage && 'inkContrast') as string}
-          />
-        )}
-      </SectionContext.Consumer>
+    SECONDARY_3: <Row3 slice={slice} />,
+    SECONDARY_4: (
+      <BasicRow
+        slice={slice}
+        colums={{ xs: '1fr', md: '1fr 1fr', lg: '1fr 1fr 1fr 1fr' }}
+        variant="horizontal"
+      />
     ),
     default: <FallBack slice={slice} />,
   }
@@ -48,13 +25,10 @@ const sliceBlockBuilder = (slice: Slice, collection: CollectionBlock) => {
   return sliceTypes[slice.name] || sliceTypes.default
 }
 
-const ArticleSlice: React.FC<{ slice: Slice; collection: CollectionBlock }> = ({
-  slice,
-  collection,
-}) => (
+const ArticleSlice: React.FC<{ slice: Slice }> = ({ slice }) => (
   <>
+    {sliceBlockBuilder(slice)}
     <Block spaceStack="space070" />
-    {sliceBlockBuilder(slice, collection)}
   </>
 )
 

package/components/section/CollectionBlock.tsx

@@ -1,15 +1,16 @@
+import { Block } from 'newskit'
 import React from 'react'
 import {
   CollectionBlock as Collection,
   ArticleSlice as Slice,
 } from '../../helpers/global-types'
 import ArticleSlice from './ArticleSlice'
+import { SectionTitle } from './layouts'
+import { SectionContext } from './SectionContext'
 
 const collectionSliceOptions = (type: string) => {
   const sliceTypes = {
-    slice: (slice: Slice, collection: Collection, i: number) => (
-      <ArticleSlice slice={slice} collection={collection} key={i} />
-    ),
+    slice: (slice: Slice, i: number) => <ArticleSlice slice={slice} key={i} />,
     'topic-author-slice': () => null,
     default: () => null,
   }
@@ -17,9 +18,40 @@ const collectionSliceOptions = (type: string) => {
   return sliceTypes[type] || sliceTypes.default
 }
 
-const CollectionBlock = (collection: Collection) =>
-  collection.children.map((slice, i) =>
-    collectionSliceOptions(slice.type)(slice, collection, i)
+type CollectionBlockProps = {
+  collection: Collection
+  index: number
+}
+
+const CollectionBlock: React.FC<CollectionBlockProps> = ({
+  collection,
+  index,
+}) => {
+  const sectionURL = collection?.link?.url || '/uncategorized'
+  const titleBarColors = ['', 'teal050', 'purple050', 'neutral050']
+
+  return (
+    <>
+      {index !== 0 && (
+        <SectionContext.Consumer>
+          {
+            ({ isIndexPage }) =>
+              !isIndexPage && (
+                <SectionTitle
+                  title={collection.title}
+                  sectionURL={sectionURL}
+                  titleBarColour={titleBarColors[index]}
+                />
+              )
+            /* eslint-disable-next-line */
+          }
+        </SectionContext.Consumer>
+      )}
+      {collection.children.map((slice, i) =>
+        collectionSliceOptions(slice.type)(slice, i)
+      )}
+    </>
   )
+}
 
 export default CollectionBlock

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