update component to reflect simpler bff structure, remove tabindex fo…

…r inlineLinks, update storybook story WIP
bbc · Nov 1, 2024 · 5b0729a · 5b0729a
1 parent 1470032
commit 5b0729a
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 58 deletions.
diff --git 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
@@ -16,26 +16,15 @@ 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;
 }
 
 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}
               />