diff --git a/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx b/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx
index 6b7edc59f..69cc029bc 100644
--- a/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx
+++ b/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' },
diff --git a/src/components/navigation/GlobalNavigation/GlobalNavigationItems.d.ts b/src/components/navigation/GlobalNavigation/GlobalNavigationItems.d.ts
index 7bc4055f1..557c4849f 100644
--- a/src/components/navigation/GlobalNavigation/GlobalNavigationItems.d.ts
+++ b/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
}
diff --git a/src/components/navigation/GlobalNavigation/HomeButton.tsx b/src/components/navigation/GlobalNavigation/HomeButton.tsx
index 22e823d63..f4f061833 100644
--- a/src/components/navigation/GlobalNavigation/HomeButton.tsx
+++ b/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}
/>
)
}
diff --git a/src/components/navigation/MiniMap/MiniMap.tsx b/src/components/navigation/MiniMap/MiniMap.tsx
index 450bbc239..d57dc54f9 100644
--- a/src/components/navigation/MiniMap/MiniMap.tsx
+++ b/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 (
diff --git a/src/components/navigation/MiniMap/SvgLinker.tsx b/src/components/navigation/MiniMap/SvgLinker.tsx
index 2c435147f..94f2667a2 100644
--- a/src/components/navigation/MiniMap/SvgLinker.tsx
+++ b/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,10 +22,16 @@ 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 {wrapButtonsIntoLinks(props.children)}
+ return (
+
+ {wrapButtonsIntoLinks(props.children)}
+
+ )
function wrapButtonsIntoLinks(parent: React.ReactNode): React.ReactNode {
const wrapElement = (element: ReactElement): ReactElement => {
@@ -32,9 +39,11 @@ export const SvgLinker = (props: ISvgLinkerProps) => {
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 (
diff --git a/src/components/navigation/MiniMap/miniMap.css b/src/components/navigation/MiniMap/miniMap.css
index 5fe049ab9..7d5ba38b4 100644
--- a/src/components/navigation/MiniMap/miniMap.css
+++ b/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,10 +43,12 @@
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);
}
@@ -46,3 +56,17 @@
.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;
+}
\ No newline at end of file
diff --git a/src/utils/utils.css b/src/utils/utils.css
index e49aed216..24b3cb166 100644
--- a/src/utils/utils.css
+++ b/src/utils/utils.css
@@ -11,5 +11,5 @@
}
.u-padding-sm {
- padding:var(--padding-sm)
-}
\ No newline at end of file
+ padding:var(--padding-sm) !important;
+}