Merge branch 'bose/3866' into staging

Author: BorghildSelle

web/core/Promotion/ModalPromotion.tsx

@@ -2,7 +2,7 @@
 
 import { add_circle_filled, add_circle_outlined } from '@equinor/eds-icons'
 import type { PortableTextBlock } from '@portabletext/types'
-import { forwardRef, useState } from 'react'
+import { forwardRef, useEffect, useState } from 'react'
 import { twMerge } from 'tailwind-merge'
 import { Image } from '@/core/Image/Image'
 import type { Image as ImageType } from '@/core/Image/imageUtilities'
@@ -24,6 +24,7 @@ export type ModalPromotionProps = {
   hasSectionTitle?: boolean
   modalTitle?: string
   modalContent?: React.ReactNode
+  initialOpen?: boolean
   className?: string
 }
 
@@ -49,18 +50,23 @@ export const ModalPromotion = forwardRef<HTMLDivElement, ModalPromotionProps>(
       hasSectionTitle = false,
       modalTitle,
       modalContent,
+      initialOpen = false,
     },
     ref,
   ) {
-    const [isModalOpen, setIsModalOpen] = useState(false)
+    const [isModalOpen, setIsModalOpen] = useState(initialOpen)
     const plainText = getPlainText(title)
     const plainIngress = getPlainText(ingress)
 
+    useEffect(() => {
+      if (initialOpen) setIsModalOpen(true)
+    }, [initialOpen])
+
     const handleOpenModal = (e: React.MouseEvent) => {
       e.preventDefault()
       const searchParams = new URLSearchParams()
       if (plainText) {
-        searchParams.set('#', encodeURIComponent(plainText))
+        searchParams.set('person', encodeURIComponent(plainText))
       }
       window.history.pushState({}, '', `?${searchParams.toString()}`)
       setIsModalOpen(true)

web/sections/PersonList/PersonList.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import type { PortableTextBlock } from '@portabletext/types'
+import { useSearchParams } from 'next/navigation'
 import { forwardRef, useMemo } from 'react'
 import { twMerge } from 'tailwind-merge'
 import { Image } from '@/core/Image/Image'
@@ -53,6 +54,11 @@ const PersonList = forwardRef<HTMLDivElement, PersonListProps>(
   function PersonList({ anchor, data, className }, ref) {
     const backgroundUtility = data.designOptions?.background?.backgroundUtility
     const foreground = data.designOptions?.foreground
+    const searchParams = useSearchParams()
+    // URL hashtag param is set by ModalPromotion as encodeURIComponent(name)
+    const activePersonName = searchParams.get('person')
+      ? decodeURIComponent(searchParams.get('person') ?? '')
+      : null
 
     const groupedByLevel = useMemo(() => {
       if (!data.asDiagram) return null
@@ -217,6 +223,9 @@ const PersonList = forwardRef<HTMLDivElement, PersonListProps>(
                 ingress={item.person?.title}
                 background={foreground}
                 modalTitle={item.person?.name}
+                initialOpen={
+                  !!activePersonName && item.person?.name === activePersonName
+                }
                 modalContent={
                   <div className='flex flex-col gap-6'>
                     <div className='flex items-center gap-6'>