Job Listing

# Brok UI: Job Listing (`job-listing`)

An expandable job-posting card: company logo, title, location, salary and badges collapsed; reveals a description and an Apply action with a smooth height/opacity transition (no x-collapse). Keyboard- and screen-reader-friendly with aria-expanded/aria-controls; RTL-aware and reduced-motion safe.

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

## Install

```bash
php artisan ui:add job-listing
```

## Usage

```blade
<div class="flex min-h-40 w-full items-center justify-center rounded-lg border border-border bg-card p-8">
    <x-ui.job-listing class="w-full max-w-md" />
</div>
```

## Props

- `title` (string, default `Senior Software Engineer`)
- `company` (string, default `Acme Inc.`)
- `logo` (mixed|null, default `null`)
- `location` (string, default `Amsterdam, NL`)
- `salary` (string, default `€70k – €90k`)
- `remote` (bool, default `true`)
- `type` (string, default `Full-time`)
- `tags` (array, default `['React', 'TypeScript', 'GraphQL']`)
- `description` (string, default `We're looking for an experienced engineer to help shape our product. You'll own features end-to-end, collaborate across teams, and mentor others while shipping with care.`)
- `applyHref` (string, default `#`)

## Use when

- Use when self-contained content objects benefit from a recognizable card-like presentation with local actions or metadata.
- Listing open roles where the description should stay folded until asked for.
- Building a careers page with an Apply action per role.

## Avoid when

- Do not use card widgets where a simpler list, table, or plain text block would make comparison faster.
- Showing a single role in full; a card with the description open is simpler.
- Folding arbitrary content; collapsible is the general primitive.

## Anti-patterns

- Using cards for dense cross-item comparison

## Rules

- Use the `<brok:job-listing>` tag (or `<x-ui.job-listing>`) 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/job-listing
- Registry JSON (files, props, contract): https://brokui.dev/r/open/job-listing.json

@props([
    'title' => 'Senior Software Engineer',
    'company' => 'Acme Inc.',
    'logo' => null,
    'location' => 'Amsterdam, NL',
    'salary' => '€70k – €90k',
    'remote' => true,
    'type' => 'Full-time',
    'tags' => ['React', 'TypeScript', 'GraphQL'],
    'description' => "We're looking for an experienced engineer to help shape our product. You'll own features end-to-end, collaborate across teams, and mentor others while shipping with care.",
    'applyHref' => '#',
])

@php
    $tags = is_array($tags) ? $tags : array_filter(array_map('trim', explode(',', (string) $tags)));
    $regionId = 'job-listing-details-'.\Illuminate\Support\Str::random(8);
@endphp

<div
    x-data="uiJobListing()"
    data-slot="job-listing"
    {{ $attributes->merge(['class' => 'rounded-lg border border-border bg-card p-6 text-card-foreground shadow-sm']) }}
>
    <div class="flex items-start gap-4">
        @if ($logo)
            <x-ui.avatar :src="$logo" :alt="$company" size="lg" shape="rounded" />
        @else
            <span
                data-slot="job-listing-logo"
                class="flex size-12 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground"
                aria-hidden="true"
            >
                <svg class="size-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
                    <rect x="3" y="7" width="18" height="13" rx="2" />
                    <path d="M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M3 12h18" />
                </svg>
            </span>
        @endif

        <div class="min-w-0 flex-1">
            <h3 class="truncate font-semibold leading-tight">{{ $title }}</h3>

            <div class="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-muted-foreground">
                <span class="inline-flex items-center gap-2 truncate">
                    <svg class="size-4 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <path d="M3 21h18M5 21V7l8-4v18M19 21V11l-6-4" />
                        <path d="M9 9h.01M9 13h.01M9 17h.01" />
                    </svg>
                    <span class="truncate">{{ $company }}</span>
                </span>

                @if ($location)
                    <span class="inline-flex items-center gap-2 truncate">
                        <svg class="size-4 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                            <path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" />
                            <circle cx="12" cy="10" r="3" />
                        </svg>
                        <span class="truncate">{{ $location }}</span>
                    </span>
                @endif
            </div>
        </div>
    </div>

    <div class="mt-4 flex flex-wrap items-center gap-2">
        @if ($salary)
            <span class="inline-flex items-center gap-2 text-sm font-medium text-foreground">
                <svg class="size-4 shrink-0 text-muted-foreground" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                    <circle cx="12" cy="12" r="9" />
                    <path d="M14.5 9.5a2.5 2.5 0 0 0-2.5-1.5c-1.4 0-2.5.8-2.5 2s1.1 2 2.5 2 2.5.8 2.5 2-1.1 2-2.5 2a2.5 2.5 0 0 1-2.5-1.5M12 6v1.5M12 16.5V18" />
                </svg>
                {{ $salary }}
            </span>
        @endif

        @if ($remote)
            <x-ui.badge>{{ __('Remote') }}</x-ui.badge>
        @endif

        @if ($type)
            <x-ui.badge variant="outline">{{ __($type) }}</x-ui.badge>
        @endif
    </div>

    @if (count($tags))
        <div class="mt-3 flex flex-wrap gap-2">
            @foreach ($tags as $tag)
                <x-ui.badge variant="secondary">{{ $tag }}</x-ui.badge>
            @endforeach
        </div>
    @endif

    @if (! $slot->isEmpty())
        <div data-slot="job-listing-custom" class="mt-4">
            {{ $slot }}
        </div>
    @endif

    {{-- Expandable region: grid-rows 0fr→1fr animates height without @alpinejs/collapse. --}}
    <div
        id="{{ $regionId }}"
        data-slot="job-listing-details"
        role="region"
        {{-- inert (not just aria-hidden) so the collapsed panel's Apply link
             leaves the tab order too (a11y: aria-hidden-focus). --}}
        x-bind:inert="! expanded"
        class="grid transition-[grid-template-rows,opacity] duration-300 ease-out motion-reduce:transition-none"
        :class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
    >
        <div class="overflow-hidden">
            @isset($details)
                {{ $details }}
            @else
                <p class="mt-4 text-sm leading-relaxed text-muted-foreground">{{ $description }}</p>

                <div class="mt-4">
                    <x-ui.button :href="$applyHref" size="sm" with-arrow>{{ __('Apply') }}</x-ui.button>
                </div>
            @endisset
        </div>
    </div>

    <div data-slot="job-listing-actions" class="mt-4 border-t border-border pt-3">
        @isset($actions)
            {{ $actions }}
        @else
        <button
            type="button"
            data-slot="job-listing-toggle"
            @click="toggle()"
            :aria-expanded="expanded.toString()"
            aria-controls="{{ $regionId }}"
            class="inline-flex items-center gap-2 rounded-md text-sm font-medium text-foreground transition-colors hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-card"
        >
            <span x-text="expanded ? @js(__('Show less')) : @js(__('Show more'))">{{ __('Show more') }}</span>
            <svg
                class="size-4 transition-transform duration-300 motion-reduce:transition-none"
                :class="expanded && 'rotate-180'"
                viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"
            >
                <path d="m6 9 6 6 6-6" />
            </svg>
        </button>
        @endisset
    </div>
</div>

/**
 * Job Listing behavior — an expandable job-posting card.
 *
 * Holds a single boolean `expanded`. The toggle button flips it; the description +
 * Apply region is shown/hidden with a CSS-only height/opacity transition (a
 * `grid-template-rows: 0fr → 1fr` trick in the Blade) rather than @alpinejs/collapse,
 * which the docs app does not ship. This component adds no global listeners, timers,
 * observers, or RAF loops, so `destroy()` has nothing to tear down — it is kept for
 * symmetry and as a safe hook if you extend the component later.
 *
 * Self-registers on `alpine:init` so import order does not matter — import this file
 * once from your bundle (e.g. resources/js/ui/index.js).
 */
document.addEventListener('alpine:init', () => {
    window.Alpine.data('uiJobListing', (config = {}) => ({
        expanded: config.expanded ?? false,

        init() {
            // No global listeners are registered; nothing to set up.
        },

        destroy() {
            // No global listeners/timers were added, so there is nothing to remove.
            // Kept intentionally so future additions have a teardown hook.
        },

        toggle() {
            this.expanded = !this.expanded;
        },
    }));
});