@newskit-render/core 1.44.2 → 1.48.2

package/components/article/Highlights.tsx

@@ -12,6 +12,7 @@ import {
   Visible,
   TitleBar,
 } from 'newskit'
+import { ArticleRecommendation } from '@newskit-render/standalone-components'
 import ViewMoreButton from '../common/ViewMoreButton'
 
 const Highlights: React.FC<{
@@ -60,40 +61,10 @@ const Highlights: React.FC<{
 
     <Block spaceStack="space040">
       <Grid xsMargin="space000">
-        {highlightsArticles.map(({ title, href }) => (
-          <Cell key={title} xs={12} sm={6} lg={12}>
+        {highlightsArticles.map((article) => (
+          <Cell key={article.title} xs={12} sm={6} lg={12}>
             <Block spaceStack="space040" data-testid="HighlightsHorizontalCard">
-              <Card
-                href="https://newskit.co.uk/"
-                layout="horizontal"
-                media={{
-                  src: href,
-                  alt: 'Card Media',
-                  loadingAspectRatio: '3:2',
-                  overrides: {
-                    width: '150px',
-                    height: '100px',
-                  },
-                }}
-                overrides={{
-                  stylePreset: 'cardContainer',
-                  mediaContainer: {
-                    spaceInline: 'space030',
-                  },
-                }}
-              >
-                <Headline
-                  headingAs="h4"
-                  overrides={{
-                    typographyPreset: {
-                      xs: 'editorialHeadline040',
-                      xl: 'editorialHeadline020',
-                    },
-                  }}
-                >
-                  {title}
-                </Headline>
-              </Card>
+              <ArticleRecommendation article={article} size="small" />
             </Block>
           </Cell>
         ))}

package/components/article/RelatedArticles.tsx

@@ -13,6 +13,7 @@ import {
   Headline,
   Visible,
 } from 'newskit'
+import { ArticleRecommendation } from '@newskit-render/standalone-components'
 import ViewMoreButton from '../common/ViewMoreButton'
 
 const viewMoreButton = () => <ViewMoreButton href="/" />
@@ -48,65 +49,15 @@ const RelatedArticles: React.FC<{
     </Block>
 
     <Grid xsMargin="space000">
-      {relatedArticles.map(({ title, href, text, tag }) => (
+      {relatedArticles.map((article) => (
         <Cell
-          key={title}
+          key={article.title}
           xs={12}
           sm={6}
           lg={3}
           data-testid="RelatedArticlesVerticalCard"
         >
-          <Card
-            media={{
-              src: href,
-              alt: title,
-              loadingAspectRatio: '3:2',
-            }}
-            overrides={{
-              stylePreset: 'cardContainer',
-              mediaContainer: {
-                spaceInline: 'space030',
-              },
-            }}
-          >
-            <Block spaceStack="space060">
-              <Block
-                spaceStack={{
-                  xs: 'space040',
-                  md: 'space050',
-                }}
-              >
-                <Headline
-                  headingAs="h6"
-                  overrides={{
-                    typographyPreset: {
-                      xs: 'editorialHeadline020',
-                      md: 'editorialHeadline030',
-                      xl: 'editorialHeadline040',
-                    },
-                  }}
-                >
-                  {title}
-                </Headline>
-              </Block>
-              <Block
-                spaceStack={{
-                  xs: 'space040',
-                  md: 'space050',
-                }}
-              >
-                <TextBlock
-                  stylePreset="inkContrast"
-                  typographyPreset={{
-                    xs: 'editorialParagraph010',
-                    md: 'editorialParagraph020',
-                  }}
-                >
-                  {text}
-                </TextBlock>
-              </Block>
-            </Block>
-          </Card>
+          <ArticleRecommendation article={article} size="large" />
         </Cell>
       ))}
       <Cell xs={12}>

package/components/article/__tests__/__snapshots__/index.test.tsx.snap

@@ -2747,7 +2747,7 @@ exports[`Article should render tile and sub title 1`] = `
 }
 
 @media screen and (max-width: 767px) {
-  .emotion-221 {
+  .emotion-222 {
     font-family: "Bitter",serif;
     font-size: 20px;
     line-height: 22.5px;
@@ -2756,13 +2756,13 @@ exports[`Article should render tile and sub title 1`] = `
     padding: 0.5px 0px;
   }
 
-  .emotion-221::before {
+  .emotion-222::before {
     content: '';
     margin-bottom: -0.2055em;
     display: block;
   }
 
-  .emotion-221::after {
+  .emotion-222::after {
     content: '';
     margin-top: -0.2275em;
     display: block;
@@ -2770,7 +2770,7 @@ exports[`Article should render tile and sub title 1`] = `
 }
 
 @media screen and (min-width: 768px) and (max-width: 1439px) {
-  .emotion-221 {
+  .emotion-222 {
     font-family: "Bitter",serif;
     font-size: 22px;
     line-height: 24.75px;
@@ -2779,13 +2779,13 @@ exports[`Article should render tile and sub title 1`] = `
     padding: 0.5px 0px;
   }
 
-  .emotion-221::before {
+  .emotion-222::before {
     content: '';
     margin-bottom: -0.2055em;
     display: block;
   }
 
-  .emotion-221::after {
+  .emotion-222::after {
     content: '';
     margin-top: -0.2275em;
     display: block;
@@ -2793,7 +2793,7 @@ exports[`Article should render tile and sub title 1`] = `
 }
 
 @media screen and (min-width: 1440px) {
-  .emotion-221 {
+  .emotion-222 {
     font-family: "Bitter",serif;
     font-size: 24px;
     line-height: 27px;
@@ -2802,30 +2802,30 @@ exports[`Article should render tile and sub title 1`] = `
     padding: 0.5px 0px;
   }
 
-  .emotion-221::before {
+  .emotion-222::before {
     content: '';
     margin-bottom: -0.2055em;
     display: block;
   }
 
-  .emotion-221::after {
+  .emotion-222::after {
     content: '';
     margin-top: -0.2275em;
     display: block;
   }
 }
 
-.emotion-224 {
+.emotion-225 {
   margin: 0;
   color: #0A0A0A;
 }
 
-.emotion-224 svg {
+.emotion-225 svg {
   fill: #0A0A0A;
 }
 
 @media screen and (max-width: 767px) {
-  .emotion-224 {
+  .emotion-225 {
     font-family: "DM Sans",sans-serif;
     font-size: 14px;
     line-height: 21px;
@@ -2834,13 +2834,13 @@ exports[`Article should render tile and sub title 1`] = `
     padding: 0.5px 0px;
   }
 
-  .emotion-224::before {
+  .emotion-225::before {
     content: '';
     margin-bottom: -0.391em;
     display: block;
   }
 
-  .emotion-224::after {
+  .emotion-225::after {
     content: '';
     margin-top: -0.409em;
     display: block;
@@ -2848,7 +2848,7 @@ exports[`Article should render tile and sub title 1`] = `
 }
 
 @media screen and (min-width: 768px) {
-  .emotion-224 {
+  .emotion-225 {
     font-family: "DM Sans",sans-serif;
     font-size: 16px;
     line-height: 24px;
@@ -2857,13 +2857,13 @@ exports[`Article should render tile and sub title 1`] = `
     padding: 0.5px 0px;
   }
 
-  .emotion-224::before {
+  .emotion-225::before {
     content: '';
     margin-bottom: -0.391em;
     display: block;
   }
 
-  .emotion-224::after {
+  .emotion-225::after {
     content: '';
     margin-top: -0.409em;
     display: block;
@@ -2871,37 +2871,37 @@ exports[`Article should render tile and sub title 1`] = `
 }
 
 @media screen {
-  .emotion-240 {
+  .emotion-242 {
     display: block;
   }
 }
 
 @media screen and (min-width: 480px) {
-  .emotion-240 {
+  .emotion-242 {
     display: none;
   }
 }
 
 @media screen and (min-width: 768px) {
-  .emotion-240 {
+  .emotion-242 {
     display: none;
   }
 }
 
 @media screen and (min-width: 1024px) {
-  .emotion-240 {
+  .emotion-242 {
     display: block;
   }
 }
 
 @media screen and (min-width: 1440px) {
-  .emotion-240 {
+  .emotion-242 {
     display: none;
   }
 }
 
 @media screen {
-  .emotion-253 {
+  .emotion-255 {
     margin-bottom: 64px;
   }
 }
@@ -3740,7 +3740,7 @@ exports[`Article should render tile and sub title 1`] = `
                           >
                             <a
                               class="nk-card-link emotion-166"
-                              href="https://newskit.co.uk/"
+                              href="undefined"
                             >
                               <section
                                 class="emotion-167"
@@ -3791,7 +3791,7 @@ exports[`Article should render tile and sub title 1`] = `
                           >
                             <a
                               class="nk-card-link emotion-166"
-                              href="https://newskit.co.uk/"
+                              href="undefined"
                             >
                               <section
                                 class="emotion-167"
@@ -3991,21 +3991,26 @@ exports[`Article should render tile and sub title 1`] = `
                           <div
                             class="emotion-220"
                           >
-                            <section
-                              class="emotion-221"
+                            <a
+                              class="nk-card-link emotion-166"
+                              href="undefined"
                             >
-                              <h6
-                                class="nk-headline-heading emotion-8"
+                              <section
+                                class="emotion-222"
                               >
-                                Prince Harry
-                              </h6>
-                            </section>
+                                <h6
+                                  class="nk-headline-heading emotion-168"
+                                >
+                                  Prince Harry
+                                </h6>
+                              </section>
+                            </a>
                           </div>
                           <div
                             class="emotion-220"
                           >
                             <p
-                              class="emotion-224"
+                              class="emotion-225"
                             >
                               news
                             </p>
@@ -4050,21 +4055,26 @@ exports[`Article should render tile and sub title 1`] = `
                           <div
                             class="emotion-220"
                           >
-                            <section
-                              class="emotion-221"
+                            <a
+                              class="nk-card-link emotion-166"
+                              href="undefined"
                             >
-                              <h6
-                                class="nk-headline-heading emotion-8"
+                              <section
+                                class="emotion-222"
                               >
-                                Meghan Markle
-                              </h6>
-                            </section>
+                                <h6
+                                  class="nk-headline-heading emotion-168"
+                                >
+                                  Meghan Markle
+                                </h6>
+                              </section>
+                            </a>
                           </div>
                           <div
                             class="emotion-220"
                           >
                             <p
-                              class="emotion-224"
+                              class="emotion-225"
                             >
                               news
                             </p>
@@ -4078,7 +4088,7 @@ exports[`Article should render tile and sub title 1`] = `
                   class="emotion-181"
                 >
                   <div
-                    class="emotion-240"
+                    class="emotion-242"
                   >
                     <hr
                       aria-hidden="true"
@@ -4148,7 +4158,7 @@ exports[`Article should render tile and sub title 1`] = `
           data-testid="PageLayout"
         >
           <div
-            class="emotion-253"
+            class="emotion-255"
           />
         </div>
       </div>

package/components/section/ArticleSlice.tsx

@@ -1,46 +1,23 @@
 import React from 'react'
-import { Block, getColorCssFromTheme } from 'newskit'
-import {
-  ArticleSlice as Slice,
-  CollectionBlock,
-} from '../../helpers/global-types'
-import { Lead, SectionRow, FallBack } from './layouts'
-import { SectionContext } from './SectionContext'
+import { Block } from 'newskit'
+import { ArticleSlice as Slice } from '../../helpers/global-types'
+import { Lead, LeadFullWidth, FallBack } from './layouts'
+import { Row3, BasicRow } from './layouts/Rows'
 
-const sliceBlockBuilder = (slice: Slice, collection: CollectionBlock) => {
-  const sectionURL = collection?.link?.url || '/uncategorized'
-  /* add layout to case statments when ready */
+const sliceBlockBuilder = (slice: Slice) => {
   const sliceTypes = {
+    LEAD_1_FULL_WIDTH: <LeadFullWidth slice={slice} />,
     SUPPLEMENT_LEAD_AND_4_STACK: <Lead slice={slice} />,
-    SECONDARY_4: (
-      <SectionContext.Consumer>
-        {({ isIndexPage }) => (
-          <SectionRow
-            slice={slice}
-            collection={collection}
-            sectionURL={sectionURL}
-            showTitle={!isIndexPage}
-          />
-        )}
-      </SectionContext.Consumer>
+    SECONDARY_2_AND_2: (
+      <BasicRow slice={slice} colums={{ xs: '1fr', md: '1fr 1fr' }} />
     ),
-    SECONDARY_4_ODD: (
-      <SectionContext.Consumer>
-        {({ isIndexPage }) => (
-          <SectionRow
-            slice={slice}
-            collection={collection}
-            sectionURL={sectionURL}
-            isDarkBackground
-            addTopSpace={isIndexPage}
-            titleBarColour={
-              (isIndexPage &&
-                `${getColorCssFromTheme('color', 'transparent')}`) as string
-            }
-            titleBarStylePreset={(isIndexPage && 'inkContrast') as string}
-          />
-        )}
-      </SectionContext.Consumer>
+    SECONDARY_3: <Row3 slice={slice} />,
+    SECONDARY_4: (
+      <BasicRow
+        slice={slice}
+        colums={{ xs: '1fr', md: '1fr 1fr', lg: '1fr 1fr 1fr 1fr' }}
+        variant="horizontal"
+      />
     ),
     default: <FallBack slice={slice} />,
   }
@@ -48,13 +25,10 @@ const sliceBlockBuilder = (slice: Slice, collection: CollectionBlock) => {
   return sliceTypes[slice.name] || sliceTypes.default
 }
 
-const ArticleSlice: React.FC<{ slice: Slice; collection: CollectionBlock }> = ({
-  slice,
-  collection,
-}) => (
+const ArticleSlice: React.FC<{ slice: Slice }> = ({ slice }) => (
   <>
+    {sliceBlockBuilder(slice)}
     <Block spaceStack="space070" />
-    {sliceBlockBuilder(slice, collection)}
   </>
 )
 

package/components/section/CollectionBlock.tsx

@@ -1,15 +1,16 @@
+import { Block } from 'newskit'
 import React from 'react'
 import {
   CollectionBlock as Collection,
   ArticleSlice as Slice,
 } from '../../helpers/global-types'
 import ArticleSlice from './ArticleSlice'
+import { SectionTitle } from './layouts'
+import { SectionContext } from './SectionContext'
 
 const collectionSliceOptions = (type: string) => {
   const sliceTypes = {
-    slice: (slice: Slice, collection: Collection, i: number) => (
-      <ArticleSlice slice={slice} collection={collection} key={i} />
-    ),
+    slice: (slice: Slice, i: number) => <ArticleSlice slice={slice} key={i} />,
     'topic-author-slice': () => null,
     default: () => null,
   }
@@ -17,9 +18,40 @@ const collectionSliceOptions = (type: string) => {
   return sliceTypes[type] || sliceTypes.default
 }
 
-const CollectionBlock = (collection: Collection) =>
-  collection.children.map((slice, i) =>
-    collectionSliceOptions(slice.type)(slice, collection, i)
+type CollectionBlockProps = {
+  collection: Collection
+  index: number
+}
+
+const CollectionBlock: React.FC<CollectionBlockProps> = ({
+  collection,
+  index,
+}) => {
+  const sectionURL = collection?.link?.url || '/uncategorized'
+  const titleBarColors = ['', 'teal050', 'purple050', 'neutral050']
+
+  return (
+    <>
+      {index !== 0 && (
+        <SectionContext.Consumer>
+          {
+            ({ isIndexPage }) =>
+              !isIndexPage && (
+                <SectionTitle
+                  title={collection.title}
+                  sectionURL={sectionURL}
+                  titleBarColour={titleBarColors[index]}
+                />
+              )
+            /* eslint-disable-next-line */
+          }
+        </SectionContext.Consumer>
+      )}
+      {collection.children.map((slice, i) =>
+        collectionSliceOptions(slice.type)(slice, i)
+      )}
+    </>
   )
+}
 
 export default CollectionBlock