FEN-168 Make logo sx props customizable (#233)

* FEN-168 Make Logo customizable

* FEN-168 Move PartialLogoProps

Author: tsl-ps2

packages/components/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @baseapp-frontend/components
 
+## 1.0.25
+
+### Patch Changes
+
+- Forward LogoProps to make them customizable
+
 ## 1.0.24
 
 ### Patch Changes

packages/components/modules/navigations/web/Header/index.tsx

@@ -17,6 +17,7 @@ const Header: FC<HeaderProps> = ({
   children,
   onOpenNav,
   LogoIcon,
+  LogoProps,
   AccountMenu = DefaultAccountMenu,
   AccountMenuProps,
   ToolbarProps,
@@ -37,8 +38,10 @@ const Header: FC<HeaderProps> = ({
       >
         {LogoIcon && (isNavHorizontal || isNavCentered) && (
           <Logo
+            {...LogoProps}
             sx={{
               display: { xs: 'none', lg: 'flex' },
+              ...LogoProps?.sx,
             }}
           >
             <LogoIcon />

packages/components/modules/navigations/web/Header/types.ts

@@ -1,5 +1,6 @@
 import { FC, PropsWithChildren } from 'react'
 
+import { PartialLogoProps } from '@baseapp-frontend/design-system/components/web/logos'
 import { ThemeLayout, UISettings } from '@baseapp-frontend/design-system/styles/web'
 
 import { AppBarProps, ToolbarProps as MuiToolbarProps } from '@mui/material'
@@ -14,6 +15,7 @@ export interface HeaderProps extends PropsWithChildren {
   settings: UISettings
   onOpenNav?: VoidFunction
   LogoIcon?: React.FC
+  LogoProps?: PartialLogoProps
   AccountMenu?: FC<AccountMenuProps>
   AccountMenuProps?: Partial<AccountMenuProps>
   ToolbarProps?: MuiToolbarProps

packages/components/modules/navigations/web/NavMini/index.tsx

@@ -20,6 +20,7 @@ const NavMini: FC<NavMiniProps> = ({
   settings,
   setSettings,
   LogoIcon,
+  LogoProps,
   openNav,
   onCloseNav,
   hideToggleButton = false,
@@ -59,7 +60,7 @@ const NavMini: FC<NavMiniProps> = ({
         }}
       >
         {LogoIcon && (
-          <Logo sx={{ mx: 'auto', my: 2 }}>
+          <Logo {...LogoProps} sx={{ mx: 'auto', my: 2, ...LogoProps?.sx }}>
             <LogoIcon />
           </Logo>
         )}

packages/components/modules/navigations/web/NavMini/types.ts

@@ -1,3 +1,4 @@
+import { PartialLogoProps } from '@baseapp-frontend/design-system/components/web/logos'
 import { UISettings } from '@baseapp-frontend/design-system/styles/web'
 
 import { NavigationData } from '../types'
@@ -9,5 +10,6 @@ export interface NavMiniProps {
   settings: UISettings
   setSettings: (newSettings: Partial<UISettings>) => void
   LogoIcon?: React.FC
+  LogoProps?: PartialLogoProps
   hideToggleButton?: boolean
 }

packages/components/modules/navigations/web/NavVertical/index.tsx

@@ -20,6 +20,7 @@ const NavVertical: FC<NavVerticalProps> = ({
   setSettings,
   navData,
   LogoIcon,
+  LogoProps,
   openNav,
   onCloseNav,
   hideToggleButton = false,
@@ -58,7 +59,7 @@ const NavVertical: FC<NavVerticalProps> = ({
           }}
         >
           {LogoIcon && (
-            <Logo sx={{ mt: 3, ml: 4, mb: 1 }}>
+            <Logo {...LogoProps} sx={{ mt: 3, ml: 4, mb: 1, ...LogoProps?.sx }}>
               <LogoIcon />
             </Logo>
           )}

packages/components/modules/navigations/web/NavVertical/types.ts

@@ -1,3 +1,4 @@
+import { PartialLogoProps } from '@baseapp-frontend/design-system/components/web/logos'
 import { UISettings } from '@baseapp-frontend/design-system/styles/web'
 
 import { NavigationData } from '../types'
@@ -7,6 +8,7 @@ export interface NavVerticalProps {
   setSettings: (newSettings: Partial<UISettings>) => void
   navData: NavigationData
   LogoIcon?: React.FC
+  LogoProps?: PartialLogoProps
   openNav: boolean
   onCloseNav: VoidFunction
   hideToggleButton?: boolean

packages/components/modules/navigations/web/NavigationLayout/index.tsx

@@ -19,6 +19,7 @@ const NavigationLayout: FC<NavigationLayoutProps> = ({
   settings,
   setSettings,
   LogoIcon,
+  LogoProps,
   AccountMenu,
   AccountMenuProps,
   ToolbarProps,
@@ -36,6 +37,7 @@ const NavigationLayout: FC<NavigationLayoutProps> = ({
         <Header
           settings={settings}
           LogoIcon={LogoIcon}
+          LogoProps={LogoProps}
           onOpenNav={nav.onTrue}
           AccountMenu={AccountMenu}
           AccountMenuProps={AccountMenuProps}
@@ -54,6 +56,7 @@ const NavigationLayout: FC<NavigationLayoutProps> = ({
         <Header
           settings={settings}
           LogoIcon={LogoIcon}
+          LogoProps={LogoProps}
           onOpenNav={nav.onTrue}
           AccountMenu={AccountMenu}
           AccountMenuProps={AccountMenuProps}
@@ -71,6 +74,7 @@ const NavigationLayout: FC<NavigationLayoutProps> = ({
         <Header
           settings={settings}
           LogoIcon={LogoIcon}
+          LogoProps={LogoProps}
           onOpenNav={nav.onTrue}
           AccountMenu={AccountMenu}
           AccountMenuProps={AccountMenuProps}
@@ -89,6 +93,7 @@ const NavigationLayout: FC<NavigationLayoutProps> = ({
             openNav={nav.value}
             onCloseNav={nav.onFalse}
             LogoIcon={LogoIcon}
+            LogoProps={LogoProps}
             settings={settings}
             setSettings={setSettings}
           />
@@ -103,6 +108,7 @@ const NavigationLayout: FC<NavigationLayoutProps> = ({
       <Header
         settings={settings}
         LogoIcon={LogoIcon}
+        LogoProps={LogoProps}
         onOpenNav={nav.onTrue}
         AccountMenu={AccountMenu}
         AccountMenuProps={AccountMenuProps}
@@ -120,6 +126,7 @@ const NavigationLayout: FC<NavigationLayoutProps> = ({
           settings={settings}
           setSettings={setSettings}
           LogoIcon={LogoIcon}
+          LogoProps={LogoProps}
           openNav={nav.value}
           onCloseNav={nav.onFalse}
         />

packages/components/modules/navigations/web/NavigationLayout/types.ts

@@ -1,5 +1,6 @@
 import { FC, PropsWithChildren } from 'react'
 
+import { PartialLogoProps } from '@baseapp-frontend/design-system/components/web/logos'
 import { UISettings } from '@baseapp-frontend/design-system/styles/web'
 
 import { ToolbarProps as MuiToolbarProps } from '@mui/material'
@@ -12,6 +13,7 @@ export interface NavigationLayoutProps extends PropsWithChildren {
   settings: UISettings
   setSettings: (newSettings: Partial<UISettings>) => void
   LogoIcon?: React.FC
+  LogoProps?: PartialLogoProps
   AccountMenu?: FC<AccountMenuProps>
   AccountMenuProps?: Partial<AccountMenuProps>
   ToolbarProps?: MuiToolbarProps

packages/components/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@baseapp-frontend/components",
   "description": "BaseApp components modules such as comments, notifications, messages, and more.",
-  "version": "1.0.24",
+  "version": "1.0.25",
   "sideEffects": false,
   "scripts": {
     "babel:transpile": "babel modules -d tmp-babel --extensions .ts,.tsx --ignore '**/__tests__/**','**/__storybook__/**'",

packages/design-system/components/web/logos/Logo/types.ts

@@ -4,3 +4,5 @@ export interface LogoProps extends BoxProps {
   children: React.ReactNode
   disabledLink?: boolean
 }
+
+export type PartialLogoProps = Omit<LogoProps, 'ref' | 'children'>