feat(TMRS-482): add CategorisedArticles (#3976)

newsuk · Dec 2, 2024 · 164ee6a · 164ee6a
1 parent efddfee
commit 164ee6a
Show file tree

Hide file tree

Showing 26 changed files with 440 additions and 31 deletions.
diff --git a/packages/article-extras/__tests__/shared.js b/packages/article-extras/__tests__/shared.js
@@ -11,7 +11,11 @@ import { iterator } from "@times-components/test-utils";
 
 import { UserState } from "./mocks";
 import ArticleExtras from "../src/article-extras";
-import { relatedArticleSlice, topics } from "../fixtures/article-extras";
+import {
+  relatedArticleSlice,
+  categorisedArticles,
+  topics
+} from "../fixtures/article-extras";
 
 const commentingConfig = {
   account: "sp_pCQgrRiN"
@@ -45,6 +49,7 @@ export default () => {
             commentsEnabled
             registerNode={() => {}}
             relatedArticleSlice={relatedArticleSlice}
+            categorisedArticles={categorisedArticles}
             relatedArticlesVisible
             commentingConfig={commentingConfig}
             topics={topics}
@@ -56,7 +61,7 @@ export default () => {
     },
     {
       name:
-        "no topics and comments when user not logged in, only related articles and sponsored div",
+        "no topics and comments when user not logged in, only related articles, category articles, and sponsored div",
       test: () => {
         UserState.mockStates = [];
         const testInstance = TestRenderer.create(
@@ -66,6 +71,7 @@ export default () => {
             commentsEnabled
             registerNode={() => {}}
             relatedArticleSlice={relatedArticleSlice}
+            categorisedArticles={categorisedArticles}
             relatedArticlesVisible
             commentingConfig={commentingConfig}
             topics={topics}
@@ -85,6 +91,7 @@ export default () => {
             commentsEnabled
             registerNode={() => {}}
             relatedArticleSlice={relatedArticleSlice}
+            categorisedArticles={categorisedArticles}
             relatedArticlesVisible
             commentingConfig={commentingConfig}
             topics={topics}
@@ -104,6 +111,7 @@ export default () => {
             commentsEnabled
             registerNode={() => {}}
             relatedArticleSlice={relatedArticleSlice}
+            categorisedArticles={categorisedArticles}
             relatedArticlesVisible
             commentingConfig={commentingConfig}
             topics={topics}

diff --git a/packages/article-extras/__tests__/web/__snapshots__/article-extras.test.js.snap b/packages/article-extras/__tests__/web/__snapshots__/article-extras.test.js.snap
@@ -17,6 +17,7 @@ Array [
     id="related-articles"
   >
     <RelatedArticles
+      hideBorder={false}
       isVisible={true}
     />
     <div>
@@ -56,14 +57,107 @@ Array [
 ]
 `;
 
-exports[`2. no topics and comments when user not logged in, only related articles and sponsored div 1`] = `
+exports[`2. no topics and comments when user not logged in, only related articles, category articles, and sponsored div 1`] = `
 Array [
   <div
     id="related-articles"
   >
     <RelatedArticles
+      hideBorder={true}
       isVisible={true}
     />
+    <div
+      id="categorised-articles"
+    >
+      <div>
+        More from category
+      </div>
+      <div>
+        <div>
+          <article>
+            <div>
+              <div>
+                <a
+                  href="/article/tms-pratchetts-law-of-the-jungle-xgqrcw779"
+                >
+                  <div>
+                    <div>
+                      <img
+                        alt="TMS: Pratchett’s law of the jungle - Disable Saving 2"
+                      />
+                    </div>
+                  </div>
+                </a>
+              </div>
+            </div>
+            <div>
+              <p>
+                Health
+              </p>
+              <div>
+                <a
+                  href="/article/tms-pratchetts-law-of-the-jungle-xgqrcw779"
+                >
+                  <h3>
+                    TMS: Pratchett’s law of the jungle - Disable Saving 2
+                  </h3>
+                </a>
+              </div>
+              <p>
+                March 23 2015, 8.39pm
+              </p>
+              
+            </div>
+          </article>
+        </div>
+      </div>
+    </div>
+    <div
+      id="categorised-articles"
+    >
+      <div>
+        More from parent
+      </div>
+      <div>
+        <div>
+          <article>
+            <div>
+              <div>
+                <a
+                  href="/article/tms-pratchetts-law-of-the-jungle-xgqrcw779"
+                >
+                  <div>
+                    <div>
+                      <img
+                        alt="TMS: Pratchett’s law of the jungle - Disable Saving"
+                      />
+                    </div>
+                  </div>
+                </a>
+              </div>
+            </div>
+            <div>
+              <p>
+                Health
+              </p>
+              <div>
+                <a
+                  href="/article/tms-pratchetts-law-of-the-jungle-xgqrcw779"
+                >
+                  <h3>
+                    TMS: Pratchett’s law of the jungle - Disable Saving
+                  </h3>
+                </a>
+              </div>
+              <p>
+                March 23 2015, 7.39pm
+              </p>
+              
+            </div>
+          </article>
+        </div>
+      </div>
+    </div>
   </div>,
   <div>
     <span>
@@ -105,6 +199,7 @@ Array [
     id="related-articles"
   >
     <RelatedArticles
+      hideBorder={false}
       isVisible={true}
     />
     <div>
@@ -161,6 +256,7 @@ Array [
     id="related-articles"
   >
     <RelatedArticles
+      hideBorder={false}
       isVisible={true}
     />
     <div>

diff --git a/packages/article-extras/fixtures/article-extras.js b/packages/article-extras/fixtures/article-extras.js
@@ -609,6 +609,90 @@ const relatedArticleSlice = {
   ],
   sliceName: "StandardSlice"
 };
+
+const categorisedArticles = {
+  categoryArticles: {
+    label: "category",
+    articles: [
+      {
+        bylines: [
+          {
+            byline: [
+              {
+                attributes: {},
+                children: [
+                  {
+                    attributes: {
+                      value: "Patrick Kidd"
+                    },
+                    children: [],
+                    name: "text"
+                  }
+                ],
+                name: "inline"
+              }
+            ]
+          }
+        ],
+        headline: "TMS: Pratchett’s law of the jungle - Disable Saving 2",
+        label: "Health",
+        media: {
+          crops: [
+            {
+              url:
+                "https://www.thetimes.co.uk/imageserver/image/methode%2Ftimes%2Fprod%2Fweb%2Fbin%2F0547a7be-fb77-11e7-a987-7fcf5e9983dc.jpg?crop=1600%2C1125%2C0%2C104",
+              ratio: "3:2"
+            }
+          ]
+        },
+        publicationName: "TIMES",
+        publishedDateTime: "2015-03-23T20:39:39.000Z",
+        categoryPath: "/article/tms-pratchetts-law-of-the-jungle-xgqrcw779"
+      }
+    ]
+  },
+  parentCategoryArticles: {
+    label: "parent",
+    articles: [
+      {
+        bylines: [
+          {
+            byline: [
+              {
+                attributes: {},
+                children: [
+                  {
+                    attributes: {
+                      value: "Patrick Kidd"
+                    },
+                    children: [],
+                    name: "text"
+                  }
+                ],
+                name: "inline"
+              }
+            ]
+          }
+        ],
+        headline: "TMS: Pratchett’s law of the jungle - Disable Saving",
+        label: "Health",
+        media: {
+          crops: [
+            {
+              url:
+                "https://www.thetimes.co.uk/imageserver/image/methode%2Ftimes%2Fprod%2Fweb%2Fbin%2F0547a7be-fb77-11e7-a987-7fcf5e9983dc.jpg?crop=1600%2C1125%2C0%2C104",
+              ratio: "3:2"
+            }
+          ]
+        },
+        publicationName: "TIMES",
+        publishedDateTime: "2015-03-23T19:39:39.000Z",
+        categoryPath: "/article/tms-pratchetts-law-of-the-jungle-xgqrcw779"
+      }
+    ]
+  }
+};
+
 const topics = [
   {
     __typename: "Topic",
@@ -637,4 +721,4 @@ const topics = [
   }
 ];
 
-export { relatedArticleSlice, topics };
+export { relatedArticleSlice, categorisedArticles, topics };
diff --git a/packages/article-extras/src/article-extras.js b/packages/article-extras/src/article-extras.js
@@ -5,7 +5,11 @@ import ArticleComments from "@times-components/article-comments";
 import RelatedArticles from "@times-components/related-articles";
 import { MessageContext } from "@times-components/message-bar";
 import SaveAndShareBar from "@times-components/save-and-share-bar";
-import { RecommendedFetch, Breadcrumb } from "@times-components/ts-components";
+import {
+  RecommendedFetch,
+  Breadcrumb,
+  CategorisedArticles
+} from "@times-components/ts-components";
 
 import ArticleTopics from "./article-topics";
 import {
@@ -35,6 +39,7 @@ const ArticleExtras = ({
   section,
   articleHeadline,
   relatedArticleSlice,
+  categorisedArticles,
   relatedArticlesVisible,
   commentingConfig,
   topics,
@@ -56,6 +61,10 @@ const ArticleExtras = ({
 
     return null;
   };
+  const categoryArticles =
+    (categorisedArticles && categorisedArticles.categoryArticles) || null;
+  const parentCategoryArticles =
+    (categorisedArticles && categorisedArticles.parentCategoryArticles) || null;
 
   /* Nativo insert Sponsored Articles after the div#sponsored-article element. They are not able to insert directly into that element hence the container div */
   const sponsoredArticlesAndRelatedArticles = (
@@ -69,6 +78,7 @@ const ArticleExtras = ({
           analyticsStream={analyticsStream}
           isVisible={relatedArticlesVisible}
           slice={relatedArticleSlice}
+          hideBorder={!isRecommendedActive && Boolean(categoryArticles)}
         />
         {isRecommendedActive && (
           <RecommendedFetch
@@ -77,6 +87,20 @@ const ArticleExtras = ({
             articleSection={section}
           />
         )}
+        {!isRecommendedActive &&
+          categoryArticles && (
+            <CategorisedArticles
+              heading={categoryArticles.label}
+              articles={categoryArticles.articles}
+            />
+          )}
+        {!isRecommendedActive &&
+          parentCategoryArticles && (
+            <CategorisedArticles
+              heading={parentCategoryArticles.label}
+              articles={parentCategoryArticles.articles}
+            />
+          )}
       </div>
       <PromotedContentContainer>
         <PromotedContentTitle>PROMOTED CONTENT</PromotedContentTitle>
@@ -141,6 +165,7 @@ ArticleExtras.propTypes = {
   commentsEnabled: PropTypes.bool.isRequired,
   registerNode: PropTypes.func.isRequired,
   relatedArticleSlice: PropTypes.shape({}),
+  categorisedArticles: PropTypes.shape({}),
   relatedArticlesVisible: PropTypes.bool.isRequired,
   commentingConfig: PropTypes.shape({
     account: PropTypes.string.isRequired
@@ -158,6 +183,7 @@ ArticleExtras.propTypes = {
 
 ArticleExtras.defaultProps = {
   relatedArticleSlice: null,
+  categorisedArticles: null,
   topics: null,
   isSharingSavingEnabled: true,
   isCommentEnabled: true,

diff --git a/packages/article-skeleton/src/article-skeleton.js b/packages/article-skeleton/src/article-skeleton.js
@@ -146,7 +146,8 @@ const ArticleSkeleton = ({
       window.removeEventListener("scroll", handleScroll);
     };
   }, []);
-  const { hostName, canonicalUrl, breadcrumbs } = articleDataFromRender || {};
+  const { hostName, canonicalUrl, breadcrumbs, categorisedArticles } =
+    articleDataFromRender || {};
   const articleUrl =
     hostName && canonicalUrl ? `${hostName}${canonicalUrl}` : url;
 
@@ -424,6 +425,7 @@ const ArticleSkeleton = ({
                       commentsEnabled={commentsEnabled}
                       registerNode={registerNode}
                       relatedArticleSlice={relatedArticleSlice}
+                      categorisedArticles={categorisedArticles}
                       relatedArticlesVisible={
                         !!observed.get("related-articles")
                       }

diff --git a/packages/related-articles/src/related-articles.js b/packages/related-articles/src/related-articles.js
@@ -13,7 +13,7 @@ class RelatedArticles extends Component {
   }
 
   render() {
-    const { isVisible, onPress, slice, heading } = this.props;
+    const { isVisible, onPress, slice, heading, hideBorder } = this.props;
     if (!slice) return null;
     const { items, sliceName } = slice;
     if (
@@ -61,6 +61,7 @@ class RelatedArticles extends Component {
       <TcView>
         <RelatedArticlesHeading heading={heading} />
         <StandardSlice
+          hideBorder={hideBorder}
           itemCount={items.length}
           renderItems={config =>
             items.map(item =>