Merge pull request #2184 from navikt/redaktorvarsel-expandable

Åpning av accordion og readmore-komponenter ved redaktørvarsel

Author: taniaholst

src/components/_common/accordion/Accordion.tsx

@@ -12,32 +12,29 @@ import { classNames } from 'utils/classnames';
 import { handleStickyScrollOffset } from 'utils/scroll-to';
 
 import defaultHtml from 'components/_common/parsedHtml/DefaultHtmlStyling.module.scss';
+import { useCheckAndOpenAccordionPanel } from 'store/hooks/useCheckAndOpenAccordionPanel';
 import styles from './Accordion.module.scss';
 
 type AccordionProps = PartConfigAccordion;
 type PanelItem = AccordionProps['accordion'][number];
 
 export const Accordion = ({ accordion }: AccordionProps) => {
-    const itemRefs = useRef<(HTMLDivElement | null)[]>([]);
+    const itemRefs = useRef(accordion.map(() => React.createRef<HTMLDivElement>()));
     const contentProps = usePageContentProps();
     const { context } = getDecoratorParams(contentProps);
     const { editorView, type } = contentProps;
     const [openAccordions, setOpenAccordions] = useState<number[]>([]);
-    const expandAll = () => {
-        setOpenAccordions(accordion.map((_, index) => index));
-    };
-    const validatePanel = (item: PanelItem) => !!(item.title && item.html);
 
-    useShortcuts({ shortcut: Shortcuts.SEARCH, callback: expandAll });
+    const expandAll = () => setOpenAccordions(accordion.map((_, index) => index));
+    const validatePanel = (item: PanelItem) => Boolean(item.title && item.html);
 
-    const openChangeHandler = (isOpening: boolean, tittel: string, index: number) => {
-        handleStickyScrollOffset(isOpening, itemRefs.current[index]);
+    useShortcuts({ shortcut: Shortcuts.SEARCH, callback: expandAll });
 
-        if (isOpening) {
-            setOpenAccordions([...openAccordions, index]);
-        } else {
-            setOpenAccordions(openAccordions.filter((i) => i !== index));
-        }
+    const handleOpenChange = (isOpening: boolean, tittel: string, index: number) => {
+        handleStickyScrollOffset(isOpening, itemRefs.current[index].current);
+        setOpenAccordions((prev) =>
+            isOpening ? [...prev, index] : prev.filter((i) => i !== index)
+        );
         logAnalyticsEvent(isOpening ? AnalyticsEvents.ACC_EXPAND : AnalyticsEvents.ACC_COLLAPSE, {
             tittel,
             opprinnelse: 'trekkspill',
@@ -47,20 +44,11 @@ export const Accordion = ({ accordion }: AccordionProps) => {
         });
     };
 
-    useEffect(() => {
-        if (window.location.toString().includes('expandall=true')) {
-            expandAll();
-            return;
-        }
-        const anchorHash = window.location.hash || '';
-        const matchingAccordion = accordion.findIndex(
-            (item) => validatePanel(item) && item.anchorId === anchorHash.slice(1)
-        );
-        if (matchingAccordion !== -1) {
-            setOpenAccordions([matchingAccordion]);
-        }
-        /* eslint-disable-next-line react-hooks/exhaustive-deps */
-    }, []);
+    if (itemRefs.current.length !== accordion.length) {
+        itemRefs.current = accordion.map(() => React.createRef<HTMLDivElement>());
+    }
+
+    useCheckAndOpenAccordionPanel(openAccordions, setOpenAccordions, itemRefs.current, expandAll);
 
     // Show all panels in edit mode, but only valid panels in view mode
     const validAccordion = accordion.filter(validatePanel);
@@ -75,21 +63,16 @@ export const Accordion = ({ accordion }: AccordionProps) => {
                         key={index}
                         className={styles.item}
                         open={openAccordions.includes(index)}
-                        onOpenChange={(open) => openChangeHandler(open, item.title, index)}
-                        ref={(el) => {
-                            itemRefs.current[index] = el;
-                        }}
+                        onOpenChange={(open) => handleOpenChange(open, item.title, index)}
+                        ref={itemRefs.current[index]}
                         tabIndex={-1}
                     >
                         <DSAccordion.Header className={styles.header} id={item.anchorId}>
-                            {!isValid && (
-                                <EditorHelp
-                                    text={
-                                        'Panelet mangler tittel eller innhold. Klikk for å redigere'
-                                    }
-                                />
+                            {!isValid ? (
+                                <EditorHelp text="Panelet mangler tittel eller innhold. Klikk for å redigere" />
+                            ) : (
+                                <div className={styles.headerTitle}>{item.title}</div>
                             )}
-                            {isValid && <div className={styles.headerTitle}>{item.title}</div>}
                         </DSAccordion.Header>
                         <DSAccordion.Content className={styles.content}>
                             <div className={classNames(defaultHtml.html, 'parsedHtml')}>

src/components/_common/expandable/Expandable.tsx

@@ -1,15 +1,15 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { ExpansionCard } from '@navikt/ds-react';
 import { BarChartIcon, BriefcaseClockIcon, CalendarIcon, TasklistIcon } from '@navikt/aksel-icons';
 import { AnalyticsEvents, logAnalyticsEvent } from 'utils/analytics';
 import { usePageContentProps } from 'store/pageContext';
 import { getDecoratorParams } from 'utils/decorator-utils';
 import { innholdsTypeMap } from 'types/content-props/_content-common';
 import { classNames } from 'utils/classnames';
-import { smoothScrollToTarget, handleStickyScrollOffset } from 'utils/scroll-to';
+import { handleStickyScrollOffset } from 'utils/scroll-to';
 import { Shortcuts, useShortcuts } from 'utils/useShortcuts';
 import { ProductDetailType } from 'types/content-props/product-details';
-
+import { useCheckAndOpenPanel } from 'store/hooks/useCheckAndOpenPanel';
 import style from './Expandable.module.scss';
 
 type Props = {
@@ -38,17 +38,12 @@ export const Expandable = ({
     const contentProps = usePageContentProps();
     const { context } = getDecoratorParams(contentProps);
 
-    useShortcuts({
-        shortcut: Shortcuts.SEARCH,
-        callback: () => {
-            setIsOpen(true);
-        },
-    });
+    useShortcuts({ shortcut: Shortcuts.SEARCH, callback: () => setIsOpen(true) });
+    useCheckAndOpenPanel(isOpen, setIsOpen, accordionRef, anchorId);
 
     const toggleExpandCollapse = (isOpening: boolean, tittel: string) => {
         setIsOpen(isOpening);
         handleStickyScrollOffset(isOpening, accordionRef.current);
-
         logAnalyticsEvent(isOpening ? AnalyticsEvents.ACC_EXPAND : AnalyticsEvents.ACC_COLLAPSE, {
             tittel,
             opprinnelse: analyticsOriginTag || 'utvidbar tekst',
@@ -58,68 +53,21 @@ export const Expandable = ({
         });
     };
 
-    const checkAndOpenPanel = () => {
-        if (isOpen) {
-            return;
-        }
-
-        if (window.location.toString().includes('expandall=true')) {
-            setIsOpen(true);
-            return;
-        }
-
-        const targetId = window.location.hash.replace('#', '');
-        if (!targetId) {
-            return;
-        }
-
-        if (targetId === anchorId) {
-            setIsOpen(true);
-            return;
-        }
-
-        const elementWithId = document.getElementById(targetId);
-        if (accordionRef.current?.contains(elementWithId)) {
-            setIsOpen(true);
-            setTimeout(() => smoothScrollToTarget(targetId), 500);
-        }
-    };
-
-    const hashChangeHandler = () => {
-        checkAndOpenPanel();
-    };
-
     const getHeaderIcon = () => {
-        if (expandableType === ProductDetailType.PROCESSING_TIMES) {
-            return <BriefcaseClockIcon aria-hidden className={style.headerIcon} />;
-        }
-        if (expandableType === ProductDetailType.PAYOUT_DATES) {
-            return <CalendarIcon aria-hidden className={style.headerIcon} />;
-        }
-        if (expandableType === ProductDetailType.RATES) {
-            return <BarChartIcon aria-hidden className={style.headerIcon} />;
+        switch (expandableType) {
+            case ProductDetailType.PROCESSING_TIMES:
+                return <BriefcaseClockIcon aria-hidden className={style.headerIcon} />;
+            case ProductDetailType.PAYOUT_DATES:
+                return <CalendarIcon aria-hidden className={style.headerIcon} />;
+            case ProductDetailType.RATES:
+                return <BarChartIcon aria-hidden className={style.headerIcon} />;
+            case 'documentation_requirements':
+                return <TasklistIcon aria-hidden className={style.headerIcon} />;
+            default:
+                return null;
         }
-        if (expandableType === 'documentation_requirements') {
-            return <TasklistIcon aria-hidden className={style.headerIcon} />;
-        }
-        return null;
     };
 
-    useEffect(() => {
-        window.addEventListener('hashchange', hashChangeHandler);
-
-        return () => {
-            window.removeEventListener('hashchange', hashChangeHandler);
-        };
-
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-
-    useEffect(() => {
-        checkAndOpenPanel();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [anchorId]);
-
     // Adjust appearande in styling if not type was set for this content
     // This is the wrong use of this component, but some legacy pages have still to
     // be upradet editorial wise.

src/components/_editor-only/warnings/duplicate-ids-warning/DuplicateIdsWarning.module.scss

@@ -3,6 +3,14 @@
 .warning {
     min-width: 400px;
     background-color: common.$a-white;
+
+    &::before {
+        content: '';
+        display: block;
+        height: 100px;
+        margin-top: -100px;
+        visibility: hidden;
+    }
 }
 
 .lenkeInline {

src/components/parts/readMorePart/ReadMorePart.module.scss

@@ -2,6 +2,7 @@
     margin-bottom: var(--a-spacing-9);
 
     :global(.navds-read-more__button) {
+        z-index: 1;
         margin-bottom: var(--a-spacing-3);
         background-color: var(--a-blue-50);
         padding: var(--a-spacing-2) var(--a-spacing-6) var(--a-spacing-2) 13px;

src/components/parts/readMorePart/ReadMorePart.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, 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/parsedHtml/ParsedHtml';
@@ -13,6 +13,7 @@ import { PartComponentProps, PartType } from 'types/component-props/parts';
 import { ProcessedHtmlProps } from 'types/processed-html-props';
 
 import defaultHtml from 'components/_common/parsedHtml/DefaultHtmlStyling.module.scss';
+import { useCheckAndOpenPanel } from 'store/hooks/useCheckAndOpenPanel';
 import styles from './ReadMorePart.module.scss';
 
 export type PartConfigReadMore = {
@@ -32,11 +33,7 @@ export const ReadMorePart = ({ config }: PartComponentProps<PartType.ReadMore>)
         callback: () => setIsOpen(true),
     });
 
-    useEffect(() => {
-        if (window.location.toString().includes('expandall=true')) {
-            setIsOpen(true);
-        }
-    }, []);
+    useCheckAndOpenPanel(isOpen, setIsOpen, divRef);
 
     if (!config?.html || !config.title) {
         return <EditorHelp text={'Legg inn tittel og beskrivelse for "les mer".'} type={'error'} />;

src/store/hooks/useCheckAndOpenAccordionPanel.ts

@@ -0,0 +1,34 @@
+import { useEffect, useCallback } from 'react';
+import { smoothScrollToTarget } from 'utils/scroll-to';
+
+export const useCheckAndOpenAccordionPanel = (
+    openPanels: number[],
+    setOpenPanels: (indexes: number[]) => void,
+    refs: React.RefObject<HTMLDivElement>[],
+    expandAll: () => void
+) => {
+    const checkAndOpenPanels = useCallback(() => {
+        const targetId = window.location.hash.slice(1);
+        if (!targetId) return;
+
+        if (window.location.search.includes('expandall=true')) {
+            expandAll();
+            return;
+        }
+
+        const targetElement = document.getElementById(targetId);
+        const panelIndex = refs.findIndex((ref) => ref.current?.contains(targetElement));
+
+        if (panelIndex !== -1 && !openPanels.includes(panelIndex)) {
+            setOpenPanels([...openPanels, panelIndex]);
+            setTimeout(() => smoothScrollToTarget(targetId), 500);
+        }
+    }, [openPanels, refs, setOpenPanels, expandAll]);
+
+    useEffect(() => {
+        window.addEventListener('hashchange', checkAndOpenPanels);
+        return () => window.removeEventListener('hashchange', checkAndOpenPanels);
+    }, [checkAndOpenPanels]);
+
+    useEffect(checkAndOpenPanels, [checkAndOpenPanels]);
+};

src/store/hooks/useCheckAndOpenPanel.ts

@@ -0,0 +1,34 @@
+import { useEffect, useCallback } from 'react';
+import { smoothScrollToTarget } from 'utils/scroll-to';
+
+export const useCheckAndOpenPanel = (
+    isOpen: boolean,
+    setIsOpen: (isOpen: boolean) => void,
+    ref: React.RefObject<HTMLDivElement>,
+    anchorId?: string
+) => {
+    const checkAndOpenPanel = useCallback(() => {
+        if (isOpen) return;
+
+        const targetId = window.location.hash.slice(1);
+        if (!targetId) return;
+
+        if (window.location.search.includes('expandall=true') || targetId === anchorId) {
+            setIsOpen(true);
+            return;
+        }
+
+        const targetElement = document.getElementById(targetId);
+        if (ref.current?.contains(targetElement)) {
+            setIsOpen(true);
+            setTimeout(() => smoothScrollToTarget(targetId), 500);
+        }
+    }, [isOpen, setIsOpen, ref, anchorId]);
+
+    useEffect(() => {
+        window.addEventListener('hashchange', checkAndOpenPanel);
+        return () => window.removeEventListener('hashchange', checkAndOpenPanel);
+    }, [checkAndOpenPanel]);
+
+    useEffect(checkAndOpenPanel, [checkAndOpenPanel]);
+};