janpeter/Scrum4Me
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(PBI-49): add BEM sub-element data-debug-id to StatusBar, NavBar, PanelNavBar

Browse source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Scrum4Me Agent 2026-05-09 21:35:48 +02:00
parent 7ceefd4409
commit e60de10777
3 changed files with 9 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

7
components/shared/nav-bar.tsx
View file

@ -118,7 +118,7 @@ export function NavBar({
>
{/* Links: logo + nav */}
<div className="flex items-center gap-4 flex-1">
<Link href="/" className="flex items-center gap-2 font-medium text-foreground">
<Link href="/" data-debug-id="nav-bar__app-icon" className="flex items-center gap-2 font-medium text-foreground">
<AppIcon size={24} />
<span className="text-primary font-semibold">Scrum4Me</span>
{isDemo && (
@ -157,6 +157,7 @@ export function NavBar({
<DropdownMenu>
<DropdownMenuTrigger
disabled={isPending}
data-debug-id="nav-bar__product-switcher"
className="flex items-center gap-1 text-sm font-medium text-foreground hover:text-primary transition-colors px-2 rounded-md hover:bg-surface-container focus:outline-none"
>
<span className="truncate max-w-[180px]">
@ -195,7 +196,9 @@ export function NavBar({
<div className="flex items-center gap-2 flex-1 justify-end">
<SoloNavStatusIndicators hasActiveProduct={!!activeProduct} minQuotaPct={minQuotaPct} />
<NotificationsBell currentUserId={userId} isDemo={isDemo} />
<UserMenu userId={userId} username={username} email={email} roles={roles} />
<span data-debug-id="nav-bar__user-menu">
<UserMenu userId={userId} username={username} email={email} roles={roles} />
</span>
</div>
</header>
)

4
components/shared/panel-nav-bar.tsx
View file

@ -13,8 +13,8 @@ export function PanelNavBar({ title, actions, className }: PanelNavBarProps) {
{...debugProps('panel-nav-bar')}
className={cn('flex items-center justify-between px-4 py-2 border-b border-border bg-surface-container-low shrink-0', className)}
>
<span className="text-sm font-medium text-foreground">{title}</span>
{actions && <div className="flex items-center gap-2">{actions}</div>}
<span data-debug-id="panel-nav-bar__title" className="text-sm font-medium text-foreground">{title}</span>
{actions && <div data-debug-id="panel-nav-bar__actions" className="flex items-center gap-2">{actions}</div>}
</div>
)
}

4
components/shared/status-bar.tsx
View file

@ -20,8 +20,8 @@ export function StatusBar() {
className="shrink-0 border-t border-border bg-surface-container-low h-14 px-4 flex items-center justify-between text-sm text-muted-foreground select-none"
{...debugProps('status-bar')}
>
<span>© {new Date().getFullYear()} Scrum4Me</span>
<span>v{version} · gebouwd op {buildDate}{isDev && <DebugToggle />}</span>
<span data-debug-id="status-bar__copyright">© {new Date().getFullYear()} Scrum4Me</span>
<span data-debug-id="status-bar__build-info">v{version} · gebouwd op {buildDate}{isDev && <DebugToggle />}</span>
</footer>
)
}