Merge pull request #2017 from navikt/sticky-close-position

Lukker sticky beholder posisjon på siden

Author: bdahle

src/components/_common/accordion/Accordion.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { Accordion as DSAccordion } from '@navikt/ds-react';
 import { ParsedHtml } from 'components/_common/parsed-html/ParsedHtml';
 import { AnalyticsEvents, logAmplitudeEvent } from 'utils/amplitude';
@@ -7,6 +7,7 @@ import { usePageContentProps } from 'store/pageContext';
 import { EditorHelp } from 'components/_editor-only/editor-help/EditorHelp';
 import { PartConfigAccordion } from 'components/parts/accordion/AccordionPart';
 import { classNames } from 'utils/classnames';
+import { handleStickyScrollOffset } from 'utils/scroll-to';
 
 import defaultHtml from 'components/_common/parsed-html/DefaultHtmlStyling.module.scss';
 import styles from './Accordion.module.scss';
@@ -15,6 +16,8 @@ type AccordionProps = PartConfigAccordion;
 type PanelItem = AccordionProps['accordion'][number];
 
 export const Accordion = ({ accordion }: AccordionProps) => {
+    const itemRefs = useRef<(HTMLDivElement | null)[]>([]);
+
     const { editorView } = usePageContentProps();
     const [openAccordions, setOpenAccordions] = useState<number[]>([]);
 
@@ -27,6 +30,8 @@ export const Accordion = ({ accordion }: AccordionProps) => {
     useShortcuts({ shortcut: Shortcuts.SEARCH, callback: expandAll });
 
     const openChangeHandler = (isOpening: boolean, tittel: string, index: number) => {
+        handleStickyScrollOffset(isOpening, itemRefs.current[index]);
+
         if (isOpening) {
             setOpenAccordions([...openAccordions, index]);
         } else {
@@ -64,6 +69,10 @@ export const Accordion = ({ accordion }: AccordionProps) => {
                         className={styles.item}
                         open={openAccordions.includes(index)}
                         onOpenChange={(open) => openChangeHandler(open, item.title, index)}
+                        ref={(el) => {
+                            itemRefs.current[index] = el;
+                        }}
+                        tabIndex={-1}
                     >
                         <DSAccordion.Header className={styles.header} id={item.anchorId}>
                             {!isValid && (

src/components/_common/expandable/Expandable.tsx

@@ -3,7 +3,7 @@ import { ExpansionCard } from '@navikt/ds-react';
 import { BarChartIcon, BriefcaseClockIcon, CalendarIcon, TasklistIcon } from '@navikt/aksel-icons';
 import { AnalyticsEvents, logAmplitudeEvent } from 'utils/amplitude';
 import { classNames } from 'utils/classnames';
-import { smoothScrollToTarget } from 'utils/scroll-to';
+import { smoothScrollToTarget, handleStickyScrollOffset } from 'utils/scroll-to';
 import { Shortcuts, useShortcuts } from 'utils/useShortcuts';
 import { ProductDetailType } from 'types/content-props/product-details';
 
@@ -40,6 +40,8 @@ export const Expandable = ({
 
     const toggleExpandCollapse = (isOpening: boolean, tittel: string) => {
         setIsOpen(isOpening);
+        handleStickyScrollOffset(isOpening, accordionRef.current);
+
         logAmplitudeEvent(isOpening ? AnalyticsEvents.ACC_EXPAND : AnalyticsEvents.ACC_COLLAPSE, {
             tittel,
             opprinnelse: analyticsOriginTag || 'utvidbar tekst',
@@ -117,6 +119,7 @@ export const Expandable = ({
             onToggle={(isOpen) => toggleExpandCollapse(isOpen, title)}
             open={isOpen}
             aria-label={ariaLabel || title}
+            tabIndex={-1}
         >
             <ExpansionCard.Header className={style.header}>
                 {getHeaderIcon()}

src/components/parts/read-more/ReadMorePart.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { ReadMore } from '@navikt/ds-react';
 import { EditorHelp } from 'components/_editor-only/editor-help/EditorHelp';
 import { ParsedHtml } from 'components/_common/parsed-html/ParsedHtml';
@@ -7,6 +7,7 @@ import { Shortcuts, useShortcuts } from 'utils/useShortcuts';
 import { PartComponentProps, PartType } from 'types/component-props/parts';
 import { ProcessedHtmlProps } from 'types/processed-html-props';
 import { classNames } from 'utils/classnames';
+import { handleStickyScrollOffset } from 'utils/scroll-to';
 
 import defaultHtml from 'components/_common/parsed-html/DefaultHtmlStyling.module.scss';
 import styles from './ReadMorePart.module.scss';
@@ -18,6 +19,8 @@ export type PartConfigReadMore = {
 
 export const ReadMorePart = ({ config }: PartComponentProps<PartType.ReadMore>) => {
     const [isOpen, setIsOpen] = useState(false);
+    const divRef = useRef<HTMLDivElement | null>(null);
+
     useShortcuts({
         shortcut: Shortcuts.SEARCH,
         callback: () => setIsOpen(true),
@@ -28,6 +31,8 @@ export const ReadMorePart = ({ config }: PartComponentProps<PartType.ReadMore>)
     }
 
     const openChangeHandler = (isOpening: boolean, tittel: string) => {
+        handleStickyScrollOffset(isOpening, divRef.current);
+
         setIsOpen(isOpening);
         logAmplitudeEvent(isOpening ? AnalyticsEvents.ACC_EXPAND : AnalyticsEvents.ACC_COLLAPSE, {
             tittel,
@@ -39,15 +44,17 @@ export const ReadMorePart = ({ config }: PartComponentProps<PartType.ReadMore>)
     const { title, html } = config;
 
     return (
-        <ReadMore
-            header={title}
-            open={isOpen}
-            onOpenChange={(isOpen) => openChangeHandler(isOpen, title)}
-            className={styles.readMore}
-        >
-            <div className={classNames(defaultHtml.html, 'parsedHtml')}>
-                <ParsedHtml htmlProps={html} />
-            </div>
-        </ReadMore>
+        <div tabIndex={-1} ref={divRef}>
+            <ReadMore
+                header={title}
+                open={isOpen}
+                onOpenChange={(isOpen) => openChangeHandler(isOpen, title)}
+                className={styles.readMore}
+            >
+                <div className={classNames(defaultHtml.html, 'parsedHtml')}>
+                    <ParsedHtml htmlProps={html} />
+                </div>
+            </ReadMore>
+        </div>
     );
 };

src/utils/scroll-to.ts

@@ -21,3 +21,16 @@ export const smoothScrollToTarget = (targetId: string, offset = 0) => {
         targetElement.focus({ preventScroll: true });
     }
 };
+
+export const handleStickyScrollOffset = (isOpening: boolean, current: HTMLDivElement | null) => {
+    if (!isOpening && current) {
+        const verticalPosition = current.getBoundingClientRect().top;
+
+        if (verticalPosition < 0) {
+            window.scrollBy({
+                top: verticalPosition,
+                behavior: 'instant',
+            });
+        }
+    }
+};