From 5b0729a6e30572c496d28a1e84d19e340cce27d0 Mon Sep 17 00:00:00 2001
From: Pedram Valiani <pedram.valiani@bbc.co.uk>
Date: Fri, 1 Nov 2024 15:27:32 +0000
Subject: [PATCH] update component to reflect simpler bff structure, remove
 tabindex for inlineLinks, update storybook story WIP

---
 src/app/components/JumpTo/index.stories.tsx | 39 ++++++---------------
 src/app/components/JumpTo/index.tsx         | 39 ++++++---------------
 2 files changed, 20 insertions(+), 58 deletions(-)

diff --git a/src/app/components/JumpTo/index.stories.tsx b/src/app/components/JumpTo/index.stories.tsx
index aa1f67d1f8b..350ede0f987 100644
--- a/src/app/components/JumpTo/index.stories.tsx
+++ b/src/app/components/JumpTo/index.stories.tsx
@@ -6,33 +6,14 @@ import metadata from './metadata.json';
 import readme from './README.md';
 
 interface Props {
-  subheadlines?: { id: string; title: string }[];
+  subheadlines?: { title: string }[];
 }
 
-// can we simplify...?
 const Component = ({ subheadlines = [] }: Props) => {
   const jumpToData = {
     model: {
-      blocks: subheadlines.map(subheadline => ({
-        id: subheadline.id,
-        type: 'subheadline',
-        model: {
-          blocks: [
-            {
-              type: 'paragraph',
-              model: {
-                blocks: [
-                  {
-                    type: 'fragment',
-                    model: {
-                      text: subheadline.title,
-                    },
-                  },
-                ],
-              },
-            },
-          ],
-        },
+      jumpToHeadings: subheadlines.map(subheadline => ({
+        heading: subheadline.title,
       })),
     },
   };
@@ -49,21 +30,21 @@ export default {
   },
 };
 
-// WIP - should pull titles from fixture
+// wip sample story - should use a fixture here instead probably for the titles
 export const Example = (_: StoryArgs, globalArgs: Props) => {
   const {
     subheadlines = [
       {
-        id: 'subheadline-1',
-        title: 'This is an article subheadline title - 1',
+        title: 'This is a subheading - 1',
       },
       {
-        id: 'subheadline-2',
-        title: 'This is an article subheadline title - 2',
+        title: 'This is a subheading - 2',
       },
       {
-        id: 'subheadline-3',
-        title: 'This is an article subheadline title - 3',
+        title: 'This is a subheading - 3',
+      },
+      {
+        title: 'This is a subheading - 4',
       },
     ],
   } = globalArgs;
diff --git a/src/app/components/JumpTo/index.tsx b/src/app/components/JumpTo/index.tsx
index 9388cc417aa..4c89fb90ca0 100644
--- a/src/app/components/JumpTo/index.tsx
+++ b/src/app/components/JumpTo/index.tsx
@@ -16,18 +16,7 @@ interface JumpToHeading {
 interface JumpToProps {
   jumpToData: {
     model: {
-      blocks: Array<{
-        id: string;
-        type: string;
-        model: {
-          blocks: Array<{
-            type: string;
-            model: {
-              text?: string;
-            };
-          }>;
-        };
-      }>;
+      jumpToHeadings: Array<{ heading: string }>;
     };
   };
   eventTrackingData?: EventTrackingMetadata;
@@ -35,7 +24,7 @@ interface JumpToProps {
 
 const JumpTo = ({ jumpToData, eventTrackingData }: JumpToProps) => {
   const { translations } = useContext(ServiceContext);
-  // modify to suit updated config file for hindi w/ jumpto block added - fallback is english
+  // modify to suit updated config file for Hindi w/ JumpTo block added - fallback is English
   const { jumpTo = 'Jump to' } = translations?.articlePage || {};
 
   const viewRef = useViewTracker(eventTrackingData);
@@ -44,24 +33,17 @@ const JumpTo = ({ jumpToData, eventTrackingData }: JumpToProps) => {
     identifier: 'JumpTo',
   });
 
-  // can we simplify the extraction process?
-  const subheadlines: JumpToHeading[] = jumpToData?.model?.blocks
-    .map(block => {
-      const paragraphBlock = block.model.blocks.find(
-        b => b.type === 'paragraph',
-      );
-      const fragmentBlock = paragraphBlock?.model?.blocks?.find(
-        b => b.type === 'fragment',
-      );
-      const title = fragmentBlock?.model?.text || '';
-      return title ? { id: block.id, title } : null;
-    })
-    .filter(Boolean) as JumpToHeading[];
+  const subheadlines: JumpToHeading[] = jumpToData?.model?.jumpToHeadings.map(
+    (item, index) => ({
+      id: `jump-to-${index}`,
+      title: item.heading,
+    }),
+  );
 
   const headingId = 'jump-to-heading';
 
-  // We use the Text component with the as prop to set it to a strong (for now) because the screenreader UX states the heading should not be announced
-  // try inline link in place of anchor tag - might be more useful for styling - could change back to anchor if needed
+  // we use the Text component with the as prop set to strong (for now) because the screenreader UX states the heading should not be announced
+  // using inline link instead of anchor to bring benefits to styling but can revert to anchor if needed
   return (
     <section
       ref={viewRef}
@@ -79,7 +61,6 @@ const JumpTo = ({ jumpToData, eventTrackingData }: JumpToProps) => {
               <InlineLink
                 to={`#${heading.id}`}
                 onClick={clickTrackerHandler}
-                tabIndex={-1}
                 data-testid={`jump-to-link-${index}`}
                 text={heading.title}
               />