@newskit-render/core 0.131.1 → 0.138.1

package/components/common/NavLink.tsx

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

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

@@ -3,7 +3,7 @@
 exports[`Footer tests should render footer 1`] = `
 <DocumentFragment>
   .emotion-0 {
-  background-color: #0a0a0a;
+  background-color: #0A0A0A;
   width: 100%;
   bottom: 0;
   display: block;
@@ -88,8 +88,8 @@ exports[`Footer tests should render footer 1`] = `
 
 .emotion-5 {
   display: inline-block;
-  fill: #ffffff;
-  color: #ffffff;
+  fill: #FFFFFF;
+  color: #FFFFFF;
   width: 160px;
 }
 
@@ -150,41 +150,33 @@ exports[`Footer tests should render footer 1`] = `
   transition-property: color;
   transition-duration: 200ms;
   transition-timing-function: cubic-bezier(0, 0, .5, 1);
-  color: #ffffff;
+  color: #FFFFFF;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
 .emotion-10 svg {
-  fill: #ffffff;
+  fill: #FFFFFF;
 }
 
 .emotion-10:hover:not(:disabled) {
-  color: #ffffff;
+  color: #FFFFFF;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
 .emotion-10:hover:not(:disabled) svg {
-  fill: #ffffff;
+  fill: #FFFFFF;
 }
 
 .emotion-10:active:not(:disabled) {
-  color: #ffffff;
+  color: #FFFFFF;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
 .emotion-10:active:not(:disabled) svg {
-  fill: #ffffff;
-}
-
-.emotion-10:visited:not(:disabled) {
-  color: rgba(255,255,255,0.8);
-}
-
-.emotion-10:visited:not(:disabled) svg {
-  fill: rgba(255,255,255,0.8);
+  fill: #FFFFFF;
 }
 
 .emotion-11 {
@@ -209,11 +201,11 @@ exports[`Footer tests should render footer 1`] = `
 .emotion-12 {
   margin: 0;
   padding: 1px 0;
-  font-family: "Noto Sans",sans-serif;
+  font-family: "DM Sans",sans-serif;
   font-size: 14px;
   line-height: 1.4285714285714286;
   font-weight: 500;
-  letter-spacing: 0;
+  letter-spacing: -0.5px;
   display: inline-block;
   display: block;
 }
@@ -223,7 +215,7 @@ exports[`Footer tests should render footer 1`] = `
   display: block;
   height: 0;
   width: 0;
-  margin-bottom: -0.32678571428571435em;
+  margin-bottom: -0.3955357142857143em;
 }
 
 .emotion-12::after {
@@ -231,17 +223,17 @@ exports[`Footer tests should render footer 1`] = `
   display: block;
   height: 0;
   width: 0;
-  margin-top: -0.4267857142857143em;
+  margin-top: -0.3955357142857143em;
 }
 
 .emotion-35 {
   margin: 0;
   color: #535353;
-  font-family: "Noto Sans",sans-serif;
+  font-family: "DM Sans",sans-serif;
   font-size: 14px;
   line-height: 1.4285714285714286;
   font-weight: 500;
-  letter-spacing: 0;
+  letter-spacing: -0.5px;
 }
 
 .emotion-35 svg {

package/components/header/index.tsx

@@ -1,7 +1,6 @@
 import React, { useContext, useState } from 'react'
 import {
   Cell,
-  LinkStandalone,
   styled,
   getColorCssFromTheme,
   getSizingCssFromTheme,
@@ -13,6 +12,7 @@ import {
   IconFilledMenu,
 } from 'newskit'
 import { PastDueBannerExternal } from '@newskit-render/my-account'
+import { NextLink } from '@newskit-render/shared-components'
 import {
   renderCustomLightTheme as LightTheme,
   renderCustomDarkTheme as DarkTheme,
@@ -180,7 +180,8 @@ const Header: React.FC<{ user: UserData }> = ({ user }) => {
               stackDistribution="space-between"
               wrap="nowrap"
             >
-              <LinkStandalone
+              <NextLink
+                type="standalone"
                 overrides={{ stylePreset: 'linkStandaloneInverse' }}
                 href="/"
                 aria-label="Home Page"
@@ -191,7 +192,7 @@ const Header: React.FC<{ user: UserData }> = ({ user }) => {
                 <Visible xs sm>
                   <NewsKitLogoShort color="white" size="sizing120" />
                 </Visible>
-              </LinkStandalone>
+              </NextLink>
               <Stack
                 flow="horizontal-center"
                 stackDistribution="flex-end"

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

@@ -94,11 +94,11 @@ describe('ArticleSlice', () => {
     expect(getByText('Layout: LEAD_1_AND_1')).toBeInTheDocument()
     expect(getByText('test headline').closest('a')).toHaveAttribute(
       'href',
-      'catagory-one/demo-1/test-headline'
+      '/catagory-one/demo-1/test-headline'
     )
     expect(getByText('test headline 2').closest('a')).toHaveAttribute(
       'href',
-      'catagory-two/demo-2/test-headline-2'
+      '/catagory-two/demo-2/test-headline-2'
     )
   })
 

package/components/section/layouts/FallBack.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { LinkStandalone } from 'newskit'
+import { NextLink } from '@newskit-render/shared-components'
 import { getBlockProps } from './Block'
 import { teaserURL } from '../sectionUtils'
 import { LayoutProps } from './types'
@@ -14,9 +14,9 @@ export const FallBack: React.FC<LayoutProps> = ({ slice }) => (
       const { id, headline } = teaserProps
       return (
         <p key={id || i}>
-          <LinkStandalone href={teaserURL(teaserProps)}>
+          <NextLink href={teaserURL(teaserProps)} type="standalone">
             {headline}
-          </LinkStandalone>
+          </NextLink>
         </p>
       )
     })}

package/components/section/layouts/SectionRow.tsx

@@ -1,12 +1,12 @@
 import React from 'react'
 import {
-  LinkStandalone,
   styled,
   getColorCssFromTheme,
   Block,
   Divider,
   BlockProps,
 } from 'newskit'
+import { NextLink } from '@newskit-render/shared-components'
 import { LayoutProps } from './types'
 import { CollectionBlock } from '../../../helpers/global-types'
 import StyledIconFilledChevronRight from '../../common/icons/StyledIconFilledChevronRight'
@@ -30,7 +30,8 @@ const StyledDivider = styled(Divider)`
 `
 
 const link = (href: string, stylePreset?: string) => (
-  <LinkStandalone
+  <NextLink
+    type="standalone"
     href={href}
     overrides={{
       stylePreset: stylePreset || 'inkInverse',
@@ -40,7 +41,7 @@ const link = (href: string, stylePreset?: string) => (
   >
     Link
     <StyledIconFilledChevronRight overrides={{ size: 'iconSize020' }} />
-  </LinkStandalone>
+  </NextLink>
 )
 
 type SectionRowProps = {