Record Section

# Brok UI: Record Section (`admin-record-section`)

One subject on a record page or quick-view sheet — a small caps title, one sentence saying what the section decides, an optional aside or 'view details' link, and the content in a card.

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

## Install

```bash
php artisan ui:add admin-record-section
```

## Usage

```blade
<div class="w-full">
    <x-ui.admin.record-section />
</div>
```

## Props

- `title` (string, default `Shipping`) — Small caps section title.
- `hint` (string|false|null, default `null`) — One sentence on what the section decides; `null` renders a sample, `false` renders none.
- `id` (string|null, default `null`) — Deep-link and blocker target.
- `moreLabel` (string|null, default `null`) — Label of the aside link.
- `moreHref` (string|null, default `null`) — Renders a 'view details' link in the title row.

## Use when

- Use to structure hierarchy, spacing, and responsiveness so content is easier to scan and navigate.
- Every section of a record page and every subject block on a quick-view sheet, so the rhythm is one object.
- A form groups its fields by decision (what kind, who, when).

## Avoid when

- Do not let layout primitives substitute for semantics, headings, or interaction rules users still need.
- A marketing section — use `section` and `section-heading`.
- A collapsible group — use `accordion` or `collapsible`.

## Anti-patterns

- Using visual layout as a substitute for semantic structure

## Rules

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

{{--
    Record Section — one subject on a record page or a quick-view sheet: a
    small caps title, one sentence saying what the section decides, an
    optional aside on the title row, and the content.

    It exists so every section in an admin is the same object and the rhythm
    cannot drift. The Noord-C admin carried thirteen module copies of this
    file under the same name plus ten "sheet-section" copies in its quick
    views; the only difference between them was whether the title row also
    offered a way into the tab that owns the subject. That is the `aside`
    slot (or, for the common case, `moreLabel` + `moreHref`).

    `id` makes a section a deep-link target and gives an in-page nav (or a
    save-blocker) something to point at.
--}}
@props([
    'title' => 'Shipping',
    'hint' => null,
    'id' => null,
    'moreLabel' => null,
    'moreHref' => null,
])

@php
    // `null` (absent) renders the sample sentence so the docs preview reads as
    // a real section; pass `:hint="false"` for a section with no hint at all.
    $hint ??= __('Where this order ships and which carrier service it was booked with.');
@endphp

<section
    @if ($id !== null) id="{{ $id }}" @endif
    data-slot="record-section"
    data-surface="admin"
    {{ $attributes->merge(['class' => 'min-w-0']) }}
>
    <x-ui.card class="p-6">
        <div class="flex min-w-0 flex-wrap items-baseline justify-between gap-x-4 gap-y-2">
            <h2 data-slot="record-section-title" class="text-xs font-semibold tracking-wide uppercase">{{ $title }}</h2>

            @isset($aside)
                <div data-slot="record-section-aside" class="min-w-0 text-xs">{{ $aside }}</div>
            @elseif ($moreHref !== null)
                <div data-slot="record-section-aside" class="min-w-0 text-xs">
                    <x-ui.button variant="link" size="sm" :href="$moreHref" class="text-xs">
                        {{ $moreLabel ?? __('View details') }}
                    </x-ui.button>
                </div>
            @endisset
        </div>

        @if ($hint)
            <p data-slot="record-section-hint" class="mt-2 max-w-prose text-xs leading-4 text-pretty text-muted-foreground">{{ $hint }}</p>
        @endif

        <div data-slot="record-section-body" class="mt-4 min-w-0">
            @if (trim($slot) !== '')
                {{ $slot }}
            @else
                <x-ui.fact-list :facts="[
                    ['label' => __('Address'), 'value' => 'Keizersgracht 12, 1015 CN Amsterdam'],
                    ['label' => __('Carrier'), 'value' => 'PostNL — Standard'],
                    ['label' => __('Tracking'), 'value' => '3SABCD1234567', 'mono' => true],
                ]" />
            @endif
        </div>
    </x-ui.card>
</section>