feat: minimap active state

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

@@ -487,7 +487,8 @@ export const MP: Story = {
       overviewHref: '/',
       onLinkClick: link => alert(link.href),
       onUnauthorizedClick: link => alert(`unauthorized ${link?.href} `),
-      unauthorizedLinks: ['oversight', 'dataPlatform'],
+      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

@@ -6,6 +6,7 @@ export interface ISvgLink {
   href: string
   variant?: 'regular' | 'black' | 'drop-shadow'
   isUnauthorized?: boolean
+  isActive?: boolean
 }
 
 interface ISvgLinkerProps {
@@ -21,20 +22,28 @@ export const SvgLinker = (props: ISvgLinkerProps) => {
     const href = target.closest('a')?.getAttribute('href')
     const link = props.links.find(b => b.href === href)
 
-    if (link) props.onLinkClick(link)
+    if (link) {
+      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 className = `svg-linker-root__button svg-linker-root__button--${link.variant}${
-          link.isUnauthorized ? ' svg-linker-root__button--disabled' : ''
-        }`
+        const isActiveClass = link.isActive ? ' svg-linker-root__button--active' : ''
+        const isUnauthorizedClass = link.isUnauthorized ? ' svg-linker-root__button--disabled' : ''
+        const linkStateClass = isActiveClass || isUnauthorizedClass
+
+        const className = `svg-linker-root__button svg-linker-root__button--${link.variant} ${linkStateClass} `
 
         return (
           <a key={id} href={link.href} className={className}>

src/components/navigation/MiniMap/miniMap.css

@@ -1,7 +1,12 @@
+.svg-linker__container  svg {
+    overflow: visible;
+}
+/* disabled general */
 .svg-linker-root__button.svg-linker-root__button--disabled {
     cursor: default;
 }
 
+/* disabled variant-regular */
 .svg-linker-root__button.svg-linker-root__button--disabled.svg-linker-root__button--regular rect:first-child {
     fill: transparent;
     stroke: var(--color-border);
@@ -15,6 +20,8 @@
     fill: transparent;
 }
 
+
+/* disabled - variant: shadow */
 .svg-linker-root__button.svg-linker-root__button--disabled.svg-linker-root__button--drop-shadow > g > g > rect {
     fill: var(--mp-brand-secondary-3);
 }
@@ -27,6 +34,7 @@
     filter: none;
 }
 
+/* disabled - variant: black */
 .svg-linker-root__button.svg-linker-root__button--disabled.svg-linker-root__button--black rect:first-child {
     fill: var(--mp-brand-secondary-6);
 }
@@ -35,14 +43,30 @@
     fill: var(--mp-brand-secondary-6);
 }
 
+/* general - variant: shadow */
 .svg-linker-root__button.svg-linker-root__button--drop-shadow:hover {
     filter: drop-shadow(0px 9px 28px rgba(0, 0, 0, 0.05)) drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.12)) drop-shadow(0px 6px 16px rgba(0, 0, 0, 0.08));
 }
 
+/* general - variant: black */
 .svg-linker-root__button.svg-linker-root__button--regular:hover rect:first-child {
     fill: var(--mp-brand-primary-2);
 }
 
 .svg-linker-root__button.svg-linker-root__button--black:hover rect:first-child {
     fill: var(--mp-brand-secondary-7);
 }
+
+/* for the active state */
+.svg-linker-root__button--active > g > rect + rect   {
+    stroke: var(--mp-brand-primary-6);
+    stroke-width: var(--line-width-bold)
+}
+
+/* some fixes so the shadow on hover looks good without changing the svg */
+#clip0_5505_13516 {
+    display: none;
+}
+#Frame\ 481773 > #Frame\ 481772 > rect {
+    display: none;
+}

src/utils/utils.css

@@ -11,5 +11,5 @@
 }
 
 .u-padding-sm {
-  padding:var(--padding-sm)
-}
+  padding:var(--padding-sm) !important;
+}