@newskit-render/core 2.31.0 → 2.32.0-alpha.0

package/components/footer/index.tsx

@@ -8,8 +8,8 @@ import {
   Paragraph,
   Divider,
   Block,
-  Image,
 } from 'newskit'
+import { Image } from '@newskit-render/shared-components'
 import { MainGrid } from '../layout/MainGrid'
 import NewsKitLogoShort from '../common/NewskitLogoShort'
 import NavLink from '../common/NavLink'
@@ -84,11 +84,7 @@ const Footer = () => {
               <Image
                 alt=""
                 src={`/assets/${clientNavigationLogos[theme.name].src}`}
-                overrides={{
-                  width: clientNavigationLogos[theme.name].width,
-                }}
-                placeholderIcon={true}
-                loading="lazy"
+                width={clientNavigationLogos[theme.name].width}
               />
             )}
           </Block>

package/components/section/layouts/Block.tsx

@@ -42,11 +42,7 @@ export const getBlock = (
         url={teaserURL(
           ('article' in sliceBlock && sliceBlock.article) as ArticleTeaser
         )}
-        media={{
-          ...getMedia(media as Media),
-          placeholderIcon: true,
-          loading: 'lazy',
-        }}
+        media={getMedia(media as Media)}
         title={headline as string}
         teaser={teaserSummary(summary as TeaserSummary)}
       />

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

@@ -16,15 +16,22 @@ exports[`Lead should render Lead 1`] = `
         <div
           class="css-x4egtb"
         >
-          <picture
-            class="css-vl2swp"
+          <figure
+            class="css-439ral"
           >
             <img
               alt=""
-              class="css-ssxt4f"
+              data-nimg="fill"
+              decoding="async"
               loading="lazy"
+              sizes="(max-width: 768px) 100vw,
+              (max-width: 1200px) 50vw,
+              33vw"
+              src="/_next/image?url=%2Fassets%2Fplchldr150x100.png&w=3840&q=75"
+              srcset="/_next/image?url=%2Fassets%2Fplchldr150x100.png&w=256&q=75 256w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=384&q=75 384w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=640&q=75 640w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=750&q=75 750w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=828&q=75 828w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=1080&q=75 1080w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=1200&q=75 1200w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=1920&q=75 1920w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=2048&q=75 2048w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=3840&q=75 3840w"
+              style="position: absolute; height: 100%; width: 100%; left: 0px; top: 0px; right: 0px; bottom: 0px; object-fit: contain; color: transparent; background-size: contain; background-position: 50% 50%; background-repeat: no-repeat;"
             />
-          </picture>
+          </figure>
         </div>
         <div
           class="css-1shocxe"
@@ -67,15 +74,22 @@ exports[`Lead should render Lead 1`] = `
           <div
             class="css-1rsw0n0"
           >
-            <picture
-              class="css-vl2swp"
+            <figure
+              class="css-439ral"
             >
               <img
                 alt=""
-                class="css-ssxt4f"
+                data-nimg="fill"
+                decoding="async"
                 loading="lazy"
+                sizes="(max-width: 768px) 100vw,
+              (max-width: 1200px) 50vw,
+              33vw"
+                src="/_next/image?url=%2Fassets%2Fplchldr150x100.png&w=3840&q=75"
+                srcset="/_next/image?url=%2Fassets%2Fplchldr150x100.png&w=256&q=75 256w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=384&q=75 384w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=640&q=75 640w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=750&q=75 750w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=828&q=75 828w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=1080&q=75 1080w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=1200&q=75 1200w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=1920&q=75 1920w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=2048&q=75 2048w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=3840&q=75 3840w"
+                style="position: absolute; height: 100%; width: 100%; left: 0px; top: 0px; right: 0px; bottom: 0px; object-fit: contain; color: transparent; background-size: contain; background-position: 50% 50%; background-repeat: no-repeat;"
               />
-            </picture>
+            </figure>
           </div>
           <div
             class="css-1r2lt0d"
@@ -115,15 +129,22 @@ exports[`Lead should render Lead 1`] = `
           <div
             class="css-1rsw0n0"
           >
-            <picture
-              class="css-vl2swp"
+            <figure
+              class="css-439ral"
             >
               <img
                 alt=""
-                class="css-ssxt4f"
+                data-nimg="fill"
+                decoding="async"
                 loading="lazy"
+                sizes="(max-width: 768px) 100vw,
+              (max-width: 1200px) 50vw,
+              33vw"
+                src="/_next/image?url=%2Fassets%2Fplchldr150x100.png&w=3840&q=75"
+                srcset="/_next/image?url=%2Fassets%2Fplchldr150x100.png&w=256&q=75 256w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=384&q=75 384w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=640&q=75 640w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=750&q=75 750w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=828&q=75 828w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=1080&q=75 1080w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=1200&q=75 1200w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=1920&q=75 1920w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=2048&q=75 2048w, /_next/image?url=%2Fassets%2Fplchldr150x100.png&w=3840&q=75 3840w"
+                style="position: absolute; height: 100%; width: 100%; left: 0px; top: 0px; right: 0px; bottom: 0px; object-fit: contain; color: transparent; background-size: contain; background-position: 50% 50%; background-repeat: no-repeat;"
               />
-            </picture>
+            </figure>
           </div>
           <div
             class="css-1r2lt0d"

package/components/teaser/index.test.tsx

@@ -12,35 +12,37 @@ describe('Teaser', () => {
     teaser:
       'Et libero, congue at condimentum. Id lobortis urna consectetur a, scelerisque lorem amet, magnis fringilla.',
   })
+  const imageBase64 =
+    '/_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F288x192%3Fbg%3DF0F0F0%26fc%3D111111%26text%3Dimg&w=3840&q=75'
 
-  test('titleTeaserVertical', () => {
+  it('titleTeaserVertical', () => {
     const teaserData = getTeaserData('titleTeaserVertical')
     const { getByText, getByAltText } = renderWithTheme(Teaser, teaserData)
     expect(getByAltText(teaserData.media.alt as string)).toHaveAttribute(
       'src',
-      teaserData.media.src
+      imageBase64
     )
     expect(getByText(teaserData.title)).toBeInTheDocument()
     expect(getByText(teaserData.teaser as string)).toBeInTheDocument()
   })
 
-  test('titleVertical', () => {
+  it('titleVertical', () => {
     const teaserData = getTeaserData('titleVertical')
     const { queryByText, getByAltText } = renderWithTheme(Teaser, teaserData)
     expect(getByAltText(teaserData.media.alt as string)).toHaveAttribute(
       'src',
-      teaserData.media.src
+      imageBase64
     )
     expect(queryByText(teaserData.title)).toBeInTheDocument()
     expect(queryByText(teaserData.teaser as string)).not.toBeInTheDocument()
   })
 
-  test('featureVertical', () => {
+  it('featureVertical', () => {
     const teaserData = getTeaserData('titleTeaserVertical')
     const { getByText, getByAltText } = renderWithTheme(Teaser, teaserData)
     expect(getByAltText(teaserData.media.alt as string)).toHaveAttribute(
       'src',
-      teaserData.media.src
+      imageBase64
     )
     expect(getByText(teaserData.title)).toBeInTheDocument()
     expect(getByText(teaserData.teaser as string)).toBeInTheDocument()

package/components/teaser/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { Card, Block, TextBlock, ImageProps, Headline } from 'newskit'
+import { Card, Block, TextBlock, Headline } from 'newskit'
+import { Image, getAspectRatio } from '@newskit-render/shared-components'
 import teaserVariants, { VariantsName } from './teaserVariants'
 
 export interface TeaserProps {
@@ -7,7 +8,11 @@ export interface TeaserProps {
   url?: string
   title: string
   teaser?: string
-  media: ImageProps
+  media: {
+    src: string
+    alt?: string
+    loadingAspectRatio?: string
+  }
 }
 
 const Teaser: React.FC<TeaserProps> = ({
@@ -18,15 +23,18 @@ const Teaser: React.FC<TeaserProps> = ({
   media,
 }) => {
   const presets = teaserVariants[variant]
+
   return (
     <Card
       layout={presets.layout}
       href={url}
-      media={{
-        ...presets.media,
-        ...media,
-        loadingAspectRatio: media?.loadingAspectRatio,
-      }}
+      media={() => (
+        <Image
+          aspectRatio={getAspectRatio(media.loadingAspectRatio)}
+          src={media.src}
+          alt={media.alt}
+        />
+      )}
       overrides={presets.card}
     >
       <Block spaceStack={presets.title.spaceStack}>

package/jest.config.js

@@ -30,11 +30,10 @@ const customJestConfig = {
   testPathIgnorePatterns: [
     '<rootDir>/cypress/',
     '<rootDir>/node_modules/',
-    '<rootDir>/.next/'
+    '<rootDir>/.next/',
   ],
-  coveragePathIgnorePatterns: [
-    '<rootDir>/config/environment.ts'
-  ]
+  coveragePathIgnorePatterns: ['<rootDir>/config/environment.ts'],
+  testMatch: ['**/?(*.)+(test).[jt]s?(x)'],
 }
 
 // createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async

package/next.config.js

@@ -1,63 +1,89 @@
 /* eslint-disable no-param-reassign */
-const path = require('path')
-const withTM = require('next-transpile-modules')([
-  '@newskit-render/auth',
-  '@newskit-render/my-account',
-  '@newskit-render/validation',
-])
-const withBundleAnalyzer = require('@next/bundle-analyzer')({
-  enabled: process.env.ANALYZE === 'true',
-})
+const { PHASE_PRODUCTION_SERVER } = require('next/constants')
 
-module.exports = withBundleAnalyzer(
-  withTM({
-    webpack: (config, options) => {
-      if (options.isServer) {
-        config.externals = ['react', ...config.externals]
-      }
+module.exports = (phase) => {
+  const images = {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'www.thesun.co.uk',
+        pathname: '/wp-content/**',
+      },
+      {
+        protocol: 'https',
+        hostname: 'www.plchldr.co',
+        pathname: '/**',
+      },
+    ],
+  }
 
-      config.resolve.alias.newskit = path.resolve(
-        __dirname,
-        '.',
-        'node_modules',
-        'newskit'
-      )
-      config.resolve.alias.react = path.resolve(
-        __dirname,
-        '.',
-        'node_modules',
-        'react'
-      )
+  if (phase === PHASE_PRODUCTION_SERVER) {
+    return {
+      images,
+    }
+  }
 
-      return config
-    },
-    async rewrites() {
-      return [
-        {
-          source: '/sitemap.xml',
-          destination: '/api/sitemap',
-        },
-        {
-          source: '/pages-sitemap.xml',
-          destination: '/api/pages-sitemap',
-        },
-        {
-          source: '/competitions-sitemap.xml',
-          destination: '/api/competitions-sitemap',
-        },
-        {
-          source: '/news-sitemap.xml',
-          destination: '/api/news-sitemap',
-        },
-        {
-          source: '/feed',
-          destination: '/api/feed',
-        },
-        {
-          source: '/robots.txt',
-          destination: '/api/robots',
-        },
-      ]
-    },
+  const path = require('path')
+  const withTM = require('next-transpile-modules')([
+    '@newskit-render/auth',
+    '@newskit-render/my-account',
+    '@newskit-render/validation',
+  ])
+  const withBundleAnalyzer = require('@next/bundle-analyzer')({
+    enabled: process.env.ANALYZE === 'true',
   })
-)
+
+  return withBundleAnalyzer(
+    withTM({
+      webpack: (config, options) => {
+        if (options.isServer) {
+          config.externals = ['react', ...config.externals]
+        }
+
+        config.resolve.alias.newskit = path.resolve(
+          __dirname,
+          '.',
+          'node_modules',
+          'newskit'
+        )
+        config.resolve.alias.react = path.resolve(
+          __dirname,
+          '.',
+          'node_modules',
+          'react'
+        )
+
+        return config
+      },
+      images,
+      async rewrites() {
+        return [
+          {
+            source: '/sitemap.xml',
+            destination: '/api/sitemap',
+          },
+          {
+            source: '/pages-sitemap.xml',
+            destination: '/api/pages-sitemap',
+          },
+          {
+            source: '/competitions-sitemap.xml',
+            destination: '/api/competitions-sitemap',
+          },
+          {
+            source: '/news-sitemap.xml',
+            destination: '/api/news-sitemap',
+          },
+          {
+            source: '/feed',
+            destination: '/api/feed',
+          },
+          {
+            source: '/robots.txt',
+            destination: '/api/robots',
+          },
+        ]
+      },
+    })
+  )
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newskit-render/core",
-  "version": "2.31.0",
+  "version": "2.32.0-alpha.0",
   "description": "Newskit Render - Core package",
   "author": "",
   "license": "UNLICENSED",
@@ -40,12 +40,12 @@
     "@emotion/styled": "11.10.4",
     "@newskit-render/api": "^1.5.3",
     "@newskit-render/auth": "^1.3.3",
-    "@newskit-render/checkout": "^1.8.7",
+    "@newskit-render/checkout": "^1.9.0-alpha.0",
     "@newskit-render/feature-flags": "^1.4.3",
     "@newskit-render/feed": "^1.4.5",
-    "@newskit-render/my-account": "^3.22.10",
-    "@newskit-render/shared-components": "^1.23.0",
-    "@newskit-render/standalone-components": "^1.14.7",
+    "@newskit-render/my-account": "^3.23.0-alpha.0",
+    "@newskit-render/shared-components": "^1.24.0-alpha.0",
+    "@newskit-render/standalone-components": "^1.15.0-alpha.0",
     "@newskit-render/validation": "^1.5.4",
     "cross-fetch": "3.1.5",
     "graphql": "15.6.0",