Logo Chip

# Brok UI: Logo Chip (`logo-chip`)

A small chip that names a source, company or platform: a leading brand icon, favicon or monogram beside a truncating name, static or as a link, in sm and md.

Brok UI is a Laravel Blade component registry. Installed components are plain Blade files the app owns.

## Install

```bash
php artisan ui:add logo-chip
```

## Usage

```blade
<div class="flex flex-wrap items-center gap-2">
    <x-ui.logo-chip name="YouTube" platform="youtube" />
    <x-ui.logo-chip name="Instagram" platform="instagram" tone="brand" />
    <x-ui.logo-chip name="Brok UI" src="/favicon-96x96.png" />
    <x-ui.logo-chip name="Northwind Traders" />
</div>
```

## Props

- `name` (string, default ``) — Visible name of the source. It truncates with an ellipsis and repeats in a title attribute. Empty falls back to the default slot.
- `platform` (x|youtube|instagram|tiktok|linkedin|pinterest|vimeo|null, default `null`) — Leading brand-icon for a known platform (twitter is an alias of x). An unknown platform falls back to src or the monogram.
- `src` (string|null, default `null`) — Image or favicon URL for the mark when no platform is set. A failed load shows the name's monogram, without JavaScript.
- `href` (string|null, default `null`) — Renders the chip as a link with hover and focus ring. Extra attributes (target, rel) pass through to the root.
- `size` (md|sm, default `md`) — sm is 24px high with a 16px mark and text-xs; md is 32px high with a 20px mark and text-sm.
- `tone` (current|brand, default `current`) — Forwarded to brand-icon: currentColor or the platform colour.
- `kind` (company|person, default `company`) — Shape of the image or monogram mark: company is a rounded square, person a circle.

## Use when

- Use to summarize, sequence, or present data so users can scan it quickly.
- Showing where an item comes from (a platform, a publisher, a company) as a compact mark and name in a row, card or list.
- Linking to that source or to a filter for it while keeping the mark and name together.

## Avoid when

- Do not add display-only ornament when the user needs actionable structure or exact comparison instead.
- A status, count or category without an identity mark; use badge.
- Only the mark, without a name; use avatar or brand-icon.
- A person with a secondary line or a role; use user-identity.

## Anti-patterns

- Adding display ornament without informational value

## Rules

- Use the `<brok:logo-chip>` tag (or `<x-ui.logo-chip>`) in Blade; do not rewrite the component.
- Prefer the documented props and variants over utility-class overrides; when a utility must win, use the `!` important modifier.
- Use semantic design tokens (`bg-primary`, `text-muted-foreground`), never raw colour utilities.
- Keep the `data-slot` attributes; they are the styling and test hooks.

## Links

- Docs: https://brokui.dev/docs/components/logo-chip
- Registry JSON (files, props, contract): https://brokui.dev/r/open/logo-chip.json

@props([
    'name' => '',
    'platform' => null,
    'src' => null,
    'href' => null,
    'size' => 'md',
    'tone' => 'current',
    'kind' => 'company',
])

@php
    $styles = require base_path(config('ui.component_path', 'resources/views/components/ui').'/_styles.php');
    $recipe = $styles['logo-chip'];
    $size = isset($recipe['sizes'][$size]) ? $size : 'md';
    $sizing = $recipe['sizes'][$size];

    // Keep in step with the marks brand-icon draws; an unknown platform falls
    // back to the image or the monogram.
    $platforms = ['x', 'twitter', 'youtube', 'instagram', 'tiktok', 'linkedin', 'pinterest', 'vimeo'];
    $platformKey = mb_strtolower(trim((string) $platform));
    $hasPlatform = in_array($platformKey, $platforms, true);

    $name = trim((string) $name);
    $tag = filled($href) ? 'a' : 'span';
    $classes = trim($recipe['base'].' '.$sizing['root'].($tag === 'a' ? ' '.$recipe['link'] : ''));
@endphp

<{{ $tag }}
    data-slot="logo-chip"
    data-size="{{ $size }}"
    @if ($hasPlatform) data-platform="{{ $platformKey }}" @endif
    @if ($tag === 'a') href="{{ $href }}" @endif
    {{ $attributes->merge(['class' => $classes]) }}
>
    @if ($hasPlatform)
        <x-ui.brand-icon :name="$platformKey" :size="$sizing['icon']" :tone="$tone" />
    @elseif (filled($src) || $name !== '')
        <x-ui.avatar
            :src="$src"
            :name="$name !== '' ? $name : null"
            :kind="$kind === 'person' ? 'person' : 'company'"
            size="xs"
            decorative
            class="{{ $sizing['avatar'] }}"
        />
    @endif
    <span data-slot="logo-chip-label" class="{{ $recipe['label'] }}" @if ($name !== '') title="{{ $name }}" @endif>{{ $name !== '' ? $name : $slot }}</span>
</{{ $tag }}>