@col/brand-logo

Versie: 1.1.0 Toegevoegd: 2026-08-03

Herkomst

Generalisatie van supplier-onboarding-vercel/src/components/forms/form-logo.tsx, dat al drie behandelingen kende (rond, monochroom, kleur) maar de labelconfiguratie van de app zelf importeerde — niet herbruikbaar buiten die app. De loginpagina van de portal deed het logo bovendien nóg een keer met een eigen <img> en een afwijkende hoogte (h-12 versus h-28 elders).

Die loginpagina legde meteen een gat bloot: alle drie de oorspronkelijke varianten gaan uit van een donkere foto-achtergrond, en op de witte inlogkaart werkt er geen van. mono zou wit op wit opleveren, colour een witte schijf op een witte kaart. Vandaar plain in v1.1.0.

Waarvoor

Toont een merklogo in een van drie visuele behandelingen: rond geclipt, wit gemaakt voor een donkere ondergrond, of in eigen kleuren op een witte schijf. Gebruik het overal waar een merklogo in de UI verschijnt (headers, auth-schermen, formulieren) zodat de behandeling per merk consistent is zonder dat de aanroepende code weet welk merk welke behandeling nodig heeft.

Gebruik het niet voor favicons of e-maillogo's — favicons hebben hun eigen mechanisme (assets/icons/) en e-mails vereisen CID-inline attachments, geen <img src>.

Wat je app moet leveren

`<BrandLogo>`

Prop	Type	Betekenis
`src`	`string`	Pad of URL van het logobestand. Verplicht.
`alt`	`string`	Alt-tekst. Verplicht.
`variant`	`'round' \| 'mono' \| 'colour' \| 'plain'`	Zie tabel hieronder. Verplicht.
`size`	`string?`	Tailwind height-class. Default `'h-24'`.

Variant	Effect	Gebruik voor
`round`	`rounded-full` clip	logo's die al een cirkel zijn (MPO)
`mono`	`brightness-0 invert` — geforceerd wit	eenkleurige logo's op een donkere achtergrond (COLORIGINZ op de auth-shell)
`colour`	logo op een witte schijf (`h-40 w-40`, `rounded-full`, `shadow-lg`)	meerkleurige logo's die hun eigen kleuren moeten behouden (FFS, PFC)
`plain`	geen bewerking	een lichte ondergrond, zoals een kaart (de loginpagina)

De consumer kiest de variant per merk; het component zelf bevat geen merk-naar-variant-mapping.

Bestanden

Bestand	Landt in	Soort
`brand-logo.tsx`	`components/brand/`	beheerd

Geen upstream shadcn-afhankelijkheden, geen cssVars.

Gebruikt door

App	Sinds versie	Opmerkingen
`supplier-onboarding-vercel` (Onboarding Portal)	1.0.0	Consumer #1, sinds 3 aug 2026. Vervangt `components/forms/form-logo.tsx`. De variant komt uit `getLogoVariant()` in `label-config.ts`.
`floriday-app` (Floriday middleware)	1.1.0	Consumer #2, sinds 3 aug 2026. Eén merk, dus `variant="plain"` hardgecodeerd: het Coloriginz-woordmerk is zwart en staat op een witte kaart. Eerste consumer zonder `label-config` — het component vraagt daar niet om, de variant is gewoon een prop. `size="h-9"`, want de default `h-24` maakt van een 4:1 woordmerk een balk over de hele kaartbreedte.

Bewuste keuzes

Nooit de invert-filter op een meerkleurig logo. mono gebruikt brightness-0 invert, wat elke vorm herleidt tot één wit silhouet. Op een JPEG zonder transparantie (zoals PFC.jpg) wordt dat een wit blok in plaats van een logo. Vandaar de aparte colour-variant met een witte schijf eronder in plaats van een filter — dat werkt ook zonder transparantie.
colour gebruikt een vaste schijfmaat (h-40 w-40) los van de size-prop. De schijf moet ruim genoeg zijn voor zowel een vierkant als een breed logo zonder dat de aanroeper dat per geval hoeft te tunen; size stuurt in die variant alleen de img binnen de schijf (max-h-24 max-w-28), niet de schijf zelf.

Bekende beperkingen

Geen ingebouwde fallback als src niet laadt (geen onError-handler); dat is aan de consumer.
colour-variant heeft een vaste, niet-parametriseerbare schijfgrootte — een app die een andere schijfmaat nodig heeft, moet het component lokaal aanpassen of wrappen.