WS-NA-10-time: Adds live pulse to nav [copilot]

src/app/legacy/containers/Navigation/index.jsx

@@ -7,6 +7,7 @@ import {
 import useClickTrackerHandler from '#app/hooks/useClickTrackerHandler';
 import useViewTracker from '#app/hooks/useViewTracker';
 import { RequestContext } from '#contexts/RequestContext';
+import isLiveTVNavItem from '#lib/utilities/navigation/isLiveTVNavItem';
 import LanguageNavigation from './LanguageNavigation/lazy';
 import { ServiceContext } from '../../../contexts/ServiceContext';
 import Canonical from './index.canonical';
@@ -22,6 +23,7 @@ const renderListItems = (
   activeIndex,
   clickTracker,
   viewTracker,
+  liveTVChannelIdentifier,
   isLite,
 ) =>
   navigation.reduce((listAcc, item, index) => {
@@ -30,6 +32,11 @@ const renderListItems = (
 
     if (hideOnLiteSite && isLite) return listAcc;
 
+    const showLivePulse = isLiveTVNavItem({
+      navItemUrl: url,
+      liveTVChannelIdentifier,
+    });
+
     const listItem = (
       <Li
         key={title}
@@ -41,6 +48,7 @@ const renderListItems = (
         dir={dir}
         clickTracker={clickTracker}
         viewTracker={viewTracker}
+        showLivePulse={showLivePulse}
       >
         {title}
       </Li>
@@ -59,6 +67,7 @@ const NavigationContainer = ({ propsForTopBarOJComponent }) => {
     service,
     dir,
     collapsibleNavigation,
+    liveTVChannelIdentifier,
   } = use(ServiceContext);
 
   const { canonicalLink, origin } = use(RequestContext);
@@ -112,6 +121,7 @@ const NavigationContainer = ({ propsForTopBarOJComponent }) => {
         activeIndex,
         scrollableNavClickTrackerHandler,
         scrollableNavViewTracker,
+        liveTVChannelIdentifier,
         isLite,
       )}
     </NavigationUl>
@@ -129,6 +139,7 @@ const NavigationContainer = ({ propsForTopBarOJComponent }) => {
         activeIndex,
         dropdownNavClickTrackerHandler,
         dropdownNavViewTracker,
+        liveTVChannelIdentifier,
       )}
     </DropdownUl>
   );

src/app/legacy/psammead/psammead-navigation/src/DropdownNavigation/index.jsx

@@ -11,6 +11,7 @@ import {
   GEL_GROUP_3_SCREEN_WIDTH_MIN,
   GEL_GROUP_B_MIN_WIDTH,
 } from '#psammead/gel-foundations/src/breakpoints';
+import Pulse from '#app/components/LivePulse';
 import VisuallyHiddenText from '../../../../../components/VisuallyHiddenText';
 
 export const NAV_BAR_TOP_BOTTOM_SPACING = 0.75; // 12px
@@ -116,13 +117,21 @@ export const DropdownLi = ({
   url,
   dir = 'ltr',
   viewTracker = null,
+  showLivePulse = null,
 }) => {
   const ariaId = `dropdownNavigation-${children
     .replace(/\s+/g, '-')
     .toLowerCase()}`;
   return (
     // aria-labelledby is a temporary fix for the a11y nested span's bug experienced in TalkBack, refer to the following issue: https://github.com/bbc/simorgh/issues/9652
     <StyledDropdownLi role="listitem" {...viewTracker}>
+      {showLivePulse && (
+        <Pulse
+          width="18"
+          height="18"
+          style={{ verticalAlign: 'middle', marginInlineEnd: '0.25em' }}
+        />
+      )}
       <StyledDropdownLink
         script={script}
         service={service}

src/app/legacy/psammead/psammead-navigation/src/index.jsx

@@ -10,6 +10,7 @@ import {
   GEL_GROUP_3_SCREEN_WIDTH_MAX,
   GEL_GROUP_5_SCREEN_WIDTH_MIN,
 } from '#psammead/gel-foundations/src/breakpoints';
+import Pulse from '#app/components/LivePulse';
 import { NAV_BAR_TOP_BOTTOM_SPACING } from './DropdownNavigation';
 import { focusIndicatorThickness } from '../../../../components/ThemeProvider/focusIndicator';
 import VisuallyHiddenText from '../../../../components/VisuallyHiddenText';
@@ -163,10 +164,18 @@ export const NavigationLi = ({
   service,
   dir = 'ltr',
   viewTracker = null,
+  showLivePulse = false,
   ...props
 }) => {
   return (
     <StyledListItem dir={dir} role="listitem" {...viewTracker}>
+      {showLivePulse && (
+        <Pulse
+          width="18"
+          height="18"
+          style={{ verticalAlign: 'middle', marginInlineEnd: '0.25em' }}
+        />
+      )}
       {active && currentPageText ? (
         <StyledLink
           href={url}

src/app/lib/config/services/arabic.ts

@@ -418,6 +418,7 @@ export const service: DefaultServiceConfig = {
         'بي بي سي. بي بي سي ليست مسؤولة عن محتوى المواقع الخارجية.',
     },
     timezone: 'GMT',
+    liveTVChannelIdentifier: '/arabic/media-49522519',
     navigation: [
       {
         title: 'رئيسية',

src/app/lib/utilities/navigation/isLiveTVNavItem.test.ts

@@ -0,0 +1,63 @@
+import isLiveTVNavItem from './isLiveTVNavItem';
+
+describe('isLiveTVNavItem', () => {
+  it('returns true when navItemUrl matches liveTVChannelIdentifier', () => {
+    expect(
+      isLiveTVNavItem({
+        navItemUrl: '/arabic/media-49522519',
+        liveTVChannelIdentifier: '/arabic/media-49522519',
+      }),
+    ).toBe(true);
+  });
+
+  it('returns false when navItemUrl does not match liveTVChannelIdentifier', () => {
+    expect(
+      isLiveTVNavItem({
+        navItemUrl: '/arabic/media-49522519',
+        liveTVChannelIdentifier: '/arabic/media-12345678',
+      }),
+    ).toBe(false);
+  });
+
+  it('returns false when liveTVChannelIdentifier is falsy', () => {
+    expect(
+      isLiveTVNavItem({
+        navItemUrl: '/arabic/media-49522519',
+        liveTVChannelIdentifier: '',
+      }),
+    ).toBe(false);
+    expect(
+      isLiveTVNavItem({
+        navItemUrl: '/arabic/media-49522519',
+        liveTVChannelIdentifier: null,
+      }),
+    ).toBe(false);
+    expect(
+      isLiveTVNavItem({
+        navItemUrl: '/arabic/media-49522519',
+        liveTVChannelIdentifier: undefined,
+      }),
+    ).toBe(false);
+  });
+
+  it('returns false when navItemUrl is falsy', () => {
+    expect(
+      isLiveTVNavItem({
+        navItemUrl: '',
+        liveTVChannelIdentifier: '/arabic/media-49522519',
+      }),
+    ).toBe(false);
+    expect(
+      isLiveTVNavItem({
+        navItemUrl: null,
+        liveTVChannelIdentifier: '/arabic/media-49522519',
+      }),
+    ).toBe(false);
+    expect(
+      isLiveTVNavItem({
+        navItemUrl: undefined,
+        liveTVChannelIdentifier: '/arabic/media-49522519',
+      }),
+    ).toBe(false);
+  });
+});

src/app/lib/utilities/navigation/isLiveTVNavItem.ts

@@ -0,0 +1,12 @@
+export interface IsLiveTVNavItemArgs {
+  navItemUrl: string | null | undefined;
+  liveTVChannelIdentifier: string | null | undefined;
+}
+
+const isLiveTVNavItem = ({
+  navItemUrl,
+  liveTVChannelIdentifier,
+}: IsLiveTVNavItemArgs): boolean =>
+  Boolean(liveTVChannelIdentifier) && navItemUrl === liveTVChannelIdentifier;
+
+export default isLiveTVNavItem;

src/app/models/types/serviceConfig.ts

@@ -97,6 +97,7 @@ export type ServiceConfig = {
   recommendations?: Recommendations;
   footer: Footer;
   collapsibleNavigation?: CollapsibleNavigationSection[];
+  liveTVChannelIdentifier?: string;
   navigation?: {
     title: string;
     url: string;