@newskit-render/core 1.90.1 → 1.91.0-alpha.0

package/components/article/index.tsx

@@ -7,7 +7,6 @@ import {
   VideoPlayer,
   Visible,
   Stack,
-  AlignSelfValues,
   styled,
   StackChild,
   Headline,
@@ -221,7 +220,7 @@ const ArticlePage: React.FC<ArticleProps> = ({
                 updatedDateTime={updatedDateTime}
                 topics={topics}
               />
-              <StackChild alignSelf={AlignSelfValues.FlexEnd}>
+              <StackChild alignSelf="flex-end">
                 <ShareBarComponent />
               </StackChild>
             </Stack>
@@ -303,7 +302,7 @@ const ArticlePage: React.FC<ArticleProps> = ({
           <Block spaceStack="space100">
             <Stack
               flow="horizontal-bottom"
-              stackDistribution={AlignSelfValues.FlexEnd}
+              stackDistribution="flex-end"
               wrap="nowrap"
               spaceInline="space060"
             >

package/components/common/ShareButton.tsx

@@ -1,5 +1,9 @@
 import React from 'react'
-import { Button, IconFilledShare } from 'newskit'
+import { Button, toNewsKitIcon } from 'newskit'
+
+import { Share as FilledShare } from '@emotion-icons/material/Share'
+
+const IconFilledShare = toNewsKitIcon(FilledShare)
 
 const ShareButton = () => (
   <Button

package/components/common/ViewMoreButton.tsx

@@ -1,5 +1,9 @@
 import React from 'react'
-import { Button, IconFilledChevronRight } from 'newskit'
+import { Button, toNewsKitIcon } from 'newskit'
+
+import { ChevronRight as FilledChevronRight } from '@emotion-icons/material/ChevronRight'
+
+const IconFilledChevronRight = toNewsKitIcon(FilledChevronRight)
 
 const ViewMoreButton: React.FC<{ href: string }> = ({ href }) => (
   <Button

package/components/common/icons/IconFilledTwitter.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { Svg, customToNewsKitIcon } from 'newskit'
+
+export const IconFilledTwitter = customToNewsKitIcon(
+  'IconFilledTwitter',
+  (props) => (
+    <Svg {...props} viewBox="0 0 24 24">
+      <path
+        fillRule="nonzero"
+        d="M8.28984,21 C15.83736,21 19.96472,14.4602319 19.96472,8.78946539 C19.96472,8.60363327 19.96112,8.41863784 19.95296,8.23464647 C20.75408,7.62895589 21.45056,6.87316048 22,6.01260963 C21.26472,6.35415252 20.47352,6.58441367 19.64352,6.68816506 C20.49072,6.15702487 21.14112,5.31630393 21.44784,4.31426631 C20.65488,4.80583036 19.77704,5.1633543 18.8424,5.35588007 C18.09368,4.52176909 17.02728,4 15.84728,4 C13.58104,4 11.74336,5.92199451 11.74336,8.29129138 C11.74336,8.62814872 11.77944,8.95555129 11.84976,9.2698176 C8.4396,9.09051177 5.4156,7.38271368 3.392,4.78600045 C3.03928,5.42005532 2.83632,6.15702487 2.83632,6.94294166 C2.83632,8.43194145 3.56072,9.74632096 4.66224,10.5152526 C3.98928,10.493582 3.35688,10.3001358 2.80384,9.97833919 C2.80288,9.99624467 2.80288,10.0142338 2.80288,10.0330597 C2.80288,12.111769 4.21752,13.8469273 6.09488,14.2404296 C5.75032,14.3384914 5.3876,14.3913711 5.0132,14.3913711 C4.74888,14.3913711 4.49176,14.3640109 4.24184,14.3139759 C4.76424,16.0190129 6.27896,17.2597624 8.07512,17.2947366 C6.67048,18.4457914 4.90136,19.1317219 2.97888,19.1317219 C2.64776,19.1317219 2.3212,19.1119757 2,19.0723159 C3.81608,20.2894703 5.97224,21 8.28984,21"
+      />
+    </Svg>
+  )
+)

package/components/common/icons/StyledIconFilledChevronRight.tsx

@@ -1,4 +1,8 @@
-import { IconFilledChevronRight, styled } from 'newskit'
+import { styled, toNewsKitIcon } from 'newskit'
+
+import { ChevronRight as FilledChevronRight } from '@emotion-icons/material/ChevronRight'
+
+const IconFilledChevronRight = toNewsKitIcon(FilledChevronRight)
 
 const StyledIconFilledChevronRight = styled(IconFilledChevronRight)`
   top: 1px;

package/components/footer/__snapshots__/index.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Footer tests should render footer 1`] = `
 <DocumentFragment>
   <div
-    class="css-1p8e12n"
+    class="css-sxhtf1"
   >
     <div
       class="css-8atxkm"
@@ -67,7 +67,7 @@ exports[`Footer tests should render footer 1`] = `
                   class="css-17x5lw"
                 >
                   <span
-                    class="css-kxo08d"
+                    class="css-yk25sg"
                   >
                     NavLink One
                   </span>
@@ -86,7 +86,7 @@ exports[`Footer tests should render footer 1`] = `
                   class="css-17x5lw"
                 >
                   <span
-                    class="css-kxo08d"
+                    class="css-yk25sg"
                   >
                     NavLink Two
                   </span>
@@ -105,7 +105,7 @@ exports[`Footer tests should render footer 1`] = `
                   class="css-17x5lw"
                 >
                   <span
-                    class="css-kxo08d"
+                    class="css-yk25sg"
                   >
                     NavLink Three
                   </span>
@@ -124,7 +124,7 @@ exports[`Footer tests should render footer 1`] = `
                   class="css-17x5lw"
                 >
                   <span
-                    class="css-kxo08d"
+                    class="css-yk25sg"
                   >
                     NavLink Four
                   </span>
@@ -143,7 +143,7 @@ exports[`Footer tests should render footer 1`] = `
                   class="css-17x5lw"
                 >
                   <span
-                    class="css-kxo08d"
+                    class="css-yk25sg"
                   >
                     NavLink Five
                   </span>
@@ -162,7 +162,7 @@ exports[`Footer tests should render footer 1`] = `
                   class="css-17x5lw"
                 >
                   <span
-                    class="css-kxo08d"
+                    class="css-yk25sg"
                   >
                     NavLink Six
                   </span>
@@ -180,7 +180,7 @@ exports[`Footer tests should render footer 1`] = `
             />
           </div>
           <p
-            class="css-1m5hsr4"
+            class="css-tiln3q"
           >
             Copyright © YYYY News Corp. All rights reserved.
           </p>

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

@@ -11,7 +11,7 @@ exports[`Lead should render Lead 1`] = `
       data-testid="featureVerticalCell"
     >
       <div
-        class="css-1opc7jp"
+        class="css-1v4r5rv"
       >
         <div
           class="css-x4egtb"
@@ -36,14 +36,14 @@ exports[`Lead should render Lead 1`] = `
               class="css-7q4xyp"
             >
               <a
-                class="nk-card-link css-1cq1vxv"
+                class="nk-card-link css-j3tblu"
                 href="catagory-one/demo-1/test-headline"
               >
                 <section
-                  class="css-kxmtg8"
+                  class="css-1jxtwhc"
                 >
                   <h3
-                    class="nk-headline-heading css-10swdqn"
+                    class="nk-headline-heading css-l6hs79"
                   >
                     test headline
                   </h3>
@@ -62,7 +62,7 @@ exports[`Lead should render Lead 1`] = `
         data-testid="titleVerticalCell-0"
       >
         <div
-          class="css-6c0oh5"
+          class="css-1z995g"
         >
           <div
             class="css-1rsw0n0"
@@ -87,14 +87,14 @@ exports[`Lead should render Lead 1`] = `
                 class="css-165k7dq"
               >
                 <a
-                  class="nk-card-link css-1cq1vxv"
+                  class="nk-card-link css-j3tblu"
                   href="catagory-two/demo-2/test-headline-2"
                 >
                   <section
-                    class="css-75k513"
+                    class="css-4kc5mr"
                   >
                     <h3
-                      class="nk-headline-heading css-10swdqn"
+                      class="nk-headline-heading css-l6hs79"
                     >
                       test headline 2
                     </h3>
@@ -110,7 +110,7 @@ exports[`Lead should render Lead 1`] = `
         data-testid="titleVerticalCell-1"
       >
         <div
-          class="css-6c0oh5"
+          class="css-1z995g"
         >
           <div
             class="css-1rsw0n0"
@@ -135,14 +135,14 @@ exports[`Lead should render Lead 1`] = `
                 class="css-165k7dq"
               >
                 <a
-                  class="nk-card-link css-1cq1vxv"
+                  class="nk-card-link css-j3tblu"
                   href="catagory-three/demo-3/test-headline-3"
                 >
                   <section
-                    class="css-75k513"
+                    class="css-4kc5mr"
                   >
                     <h3
-                      class="nk-headline-heading css-10swdqn"
+                      class="nk-headline-heading css-l6hs79"
                     >
                       test headline 3
                     </h3>

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

@@ -13,10 +13,10 @@ exports[`SectionTitle SectionTitle alternative titlebar 1`] = `
         class="css-krscqv"
       >
         <section
-          class="css-148i9wz"
+          class="css-3bvy7k"
         >
           <h3
-            class="nk-headline-heading css-5gd387"
+            class="nk-headline-heading css-b3iww6"
           >
             Section 1
           </h3>
@@ -26,7 +26,7 @@ exports[`SectionTitle SectionTitle alternative titlebar 1`] = `
         class="css-1h0bvuz"
       >
         <a
-          class="css-89h75s"
+          class="css-3gj75m"
           href="/section-one"
         >
           <span
@@ -36,7 +36,7 @@ exports[`SectionTitle SectionTitle alternative titlebar 1`] = `
               class="css-1o99qvy"
             >
               <span
-                class="css-1golznc"
+                class="css-14vfegn"
               >
                 Link
               </span>
@@ -46,9 +46,10 @@ exports[`SectionTitle SectionTitle alternative titlebar 1`] = `
             >
               <svg
                 aria-hidden="true"
-                class="css-eagdbz-EmotionIconBase ex0cdmw0"
+                class="css-19o8to0-EmotionIconBase ex0cdmw0"
                 fill="currentColor"
                 focusable="false"
+                overrides="[object Object]"
                 viewBox="0 0 24 24"
                 xmlns="http://www.w3.org/2000/svg"
               >
@@ -82,7 +83,7 @@ exports[`SectionTitle SectionTitle with title 1`] = `
         class="css-krscqv"
       >
         <section
-          class="css-148i9wz"
+          class="css-3bvy7k"
         >
           <h3
             class="nk-headline-heading css-4eltk5"
@@ -105,7 +106,7 @@ exports[`SectionTitle SectionTitle with title 1`] = `
               class="css-1o99qvy"
             >
               <span
-                class="css-1golznc"
+                class="css-14vfegn"
               >
                 Link
               </span>
@@ -115,9 +116,10 @@ exports[`SectionTitle SectionTitle with title 1`] = `
             >
               <svg
                 aria-hidden="true"
-                class="css-eagdbz-EmotionIconBase ex0cdmw0"
+                class="css-19o8to0-EmotionIconBase ex0cdmw0"
                 fill="currentColor"
                 focusable="false"
+                overrides="[object Object]"
                 viewBox="0 0 24 24"
                 xmlns="http://www.w3.org/2000/svg"
               >
@@ -146,7 +148,7 @@ exports[`SectionTitle SectionTitle without extra space 1`] = `
   >
     <hr
       aria-hidden="true"
-      class="css-mnhrmv"
+      class="css-90bet9"
       data-testid="divider"
     />
   </div>
@@ -161,7 +163,7 @@ exports[`SectionTitle SectionTitle without extra space 1`] = `
         class="css-krscqv"
       >
         <section
-          class="css-148i9wz"
+          class="css-3bvy7k"
         >
           <h3
             class="nk-headline-heading css-4eltk5"
@@ -184,7 +186,7 @@ exports[`SectionTitle SectionTitle without extra space 1`] = `
               class="css-1o99qvy"
             >
               <span
-                class="css-1golznc"
+                class="css-14vfegn"
               >
                 Link
               </span>
@@ -194,9 +196,10 @@ exports[`SectionTitle SectionTitle without extra space 1`] = `
             >
               <svg
                 aria-hidden="true"
-                class="css-eagdbz-EmotionIconBase ex0cdmw0"
+                class="css-19o8to0-EmotionIconBase ex0cdmw0"
                 fill="currentColor"
                 focusable="false"
+                overrides="[object Object]"
                 viewBox="0 0 24 24"
                 xmlns="http://www.w3.org/2000/svg"
               >

package/context/multi-tenancy/index.tsx

@@ -4,6 +4,7 @@ import { Publisher } from '@newskit-render/api'
 import { translationsMap } from '../../config'
 
 export interface MultiTenancyContextProps {
+  children?: React.ReactNode
   tenant?: Publisher
   getTenantString?: (key: string, defaultValue?: string) => string
 }

package/cypress/e2e/account/payment-failer.spec.js

@@ -81,6 +81,9 @@ describe('Payment Failer', () => {
         })
       },
     })
+    Cypress.on('uncaught:exception', (err, runnable) => {
+      return false
+    })
     cy.contains('You’ve previously had a subscription that has now expired')
 
     cy.contains(

package/cypress/support/commands.js

@@ -99,5 +99,8 @@ Cypress.Commands.add(
         })
       },
     })
-  }
+  },
+  Cypress.on('uncaught:exception', (err, runnable) => {
+    return false
+  })
 )

package/helpers/__tests__/getRecommendation.test.ts

@@ -2,16 +2,6 @@ import { Publisher } from '@newskit-render/api'
 import { getRecommendations, fetcher } from '../getRecommendations'
 import { recomendationsMock } from '../mocks/getRecommendationsMock'
 
-jest.mock('../getRecommendations', () => {
-  return {
-    fetcher: jest.fn().mockImplementationOnce(() => {
-      return recomendationsMock
-    }),
-    getRecommendations: jest.fn().mockImplementationOnce(() => {
-      return recomendationsMock
-    }),
-  }
-})
 jest.mock('@newskit-render/standalone-components', () => {
   return {
     recommendationsProvider: jest.fn().mockResolvedValueOnce([
@@ -54,10 +44,18 @@ describe('getRecommendations function', () => {
 })
 describe('fetcher function', () => {
   it('should retun json object', async () => {
+    global.fetch = jest.fn().mockImplementation(() => {
+      return {
+        json: () => recomendationsMock,
+      }
+    })
     const result = await fetcher({
       url: 'http://localhost:3000',
       args: { articleId: 'test-2' },
     })
     expect(result).toEqual(recomendationsMock)
+    // @ts-ignore
+    global.fetch.mockClear()
+    delete global.fetch
   })
 })

package/helpers/mocks/getRecommendationsMock.ts

@@ -20,6 +20,6 @@ export const recomendationsMock = [
     tag: 'TOUGH TIMES',
     text:
       'I only made £5k last year - I sold £801k villa for cash, says Claire Sweeney',
-    title: 'TOUGH TIME',
+    title: 'TOUGH TIMES',
   },
 ]

package/jest.config.js

@@ -32,6 +32,9 @@ const customJestConfig = {
     '<rootDir>/node_modules/',
     '<rootDir>/.next/'
   ],
+  coveragePathIgnorePatterns: [
+    '<rootDir>/config/environment.ts'
+  ]
 }
 
 // createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newskit-render/core",
-  "version": "1.90.1",
+  "version": "1.91.0-alpha.0",
   "description": "Newskit Render - Core package",
   "author": "",
   "license": "UNLICENSED",
@@ -34,23 +34,27 @@
   },
   "dependencies": {
     "@apollo/client": "3.4.16",
-    "@newskit-render/api": "^0.37.1",
-    "@newskit-render/auth": "^0.45.1",
-    "@newskit-render/checkout": "^0.54.10",
-    "@newskit-render/feature-flags": "^0.25.1",
-    "@newskit-render/feed": "^0.27.1",
-    "@newskit-render/my-account": "^2.9.1",
-    "@newskit-render/shared-components": "^0.74.0",
-    "@newskit-render/standalone-components": "^0.36.1",
-    "@newskit-render/validation": "^0.54.0",
+    "@emotion-icons/material": "3.14.0",
+    "@emotion-icons/material-outlined": "3.14.0",
+    "@emotion/react": "11.10.4",
+    "@emotion/styled": "11.10.4",
+    "@newskit-render/api": "^0.38.0-alpha.0",
+    "@newskit-render/auth": "^0.46.0-alpha.0",
+    "@newskit-render/checkout": "^0.55.0-alpha.0",
+    "@newskit-render/feature-flags": "^0.26.0-alpha.0",
+    "@newskit-render/feed": "^0.28.0-alpha.0",
+    "@newskit-render/my-account": "^2.10.0-alpha.0",
+    "@newskit-render/shared-components": "^0.75.0-alpha.0",
+    "@newskit-render/standalone-components": "^0.37.0-alpha.0",
+    "@newskit-render/validation": "^0.55.0-alpha.0",
     "cross-fetch": "3.1.5",
     "graphql": "15.6.0",
     "lodash.get": "4.4.2",
     "newrelic": "7.1.0",
-    "newskit": "5.7.0",
-    "next": "12.1.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "newskit": "6.0.0",
+    "next": "12.3.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "react-helmet": "6.1.0",
     "swr": "1.3.0"
   },
@@ -60,10 +64,11 @@
     "@emotion/jest": "11.3.0",
     "@next/bundle-analyzer": "12.0.8",
     "@pact-foundation/pact": "9.12.1",
-    "@testing-library/jest-dom": "5.11.4",
-    "@testing-library/react": "11.0.2",
+    "@testing-library/jest-dom": "5.16.5",
+    "@testing-library/react": "13.4.0",
     "@types/newrelic": "7.0.0",
-    "@types/react": "17.0.2",
+    "@types/react": "18.0.19",
+    "@types/react-dom": "18.0.6",
     "@types/react-helmet": "6.1.0",
     "@typescript-eslint/eslint-plugin": "3.7.1",
     "@typescript-eslint/parser": "3.7.1",
@@ -94,7 +99,7 @@
     "prettier-eslint": "11.0.0",
     "prettier-eslint-cli": "5.0.0",
     "ts-jest": "27.1.3",
-    "typescript": "4.4.3",
+    "typescript": "4.8.3",
     "wait-on": "5.3.0"
   },
   "precommit": [
@@ -109,11 +114,11 @@
     "access": "public"
   },
   "resolutions": {
-    "@types/react": "^17.0.1",
-    "@types/react-dom": "^17.0.2"
+    "@types/react": "18.0.19",
+    "@types/react-dom": "18.0.6"
   },
   "overrides": {
-    "@types/react": "^17.0.1",
-    "@types/react-dom": "^17.0.2"
+    "@types/react": "18.0.19",
+    "@types/react-dom": "18.0.6"
   }
 }

package/pages/_app.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import React from 'react'
 import { AppContext as AppContextType, AppProps } from 'next/app'
 import Head from 'next/head'
@@ -58,7 +59,7 @@ function MyApp({ Component, pageProps, featureFlags, tenant }: MyAppProps) {
           </Head>
           <InstrumentationContextProvider>
             <FeatureFlagsContextProvider context={featureFlags}>
-              <SessionProvider pageProps={pageProps}>
+              <SessionProvider pageProps={(pageProps as unknown) as any}>
                 <AppContext.Consumer>
                   {({ theme }) => (
                     <ThemeProvider theme={theme}>

package/pages/_document.tsx

@@ -57,48 +57,50 @@ export default class MyDocument extends Document {
     return (
       <Html lang="en">
         <Head>
-          {fontList.map((font) => generateFontLink(font))}
-          <Script
-            type="text/javascript"
-            data-attribute="nr-browser"
-            dangerouslySetInnerHTML={{
-              __html: getSubStringBetween(
-                "<script type='text/javascript' >",
-                '</script>',
-                newrelic.getBrowserTimingHeader()
-              ),
-            }}
-          />
-          {experimentationWeb &&
-            featureFlags &&
-            featureFlags.experimentation_web_flag && (
-              <ExperimentationWeb
-                optimizelyWebConfig={{ scriptCdn: experimentationWeb }}
-                reactHelmet={Helmet}
-              />
-            )}
-          {helmet.script.toComponent()}
-          {sourcepointAccountId && (
-            <Consent
-              sourcePointConfigTCFV2={{
-                accountId: Number(sourcepointAccountId),
-                propertyHref: sourcepointPropertyHref,
+          <>
+            {fontList.map((font) => generateFontLink(font))}
+            <Script
+              type="text/javascript"
+              data-attribute="nr-browser"
+              dangerouslySetInnerHTML={{
+                __html: getSubStringBetween(
+                  "<script type='text/javascript' >",
+                  '</script>',
+                  newrelic.getBrowserTimingHeader()
+                ),
               }}
             />
-          )}
-          <meta name="robots" content="noindex" />
-          {showAds && (
-            <>
-              <Script
-                type="text/javascript"
-                src="https://ads.newskit.co.uk/prebid.newskit.min.js"
-              />
-              <Script
-                type="text/javascript"
-                src="https://ads.newskit.co.uk/ads.newskit.min.js"
+            {experimentationWeb &&
+              featureFlags &&
+              featureFlags.experimentation_web_flag && (
+                <ExperimentationWeb
+                  optimizelyWebConfig={{ scriptCdn: experimentationWeb }}
+                  reactHelmet={Helmet}
+                />
+              )}
+            {helmet.script.toComponent()}
+            {sourcepointAccountId && (
+              <Consent
+                sourcePointConfigTCFV2={{
+                  accountId: Number(sourcepointAccountId),
+                  propertyHref: sourcepointPropertyHref,
+                }}
               />
-            </>
-          )}
+            )}
+            <meta name="robots" content="noindex" />
+            {showAds && (
+              <>
+                <Script
+                  type="text/javascript"
+                  src="https://ads.newskit.co.uk/prebid.newskit.min.js"
+                />
+                <Script
+                  type="text/javascript"
+                  src="https://ads.newskit.co.uk/ads.newskit.min.js"
+                />
+              </>
+            )}
+          </>
         </Head>
         <body>
           {tealiumAccountId && (

package/pages/preview/[articleId]/version/[versionId]/index.tsx

@@ -5,7 +5,7 @@ import {
   Headline,
   Button,
   Banner,
-  IconFilledInfo,
+  toNewsKitIcon,
 } from 'newskit'
 import {
   PageWithAuth,
@@ -16,6 +16,7 @@ import {
 } from '@newskit-render/auth'
 import { createApolloClient, ClientTypes } from '@newskit-render/api'
 import { getHost } from '@newskit-render/shared-components'
+import { Info } from '@emotion-icons/material/Info'
 import { GET_UNIVERSAL_ARTICLE } from '../../../../../queries'
 import ArticlePage from '../../../../../components/article'
 import {
@@ -28,6 +29,8 @@ import {
   gscId as configGscId,
 } from '../../../../../config'
 
+const IconFilledInfo = toNewsKitIcon(Info)
+
 const PreviewArticle = ({
   universalArticle,
   section,