feat: add possibility to add background color to the suite icon logo (#…

…241)

src/components/general/Icon/Icon.tsx

@@ -2,7 +2,7 @@ import { Icons } from 'src/constants/Icons'
 import './icon.css'
 
 type IconSize = 'xxxxl' | 'xxxl' | 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs'
-type IconColor =
+export type IconColor =
   | 'default'
   | 'primary'
   | 'success'
@@ -32,4 +32,4 @@ export const Icon = (props: IIconProps) => {
 Icon.defaultProps = {
   color: 'default',
   size: 'lg',
-} satisfies Partial<IIconProps>
+} satisfies Partial<IIconProps>

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

@@ -13,7 +13,8 @@ import { useNewExperienceReminder } from 'src/hooks/NewExperienceReminder/useNew
 
 const defaultLogo: IGlobalNavigationLogo = {
   label: 'Aqua',
-  icon: <Icon name="alicorn" />,
+  icon: <Icon name="alicorn" size="xxl" color="brand" />,
+  type: 'custom-size',
   onSuiteLogoClick: () => {
     alert('Going to Aqua Home!')
   },
@@ -165,7 +166,25 @@ export const Primary: Story = {
 
 const mpLogo: IGlobalNavigationLogo = {
   label: 'Data Platform',
-  icon: <Icon name="mpLogo" />,
+  icon: <Icon name="siteMap" />,
+  onSuiteLogoClick: () => {
+    alert('Going to mP Home!')
+  },
+}
+
+const mpLogoWithBackground: IGlobalNavigationLogo = {
+  label: 'Data Platform',
+  icon: 'catalog',
+  type: 'background-solid',
+  onSuiteLogoClick: () => {
+    alert('Going to mP Home!')
+  },
+}
+
+const mpLogoWithoutCustomSizeLogo: IGlobalNavigationLogo = {
+  label: 'Data Platform',
+  icon: 'catalog',
+  type: 'default',
   onSuiteLogoClick: () => {
     alert('Going to mP Home!')
   },
@@ -834,7 +853,8 @@ export const Indicative: Story = {
 
 const cortexLogo: IGlobalNavigationLogo = {
   label: 'Predictions',
-  icon: <Icon name="sparkles" />,
+  icon: 'sparkles',
+  type: 'background-solid',
   onSuiteLogoClick: () => {
     alert('Going to Predictions Home!')
   },
@@ -1063,3 +1083,69 @@ export const UseNewExperienceReminderHook: Story = {
     },
   },
 }
+
+export const MPWithoutLogo: Story = {
+  args: {
+    onSearchClick: () => {
+      alert('Searching!')
+    },
+    logo: {
+      onSuiteLogoClick: () => {},
+      label: '',
+    },
+    tools: mpTools,
+    management: mpManagement,
+    orgs: mpOrgs,
+    minimapOptions: { overviewHref: '/', show: true },
+    onMpHomeClick: () => {
+      alert('going to overview map')
+    },
+    avatarOptions: {
+      // src: "https://static-qa1.qa.corp.mparticle.com/appimg/logo_af_916397d2-9732-8de6-77cc-80e3bba120ca.png",
+      alt: 'avatar',
+    },
+    showSuiteLogo: false,
+  },
+}
+
+export const MPWithBackgroundLogo: Story = {
+  args: {
+    onSearchClick: () => {
+      alert('Searching!')
+    },
+    logo: mpLogoWithBackground,
+    tools: mpTools,
+    management: mpManagement,
+    orgs: mpOrgs,
+    minimapOptions: { overviewHref: '/', show: true },
+    onMpHomeClick: () => {
+      alert('going to overview map')
+    },
+    avatarOptions: {
+      // src: "https://static-qa1.qa.corp.mparticle.com/appimg/logo_af_916397d2-9732-8de6-77cc-80e3bba120ca.png",
+      alt: 'avatar',
+    },
+    showSuiteLogo: true,
+  },
+}
+
+export const MPWithoutCustomSizeLogo: Story = {
+  args: {
+    onSearchClick: () => {
+      alert('Searching!')
+    },
+    logo: mpLogoWithoutCustomSizeLogo,
+    tools: mpTools,
+    management: mpManagement,
+    orgs: mpOrgs,
+    minimapOptions: { overviewHref: '/', show: true },
+    onMpHomeClick: () => {
+      alert('going to overview map')
+    },
+    avatarOptions: {
+      // src: "https://static-qa1.qa.corp.mparticle.com/appimg/logo_af_916397d2-9732-8de6-77cc-80e3bba120ca.png",
+      alt: 'avatar',
+    },
+    showSuiteLogo: true,
+  },
+}

src/components/navigation/GlobalNavigation/GlobalNavigation.tsx

@@ -30,6 +30,7 @@ export interface IGlobalNavigationProps {
   onSuiteLogoClick?: () => void
   onMpHomeClick: () => void
   hideMpHome?: boolean
+  showSuiteLogo?: boolean
   avatarOptions?: IAvatarProps
   navigationButtonItemOptions?: {
     label: string
@@ -50,8 +51,12 @@ export const GlobalNavigation = (props: IGlobalNavigationProps) => {
       <Layout.Sider className="globalNavigation__sider" width={GlobalNavWidth}>
         <Flex vertical justify="space-between" style={{ height: '100%' }}>
           <div>
-            <SuiteLogo {...props.logo} />
-            <div className="globalNavigation__divider" />
+            {props.showSuiteLogo && (
+              <>
+                <SuiteLogo {...props.logo} />
+                <div className="globalNavigation__divider" />
+              </>
+            )}
             <Center vertical>
               {props.onSearchClick && <NavigationSearch onClick={props.onSearchClick} />}
               {props.createItems && <NavigationCreate createItems={props.createItems} />}
@@ -88,3 +93,7 @@ export const GlobalNavigation = (props: IGlobalNavigationProps) => {
 }
 
 GlobalNavigation.useNewExperienceReminder = useNewExperienceReminder
+
+GlobalNavigation.defaultProps = {
+  showSuiteLogo: true,
+}

src/components/navigation/GlobalNavigation/GlobalNavigationItems.d.ts

@@ -1,5 +1,6 @@
-import type { ReactNode, type MouseEvent } from 'react'
+import type { ReactNode, type MouseEvent, ReactElement } from 'react'
 import { type HrefOptions } from 'src/utils/utils'
+import { Icons } from 'src/constants/Icons'
 
 export interface IBaseGlobalNavigationItem {
   type?: 'menu' | 'link'
@@ -11,6 +12,8 @@ export interface IBaseGlobalNavigationItem {
 
 export interface IGlobalNavigationLogo extends IBaseGlobalNavigationItem {
   onSuiteLogoClick: () => void
+  type?: 'default' | 'background-solid' | 'custom-size'
+  icon?: ReactElement | keyof typeof Icons
 }
 
 export interface IGlobalNavigationMenu extends IBaseGlobalNavigationItem {

src/components/navigation/GlobalNavigation/SuiteLogo.tsx

@@ -1,12 +1,39 @@
-import { Center } from 'src/components'
+import React, { ReactElement, ReactNode } from 'react'
+import { Center, Icon } from 'src/components'
 import { NavigationIcon } from 'src/components/navigation/GlobalNavigation/NavigationIcon'
+import { Icons } from 'src/constants/Icons'
 import { type IGlobalNavigationLogo } from 'src/components/navigation/GlobalNavigation/GlobalNavigationItems'
+import { IconColor } from 'src/components/general/Icon/Icon'
+
+// custom-size is the default size to prevent breaking changes.
+function isStringIcon(icon: ReactNode | string): icon is keyof typeof Icons {
+  return typeof icon === 'string'
+}
+
+export function SuiteLogo({ icon, label, type = 'custom-size', onSuiteLogoClick }: IGlobalNavigationLogo) {
+  const classMap = {
+    default: '',
+    'custom-size': 'globalNavigation__icon--suiteLogo',
+    'background-solid': 'globalNavigation__icon--suiteBackground',
+  }
+
+  const iconColorMap: { [key in 'default' | 'background-solid' | 'custom-size']: IconColor } = {
+    default: 'default',
+    'background-solid': 'brand',
+    'custom-size': 'default',
+  }
+
+  const getIcon = () => {
+    if (isStringIcon(icon)) {
+      return <Icon name={icon} color={iconColorMap[type]} size="xxl" />
+    }
+    return icon
+  }
 
-export function SuiteLogo(props: IGlobalNavigationLogo) {
   return (
-    <Center vertical className="globalNavigation__suiteLogo" onClick={props.onSuiteLogoClick}>
-      <NavigationIcon icon={props.icon} label="" hideLabel className="globalNavigation__icon--suiteLogo" />
-      {props.label}
+    <Center vertical className="globalNavigation__suiteLogo" onClick={onSuiteLogoClick}>
+      <NavigationIcon icon={getIcon()} label="" hideLabel className={classMap[type]} />
+      {label}
     </Center>
   )
 }

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

@@ -240,11 +240,6 @@
   padding-bottom: var(--padding-xxs);
 }
 
-.globalNavigation__icon.globalNavigation__icon--suiteLogo svg {
-  width: 36px;
-  height: 36px;
-}
-
 .globalNavigation__menu .globalNavigation__iconLabel {
   margin-top: var(--margin-xxs);
 }
@@ -295,6 +290,19 @@
   cursor: pointer;
 }
 
+.globalNavigation__icon--suiteBackground {
+  background-color: var(--mp-brand-primary-2);
+  padding: 10px;
+  margin-bottom: 8px;
+  border-radius: 100%;
+}
+
+.globalNavigation__icon.globalNavigation__icon--suiteLogo svg {
+  width: 36px;
+  height: 36px;
+
+}
+
 .globalNavigation__divider {
   border-bottom: 1px solid var(--color-border-secondary);
   margin-right: var(--margin-sm);