@newskit-render/core 0.0.0-d55b7d88

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

@@ -0,0 +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', () => () => <div data-testid="article-slice" />)
+
+describe('CollectionBlock', () => {
+  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'
+
+    const { getAllByTestId } = renderWithTheme(CollectionBlock, {
+      collection: topic as Collection,
+      index: 1,
+    })
+
+    expect(getAllByTestId('article-slice').length).toEqual(4)
+  })
+
+  test('should handle topic-author-slice', () => {
+    const topic = {
+      ...getPageMock.page.body[0],
+    }
+    topic.children[0].type = 'unknown'
+    topic.children[1].type = 'unknown'
+
+    const { getAllByTestId } = renderWithTheme(CollectionBlock, {
+      collection: topic as Collection,
+      index: 1,
+    })
+
+    expect(getAllByTestId('article-slice').length).toEqual(4)
+  })
+})

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

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

package/components/section/__tests__/sectionUtils.test.ts

@@ -0,0 +1,94 @@
+import { Video } from '../../../helpers/global-types'
+import { teaserURL, teaserSummary, getMedia } from '../sectionUtils'
+
+describe('Section Utils', () => {
+  test('teaserURL', () => {
+    expect(
+      teaserURL({
+        id: 'demo-1',
+        headline: 'Something Something',
+        categories: [
+          {
+            slug: 'catagory-one',
+          },
+        ],
+      })
+    ).toBe('catagory-one/demo-1/something-something')
+    expect(teaserURL({})).toBe('uncategorized')
+    expect(
+      teaserURL({
+        categories: [
+          {
+            slug: 'catagory-one',
+          },
+        ],
+      })
+    ).toBe('catagory-one')
+    expect(
+      teaserURL({
+        id: 'demo-1',
+        headline: 'Something Something',
+        categories: [
+          // @ts-ignore
+          {},
+        ],
+      })
+    ).toBe('uncategorized/demo-1/something-something')
+  })
+
+  test('teaserSummary', () => {
+    const summary = {
+      children: [
+        {
+          text: 'one',
+        },
+        {
+          text: 'two',
+        },
+      ],
+    }
+    expect(teaserSummary(summary)).toBe('one')
+    expect(teaserSummary({})).toBe('')
+  })
+
+  test('getMedia', () => {
+    expect(getMedia(undefined)).toEqual({
+      src: '',
+      alt: '',
+      loadingAspectRatio: '',
+    })
+
+    const image = {
+      crops: [
+        {
+          url: 'image-src',
+          alt: 'image-alt',
+          aspectRatio: '1:1',
+        },
+      ],
+    }
+
+    expect(getMedia(image)).toEqual({
+      src: image.crops[0].url,
+      alt: image.crops[0].alt,
+      loadingAspectRatio: image.crops[0].aspectRatio,
+    })
+
+    const video = {
+      videoId: '123',
+      posterImage: {
+        crop: {
+          url: 'image-src',
+          alt: 'image-alt',
+          aspectRatio: '1:1',
+        },
+      },
+    }
+
+    expect(getMedia(video as Video)).toEqual({
+      src: video.posterImage.crop.url,
+      alt: video.posterImage.crop.alt,
+      loadingAspectRatio: video.posterImage.crop.aspectRatio,
+    })
+  })
+})

package/components/section/index.tsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import { Block, Cell } from 'newskit'
+import { UserData } from '@newskit-render/my-account'
+import { Page } from '../../helpers/global-types'
+import Layout from '../layout'
+import pageBlock from './pageBlock'
+import SectionTitleBar from '../common/SectionTitleBar'
+import { SectionContext } from './SectionContext'
+import { BackToHomepage } from '../common/BackToHomepage'
+
+const gridOverride = {
+  xsMargin: 'space000',
+  xsRowGutter: 'space000',
+  xsColumnGutter: 'space000',
+}
+
+const SectionPage: React.FC<{
+  page: Page
+  isIndexPage?: boolean
+  user?: UserData
+}> = ({ 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 marginBlockEnd="space070" />
+          {isIndexPage && <SectionTitleBar title={page.title} />}
+          {Array.isArray(page.body) &&
+            page.body.map((block, i) =>
+              pageBlock(block.type as string)(block, i)
+            )}
+          {isIndexPage && <BackToHomepage />}
+        </Cell>
+      </Layout>
+    </SectionContext.Provider>
+  )
+}
+
+export default SectionPage

package/components/section/layouts/Block.tsx

@@ -0,0 +1,79 @@
+import React from 'react'
+import {
+  ArticleTeaser,
+  Media,
+  SliceBlock,
+  TeaserSummary,
+} from '../../../helpers/global-types'
+import { teaserURL, teaserSummary, getMedia } from '../sectionUtils'
+import Teaser from '../../teaser'
+import { VariantsName } from '../../teaser/teaserVariants'
+
+export const getBlockProps = (sliceBlock: SliceBlock) => {
+  // Temp remove later
+  const blockTypes = {
+    'article-block': 'article' in sliceBlock && sliceBlock.article,
+    'external-reference': {
+      headline: 'TODO - External Reference',
+      id: 'author' in sliceBlock && sliceBlock.author.id,
+    },
+    'video-brightcove': {
+      headline: 'TODO - Video',
+      id: 'accountId' in sliceBlock && sliceBlock.id,
+    },
+    default: {
+      headline: `Unknown slice block - ${sliceBlock.type}`,
+    },
+  }
+
+  return blockTypes[sliceBlock.type] || blockTypes.default
+}
+
+export const getBlock = (
+  sliceBlock: SliceBlock,
+  variant: VariantsName = 'base'
+) => {
+  const { headline, summary, media } = ('article' in sliceBlock &&
+    sliceBlock.article) as ArticleTeaser
+  const blockTypes = {
+    'article-block': (
+      <Teaser
+        variant={variant}
+        url={teaserURL(
+          ('article' in sliceBlock && sliceBlock.article) as ArticleTeaser
+        )}
+        media={getMedia(media as Media)}
+        title={headline as string}
+        teaser={teaserSummary(summary as TeaserSummary)}
+      />
+    ),
+    'external-reference': (
+      <Teaser
+        variant={variant}
+        media={{
+          src: 'https://plchldr.co/i/802x451?bg=F0F0F0&fc=111111&text=img',
+        }}
+        title="TODO - External Reference"
+      />
+    ),
+    'video-brightcove': (
+      <Teaser
+        variant={variant}
+        media={{
+          src: 'https://plchldr.co/i/802x451?bg=F0F0F0&fc=111111&text=img',
+        }}
+        title="TODO - Video"
+      />
+    ),
+    default: (
+      <Teaser
+        variant={variant}
+        media={{
+          src: 'https://plchldr.co/i/802x451?bg=F0F0F0&fc=111111&text=img',
+        }}
+        title={`Unknown slice block - ${sliceBlock.type}`}
+      />
+    ),
+  }
+  return blockTypes[sliceBlock.type] || blockTypes.default
+}

package/components/section/layouts/FallBack.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { NextLink } from '@newskit-render/shared-components'
+import { getBlockProps } from './Block'
+import { teaserURL } from '../sectionUtils'
+import { LayoutProps } from './types'
+
+// Fallback for unimplemented layouts. Remove once all have been implemented.
+
+export const FallBack: React.FC<LayoutProps> = ({ slice }) => (
+  <div className={slice.name}>
+    <h2>Layout: {slice.name}</h2>
+    {slice.children.map((block, i) => {
+      const teaserProps = getBlockProps(block)
+      const { id, headline } = teaserProps
+      return (
+        <p key={id || i}>
+          <NextLink href={teaserURL(teaserProps)} type="standalone">
+            {headline}
+          </NextLink>
+        </p>
+      )
+    })}
+  </div>
+)

package/components/section/layouts/Lead.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+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 }) => (
+  <GridLayout
+    {...outerGridOverride}
+    columns={{ lg: '2fr 1fr' }}
+    columnGap="space050"
+    data-testid={`${slice.name}-Grid`}
+  >
+    <Block data-testid="featureVerticalCell">
+      {getBlock(slice.children[0], 'featureVertical')}
+    </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
+            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,82 @@
+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',
+  '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) => (
+            <Block
+              marginBlockEnd="space050"
+              key={article.title}
+              data-testid={`articleRec-${i}`}
+            >
+              <ArticleRecommendation article={article} size="large" />
+            </Block>
+          ))
+        : 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>
+        )
+      })
+    }
+  </GridLayout>
+)

package/components/section/layouts/SectionTitle.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import { NextLink } from '@newskit-render/shared-components'
+import { Block, Divider, getColorCssFromTheme, styled } from 'newskit'
+import { LayoutProps } from './types'
+import StyledIconFilledChevronRight from '../../common/icons/StyledIconFilledChevronRight'
+import SectionTitleBar from '../../common/SectionTitleBar'
+
+const link = (href: string, stylePreset?: string) => (
+  <NextLink
+    type="standalone"
+    href={href}
+    overrides={{
+      stylePreset: stylePreset || 'inkInverse',
+      typographyPreset: 'utilityButton020',
+      spaceInline: 'space020',
+    }}
+  >
+    Link
+    <StyledIconFilledChevronRight overrides={{ size: 'iconSize020' }} />
+  </NextLink>
+)
+
+const StyledDivider = styled(Divider)`
+  ${getColorCssFromTheme('background', 'transparent')};
+  ${getColorCssFromTheme('borderColor', 'transparent')};
+`
+
+type SectionTitleProps = {
+  title: string
+  titleBarStylePreset?: string
+  titleBarColour?: string
+  addTopSpace?: boolean
+} & LayoutProps
+
+export const SectionTitle: React.FC<SectionTitleProps> = ({
+  title,
+  sectionURL,
+  titleBarStylePreset,
+  titleBarColour,
+  addTopSpace,
+}) => {
+  return (
+    <>
+      {addTopSpace && (
+        <Block marginBlockEnd="space060" data-testid="addTopSpace">
+          <StyledDivider />
+        </Block>
+      )}
+      <SectionTitleBar
+        title={title}
+        actionItem={() => link(sectionURL as string, titleBarStylePreset)}
+        stylePreset={titleBarStylePreset}
+        colour={titleBarColour}
+      />
+    </>
+  )
+}

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

@@ -0,0 +1,37 @@
+import { renderWithTheme } from '../../../../helpers/test-utils'
+import { Lead, LeadFullWidth } from '../Lead'
+import { getPageMock } from '../../../../helpers/mocks'
+import { ArticleSlice } from '../../../../helpers/global-types'
+
+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()
+  })
+})

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

@@ -0,0 +1,40 @@
+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', () => {
+    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)
+  })
+
+  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)
+    })
+  })
+})

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

@@ -0,0 +1,37 @@
+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 document = 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(document.getByTestId('addTopSpace')).toBeInTheDocument()
+    expect(document).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()
+  })
+})