Merge pull request #14020 from bbc/WS-2526-expose-PV-heading-link

[WS-2526] - Expose link for pv curation & use subheading component

Author: hotinglok

src/app/components/Curation/index.tsx

@@ -204,6 +204,7 @@ export default ({
             blocks={portraitVideo.blocks}
             eventTrackingData={eventTrackingData}
             css={styles.pvCarousel}
+            link={link}
           />
         );
       }

src/app/components/PortraitVideoCarousel/index.styles.ts

@@ -9,6 +9,9 @@ const styles = {
       [`.${OPERA_MINI_CLASSNAME} &`]: {
         display: 'none',
       },
+      '& > h2:has(a)': {
+        marginBottom: 0,
+      },
     }),
   heading: ({ palette, mq, spacings }: Theme) =>
     css({

src/app/components/PortraitVideoCarousel/index.test.tsx

@@ -33,6 +33,25 @@ describe('PortraitVideoCarousel', () => {
     );
   });
 
+  it('Should render a Subheading with a link when link prop is provided', async () => {
+    const link = '/test-link';
+    await act(async () => {
+      render(
+        <Component
+          {...fixture}
+          link={link}
+          eventTrackingData={eventTrackingData}
+        />,
+      );
+    });
+
+    const heading = screen.getByRole('heading', { level: 2 });
+    expect(heading).toHaveTextContent(fixture.title);
+
+    const linkElement = screen.getByRole('link');
+    expect(linkElement).toHaveAttribute('href', link);
+  });
+
   it('Should render without a title', async () => {
     await act(async () => {
       render(
@@ -52,6 +71,27 @@ describe('PortraitVideoCarousel', () => {
     );
   });
 
+  it('Should render without a title if link is provided but title is undefined', async () => {
+    const link = '/test-link';
+    await act(async () => {
+      render(
+        <Component
+          {...fixture}
+          title={undefined}
+          link={link}
+          eventTrackingData={eventTrackingData}
+        />,
+        { service: 'pidgin' },
+      );
+    });
+
+    expect(screen.queryByRole('heading', { level: 2 })).not.toBeInTheDocument();
+    expect(screen.getByTestId('portrait-video-carousel')).toHaveAttribute(
+      'aria-label',
+      defaultAriaLabel,
+    );
+  });
+
   it('Should render the PortraitCarouselNavigation component', async () => {
     await act(async () => {
       render(<Component {...fixture} eventTrackingData={eventTrackingData} />);

src/app/components/PortraitVideoCarousel/index.tsx

@@ -8,6 +8,7 @@ import useOptimizelyVariation, {
   ExperimentType,
 } from '#app/hooks/useOptimizelyVariation';
 import useHydrationDetection from '#app/hooks/useHydrationDetection';
+import useClickTrackerHandler from '#app/hooks/useClickTrackerHandler';
 import styles from './index.styles';
 import PortraitVideoModal from '../PortraitVideoModal';
 import { BumpLoader } from '../MediaLoader';
@@ -16,13 +17,15 @@ import PortraitCarouselNavigation from './PortraitVideoCarouselNavigation';
 import Heading from '../Heading';
 import PortraitVideoNoJs from './PortraitVideoNoJs';
 import { PortraitClipMediaBlock } from '../MediaLoader/types';
+import Subheading from '../Curation/Subhead';
 
 type PortraitVideoCarouselProps = {
   title?: string;
   blocks: PortraitClipMediaBlock[];
   eventTrackingData: EventTrackingData;
   className?: string;
   backgroundColor?: string;
+  link?: string;
 };
 
 const PortraitVideoCarousel = ({
@@ -31,6 +34,7 @@ const PortraitVideoCarousel = ({
   eventTrackingData,
   className,
   backgroundColor,
+  link,
 }: PortraitVideoCarouselProps) => {
   const scrollRef = useRef<HTMLUListElement>(null);
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -66,6 +70,8 @@ const PortraitVideoCarousel = ({
 
   const viewTracker = useViewTracker(eventTrackingDataExtended);
 
+  const subheadingClickTracker = useClickTrackerHandler(eventTrackingData);
+
   if (isLite || isAmp) return null;
 
   const handlePromoClick = (index: number) => {
@@ -91,15 +97,21 @@ const PortraitVideoCarousel = ({
         className={className}
         {...viewTracker}
       >
-        {title && (
-          <Heading
-            level={2}
-            size="doublePica"
-            fontVariant="sansBold"
-            css={styles.heading}
-          >
+        {link && title ? (
+          <Subheading link={link} {...subheadingClickTracker}>
             {title}
-          </Heading>
+          </Subheading>
+        ) : (
+          title && (
+            <Heading
+              level={2}
+              size="doublePica"
+              fontVariant="sansBold"
+              css={styles.heading}
+            >
+              {title}
+            </Heading>
+          )
         )}
         <noscript>
           <PortraitVideoNoJs />

src/app/models/types/curationData.ts

@@ -83,6 +83,9 @@ export interface BaseCuration {
   contentType?: string;
   pageTitle?: string;
   mediaCollection?: MediaCollection[];
+  associatedContent?: {
+    uri?: string;
+  };
 }
 
 export interface Curation extends BaseCuration {

src/app/pages/HomePage/HomePage.tsx

@@ -100,6 +100,7 @@ const HomePage = ({ pageData }: HomePageProps) => {
                   link,
                   position,
                   visualStyle,
+                  associatedContent: { uri } = {},
                   ...curationProps
                 }: Curation,
                 index: number,
@@ -122,7 +123,7 @@ const HomePage = ({ pageData }: HomePageProps) => {
                       title={curationTitle}
                       topStoriesTitle={topStoriesTitle}
                       position={position}
-                      link={link}
+                      link={link || uri}
                       curationLength={curations?.length}
                       nthCurationByStyleAndProminence={
                         nthCurationByStyleAndProminence

ws-nextjs-app/pages/[service]/watch/[id]/live/LiveTvPageLayout.tsx

@@ -25,6 +25,7 @@ const renderCuration = ({
     title: curationTitle,
     link,
     position,
+    associatedContent: { uri } = {},
     ...curationProps
   } = curation;
   return (
@@ -33,7 +34,7 @@ const renderCuration = ({
         summaries={summaries || []}
         title={curationTitle}
         position={position}
-        link={link}
+        link={link || uri}
         curationLength={curationLength}
         renderVisuallyHiddenH2Title={position === 0}
         curationId={curationId}