Tidy up view/click tracking metadata

Author: amoore108

src/app/components/Navigation/index.amp.tsx

@@ -29,7 +29,7 @@ const AmpNavigationContainer: React.FC<AmpNavigationContainerProps> = ({
   service,
   dir,
   menuAnnouncedText,
-  scrollableListItems,
+  bottomScrollableListItems,
   dropdownListItems,
 }) => (
   <Navigation
@@ -58,7 +58,7 @@ const AmpNavigationContainer: React.FC<AmpNavigationContainerProps> = ({
       id={SCROLLABLE_ID}
       navPosition={null}
     >
-      {scrollableListItems}
+      {bottomScrollableListItems}
     </StyledAmpScrollableNavigation>
   </Navigation>
 );

src/app/components/Navigation/index.canonical.tsx

@@ -19,7 +19,7 @@ interface CanonicalNavigationContainerProps {
   menuAnnouncedText: string;
   topScrollableListItems?: React.ReactNode;
   topDivider?: React.ReactNode;
-  scrollableListItems: React.ReactNode;
+  bottomScrollableListItems: React.ReactNode;
   dropdownListItems: React.ReactNode;
   menuButton?: React.ReactNode;
   isOpen?: boolean;
@@ -34,7 +34,7 @@ const CanonicalNavigationContainer: React.FC<
   dir,
   menuAnnouncedText,
   topScrollableListItems,
-  scrollableListItems,
+  bottomScrollableListItems,
   dropdownListItems,
   blocks,
 }) => {
@@ -81,7 +81,7 @@ const CanonicalNavigationContainer: React.FC<
             css={styles.bottomRowItems}
             navPosition="secondary"
           >
-            {scrollableListItems}
+            {bottomScrollableListItems}
           </ScrollableNavigation>
         </div>
       </div>

src/app/components/Navigation/index.tsx

@@ -189,34 +189,21 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
    */
   const navigationItems = navItems || navFromServiceConfig;
 
-  const scrollableNavEventTrackingData = {
-    componentName: `scrollable-navigation`,
-  };
-
-  const topNavEventTrackingData = {
-    componentName: `top-navigation`,
-  };
-
-  const dropdownNavEventTrackingData = { componentName: `dropdown-navigation` };
-
-  const scrollableNavClickTrackerHandler = useClickTrackerHandler(
-    scrollableNavEventTrackingData,
-  );
+  const navEventTrackingMetadata = { componentName: 'scrollable-navigation' };
+  const dropdownNavEventTrackingData = { componentName: 'dropdown-navigation' };
 
   const topNavClickTrackerHandler = useClickTrackerHandler(
-    topNavEventTrackingData,
+    navEventTrackingMetadata,
+  );
+  const bottomNavClickTrackerHandler = useClickTrackerHandler(
+    navEventTrackingMetadata,
   );
-
   const dropdownNavClickTrackerHandler = useClickTrackerHandler(
     dropdownNavEventTrackingData,
   );
 
-  const scrollableNavViewTracker = useViewTracker(
-    scrollableNavEventTrackingData,
-  );
-
-  const topNavViewTracker = useViewTracker(topNavEventTrackingData);
-
+  const topNavViewTracker = useViewTracker(navEventTrackingMetadata);
+  const bottomNavViewTracker = useViewTracker(navEventTrackingMetadata);
   const dropdownNavViewTracker = useViewTracker(dropdownNavEventTrackingData);
 
   // Compute which top item is active based on current URL
@@ -258,7 +245,7 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
     matchesUrl(canonicalLink, origin, item.url),
   );
 
-  const scrollableListItems = (
+  const bottomScrollableListItems = (
     <NavigationUl>
       {renderListItems({
         Li: NavigationLi,
@@ -267,8 +254,8 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
         service,
         dir,
         activeIndex: activeBottomIndex,
-        clickTracker: scrollableNavClickTrackerHandler,
-        viewTracker: scrollableNavViewTracker,
+        clickTracker: bottomNavClickTrackerHandler,
+        viewTracker: bottomNavViewTracker,
         isLite,
         pageType,
       })}
@@ -306,7 +293,7 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
       <div css={styles.brandDivider} />
       <NavigationRenderer
         topScrollableListItems={topScrollableListItems}
-        scrollableListItems={scrollableListItems}
+        bottomScrollableListItems={bottomScrollableListItems}
         dropdownListItems={dropdownListItems}
         menuAnnouncedText={navMenuText}
         dir={dir}

src/app/components/Navigation/types.ts

@@ -6,7 +6,7 @@ export interface AmpNavigationContainerProps {
   dir: string;
   menuAnnouncedText: string;
   topScrollableListItems?: React.ReactNode;
-  scrollableListItems: React.ReactNode;
+  bottomScrollableListItems: React.ReactNode;
   dropdownListItems: React.ReactNode;
 }