complete story 9.11 with qa tests

2026-01-03 02:57:43 +02:00
parent c96f31c702
commit 5a19903e30
8 changed files with 789 additions and 24 deletions
@@ -703,6 +703,106 @@ img, video, iframe {
    @apply font-semibold;
 }

+/* ==========================================================================
+   Animations & Micro-interactions (Story 9.11)
+   Subtle, professional animations under 300ms
+   ========================================================================== */
+
+/* Base transitions */
+.transition-default {
+    @apply transition-all duration-150 ease-in-out;
+}
+
+.transition-slow {
+    @apply transition-all duration-200 ease-in-out;
+}
+
+/* Button hover transition - 150ms ease */
+.btn {
+    @apply transition-colors duration-150;
+}
+
+/* Card lift effect - 200ms ease */
+.card-hover {
+    @apply transition-all duration-200;
+}
+
+.card-hover:hover {
+    @apply -translate-y-0.5 shadow-card-hover;
+}
+
+/* Link color transition */
+.link-transition {
+    @apply transition-colors duration-150;
+}
+
+/* Skeleton loader - pulse animation */
+.skeleton {
+    @apply animate-pulse bg-charcoal/10 rounded;
+}
+
+/* Toast animation classes */
+.toast-enter {
+    @apply transform translate-x-full opacity-0;
+}
+
+.toast-enter-active {
+    @apply transform translate-x-0 opacity-100 transition-all duration-200;
+}
+
+/* RTL toast animation - slides from left */
+[dir="rtl"] .toast-enter {
+    @apply -translate-x-full;
+}
+
+[dir="rtl"] .toast-enter-active {
+    @apply translate-x-0;
+}
+
+/* Success checkmark animation */
+@keyframes checkmark {
+    0% { stroke-dashoffset: 100; }
+    100% { stroke-dashoffset: 0; }
+}
+
+.checkmark-animated path {
+    stroke-dasharray: 100;
+    animation: checkmark 0.3s ease-in-out forwards;
+}
+
+/* Error shake animation */
+@keyframes shake {
+    0%, 100% { transform: translateX(0); }
+    25% { transform: translateX(-5px); }
+    75% { transform: translateX(5px); }
+}
+
+.shake {
+    animation: shake 0.3s ease-in-out;
+}
+
+/* Modal animation classes */
+.modal-enter {
+    @apply opacity-0 scale-95;
+}
+
+.modal-enter-active {
+    @apply opacity-100 scale-100 transition-all duration-200;
+}
+
+.modal-backdrop-enter {
+    @apply opacity-0;
+}
+
+.modal-backdrop-enter-active {
+    @apply opacity-100 transition-opacity duration-200;
+}
+
+/* Progress bar animation */
+.progress-bar {
+    @apply transition-all duration-200 ease-out;
+}
+
 /* ==========================================================================
   Accessibility Styles (Story 9.10)
   WCAG 2.1 AA Compliance
@@ -0,0 +1,30 @@
+@props([
+    'animated' => true,
+    'size' => 'md',
+])
+
+@php
+    $sizes = [
+        'sm' => 'h-4 w-4',
+        'md' => 'h-6 w-6',
+        'lg' => 'h-8 w-8',
+        'xl' => 'h-12 w-12',
+    ];
+    $sizeClass = $sizes[$size] ?? $sizes['md'];
+@endphp
+
+<svg
+    {{ $attributes->merge(['class' => $sizeClass . ' text-success ' . ($animated ? 'checkmark-animated' : '')]) }}
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    aria-hidden="true"
+>
+    <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        d="M5 13l4 4L19 7"
+    />
+</svg>
@@ -0,0 +1,37 @@
+@props([
+    'lines' => 3,
+    'type' => 'text',
+])
+
+@if($type === 'text')
+    {{-- Text skeleton - multiple lines with last line shorter --}}
+    <div {{ $attributes->merge(['class' => 'space-y-3']) }}>
+        @for($i = 0; $i < $lines; $i++)
+            <div class="skeleton h-4 {{ $i === $lines - 1 ? 'w-2/3' : 'w-full' }}"></div>
+        @endfor
+    </div>
+@elseif($type === 'card')
+    {{-- Card skeleton - image placeholder + text lines --}}
+    <div {{ $attributes->merge(['class' => 'space-y-4']) }}>
+        <div class="skeleton h-40 w-full"></div>
+        <div class="space-y-3">
+            <div class="skeleton h-4 w-3/4"></div>
+            <div class="skeleton h-4 w-full"></div>
+            <div class="skeleton h-4 w-2/3"></div>
+        </div>
+    </div>
+@elseif($type === 'avatar')
+    {{-- Avatar skeleton - circular placeholder --}}
+    <div class="skeleton h-12 w-12 rounded-full {{ $attributes->get('class') }}"></div>
+@elseif($type === 'button')
+    {{-- Button skeleton --}}
+    <div class="skeleton h-10 w-24 rounded-md {{ $attributes->get('class') }}"></div>
+@elseif($type === 'table-row')
+    {{-- Table row skeleton --}}
+    <div {{ $attributes->merge(['class' => 'flex items-center gap-4']) }}>
+        <div class="skeleton h-4 w-1/4"></div>
+        <div class="skeleton h-4 w-1/3"></div>
+        <div class="skeleton h-4 w-1/4"></div>
+        <div class="skeleton h-4 w-1/6"></div>
+    </div>
+@endif
@@ -0,0 +1,41 @@
+@props([
+    'size' => 'md',
+    'label' => null,
+    'inline' => false,
+])
+
+@php
+    $sizes = [
+        'sm' => 'h-4 w-4',
+        'md' => 'h-5 w-5',
+        'lg' => 'h-8 w-8',
+    ];
+    $sizeClass = $sizes[$size] ?? $sizes['md'];
+@endphp
+
+<div {{ $attributes->merge(['class' => $inline ? 'inline-flex items-center gap-2' : 'flex items-center gap-2']) }}>
+    <svg
+        class="animate-spin {{ $sizeClass }} text-gold"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        aria-hidden="true"
+    >
+        <circle
+            class="opacity-25"
+            cx="12"
+            cy="12"
+            r="10"
+            stroke="currentColor"
+            stroke-width="4"
+        ></circle>
+        <path
+            class="opacity-75"
+            fill="currentColor"
+            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+        ></path>
+    </svg>
+    @if($label !== false)
+        <span>{{ $label ?? __('common.loading') }}</span>
+    @endif
+</div>
@@ -0,0 +1,87 @@
+@props([
+    'position' => 'top-right',
+])
+
+@php
+    $positions = [
+        'top-right' => 'top-4 end-4',
+        'top-left' => 'top-4 start-4',
+        'bottom-right' => 'bottom-4 end-4',
+        'bottom-left' => 'bottom-4 start-4',
+    ];
+    $positionClass = $positions[$position] ?? $positions['top-right'];
+@endphp
+
+<div
+    x-data="{
+        toasts: [],
+        add(toast) {
+            const id = Date.now();
+            this.toasts.push({ id, ...toast });
+            setTimeout(() => this.remove(id), toast.duration || 5000);
+        },
+        remove(id) {
+            this.toasts = this.toasts.filter(t => t.id !== id);
+        }
+    }"
+    x-on:toast.window="add($event.detail)"
+    {{ $attributes->merge(['class' => 'fixed z-50 ' . $positionClass]) }}
+    aria-live="polite"
+    aria-atomic="true"
+>
+    <template x-for="toast in toasts" :key="toast.id">
+        <div
+            x-show="true"
+            x-transition:enter="toast-enter"
+            x-transition:enter-start="toast-enter"
+            x-transition:enter-end="toast-enter-active"
+            x-transition:leave="toast-enter-active"
+            x-transition:leave-start="toast-enter-active"
+            x-transition:leave-end="toast-enter"
+            class="mb-3 flex items-center gap-3 rounded-lg p-4 shadow-lg min-w-[300px] max-w-md"
+            :class="{
+                'bg-success text-white': toast.type === 'success',
+                'bg-danger text-white': toast.type === 'error',
+                'bg-warning text-navy': toast.type === 'warning',
+                'bg-navy text-white': toast.type === 'info' || !toast.type
+            }"
+            role="alert"
+        >
+            {{-- Icon based on type --}}
+            <template x-if="toast.type === 'success'">
+                <svg class="h-5 w-5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                </svg>
+            </template>
+            <template x-if="toast.type === 'error'">
+                <svg class="h-5 w-5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+            </template>
+            <template x-if="toast.type === 'warning'">
+                <svg class="h-5 w-5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+                </svg>
+            </template>
+            <template x-if="toast.type === 'info' || !toast.type">
+                <svg class="h-5 w-5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+            </template>
+
+            {{-- Message --}}
+            <span x-text="toast.message" class="flex-1"></span>
+
+            {{-- Close button --}}
+            <button
+                x-on:click="remove(toast.id)"
+                class="flex-shrink-0 opacity-70 hover:opacity-100 transition-opacity"
+                :aria-label="'{{ __('common.close') }}'"
+            >
+                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+            </button>
+        </div>
+    </template>
+</div>