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

@@ -29,21 +29,32 @@ 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 + 1);
+    });
 
     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 }) => {
+        const sanitisedId = idSanitiser(heading);
+        const link = screen.getByTestId(`jump-to-link-${sanitisedId}`);
+        const expectedHref = `#${sanitisedId}`;
         expect(link).toHaveAttribute('href', expectedHref);
       });
+      const relatedContentLink = screen.getByTestId(
+        `jump-to-link-related-content-heading`,
+      );
+      expect(relatedContentLink).toHaveAttribute(
+        'href',
+        '#related-content-heading',
+      );
     });
   });
 

src/app/components/JumpTo/index.tsx

@@ -13,23 +13,23 @@ import styles from './index.styles';
 
 export interface JumpToProps {
   jumpToHeadings?: Array<{ heading: 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'; // in English translations this has a lower case c!
   const viewRef = useViewTracker(eventTrackingData);
   const clickTrackerHandler = useClickTrackerHandler(eventTrackingData);
-
   useEffect(() => {
     setHash(window.location.hash);
   }, []);
@@ -65,17 +65,18 @@ const JumpTo = ({ jumpToHeadings }: JumpToProps) => {
         {jumpToHeadings?.map(({ heading }) => {
           const sanitisedId = idSanitiser(heading);
           const idWithHash = `#${sanitisedId}`;
-
           const isActiveId = decodeURIComponent(hash) === idWithHash;
           return (
             <li key={idWithHash} css={styles.listItem}>
               <a
                 href={idWithHash}
                 onClick={e => linkClickHandler(e, idWithHash)}
                 css={styles.link}
+                aria-labelledby={`jump-to-heading-${sanitisedId}`}
                 data-testid={`jump-to-link-${sanitisedId}`}
               >
                 <span
+                  id={`jump-to-heading-${sanitisedId}`}
                   css={[styles.linkText, isActiveId && styles.linkTextActive]}
                 >
                   {heading}
@@ -84,6 +85,28 @@ const JumpTo = ({ jumpToHeadings }: JumpToProps) => {
             </li>
           );
         })}
+        {showRelatedContentLink && (
+          <li key="#related-content-heading" css={styles.listItem}>
+            <a
+              href="#related-content-heading"
+              onClick={e => linkClickHandler(e, '#related-content-heading')}
+              css={styles.link}
+              aria-labelledby="jump-to-related-content-heading"
+              data-testid="jump-to-link-related-content-heading"
+            >
+              <span
+                id="jump-to-related-content-heading"
+                css={[
+                  styles.linkText,
+                  decodeURIComponent(hash) === '#related-content-heading' &&
+                    styles.linkTextActive,
+                ]}
+              >
+                {relatedContent}
+              </span>
+            </a>
+          </li>
+        )}
       </ol>
     </nav>
   );

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 = {