diff --git a/src/app/components/MostRead/Canonical/Item/index.test.tsx b/src/app/components/MostRead/Canonical/Item/index.test.tsx
index 31821401886..0dd3eb7cd15 100755
--- a/src/app/components/MostRead/Canonical/Item/index.test.tsx
+++ b/src/app/components/MostRead/Canonical/Item/index.test.tsx
@@ -70,6 +70,31 @@ describe('MostReadLink', () => {
);
expect(container).toMatchSnapshot();
});
+
+ it('should render a live pulse icon if the item refers to a live page', () => {
+ const { container } = render(
+ ,
+ {
+ service: 'hausa',
+ toggles: {
+ eventTracking: { enabled: true },
+ },
+ },
+ );
+
+ const livePulse = container.querySelector(
+ '[data-e2e=most-read-live-pulse]',
+ );
+ expect(livePulse).not.toBeNull();
+ });
});
describe('MostReadItemWrapper', () => {
diff --git a/src/app/components/MostRead/Canonical/Item/index.tsx b/src/app/components/MostRead/Canonical/Item/index.tsx
index b1d90026c1d..3f33e5668f4 100755
--- a/src/app/components/MostRead/Canonical/Item/index.tsx
+++ b/src/app/components/MostRead/Canonical/Item/index.tsx
@@ -1,6 +1,7 @@
import { forwardRef, PropsWithChildren } from 'react';
import { SerializedStyles, Theme } from '@emotion/react';
import useClickTrackerHandler from '#hooks/useClickTrackerHandler';
+import LiveLabel from '#app/components/LiveLabel';
import styles from './index.styles';
import {
mostReadListGridProps,
@@ -62,6 +63,7 @@ export const MostReadLink = ({
};
const clickTrackerHandler = useClickTrackerHandler(eventTrackingDataExtended);
+ const isLiveLink = href.includes('live');
return (
// eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -71,6 +73,11 @@ export const MostReadLink = ({
href={href}
{...clickTrackerHandler}
>
+ {isLiveLink && (
+
+
+
+ )}
{title}
{children &&
{children}
}