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

package/components/article/index.tsx

@@ -128,7 +128,7 @@ const ArticlePage: React.FC<ArticleProps> = ({
         user={user}
       >
         <Cell xs={12} md={10} lg={7} xsOffset={0} mdOffset={1}>
-          <Block spaceStack="space050" data-testid="HeadLine">
+          <Block marginBlockEnd="space050" data-testid="HeadLine">
             <Headline
               overrides={{
                 typographyPreset: {
@@ -146,7 +146,7 @@ const ArticlePage: React.FC<ArticleProps> = ({
               {headline}
             </Headline>
           </Block>
-          <Block spaceStack="space080" data-testid="Kicker">
+          <Block marginBlockEnd="space080" data-testid="Kicker">
             <Headline
               headingAs="h2"
               overrides={{
@@ -165,14 +165,14 @@ const ArticlePage: React.FC<ArticleProps> = ({
             </Headline>
           </Block>
           <Block
-            spaceStack={{
+            marginBlockEnd={{
               xs: 'space040',
               md: 'space080',
             }}
           >
             <Visible xs sm>
               <Block
-                spaceStack={{
+                marginBlockEnd={{
                   xs: 'space040',
                 }}
               >
@@ -184,13 +184,13 @@ const ArticlePage: React.FC<ArticleProps> = ({
                 />
               </Block>
               <Block
-                spaceStack={{
+                marginBlockEnd={{
                   xs: 'space040',
                 }}
               >
                 <Divider />
               </Block>
-              <Block spaceStack="space050">
+              <Block marginBlockEnd="space050">
                 <ShareButton />
               </Block>
             </Visible>
@@ -215,7 +215,7 @@ const ArticlePage: React.FC<ArticleProps> = ({
           </Block>
           {media && 'crops' in media && (
             <Block
-              spaceStack={{
+              marginBlockEnd={{
                 xs: 'space060',
                 lg: 'space070',
               }}
@@ -233,7 +233,7 @@ const ArticlePage: React.FC<ArticleProps> = ({
           )}
           {media && 'videoId' in media && (
             <Block
-              spaceStack={{
+              marginBlockEnd={{
                 xs: 'space060',
                 lg: 'space070',
               }}
@@ -250,7 +250,7 @@ const ArticlePage: React.FC<ArticleProps> = ({
             </Block>
           )}
           <Block
-            spaceStack={{
+            marginBlockEnd={{
               xs: 'space060',
               md: 'space080',
               lg: 'space100',
@@ -261,7 +261,7 @@ const ArticlePage: React.FC<ArticleProps> = ({
               summary.children.map((p, i) => (
                 <Block
                   key={i}
-                  spaceStack={{
+                  marginBlockEnd={{
                     xs: 'space050',
                     lg: 'space070',
                   }}
@@ -281,18 +281,18 @@ const ArticlePage: React.FC<ArticleProps> = ({
               ))}
           </Block>
           <Visible xs sm>
-            <Block spaceStack="space050">
+            <Block marginBlockEnd="space050">
               <Divider />
             </Block>
-            <Block spaceStack="space100">
+            <Block marginBlockEnd="space100">
               <ShareButton />
             </Block>
           </Visible>
           <Visible md lg xl>
-            <Block spaceStack="space050">
+            <Block marginBlockEnd="space050">
               <Divider />
             </Block>
-            <Block spaceStack="space100">
+            <Block marginBlockEnd="space100">
               <Stack
                 flow="horizontal-bottom"
                 stackDistribution="flex-end"

package/components/common/BackToHomepage.tsx

@@ -5,11 +5,11 @@ import React from 'react'
 export const BackToHomepage = () => {
   return (
     <>
-      <Block spaceStack="space030">
+      <Block marginBlockEnd="space030">
         <Divider />
       </Block>
 
-      <Block spaceStack="space030">
+      <Block marginBlockEnd="space030">
         <Stack flow="horizontal-center" stackDistribution="center">
           <StackChild>
             <BackButton
@@ -21,14 +21,15 @@ export const BackToHomepage = () => {
               backButtonOverrides={{
                 asLink: true,
                 iconSize: 'iconSize030',
-                spaceInset: 'spaceInsetSquish010',
+                paddingInline: 'spaceInsetSquish010',
+                paddingBlock: 'spaceInsetSquish010',
                 typographyPreset: 'utilityButton020',
               }}
             />
           </StackChild>
         </Stack>
       </Block>
-      <Block spaceStack="space050">
+      <Block marginBlockEnd="space050">
         <Divider />
       </Block>
     </>

package/components/common/SectionTitleBar.tsx

@@ -33,7 +33,7 @@ const SectionTitleBar: React.FC<SectionTitleBarProps> = ({
 }) => (
   <StyledTitleBarBlock
     colour={colour}
-    spaceStack="space060"
+    marginBlockEnd="space060"
     data-testid="SectionTitleBar"
   >
     <TitleBar

package/components/common/iconNavLink/IconNavLink.tsx

@@ -41,7 +41,7 @@ const IconNavLink: React.FC<IconNavLinkProps> = ({
             <Divider />
             <Block
               data-testid="myBlock"
-              spaceStack={{
+              marginBlockEnd={{
                 xs: 'space040',
                 md: 'space000',
               }}

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

@@ -17,7 +17,7 @@ exports[`Footer tests should render footer 1`] = `
           data-testid="PageLayout"
         >
           <div
-            class="css-a1yn46"
+            class="css-2e5lv5"
           >
             <svg
               class="css-kgdu16"
@@ -44,7 +44,7 @@ exports[`Footer tests should render footer 1`] = `
             </svg>
           </div>
           <div
-            class="css-a1yn46"
+            class="css-2e5lv5"
           >
             <hr
               aria-hidden="true"
@@ -56,11 +56,11 @@ exports[`Footer tests should render footer 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
@@ -75,11 +75,11 @@ exports[`Footer tests should render footer 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
@@ -94,11 +94,11 @@ exports[`Footer tests should render footer 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
@@ -113,11 +113,11 @@ exports[`Footer tests should render footer 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
@@ -132,11 +132,11 @@ exports[`Footer tests should render footer 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
@@ -151,11 +151,11 @@ exports[`Footer tests should render footer 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
@@ -171,7 +171,7 @@ exports[`Footer tests should render footer 1`] = `
             </span>
           </div>
           <div
-            class="css-a1yn46"
+            class="css-2e5lv5"
           >
             <hr
               aria-hidden="true"

package/components/footer/index.tsx

@@ -65,7 +65,7 @@ const NavButton = ({
       xs: 'space000',
       md: 'space090',
     }}
-    spaceStack="space040"
+    marginBlockEnd="space040"
   >
     <NavLink href={href} ariaLabel={ariaLabel} buttonText={buttonText} />
   </Block>
@@ -77,7 +77,7 @@ const Footer = () => {
     <StyledFooter>
       <MainGrid>
         <Cell xs={12}>
-          <Block spaceStack="space030">
+          <Block marginBlockEnd="space030">
             {!clientNavigationLogos[theme.name] ? (
               <NewsKitLogoShort color="white" size="sizing120" />
             ) : (
@@ -88,7 +88,7 @@ const Footer = () => {
               />
             )}
           </Block>
-          <Block spaceStack="space030">
+          <Block marginBlockEnd="space030">
             <Divider
               overrides={{
                 stylePreset: 'dividerFooterHorizontal',
@@ -127,7 +127,7 @@ const Footer = () => {
               ariaLabel="NavLink Six"
             />
           </Navigation>
-          <Block spaceStack="space030">
+          <Block marginBlockEnd="space030">
             <Divider
               overrides={{
                 stylePreset: 'dividerFooterHorizontal',

package/components/layout/MainGrid.tsx

@@ -44,7 +44,7 @@ export const MainGrid: React.FC<LayoutProps> = ({
       {withTopOffset && (
         <Cell xs={12}>
           <Block
-            spaceStack={{
+            marginBlockEnd={{
               xs: 'space070',
               lg: 'space080',
             }}
@@ -55,7 +55,7 @@ export const MainGrid: React.FC<LayoutProps> = ({
       {withBottomOffset && (
         <Cell xs={12}>
           <Block
-            spaceStack={{
+            marginBlockEnd={{
               xs: 'space090',
             }}
           />

package/components/section/ArticleSlice.tsx

@@ -28,7 +28,7 @@ const sliceBlockBuilder = (slice: Slice) => {
 const ArticleSlice: React.FC<{ slice: Slice }> = ({ slice }) => (
   <>
     {sliceBlockBuilder(slice)}
-    <Block spaceStack="space070" />
+    <Block marginBlockEnd="space070" />
   </>
 )
 

package/components/section/index.tsx

@@ -23,7 +23,7 @@ const SectionPage: React.FC<{
     <SectionContext.Provider value={{ isIndexPage }}>
       <Layout dataTestId="SectionGrid" gridOverride={gridOverride} user={user}>
         <Cell xs={12} md={10} mdOffset={1} data-testid="SectionCell">
-          <Block spaceStack="space070" />
+          <Block marginBlockEnd="space070" />
           {isIndexPage && <SectionTitleBar title={page.title} />}
           {Array.isArray(page.body) &&
             page.body.map((block, i) =>

package/components/section/layouts/Rows.tsx

@@ -24,7 +24,7 @@ export const BasicRow: React.FC<LayoutProps> = ({
       {articles
         ? articles.map((article, i) => (
             <Block
-              spaceStack="space050"
+              marginBlockEnd="space050"
               key={article.title}
               data-testid={`articleRec-${i}`}
             >

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

@@ -3,11 +3,11 @@
 exports[`Lead should render Lead 1`] = `
 <DocumentFragment>
   <div
-    class="css-fqfgyf"
+    class="css-mcaqg8"
     data-testid="SUPPLEMENT_LEAD_AND_4_STACK-Grid"
   >
     <div
-      class="css-30qa7x"
+      class="css-13byt3y"
       data-testid="featureVerticalCell"
     >
       <div
@@ -37,20 +37,20 @@ exports[`Lead should render Lead 1`] = `
           class="css-1shocxe"
         >
           <div
-            class="css-u3mic"
+            class="css-l3wl0d"
           >
             <div
-              class="css-7q4xyp"
+              class="css-8oi1su"
             >
               <a
-                class="nk-card-link css-j3tblu"
+                class="nk-card-link css-1idfo06"
                 href="catagory-one/demo-1/test-headline"
               >
                 <section
                   class="css-1jxtwhc"
                 >
                   <h3
-                    class="nk-headline-heading css-l6hs79"
+                    class="nk-headline-heading css-oeq8ks"
                   >
                     test headline
                   </h3>
@@ -62,10 +62,10 @@ exports[`Lead should render Lead 1`] = `
       </div>
     </div>
     <div
-      class="css-19pip16"
+      class="css-1gjeojb"
     >
       <div
-        class="css-30qa7x"
+        class="css-13byt3y"
         data-testid="titleVerticalCell-0"
       >
         <div
@@ -95,20 +95,20 @@ exports[`Lead should render Lead 1`] = `
             class="css-1r2lt0d"
           >
             <div
-              class="css-h6wt93"
+              class="css-13pp6jk"
             >
               <div
-                class="css-165k7dq"
+                class="css-6vc2ul"
               >
                 <a
-                  class="nk-card-link css-j3tblu"
+                  class="nk-card-link css-1idfo06"
                   href="catagory-two/demo-2/test-headline-2"
                 >
                   <section
                     class="css-4kc5mr"
                   >
                     <h3
-                      class="nk-headline-heading css-l6hs79"
+                      class="nk-headline-heading css-oeq8ks"
                     >
                       test headline 2
                     </h3>
@@ -120,7 +120,7 @@ exports[`Lead should render Lead 1`] = `
         </div>
       </div>
       <div
-        class="css-30qa7x"
+        class="css-13byt3y"
         data-testid="titleVerticalCell-1"
       >
         <div
@@ -150,20 +150,20 @@ exports[`Lead should render Lead 1`] = `
             class="css-1r2lt0d"
           >
             <div
-              class="css-h6wt93"
+              class="css-13pp6jk"
             >
               <div
-                class="css-165k7dq"
+                class="css-6vc2ul"
               >
                 <a
-                  class="nk-card-link css-j3tblu"
+                  class="nk-card-link css-1idfo06"
                   href="catagory-three/demo-3/test-headline-3"
                 >
                   <section
                     class="css-4kc5mr"
                   >
                     <h3
-                      class="nk-headline-heading css-l6hs79"
+                      class="nk-headline-heading css-oeq8ks"
                     >
                       test headline 3
                     </h3>

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

@@ -3,14 +3,14 @@
 exports[`SectionTitle SectionTitle alternative titlebar 1`] = `
 <DocumentFragment>
   <div
-    class="css-wjhscn"
+    class="css-1hrjdv4"
     data-testid="SectionTitleBar"
   >
     <div
-      class="css-1en1pwn"
+      class="css-14v8j6o"
     >
       <div
-        class="css-krscqv"
+        class="css-16bai6p"
       >
         <section
           class="css-3bvy7k"
@@ -73,14 +73,14 @@ exports[`SectionTitle SectionTitle alternative titlebar 1`] = `
 exports[`SectionTitle SectionTitle with title 1`] = `
 <DocumentFragment>
   <div
-    class="css-ilgzgo"
+    class="css-1ujfthp"
     data-testid="SectionTitleBar"
   >
     <div
-      class="css-1en1pwn"
+      class="css-14v8j6o"
     >
       <div
-        class="css-krscqv"
+        class="css-16bai6p"
       >
         <section
           class="css-3bvy7k"
@@ -146,7 +146,7 @@ Object {
   "baseElement": <body>
     <div>
       <div
-        class="css-1mgwmyt"
+        class="css-1ms0cs2"
         data-testid="addTopSpace"
       >
         <hr
@@ -156,14 +156,14 @@ Object {
         />
       </div>
       <div
-        class="css-ilgzgo"
+        class="css-1ujfthp"
         data-testid="SectionTitleBar"
       >
         <div
-          class="css-1en1pwn"
+          class="css-14v8j6o"
         >
           <div
-            class="css-krscqv"
+            class="css-16bai6p"
           >
             <section
               class="css-3bvy7k"
@@ -224,7 +224,7 @@ Object {
   </body>,
   "container": <div>
     <div
-      class="css-1mgwmyt"
+      class="css-1ms0cs2"
       data-testid="addTopSpace"
     >
       <hr
@@ -234,14 +234,14 @@ Object {
       />
     </div>
     <div
-      class="css-ilgzgo"
+      class="css-1ujfthp"
       data-testid="SectionTitleBar"
     >
       <div
-        class="css-1en1pwn"
+        class="css-14v8j6o"
       >
         <div
-          class="css-krscqv"
+          class="css-16bai6p"
         >
           <section
             class="css-3bvy7k"

package/components/teaser/index.tsx

@@ -37,7 +37,7 @@ const Teaser: React.FC<TeaserProps> = ({
       )}
       overrides={presets.card}
     >
-      <Block spaceStack={presets.title.spaceStack}>
+      <Block marginBlockEnd={presets.title.marginBlockEnd}>
         <Headline
           overrides={{
             typographyPreset: presets.title.typographyPreset,
@@ -48,7 +48,7 @@ const Teaser: React.FC<TeaserProps> = ({
         </Headline>
       </Block>
       {teaser && presets.teaser && (
-        <Block spaceStack={presets.teaser.spaceStack}>
+        <Block marginBlockEnd={presets.teaser.marginBlockEnd}>
           <TextBlock
             stylePreset={presets.teaser.stylePreset}
             typographyPreset={presets.teaser.typographyPreset}

package/components/teaser/teaserVariants.ts

@@ -11,12 +11,12 @@ const base: VariantsObject = {
   title: {
     stylePreset: {},
     typographyPreset: {},
-    spaceStack: 'space020',
+    marginBlockEnd: 'space020',
   },
   teaser: {
     stylePreset: {},
     typographyPreset: {},
-    spaceStack: 'space020',
+    marginBlockEnd: 'space020',
   },
 }
 

package/components/teaser/variant-types.ts

@@ -15,7 +15,7 @@ export type VariantsObject = {
           xs?: string
         }
       | string
-    spaceStack:
+    marginBlockEnd:
       | {
           xl?: string
           lg?: string
@@ -36,7 +36,7 @@ export type VariantsObject = {
           xs?: string
         }
       | string
-    spaceStack?:
+    marginBlockEnd?:
       | {
           xl?: string
           lg?: string

package/components/teaser/variants/featureVariant.ts

@@ -20,7 +20,7 @@ const featureVertical: VariantsObject = {
       md: 'editorialHeadline070',
       xs: 'editorialHeadline040',
     },
-    spaceStack: {
+    marginBlockEnd: {
       md: 'space050',
       xs: 'space045',
     },
@@ -32,7 +32,7 @@ const featureVertical: VariantsObject = {
       md: 'editorialSubheadline040',
       xs: 'editorialSubheadline020',
     },
-    spaceStack: {
+    marginBlockEnd: {
       md: 'space040',
       xs: 'space030',
     },

package/components/teaser/variants/horizontal.ts

@@ -7,7 +7,7 @@ const horizontalVariant: VariantsObject = {
   },
   title: {
     stylePreset: 'inkContrast',
-    spaceStack: 'space020',
+    marginBlockEnd: 'space020',
   },
 }
 

package/components/teaser/variants/titleTeaserVariant.ts

@@ -17,7 +17,7 @@ const titleTeaserVertical: VariantsObject = {
       md: 'editorialHeadline030',
       xs: 'editorialHeadline020',
     },
-    spaceStack: 'space045',
+    marginBlockEnd: 'space045',
   },
   teaser: {
     stylePreset: 'inkContrast',
@@ -25,7 +25,7 @@ const titleTeaserVertical: VariantsObject = {
       md: 'editorialParagraph020',
       xs: 'editorialParagraph010',
     },
-    spaceStack: 'space030',
+    marginBlockEnd: 'space030',
   },
 }
 

package/components/teaser/variants/titleVertical.ts

@@ -17,7 +17,7 @@ const titleVertical: VariantsObject = {
       md: 'editorialHeadline050',
       xs: 'editorialHeadline040',
     },
-    spaceStack: 'space040',
+    marginBlockEnd: 'space040',
   },
 }