From ae9a2b0387b7474d13950078cd5b2ee663848ba7 Mon Sep 17 00:00:00 2001 From: Gaby Zifferman Date: Thu, 6 Jun 2024 23:30:55 +0200 Subject: [PATCH] feat: minimap active state (#263) --- .../GlobalNavigation.stories.tsx | 3 ++- .../GlobalNavigationItems.d.ts | 1 + .../GlobalNavigation/HomeButton.tsx | 2 ++ src/components/navigation/MiniMap/MiniMap.tsx | 1 + .../navigation/MiniMap/SvgLinker.tsx | 19 +++++++++++---- src/components/navigation/MiniMap/miniMap.css | 24 +++++++++++++++++++ src/utils/utils.css | 4 ++-- 7 files changed, 46 insertions(+), 8 deletions(-) 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; +}