App Download Stack

# Brok UI: App Download Stack (`app-download-stack`)

A marketing download widget: a fanned pile of app icons that opens into a row to pick one, and the standard black App Store and Google Play badges that download the chosen app (per-app store links, sensible fallbacks). Motion-safe, keyboard-accessible.

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

## Install

```bash
php artisan ui:add app-download-stack
```

## Usage

```blade
<x-ui.app-download-stack class="mx-auto w-full max-w-sm" />
```

## Props

- `apps` (array, default `[]`)
- `heading` (string, default `Get the app`)
- `subtext` (string, default `Pick an app, then download it for your platform.`)
- `appStoreUrl` (string, default `#`)
- `playStoreUrl` (string, default `#`)

## Use when

- Use when self-contained content objects benefit from a recognizable card-like presentation with local actions or metadata.
- Offering several apps for download from one marketing widget, with store badges.
- Letting a visitor pick an app before choosing their platform.

## Avoid when

- Do not use card widgets where a simpler list, table, or plain text block would make comparison faster.
- Offering a single app; two store badges are enough. Use blocks/hero-mobile-app for a single-app download hero instead.
- Linking to anything but the App Store and Google Play; the badges are theirs.

## Anti-patterns

- Using cards for dense cross-item comparison

## Rules

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

@props([
    // Apps in the stack. Each item: ['name' => 'Pocket', 'icon' => 'https://… or a
    // single-letter initial', 'tagline' => 'Read later', 'appStore' => 'https://…',
    // 'playStore' => 'https://…']. Store links fall back to the props below.
    'apps' => [],
    'heading' => 'Get the app',
    'subtext' => 'Pick an app, then download it for your platform.',
    // Default store links, used when the chosen app has none of its own.
    'appStoreUrl' => '#',
    'playStoreUrl' => '#',
])

@php
    $apps = ! empty($apps) ? array_values($apps) : [
        ['name' => __('Pocket'), 'icon' => 'https://picsum.photos/seed/pocket/96', 'tagline' => __('Read it later')],
        ['name' => __('Studio'), 'icon' => 'S', 'tagline' => __('Edit on the go')],
        ['name' => __('Beacon'), 'icon' => 'https://picsum.photos/seed/beacon/96', 'tagline' => __('Find your team')],
    ];

    $config = [
        'count' => count($apps),
        'apps' => array_map(static fn (array $app): array => [
            'name' => (string) ($app['name'] ?? ''),
            'tagline' => (string) ($app['tagline'] ?? ''),
            'appStore' => (string) ($app['appStore'] ?? $appStoreUrl),
            'playStore' => (string) ($app['playStore'] ?? $playStoreUrl),
        ], $apps),
    ];
    $storeButton = 'inline-flex h-12 flex-1 items-center justify-center gap-2 rounded-md bg-foreground px-4 text-background transition-opacity hover:opacity-90 focus-visible:outline-none focus-visible:ring-[length:var(--ring-width)] focus-visible:ring-ring focus-visible:ring-offset-[length:var(--ring-offset-width)] focus-visible:ring-offset-card motion-reduce:transition-none';
@endphp

{{--
    App download stack — a fanned pile of app icons that opens into a row to
    pick one, and the two store badges that download the chosen app. The
    badges always work: with nothing chosen they point at the first app.
--}}
<section
    x-data="uiAppDownloadStack(@js($config))"
    data-slot="app-download-stack"
    {{ $attributes->merge(['class' => 'flex flex-col items-center gap-6 rounded-lg border border-border bg-card p-6 text-center text-card-foreground']) }}
>
    <div class="flex flex-col items-center gap-1">
        <h3 class="text-base font-semibold leading-tight">{{ $heading }}</h3>
        @if ($subtext)
            <p class="max-w-xs text-sm text-muted-foreground">{{ $subtext }}</p>
        @endif
    </div>

    {{-- Icon stack: collapsed = a fanned pile (one click opens it); expanded = a
         row of radio tiles. --}}
    <div class="flex flex-col items-center gap-3">
        <div
            role="radiogroup"
            aria-label="{{ __('Choose an app') }}"
            class="flex h-20 items-end justify-center"
            x-bind:class="expanded ? 'gap-3' : ''"
            @click="expanded || expand()"
        >
            @foreach ($apps as $i => $app)
                @php
                    $icon = $app['icon'] ?? '';
                    $name = $app['name'] ?? __('App');
                    $isImage = is_string($icon) && (str_starts_with($icon, 'http') || str_starts_with($icon, '/'));
                    $initial = $isImage ? '' : mb_strtoupper(mb_substr((string) ($icon !== '' ? $icon : $name), 0, 1));
                @endphp
                <button
                    type="button"
                    role="radio"
                    data-slot="app-download-stack-icon"
                    x-bind:style="tileStyle({{ $i }})"
                    @click="select({{ $i }})"
                    x-bind:tabindex="expanded ? 0 : ({{ $i }} === 0 ? 0 : -1)"
                    x-bind:aria-checked="isSelected({{ $i }}) ? 'true' : 'false'"
                    aria-label="{{ $name }}"
                    class="relative grid size-16 shrink-0 cursor-pointer place-items-center overflow-hidden rounded-lg border border-border bg-muted text-base font-semibold text-muted-foreground shadow-md outline-none motion-safe:transition-[transform,margin,box-shadow] motion-safe:duration-300 motion-safe:ease-out focus-visible:ring-[length:var(--ring-width)] focus-visible:ring-ring focus-visible:ring-offset-[length:var(--ring-offset-width)] focus-visible:ring-offset-card {{ $i === 0 ? '' : '-ms-6' }}"
                    x-bind:class="{
                        'ring-2 ring-primary ring-offset-2 ring-offset-card': isSelected({{ $i }}),
                        '!ms-0 hover:-translate-y-1': expanded,
                    }"
                >
                    @if ($isImage)
                        <img src="{{ $icon }}" alt="" class="size-full object-cover" loading="lazy" aria-hidden="true" />
                    @else
                        <span aria-hidden="true">{{ $initial }}</span>
                    @endif
                </button>
            @endforeach
        </div>

        {{-- What is chosen, or the hint to open the pile. --}}
        <p class="min-h-10 text-sm" aria-live="polite">
            <template x-if="selected !== null">
                <span class="flex flex-col"><span class="font-medium text-foreground" x-text="current.name"></span><span class="text-sm text-muted-foreground" x-text="current.tagline"></span></span>
            </template>
            <template x-if="selected === null">
                <button type="button" @click="toggle()" class="text-muted-foreground underline-offset-4 hover:text-foreground hover:underline focus-visible:outline-none focus-visible:rounded-sm focus-visible:ring-[length:var(--ring-width)] focus-visible:ring-ring" x-text="expanded ? '{{ __('Pick an app') }}' : '{{ __('Open the pile') }}'"></button>
            </template>
        </p>
    </div>

    {{-- Store badges: the standard black badge, glyph plus two lines. --}}
    <div class="flex w-full flex-col gap-2 sm:flex-row" data-slot="app-download-stack-stores">
        <a x-bind:href="current.appStore" href="{{ $config['apps'][0]['appStore'] ?? '#' }}" data-slot="app-download-stack-store" data-store="app-store" class="{{ $storeButton }}">
            <svg class="size-6 shrink-0" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01ZM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25Z" /></svg>
            <span class="flex flex-col items-start leading-none">
                <span class="whitespace-nowrap text-2xs uppercase opacity-80">{{ __('Download on the') }}</span>
                <span class="text-base font-semibold leading-tight">{{ __('App Store') }}</span>
            </span>
        </a>
        <a x-bind:href="current.playStore" href="{{ $config['apps'][0]['playStore'] ?? '#' }}" data-slot="app-download-stack-store" data-store="google-play" class="{{ $storeButton }}">
            <svg class="size-6 shrink-0" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M22.018 13.298l-3.919 2.218-3.515-3.493 3.543-3.521 3.891 2.202a1.49 1.49 0 0 1 0 2.594ZM1.337.924a1.486 1.486 0 0 0-.112.568v21.017c0 .217.045.419.124.6l11.155-11.087L1.337.924Zm12.207 10.065l3.258-3.238L3.45.195a1.466 1.466 0 0 0-.946-.179l11.04 10.973Zm0 2.067l-11 10.933c.298.036.612-.016.906-.183l13.324-7.54-3.23-3.21Z" /></svg>
            <span class="flex flex-col items-start leading-none">
                <span class="whitespace-nowrap text-2xs uppercase opacity-80">{{ __('Get it on') }}</span>
                <span class="text-base font-semibold leading-tight">{{ __('Google Play') }}</span>
            </span>
        </a>
    </div>
</section>

/**
 * App Download Stack behaviour — a fanned pile of app icons that opens into a
 * row to pick one; the store badges then point at the chosen app.
 *
 * State: `expanded` (pile or row) and `selected` (the chosen app index, or
 * null). `current` is the chosen app, or the first one, so the badges always
 * have a target. Selecting a tile opens the row when it is still a pile.
 *
 * The fan geometry is computed here, not spliced into Tailwind classes:
 * `tileStyle(i)` returns an inline `transform` (rotate + translate) so the
 * JIT scanner is never asked to see a dynamic class. Under
 * `prefers-reduced-motion: reduce` the fan rotation is dropped (icons sit
 * flat) and CSS transitions are skipped by the motion-safe classes in the
 * markup.
 *
 * 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('uiAppDownloadStack', (config = {}) => ({
        count: config.count ?? 0,
        apps: config.apps ?? [],
        expanded: false,
        selected: null,

        get reduceMotion() {
            return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
        },

        /** The chosen app, or the first one so the store badges always work. */
        get current() {
            return this.apps[this.selected ?? 0] ?? { name: '', tagline: '', appStore: '#', playStore: '#' };
        },

        expand() {
            this.expanded = true;
        },

        toggle() {
            this.expanded = !this.expanded;
            // Folding the pile back drops the choice too.
            if (!this.expanded) this.selected = null;
        },

        select(index) {
            if (!this.expanded) {
                this.expanded = true;
                this.selected = index;
                return;
            }
            this.selected = this.selected === index ? null : index;
            this.$dispatch('app-download-stack:select', { index: this.selected, app: this.selected === null ? null : this.apps[this.selected] });
        },

        isSelected(index) {
            return this.selected === index;
        },

        /**
         * Inline transform for icon tile `index` while collapsed: each tile is
         * rotated and pushed outward from the centre so they fan like a hand
         * of cards. Returns '' when expanded so the row uses its flow layout.
         */
        tileStyle(index) {
            if (this.expanded) return '';
            const n = Math.max(this.count, 1);
            const mid = (n - 1) / 2;
            const offset = index - mid;
            const spread = 16;
            const tilt = this.reduceMotion ? 0 : 8;
            const lift = this.reduceMotion ? 0 : Math.abs(offset) * 4;
            return `transform: translateX(${(offset * spread).toFixed(2)}px) translateY(${lift.toFixed(2)}px) rotate(${(offset * tilt).toFixed(2)}deg); z-index: ${n - Math.abs(Math.round(offset))}`;
        },
    }));
});