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

feat(PBI-49): add BEM sub-element data-debug-id to components/products/*

Browse source
This commit is contained in:
Scrum4Me Agent 2026-05-09 22:21:36 +02:00
parent 29e05d831e
commit d34793d7a9
4 changed files with 8 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

3
components/products/auto-pr-toggle.tsx
View file

@ -35,6 +35,7 @@ export function AutoPrToggle({ productId, initialValue }: AutoPrToggleProps) {
aria-checked={enabled}
onClick={handleToggle}
disabled={isPending}
data-debug-id="auto-pr-toggle__switch"
className={cn(
'relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent',
'transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
@ -50,7 +51,7 @@ export function AutoPrToggle({ productId, initialValue }: AutoPrToggleProps) {
)}
/>
</button>
<span className="text-sm text-foreground">Automatisch PR aanmaken na succesvolle agent-job</span>
<span className="text-sm text-foreground" data-debug-id="auto-pr-toggle__label">Automatisch PR aanmaken na succesvolle agent-job</span>
</div>
)
}

2
components/products/pr-strategy-select.tsx
View file

@ -49,7 +49,7 @@ export function PrStrategySelect({ productId, initialValue }: PrStrategySelectPr
return (
<div className="flex flex-col gap-2" {...debugProps('pr-strategy-select', 'PrStrategySelect', 'components/products/pr-strategy-select.tsx')}>
<Select value={value} onValueChange={handleChange} disabled={isPending}>
<SelectTrigger className="w-full max-w-xl">
<SelectTrigger className="w-full max-w-xl" data-debug-id="pr-strategy-select__trigger">
{STRATEGY_LABELS[value]}
</SelectTrigger>
<SelectContent>

4
components/products/product-form.tsx
View file

@ -83,6 +83,7 @@ export function ProductForm({ action, submitLabel, defaultValues }: ProductFormP
defaultValue={defaultValues?.name}
placeholder="bijv. DevPlanner"
className={fieldError('name') ? 'border-error' : ''}
data-debug-id="product-form__name"
/>
{fieldError('name') && (
<p className="text-xs text-error">{fieldError('name')}</p>
@ -118,6 +119,7 @@ export function ProductForm({ action, submitLabel, defaultValues }: ProductFormP
defaultValue={defaultValues?.repo_url ?? ''}
placeholder="https://github.com/..."
className={fieldError('repo_url') ? 'border-error' : ''}
data-debug-id="product-form__repo"
/>
{fieldError('repo_url') && (
<p className="text-xs text-error">{fieldError('repo_url')}</p>
@ -148,7 +150,7 @@ export function ProductForm({ action, submitLabel, defaultValues }: ProductFormP
</div>
)}
<div className="flex gap-3 pt-1">
<div className="flex gap-3 pt-1" data-debug-id="product-form__submit">
<SubmitButton label={submitLabel} />
</div>
</form>

4
components/products/team-manager.tsx
View file

@ -34,7 +34,7 @@ export function TeamManager({ productId, members }: TeamManagerProps) {
{members.length === 0 ? (
<p className="text-sm text-muted-foreground">Nog geen teamleden toegevoegd.</p>
) : (
<ul className="space-y-2">
<ul className="space-y-2" data-debug-id="team-manager__members">
{members.map(m => (
<li key={m.id} className="flex items-center justify-between gap-3 rounded-lg bg-surface-container px-3 py-2">
<span className="text-sm font-medium text-foreground">{m.username}</span>
@ -52,7 +52,7 @@ export function TeamManager({ productId, members }: TeamManagerProps) {
</ul>
)}
<form action={formAction} className="flex gap-2">
<form action={formAction} className="flex gap-2" data-debug-id="team-manager__invite">
<input type="hidden" name="productId" value={productId} />
<Input
name="username"