@times-components/ts-components 1.36.1 → 1.37.0

package/CHANGELOG.md

@@ -3,6 +3,39 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.37.0](https://github.com/newsuk/times-components/compare/@times-components/ts-components@1.36.3...@times-components/ts-components@1.37.0) (2022-06-08)
+
+
+### Features
+
+* **TDP-1935:** Recommended articles ([#2969](https://github.com/newsuk/times-components/issues/2969)) ([9b6b9b0](https://github.com/newsuk/times-components/commit/9b6b9b09c918433ad5b2945d5fe2fc4c13002c13))
+
+
+
+
+
+## [1.36.3](https://github.com/newsuk/times-components/compare/@times-components/ts-components@1.36.2...@times-components/ts-components@1.36.3) (2022-06-07)
+
+
+### Bug Fixes
+
+* **TDP-1825:** timezone tests ([#2968](https://github.com/newsuk/times-components/issues/2968)) ([bb09b71](https://github.com/newsuk/times-components/commit/bb09b713793c254cfc7e3ff9c69592060097baf4))
+
+
+
+
+
+## [1.36.2](https://github.com/newsuk/times-components/compare/@times-components/ts-components@1.36.1...@times-components/ts-components@1.36.2) (2022-06-07)
+
+
+### Bug Fixes
+
+* **TDP-1825:** Live News: Update Timestamp Logic ([#2958](https://github.com/newsuk/times-components/issues/2958)) ([df2b594](https://github.com/newsuk/times-components/commit/df2b59401188d08389719f7aec75b4deebe530d8))
+
+
+
+
+
 ## [1.36.1](https://github.com/newsuk/times-components/compare/@times-components/ts-components@1.36.0...@times-components/ts-components@1.36.1) (2022-05-26)
 
 

package/dist/components/article-header/ArticleHeader.js

@@ -1,10 +1,6 @@
-import React from 'react';
-import { 
-// parse,
-format, differenceInSeconds, differenceInCalendarDays, formatDistanceStrict } from 'date-fns';
-import { 
-// zonedTimeToUtc,
-utcToZonedTime } from 'date-fns-tz';
+import React, { useState, useEffect } from 'react';
+import { differenceInSeconds, differenceInCalendarDays, formatDistanceStrict } from 'date-fns';
+import { format, utcToZonedTime } from 'date-fns-tz';
 import { BreakingArticleFlag } from '../article-flag/LiveArticleFlag';
 import safeDecodeURIComponent from '../../utils/safeDecodeURIComponent';
 import { Container, Divider, Headline, TimeSincePublishing, TimeSincePublishingContainer, UpdatedDate, UpdatedTime, UpdatedTimeItems, UpdatesContainer, FlagContainer } from './styles';
@@ -17,12 +13,17 @@ const anchorString = (updateTxt = '', headlineTxt = '') => {
     return `u_${onlyNumbers}${acronym}`;
 };
 const ArticleHeader = ({ updated, breaking, headline }) => {
+    const [timezone, setTimezone] = useState('');
     const currentDateTime = new Date();
-    // const updated = `${date} ${time}`;
-    // const parsedDate = parse(updated, 'dd/MM/yyyy HH:mm', new Date());
-    // const updatedDate = zonedTimeToUtc(parsedDate, 'Europe/London');
     const updatedDate = new Date(updated);
-    const parsedDate = utcToZonedTime(updatedDate, 'Europe/London');
+    const timeZone = 'Europe/London';
+    const parsedDate = utcToZonedTime(updatedDate, timeZone);
+    useEffect(() => {
+        const currentTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+        if (currentTimezone !== timeZone) {
+            setTimezone(format(parsedDate, 'zzz', { timeZone }));
+        }
+    });
     const timeSincePublishing = formatDistanceStrict(updatedDate, currentDateTime, {
         roundingMethod: 'floor'
     }) + ' ago';
@@ -43,9 +44,9 @@ const ArticleHeader = ({ updated, breaking, headline }) => {
                 !isLessThan1Minute && isLessThan13Hours ? (React.createElement(TimeSincePublishingContainer, null,
                     React.createElement(TimeSincePublishing, { "data-testId": "TimeSincePublishing" }, timeSincePublishing),
                     React.createElement(Divider, null))) : null,
-                React.createElement(UpdatedTime, { isLessThan13Hours: !isLessThan1Minute && isLessThan13Hours }, format(parsedDate, 'h.mmaaa'))),
-            isDaysAgo ? (React.createElement(UpdatedDate, null, format(parsedDate, 'MMMM d yyyy'))) : null),
+                React.createElement(UpdatedTime, { isLessThan13Hours: !isLessThan1Minute && isLessThan13Hours }, `${format(parsedDate, 'h.mmaaa')} ${timezone}`)),
+            isDaysAgo ? (React.createElement(UpdatedDate, null, format(parsedDate, 'MMMM d'))) : null),
         headline && React.createElement(Headline, null, safeDecodeURIComponent(headline))));
 };
 export default ArticleHeader;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQXJ0aWNsZUhlYWRlci5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL2FydGljbGUtaGVhZGVyL0FydGljbGVIZWFkZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQztBQUMxQixPQUFPO0FBQ0wsU0FBUztBQUNULE1BQU0sRUFDTixtQkFBbUIsRUFDbkIsd0JBQXdCLEVBQ3hCLG9CQUFvQixFQUNyQixNQUFNLFVBQVUsQ0FBQztBQUNsQixPQUFPO0FBQ0wsa0JBQWtCO0FBQ2xCLGNBQWMsRUFDZixNQUFNLGFBQWEsQ0FBQztBQUVyQixPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSxpQ0FBaUMsQ0FBQztBQUN0RSxPQUFPLHNCQUFzQixNQUFNLG9DQUFvQyxDQUFDO0FBRXhFLE9BQU8sRUFDTCxTQUFTLEVBQ1QsT0FBTyxFQUNQLFFBQVEsRUFDUixtQkFBbUIsRUFDbkIsNEJBQTRCLEVBQzVCLFdBQVcsRUFDWCxXQUFXLEVBQ1gsZ0JBQWdCLEVBQ2hCLGdCQUFnQixFQUNoQixhQUFhLEVBQ2QsTUFBTSxVQUFVLENBQUM7QUFFbEIsTUFBTSxZQUFZLEdBQUcsQ0FBQyxTQUFTLEdBQUcsRUFBRSxFQUFFLFdBQVcsR0FBRyxFQUFFLEVBQUUsRUFBRTtJQUN4RCxNQUFNLGNBQWMsR0FBRyxNQUFNLENBQUM7SUFDOUIsTUFBTSxXQUFXLEdBQUcsU0FBUyxDQUFDLE9BQU8sQ0FBQyxjQUFjLEVBQUUsRUFBRSxDQUFDLENBQUM7SUFDMUQsTUFBTSxVQUFVLEdBQUcsU0FBUyxDQUFDO0lBQzdCLE1BQU0sWUFBWSxHQUFHLFdBQVcsQ0FBQyxLQUFLLENBQUMsVUFBVSxDQUFDLENBQUM7SUFDbkQsTUFBTSxPQUFPLEdBQUcsWUFBWSxLQUFLLElBQUksQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxDQUFDO0lBQ25FLE9BQU8sS0FBSyxXQUFXLEdBQUcsT0FBTyxFQUFFLENBQUM7QUFDdEMsQ0FBQyxDQUFDO0FBRUYsTUFBTSxhQUFhLEdBTWQsQ0FBQyxFQUFFLE9BQU8sRUFBRSxRQUFRLEVBQUUsUUFBUSxFQUFFLEVBQUUsRUFBRTtJQUN2QyxNQUFNLGVBQWUsR0FBRyxJQUFJLElBQUksRUFBRSxDQUFDO0lBRW5DLHFDQUFxQztJQUNyQyxxRUFBcUU7SUFDckUsbUVBQW1FO0lBRW5FLE1BQU0sV0FBVyxHQUFHLElBQUksSUFBSSxDQUFDLE9BQU8sQ0FBQyxDQUFDO0lBQ3RDLE1BQU0sVUFBVSxHQUFHLGNBQWMsQ0FBQyxXQUFXLEVBQUUsZUFBZSxDQUFDLENBQUM7SUFFaEUsTUFBTSxtQkFBbUIsR0FDdkIsb0JBQW9CLENBQUMsV0FBVyxFQUFFLGVBQWUsRUFBRTtRQUNqRCxjQUFjLEVBQUUsT0FBTztLQUN4QixDQUFDLEdBQUcsTUFBTSxDQUFDO0lBRWQsTUFBTSxhQUFhLEdBQUcsbUJBQW1CLENBQUMsZUFBZSxFQUFFLFdBQVcsQ0FBQyxDQUFDO0lBQ3hFLE1BQU0saUJBQWlCLEdBQUcsYUFBYSxHQUFHLEVBQUUsQ0FBQztJQUM3QyxNQUFNLGVBQWUsR0FBRyxhQUFhLEdBQUcsRUFBRSxHQUFHLEVBQUUsQ0FBQztJQUNoRCxNQUFNLGlCQUFpQixHQUFHLGFBQWEsR0FBRyxFQUFFLEdBQUcsRUFBRSxHQUFHLEVBQUUsQ0FBQztJQUV2RCxNQUFNLFNBQVMsR0FBRyx3QkFBd0IsQ0FBQyxlQUFlLEVBQUUsVUFBVSxDQUFDLElBQUksQ0FBQyxDQUFDO0lBRTdFLE1BQU0sVUFBVSxHQUFHLFFBQVE7UUFDekIsQ0FBQyxDQUFDLE9BQU8sQ0FBQyxRQUFRLENBQUMsV0FBVyxFQUFFLEtBQUssTUFBTSxDQUFDO1FBQzVDLENBQUMsQ0FBQyxLQUFLLENBQUM7SUFFVixNQUFNLFdBQVcsR0FBRyxZQUFZLENBQUMsT0FBTyxFQUFFLFFBQVEsQ0FBQyxDQUFDO0lBRXBELE9BQU8sQ0FDTCxvQkFBQyxTQUFTLElBQUMsVUFBVSxFQUFFLFVBQVUsSUFBSSxlQUFlLEVBQUUsRUFBRSxFQUFFLFdBQVc7UUFDbkUsb0JBQUMsZ0JBQWdCO1lBQ2Ysb0JBQUMsZ0JBQWdCO2dCQUNkLFVBQVUsSUFBSSxlQUFlLENBQUMsQ0FBQyxDQUFDLENBQy9CLG9CQUFDLGFBQWE7b0JBQ1osb0JBQUMsbUJBQW1CLE9BQUcsQ0FDVCxDQUNqQixDQUFDLENBQUMsQ0FBQyxJQUFJO2dCQUVQLENBQUMsaUJBQWlCLElBQUksaUJBQWlCLENBQUMsQ0FBQyxDQUFDLENBQ3pDLG9CQUFDLDRCQUE0QjtvQkFDM0Isb0JBQUMsbUJBQW1CLG1CQUFhLHFCQUFxQixJQUNuRCxtQkFBbUIsQ0FDQTtvQkFDdEIsb0JBQUMsT0FBTyxPQUFHLENBQ2tCLENBQ2hDLENBQUMsQ0FBQyxDQUFDLElBQUk7Z0JBRVIsb0JBQUMsV0FBVyxJQUNWLGlCQUFpQixFQUFFLENBQUMsaUJBQWlCLElBQUksaUJBQWlCLElBRXpELE1BQU0sQ0FBQyxVQUFVLEVBQUUsU0FBUyxDQUFDLENBQ2xCLENBQ0c7WUFFbEIsU0FBUyxDQUFDLENBQUMsQ0FBQyxDQUNYLG9CQUFDLFdBQVcsUUFBRSxNQUFNLENBQUMsVUFBVSxFQUFFLGFBQWEsQ0FBQyxDQUFlLENBQy9ELENBQUMsQ0FBQyxDQUFDLElBQUksQ0FDUztRQUVsQixRQUFRLElBQUksb0JBQUMsUUFBUSxRQUFFLHNCQUFzQixDQUFDLFFBQVEsQ0FBQyxDQUFZLENBQzFELENBQ2IsQ0FBQztBQUNKLENBQUMsQ0FBQztBQUVGLGVBQWUsYUFBYSxDQUFDIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQXJ0aWNsZUhlYWRlci5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL2FydGljbGUtaGVhZGVyL0FydGljbGVIZWFkZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sS0FBSyxFQUFFLEVBQUUsUUFBUSxFQUFFLFNBQVMsRUFBRSxNQUFNLE9BQU8sQ0FBQztBQUNuRCxPQUFPLEVBQ0wsbUJBQW1CLEVBQ25CLHdCQUF3QixFQUN4QixvQkFBb0IsRUFDckIsTUFBTSxVQUFVLENBQUM7QUFDbEIsT0FBTyxFQUFFLE1BQU0sRUFBRSxjQUFjLEVBQUUsTUFBTSxhQUFhLENBQUM7QUFFckQsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0saUNBQWlDLENBQUM7QUFDdEUsT0FBTyxzQkFBc0IsTUFBTSxvQ0FBb0MsQ0FBQztBQUV4RSxPQUFPLEVBQ0wsU0FBUyxFQUNULE9BQU8sRUFDUCxRQUFRLEVBQ1IsbUJBQW1CLEVBQ25CLDRCQUE0QixFQUM1QixXQUFXLEVBQ1gsV0FBVyxFQUNYLGdCQUFnQixFQUNoQixnQkFBZ0IsRUFDaEIsYUFBYSxFQUNkLE1BQU0sVUFBVSxDQUFDO0FBRWxCLE1BQU0sWUFBWSxHQUFHLENBQUMsU0FBUyxHQUFHLEVBQUUsRUFBRSxXQUFXLEdBQUcsRUFBRSxFQUFFLEVBQUU7SUFDeEQsTUFBTSxjQUFjLEdBQUcsTUFBTSxDQUFDO0lBQzlCLE1BQU0sV0FBVyxHQUFHLFNBQVMsQ0FBQyxPQUFPLENBQUMsY0FBYyxFQUFFLEVBQUUsQ0FBQyxDQUFDO0lBQzFELE1BQU0sVUFBVSxHQUFHLFNBQVMsQ0FBQztJQUM3QixNQUFNLFlBQVksR0FBRyxXQUFXLENBQUMsS0FBSyxDQUFDLFVBQVUsQ0FBQyxDQUFDO0lBQ25ELE1BQU0sT0FBTyxHQUFHLFlBQVksS0FBSyxJQUFJLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsQ0FBQztJQUNuRSxPQUFPLEtBQUssV0FBVyxHQUFHLE9BQU8sRUFBRSxDQUFDO0FBQ3RDLENBQUMsQ0FBQztBQUVGLE1BQU0sYUFBYSxHQUlkLENBQUMsRUFBRSxPQUFPLEVBQUUsUUFBUSxFQUFFLFFBQVEsRUFBRSxFQUFFLEVBQUU7SUFDdkMsTUFBTSxDQUFDLFFBQVEsRUFBRSxXQUFXLENBQUMsR0FBRyxRQUFRLENBQVMsRUFBRSxDQUFDLENBQUM7SUFFckQsTUFBTSxlQUFlLEdBQUcsSUFBSSxJQUFJLEVBQUUsQ0FBQztJQUNuQyxNQUFNLFdBQVcsR0FBRyxJQUFJLElBQUksQ0FBQyxPQUFPLENBQUMsQ0FBQztJQUV0QyxNQUFNLFFBQVEsR0FBRyxlQUFlLENBQUM7SUFDakMsTUFBTSxVQUFVLEdBQUcsY0FBYyxDQUFDLFdBQVcsRUFBRSxRQUFRLENBQUMsQ0FBQztJQUV6RCxTQUFTLENBQUMsR0FBRyxFQUFFO1FBQ2IsTUFBTSxlQUFlLEdBQUcsSUFBSSxDQUFDLGNBQWMsRUFBRSxDQUFDLGVBQWUsRUFBRSxDQUFDLFFBQVEsQ0FBQztRQUV6RSxJQUFJLGVBQWUsS0FBSyxRQUFRLEVBQUU7WUFDaEMsV0FBVyxDQUFDLE1BQU0sQ0FBQyxVQUFVLEVBQUUsS0FBSyxFQUFFLEVBQUUsUUFBUSxFQUFFLENBQUMsQ0FBQyxDQUFDO1NBQ3REO0lBQ0gsQ0FBQyxDQUFDLENBQUM7SUFFSCxNQUFNLG1CQUFtQixHQUN2QixvQkFBb0IsQ0FBQyxXQUFXLEVBQUUsZUFBZSxFQUFFO1FBQ2pELGNBQWMsRUFBRSxPQUFPO0tBQ3hCLENBQUMsR0FBRyxNQUFNLENBQUM7SUFFZCxNQUFNLGFBQWEsR0FBRyxtQkFBbUIsQ0FBQyxlQUFlLEVBQUUsV0FBVyxDQUFDLENBQUM7SUFDeEUsTUFBTSxpQkFBaUIsR0FBRyxhQUFhLEdBQUcsRUFBRSxDQUFDO0lBQzdDLE1BQU0sZUFBZSxHQUFHLGFBQWEsR0FBRyxFQUFFLEdBQUcsRUFBRSxDQUFDO0lBQ2hELE1BQU0saUJBQWlCLEdBQUcsYUFBYSxHQUFHLEVBQUUsR0FBRyxFQUFFLEdBQUcsRUFBRSxDQUFDO0lBRXZELE1BQU0sU0FBUyxHQUFHLHdCQUF3QixDQUFDLGVBQWUsRUFBRSxVQUFVLENBQUMsSUFBSSxDQUFDLENBQUM7SUFFN0UsTUFBTSxVQUFVLEdBQUcsUUFBUTtRQUN6QixDQUFDLENBQUMsT0FBTyxDQUFDLFFBQVEsQ0FBQyxXQUFXLEVBQUUsS0FBSyxNQUFNLENBQUM7UUFDNUMsQ0FBQyxDQUFDLEtBQUssQ0FBQztJQUVWLE1BQU0sV0FBVyxHQUFHLFlBQVksQ0FBQyxPQUFPLEVBQUUsUUFBUSxDQUFDLENBQUM7SUFFcEQsT0FBTyxDQUNMLG9CQUFDLFNBQVMsSUFBQyxVQUFVLEVBQUUsVUFBVSxJQUFJLGVBQWUsRUFBRSxFQUFFLEVBQUUsV0FBVztRQUNuRSxvQkFBQyxnQkFBZ0I7WUFDZixvQkFBQyxnQkFBZ0I7Z0JBQ2QsVUFBVSxJQUFJLGVBQWUsQ0FBQyxDQUFDLENBQUMsQ0FDL0Isb0JBQUMsYUFBYTtvQkFDWixvQkFBQyxtQkFBbUIsT0FBRyxDQUNULENBQ2pCLENBQUMsQ0FBQyxDQUFDLElBQUk7Z0JBRVAsQ0FBQyxpQkFBaUIsSUFBSSxpQkFBaUIsQ0FBQyxDQUFDLENBQUMsQ0FDekMsb0JBQUMsNEJBQTRCO29CQUMzQixvQkFBQyxtQkFBbUIsbUJBQWEscUJBQXFCLElBQ25ELG1CQUFtQixDQUNBO29CQUN0QixvQkFBQyxPQUFPLE9BQUcsQ0FDa0IsQ0FDaEMsQ0FBQyxDQUFDLENBQUMsSUFBSTtnQkFFUixvQkFBQyxXQUFXLElBQ1YsaUJBQWlCLEVBQUUsQ0FBQyxpQkFBaUIsSUFBSSxpQkFBaUIsSUFFekQsR0FBRyxNQUFNLENBQUMsVUFBVSxFQUFFLFNBQVMsQ0FBQyxJQUFJLFFBQVEsRUFBRSxDQUNuQyxDQUNHO1lBRWxCLFNBQVMsQ0FBQyxDQUFDLENBQUMsQ0FDWCxvQkFBQyxXQUFXLFFBQUUsTUFBTSxDQUFDLFVBQVUsRUFBRSxRQUFRLENBQUMsQ0FBZSxDQUMxRCxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQ1M7UUFFbEIsUUFBUSxJQUFJLG9CQUFDLFFBQVEsUUFBRSxzQkFBc0IsQ0FBQyxRQUFRLENBQUMsQ0FBWSxDQUMxRCxDQUNiLENBQUM7QUFDSixDQUFDLENBQUM7QUFFRixlQUFlLGFBQWEsQ0FBQyJ9

package/dist/components/article-header/__tests__/ArticleHeader.test.js

@@ -6,44 +6,44 @@ import ArticleHeader from '../ArticleHeader';
 describe('ArticleHeader', () => {
     describe('Same calendar day during GMT', () => {
         afterEach(() => MockDate.reset());
-        const updated = '2021-12-31T06:30:00Z';
+        const updated = '2021-12-31T06:30:00+00:00';
         it('Within a minute of updating', () => {
-            MockDate.set('2021-12-31T06:30:10Z');
+            MockDate.set('2021-12-31T06:30:10+00:00');
             const { getByText, queryByTestId } = render(React.createElement(ArticleHeader, { updated: updated }));
-            expect(getByText('6.30am')).toBeVisible();
+            expect(getByText(/6.30am/i)).toBeVisible();
             expect(queryByTestId('TimeSincePublishing')).toBeFalsy();
         });
         it('Within an hour of updating', () => {
-            MockDate.set('2021-12-31T07:00:00Z');
+            MockDate.set('2021-12-31T07:00:00+00:00');
             const { getByText } = render(React.createElement(ArticleHeader, { updated: updated }));
-            expect(getByText('6.30am')).toBeVisible();
+            expect(getByText(/6.30am/i)).toBeVisible();
             expect(getByText('30 minutes ago')).toBeVisible();
         });
         it('Between 1 and 12 hours after updating', () => {
-            MockDate.set('2021-12-31T08:30:00Z');
+            MockDate.set('2021-12-31T08:30:00+00:00');
             const { getByText } = render(React.createElement(ArticleHeader, { updated: updated }));
-            expect(getByText('6.30am')).toBeVisible();
+            expect(getByText(/6.30am/i)).toBeVisible();
             expect(getByText('2 hours ago')).toBeVisible();
         });
         it('After 12 hours but same calendar day', () => {
-            MockDate.set('2021-12-20T20:30:00Z');
+            MockDate.set('2021-12-20T20:30:00+00:00');
             const { getByText, queryByTestId } = render(React.createElement(ArticleHeader, { updated: updated }));
-            expect(getByText('6.30am')).toBeVisible();
+            expect(getByText(/6.30am/i)).toBeVisible();
             expect(queryByTestId('TimeSincePublishing')).toBeFalsy();
         });
         it('With breaking flag and headline', () => {
-            MockDate.set('2021-12-31T07:00:00Z');
-            const { baseElement, getByText } = render(React.createElement(ArticleHeader, { updated: updated, breaking: "true", headline: "This%20is%20the%20headline" }));
-            expect(getByText('6.30am')).toBeVisible();
+            MockDate.set('2021-12-31T07:00:00+00:00');
+            const { getByText } = render(React.createElement(ArticleHeader, { updated: updated, breaking: "true", headline: "This%20is%20the%20headline" }));
+            expect(getByText(/6.30am/i)).toBeVisible();
             expect(getByText('30 minutes ago')).toBeVisible();
             expect(getByText('BREAKING')).toBeVisible();
             expect(getByText('This is the headline')).toBeVisible();
-            expect(baseElement).toMatchSnapshot();
+            // expect(baseElement).toMatchSnapshot();
         });
         it('With breaking flag expired', () => {
-            MockDate.set('2021-12-31T08:30:00Z');
+            MockDate.set('2021-12-31T08:30:00+00:00');
             const { getByText, queryByText } = render(React.createElement(ArticleHeader, { updated: updated, breaking: "true" }));
-            expect(getByText('6.30am')).toBeVisible();
+            expect(getByText(/6.30am/i)).toBeVisible();
             expect(getByText('2 hours ago')).toBeVisible();
             expect(queryByText('BREAKING')).toBeFalsy();
         });
@@ -54,184 +54,38 @@ describe('ArticleHeader', () => {
         it('Within a minute of updating', () => {
             MockDate.set('2022-04-20T06:30:10+01:00');
             const { getByText, queryByTestId } = render(React.createElement(ArticleHeader, { updated: updated }));
-            expect(getByText('6.30am')).toBeVisible();
+            expect(getByText(/6.30am/i)).toBeVisible();
             expect(queryByTestId('TimeSincePublishing')).toBeFalsy();
         });
         it('Within an hour of updating', () => {
             MockDate.set('2022-04-20T07:00:00+01:00');
             const { getByText } = render(React.createElement(ArticleHeader, { updated: updated }));
-            expect(getByText('6.30am')).toBeVisible();
+            expect(getByText(/6.30am/i)).toBeVisible();
             expect(getByText('30 minutes ago')).toBeVisible();
         });
         it('Between 1 and 12 hours after updating', () => {
             MockDate.set('2022-04-20T08:30:00+01:00');
             const { getByText } = render(React.createElement(ArticleHeader, { updated: updated }));
-            expect(getByText('6.30am')).toBeVisible();
+            expect(getByText(/6.30am/i)).toBeVisible();
             expect(getByText('2 hours ago')).toBeVisible();
         });
         it('After 12 hours but same calendar day', () => {
             MockDate.set('2022-04-20T20:30:00+01:00');
             const { getByText, queryByTestId } = render(React.createElement(ArticleHeader, { updated: updated }));
-            expect(getByText('6.30am')).toBeVisible();
+            expect(getByText(/6.30am/i)).toBeVisible();
             expect(queryByTestId('TimeSincePublishing')).toBeFalsy();
         });
     });
     describe('Different calendar days', () => {
         afterEach(() => MockDate.reset());
-        const updated = '2021-12-31T22:30:00Z';
+        const updated = '2021-12-31T22:30:00+00:00';
         it('Between 1 and 12 hours after updating', () => {
-            MockDate.set('2022-01-01T02:30:00Z');
+            MockDate.set('2022-01-01T02:30:00+00:00');
             const { getByText } = render(React.createElement(ArticleHeader, { updated: updated }));
-            expect(getByText('10.30pm')).toBeVisible();
+            expect(getByText(/10.30pm/i)).toBeVisible();
             expect(getByText('4 hours ago')).toBeVisible();
-            expect(getByText('December 31 2021')).toBeVisible();
+            expect(getByText('December 31')).toBeVisible();
         });
     });
 });
-/*
-describe('ArticleHeader', () => {
-  describe('Same calendar day during GMT', () => {
-    afterEach(() => MockDate.reset());
-
-    const date = '31/12/2021';
-    const time = '06:30';
-
-    it('Within a minute of updating', () => {
-      MockDate.set('2021-12-31T06:30:10Z');
-
-      const { getByText, queryByTestId } = render(
-        <ArticleHeader date={date} time={time} />
-      );
-
-      expect(getByText('6.30am')).toBeVisible();
-      expect(queryByTestId('TimeSincePublishing')).toBeFalsy();
-    });
-
-    it('Within an hour of updating', () => {
-      MockDate.set('2021-12-31T07:00:00Z');
-
-      const { getByText } = render(<ArticleHeader date={date} time={time} />);
-
-      expect(getByText('6.30am')).toBeVisible();
-      expect(getByText('30 minutes ago')).toBeVisible();
-    });
-
-    it('Between 1 and 12 hours after updating', () => {
-      MockDate.set('2021-12-31T08:30:00Z');
-
-      const { getByText } = render(<ArticleHeader date={date} time={time} />);
-
-      expect(getByText('6.30am')).toBeVisible();
-      expect(getByText('2 hours ago')).toBeVisible();
-    });
-
-    it('After 12 hours but same calendar day', () => {
-      MockDate.set('2021-12-20T20:30:00Z');
-
-      const { getByText, queryByTestId } = render(
-        <ArticleHeader date={date} time={time} />
-      );
-
-      expect(getByText('6.30am')).toBeVisible();
-      expect(queryByTestId('TimeSincePublishing')).toBeFalsy();
-    });
-
-    it('With breaking flag and headline', () => {
-      MockDate.set('2021-12-31T07:00:00Z');
-
-      const { baseElement, getByText } = render(
-        <ArticleHeader
-          date={date}
-          time={time}
-          breaking="true"
-          headline="This%20is%20the%20headline"
-        />
-      );
-
-      expect(getByText('6.30am')).toBeVisible();
-      expect(getByText('30 minutes ago')).toBeVisible();
-      expect(getByText('BREAKING')).toBeVisible();
-      expect(getByText('This is the headline')).toBeVisible();
-
-      expect(baseElement).toMatchSnapshot();
-    });
-
-    it('With breaking flag expired', () => {
-      MockDate.set('2021-12-31T08:30:00Z');
-
-      const { getByText, queryByText } = render(
-        <ArticleHeader date={date} time={time} breaking="true" />
-      );
-
-      expect(getByText('6.30am')).toBeVisible();
-      expect(getByText('2 hours ago')).toBeVisible();
-      expect(queryByText('BREAKING')).toBeFalsy();
-    });
-  });
-
-  describe('Same calendar day during BST', () => {
-    afterEach(() => MockDate.reset());
-
-    const date = '20/04/2022';
-    const time = '06:30';
-
-    it('Within a minute of updating', () => {
-      MockDate.set('2022-04-20T06:30:10+01:00');
-
-      const { getByText, queryByTestId } = render(
-        <ArticleHeader date={date} time={time} />
-      );
-
-      expect(getByText('6.30am')).toBeVisible();
-      expect(queryByTestId('TimeSincePublishing')).toBeFalsy();
-    });
-
-    it('Within an hour of updating', () => {
-      MockDate.set('2022-04-20T07:00:00+01:00');
-
-      const { getByText } = render(<ArticleHeader date={date} time={time} />);
-
-      expect(getByText('6.30am')).toBeVisible();
-      expect(getByText('30 minutes ago')).toBeVisible();
-    });
-
-    it('Between 1 and 12 hours after updating', () => {
-      MockDate.set('2022-04-20T08:30:00+01:00');
-
-      const { getByText } = render(<ArticleHeader date={date} time={time} />);
-
-      expect(getByText('6.30am')).toBeVisible();
-      expect(getByText('2 hours ago')).toBeVisible();
-    });
-
-    it('After 12 hours but same calendar day', () => {
-      MockDate.set('2022-04-20T20:30:00+01:00');
-
-      const { getByText, queryByTestId } = render(
-        <ArticleHeader date={date} time={time} />
-      );
-
-      expect(getByText('6.30am')).toBeVisible();
-      expect(queryByTestId('TimeSincePublishing')).toBeFalsy();
-    });
-  });
-
-  describe('Different calendar days', () => {
-    afterEach(() => MockDate.reset());
-
-    const date = '31/12/2021';
-    const time = '22:30';
-
-    it('Between 1 and 12 hours after updating', () => {
-      MockDate.set('2022-01-01T02:30:00Z');
-
-      const { getByText } = render(<ArticleHeader date={date} time={time} />);
-
-      expect(getByText('10.30pm')).toBeVisible();
-      expect(getByText('4 hours ago')).toBeVisible();
-      expect(getByText('December 31 2021')).toBeVisible();
-    });
-  });
-});
-*/
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQXJ0aWNsZUhlYWRlci50ZXN0LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvYXJ0aWNsZS1oZWFkZXIvX190ZXN0c19fL0FydGljbGVIZWFkZXIudGVzdC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBQzFCLE9BQU8sRUFBRSxNQUFNLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQUNoRCxPQUFPLDJCQUEyQixDQUFDO0FBQ25DLE9BQU8sUUFBUSxNQUFNLFVBQVUsQ0FBQztBQUVoQyxPQUFPLGFBQWEsTUFBTSxrQkFBa0IsQ0FBQztBQUU3QyxRQUFRLENBQUMsZUFBZSxFQUFFLEdBQUcsRUFBRTtJQUM3QixRQUFRLENBQUMsOEJBQThCLEVBQUUsR0FBRyxFQUFFO1FBQzVDLFNBQVMsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxRQUFRLENBQUMsS0FBSyxFQUFFLENBQUMsQ0FBQztRQUVsQyxNQUFNLE9BQU8sR0FBRyxzQkFBc0IsQ0FBQztRQUV2QyxFQUFFLENBQUMsNkJBQTZCLEVBQUUsR0FBRyxFQUFFO1lBQ3JDLFFBQVEsQ0FBQyxHQUFHLENBQUMsc0JBQXNCLENBQUMsQ0FBQztZQUVyQyxNQUFNLEVBQUUsU0FBUyxFQUFFLGFBQWEsRUFBRSxHQUFHLE1BQU0sQ0FDekMsb0JBQUMsYUFBYSxJQUFDLE9BQU8sRUFBRSxPQUFPLEdBQUksQ0FDcEMsQ0FBQztZQUVGLE1BQU0sQ0FBQyxTQUFTLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxXQUFXLEVBQUUsQ0FBQztZQUMxQyxNQUFNLENBQUMsYUFBYSxDQUFDLHFCQUFxQixDQUFDLENBQUMsQ0FBQyxTQUFTLEVBQUUsQ0FBQztRQUMzRCxDQUFDLENBQUMsQ0FBQztRQUVILEVBQUUsQ0FBQyw0QkFBNEIsRUFBRSxHQUFHLEVBQUU7WUFDcEMsUUFBUSxDQUFDLEdBQUcsQ0FBQyxzQkFBc0IsQ0FBQyxD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
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQXJ0aWNsZUhlYWRlci50ZXN0LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvYXJ0aWNsZS1oZWFkZXIvX190ZXN0c19fL0FydGljbGVIZWFkZXIudGVzdC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBQzFCLE9BQU8sRUFBRSxNQUFNLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQUNoRCxPQUFPLDJCQUEyQixDQUFDO0FBQ25DLE9BQU8sUUFBUSxNQUFNLFVBQVUsQ0FBQztBQUVoQyxPQUFPLGFBQWEsTUFBTSxrQkFBa0IsQ0FBQztBQUU3QyxRQUFRLENBQUMsZUFBZSxFQUFFLEdBQUcsRUFBRTtJQUM3QixRQUFRLENBQUMsOEJBQThCLEVBQUUsR0FBRyxFQUFFO1FBQzVDLFNBQVMsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxRQUFRLENBQUMsS0FBSyxFQUFFLENBQUMsQ0FBQztRQUVsQyxNQUFNLE9BQU8sR0FBRywyQkFBMkIsQ0FBQztRQUU1QyxFQUFFLENBQUMsNkJBQTZCLEVBQUUsR0FBRyxFQUFFO1lBQ3JDLFFBQVEsQ0FBQyxHQUFHLENBQUMsMkJBQTJCLENBQUMsQ0FBQztZQUUxQyxNQUFNLEVBQUUsU0FBUyxFQUFFLGFBQWEsRUFBRSxHQUFHLE1BQU0sQ0FDekMsb0JBQUMsYUFBYSxJQUFDLE9BQU8sRUFBRSxPQUFPLEdBQUksQ0FDcEMsQ0FBQztZQUVGLE1BQU0sQ0FBQyxTQUFTLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQyxXQUFXLEVBQUUsQ0FBQztZQUMzQyxNQUFNLENBQUMsYUFBYSxDQUFDLHFCQUFxQixDQUFDLENBQUMsQ0FBQyxTQUFTLEVBQUUsQ0FBQztRQUMzRCxDQUFDLENBQUMsQ0FBQztRQUVILEVBQUUsQ0FBQyw0QkFBNEIsRUFBRSxHQUFHLEVBQUU7WUFDcEMsUUFBUSxDQUFDLEdBQUcsQ0FBQywyQkFBMkIsQ0FBQyxD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

package/dist/components/recommended-articles/RecommendedArticles.d.ts

@@ -1,7 +1,6 @@
-declare type RecommendedArticlesProps = {
-    articleId: string;
+import React from 'react';
+export declare const RecommendedArticles: React.FC<{
     section: string;
+    isVisible?: boolean;
     analyticsStream?: (evt: any) => void;
-};
-export declare const RecommendedArticles: ({ articleId, section, analyticsStream }: RecommendedArticlesProps) => JSX.Element | null;
-export {};
+}>;

package/dist/components/recommended-articles/RecommendedArticles.js

@@ -1,30 +1,19 @@
-import React, { useEffect, useState } from 'react';
-import RelatedArticles from '@times-components/related-articles';
-import { GetRecommendedArticles } from '@times-components/provider';
+import React from 'react';
 import { Placeholder } from '@times-components/image';
-export const RecommendedArticles = ({ articleId, section, analyticsStream }) => {
-    const [isReady, setIsReady] = useState(false);
-    useEffect(() => {
-        setIsReady(true);
-    }, []);
-    if (!isReady) {
+import RelatedArticles from '@times-components/related-articles';
+import { useFetch } from '../../helpers/fetch/FetchProvider';
+import { getRelatedArticlesSlice } from './formatters';
+import { PlaceholderContainer } from '../common-styles';
+export const RecommendedArticles = ({ section, isVisible, analyticsStream }) => {
+    const { loading, error, data } = useFetch();
+    if (loading && isVisible) {
+        return (React.createElement(PlaceholderContainer, null,
+            React.createElement(Placeholder, null)));
+    }
+    if (error || data === undefined) {
         return null;
     }
-    return (React.createElement(GetRecommendedArticles, { publisher: 'TIMES', recomArgs: { userId: '1234', articleId }, ssr: false, debounceTimeMs: 0 }, ({ isLoading, error, recommendations }) => {
-        if (error) {
-            return null;
-        }
-        if (isLoading || !recommendations) {
-            return (React.createElement("div", { className: "placeholder" },
-                React.createElement(Placeholder, null)));
-        }
-        const slice = {
-            sliceName: 'StandardSlice',
-            items: recommendations
-                ? recommendations.articles.map((article) => ({ article }))
-                : []
-        };
-        return (React.createElement(RelatedArticles, { heading: `Today's ${section}`, slice: slice, isVisible: true, analyticsStream: analyticsStream }));
-    }));
+    return (React.createElement("div", { style: { display: isVisible ? 'block' : 'none' } },
+        React.createElement(RelatedArticles, { heading: `Today's ${section}`, slice: getRelatedArticlesSlice(data.recommendations), isVisible: true, analyticsStream: analyticsStream })));
 };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUmVjb21tZW5kZWRBcnRpY2xlcy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL3JlY29tbWVuZGVkLWFydGljbGVzL1JlY29tbWVuZGVkQXJ0aWNsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sS0FBSyxFQUFFLEVBQUUsU0FBUyxFQUFFLFFBQVEsRUFBRSxNQUFNLE9BQU8sQ0FBQztBQUVuRCxPQUFPLGVBQWUsTUFBTSxvQ0FBb0MsQ0FBQztBQUNqRSxPQUFPLEVBQUUsc0JBQXNCLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQztBQUlwRSxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0seUJBQXlCLENBQUM7QUFRdEQsTUFBTSxDQUFDLE1BQU0sbUJBQW1CLEdBQUcsQ0FBQyxFQUNsQyxTQUFTLEVBQ1QsT0FBTyxFQUNQLGVBQWUsRUFDVSxFQUFFLEVBQUU7SUFDN0IsTUFBTSxDQUFDLE9BQU8sRUFBRSxVQUFVLENBQUMsR0FBRyxRQUFRLENBQVUsS0FBSyxDQUFDLENBQUM7SUFFdkQsU0FBUyxDQUFDLEdBQUcsRUFBRTtRQUNiLFVBQVUsQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUNuQixDQUFDLEVBQUUsRUFBRSxDQUFDLENBQUM7SUFFUCxJQUFJLENBQUMsT0FBTyxFQUFFO1FBQ1osT0FBTyxJQUFJLENBQUM7S0FDYjtJQUVELE9BQU8sQ0FDTCxvQkFBQyxzQkFBc0IsSUFDckIsU0FBUyxFQUFFLE9BQU8sRUFDbEIsU0FBUyxFQUFFLEVBQUUsTUFBTSxFQUFFLE1BQU0sRUFBRSxTQUFTLEVBQUUsRUFDeEMsR0FBRyxFQUFFLEtBQUssRUFDVixjQUFjLEVBQUUsQ0FBQyxJQUVoQixDQUFDLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxlQUFlLEVBQU8sRUFBRSxFQUFFO1FBQzlDLElBQUksS0FBSyxFQUFFO1lBQ1QsT0FBTyxJQUFJLENBQUM7U0FDYjtRQUVELElBQUksU0FBUyxJQUFJLENBQUMsZUFBZSxFQUFFO1lBQ2pDLE9BQU8sQ0FDTCw2QkFBSyxTQUFTLEVBQUMsYUFBYTtnQkFDMUIsb0JBQUMsV0FBVyxPQUFHLENBQ1gsQ0FDUCxDQUFDO1NBQ0g7UUFFRCxNQUFNLEtBQUssR0FBNEI7WUFDckMsU0FBUyxFQUFFLGVBQWU7WUFDMUIsS0FBSyxFQUFFLGVBQWU7Z0JBQ3BCLENBQUMsQ0FBQyxlQUFlLENBQUMsUUFBUSxDQUFDLEdBQUcsQ0FBQyxDQUFDLE9BQVksRUFBRSxFQUFFLENBQUMsQ0FBQyxFQUFFLE9BQU8sRUFBRSxDQUFDLENBQUM7Z0JBQy9ELENBQUMsQ0FBQyxFQUFFO1NBQ1AsQ0FBQztRQUVGLE9BQU8sQ0FDTCxvQkFBQyxlQUFlLElBQ2QsT0FBTyxFQUFFLFdBQVcsT0FBTyxFQUFFLEVBQzdCLEtBQUssRUFBRSxLQUFLLEVBQ1osU0FBUyxRQUNULGVBQWUsRUFBRSxlQUFlLEdBQ2hDLENBQ0gsQ0FBQztJQUNKLENBQUMsQ0FDc0IsQ0FDMUIsQ0FBQztBQUNKLENBQUMsQ0FBQyJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUmVjb21tZW5kZWRBcnRpY2xlcy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL3JlY29tbWVuZGVkLWFydGljbGVzL1JlY29tbWVuZGVkQXJ0aWNsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQztBQUUxQixPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0seUJBQXlCLENBQUM7QUFDdEQsT0FBTyxlQUFlLE1BQU0sb0NBQW9DLENBQUM7QUFFakUsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLG1DQUFtQyxDQUFDO0FBQzdELE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLGNBQWMsQ0FBQztBQUV2RCxPQUFPLEVBQUUsb0JBQW9CLEVBQUUsTUFBTSxrQkFBa0IsQ0FBQztBQUV4RCxNQUFNLENBQUMsTUFBTSxtQkFBbUIsR0FJM0IsQ0FBQyxFQUFFLE9BQU8sRUFBRSxTQUFTLEVBQUUsZUFBZSxFQUFFLEVBQUUsRUFBRTtJQUMvQyxNQUFNLEVBQUUsT0FBTyxFQUFFLEtBQUssRUFBRSxJQUFJLEVBQUUsR0FBRyxRQUFRLEVBQU8sQ0FBQztJQUVqRCxJQUFJLE9BQU8sSUFBSSxTQUFTLEVBQUU7UUFDeEIsT0FBTyxDQUNMLG9CQUFDLG9CQUFvQjtZQUNuQixvQkFBQyxXQUFXLE9BQUcsQ0FDTSxDQUN4QixDQUFDO0tBQ0g7SUFFRCxJQUFJLEtBQUssSUFBSSxJQUFJLEtBQUssU0FBUyxFQUFFO1FBQy9CLE9BQU8sSUFBSSxDQUFDO0tBQ2I7SUFFRCxPQUFPLENBQ0wsNkJBQUssS0FBSyxFQUFFLEVBQUUsT0FBTyxFQUFFLFNBQVMsQ0FBQyxDQUFDLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxNQUFNLEVBQUU7UUFDbkQsb0JBQUMsZUFBZSxJQUNkLE9BQU8sRUFBRSxXQUFXLE9BQU8sRUFBRSxFQUM3QixLQUFLLEVBQUUsdUJBQXVCLENBQUMsSUFBSSxDQUFDLGVBQWUsQ0FBQyxFQUNwRCxTQUFTLFFBQ1QsZUFBZSxFQUFFLGVBQWUsR0FDaEMsQ0FDRSxDQUNQLENBQUM7QUFDSixDQUFDLENBQUMifQ==

package/dist/components/recommended-articles/RecommendedArticles.stories.d.ts

@@ -1 +1,5 @@
-export {};
+export declare const getArticles: (data: any, numOfArticles: number) => {
+    recommendations: {
+        articles: any;
+    };
+};

package/dist/components/recommended-articles/RecommendedArticles.stories.js

@@ -1,65 +1,39 @@
 import React from 'react';
 import { showcaseConverter } from '@times-components/storybook';
-import { MockedProvider } from '@times-components/provider-test-tools';
-import { recommendations } from '@times-components/provider-queries';
+import { FetchProvider } from '../../helpers/fetch/FetchProvider';
+import previewData from '../../fixtures/preview-data/recommended-articles';
 import analyticsStream from '../../fixtures/analytics-actions/analytics-actions';
 import { RecommendedArticles } from './RecommendedArticles';
-const mocks = [
-    {
-        delay: 1000,
-        request: {
-            query: recommendations,
-            variables: {
-                publisher: 'TIMES',
-                recomArgs: {
-                    userId: '1234',
-                    articleId: '94a01926-719a-11ec-aacf-0736e08b15cd'
-                }
-            }
-        },
-        result: {
-            data: {
-                recommendations: {
-                    __typename: 'Recommendations',
-                    leadAsset: 'null',
-                    articles: [
-                        {
-                            __typename: 'UniversalArticle',
-                            headline: 'Whole world is against us, says top Russian strategist',
-                            id: 'a9ffb7cc-d5d1-11ec-bb99-1bcd45646516',
-                            media: {
-                                __typename: 'Image'
-                            },
-                            slug: 'were-no-match-for-ukrainian-grit-and-firepower-says-retired-russian-colonel',
-                            url: 'https://www.staging-thetimes.co.uk/article/were-no-match-for-ukrainian-grit-and-firepower-says-retired-russian-colonel-lhnvsfj33'
-                        },
-                        {
-                            __typename: 'UniversalArticle',
-                            headline: 'Vardys leave court with swipe at Wayne Rooney',
-                            id: 'f3d730a0-d5c2-11ec-8585-951ab3afb4d2',
-                            media: {
-                                __typename: 'Image'
-                            },
-                            slug: 'wayne-rooney-to-give-evidence-in-wagatha-christie-trial-as-jamie-vardy-attends-court-for-first-time',
-                            url: 'https://www.staging-thetimes.co.uk/article/wayne-rooney-to-give-evidence-in-wagatha-christie-trial-as-jamie-vardy-attends-court-for-first-time-wlzvxklc6'
-                        }
-                    ]
-                }
-            }
-        }
+export const getArticles = (data, numOfArticles) => ({
+    recommendations: {
+        articles: data.recommendations.articles.slice(0, numOfArticles)
     }
-];
-const recarticles = {
+});
+const recommArticles = {
     children: [
         {
-            component: () => (React.createElement(MockedProvider, { mocks: mocks },
-                React.createElement(RecommendedArticles, { articleId: "94a01926-719a-11ec-aacf-0736e08b15cd", section: "News", analyticsStream: analyticsStream }))),
-            name: 'Recommended Articles',
+            component: () => (React.createElement(FetchProvider, { previewData: getArticles(previewData, 1) },
+                React.createElement(RecommendedArticles, { section: "News", isVisible: true, analyticsStream: analyticsStream }))),
+            name: 'Recommended Articles - 1 Article',
+            platform: 'web',
+            type: 'story'
+        },
+        {
+            component: () => (React.createElement(FetchProvider, { previewData: getArticles(previewData, 2) },
+                React.createElement(RecommendedArticles, { section: "Business", isVisible: true, analyticsStream: analyticsStream }))),
+            name: 'Recommended Articles - 2 Article',
+            platform: 'web',
+            type: 'story'
+        },
+        {
+            component: () => (React.createElement(FetchProvider, { previewData: previewData },
+                React.createElement(RecommendedArticles, { section: "Sport", isVisible: true, analyticsStream: analyticsStream }))),
+            name: 'Recommended Articles - 3 Article',
             platform: 'web',
             type: 'story'
         }
     ],
     name: 'Typescript Component/Recommended Articles'
 };
-showcaseConverter(module, recarticles);
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUmVjb21tZW5kZWRBcnRpY2xlcy5zdG9yaWVzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvcmVjb21tZW5kZWQtYXJ0aWNsZXMvUmVjb21tZW5kZWRBcnRpY2xlcy5zdG9yaWVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUM7QUFFMUIsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sNkJBQTZCLENBQUM7QUFDaEUsT0FBTyxFQUFFLGNBQWMsRUFBRSxNQUFNLHVDQUF1QyxDQUFDO0FBQ3ZFLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxvQ0FBb0MsQ0FBQztBQUVyRSxPQUFPLGVBQWUsTUFBTSxvREFBb0QsQ0FBQztBQUNqRixPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSx1QkFBdUIsQ0FBQztBQUU1RCxNQUFNLEtBQUssR0FBRztJQUNaO1FBQ0UsS0FBSyxFQUFFLElBQUk7UUFDWCxPQUFPLEVBQUU7WUFDUCxLQUFLLEVBQUUsZUFBZTtZQUN0QixTQUFTLEVBQUU7Z0JBQ1QsU0FBUyxFQUFFLE9BQU87Z0JBQ2xCLFNBQVMsRUFBRTtvQkFDVCxNQUFNLEVBQUUsTUFBTTtvQkFDZCxTQUFTLEVBQUUsc0NBQXNDO2lCQUNsRDthQUNGO1NBQ0Y7UUFDRCxNQUFNLEVBQUU7WUFDTixJQUFJLEVBQUU7Z0JBQ0osZUFBZSxFQUFFO29CQUNmLFVBQVUsRUFBRSxpQkFBaUI7b0JBQzdCLFNBQVMsRUFBRSxNQUFNO29CQUNqQixRQUFRLEVBQUU7d0JBQ1I7NEJBQ0UsVUFBVSxFQUFFLGtCQUFrQjs0QkFDOUIsUUFBUSxFQUNOLHdEQUF3RDs0QkFDMUQsRUFBRSxFQUFFLHNDQUFzQzs0QkFDMUMsS0FBSyxFQUFFO2dDQUNMLFVBQVUsRUFBRSxPQUFPOzZCQUNwQjs0QkFDRCxJQUFJLEVBQ0YsNkVBQTZFOzRCQUMvRSxHQUFHLEVBQ0Qsa0lBQWtJO3lCQUNySTt3QkFDRDs0QkFDRSxVQUFVLEVBQUUsa0JBQWtCOzRCQUM5QixRQUFRLEVBQUUsK0NBQStDOzRCQUN6RCxFQUFFLEVBQUUsc0NBQXNDOzRCQUMxQyxLQUFLLEVBQUU7Z0NBQ0wsVUFBVSxFQUFFLE9BQU87NkJBQ3BCOzRCQUNELElBQUksRUFDRixxR0FBcUc7NEJBQ3ZHLEdBQUcsRUFDRCwwSkFBMEo7eUJBQzdKO3FCQUNGO2lCQUNGO2FBQ0Y7U0FDRjtLQUNGO0NBQ0YsQ0FBQztBQUVGLE1BQU0sV0FBVyxHQUFHO0lBQ2xCLFFBQVEsRUFBRTtRQUNSO1lBQ0UsU0FBUyxFQUFFLEdBQUcsRUFBRSxDQUFDLENBQ2Ysb0JBQUMsY0FBYyxJQUFDLEtBQUssRUFBRSxLQUFLO2dCQUMxQixvQkFBQyxtQkFBbUIsSUFDbEIsU0FBUyxFQUFDLHNDQUFzQyxFQUNoRCxPQUFPLEVBQUMsTUFBTSxFQUNkLGVBQWUsRUFBRSxlQUFlLEdBQ2hDLENBQ2EsQ0FDbEI7WUFFRCxJQUFJLEVBQUUsc0JBQXNCO1lBQzVCLFFBQVEsRUFBRSxLQUFLO1lBQ2YsSUFBSSxFQUFFLE9BQU87U0FDZDtLQUNGO0lBQ0QsSUFBSSxFQUFFLDJDQUEyQztDQUNsRCxDQUFDO0FBRUYsaUJBQWlCLENBQUMsTUFBTSxFQUFFLFdBQVcsQ0FBQyxDQUFDIn0=
+showcaseConverter(module, recommArticles);
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUmVjb21tZW5kZWRBcnRpY2xlcy5zdG9yaWVzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvcmVjb21tZW5kZWQtYXJ0aWNsZXMvUmVjb21tZW5kZWRBcnRpY2xlcy5zdG9yaWVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUM7QUFFMUIsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sNkJBQTZCLENBQUM7QUFFaEUsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLG1DQUFtQyxDQUFDO0FBQ2xFLE9BQU8sV0FBVyxNQUFNLGtEQUFrRCxDQUFDO0FBQzNFLE9BQU8sZUFBZSxNQUFNLG9EQUFvRCxDQUFDO0FBRWpGLE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLHVCQUF1QixDQUFDO0FBRTVELE1BQU0sQ0FBQyxNQUFNLFdBQVcsR0FBRyxDQUFDLElBQVMsRUFBRSxhQUFxQixFQUFFLEVBQUUsQ0FBQyxDQUFDO0lBQ2hFLGVBQWUsRUFBRTtRQUNmLFFBQVEsRUFBRSxJQUFJLENBQUMsZUFBZSxDQUFDLFFBQVEsQ0FBQyxLQUFLLENBQUMsQ0FBQyxFQUFFLGFBQWEsQ0FBQztLQUNoRTtDQUNGLENBQUMsQ0FBQztBQUVILE1BQU0sY0FBYyxHQUFHO0lBQ3JCLFFBQVEsRUFBRTtRQUNSO1lBQ0UsU0FBUyxFQUFFLEdBQUcsRUFBRSxDQUFDLENBQ2Ysb0JBQUMsYUFBYSxJQUFDLFdBQVcsRUFBRSxXQUFXLENBQUMsV0FBVyxFQUFFLENBQUMsQ0FBQztnQkFDckQsb0JBQUMsbUJBQW1CLElBQ2xCLE9BQU8sRUFBQyxNQUFNLEVBQ2QsU0FBUyxRQUNULGVBQWUsRUFBRSxlQUFlLEdBQ2hDLENBQ1ksQ0FDakI7WUFDRCxJQUFJLEVBQUUsa0NBQWtDO1lBQ3hDLFFBQVEsRUFBRSxLQUFLO1lBQ2YsSUFBSSxFQUFFLE9BQU87U0FDZDtRQUNEO1lBQ0UsU0FBUyxFQUFFLEdBQUcsRUFBRSxDQUFDLENBQ2Ysb0JBQUMsYUFBYSxJQUFDLFdBQVcsRUFBRSxXQUFXLENBQUMsV0FBVyxFQUFFLENBQUMsQ0FBQztnQkFDckQsb0JBQUMsbUJBQW1CLElBQ2xCLE9BQU8sRUFBQyxVQUFVLEVBQ2xCLFNBQVMsUUFDVCxlQUFlLEVBQUUsZUFBZSxHQUNoQyxDQUNZLENBQ2pCO1lBQ0QsSUFBSSxFQUFFLGtDQUFrQztZQUN4QyxRQUFRLEVBQUUsS0FBSztZQUNmLElBQUksRUFBRSxPQUFPO1NBQ2Q7UUFDRDtZQUNFLFNBQVMsRUFBRSxHQUFHLEVBQUUsQ0FBQyxDQUNmLG9CQUFDLGFBQWEsSUFBQyxXQUFXLEVBQUUsV0FBVztnQkFDckMsb0JBQUMsbUJBQW1CLElBQ2xCLE9BQU8sRUFBQyxPQUFPLEVBQ2YsU0FBUyxRQUNULGVBQWUsRUFBRSxlQUFlLEdBQ2hDLENBQ1ksQ0FDakI7WUFDRCxJQUFJLEVBQUUsa0NBQWtDO1lBQ3hDLFFBQVEsRUFBRSxLQUFLO1lBQ2YsSUFBSSxFQUFFLE9BQU87U0FDZDtLQUNGO0lBQ0QsSUFBSSxFQUFFLDJDQUEyQztDQUNsRCxDQUFDO0FBRUYsaUJBQWlCLENBQUMsTUFBTSxFQUFFLGNBQWMsQ0FBQyxDQUFDIn0=

package/dist/components/recommended-articles/RecommendedFetch.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const RecommendedFetch: React.FC<{
+    articleId: string;
+    section: string;
+    analyticsStream?: (evt: any) => void;
+}>;

package/dist/components/recommended-articles/RecommendedFetch.js

@@ -0,0 +1,12 @@
+import React, { useEffect, useState } from 'react';
+import { FetchProvider } from '../../helpers/fetch/FetchProvider';
+import { RecommendedArticles } from './RecommendedArticles';
+export const RecommendedFetch = ({ articleId, section, analyticsStream }) => {
+    const [isClientSide, setIsClientSide] = useState(false);
+    useEffect(() => {
+        setIsClientSide(true);
+    });
+    return isClientSide ? (React.createElement(FetchProvider, { url: `/api/recommended-articles/${articleId}` },
+        React.createElement(RecommendedArticles, { section: section, analyticsStream: analyticsStream }))) : null;
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUmVjb21tZW5kZWRGZXRjaC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL3JlY29tbWVuZGVkLWFydGljbGVzL1JlY29tbWVuZGVkRmV0Y2gudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sS0FBSyxFQUFFLEVBQUUsU0FBUyxFQUFFLFFBQVEsRUFBRSxNQUFNLE9BQU8sQ0FBQztBQUVuRCxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sbUNBQW1DLENBQUM7QUFDbEUsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sdUJBQXVCLENBQUM7QUFFNUQsTUFBTSxDQUFDLE1BQU0sZ0JBQWdCLEdBSXhCLENBQUMsRUFBRSxTQUFTLEVBQUUsT0FBTyxFQUFFLGVBQWUsRUFBRSxFQUFFLEVBQUU7SUFDL0MsTUFBTSxDQUFDLFlBQVksRUFBRSxlQUFlLENBQUMsR0FBRyxRQUFRLENBQVUsS0FBSyxDQUFDLENBQUM7SUFFakUsU0FBUyxDQUFDLEdBQUcsRUFBRTtRQUNiLGVBQWUsQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUN4QixDQUFDLENBQUMsQ0FBQztJQUVILE9BQU8sWUFBWSxDQUFDLENBQUMsQ0FBQyxDQUNwQixvQkFBQyxhQUFhLElBQUMsR0FBRyxFQUFFLDZCQUE2QixTQUFTLEVBQUU7UUFDMUQsb0JBQUMsbUJBQW1CLElBQ2xCLE9BQU8sRUFBRSxPQUFPLEVBQ2hCLGVBQWUsRUFBRSxlQUFlLEdBQ2hDLENBQ1ksQ0FDakIsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDO0FBQ1gsQ0FBQyxDQUFDIn0=