Wsteama 1417 add related content link to jump to component

scripts/bundleSize/bundleSizeConfig.js

@@ -8,4 +8,4 @@
  */
 
 export const MIN_SIZE = 635 - 5;
-export const MAX_SIZE = 1175 + 5;
+export const MAX_SIZE = 1181 + 5;

src/app/components/JumpTo/index.stories.tsx

@@ -4,8 +4,16 @@ import JumpTo, { JumpToProps } from '.';
 import metadata from './metadata.json';
 import readme from './README.md';
 
-const Component = ({ jumpToHeadings = [] }: JumpToProps) => {
-  return <JumpTo jumpToHeadings={jumpToHeadings} />;
+const Component = ({
+  jumpToHeadings = [],
+  showRelatedContentLink = false,
+}: JumpToProps) => {
+  return (
+    <JumpTo
+      jumpToHeadings={jumpToHeadings}
+      showRelatedContentLink={showRelatedContentLink}
+    />
+  );
 };
 
 export default {
@@ -23,5 +31,14 @@ export const Example = () => {
       block => block.type === 'jumpTo',
     )?.model.jumpToHeadings;
 
-  return <Component jumpToHeadings={jumpToHeadings} />;
+  const showRelatedContentLink =
+    !!pidginArticleFixtureWithJumpToBlock.data.article.content.model.blocks.find(
+      block => block.type === 'relatedContent',
+    );
+  return (
+    <Component
+      jumpToHeadings={jumpToHeadings}
+      showRelatedContentLink={showRelatedContentLink}
+    />
+  );
 };

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

@@ -20,7 +20,8 @@ describe('JumpTo Component', () => {
     jest.clearAllMocks();
   });
 
-  const jumpToHeadings = jumpToBlock?.model.jumpToHeadings ?? [];
+  const jumpToHeadings: Array<{ heading: string; sanitisedId?: string }> =
+    jumpToBlock?.model.jumpToHeadings ?? [];
 
   describe('Render jumpTo', () => {
     it('renders the Jump To title', () => {
@@ -29,19 +30,23 @@ describe('JumpTo Component', () => {
       expect(title).toBeInTheDocument();
     });
 
-    it('renders the correct number of headings', () => {
+    it('renders the correct number of headings without related content link', () => {
       render(<JumpTo jumpToHeadings={jumpToHeadings} />);
       const headings = screen.getAllByRole('listitem');
       expect(headings.length).toBe(jumpToHeadings.length);
     });
+    it('renders the correct number of headings with related content link', () => {
+      render(<JumpTo jumpToHeadings={jumpToHeadings} showRelatedContentLink />);
+      const headings = screen.getAllByRole('listitem');
+      expect(headings.length).toBe(jumpToHeadings.length);
+    });
 
     it('renders each item with a link to the corresponding subheading on the same page', () => {
-      render(<JumpTo jumpToHeadings={jumpToHeadings} />);
-      const listItems = screen.getAllByRole('listitem');
-      listItems.forEach((item, index) => {
-        const link = item.querySelector('a');
-        const sanitisedHeading = idSanitiser(jumpToHeadings[index].heading);
-        const expectedHref = `#${sanitisedHeading}`;
+      render(<JumpTo jumpToHeadings={jumpToHeadings} showRelatedContentLink />);
+      jumpToHeadings.forEach(({ heading, sanitisedId }) => {
+        const id = sanitisedId || idSanitiser(heading);
+        const link = screen.getByTestId(`jump-to-link-${id}`);
+        const expectedHref = `#${id}`;
         expect(link).toHaveAttribute('href', expectedHref);
       });
     });
@@ -76,9 +81,9 @@ describe('JumpTo Component', () => {
 
         render(<JumpTo jumpToHeadings={jumpToHeadings} />);
 
-        jumpToHeadings.forEach(({ heading }) => {
-          const sanitisedId = idSanitiser(heading);
-          const link = screen.getByTestId(`jump-to-link-${sanitisedId}`);
+        jumpToHeadings.forEach(({ heading, sanitisedId }) => {
+          const id = sanitisedId || idSanitiser(heading);
+          const link = screen.getByTestId(`jump-to-link-${id}`);
 
           fireEvent.click(link);
           expect(link.onclick).toBeTruthy();

src/app/components/JumpTo/index.tsx

@@ -12,24 +12,24 @@ import idSanitiser from '../../lib/utilities/idSanitiser';
 import styles from './index.styles';
 
 export interface JumpToProps {
-  jumpToHeadings?: Array<{ heading: string }>;
+  jumpToHeadings?: Array<{ heading: string; sanitisedId?: string }>;
+  showRelatedContentLink?: boolean;
 }
 
 const eventTrackingData: EventTrackingMetadata = {
   componentName: 'jumpto',
 };
 
-const JumpTo = ({ jumpToHeadings }: JumpToProps) => {
+const JumpTo = ({ jumpToHeadings, showRelatedContentLink }: JumpToProps) => {
   // TODO: Remove for release
   if (isLive()) return null;
 
   const { translations } = useContext(ServiceContext);
   const [hash, setHash] = useState('');
   const { jumpTo = 'Jump to' } = translations?.articlePage || {};
-
+  const relatedContent = translations?.relatedContent || 'Related content';
   const viewRef = useViewTracker(eventTrackingData);
   const clickTrackerHandler = useClickTrackerHandler(eventTrackingData);
-
   useEffect(() => {
     setHash(window.location.hash);
   }, []);
@@ -43,7 +43,15 @@ const JumpTo = ({ jumpToHeadings }: JumpToProps) => {
   };
 
   const titleId = 'jump-to-heading';
-
+  if (
+    showRelatedContentLink &&
+    !jumpToHeadings?.some(({ heading }) => heading === relatedContent)
+  ) {
+    jumpToHeadings?.push({
+      heading: relatedContent,
+      sanitisedId: 'related-content-heading',
+    });
+  }
   return (
     <nav
       ref={viewRef}
@@ -62,18 +70,17 @@ const JumpTo = ({ jumpToHeadings }: JumpToProps) => {
         {jumpTo}
       </Text>
       <ol role="list" css={styles.list}>
-        {jumpToHeadings?.map(({ heading }) => {
-          const sanitisedId = idSanitiser(heading);
-          const idWithHash = `#${sanitisedId}`;
-
+        {jumpToHeadings?.map(({ heading, sanitisedId }) => {
+          const id = sanitisedId || idSanitiser(heading);
+          const idWithHash = `#${id}`;
           const isActiveId = decodeURIComponent(hash) === idWithHash;
           return (
             <li key={idWithHash} css={styles.listItem}>
               <a
                 href={idWithHash}
                 onClick={e => linkClickHandler(e, idWithHash)}
                 css={styles.link}
-                data-testid={`jump-to-link-${sanitisedId}`}
+                data-testid={`jump-to-link-${id}`}
               >
                 <span
                   css={[styles.linkText, isActiveId && styles.linkTextActive]}

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

@@ -14,7 +14,6 @@ const Blocks = ({ blocks, componentsToRender }) =>
     if (!componentsToRender || !type) {
       return null;
     }
-
     const Block = componentsToRender[type];
 
     if (!Block) {

src/app/pages/ArticlePage/ArticlePage.tsx

@@ -77,7 +77,6 @@ import {
 
 const ArticlePage = ({ pageData }: { pageData: Article }) => {
   const { isApp, pageType, service, isAmp, id } = useContext(RequestContext);
-
   const {
     articleAuthor,
     isTrustProjectParticipant,
@@ -110,7 +109,6 @@ const ArticlePage = ({ pageData }: { pageData: Article }) => {
   const topics = pageData?.metadata?.topics ?? [];
   const blocks = pageData?.content?.model?.blocks ?? [];
   const startsWithHeading = blocks?.[0]?.type === 'headline' || false;
-
   const bylineBlock = blocks.find(
     block => block.type === 'byline',
   ) as OptimoBylineBlock;
@@ -157,7 +155,9 @@ const ArticlePage = ({ pageData }: { pageData: Article }) => {
       service,
       id,
     });
-
+  const showRelatedContent = blocks.some(
+    block => block.type === 'relatedContent',
+  );
   const componentsToRender = {
     visuallyHiddenHeadline,
     headline: headings,
@@ -205,7 +205,9 @@ const ArticlePage = ({ pageData }: { pageData: Article }) => {
       topStoriesContent ? (
         <ExperimentTopStories topStoriesContent={topStoriesContent} />
       ) : null,
-    jumpTo: JumpTo,
+    jumpTo: (props: ComponentToRenderProps) => (
+      <JumpTo {...props} showRelatedContentLink={showRelatedContent} />
+    ),
   };
 
   const visuallyHiddenBlock = {