@newskit-render/core 0.0.0-d55b7d88

package/components/article/__tests__/index.test.tsx

@@ -0,0 +1,171 @@
+import React from 'react'
+import { ArticleRecommendationsProviderContext } from '@newskit-render/standalone-components'
+import { within } from '@testing-library/react'
+import Article from '..'
+import { Video } from '../../../helpers/global-types'
+import { renderWithTheme } from '../../../helpers/test-utils'
+import { dpaTemplatesMock, articleData } from './mocks'
+
+const ArticleWrapper = (props) => (
+  <ArticleRecommendationsProviderContext.Provider
+    value={{
+      dpaTemplates: dpaTemplatesMock,
+    }}
+  >
+    <Article {...props} />
+  </ArticleRecommendationsProviderContext.Provider>
+)
+
+jest.mock('@newskit-render/my-account', () => {
+  return {
+    PastDueBannerExternal: 'PastDueBannerExternal',
+  }
+})
+
+jest.mock('next/router', () => {
+  return {
+    useRouter: () => ({ asPath: '' }),
+  }
+})
+
+jest.mock('../../../helpers/getYear', () => ({
+  getYear: jest.fn().mockReturnValue('YYYY'),
+}))
+
+describe('Article', () => {
+  beforeAll(() => {
+    HTMLImageElement.prototype.loading = 'lazy'
+  })
+  test('should render tile and sub title', () => {
+    const { getByTestId, asFragment } = renderWithTheme(
+      ArticleWrapper,
+      articleData
+    )
+    const headLine = within(getByTestId('HeadLine'))
+    const kicker = within(getByTestId('Kicker'))
+    const title = headLine.getByText(
+      'Mock Article: Lorem ipsum dolor sit amet consectetur adipiscing elit'
+    )
+    const subTitle = kicker.getByText('Kicker title')
+    expect(title).toBeInTheDocument()
+    expect(subTitle).toBeInTheDocument()
+    expect(asFragment()).toMatchSnapshot()
+  })
+
+  test('should render byline', () => {
+    const { getByTestId } = renderWithTheme(ArticleWrapper, articleData)
+    const byline = within(getByTestId('MetaBox'))
+    const authorName = byline.getByText('John Smith')
+    const authorTitle = byline.getByText('John Smith')
+    expect(authorName).toBeInTheDocument()
+    expect(authorTitle).toBeInTheDocument()
+  })
+
+  test('should render published time', () => {
+    articleData.updatedDateTime = undefined
+    const { getByTestId } = renderWithTheme(ArticleWrapper, articleData)
+    const metaBox = within(getByTestId('MetaBox'))
+    const date = metaBox.getByText('Thu February 14 2019, 12:00am')
+    expect(date).toBeInTheDocument()
+  })
+
+  test('should render related topics', () => {
+    const { getByTestId } = renderWithTheme(ArticleWrapper, articleData)
+    const topics = within(getByTestId('RelatedTopics')).getAllByTestId('tag')
+    expect(topics[0].getAttribute('href')).toBe(null)
+    expect(within(topics[0]).getByText('Some topic one')).toBeInTheDocument()
+    expect(topics[1].getAttribute('href')).toBe(null)
+    expect(within(topics[1]).getByText('Some topic one')).toBeInTheDocument()
+    expect(topics[1].getAttribute('href')).toBe(null)
+    expect(within(topics[1]).getByText('Some topic one')).toBeInTheDocument()
+  })
+
+  test('should not render related topics', () => {
+    articleData.topics = undefined
+    const { getByTestId } = renderWithTheme(ArticleWrapper, articleData)
+    expect(() => getByTestId('topics')).toThrow()
+  })
+
+  test('should render highlights panel', () => {
+    const { getByTestId } = renderWithTheme(ArticleWrapper, articleData)
+    const title = within(getByTestId('Highlights')).getAllByText(
+      'Highlights'
+    )[0]
+    const card = within(getByTestId('Highlights')).getAllByTestId(
+      'article-recommendation-small'
+    )[0]
+    expect(title).toBeInTheDocument()
+    expect(card).toBeInTheDocument()
+  })
+
+  test('should render related articles panel', () => {
+    const { getByTestId } = renderWithTheme(ArticleWrapper, articleData)
+    const title = within(getByTestId('RelatedArticles')).getByText('Related')
+    const card = within(getByTestId('RelatedArticles')).getAllByTestId(
+      'article-recommendation-large'
+    )[0]
+
+    expect(title).toBeInTheDocument()
+    expect(card).toBeInTheDocument()
+  })
+
+  test('should render image', () => {
+    const { getByAltText } = renderWithTheme(ArticleWrapper, articleData)
+    const img = getByAltText('testIMG')
+    expect(img.getAttribute('src')).toBe(
+      '/_next/image?url=%2Fimg%2Furl&w=3840&q=75'
+    )
+  })
+
+  test('should not render image', () => {
+    articleData.media = undefined
+    const { getByAltText } = renderWithTheme(ArticleWrapper, articleData)
+    expect(() => getByAltText('testIMG')).toThrow()
+  })
+
+  test('should render paragraphs', () => {
+    const { getByTestId } = renderWithTheme(ArticleWrapper, articleData)
+    const paragraphs = getByTestId('ArticleContent')
+    expect(within(paragraphs).getByText('paragraph one')).toBeInTheDocument()
+    expect(within(paragraphs).getByText('paragraph two')).toBeInTheDocument()
+    expect(within(paragraphs).getByText('paragraph three')).toBeInTheDocument()
+  })
+
+  test('should not render paragraphs', () => {
+    articleData.summary = undefined
+    const { getByTestId } = renderWithTheme(ArticleWrapper, articleData)
+    expect(() =>
+      within(getByTestId('ArticleContent')).getAllByTestId('ArticleParagraph')
+    ).toThrow()
+  })
+
+  test('should render video', () => {
+    const articleWithVideo = {
+      ...articleData,
+      media: {
+        accountId: '5067014667001',
+        videoId: '6288769193001',
+        posterImage: {
+          crops: [
+            {
+              url: 'https://www.thesun.co.uk/wp-content/uploads/2021/12/image-5923b09d66.jpg?strip=all&w=600&h=338&crop=1',
+              alt: null,
+              aspectRatio: null,
+            },
+          ],
+        },
+      },
+    }
+    const { getByTestId } = renderWithTheme(ArticleWrapper, articleWithVideo)
+    const video = getByTestId('bc-video-player')
+    const articleVideo = articleWithVideo?.media as Video
+    expect(video.getAttribute('data-account')).toBe(articleVideo.accountId)
+    expect(video.getAttribute('data-video-id')).toBe(articleVideo.videoId)
+  })
+
+  test('should not render video', () => {
+    articleData.media = undefined
+    const { getByTestId } = renderWithTheme(ArticleWrapper, articleData)
+    expect(() => getByTestId('bc-video-player')).toThrow()
+  })
+})

package/components/article/__tests__/mocks.ts

@@ -0,0 +1,105 @@
+import { DpaTemplate } from '@newskit-render/standalone-components'
+import { ArticleProps } from '..'
+import { Slug, URL } from '../../../helpers/global-types'
+
+export const articleData: ArticleProps = {
+  id: 'demo-1',
+  url: 'https://mock-site-url/some-location' as URL,
+  label: 'Mock label',
+  slug: 'some-location' as Slug,
+  publisher: 'DEMO',
+  headline:
+    'Mock Article: Lorem ipsum dolor sit amet consectetur adipiscing elit',
+  kicker: 'Kicker title',
+  authors: undefined,
+  flags: [],
+  topics: [
+    {
+      name: 'Some topic one',
+      slug: 'some-topic-one',
+      link: undefined,
+    },
+    {
+      name: 'Some topic one',
+      slug: 'some-topic-one',
+      link: undefined,
+    },
+  ],
+  template: undefined,
+  bylines: [
+    {
+      type: 'author',
+      slug: 'mock-author',
+      name: 'John Smith',
+    },
+    {
+      value: 'Еditor, UK',
+      type: 'inline',
+    },
+  ],
+  publishedDateTime: '2019-02-14T00:00:00.000Z',
+  updatedDateTime: '2019-02-14T00:37:17.000Z',
+  summary: {
+    children: [
+      {
+        text: 'paragraph one',
+      },
+      {
+        text: 'paragraph two',
+      },
+      {
+        url: 'http://this-is-a-url/',
+        text: 'paragraph three',
+      },
+      {
+        text: 'paragraph four',
+      },
+    ],
+  },
+  media: {
+    crops: [{ url: '/img/url', alt: 'testIMG', aspectRatio: '1:1' }],
+  },
+  highlights: [
+    {
+      title: 'Test Box',
+      href: 'https://plchldr.co/i/50x50',
+    },
+    {
+      title: 'Prince Harry',
+      href: 'https://plchldr.co/i/50x50',
+    },
+  ],
+  relatedArticles: [
+    {
+      title: 'Prince Harry',
+      text: 'news',
+      href: 'https://plchldr.co/i/70x50',
+    },
+    {
+      title: 'Meghan Markle',
+      text: 'news',
+      href: 'https://plchldr.co/i/70x50',
+    },
+  ],
+  articleURL: 'http://article-url.com',
+  twitterUsername: 'twitterUser',
+  siteHost: 'hostname',
+  gscId: '4320982',
+}
+
+export const dpaTemplatesMock: DpaTemplate = [
+  {
+    templateId: 'list-1',
+    columnCount: '1',
+    size: 'small',
+    recommendedArticles: articleData.relatedArticles,
+    adlibraryMPU: [],
+  },
+  {
+    templateId: 'list-2',
+    columnCount: { xs: '1', sm: '2', lg: '4' },
+    size: 'large',
+    recommendedArticles: articleData.relatedArticles,
+    adlibraryMPU: [],
+  },
+]

package/components/article/index.tsx

@@ -0,0 +1,320 @@
+/* eslint-disable react/no-array-index-key */
+import React from 'react'
+import {
+  Block,
+  Cell,
+  VideoPlayer,
+  Visible,
+  Stack,
+  StackChild,
+  Headline,
+  TextBlock,
+  Divider,
+} from 'newskit'
+import {
+  SEOComponent,
+  Image,
+  getAspectRatio,
+} from '@newskit-render/shared-components'
+import { UserData } from '@newskit-render/my-account'
+import { Article } from '@newskit-render/standalone-components'
+import MetaBoxComponent from './MetaBox'
+import Ad from '../ad'
+import Highlights from './Highlights'
+import RelatedArticles from './RelatedArticles'
+import RelatedTopics from './RelatedTopics'
+import ShareBarComponent from './ShareBarComponent'
+import {
+  URL,
+  Slug,
+  Media,
+  Topic,
+  Byline,
+  ParagraphBlock,
+} from '../../helpers/global-types'
+import ShareButton from '../common/ShareButton'
+import Layout from '../layout'
+import { ratioMap } from '../section/sectionUtils'
+
+export type UniversalArticle = {
+  id: string
+  url?: URL
+  label?: string
+  slug?: Slug
+  publisher?: string
+  headline?: string
+  kicker?: string
+  media?: Media
+  flags?: string[]
+  topics?: Topic[]
+  template?: string
+  authors?: string[]
+  bylines?: Byline[]
+  publishedDateTime?: string
+  updatedDateTime?: string
+  summary?: ParagraphBlock
+  highlights?: {
+    title: string
+    href: string
+  }[]
+  relatedArticles?: {
+    title: string
+    tag: string
+    text: string
+    href: string
+  }[]
+}
+
+export type ArticleProps = {
+  relatedArticles?: Article[]
+  id: string
+  url?: URL
+  label?: string
+  slug?: Slug
+  publisher?: string
+  headline?: string
+  kicker?: string
+  media?: Media
+  flags?: string[]
+  topics?: Topic[]
+  template?: string
+  authors?: string[]
+  bylines?: Byline[]
+  publishedDateTime?: string
+  updatedDateTime?: string
+  summary?: ParagraphBlock
+  articleURL: string
+  twitterUsername?: string
+  siteHost: string
+  gscId?: string
+  user?: UserData
+}
+
+const ArticlePage: React.FC<ArticleProps> = ({
+  publishedDateTime,
+  updatedDateTime,
+  headline,
+  kicker,
+  summary,
+  media,
+  bylines,
+  topics,
+  articleURL,
+  twitterUsername,
+  siteHost,
+  gscId,
+  user,
+}) => {
+  return (
+    <>
+      <SEOComponent
+        title={headline as string}
+        description={(summary ? summary.children[0].text : '') as string}
+        url={articleURL}
+        siteHost={siteHost}
+        gscId={gscId}
+        fbType="article"
+        fbImageUrl={
+          (media && 'crops' in media && media.crops[0]
+            ? media.crops[0].url
+            : '') as string
+        }
+        twUsername={twitterUsername}
+      />
+      <Layout
+        withTopOffset
+        withBottomOffset
+        backgroundColor="interfaceBackground"
+        user={user}
+      >
+        <Cell xs={12} md={10} lg={7} xsOffset={0} mdOffset={1}>
+          <Block marginBlockEnd="space050" data-testid="HeadLine">
+            <Headline
+              overrides={{
+                typographyPreset: {
+                  xs: 'editorialHeadline050',
+                  md: 'editorialHeadline070',
+                  lg: 'editorialHeadline070',
+                  xl: 'editorialHeadline080',
+                },
+                heading: {
+                  stylePreset: 'inkContrast',
+                },
+              }}
+              headingAs="h1"
+            >
+              {headline}
+            </Headline>
+          </Block>
+          <Block marginBlockEnd="space080" data-testid="Kicker">
+            <Headline
+              headingAs="h2"
+              overrides={{
+                typographyPreset: {
+                  xs: 'editorialSubheadline020',
+                  md: 'editorialSubheadline040',
+                  lg: 'editorialSubheadline040',
+                  xl: 'editorialSubheadline050',
+                },
+                heading: {
+                  stylePreset: 'inkBase',
+                },
+              }}
+            >
+              {kicker || 'Kicker title mock'}
+            </Headline>
+          </Block>
+          <Block
+            marginBlockEnd={{
+              xs: 'space040',
+              md: 'space080',
+            }}
+          >
+            <Visible xs sm>
+              <Block
+                marginBlockEnd={{
+                  xs: 'space040',
+                }}
+              >
+                <MetaBoxComponent
+                  bylines={bylines as Byline[]}
+                  publishedDateTime={publishedDateTime as string}
+                  updatedDateTime={updatedDateTime}
+                  topics={topics}
+                />
+              </Block>
+              <Block
+                marginBlockEnd={{
+                  xs: 'space040',
+                }}
+              >
+                <Divider />
+              </Block>
+              <Block marginBlockEnd="space050">
+                <ShareButton />
+              </Block>
+            </Visible>
+            <Visible md lg xl>
+              <Stack
+                flow="horizontal-bottom"
+                stackDistribution="space-between"
+                wrap="nowrap"
+                data-testid="MetaBox"
+              >
+                <MetaBoxComponent
+                  bylines={bylines as Byline[]}
+                  publishedDateTime={publishedDateTime as string}
+                  updatedDateTime={updatedDateTime}
+                  topics={topics}
+                />
+                <StackChild alignSelf="flex-end">
+                  <ShareBarComponent />
+                </StackChild>
+              </Stack>
+            </Visible>
+          </Block>
+          {media && 'crops' in media && (
+            <Block
+              marginBlockEnd={{
+                xs: 'space060',
+                lg: 'space070',
+              }}
+            >
+              <Image
+                aspectRatio={getAspectRatio(
+                  ratioMap[media?.crops[0].aspectRatio]
+                    ? ratioMap[media?.crops[0].aspectRatio]
+                    : media?.crops[0].aspectRatio
+                )}
+                src={media.crops[0].url}
+                alt={media.crops[0].alt}
+              />
+            </Block>
+          )}
+          {media && 'videoId' in media && (
+            <Block
+              marginBlockEnd={{
+                xs: 'space060',
+                lg: 'space070',
+              }}
+            >
+              <VideoPlayer
+                config={{
+                  'data-video-id': media.videoId,
+                  'data-account': media.accountId,
+                  'data-player': 'default',
+                  'data-embed': 'default',
+                  controls: true,
+                }}
+              />
+            </Block>
+          )}
+          <Block
+            marginBlockEnd={{
+              xs: 'space060',
+              md: 'space080',
+              lg: 'space100',
+            }}
+            data-testid="ArticleContent"
+          >
+            {summary &&
+              summary.children.map((p, i) => (
+                <Block
+                  key={i}
+                  marginBlockEnd={{
+                    xs: 'space050',
+                    lg: 'space070',
+                  }}
+                  data-testid="ArticleParagraph"
+                >
+                  <TextBlock
+                    stylePreset="inkContrast"
+                    typographyPreset={{
+                      xs: 'editorialParagraph010',
+                      md: 'editorialParagraph020',
+                      xl: 'editorialParagraph030',
+                    }}
+                  >
+                    {p.text}
+                  </TextBlock>
+                </Block>
+              ))}
+          </Block>
+          <Visible xs sm>
+            <Block marginBlockEnd="space050">
+              <Divider />
+            </Block>
+            <Block marginBlockEnd="space100">
+              <ShareButton />
+            </Block>
+          </Visible>
+          <Visible md lg xl>
+            <Block marginBlockEnd="space050">
+              <Divider />
+            </Block>
+            <Block marginBlockEnd="space100">
+              <Stack
+                flow="horizontal-bottom"
+                stackDistribution="flex-end"
+                wrap="nowrap"
+                spaceInline="space060"
+              >
+                <ShareBarComponent />
+              </Stack>
+            </Block>
+          </Visible>
+          {topics && <RelatedTopics topics={topics} />}
+        </Cell>
+        <Cell xs={12} lg={3} lgOffset={1}>
+          <Ad id="advert-article-sidebar" maxWidth="300px" />
+          <Highlights />
+        </Cell>
+        <Cell xs={12}>
+          <RelatedArticles />
+        </Cell>
+      </Layout>
+    </>
+  )
+}
+
+export default ArticlePage

package/components/common/BackToHomepage.tsx

@@ -0,0 +1,37 @@
+import { BackButton } from '@newskit-render/shared-components'
+import { Block, Divider, Stack, StackChild } from 'newskit'
+import React from 'react'
+
+export const BackToHomepage = () => {
+  return (
+    <>
+      <Block marginBlockEnd="space030">
+        <Divider />
+      </Block>
+
+      <Block marginBlockEnd="space030">
+        <Stack flow="horizontal-center" stackDistribution="center">
+          <StackChild>
+            <BackButton
+              backButton={{
+                text: 'Go back to homepage',
+                href: '/',
+                'aria-label': 'Back to homepage',
+              }}
+              backButtonOverrides={{
+                asLink: true,
+                iconSize: 'iconSize030',
+                paddingInline: 'spaceInsetSquish010',
+                paddingBlock: 'spaceInsetSquish010',
+                typographyPreset: 'utilityButton020',
+              }}
+            />
+          </StackChild>
+        </Stack>
+      </Block>
+      <Block marginBlockEnd="space050">
+        <Divider />
+      </Block>
+    </>
+  )
+}

package/components/common/NavLink.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { NextLink } from '@newskit-render/shared-components'
+
+const NavLink = ({
+  href,
+  ariaLabel,
+  buttonText,
+}: {
+  buttonText: string
+  href: string
+  ariaLabel?: string
+}) => (
+  <NextLink
+    type="standalone"
+    overrides={{
+      typographyPreset: 'utilityMeta020',
+      stylePreset: 'linkStandaloneInverse',
+    }}
+    href={href}
+    aria-label={ariaLabel}
+  >
+    {buttonText}
+  </NextLink>
+)
+
+export default NavLink