{showSuiteLogo && (
<>
-
+
)}
diff --git a/src/components/navigation/GlobalNavigation/GlobalNavigationItems.d.ts b/src/components/navigation/GlobalNavigation/GlobalNavigationItems.d.ts
index c03041402..fb61e8992 100644
--- a/src/components/navigation/GlobalNavigation/GlobalNavigationItems.d.ts
+++ b/src/components/navigation/GlobalNavigation/GlobalNavigationItems.d.ts
@@ -12,7 +12,7 @@ export interface IBaseGlobalNavigationItem {
}
export interface IGlobalNavigationLogo extends IBaseGlobalNavigationItem {
- onSuiteLogoClick: () => void
+ onSuiteLogoClick?: () => void
type?: 'default' | 'background-solid' | 'custom-size'
icon?: ReactElement | keyof typeof Icons
navSwitcherTourOptions?: INavSwitcherTourOptions
@@ -34,19 +34,19 @@ export interface IGlobalNavigationLink extends IBaseGlobalNavigationItem {
export type IGlobalNavigationItem = IGlobalNavigationMenu | IGlobalNavigationLink
-export type MiniMapLinks = 'oversight' | 'dataPlatform' | 'customer360' | 'predictions' | 'analytics' | 'segmentation'
-export type MiniMapLink = {
- linkId: MiniMapLinks
+export type SuiteLinks = 'oversight' | 'dataPlatform' | 'customer360' | 'predictions' | 'analytics' | 'segmentation'
+export type SuiteLink = {
+ linkId: SuiteLinks
href: string
}
-export interface IMiniMapOptions {
+export interface ISuiteSelectorOptions {
overviewHref: string
- links: MiniMapLink[]
- onLinkClick: (link: MiniMapLink) => void
- onUnauthorizedClick?: (link?: MiniMapLink) => void
- unauthorizedLinks?: MiniMapLinks[]
- activeLink: MiniMapLinks
+ links: SuiteLink[]
+ onLinkClick: (link: SuiteLink) => void
+ onUnauthorizedClick?: (link?: SuiteLink) => void
+ unauthorizedLinks?: SuiteLinks[]
+ activeLink: SuiteLinks
}
export interface INavSwitcherTourOptions extends ITourProps {
diff --git a/src/components/navigation/GlobalNavigation/SuiteLogo.tsx b/src/components/navigation/GlobalNavigation/SuiteLogo.tsx
index 630482357..ac7365664 100644
--- a/src/components/navigation/GlobalNavigation/SuiteLogo.tsx
+++ b/src/components/navigation/GlobalNavigation/SuiteLogo.tsx
@@ -1,13 +1,13 @@
import React, { type ReactNode, useRef, useState } from 'react'
-import { Center, Icon, type ITourProps, Popover, Tour } from 'src/components'
+import { Center, Icon, type ITourProps, Tour } from 'src/components'
import { NavigationIcon } from 'src/components/navigation/GlobalNavigation/NavigationIcon'
-import MiniMap from 'src/components/navigation/MiniMap/MiniMap'
+import { SuiteSelector } from 'src/components/navigation/GlobalNavigation/SuiteSelector/SuiteSelector'
import { type Icons } from 'src/constants/Icons'
import {
type IGlobalNavigationLogo,
- type IMiniMapOptions,
type INavSwitcherTourOptions,
- type MiniMapLink,
+ type ISuiteSelectorOptions,
+ type SuiteLink,
} from 'src/components/navigation/GlobalNavigation/GlobalNavigationItems'
import { type IconColor } from 'src/components/general/Icon/Icon'
@@ -15,7 +15,7 @@ import { type IconColor } from 'src/components/general/Icon/Icon'
type IconColorOptions = 'default' | 'background-solid' | 'custom-size'
interface SuiteLogoProps extends IGlobalNavigationLogo {
- minimapOptions?: IMiniMapOptions
+ suiteSelectorOptions?: ISuiteSelectorOptions
}
function isStringIcon(icon: ReactNode | string): icon is keyof typeof Icons {
@@ -28,69 +28,55 @@ export function SuiteLogo({
type = 'custom-size',
onSuiteLogoClick,
navSwitcherTourOptions,
- minimapOptions,
+ suiteSelectorOptions,
}: SuiteLogoProps) {
const logoRef = useRef(null)
- if (!minimapOptions || navSwitcherTourOptions?.open) {
- return
+ if (!suiteSelectorOptions || navSwitcherTourOptions?.open) {
+ return
}
- return (
-
- )
-
- function SuiteLogoContent() {
+ return
+
+ function SuiteLogoContent({ onLogoClick }: { onLogoClick?: () => void }) {
return (
<>
- {renderNavLogo()}
+
{navSwitcherTourOptions && renderNavTour(navSwitcherTourOptions)}
)
}
- function MinimapWithPopover(props: IMiniMapOptions) {
+ function LogoWithSuiteSelector(props: ISuiteSelectorOptions) {
const [isPopoverOpen, setIsPopoverOpen] = useState(false)
- const handleLinkClick = (link: MiniMapLink) => {
+
+ const handleLinkClick = (link: SuiteLink) => {
setIsPopoverOpen(false)
props.onLinkClick(link)
}
+
const handlePopoverOpenChange = (newPopoverState: boolean) => {
setIsPopoverOpen(newPopoverState)
}
+ const handleLogoClick = () => {
+ setIsPopoverOpen(prevPopoverState => !prevPopoverState)
+ }
+
return (
-
- }
- placement="bottomLeft"
+
-
-
+ onLinkClick={handleLinkClick}
+ suiteSelectorOptions={props}>
+
+
)
}
- function renderNavLogo() {
+ function NavLogo({ onLogoClick }: { onLogoClick?: () => void }) {
const classMap = {
default: '',
'custom-size': 'globalNavigation__icon--suiteLogo',
@@ -111,7 +97,7 @@ export function SuiteLogo({
}
return (
-
+
{label}
diff --git a/src/components/navigation/GlobalNavigation/SuiteSelector/SuiteSelector.tsx b/src/components/navigation/GlobalNavigation/SuiteSelector/SuiteSelector.tsx
new file mode 100644
index 000000000..60ddabb21
--- /dev/null
+++ b/src/components/navigation/GlobalNavigation/SuiteSelector/SuiteSelector.tsx
@@ -0,0 +1,36 @@
+import React, { type ReactNode } from 'react'
+import { type IPopoverProps, Popover } from 'src/components'
+import {
+ type ISuiteSelectorOptions,
+ type SuiteLink,
+} from 'src/components/navigation/GlobalNavigation/GlobalNavigationItems'
+import { SuiteSelectorContent } from 'src/components/navigation/GlobalNavigation/SuiteSelector/SuiteSelectorContent'
+
+interface ISuiteSelectorProps extends IPopoverProps {
+ suiteSelectorOptions: ISuiteSelectorOptions
+ onLinkClick: (link: SuiteLink) => void
+ children: ReactNode
+}
+
+export function SuiteSelector(props: ISuiteSelectorProps) {
+ return (
+
+ }
+ placement="bottomLeft"
+ open={props.open}
+ trigger="click"
+ onOpenChange={props.onOpenChange}
+ arrow={false}>
+ {props.children}
+
+ )
+}
diff --git a/src/components/navigation/GlobalNavigation/SuiteSelector/SuiteSelectorContent.tsx b/src/components/navigation/GlobalNavigation/SuiteSelector/SuiteSelectorContent.tsx
new file mode 100644
index 000000000..bcb5d3ba1
--- /dev/null
+++ b/src/components/navigation/GlobalNavigation/SuiteSelector/SuiteSelectorContent.tsx
@@ -0,0 +1,54 @@
+import './suite-selector.css'
+import React from 'react'
+import { Button, Col, Row } from 'src/components'
+import {
+ type ISuiteSelectorOptions,
+ type SuiteLink,
+} from 'src/components/navigation/GlobalNavigation/GlobalNavigationItems'
+import { SuiteSelectorSuiteLink } from 'src/components/navigation/GlobalNavigation/SuiteSelector/SuiteSelectorSuiteLink'
+
+type ISuiteSelectorContentProps = ISuiteSelectorOptions
+
+export function SuiteSelectorContent(props: ISuiteSelectorContentProps) {
+ const handleLinkClick = (link: SuiteLink): void => {
+ const isLinkUnauthorized = props.unauthorizedLinks?.includes(link.linkId)
+
+ if (link) {
+ if (isLinkUnauthorized) props.onUnauthorizedClick?.(link)
+ else props.onLinkClick(link)
+ }
+ }
+
+ return (
+ <>
+
+
+ {props.links.map(link => (
+
+ {
+ handleLinkClick(link)
+ }}
+ />
+
+ ))}
+
+
+ {renderOverviewButton()}
+
+
+ )
+
+ function renderOverviewButton() {
+ return (
+ <>
+
+
+ )
+ }
+}
diff --git a/src/components/navigation/GlobalNavigation/SuiteSelector/SuiteSelectorSuiteLink.tsx b/src/components/navigation/GlobalNavigation/SuiteSelector/SuiteSelectorSuiteLink.tsx
new file mode 100644
index 000000000..539cb246f
--- /dev/null
+++ b/src/components/navigation/GlobalNavigation/SuiteSelector/SuiteSelectorSuiteLink.tsx
@@ -0,0 +1,64 @@
+import React from 'react'
+import { Center, Flex, Icon } from 'src/components'
+import { type SuiteLink, type SuiteLinks } from 'src/components/navigation/GlobalNavigation/GlobalNavigationItems'
+import { NavigationIcon } from 'src/components/navigation/GlobalNavigation/NavigationIcon'
+import type { IconNames } from 'src/types/icons'
+
+interface ISuiteSelectorSuiteLinkProps {
+ link: SuiteLink
+ onLinkClick: (link: SuiteLink) => void
+ unauthorizedLinks?: SuiteLinks[]
+ activeLink: SuiteLinks
+}
+
+const elementNameMap: Record = {
+ oversight: 'Oversight',
+ dataPlatform: 'Data Platform',
+ customer360: 'Customer 360',
+ predictions: 'Predictions',
+ analytics: 'Analytics',
+ segmentation: 'Segmentation',
+} as const
+
+const elementIconMap: Record = {
+ oversight: 'oversight',
+ dataPlatform: 'dataPlatform',
+ customer360: 'C360',
+ predictions: 'predictions',
+ analytics: 'analytics',
+ segmentation: 'segmentation',
+} as const
+
+export function SuiteSelectorSuiteLink(props: ISuiteSelectorSuiteLinkProps) {
+ const getLinkClass = (link: SuiteLink): 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 (
+ <>
+
+
+
+ {elementNameMap[props.link.linkId]}
+
+
+
+ )
+
+ function renderLogo(name: IconNames) {
+ return (
+
+
+
+ )
+ }
+}
diff --git a/src/components/navigation/GlobalNavigation/SuiteSelector/suite-selector.css b/src/components/navigation/GlobalNavigation/SuiteSelector/suite-selector.css
new file mode 100644
index 000000000..f704bd966
--- /dev/null
+++ b/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%;
+}
diff --git a/src/components/navigation/GlobalNavigation/global-navigation.css b/src/components/navigation/GlobalNavigation/global-navigation.css
index 49a0945fb..5e0ef97de 100644
--- a/src/components/navigation/GlobalNavigation/global-navigation.css
+++ b/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-xxs) 0 var(--margin-xxs);
}
.globalNavigation__mpHome {
@@ -328,4 +332,4 @@
width: 28px;
height: var(--size-lg);
}
-}
\ No newline at end of file
+}
diff --git a/src/components/navigation/MiniMap/MiniMap.tsx b/src/components/navigation/MiniMap/MiniMap.tsx
deleted file mode 100644
index 7759eea12..000000000
--- a/src/components/navigation/MiniMap/MiniMap.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import 'src/styles/_variables.css'
-import './miniMap.css'
-import React from 'react'
-import { Button, ConfigProvider } from 'src/components'
-import { minimap } from './minimap-svg'
-import { Flex } from 'src/components/layout/Flex/Flex'
-import { type ISvgLink, SvgLinker } from 'src/components/navigation/MiniMap/SvgLinker'
-import {
- type IMiniMapOptions,
- type MiniMapLinks,
-} from 'src/components/navigation/GlobalNavigation/GlobalNavigationItems'
-
-type IMiniMapProps = IMiniMapOptions
-
-const Minimap = (props: IMiniMapProps) => {
- const elementIdMap: Record = {
- oversight: 'OversightBtn',
- dataPlatform: 'DataPlatformBtn',
- customer360: 'c360Btn',
- predictions: 'PredictionsBtn',
- analytics: 'AnalyticsBtn',
- segmentation: 'SegmentationBtn',
- } as const
-
- const svgLinks: ISvgLink[] = props.links.map(link => ({
- elementId: elementIdMap[link.linkId],
- href: link.href,
- variant: 'drop-shadow',
- isUnauthorized: props.unauthorizedLinks?.includes(link.linkId),
- isActive: props.activeLink === link.linkId,
- }))
-
- return (
-
-
-
-
- {minimap}
-
-
-
-
-
-
-
- )
- function handleLinkClick(svgLink: ISvgLink): void {
- const miniMapLink = props.links.find(link => link.href === svgLink.href)
-
- if (miniMapLink) {
- if (svgLink.isUnauthorized) props.onUnauthorizedClick?.(miniMapLink)
- else props.onLinkClick(miniMapLink)
- }
- }
-}
-
-export default Minimap
diff --git a/src/components/navigation/MiniMap/SvgLinker.tsx b/src/components/navigation/MiniMap/SvgLinker.tsx
deleted file mode 100644
index 94f2667a2..000000000
--- a/src/components/navigation/MiniMap/SvgLinker.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-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 {
- links: ISvgLink[]
- children: React.ReactNode
- onLinkClick: (link: ISvgLink) => void
-}
-
-export const SvgLinker = (props: ISvgLinkerProps) => {
- 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) {
- props.onLinkClick(link)
- }
- }
-
- return (
-
- {wrapButtonsIntoLinks(props.children)}
-
- )
-
- 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.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 (
-
- {element}
-
- )
- }
-
- const wrappedChildren = wrapButtonsIntoLinks(children)
-
- return React.createElement(element.type, { ...element.props, children: wrappedChildren })
- }
-
- return Children.map(parent, child => (React.isValidElement(child) ? wrapElement(child as ReactElement) : child))
- }
-}
-
-export default SvgLinker
diff --git a/src/components/navigation/MiniMap/miniMap.css b/src/components/navigation/MiniMap/miniMap.css
deleted file mode 100644
index 6f48ac0f6..000000000
--- a/src/components/navigation/MiniMap/miniMap.css
+++ /dev/null
@@ -1,80 +0,0 @@
-.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);
-}
-
-.svg-linker-root__button.svg-linker-root__button--disabled.svg-linker-root__button--regular path {
- fill: var(--color-text-disabled);
-}
-
-.svg-linker-root__button.svg-linker-root__button--disabled.svg-linker-root__button--regular:hover rect:first-child {
- 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);
-}
-
-.svg-linker-root__button.svg-linker-root__button--disabled.svg-linker-root__button--drop-shadow path {
- fill: var(--color-text-disabled);
-}
-
-.svg-linker-root__button.svg-linker-root__button--disabled.svg-linker-root__button--drop-shadow:hover {
- 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);
-}
-
-.svg-linker-root__button.svg-linker-root__button--disabled.svg-linker-root__button--black:hover rect:first-child {
- fill: var(--mp-brand-secondary-6);
-}
-
-/* general - variant: shadow */
-.svg-linker-root__button.svg-linker-root__button--drop-shadow:hover {
- filter: drop-shadow(0 9px 28px rgb(0 0 0 / 5%)) drop-shadow(0 3px 6px rgb(0 0 0 / 12%))
- drop-shadow(0 6px 16px rgb(0 0 0 / 8%));
-}
-
-/* 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);
-}
-
-.svg-linker-root__button.svg-linker-root__button--active.svg-linker-root__button--drop-shadow:hover {
- filter: none;
-}
-
-/* some fixes so the shadow on hover looks good without changing the svg */
-/* stylelint-disable-next-line selector-id-pattern */
-#clip0_5505_13516 {
- display: none;
-}
-
-/* stylelint-disable-next-line selector-id-pattern */
-#Frame\ 481773 > #Frame\ 481772 > rect {
- display: none;
-}
diff --git a/src/components/navigation/MiniMap/minimap-svg.tsx b/src/components/navigation/MiniMap/minimap-svg.tsx
deleted file mode 100644
index 6368e36bf..000000000
--- a/src/components/navigation/MiniMap/minimap-svg.tsx
+++ /dev/null
@@ -1,405 +0,0 @@
-import React from 'react'
-
-export const minimap = (
-
-)
diff --git a/src/types/icons.ts b/src/types/icons.ts
index 2879f17f8..d76e66dfb 100644
--- a/src/types/icons.ts
+++ b/src/types/icons.ts
@@ -100,4 +100,3 @@ export type IconNames =
| 'link'
| 'info'
| 'placeholder'
-