feat: replace minimap with suite selector

src/components/navigation/GlobalNavigation/SuiteSelector/SuiteSelector.tsx

@@ -0,0 +1,33 @@
+import React, { type ReactNode } from 'react'
+import { type IPopoverProps, Popover } from 'src/components'
+import type { IMiniMapOptions, MiniMapLink } from 'src/components/navigation/GlobalNavigation/GlobalNavigationItems'
+import { SuiteSelectorContent } from 'src/components/navigation/GlobalNavigation/SuiteSelector/SuiteSelectorContent'
+
+interface ISuiteSelectorProps extends IPopoverProps {
+  minimapOptions: IMiniMapOptions
+  onLinkClick: (link: MiniMapLink) => void
+  children: ReactNode
+}
+
+export function SuiteSelector(props: ISuiteSelectorProps) {
+  return (
+    <Popover
+      content={
+        <SuiteSelectorContent
+          overviewHref={props.minimapOptions.overviewHref}
+          onUnauthorizedClick={props.minimapOptions.onUnauthorizedClick}
+          links={props.minimapOptions.links}
+          onLinkClick={props.onLinkClick}
+          unauthorizedLinks={props.minimapOptions.unauthorizedLinks}
+          activeLink={props.minimapOptions.activeLink}
+        />
+      }
+      placement="bottomLeft"
+      open={props.open}
+      trigger="click"
+      onOpenChange={props.onOpenChange}
+      arrow={false}>
+      {props.children}
+    </Popover>
+  )
+}

src/components/navigation/GlobalNavigation/SuiteSelector/SuiteSelectorContent.tsx

@@ -0,0 +1,56 @@
+import './suite-selector.css'
+import { ConfigProvider } from 'antd'
+import React from 'react'
+import { Button, Col, Flex, Row } from 'src/components'
+import {
+  type IMiniMapOptions,
+  type MiniMapLink,
+} from 'src/components/navigation/GlobalNavigation/GlobalNavigationItems'
+import { SuiteSelectorSuiteLink } from 'src/components/navigation/GlobalNavigation/SuiteSelector/SuiteSelectorSuiteLink'
+
+type ISuiteSelectorContentProps = IMiniMapOptions
+
+export function SuiteSelectorContent(props: ISuiteSelectorContentProps) {
+  const handleLinkClick = (link: MiniMapLink): void => {
+    const isLinkUnauthorized = props.unauthorizedLinks?.includes(link.linkId)
+
+    if (link) {
+      if (isLinkUnauthorized) props.onUnauthorizedClick?.(link)
+      else props.onLinkClick(link)
+    }
+  }
+  return (
+    <ConfigProvider>
+      <div className="u-padding-xxs">
+        <Row gutter={[0, 4]} className="suiteSelector__content">
+          {props.links.map(link => (
+            <Col span={8} key={link.linkId}>
+              <SuiteSelectorSuiteLink
+                link={link}
+                unauthorizedLinks={props.unauthorizedLinks}
+                activeLink={props.activeLink}
+                onLinkClick={() => {
+                  handleLinkClick(link)
+                }}
+              />
+            </Col>
+          ))}
+        </Row>
+
+        {renderOverviewButton()}
+      </div>
+    </ConfigProvider>
+  )
+
+  function renderOverviewButton() {
+    return (
+      <>
+        <Flex align="center" justify="start">
+          <Button type="primary" href={props.overviewHref || '/'}>
+            Go to Overview
+          </Button>
+        </Flex>
+      </>
+    )
+  }
+}

src/components/navigation/GlobalNavigation/SuiteSelector/SuiteSelectorSuiteLink.tsx

@@ -0,0 +1,64 @@
+import React from 'react'
+import { Center, Flex, Icon } from 'src/components'
+import { type MiniMapLink, type MiniMapLinks } from 'src/components/navigation/GlobalNavigation/GlobalNavigationItems'
+import { NavigationIcon } from 'src/components/navigation/GlobalNavigation/NavigationIcon'
+import type { IconNames } from 'src/types/icons'
+
+interface ISuiteSelectorSuiteLinkProps {
+  link: MiniMapLink
+  onLinkClick: (link: MiniMapLink) => void
+  unauthorizedLinks?: MiniMapLinks[]
+  activeLink: MiniMapLinks
+}
+
+const elementNameMap: Record<MiniMapLinks, string> = {
+  oversight: 'Oversight',
+  dataPlatform: 'Data Platform',
+  customer360: 'Customer 360',
+  predictions: 'Predictions',
+  analytics: 'Analytics',
+  segmentation: 'Segmentation',
+} as const
+
+const elementIconMap: Record<MiniMapLinks, IconNames> = {
+  oversight: 'oversight',
+  dataPlatform: 'dataPlatform',
+  customer360: 'C360',
+  predictions: 'predictions',
+  analytics: 'analytics',
+  segmentation: 'segmentation',
+} as const
+
+export function SuiteSelectorSuiteLink(props: ISuiteSelectorSuiteLinkProps) {
+  const getLinkClass = (link: MiniMapLink): string => {
+    const isActiveClass = props.activeLink === link.linkId ? ' suiteSelector__link--active' : ''
+    const isUnauthorizedClass = props.unauthorizedLinks?.includes(link.linkId) ? ' suiteSelector__link--disabled' : ''
+    const linkStateClass = isActiveClass || isUnauthorizedClass
+
+    return `suiteSelector__link ${linkStateClass} `
+  }
+
+  const handleContainerClick = (e: React.MouseEvent) => {
+    e.preventDefault()
+    props.onLinkClick(props.link)
+  }
+
+  return (
+    <>
+      <div onClick={handleContainerClick} className={getLinkClass(props.link)}>
+        <Flex vertical align="center" gap="small">
+          <NavigationIcon icon={renderLogo(elementIconMap[props.link.linkId])} label="" hideLabel />
+          {elementNameMap[props.link.linkId]}
+        </Flex>
+      </div>
+    </>
+  )
+
+  function renderLogo(name: IconNames) {
+    return (
+      <Center vertical className="suiteSelector__suiteLogo">
+        <Icon name={name} size="md" color="brand" variant="duo-tone" />
+      </Center>
+    )
+  }
+}

src/components/navigation/GlobalNavigation/SuiteSelector/suite-selector.css

@@ -0,0 +1,50 @@
+:root {
+  --suite-selector-content-max-width: 272px;
+}
+
+.suiteSelector__content {
+  max-width: var(--suite-selector-content-max-width);
+  margin-bottom: var(--margin-xs);
+}
+
+.suiteSelector__link {
+  padding: var(--padding-sm) 0;
+  border-radius: var(--border-radius-lg);
+  color: var(--color-text-base);
+  font-size: var(--font-size-sm);
+  border: 1px solid transparent;
+  cursor: pointer;
+}
+
+.suiteSelector__link:not(.suiteSelector__link--active, .suiteSelector__link--disabled):hover {
+  background-color: var(--color-primary-bg-hover);
+  border-color: var(--color-primary-bg-hover);
+}
+
+.suiteSelector__link:not(.suiteSelector__link--active, .suiteSelector__link--disabled):hover .suiteSelector__suiteLogo {
+  background-color: var(--control-item-bg-hover);
+}
+
+.suiteSelector__link.suiteSelector__link--active {
+  border-color: var(--color-border);
+}
+
+.suiteSelector__link.suiteSelector__link--disabled {
+  cursor: default;
+  color: var(--color-text-disabled);
+}
+
+.suiteSelector__link.suiteSelector__link--disabled .suiteSelector__suiteLogo {
+  background-color: var(--mp-brand-secondary-3);
+}
+
+.suiteSelector__link.suiteSelector__link--disabled .suiteSelector__suiteLogo svg {
+  color: var(--color-text-disabled);
+}
+
+.suiteSelector__suiteLogo {
+  background-color: var(--control-item-bg-active);
+  width: var(--control-height-lg);
+  height: var(--control-height-lg);
+  border-radius: 100%;
+}

src/components/navigation/GlobalNavigation/global-navigation.css

@@ -288,7 +288,7 @@
 .globalNavigation__suiteLogo {
   min-height: var(--suite-logo-height);
   min-width: var(--nav-width);
-  padding: var(--padding-md) 0;
+  padding: var(--padding-md) 0 0;
   color: black;
   font-size: var(--font-size-sm);
   font-weight: 400;
@@ -302,6 +302,12 @@
   border-radius: 100%;
 }
 
+.globalNavigation__suiteLogo:hover .globalNavigation__icon--suiteBackground  {
+  svg {
+    fill: var(--mp-brand-primary-7);
+  }
+}
+
 .globalNavigation__icon.globalNavigation__icon--suiteLogo svg {
   width: 36px;
   height: 36px;
@@ -310,9 +316,7 @@
 
 .globalNavigation__divider {
   border-bottom: 1px solid var(--color-border-secondary);
-  margin-right: var(--margin-sm);
-  margin-left: var(--margin-sm);
-  margin-bottom: var(--margin-md);
+  margin: var(--margin-md) var(--margin-sm);
 }
 
 .globalNavigation__mpHome {