Merge branch 'master' into mod/DEV13093-dtui

Author: nick-torres

components/InPageNav.jsx

@@ -22,7 +22,7 @@ const propTypes = {
     pageName: PropTypes.string
 };
 
-function InPageNav(props) {
+const InPageNav = (props) => {
     const {
         sections, jumpToSection, pageName, detectActiveSection
     } = props;
@@ -109,8 +109,11 @@ function InPageNav(props) {
 
             // check for 2 items
             if (index - 2 >= 0) {
-                const leftPosition = elementData[index - 2]?.originalLeftOffset + (padding / 2);
-                ulEl.scrollTo({ left: leftPosition, behavior: 'smooth' });
+                const leftOffset = elementData[index - 2]?.originalLeftOffset;
+                if (leftOffset) {
+                    const leftPosition = leftOffset + (padding / 2);
+                    ulEl.scrollTo({ left: leftPosition, behavior: 'smooth' });
+                }
             }
             else {
                 reset(navBar);
@@ -349,7 +352,7 @@ function InPageNav(props) {
             </nav>
         </div>
     );
-}
+};
 
 InPageNav.propTypes = propTypes;
 export default InPageNav;

components/PageHeader.jsx

@@ -1,15 +1,13 @@
-import React, { useRef, useEffect } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 
-import { useDynamicStickyClass } from '../helpers/pageHeaderHelper';
 import InPageNav from './InPageNav';
 
 require('../styles/components/_pageHeader.scss');
 
 const PageHeader = ({
     title,
     overLine = "",
-    stickyBreakPoint = 0,
     toolBar = [],
     backgroundColor = '#1a4480',
     pageName,
@@ -18,28 +16,6 @@ const PageHeader = ({
     jumpToSection,
     inPageNav = false
 }) => {
-    const stickyHeader = useRef(null);
-    const [
-        isSticky,
-        ,
-        ,
-        handleScroll,
-        measureScreen
-    ] = useDynamicStickyClass(stickyHeader, stickyBreakPoint);
-
-    useEffect(() => {
-        measureScreen();
-        window.addEventListener('scroll', handleScroll);
-        window.addEventListener('resize', measureScreen);
-
-        return () => {
-            window.removeEventListener('scroll', handleScroll);
-            window.removeEventListener('resize', measureScreen);
-        };
-    });
-
-    const stickyClass = isSticky ? ' usda-page-header--sticky' : '';
-
     const renderMobileShareIcon = () => {
         const shareIcon = toolBar?.find((o) => o?.type.displayName === 'Share Icon');
         if (shareIcon) {
@@ -57,7 +33,7 @@ const PageHeader = ({
     };
 
     return (
-        <section className={`usda-page-header${stickyClass}`} ref={stickyHeader} style={{backgroundColor: backgroundColor}}>
+        <section className="usda-page-header usda-page-header--sticky" style={{ backgroundColor }}>
             <div className="usda-page-header__container">
                 <div className="usda-page-header__mobile-top">
                     <div className="usda-page-header__header">
@@ -93,12 +69,14 @@ const PageHeader = ({
                     </div>
                 )}
             </div>
-            {inPageNav && <InPageNav
-                detectActiveSection
-                pageName={pageName}
-                sections={sections}
-                activeSection={activeSection}
-                jumpToSection={jumpToSection} />}
+            {inPageNav && (
+                <InPageNav
+                    detectActiveSection
+                    pageName={pageName}
+                    sections={sections}
+                    activeSection={activeSection}
+                    jumpToSection={jumpToSection} />
+            )}
         </section>
     );
 };