@newskit-render/core 3.1.1-alpha.2 → 4.0.0

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

@@ -6,18 +6,18 @@ exports[`Recommendation render related article page when data is null page 1`] =
     class="css-1d2q07x"
   >
     <div
-      class="css-1ayxvlu"
+      class="css-1l668x8"
       data-testid="NavigationPrimary"
     >
       <div
-        class="css-2orcb8"
+        class="css-11pbejy"
       >
         <div
-          class="css-wa08xy"
+          class="css-1mi1ly6"
         >
           <a
             aria-label="Logo Link"
-            class="css-zk8dn3"
+            class="css-1ulbpfm"
             href="/"
           >
             <span
@@ -54,14 +54,14 @@ exports[`Recommendation render related article page when data is null page 1`] =
         </div>
       </div>
       <div
-        class="css-15brxgw"
+        class="css-55favz"
       >
         <div
           class="css-1k3e0au"
         >
           <button
             aria-label="Mobile Menu Button"
-            class="css-b1ufx8"
+            class="css-h8miwj"
             data-testid="mobile-menu-btn"
             type="button"
           >
@@ -86,7 +86,7 @@ exports[`Recommendation render related article page when data is null page 1`] =
         </div>
       </div>
       <div
-        class="css-oiffzn"
+        class="css-mniw6m"
       >
         <nav
           class="css-1le7q07"
@@ -100,7 +100,7 @@ exports[`Recommendation render related article page when data is null page 1`] =
             >
               <a
                 aria-label="Section One Link"
-                class="css-zk8dn3"
+                class="css-1ulbpfm"
                 href="/section-one"
               >
                 <span
@@ -123,7 +123,7 @@ exports[`Recommendation render related article page when data is null page 1`] =
             >
               <a
                 aria-label="Section Two Link"
-                class="css-zk8dn3"
+                class="css-1ulbpfm"
                 href="/section-two"
               >
                 <span
@@ -146,7 +146,7 @@ exports[`Recommendation render related article page when data is null page 1`] =
             >
               <a
                 aria-label="Section Three Link"
-                class="css-zk8dn3"
+                class="css-1ulbpfm"
                 href="/section-three"
               >
                 <span
@@ -168,10 +168,10 @@ exports[`Recommendation render related article page when data is null page 1`] =
         </nav>
       </div>
       <div
-        class="css-x6oa1l"
+        class="css-l657h8"
       >
         <div
-          class="css-30qa7x"
+          class="css-13byt3y"
         />
       </div>
     </div>
@@ -195,16 +195,16 @@ exports[`Recommendation render related article page when data is null page 1`] =
             data-testid="SectionCell"
           >
             <div
-              class="css-gxh9kv"
+              class="css-11s9frs"
             />
             <div
-              class="css-gxh9kv"
+              class="css-11s9frs"
             >
               <div
-                class="css-mw8mt7"
+                class="css-w282mr"
               >
                 <div
-                  class="css-dzecoh"
+                  class="css-1aiajnh"
                 >
                   <section
                     class="css-3bvy7k"
@@ -238,7 +238,7 @@ exports[`Recommendation render related article page when data is null page 1`] =
           data-testid="PageLayout"
         >
           <div
-            class="css-a1yn46"
+            class="css-2e5lv5"
           >
             <svg
               class="css-kgdu16"
@@ -265,7 +265,7 @@ exports[`Recommendation render related article page when data is null page 1`] =
             </svg>
           </div>
           <div
-            class="css-a1yn46"
+            class="css-2e5lv5"
           >
             <hr
               aria-hidden="true"
@@ -277,11 +277,11 @@ exports[`Recommendation render related article page when data is null page 1`] =
             class="css-hx18jh"
           >
             <span
-              class="css-1v0p1qz"
+              class="css-1cpcft7"
             >
               <a
                 aria-label="NavLink One"
-                class="css-zk8dn3"
+                class="css-1ulbpfm"
                 href="/link-one"
               >
                 <span
@@ -296,11 +296,11 @@ exports[`Recommendation render related article page when data is null page 1`] =
               </a>
             </span>
             <span
-              class="css-1v0p1qz"
+              class="css-1cpcft7"
             >
               <a
                 aria-label="NavLink Two"
-                class="css-zk8dn3"
+                class="css-1ulbpfm"
                 href="/link-two"
               >
                 <span
@@ -315,11 +315,11 @@ exports[`Recommendation render related article page when data is null page 1`] =
               </a>
             </span>
             <span
-              class="css-1v0p1qz"
+              class="css-1cpcft7"
             >
               <a
                 aria-label="NavLink Three"
-                class="css-zk8dn3"
+                class="css-1ulbpfm"
                 href="/link-three"
               >
                 <span
@@ -334,11 +334,11 @@ exports[`Recommendation render related article page when data is null page 1`] =
               </a>
             </span>
             <span
-              class="css-1v0p1qz"
+              class="css-1cpcft7"
             >
               <a
                 aria-label="NavLink Four"
-                class="css-zk8dn3"
+                class="css-1ulbpfm"
                 href="/link-four"
               >
                 <span
@@ -353,11 +353,11 @@ exports[`Recommendation render related article page when data is null page 1`] =
               </a>
             </span>
             <span
-              class="css-1v0p1qz"
+              class="css-1cpcft7"
             >
               <a
                 aria-label="NavLink Five"
-                class="css-zk8dn3"
+                class="css-1ulbpfm"
                 href="/link-five"
               >
                 <span
@@ -372,11 +372,11 @@ exports[`Recommendation render related article page when data is null page 1`] =
               </a>
             </span>
             <span
-              class="css-1v0p1qz"
+              class="css-1cpcft7"
             >
               <a
                 aria-label="NavLink Six"
-                class="css-zk8dn3"
+                class="css-1ulbpfm"
                 href="/link-six"
               >
                 <span
@@ -392,7 +392,7 @@ exports[`Recommendation render related article page when data is null page 1`] =
             </span>
           </div>
           <div
-            class="css-a1yn46"
+            class="css-2e5lv5"
           >
             <hr
               aria-hidden="true"

package/components/ErrorPage/ErrorPage.tsx

@@ -75,14 +75,14 @@ const ErrorPage = ({ title, errorMassage }: ErrorPageProps) => (
     <Layout backgroundColor="white" gridOverride={gridOverride}>
       <Cell xs={10} xsOffset={1} md={12} mdOffset={0}>
         <StyledMain>
-          <Block spaceStack="space070">
+          <Block marginBlockEnd="space070">
             <Image
               aspectRatio="16/9"
               src="https://plchldr.co/i/594x364?bg=F0F0F0&fc=111111&text=IMG"
               alt="404 page"
             />
           </Block>
-          <Block spaceStack={{ xs: 'space040', md: 'space050' }}>
+          <Block marginBlockEnd={{ xs: 'space040', md: 'space050' }}>
             <TextBlock
               as="h1"
               typographyPreset={{
@@ -95,7 +95,7 @@ const ErrorPage = ({ title, errorMassage }: ErrorPageProps) => (
             </TextBlock>
           </Block>
 
-          <Block spaceStack={{ xs: 'space050', md: 'space060' }}>
+          <Block marginBlockEnd={{ xs: 'space050', md: 'space060' }}>
             <TextBlock
               typographyPreset={{
                 xs: 'utilityBody010',
@@ -108,7 +108,7 @@ const ErrorPage = ({ title, errorMassage }: ErrorPageProps) => (
             </TextBlock>
           </Block>
           <Block
-            spaceStack={{ xs: 'space070', sm: 'space080', md: 'space090' }}
+            marginBlockEnd={{ xs: 'space070', sm: 'space080', md: 'space090' }}
           >
             <StyledLink
               type="standalone"

package/components/ad/index.tsx

@@ -21,8 +21,9 @@ const AdComponent: React.FC<{
 }> = ({ id, height, maxWidth }) => (
   <Block
     data-testid="Ads"
-    spaceInset="spaceInsetSquish020"
-    spaceStack={{
+    paddingInline="spaceInsetSquish020"
+    paddingBlock="spaceInsetSquish020"
+    marginBlockEnd={{
       xs: 'space070',
       lg: 'space050',
     }}

package/components/article/Highlights.tsx

@@ -14,8 +14,8 @@ import { RecommendedArticleList } from '@newskit-render/standalone-components'
 import ViewMoreButton from '../common/ViewMoreButton'
 
 const Highlights: React.FC = () => (
-  <Block data-testid="Highlights" spaceStack="space060">
-    <Block spaceStack="space060">
+  <Block data-testid="Highlights" marginBlockEnd="space060">
+    <Block marginBlockEnd="space060">
       <Visible xs lg xl>
         <Headline
           overrides={{
@@ -34,7 +34,10 @@ const Highlights: React.FC = () => (
       <Visible sm md>
         <TitleBar
           overrides={{
-            spaceInset: {
+            paddingInline: {
+              xs: 'spaceInsetSquish000',
+            },
+            paddingBlock: {
               xs: 'spaceInsetSquish000',
             },
             heading: {
@@ -52,7 +55,7 @@ const Highlights: React.FC = () => (
       </Visible>
     </Block>
 
-    <Block spaceStack="space040">
+    <Block marginBlockEnd="space040">
       <Grid xsMargin="space000">
         <RecommendedArticleList templateId="list-1" />
         <Cell xs={12}>

package/components/article/RelatedArticles.tsx

@@ -13,10 +13,13 @@ const RelatedArticles: React.FC = () => {
 
   return (
     <Block data-testid="RelatedArticles">
-      <Block spaceStack="space080">
+      <Block marginBlockEnd="space080">
         <TitleBar
           overrides={{
-            spaceInset: {
+            paddingInline: {
+              xs: 'spaceInsetSquish000',
+            },
+            paddingBlock: {
               xs: 'spaceInsetSquish000',
             },
             heading: {

package/components/article/RelatedTopics.tsx

@@ -6,7 +6,7 @@ const RelatedTopics: React.FC<{
   topics: Topic[]
 }> = ({ topics }) => (
   <Block>
-    <Block spaceStack="space050">
+    <Block marginBlockEnd="space050">
       <Headline
         overrides={{
           typographyPreset: {
@@ -22,17 +22,17 @@ const RelatedTopics: React.FC<{
         Related topics
       </Headline>
     </Block>
-    <Block spaceStack="space060">
+    <Block marginBlockEnd="space060">
       <Stack
         flow="horizontal-center"
         stackDistribution="flex-start"
-        spaceStack="sizing020"
+        marginBlockEnd="sizing020"
         spaceInline="space040"
         wrap="wrap"
         data-testid="RelatedTopics"
       >
         {topics.map(({ name, link }) => (
-          <Block key={link} spaceStack="space040">
+          <Block key={link} marginBlockEnd="space040">
             <Tag
               href={link}
               size="medium"
@@ -50,7 +50,7 @@ const RelatedTopics: React.FC<{
         ))}
       </Stack>
     </Block>
-    <Block spaceStack="space080">
+    <Block marginBlockEnd="space080">
       <Divider />
     </Block>
   </Block>