@newskit-render/core 1.90.2 → 1.91.0-alpha.1

package/__tests__/pages/__snapshots__/relatedArticles.test.tsx.snap

@@ -107,10 +107,11 @@ exports[`Recommendation render related article page when data is null page 1`] =
           <svg
             aria-hidden="true"
             aria-label="Mobile Menu Button"
-            class="css-1uqoh4d-EmotionIconBase ex0cdmw0"
+            class="css-11lepi0 css-18cthx4-EmotionIconBase ex0cdmw0"
             data-testid="mobile-menu-btn"
             fill="currentColor"
             focusable="false"
+            overrides="[object Object]"
             role="button"
             tabindex="0"
             viewBox="0 0 24 24"
@@ -151,7 +152,7 @@ exports[`Recommendation render related article page when data is null page 1`] =
                     class="css-1o99qvy"
                   >
                     <span
-                      class="css-8bpgtg"
+                      class="css-8r74mr"
                     >
                       Section One
                     </span>
@@ -174,7 +175,7 @@ exports[`Recommendation render related article page when data is null page 1`] =
                     class="css-1o99qvy"
                   >
                     <span
-                      class="css-8bpgtg"
+                      class="css-8r74mr"
                     >
                       Section Two
                     </span>
@@ -197,7 +198,7 @@ exports[`Recommendation render related article page when data is null page 1`] =
                     class="css-1o99qvy"
                   >
                     <span
-                      class="css-8bpgtg"
+                      class="css-8r74mr"
                     >
                       Section Three
                     </span>
@@ -248,10 +249,10 @@ exports[`Recommendation render related article page when data is null page 1`] =
                   class="css-dzecoh"
                 >
                   <section
-                    class="css-148i9wz"
+                    class="css-3bvy7k"
                   >
                     <h3
-                      class="nk-headline-heading css-5gd387"
+                      class="nk-headline-heading css-b3iww6"
                     >
                       Related Articles
                     </h3>
@@ -269,7 +270,7 @@ exports[`Recommendation render related article page when data is null page 1`] =
     </div>
   </div>
   <div
-    class="css-1p8e12n"
+    class="css-sxhtf1"
   >
     <div
       class="css-8atxkm"
@@ -333,7 +334,7 @@ exports[`Recommendation render related article page when data is null page 1`] =
                   class="css-17x5lw"
                 >
                   <span
-                    class="css-kxo08d"
+                    class="css-yk25sg"
                   >
                     NavLink One
                   </span>
@@ -352,7 +353,7 @@ exports[`Recommendation render related article page when data is null page 1`] =
                   class="css-17x5lw"
                 >
                   <span
-                    class="css-kxo08d"
+                    class="css-yk25sg"
                   >
                     NavLink Two
                   </span>
@@ -371,7 +372,7 @@ exports[`Recommendation render related article page when data is null page 1`] =
                   class="css-17x5lw"
                 >
                   <span
-                    class="css-kxo08d"
+                    class="css-yk25sg"
                   >
                     NavLink Three
                   </span>
@@ -390,7 +391,7 @@ exports[`Recommendation render related article page when data is null page 1`] =
                   class="css-17x5lw"
                 >
                   <span
-                    class="css-kxo08d"
+                    class="css-yk25sg"
                   >
                     NavLink Four
                   </span>
@@ -409,7 +410,7 @@ exports[`Recommendation render related article page when data is null page 1`] =
                   class="css-17x5lw"
                 >
                   <span
-                    class="css-kxo08d"
+                    class="css-yk25sg"
                   >
                     NavLink Five
                   </span>
@@ -428,7 +429,7 @@ exports[`Recommendation render related article page when data is null page 1`] =
                   class="css-17x5lw"
                 >
                   <span
-                    class="css-kxo08d"
+                    class="css-yk25sg"
                   >
                     NavLink Six
                   </span>
@@ -446,7 +447,7 @@ exports[`Recommendation render related article page when data is null page 1`] =
             />
           </div>
           <p
-            class="css-1m5hsr4"
+            class="css-tiln3q"
           >
             Copyright © 2022 News Corp. All rights reserved.
           </p>

package/app-context/InstrumentationContextProvider.tsx

@@ -12,6 +12,7 @@ const defaultEventHandlers = {
 }
 
 interface InstrumentationContextProviderProps {
+  children?: React.ReactNode
   handlers?: Record<keyof typeof defaultEventHandlers, EventHandler>
 }
 

package/components/ErrorPage/ErrorPage.tsx

@@ -4,16 +4,19 @@ import {
   Cell,
   Image,
   TextBlock,
-  IconFilledKeyboardArrowLeft,
   styled,
   getMediaQueryFromTheme,
   getSizingCssFromTheme,
+  toNewsKitIcon,
 } from 'newskit'
 import Head from 'next/head'
 import { NextLink } from '@newskit-render/shared-components'
+import { KeyboardArrowLeft as FilledKeyboardArrowLeft } from '@emotion-icons/material/KeyboardArrowLeft'
 import Layout from '../layout'
 import { headerSize } from '../header'
 
+const IconFilledKeyboardArrowLeft = toNewsKitIcon(FilledKeyboardArrowLeft)
+
 const cb = (size: string) => ({
   minHeight: `calc(100vh - calc(${size} + 183px))`,
 })

package/components/article/Highlights.tsx

@@ -5,9 +5,7 @@ import {
   Grid,
   Stack,
   Cell,
-  AlignSelfValues,
   StackChild,
-  Card,
   Divider,
   Visible,
   TitleBar,
@@ -78,7 +76,7 @@ const Highlights: React.FC<{
           <Visible xs lg xl>
             <Divider />
             <Stack>
-              <StackChild alignSelf={AlignSelfValues.Center}>
+              <StackChild alignSelf="center">
                 <ViewMoreButton href="/" />
               </StackChild>
               <Divider />

package/components/article/RelatedArticles.tsx

@@ -1,13 +1,5 @@
-import React, { ComponentType } from 'react'
-import {
-  Block,
-  TitleBar,
-  Stack,
-  StackChild,
-  AlignSelfValues,
-  Divider,
-  Visible,
-} from 'newskit'
+import React from 'react'
+import { Block, TitleBar, Stack, StackChild, Divider, Visible } from 'newskit'
 import { useRouter } from 'next/router'
 import ViewMoreButton from '../common/ViewMoreButton'
 import { BasicRow } from '../section/layouts'
@@ -57,7 +49,7 @@ const RelatedArticles: React.FC<{
       <Visible xs lg>
         <Divider />
         <Stack>
-          <StackChild alignSelf={AlignSelfValues.Center}>
+          <StackChild alignSelf="center">
             <ViewMoreButton href={relatedArticlesPath} />
           </StackChild>
           <Divider />

package/components/article/RelatedTopics.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Headline, Block, Divider, Stack, Tag, TagSize } from 'newskit'
+import { Headline, Block, Divider, Stack, Tag } from 'newskit'
 import { Topic } from '../../helpers/global-types'
 
 const RelatedTopics: React.FC<{
@@ -35,7 +35,7 @@ const RelatedTopics: React.FC<{
           <Block key={link} spaceStack="space040">
             <Tag
               href={link}
-              size={TagSize.Medium}
+              size="medium"
               overrides={{
                 typographyPreset: {
                   xs: 'utilityLabel010',

package/components/article/ShareBarComponent.tsx

@@ -1,11 +1,13 @@
 import React from 'react'
-import {
-  ShareBar,
-  IconFilledFacebook,
-  IconFilledTwitter,
-  IconOutlinedLink,
-  IconOutlinedEmail,
-} from 'newskit'
+import { ShareBar, toNewsKitIcon } from 'newskit'
+import { Facebook as FilledFacebook } from '@emotion-icons/material/Facebook'
+import { Link as OutlinedLink } from '@emotion-icons/material-outlined/Link'
+import { Email as OutlinedEmail } from '@emotion-icons/material-outlined/Email'
+import { IconFilledTwitter } from '../common/icons/IconFilledTwitter'
+
+const IconFilledFacebook = toNewsKitIcon(FilledFacebook)
+const IconOutlinedLink = toNewsKitIcon(OutlinedLink)
+const IconOutlinedEmail = toNewsKitIcon(OutlinedEmail)
 
 const ShareBarComponent = () => (
   <ShareBar