feat: minimap active state

src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx

@@ -488,6 +488,7 @@ export const MP: Story = {
       onLinkClick: link => alert(link.href),
       onUnauthorizedClick: link => alert(`unauthorized ${link?.href} `),
       unauthorizedLinks: ['dataPlatform'],
+      activeLink: 'oversight',
       links: [
         { linkId: 'oversight', href: '/oversight' },
         { linkId: 'dataPlatform', href: '/data-platform' },

src/components/navigation/GlobalNavigation/GlobalNavigationItems.d.ts

@@ -44,4 +44,5 @@ export interface IMiniMapOptions {
   onLinkClick: (link: MiniMapLink) => void
   onUnauthorizedClick: (link?: MiniMapLink) => void
   unauthorizedLinks: MiniMapLinks[]
+  activeLink: MiniMapLinks
 }

src/components/navigation/GlobalNavigation/HomeButton.tsx

@@ -38,6 +38,7 @@ function MinimapWithPopover(props: MinimapWithPopoverProps) {
           links={props.links}
           onLinkClick={props.onLinkClick}
           unauthorizedLinks={props.unauthorizedLinks}
+          activeLink={props.activeLink}
         />
       )}
       placement="rightBottom"
@@ -68,6 +69,7 @@ export function HomeButton(props: HomeButtonProps) {
       onLinkClick={props.minimapOptions.onLinkClick}
       unauthorizedLinks={props.minimapOptions.unauthorizedLinks}
       onPopoverClick={props.onMpHomeClick}
+      activeLink={props.minimapOptions.activeLink}
     />
   )
 }

src/components/navigation/MiniMap/MiniMap.tsx

@@ -25,6 +25,7 @@ const Minimap = (props: IMiniMapProps) => {
     href: link.href,
     variant: 'drop-shadow',
     isUnauthorized: props.unauthorizedLinks.includes(link.linkId),
+    isActive: props.activeLink === link.linkId,
   }))
 
   return (

src/components/navigation/MiniMap/SvgLinker.tsx

@@ -1,11 +1,12 @@
-import React, { Children, ReactElement, useState } from 'react'
+import React, { Children, ReactElement } from 'react'
 import './miniMap.css'
 
 export interface ISvgLink {
   elementId: string
   href: string
   variant?: 'regular' | 'black' | 'drop-shadow'
   isUnauthorized?: boolean
+  isActive?: boolean
 }
 
 interface ISvgLinkerProps {
@@ -15,29 +16,30 @@ interface ISvgLinkerProps {
 }
 
 export const SvgLinker = (props: ISvgLinkerProps) => {
-  const [activeLink, setActiveLink] = useState<string | null>(null)
-
   const handleContainerClick = (e: React.MouseEvent) => {
     e.preventDefault()
     const target = e.target as HTMLElement
     const href = target.closest('a')?.getAttribute('href')
     const link = props.links.find(b => b.href === href)
 
     if (link) {
-      !link.isUnauthorized && setActiveLink(link.href)
       props.onLinkClick(link)
     }
   }
 
-  return <div onClick={handleContainerClick}>{wrapButtonsIntoLinks(props.children)}</div>
+  return (
+    <div onClick={handleContainerClick} className="svg-linker__container">
+      {wrapButtonsIntoLinks(props.children)}
+    </div>
+  )
 
   function wrapButtonsIntoLinks(parent: React.ReactNode): React.ReactNode {
     const wrapElement = (element: ReactElement): ReactElement => {
       const { id, children } = element.props
       const link = props.links.find(b => b.elementId === id)
 
       if (link) {
-        const isActiveClass = link.href === activeLink && ' svg-linker-root__button--active'
+        const isActiveClass = link.isActive && ' svg-linker-root__button--active'
         const isUnauthorizedClass = link.isUnauthorized && ' svg-linker-root__button--disabled'
         const linkStateClass = isActiveClass || isUnauthorizedClass
 

src/components/navigation/MiniMap/miniMap.css

@@ -1,3 +1,6 @@
+.svg-linker__container  svg {
+    overflow: visible;
+}
 /* disabled general */
 .svg-linker-root__button.svg-linker-root__button--disabled {
     cursor: default;

src/components/navigation/MiniMap/minimap-svg.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
 export const minimap = (
-  <svg width="385" height="374" viewBox="0 0 385 374" fill="none" xmlns="http://www.w3.org/2000/svg" className="u-overflow-visible">
+  <svg width="385" height="374" viewBox="0 0 385 374" fill="none" xmlns="http://www.w3.org/2000/svg">
     <g id="mini map content" clipPath="url(#clip0_5505_13516)">
       <rect width="385" height="374" fill="white" />
       <g id="Frame 481773" clipPath="url(#clip1_5505_13516)">

src/utils/utils.css

@@ -13,7 +13,3 @@
 .u-padding-sm {
   padding:var(--padding-sm) !important;
 }
-
-.u-overflow-visible {
-  overflow: visible !important;
-}