@newskit-render/core 2.31.0 → 2.32.0

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

@@ -1,114 +1,10 @@
 import React from 'react'
-import {
-  ArticleRecommendationsProviderContext,
-  DpaTemplate,
-} from '@newskit-render/standalone-components'
+import { ArticleRecommendationsProviderContext } from '@newskit-render/standalone-components'
 import { within } from '@testing-library/react'
-import Article, { ArticleProps } from '..'
-import { Slug, URL, Image, Video } from '../../../helpers/global-types'
+import Article from '..'
+import { Video } from '../../../helpers/global-types'
 import { renderWithTheme } from '../../../helpers/test-utils'
-
-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',
-}
-
-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: [],
-  },
-]
+import { dpaTemplatesMock, articleData } from './mocks'
 
 const ArticleWrapper = (props) => (
   <ArticleRecommendationsProviderContext.Provider
@@ -216,8 +112,9 @@ describe('Article', () => {
   test('should render image', () => {
     const { getByAltText } = renderWithTheme(ArticleWrapper, articleData)
     const img = getByAltText('testIMG')
-    const articleImage = articleData?.media as Image
-    expect(img.getAttribute('src')).toBe(articleImage.crops[0].url)
+    expect(img.getAttribute('src')).toBe(
+      '/_next/image?url=%2Fimg%2Furl&w=3840&q=75'
+    )
   })
 
   test('should not render image', () => {

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

@@ -3,17 +3,19 @@ import React from 'react'
 import {
   Block,
   Cell,
-  Image,
   VideoPlayer,
   Visible,
   Stack,
-  styled,
   StackChild,
   Headline,
   TextBlock,
   Divider,
 } from 'newskit'
-import { SEOComponent } from '@newskit-render/shared-components'
+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'
@@ -88,10 +90,6 @@ export type ArticleProps = {
   user?: UserData
 }
 
-const StyledFigure = styled.figure`
-  margin: 0;
-`
-
 const ArticlePage: React.FC<ArticleProps> = ({
   publishedDateTime,
   updatedDateTime,
@@ -106,219 +104,217 @@ const ArticlePage: React.FC<ArticleProps> = ({
   siteHost,
   gscId,
   user,
-}) => (
-  <>
-    <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 spaceStack="space050" data-testid="HeadLine">
-          <Headline
-            overrides={{
-              typographyPreset: {
-                xs: 'editorialHeadline050',
-                md: 'editorialHeadline070',
-                lg: 'editorialHeadline070',
-                xl: 'editorialHeadline080',
-              },
-              heading: {
-                stylePreset: 'inkContrast',
-              },
-            }}
-            headingAs="h1"
-          >
-            {headline}
-          </Headline>
-        </Block>
-        <Block spaceStack="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
-          spaceStack={{
-            xs: 'space040',
-            md: 'space080',
-          }}
-        >
-          <Visible xs sm>
-            <Block
-              spaceStack={{
-                xs: 'space040',
+}) => {
+  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 spaceStack="space050" data-testid="HeadLine">
+            <Headline
+              overrides={{
+                typographyPreset: {
+                  xs: 'editorialHeadline050',
+                  md: 'editorialHeadline070',
+                  lg: 'editorialHeadline070',
+                  xl: 'editorialHeadline080',
+                },
+                heading: {
+                  stylePreset: 'inkContrast',
+                },
               }}
+              headingAs="h1"
             >
-              <MetaBoxComponent
-                bylines={bylines as Byline[]}
-                publishedDateTime={publishedDateTime as string}
-                updatedDateTime={updatedDateTime}
-                topics={topics}
-              />
-            </Block>
-            <Block
-              spaceStack={{
-                xs: 'space040',
+              {headline}
+            </Headline>
+          </Block>
+          <Block spaceStack="space080" data-testid="Kicker">
+            <Headline
+              headingAs="h2"
+              overrides={{
+                typographyPreset: {
+                  xs: 'editorialSubheadline020',
+                  md: 'editorialSubheadline040',
+                  lg: 'editorialSubheadline040',
+                  xl: 'editorialSubheadline050',
+                },
+                heading: {
+                  stylePreset: 'inkBase',
+                },
               }}
             >
-              <Divider />
-            </Block>
-            <Block spaceStack="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 && (
+              {kicker || 'Kicker title mock'}
+            </Headline>
+          </Block>
           <Block
             spaceStack={{
-              xs: 'space060',
-              lg: 'space070',
+              xs: 'space040',
+              md: 'space080',
             }}
           >
-            <StyledFigure>
+            <Visible xs sm>
+              <Block
+                spaceStack={{
+                  xs: 'space040',
+                }}
+              >
+                <MetaBoxComponent
+                  bylines={bylines as Byline[]}
+                  publishedDateTime={publishedDateTime as string}
+                  updatedDateTime={updatedDateTime}
+                  topics={topics}
+                />
+              </Block>
+              <Block
+                spaceStack={{
+                  xs: 'space040',
+                }}
+              >
+                <Divider />
+              </Block>
+              <Block spaceStack="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
+              spaceStack={{
+                xs: 'space060',
+                lg: 'space070',
+              }}
+            >
               <Image
-                src={media.crops[0].url}
-                alt={media.crops[0].alt}
-                placeholderIcon={true}
-                loading="lazy"
-                loadingAspectRatio={
+                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}
               />
-            </StyledFigure>
-          </Block>
-        )}
-        {media && 'videoId' in media && (
+            </Block>
+          )}
+          {media && 'videoId' in media && (
+            <Block
+              spaceStack={{
+                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
             spaceStack={{
               xs: 'space060',
-              lg: 'space070',
+              md: 'space080',
+              lg: 'space100',
             }}
+            data-testid="ArticleContent"
           >
-            <VideoPlayer
-              config={{
-                'data-video-id': media.videoId,
-                'data-account': media.accountId,
-                'data-player': 'default',
-                'data-embed': 'default',
-                controls: true,
-              }}
-            />
-          </Block>
-        )}
-        <Block
-          spaceStack={{
-            xs: 'space060',
-            md: 'space080',
-            lg: 'space100',
-          }}
-          data-testid="ArticleContent"
-        >
-          {summary &&
-            summary.children.map((p, i) => (
-              <Block
-                key={i}
-                spaceStack={{
-                  xs: 'space050',
-                  lg: 'space070',
-                }}
-                data-testid="ArticleParagraph"
-              >
-                <TextBlock
-                  stylePreset="inkContrast"
-                  typographyPreset={{
-                    xs: 'editorialParagraph010',
-                    md: 'editorialParagraph020',
-                    xl: 'editorialParagraph030',
+            {summary &&
+              summary.children.map((p, i) => (
+                <Block
+                  key={i}
+                  spaceStack={{
+                    xs: 'space050',
+                    lg: 'space070',
                   }}
+                  data-testid="ArticleParagraph"
                 >
-                  {p.text}
-                </TextBlock>
-              </Block>
-            ))}
-        </Block>
-        <Visible xs sm>
-          <Block spaceStack="space050">
-            <Divider />
-          </Block>
-          <Block spaceStack="space100">
-            <ShareButton />
-          </Block>
-        </Visible>
-        <Visible md lg xl>
-          <Block spaceStack="space050">
-            <Divider />
+                  <TextBlock
+                    stylePreset="inkContrast"
+                    typographyPreset={{
+                      xs: 'editorialParagraph010',
+                      md: 'editorialParagraph020',
+                      xl: 'editorialParagraph030',
+                    }}
+                  >
+                    {p.text}
+                  </TextBlock>
+                </Block>
+              ))}
           </Block>
-          <Block spaceStack="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>
-  </>
-)
+          <Visible xs sm>
+            <Block spaceStack="space050">
+              <Divider />
+            </Block>
+            <Block spaceStack="space100">
+              <ShareButton />
+            </Block>
+          </Visible>
+          <Visible md lg xl>
+            <Block spaceStack="space050">
+              <Divider />
+            </Block>
+            <Block spaceStack="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