@times-components/ts-components 1.48.13 → 1.48.16

package/src/components/recommended-articles/RecommendedArticles.tsx

@@ -1,11 +1,16 @@
 import React from 'react';
 import get from 'lodash.get';
-
-import RelatedArticles from '@times-components/related-articles';
+import {
+  Slice,
+  SliceArticle,
+  MouseEventType
+} from '@times-components/ts-slices';
 
 import { useFetch } from '../../helpers/fetch/FetchProvider';
 import { useTrackingContext } from '../../helpers/tracking/TrackingContextProvider';
-import { getRelatedArticlesSlice } from './formatters';
+import { getRecommendedArticlesSlice } from './formatters';
+
+import { Header } from './styles';
 
 export const RecommendedArticles: React.FC<{
   heading: string;
@@ -24,30 +29,21 @@ export const RecommendedArticles: React.FC<{
 
   const { fireAnalyticsEvent } = useTrackingContext();
 
-  const slice = getRelatedArticlesSlice(articles);
-
-  const onClickHandler = (__: MouseEvent, article: { url: string }) => {
-    const found = slice.items.find(
-      item => item.article.shortIdentifier === article.url.slice(-9)
-    );
-
+  const onClickHandler = (__: MouseEventType, article: SliceArticle) => {
     if (fireAnalyticsEvent) {
       fireAnalyticsEvent({
         action: 'Clicked',
-        attrs: { article_parent_name: found ? found.article.headline : '' }
+        attrs: { article_parent_name: article.headline }
       });
     }
   };
 
   return (
     <div id="recommended-articles">
-      <RelatedArticles
-        heading={heading}
-        slice={slice}
-        isVisible
-        onPress={onClickHandler}
-        // tslint:disable-next-line: no-empty
-        analyticsStream={() => {}}
+      <Header>{heading}</Header>
+      <Slice
+        slice={getRecommendedArticlesSlice(articles)}
+        clickHandler={onClickHandler}
       />
     </div>
   );

package/src/components/recommended-articles/__tests__/RecommendedArticles.test.tsx

@@ -13,16 +13,13 @@ jest.mock('../../../helpers/fetch/FetchProvider', () => ({
   useFetch: jest.fn()
 }));
 
-jest.mock('@times-components/related-articles', () => ({
+jest.mock('@times-components/ts-slices', () => ({
   __esModule: true,
-  default: (props: any) => (
+  Slice: (props: any) => (
     <div>
       RelatedArticles
-      <div>{props.heading}</div>
-      {props.slice.items.map(({ article }: any) => (
-        <div
-          onClick={() => props.onPress(null, { url: article.shortIdentifier })}
-        >
+      {props.slice.children.map(({ article }: any) => (
+        <div onClick={() => props.clickHandler(null, article)}>
           {article.headline}
         </div>
       ))}

package/src/components/recommended-articles/__tests__/__snapshots__/RecommendedArticles.test.tsx.snap

@@ -5,11 +5,13 @@ exports[`<RecommendedArticles> should render RelatedArticles correctly with 1 ar
   <div
     id="recommended-articles"
   >
+    <div
+      class="sc-bdVaJa layBAg"
+    >
+      Today's news
+    </div>
     <div>
       RelatedArticles
-      <div>
-        Today's news
-      </div>
       <div>
         Save or splurge: what experts spend their own money on
       </div>
@@ -23,11 +25,13 @@ exports[`<RecommendedArticles> should render RelatedArticles correctly with 2 ar
   <div
     id="recommended-articles"
   >
+    <div
+      class="sc-bdVaJa layBAg"
+    >
+      Today's news
+    </div>
     <div>
       RelatedArticles
-      <div>
-        Today's news
-      </div>
       <div>
         Save or splurge: what experts spend their own money on
       </div>
@@ -44,11 +48,13 @@ exports[`<RecommendedArticles> should render RelatedArticles correctly with 3 ar
   <div
     id="recommended-articles"
   >
+    <div
+      class="sc-bdVaJa layBAg"
+    >
+      Today's news
+    </div>
     <div>
       RelatedArticles
-      <div>
-        Today's news
-      </div>
       <div>
         Save or splurge: what experts spend their own money on
       </div>

package/src/components/recommended-articles/formatters.ts

@@ -1,8 +1,8 @@
-import { RelatedArticleSliceType } from '../../types/related-article-slice';
+import { SliceArticle } from '@times-components/ts-slices';
 
 // TYPES
 
-export type Byline =
+type Byline =
   | { __typename: string; type: 'author'; name: string }
   | { __typename: string; type: 'inline'; value: string };
 
@@ -14,10 +14,10 @@ type MediaCrop = {
 };
 type Media = { __typename: string; crops: MediaCrop[] };
 
-export type SummaryText = { __typename: string; text: string };
+type SummaryText = { __typename: string; text: string };
 type Summary = { __typename: string; children: SummaryText[] };
 
-export type Article = {
+type Article = {
   __typename: string;
   url: string;
   slug: string;
@@ -31,68 +31,58 @@ export type Article = {
 
 // HELPERS
 
-const getBylineAttr = (byline: Byline) => ({
-  value: byline.type === 'author' ? byline.name : byline.value
-});
+const getBylines = (bylines?: Byline[]) =>
+  bylines
+    ? bylines
+        .map(byline => (byline.type === 'author' ? byline.name : byline.value))
+        .join('')
+    : undefined;
 
-const getByline = (byline: Byline) => ({
-  name: byline.type,
-  children: [{ name: 'text', attributes: getBylineAttr(byline), children: [] }]
-});
+const getSummary = (summary?: Summary) =>
+  summary && summary.children
+    ? summary.children.map(child => child.text).join('') + '...'
+    : undefined;
 
-const getBylines = (bylines?: Byline[]) => {
-  if (bylines) {
-    return bylines.map((byline: Byline) => ({ byline: [getByline(byline)] }));
-  }
-  return undefined;
-};
+const getImageCrops = (media?: Media) =>
+  media && media.crops
+    ? media.crops.map(crop => ({ url: crop.url, ratio: crop.aspectRatio }))
+    : [];
 
-const getSummaryText = (summary: Summary) => {
-  const text = summary.children
-    .map((child: SummaryText) => child.text)
-    .join('');
-  return { value: text.slice(0, text.slice(0, 125).lastIndexOf(' ')) };
-};
-
-const getSummaryParagraph = (summary: Summary) => [
-  { name: 'text', attributes: getSummaryText(summary), children: [] }
-];
+// MAIN
 
-const getSummary = (summary?: Summary) => {
-  if (summary && summary.children) {
-    return [{ name: 'paragraph', children: getSummaryParagraph(summary) }];
-  }
-  return [];
+const formatArticle = (article: Article): SliceArticle => {
+  return {
+    url: article.url,
+    label: article.label,
+    byline: getBylines(article.bylines),
+    headline: article.headline,
+    summary: getSummary(article.summary),
+    datePublished: article.publishedDateTime,
+    images: {
+      alt: article.headline,
+      crops: getImageCrops(article.media)
+    }
+  };
 };
 
-const getImage = (media?: Media) => {
-  if (media && media.crops) {
-    const image = media.crops.find(
-      (crop: MediaCrop) => crop.aspectRatio === '16:9'
-    );
-    return image ? { crop169: { url: image.url }, title: image.alt } : null;
+const getSliceName = (numOfArticles: number) => {
+  switch (numOfArticles) {
+    case 1:
+      return 'RELATED_ARTICLE_1';
+    case 2:
+      return 'RELATED_ARTICLE_2';
+    default:
+      return 'RELATED_ARTICLE_3';
   }
-  return {};
 };
 
-// MAIN
-
-export const getRelatedArticlesSlice = (
-  articles: any
-): RelatedArticleSliceType => ({
-  sliceName: 'StandardSlice',
-  items: articles
-    .map((article: Article) => ({
-      article: {
-        slug: article.slug,
-        shortIdentifier: article.url.slice(-9),
-        label: article.label,
-        headline: article.headline,
-        publishedTime: article.publishedDateTime,
-        bylines: getBylines(article.bylines),
-        summary125: getSummary(article.summary),
-        leadAsset: getImage(article.media)
-      }
-    }))
-    .slice(0, 3)
-});
+export const getRecommendedArticlesSlice = (articles: Article[]) => {
+  return {
+    name: getSliceName(articles.length),
+    children: articles
+      .map((article: Article) => ({
+        article: formatArticle(article)
+      }))
+      .slice(0, 3)
+  };
+};

package/src/components/recommended-articles/styles.ts

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+import { colours, fonts } from '@times-components/ts-styleguide';
+
+export const Header = styled.div`
+  margin-bottom: 12px;
+  padding: 12px;
+  color: ${colours.functional.brandColour};
+  font-family: ${fonts.headline};
+  font-size: 24px;
+  line-height: 24px;
+  font-weight: normal;
+  text-align: center;
+  border-top: 1px solid #dbdbdb;
+  border-bottom: 1px solid #dbdbdb;
+`;

package/src/components/related-article-slice/__tests__/__snapshots__/RelatedArticleSlice.test.tsx.snap

@@ -15,7 +15,7 @@ exports[`RelatedArticleSlice renders 1 1`] = `
       Related Articles
     </div>
     <div
-      class="shared-styles__SliceContainer-ismxwo-0 styles__SliceContainer-b33h2c-0 dDeBKy"
+      class="shared-styles__SliceContainer-ismxwo-0 styles__SliceContainer-b33h2c-0 bJHjPH"
     >
       <div
         class="shared-styles__SlotContainer-ismxwo-1 styles__SlotContainer-b33h2c-1 cKwigu"
@@ -33,14 +33,14 @@ exports[`RelatedArticleSlice renders 1 1`] = `
                 href="https://www.thetimes.co.uk/article/how-to-recruit-the-best-young-people-to-your-business-5kksq826t"
               >
                 <div
-                  class="styles__ImageRatio-sc-8lglkt-1 gbnXjW"
+                  class="styles__ImageRatio-sc-8lglkt-1 kDSgGC"
                 >
                   <div
                     class="styles__LazyContainer-qsbah5-0 jRxzJB"
                   >
                     <img
                       alt=""
-                      src="https://www.thetimes.co.uk/imageserver/image/%2Fmethode%2Ftimes%2Fprod%2Fweb%2Fbin%2F7547ab46-ace4-11eb-bda6-057976012425.jpg?crop=5616%2C3744%2C0%2C0&resize=80"
+                      src="https://www.thetimes.co.uk/imageserver/image/%2Fmethode%2Ftimes%2Fprod%2Fweb%2Fbin%2F7547ab46-ace4-11eb-bda6-057976012425.jpg?crop=5616%2C3159%2C0%2C293&resize=80"
                     />
                   </div>
                 </div>
@@ -56,7 +56,7 @@ exports[`RelatedArticleSlice renders 1 1`] = `
               Comment
             </p>
             <div
-              class="styles__HeadlineContainer-k0mgwi-0 jkGvyo"
+              class="styles__HeadlineContainer-k0mgwi-0 ghKmOQ"
             >
               <a
                 href="https://www.thetimes.co.uk/article/how-to-recruit-the-best-young-people-to-your-business-5kksq826t"

package/src/fixtures/preview-data/recommended-articles.ts

@@ -7,7 +7,7 @@ export default {
         slug: 'save-or-splurge-what-experts-spend-their-own-money-on',
         label: null,
         headline: 'Save or splurge: what experts spend their own money on',
-        publishedDateTime: '2022-06-06T23:01:00.000Z',
+        publishedDateTime: '2022-07-26T23:01:00.000Z',
         bylines: [
           {
             type: 'inline',
@@ -54,7 +54,7 @@ export default {
         slug: 'lieutenant-colonel-ian-crooke-obituary',
         label: 'Obituary',
         headline: 'Lieutenant Colonel Ian Crooke',
-        publishedDateTime: '2022-06-06T16:00:00.000Z',
+        publishedDateTime: '2022-07-27T16:00:00.000Z',
         bylines: [],
         summary: {
           children: [
@@ -81,7 +81,7 @@ export default {
         slug: 'is-the-party-over-for-boris-johnson',
         label: 'RED BOX | PATRICK MAGUIRE',
         headline: 'Is the party over for Johnson?',
-        publishedDateTime: '2022-06-07T08:00:00.000Z',
+        publishedDateTime: '2022-07-27T08:00:00.000Z',
         bylines: [
           {
             type: 'author',
@@ -121,7 +121,7 @@ export default {
         label: 'Political Sketch',
         headline:
           'A PM, his party and the country left firmly in limp-on territory',
-        publishedDateTime: '2022-06-06T23:01:00.000Z',
+        publishedDateTime: '2022-07-26T23:01:00.000Z',
         bylines: [
           {
             type: 'author',
@@ -153,7 +153,7 @@ export default {
         slug: 'boris-johnson-should-look-for-an-honourable-exit',
         label: 'WILLIAM HAGUE | COMMENT',
         headline: 'Hague: Johnson should look for an honourable exit',
-        publishedDateTime: '2022-06-06T21:00:00.000Z',
+        publishedDateTime: '2022-07-26T21:00:00.000Z',
         bylines: [
           {
             type: 'author',
@@ -185,7 +185,7 @@ export default {
         slug: 'carrie-johnson-and-hard-times-at-no-10',
         label: 'POLITICS',
         headline: 'Carrie Johnson and hard times at No 10',
-        publishedDateTime: '2022-06-06T23:01:00.000Z',
+        publishedDateTime: '2022-07-26T23:01:00.000Z',
         bylines: [
           {
             type: 'author',
@@ -218,7 +218,7 @@ export default {
           'dead-man-walking-times-commentators-give-their-verdicts-boris-johnson-confidence-vote',
         label: 'Politics',
         headline: 'Dead man walking? Times commentators give their verdicts',
-        publishedDateTime: '2022-06-06T23:01:00.000Z',
+        publishedDateTime: '2022-07-26T23:01:00.000Z',
         bylines: [
           {
             type: 'inline',
@@ -270,7 +270,7 @@ export default {
         slug: 'margot-heuman-obituary',
         label: 'Obituary',
         headline: 'Margot Heuman',
-        publishedDateTime: '2022-06-06T23:01:00.000Z',
+        publishedDateTime: '2022-07-26T23:01:00.000Z',
         bylines: [],
         summary: {
           children: [
@@ -298,7 +298,7 @@ export default {
           'the-times-view-on-tory-confidence-in-boris-johnson-pyrrhic-victory',
         label: 'LEADING ARTICLE',
         headline: 'Pyrrhic Victory',
-        publishedDateTime: '2022-06-06T23:01:00.000Z',
+        publishedDateTime: '2022-07-26T23:01:00.000Z',
         bylines: [
           {
             type: 'author',
@@ -331,7 +331,7 @@ export default {
           'boris-johnson-allies-took-time-saving-big-dog-leadership-contest',
         label: 'Politics',
         headline: 'Allies took their time in campaign to save Big Dog',
-        publishedDateTime: '2022-06-06T23:01:00.000Z',
+        publishedDateTime: '2022-07-26T23:01:00.000Z',
         bylines: [
           {
             type: 'author',