From 77bef0acf1a8b7c51cc83937b9a575d8b83936ba Mon Sep 17 00:00:00 2001
From: Philipp Schmitt <ps2@tsl.io>
Date: Wed, 12 Mar 2025 10:58:12 +0100
Subject: [PATCH 1/2] FEN-168 Make Logo customizable
---
packages/components/CHANGELOG.md | 6 ++++++
.../components/modules/navigations/web/Header/index.tsx | 3 +++
.../components/modules/navigations/web/Header/types.ts | 4 ++++
.../components/modules/navigations/web/NavMini/index.tsx | 3 ++-
.../components/modules/navigations/web/NavMini/types.ts | 2 ++
.../modules/navigations/web/NavVertical/index.tsx | 3 ++-
.../modules/navigations/web/NavVertical/types.ts | 2 ++
.../modules/navigations/web/NavigationLayout/index.tsx | 7 +++++++
.../modules/navigations/web/NavigationLayout/types.ts | 2 ++
packages/components/package.json | 2 +-
10 files changed, 31 insertions(+), 3 deletions(-)
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 07910437..d59de0a4 100644
--- a/packages/components/CHANGELOG.md
+++ b/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
diff --git a/packages/components/modules/navigations/web/Header/index.tsx b/packages/components/modules/navigations/web/Header/index.tsx
index 12147281..969f2167 100644
--- a/packages/components/modules/navigations/web/Header/index.tsx
+++ b/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 />
diff --git a/packages/components/modules/navigations/web/Header/types.ts b/packages/components/modules/navigations/web/Header/types.ts
index 415f77af..a8b21df3 100644
--- a/packages/components/modules/navigations/web/Header/types.ts
+++ b/packages/components/modules/navigations/web/Header/types.ts
@@ -1,5 +1,6 @@
import { FC, PropsWithChildren } from 'react'
+import { LogoProps } 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'
@@ -10,10 +11,13 @@ export interface CustomAppBarProps extends AppBarProps {
themeLayout: ThemeLayout
}
+export type PartialLogoProps = Omit<LogoProps, 'ref' | 'children'>
+
export interface HeaderProps extends PropsWithChildren {
settings: UISettings
onOpenNav?: VoidFunction
LogoIcon?: React.FC
+ LogoProps?: PartialLogoProps
AccountMenu?: FC<AccountMenuProps>
AccountMenuProps?: Partial<AccountMenuProps>
ToolbarProps?: MuiToolbarProps
diff --git a/packages/components/modules/navigations/web/NavMini/index.tsx b/packages/components/modules/navigations/web/NavMini/index.tsx
index 5da29a4c..5641919c 100644
--- a/packages/components/modules/navigations/web/NavMini/index.tsx
+++ b/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>
)}
diff --git a/packages/components/modules/navigations/web/NavMini/types.ts b/packages/components/modules/navigations/web/NavMini/types.ts
index 2f5e560b..e8833ce8 100644
--- a/packages/components/modules/navigations/web/NavMini/types.ts
+++ b/packages/components/modules/navigations/web/NavMini/types.ts
@@ -1,5 +1,6 @@
import { UISettings } from '@baseapp-frontend/design-system/styles/web'
+import { PartialLogoProps } from '../Header/types'
import { NavigationData } from '../types'
export interface NavMiniProps {
@@ -9,5 +10,6 @@ export interface NavMiniProps {
settings: UISettings
setSettings: (newSettings: Partial<UISettings>) => void
LogoIcon?: React.FC
+ LogoProps?: PartialLogoProps
hideToggleButton?: boolean
}
diff --git a/packages/components/modules/navigations/web/NavVertical/index.tsx b/packages/components/modules/navigations/web/NavVertical/index.tsx
index 122fe403..831fd1fd 100644
--- a/packages/components/modules/navigations/web/NavVertical/index.tsx
+++ b/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>
)}
diff --git a/packages/components/modules/navigations/web/NavVertical/types.ts b/packages/components/modules/navigations/web/NavVertical/types.ts
index 14ae3f41..52452427 100644
--- a/packages/components/modules/navigations/web/NavVertical/types.ts
+++ b/packages/components/modules/navigations/web/NavVertical/types.ts
@@ -1,5 +1,6 @@
import { UISettings } from '@baseapp-frontend/design-system/styles/web'
+import { PartialLogoProps } from '../Header/types'
import { NavigationData } from '../types'
export interface NavVerticalProps {
@@ -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
diff --git a/packages/components/modules/navigations/web/NavigationLayout/index.tsx b/packages/components/modules/navigations/web/NavigationLayout/index.tsx
index 27aeb40c..2db3b56e 100644
--- a/packages/components/modules/navigations/web/NavigationLayout/index.tsx
+++ b/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}
/>
diff --git a/packages/components/modules/navigations/web/NavigationLayout/types.ts b/packages/components/modules/navigations/web/NavigationLayout/types.ts
index a8b014dc..ee103409 100644
--- a/packages/components/modules/navigations/web/NavigationLayout/types.ts
+++ b/packages/components/modules/navigations/web/NavigationLayout/types.ts
@@ -5,6 +5,7 @@ import { UISettings } from '@baseapp-frontend/design-system/styles/web'
import { ToolbarProps as MuiToolbarProps } from '@mui/material'
import { AccountMenuProps } from '../Header/AccountMenu/types'
+import { PartialLogoProps } from '../Header/types'
import { NavigationData } from '../types'
export interface NavigationLayoutProps extends PropsWithChildren {
@@ -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
diff --git a/packages/components/package.json b/packages/components/package.json
index 99cd687f..1b550633 100644
--- a/packages/components/package.json
+++ b/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__/**'",
From cdd9f60232585e5d18d55be44a16cbbeb1cfe0e8 Mon Sep 17 00:00:00 2001
From: Philipp Schmitt <ps2@tsl.io>
Date: Fri, 14 Mar 2025 15:57:38 +0100
Subject: [PATCH 2/2] FEN-168 Move PartialLogoProps
---
packages/components/modules/navigations/web/Header/types.ts | 4 +---
packages/components/modules/navigations/web/NavMini/types.ts | 2 +-
.../components/modules/navigations/web/NavVertical/types.ts | 2 +-
.../modules/navigations/web/NavigationLayout/types.ts | 2 +-
packages/design-system/components/web/logos/Logo/types.ts | 2 ++
5 files changed, 6 insertions(+), 6 deletions(-)
diff --git a/packages/components/modules/navigations/web/Header/types.ts b/packages/components/modules/navigations/web/Header/types.ts
index a8b21df3..f1baea3a 100644
--- a/packages/components/modules/navigations/web/Header/types.ts
+++ b/packages/components/modules/navigations/web/Header/types.ts
@@ -1,6 +1,6 @@
import { FC, PropsWithChildren } from 'react'
-import { LogoProps } from '@baseapp-frontend/design-system/components/web/logos'
+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'
@@ -11,8 +11,6 @@ export interface CustomAppBarProps extends AppBarProps {
themeLayout: ThemeLayout
}
-export type PartialLogoProps = Omit<LogoProps, 'ref' | 'children'>
-
export interface HeaderProps extends PropsWithChildren {
settings: UISettings
onOpenNav?: VoidFunction
diff --git a/packages/components/modules/navigations/web/NavMini/types.ts b/packages/components/modules/navigations/web/NavMini/types.ts
index e8833ce8..6ceb9a59 100644
--- a/packages/components/modules/navigations/web/NavMini/types.ts
+++ b/packages/components/modules/navigations/web/NavMini/types.ts
@@ -1,6 +1,6 @@
+import { PartialLogoProps } from '@baseapp-frontend/design-system/components/web/logos'
import { UISettings } from '@baseapp-frontend/design-system/styles/web'
-import { PartialLogoProps } from '../Header/types'
import { NavigationData } from '../types'
export interface NavMiniProps {
diff --git a/packages/components/modules/navigations/web/NavVertical/types.ts b/packages/components/modules/navigations/web/NavVertical/types.ts
index 52452427..a624f3e2 100644
--- a/packages/components/modules/navigations/web/NavVertical/types.ts
+++ b/packages/components/modules/navigations/web/NavVertical/types.ts
@@ -1,6 +1,6 @@
+import { PartialLogoProps } from '@baseapp-frontend/design-system/components/web/logos'
import { UISettings } from '@baseapp-frontend/design-system/styles/web'
-import { PartialLogoProps } from '../Header/types'
import { NavigationData } from '../types'
export interface NavVerticalProps {
diff --git a/packages/components/modules/navigations/web/NavigationLayout/types.ts b/packages/components/modules/navigations/web/NavigationLayout/types.ts
index ee103409..595a854b 100644
--- a/packages/components/modules/navigations/web/NavigationLayout/types.ts
+++ b/packages/components/modules/navigations/web/NavigationLayout/types.ts
@@ -1,11 +1,11 @@
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'
import { AccountMenuProps } from '../Header/AccountMenu/types'
-import { PartialLogoProps } from '../Header/types'
import { NavigationData } from '../types'
export interface NavigationLayoutProps extends PropsWithChildren {
diff --git a/packages/design-system/components/web/logos/Logo/types.ts b/packages/design-system/components/web/logos/Logo/types.ts
index 353e451d..4ba91f3e 100644
--- a/packages/design-system/components/web/logos/Logo/types.ts
+++ b/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'>