complete story 9.6 with qa tests

2026-01-03 02:09:27 +02:00
parent 67502af83d
commit 35591d76b4
6 changed files with 499 additions and 29 deletions
@@ -408,3 +408,21 @@ button.btn-danger:disabled {
 [dir="rtl"] .select-field {
    @apply text-right;
 }
+
+/* ==========================================================================
+   Card & Container Styling System (Story 9.6)
+   ========================================================================== */
+
+/* Container max-width - 1200px centered */
+.container-max {
+    @apply max-w-[1200px] mx-auto px-4 sm:px-6 lg:px-8;
+}
+
+/* Card shadow values */
+.shadow-card {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.shadow-card-hover {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
@@ -0,0 +1,29 @@
+@props([
+    'variant' => 'default',
+    'hover' => false,
+    'highlight' => false,
+])
+
+@php
+    $classes = 'bg-cream rounded-lg p-6';
+
+    // Variant-based shadow (default uses custom shadow from specs: 0 2px 8px rgba(0,0,0,0.1))
+    $classes .= match($variant) {
+        'elevated' => ' shadow-md',
+        default => ' shadow-card',
+    };
+
+    // Hover effect - subtle lift with shadow increase
+    if ($hover) {
+        $classes .= ' hover:shadow-card-hover hover:-translate-y-0.5 transition-all duration-200 cursor-pointer';
+    }
+
+    // Gold highlight border (uses border-s for RTL support)
+    if ($highlight) {
+        $classes .= ' border-s-4 border-gold';
+    }
+@endphp
+
+<div {{ $attributes->merge(['class' => $classes]) }}>
+    {{ $slot }}
+</div>
@@ -0,0 +1,33 @@
+@props([
+    'icon' => null,
+    'value',
+    'label',
+    'trend' => null,
+])
+
+<x-ui.card>
+    <div class="flex items-center gap-4">
+        @if($icon)
+            <div class="p-3 bg-gold/10 rounded-lg">
+                <flux:icon :name="$icon" class="w-6 h-6 text-gold" />
+            </div>
+        @endif
+        <div>
+            <div class="text-2xl font-bold text-navy">{{ $value }}</div>
+            <div class="text-sm text-charcoal/70">{{ $label }}</div>
+            @if($trend !== null)
+                @php
+                    $trendClass = match(true) {
+                        $trend > 0 => 'text-success',
+                        $trend < 0 => 'text-danger',
+                        default => 'text-charcoal/50',
+                    };
+                    $trendPrefix = $trend > 0 ? '+' : '';
+                @endphp
+                <div class="text-xs {{ $trendClass }}">
+                    {{ $trendPrefix }}{{ $trend }}%
+                </div>
+            @endif
+        </div>
+    </div>
+</x-ui.card>